/* ============================================================================
   CUARTO OSCURO: el sistema de diseno de Xarpen (2026-09-16).
   Extraido del lienzo v19 del telefono y aprobado para escritorio en el lienzo
   "Cuarto Oscuro · escritorio" (https://claude.ai/artifact/HiD3CseGEmt1EjT93VMmtZ).
   Plan completo: ~/.claude/plans/cuarto-oscuro.md.

   Por que un archivo aparte y cargado AL FINAL: styles.css (9k lineas) es el archivo mas
   caliente del repo y casi siempre hay otra sesion tocandolo. Aqui vive la capa nueva
   entera, encima de lo viejo, sin editarlo; en T7 se funde y se borra lo que quede inerte.

   Por que casi todo va con prefijo :root[data-theme]: styles.css tiene reglas de tema
   oscuro con especificidad :root[data-theme="dark"] .clase. Con el mismo peso y cargado
   despues, esta hoja gana sin !important. theme-init.js pone data-theme siempre.

   Las cinco reglas:
   1. Menos en pantalla.  2. Aire, no cajas.  3. Pildora = se toca; 16 px = flota;
   4 px = contenido.  4. Color solo si significa algo (--urge).  5. Movimiento rapido,
   con origen, y nada en lo que se usa cien veces al dia ni con teclado.
   ============================================================================ */

/* ---------------------------------- Tokens ---------------------------------- */
/* Nombres nuevos a proposito: los viejos (--ink, --muted, --hair...) NO cambian de valor,
   porque portal.html y admin.html cargan styles.css y se moverian sin que nadie los mirara. */
:root{
  --x:#EFEBE0; --pag:#F3F1EA; --piedra:#FCFBF7; --piedra-on:#ECE9DF;
  --tinta:#2B2926; --texto:#2B2926; --medio:#6A675D; --apagado:#6A675D; --punto:#8C897F;
  /* Almagre #B74637: el UNICO color de la marca Xarpen (taller/marca-xarpen/README.md, fase 1 del
     plan de aplicacion, 2026-09-22). Vive en dos sitios y nada mas: lo urgente (--urge) y el punto
     del isotipo (--marca-punto, que NO se aclara en oscuro porque ahi es una forma, no texto).
     En oscuro --urge sube de luz conservando tono y croma porque casi siempre es TEXTO y necesita
     4.5:1. Con esto desaparecen #D97757 y #A9522F como colores de marca. */
  --linea:#E7E3D8; --urge:#B74637; --urge-t:#FCFBF7; --marca-punto:#B74637;

  /* Letra, escala de tipo y radio: estaban en styles.css, y mientras siguieran ahi este archivo
     usaba 11 tokens que no definia -- o sea que el sistema de diseno NO se sostenia solo y no se
     podia adelgazar styles.css sin romperlo. Mismos valores, byte a byte. --t-campo NO baja de
     16px: debajo de eso iOS hace zoom al enfocar un campo. El radio vive con los demas porque la
     geometria es la misma en los dos temas; lo que cambia entre ellos es la paleta. */
  --sans:'Instrument Sans',system-ui,sans-serif;
  --r:4px;
  --t-eti:10px; --t-meta:12px; --t-texto:14px; --t-campo:16px; --t-sub:18px; --t-titulo:24px; --t-saludo:32px;
  --menu:#FCFBF7; --hoja:#FCFBF7; --caja:rgba(252,251,247,.96); --velo:rgba(43,41,38,.28);
  --boton:#2B2926; --boton-t:#FCFBF7; --tinte-toque:rgba(43,41,38,.045);
  --puntos:rgba(43,41,38,.08); --grano-x:0;
  /* La pared de museo del Inicio (2026-09-18): la pared es un tono bajo la pagina y el paspartu
     la unica superficie casi blanca. En claro NO puede heredar --tinta (casi negra aqui). */
  --pared:#E9E5DA; --paspartu:#FDFCF9;
  /* Las luciernagas del modo de conversar (ver .vozc-aurora b). Tres tonos y no uno, porque doce
     puntos del mismo color se leen como polvo en la pantalla y no como luz. En claro NO pueden
     ser blancos: un punto brillante sobre papel marfil no se ve, asi que aqui son ambar y
     azul/verde apagados. */
  --luz-1:#C98A4A; --luz-2:#6E7FA8; --luz-3:#5C8F7E;
  /* La onda del boton que abre la voz. Son OPACOS y propios, no los `--aurora-*`: esos llevan
     alpha para poder mezclarse entre ellos cuando son cortinas borrosas, y a 19 px encima de un
     boton eso se lava hasta parecer gris. El primer tono no esta aqui porque es `--urge`. */
  --onda-2:#63499A; --onda-3:#3A6FB0; --onda-4:#2E8A73;
  /* La luz de prisma de la marca (lienzo "diseno prisma"): rosa, ambar, blanco, menta, azul y
     violeta cruzando en diagonal. Es la misma en los dos temas: es luz, no superficie. */
  --prisma-luz:linear-gradient(105deg, transparent 38%, rgba(255,70,110,.5) 42%, rgba(255,190,80,.58) 44.3%, rgba(255,255,255,.82) 46.6%, rgba(110,255,210,.56) 48.9%, rgba(90,150,255,.5) 51.2%, rgba(190,110,255,.42) 53.4%, transparent 57%);
  --sombra-flota:0 10px 30px -14px rgba(43,41,38,.16), inset 0 0 0 1px rgba(43,41,38,.09);
  --sombra-menu:0 12px 32px -14px rgba(43,41,38,.18), inset 0 0 0 1px rgba(43,41,38,.09);

  --r-flota:16px; --r-pildora:999px;
  --curva-arrastre:cubic-bezier(.32,.72,0,1);
  --curva-entra:cubic-bezier(.16,1,.3,1);
  --curva-cambia:cubic-bezier(.4,0,.2,1);
  --lento:1;
  --d-toque:calc(120ms * var(--lento));
  --d-menu:calc(120ms * var(--lento));  --d-menu-sale:calc(80ms * var(--lento));
  --d-ventana:calc(180ms * var(--lento)); --d-ventana-sale:calc(120ms * var(--lento));
  --d-aviso:calc(200ms * var(--lento)); --d-aviso-sale:calc(140ms * var(--lento));
  --d-hoja:calc(280ms * var(--lento)); --d-hoja-sale:calc(200ms * var(--lento));
  --d-pagina:calc(240ms * var(--lento));
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;
  --z-pegajoso:20; --z-menu:220; --z-velo:300; --z-aviso:320;
}
/* Tema claro: el naranja decorativo se va, igual que en oscuro desde 2026-09-09; el color queda para
   --urge y los estados. NO en el portal: ahi --accent es el color del estudio (o su default) frente a
   su cliente, y este archivo tambien se carga en portal.html. */
:root:not([data-theme="dark"]):not(:has(body.co-portal)){
  --ok:#5E7A55; --gold:#9C7A3C;
  --accent:#2B2926; --accent-solido:#2B2926; --accent-tinta:#FCFBF7;
  --tint:rgba(43,41,38,.06); --tint-xarpie:rgba(43,41,38,.06);
}
/* .edg (editor de galeria) es SIEMPRE oscuro, tambien con el CRM en claro (decision 4 de
   galerias unificadas): recibe la misma paleta oscura sobre su subarbol, o las reglas de Cuarto
   Oscuro que pintan con tokens lo dejaban con el panel claro y el texto claro. */
:root[data-theme="dark"], .edg{
  --x:#060605; --pag:#0F0F0E; --piedra:#191917; --piedra-on:#272624;
  --tinta:#E4E1DA; --texto:#C9C6BF; --medio:#A6A39C; --apagado:#85827B; --punto:#66645F;
  --linea:#232220; --urge:#D46050; --urge-t:#0F0F0E; --marca-punto:#B74637;
  --pared:#141312; --paspartu:#E4E1DA;
  --luz-1:#F2E4CF; --luz-2:#CFE0EE; --luz-3:#D2E9DB;   /* luciernagas: marfil, azul y verde */
  --onda-2:#7A5CA8; --onda-3:#4F86C6; --onda-4:#3FA88F; /* la onda del boton de voz */
  --menu:#2A2927; --hoja:#191917; --caja:rgba(25,25,23,.92); --velo:rgba(0,0,0,.55);
  --boton:#C9C6BF; --boton-t:#191917; --tinte-toque:rgba(255,255,255,.045);
  --puntos:rgba(201,198,191,.04); --grano-x:.165;
  --sombra-flota:0 22px 44px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06);
  --sombra-menu:0 24px 50px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05);
}
html.co-lento{ --lento:4; }

/* ------------------------------ Base de la app ------------------------------ */
:root[data-theme] a:focus-visible, :root[data-theme] button:focus-visible, :root[data-theme] input:focus-visible,
:root[data-theme] select:focus-visible, :root[data-theme] textarea:focus-visible, :root[data-theme] [tabindex]:focus-visible{
  outline:2px solid var(--tinta); outline-offset:2px;
}
:root[data-theme] ::-webkit-scrollbar-thumb{ background:var(--piedra-on); border-color:var(--pag); border-radius:var(--r-pildora); }
:root[data-theme] ::-webkit-scrollbar-track{ background:transparent; }

/* Presionar: el boton se hunde. Transicion (no keyframe) para que se pueda interrumpir. */
:root[data-theme] :is(.btn, .chip, .fchip, .seg-btn, .cp-navcfg, .cp-modo-btn, .co-boton, .co-icono){
  transition:transform calc(140ms * var(--lento)) var(--curva-entra), background-color var(--d-toque) var(--curva-cambia), color var(--d-toque) var(--curva-cambia), opacity var(--d-toque) var(--curva-cambia);
}
:root[data-theme] :is(.btn, .chip, .fchip, .seg-btn, .cp-navcfg, .cp-modo-btn, .co-boton, .co-icono):active:not(:disabled){
  transform:scale(.97); transition-duration:calc(60ms * var(--lento));
}

/* -------------------------------- Botones: pildora -------------------------------- */
:root[data-theme] .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:0 16px; border:0; border-radius:var(--r-pildora);
  background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); font-weight:500; letter-spacing:0; line-height:1.2;
  white-space:nowrap; box-shadow:none; filter:none;
}
:root[data-theme] .btn-sm{ min-height:32px; padding:0 12px; font-size:var(--t-texto); }
:root[data-theme] .btn-p{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .btn-gh{ background:transparent; color:var(--texto); }
:root[data-theme] .btn-danger{ background:transparent; color:var(--urge); border:0; }
@media (hover:hover){
  :root[data-theme] .btn:hover{ background:var(--piedra-on); color:var(--tinta); filter:none; box-shadow:inset 0 0 0 100px var(--tinte-toque); }
  :root[data-theme] .btn-p:hover{ background:var(--boton); color:var(--boton-t); box-shadow:inset 0 0 0 100px rgba(127,127,127,.12); }
  :root[data-theme] .btn-gh:hover{ background:var(--tinte-toque); box-shadow:none; }
  :root[data-theme] .btn-danger:hover{ background:var(--urge); color:var(--urge-t); box-shadow:none; }
}
:root[data-theme] .btn:disabled{ opacity:.5; }

/* ------------------------ Titulos de pagina: sin raya ni etiqueta ------------------------ */
:root[data-theme] .phead{ border-bottom:0; padding-bottom:0; margin-bottom:var(--e-5); align-items:flex-end; }
:root[data-theme] .ptitle{ font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); }
/* Etiquetas en mayusculas arriba de cada seccion: fuera (filtro anti-plantilla). Queda la
   palabra, chica y gris, solo donde el HTML la pone. */
:root[data-theme] .peyebrow{ padding-left:0; font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:var(--t-meta); color:var(--apagado); margin-bottom:4px; }
:root[data-theme] .peyebrow:before{ display:none; }
:root[data-theme] :is(.flabel, .statlabel, .w-title, .um-role, .th, .pl-head){ font-family:var(--sans); letter-spacing:0; text-transform:none; }
:root[data-theme] .flabel{ font-size:var(--t-meta); color:var(--medio); margin-bottom:6px; }
:root[data-theme] .statlabel{ font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .statnum{ font-weight:500; color:var(--tinta); letter-spacing:-.02em; }

/* ----------------------------- Aire, no cajas ----------------------------- */
/* Tarjetas, bloques y estadisticas dejan de ser cajas: el contenido se agrupa por aire. */
:root[data-theme] :is(.card, .stat, .pblock, .settcard, .ceo-kpi){
  background:transparent; border:0; box-shadow:none; border-radius:var(--r);
}
:root[data-theme] .stat{ padding:4px 0 8px; }
:root[data-theme] .statbar, :root[data-theme] .ceo-kpi-bar{ display:none; }
:root[data-theme] .pblock-h{ border-bottom:0; padding:12px 0 4px; }
:root[data-theme] .settcard{ padding:0; }
:root[data-theme] .kpigrid{ gap:var(--e-6); }

/* Widgets del panel: se quedan como modulos (se arrastran y se reacomodan: son objetos, no
   filas), pero sin borde duro. Flotan poco: piedra sin sombra. */
:root[data-theme] .widget{ background:var(--piedra); border:0; box-shadow:none; border-radius:var(--r-flota); }
:root[data-theme] .w-head{ border-bottom:0; padding:14px 16px 6px; }
:root[data-theme] .w-title{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
:root[data-theme] .w-count{ font-family:var(--sans); background:var(--piedra-on); border-radius:var(--r-pildora); }
:root[data-theme] .w-body{ padding:6px 16px 16px; }
:root[data-theme] .w-menu{ border:0; border-radius:var(--r-pildora); }

/* Tablas: una sola linea entre filas, sin marco ni fondo ni mayusculas. */
:root[data-theme] .table{ background:transparent; border:0; border-radius:0; overflow:visible; }
:root[data-theme] .table th{ font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:var(--t-meta); color:var(--apagado); padding:8px 12px; border-bottom:1px solid var(--linea); }
:root[data-theme] .table td{ padding:12px; border-bottom:1px solid var(--linea); color:var(--texto); }
:root[data-theme] .table tr:last-child td{ border-bottom:0; }
:root[data-theme] .trow{ transition:background-color var(--d-toque) var(--curva-cambia); }
@media (hover:hover){ :root[data-theme] .trow:hover{ background:var(--tinte-toque); } }
:root[data-theme] .tname{ font-weight:500; color:var(--tinta); }
:root[data-theme] .tsub{ color:var(--medio); }
:root[data-theme] .docnum{ font-family:var(--sans); letter-spacing:0; text-transform:none; color:var(--apagado); }

/* Fichas de cliente y de boda: las secciones son bloques de aire, no tarjetas. */
:root[data-theme] .fsec{ background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
:root[data-theme] .fsec.widget{ background:transparent; }
:root[data-theme] .fsec-h{ border-bottom:0; padding:16px 0 4px; }
:root[data-theme] .fsec-t{ font-weight:400; font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .fsec-body{ padding:4px 0 8px; }
:root[data-theme] .fsec-pista{ margin:6px 0 14px; }
:root[data-theme] .fsec-xarpie{ border-color:transparent; }
/* Siguiente paso: texto con dos botones, sin tarjeta invertida, textura ni mancha de color. */
:root[data-theme] .fsec-next, :root[data-theme] .fsec-next.fondo-invertido{ background:transparent; color:var(--texto); }
:root[data-theme] .fsec-next.fondo::before, :root[data-theme] .fsec-next.fondo::after{ display:none; }
:root[data-theme] .fsec-next .fsec-t{ color:var(--apagado); opacity:1; }
:root[data-theme] .fb-next{ padding:2px 0 4px; }
:root[data-theme] .fb-next-hatch{ display:none; }
:root[data-theme] .fb-next-t{ font-size:var(--t-sub); font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--tinta); }
:root[data-theme] .fb-next-d{ color:var(--medio); opacity:1; }
:root[data-theme] .fb-next-btn{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .fb-next-btn-sec{ background:var(--piedra-on); color:var(--tinta); border:0; }

/* ------------------------ Filtros, pestanas y segmentados ------------------------ */
/* Filtros de datos se quedan, pero como pildoras calladas (no mayusculas, no caja). */
:root[data-theme] .fchip{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px;
  font-size:var(--t-texto); letter-spacing:0; text-transform:none; border:0; border-radius:var(--r-pildora);
  background:transparent; color:var(--medio);
}
:root[data-theme] .fchip.on{ background:var(--piedra-on); color:var(--tinta); }
@media (hover:hover){ :root[data-theme] .fchip:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }
:root[data-theme] .chip{ border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto); }
:root[data-theme] .chip.on{ background:var(--piedra-on); color:var(--tinta); box-shadow:none; }

/* Pestanas: texto con linea de 2 px. */
:root[data-theme] :is(.tab, .aj-tab){ border:0; border-radius:0; background:transparent; color:var(--medio); font-weight:400; letter-spacing:0; padding:0 0 0; height:40px; margin-right:20px; box-shadow:inset 0 -2px 0 transparent; }
:root[data-theme] :is(.tab, .aj-tab).on{ color:var(--tinta); box-shadow:inset 0 -2px 0 var(--tinta); border-bottom-color:transparent; }
:root[data-theme] .tab.on:after{ display:none; }
@media (hover:hover){ :root[data-theme] :is(.tab, .aj-tab):hover{ background:transparent; color:var(--tinta); } }
:root[data-theme] .aj-tabs{ gap:0; border-bottom:0; box-shadow:inset 0 -1px 0 var(--linea); }
:root[data-theme] .subbar{ background:transparent; backdrop-filter:none; border-bottom:0; box-shadow:inset 0 -1px 0 var(--linea); gap:20px; }
:root[data-theme] .subbar .subtab{ border:0; border-radius:0; background:transparent; color:var(--medio); font-size:var(--t-texto); font-weight:400; height:40px; padding:0; box-shadow:inset 0 -2px 0 transparent; }
:root[data-theme] .subbar .subtab.on{ color:var(--tinta); background:transparent; box-shadow:inset 0 -2px 0 var(--tinta); }

/* #subtabs (la fila de secciones del CRM) ya era texto con linea; solo le sobraba el fondo tenido de .subtab.on. */
:root[data-theme] .subtabs{ background:var(--pag); border-bottom:0; box-shadow:inset 0 -1px 0 var(--linea); }
:root[data-theme] .subtabs .subtab{ font-weight:400; color:var(--medio); }
:root[data-theme] .subtabs .subtab.on{ background:transparent; color:var(--tinta); }
:root[data-theme] .subtabs .subtab.on::after{ background:var(--tinta); border-radius:0; }
:root[data-theme] .subtabs .subtab[aria-expanded="true"]{ background:transparent; color:var(--tinta); }

/* Segmentado: un grupo de piedra con la opcion activa encendida. */
:root[data-theme] .seg{ gap:2px; padding:2px; background:var(--piedra); border:0; border-radius:var(--r-pildora); }
:root[data-theme] .seg-btn{ border-radius:var(--r-pildora); color:var(--medio); padding:0 12px; min-height:32px; }
:root[data-theme] .seg-btn.on{ background:var(--piedra-on); color:var(--tinta); font-weight:500; box-shadow:none; }

/* Pestanas que hoy son .seg o .fchips (Documentos, Finanzas...): texto con linea. Se marcan por id. */
:root[data-theme] #doc-tabs{ max-width:none !important; gap:24px; padding:0; background:transparent; border-radius:0; box-shadow:inset 0 -1px 0 var(--linea); margin-bottom:24px !important; }
:root[data-theme] #doc-tabs .seg-btn{ flex:none; min-height:40px; padding:0; border-radius:0; background:transparent; color:var(--medio); font-weight:400; box-shadow:inset 0 -2px 0 transparent; }
:root[data-theme] #doc-tabs .seg-btn.on{ background:transparent; color:var(--tinta); box-shadow:inset 0 -2px 0 var(--tinta); }

/* Calendario: tiene su propia paleta (--cal-*). Se alinea a Cuarto Oscuro: el naranja solo si algo
   vence; la seleccion y "hoy" van en tinta. */
:root[data-theme] .calfull{
  --cal-bg:var(--pag); --cal-panel:var(--piedra); --cal-panel2:var(--piedra-on);
  --cal-line:var(--linea); --cal-line2:var(--linea);
  --cal-ink:var(--tinta); --cal-ink2:var(--medio); --cal-ink3:var(--apagado);
  --cal-accent:var(--boton); --cal-accent2:var(--boton);
}

/* Grupos de chips que en realidad son pestanas (Finanzas, Tienda, vistas de Pendientes, secciones de
   ajustes de galeria): se marcan con .co-pestanas en el HTML y se ven como texto con linea. */
:root[data-theme] .fchips.co-pestanas{ gap:24px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; box-shadow:inset 0 -1px 0 var(--linea); }
:root[data-theme] .co-pestanas .fchip{ min-height:40px; padding:0; border-radius:0; background:transparent; color:var(--medio); box-shadow:inset 0 -2px 0 transparent; flex:none; }
:root[data-theme] .co-pestanas .fchip.on{ background:transparent; color:var(--tinta); box-shadow:inset 0 -2px 0 var(--tinta); }
@media (hover:hover){ :root[data-theme] .co-pestanas .fchip:not(.on):hover{ background:transparent; color:var(--tinta); } }

/* ------------------------------------ Campos ------------------------------------ */
:root[data-theme] :is(.inp, .sel){
  min-height:40px; padding:0 14px; border:0; border-radius:20px;
  background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font-size:var(--t-texto);
}
:root[data-theme] .ta{ padding:10px 14px; border:0; border-radius:var(--r-flota); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font-size:var(--t-texto); }
:root[data-theme] :is(.inp, .sel, .ta):focus{ background:var(--pag); border-color:transparent; box-shadow:inset 0 0 0 1px var(--linea), 0 0 0 2px var(--punto); }
:root[data-theme] :is(.inp, .ta)::placeholder{ color:var(--apagado); }
:root[data-theme] .search{ min-height:40px; padding:0 14px; border:0; border-radius:20px; background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); }
:root[data-theme] .search:focus-within{ box-shadow:inset 0 0 0 1px var(--linea), 0 0 0 2px var(--punto); }
:root[data-theme] .search .navdot{ border-color:var(--punto); }
@media (max-width:860px){
  /* En el telefono los campos no bajan de 16 px: por debajo iOS hace zoom al enfocar. */
  :root[data-theme] :is(.inp, .sel, .ta, .search input){ font-size:var(--t-campo); }
}

/* ------------------------ Ventanas: sin barra de titulo ni x ------------------------ */
/* La primera linea (.mtitle) dice que es la ventana; se cierra con Cancelar, fuera o Escape.
   La x sigue en el DOM para lector de pantalla y teclado, solo se esconde a la vista. */
:root[data-theme] .ov{ background:var(--velo); animation:co-fundido var(--d-ventana) var(--curva-cambia) both; }
:root[data-theme] .modal{
  background:var(--hoja); border:0; border-radius:var(--r-flota); box-shadow:var(--sombra-menu);
  animation:co-ventana var(--d-ventana) var(--curva-entra) both;
}
:root[data-theme] .mhead{ border-bottom:0; padding:24px 24px 0; position:relative; }
:root[data-theme] .mtitle{ font-family:var(--sans); font-size:var(--t-sub); font-weight:500; letter-spacing:-.01em; color:var(--tinta); }
:root[data-theme] .mhead .x, :root[data-theme] .modal > .x{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:root[data-theme] .mhead .x:focus-visible{ position:absolute; top:16px; right:16px; width:auto; height:32px; margin:0; padding:0 12px; clip:auto; overflow:visible; border-radius:var(--r-pildora); background:var(--piedra-on); }
:root[data-theme] .mbody{ padding:16px 24px 8px; }
:root[data-theme] .mfoot{ border-top:0; padding:16px 24px 24px; justify-content:flex-end; }
@keyframes co-ventana{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
@keyframes co-fundido{ from{ opacity:0; } to{ opacity:1; } }

/* ---------------------------------- Menus ---------------------------------- */
:root[data-theme] :is(.usermenu, .w-pop, .posp-menu, .pendw-pop){
  background:var(--menu); border:0; border-radius:var(--r-flota); box-shadow:var(--sombra-menu); padding:6px;
  animation:co-menu var(--d-menu) var(--curva-entra) both;
}
:root[data-theme] .usermenu{ transform-origin:top right; }
:root[data-theme] :is(.um-item, .w-pop-item, .pendw-pop-item){ border-radius:var(--r); color:var(--texto); min-height:36px; padding:8px 10px; }
@media (hover:hover){ :root[data-theme] :is(.um-item, .w-pop-item):hover{ background:var(--tinte-toque); color:var(--tinta); } }
:root[data-theme] .um-danger{ color:var(--urge); }
@media (hover:hover){ :root[data-theme] .um-danger:hover{ background:var(--tinte-toque); color:var(--urge); } }
:root[data-theme] .um-head{ border-bottom:0; margin-bottom:2px; }
:root[data-theme] .um-name{ font-weight:500; color:var(--tinta); }
:root[data-theme] .um-role{ font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .um-sep{ height:8px; background:transparent; margin:0; }
@keyframes co-menu{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }

/* ---------------------------------- Aviso ---------------------------------- */
:root[data-theme] #toast{
  background:var(--menu); color:var(--tinta); border-radius:var(--r-flota); box-shadow:var(--sombra-menu);
  min-height:44px; padding:0 16px; gap:12px; bottom:24px;
  transition:opacity var(--d-aviso-sale) var(--curva-cambia), transform var(--d-aviso-sale) var(--curva-cambia);
  transform:translateX(-50%) translateY(8px);
}
:root[data-theme] #toast.show{ transition:opacity var(--d-aviso) var(--curva-entra), transform var(--d-aviso) var(--curva-entra); transform:translateX(-50%) translateY(0); }
:root[data-theme] #toast:before{ display:none; }
:root[data-theme] #toast .toast-accion{ color:var(--tinta); font-weight:500; min-height:32px; padding:0 12px; margin-right:-10px; border-radius:var(--r-pildora); }
@media (hover:hover){ :root[data-theme] #toast .toast-accion:hover{ background:var(--tinte-toque); } }

/* ---------------------- Piezas nuevas (T2): menu de fila y aviso apilado ---------------------- */
.co-menu{
  position:fixed; z-index:var(--z-menu); min-width:200px; max-width:280px; padding:6px;
  background:var(--menu); border-radius:var(--r-flota); box-shadow:var(--sombra-menu);
  opacity:0; transform:scale(.96); visibility:hidden; pointer-events:none;
  transition:opacity var(--d-menu-sale) var(--curva-cambia), transform var(--d-menu-sale) var(--curva-cambia), visibility 0s linear var(--d-menu-sale);
}
.co-menu.abierto{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity var(--d-menu) var(--curva-entra), transform var(--d-menu) var(--curva-entra), visibility 0s; }
.co-menu-it{ display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border:0; border-radius:var(--r); background:transparent; color:var(--texto); font-size:var(--t-texto); text-align:left; cursor:pointer; }
.co-menu-it .ico{ width:16px; height:16px; color:var(--medio); flex:none; }
.co-menu-it.peligro, .co-menu-it.peligro .ico{ color:var(--urge); }
.co-menu-it:focus-visible{ outline-offset:-2px; }
@media (hover:hover){ .co-menu-it:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.co-menu-sep{ height:8px; }

.co-avisos{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:var(--z-aviso); display:flex; flex-direction:column-reverse; align-items:center; gap:8px; pointer-events:none; }
.co-aviso{
  display:flex; align-items:center; gap:12px; min-height:44px; padding:0 6px 0 16px; white-space:nowrap;
  background:var(--menu); color:var(--tinta); border-radius:var(--r-flota); box-shadow:var(--sombra-menu); font-size:var(--t-texto);
  pointer-events:auto; opacity:0; transform:translateY(8px);
  transition:opacity var(--d-aviso-sale) var(--curva-cambia), transform var(--d-aviso-sale) var(--curva-cambia);
}
.co-aviso.visible{ opacity:1; transform:none; transition:opacity var(--d-aviso) var(--curva-entra), transform var(--d-aviso) var(--curva-entra); }
.co-aviso button{ min-height:32px; padding:0 12px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--tinta); font-weight:500; cursor:pointer; }
@media (hover:hover){ .co-aviso button:hover{ background:var(--tinte-toque); } }

/* Un solo boton de acciones por fila: aparece al pasar el cursor Y al llegar con Tab. */
.co-acc-fila{ opacity:0; transition:opacity var(--d-toque) var(--curva-cambia); }
@media (hover:hover){ :is(.trow, .co-fila, .fb-fila, .fc-fila, tr, li, .bfila):hover > * > .co-acc-fila, :is(.trow, .co-fila, tr, li):hover .co-acc-fila{ opacity:1; } }
:is(.trow, .co-fila, tr, li):focus-within .co-acc-fila, .co-acc-fila:focus-visible, .co-acc-fila[aria-expanded="true"]{ opacity:1; }
@media (hover:none){ .co-acc-fila{ opacity:1; } }

.co-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Botones de acciones por fila que ya existian (portales, galerias, salas, revelados, albumes,
   pendientes): callados hasta pasar el cursor por su fila o llegar con Tab; el clic derecho sobre
   la fila abre el mismo menu (app.js, CO_DISPARADORES). En pantallas tactiles se quedan visibles. */
@media (hover:hover){
  :root[data-theme] :is(.por-mas, .alb-kebab, .sc-salamas, [data-pendw-kebab]){ opacity:0; transition:opacity var(--d-toque) var(--curva-cambia); }
  :root[data-theme] :is(.por-card, .gal-card, .sc-fila, .pblock, .pendw-r):is(:hover, :focus-within) :is(.por-mas, .alb-kebab, .sc-salamas, [data-pendw-kebab]),
  :root[data-theme] :is(.por-mas, .alb-kebab, .sc-salamas, [data-pendw-kebab]):is(:focus-visible, [aria-expanded="true"]),
  :root[data-theme] details[open] > .sc-salamas{ opacity:1; }
}

/* Lista del dia: lo hecho se pliega al final; en el telefono no hay puntos por fila (tocar abre el menu). */
.diaria-hechas{ display:flex; align-items:center; gap:6px; min-height:40px; margin-top:6px; padding:0 4px; border:0; background:transparent; color:var(--apagado); font:inherit; font-size:var(--t-meta); cursor:pointer; border-radius:var(--r); }
.diaria-hechas .ico{ width:14px; height:14px; transition:transform var(--d-toque) var(--curva-cambia); }
.diaria-hechas[aria-expanded="true"] .ico{ transform:rotate(180deg); }
@media (hover:hover){ .diaria-hechas:hover{ color:var(--tinta); } :root[data-theme] .diaria-kebab{ opacity:0; } :root[data-theme] .diaria-fila:is(:hover, :focus-within) .diaria-kebab{ opacity:1; } }
@media (max-width:860px){ :root[data-theme] .diaria-kebab{ display:none; } }
/* Hojas del telefono sin x (lienzo v19): se cierran tocando fuera, arrastrando o con atras. La x queda
   para lector de pantalla y teclado. */
@media (max-width:860px){
  :root[data-theme] #diaria-cerrar:not(:focus-visible){ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
}

/* ============================ Escritorio: el marco ============================ */
@media (min-width:861px){
  /* La columna de Xarpie es la pagina oscura del telefono puesta al lado: fondo mas oscuro,
     papel punteado y grano. El CRM es la pagina del tema. La diferencia de fondo separa. */
  :root[data-theme] body.nav-lat-on #app.show{ background:var(--pag); }
  :root[data-theme] .chatpane{
    background-color:var(--x);
    background-image:var(--grano-modulo, none), radial-gradient(circle at center, var(--puntos) 1.1px, transparent 1.7px);
    background-size:220px 220px, 18px 18px; background-position:0 0, 9px 9px;
    border-right:0;
  }
  :root[data-theme]:not([data-theme="dark"]) .chatpane{ background-image:radial-gradient(circle at center, var(--puntos) 1.1px, transparent 1.7px); background-size:18px 18px; }
  /* El CRM ya no es un bloque de piedra redondeado: es la pagina. */
  :root[data-theme] body.nav-lat-on #app.show .main{
    margin:0; height:100%; border-radius:0; background-color:var(--pag); background-image:none;
  }
  :root[data-theme] body.nav-lat-on #cp-riel.show{ background:var(--pag); }
  /* Panel izquierdo: flota, 16 px. Las filas de adentro son contenido: 4 px. */
  :root[data-theme] body.nav-lat-on .nl-panel{ border-radius:var(--r-flota); background-color:var(--piedra); }
  :root[data-theme] body.nav-lat-on:not(.nav-lat-fijo) .nav-lat.abierto .nl-panel{ box-shadow:var(--sombra-menu); }
  :root[data-theme] body.nav-lat-on .nl-fila{ border-radius:var(--r); }
  :root[data-theme] body.nav-lat-on .nav-lat:not(.abierto) .nl-fila{ border-radius:var(--r-pildora); }
  :root[data-theme] body.nav-lat-on .nl-fila.on{ background:var(--piedra-on); color:var(--tinta); }
  :root[data-theme] body.nav-lat-on .nl-fila.on .ico, :root[data-theme] body.nav-lat-on .nl-fila.sec-on .ico{ fill:none; }
  :root[data-theme] body.nav-lat-on .nl-panel .ico{ stroke-width:1.5; }
  /* Caja de escribir: pildora de 56 px de vidrio, igual que la del telefono. */
  :root[data-theme] .chatpane .composer, :root[data-theme] body.nav-lat-on .chatpane .composer{
    min-height:56px; align-items:center; border:0; border-radius:28px; padding:8px 8px 8px 8px;
    background-color:var(--caja); background-image:none; box-shadow:var(--sombra-flota);
  }
  :root[data-theme] .chatpane .composer:focus-within{ box-shadow:var(--sombra-flota), 0 0 0 2px var(--punto); border-color:transparent; }
  /* Botones de icono de la barra: pildora. */
  :root[data-theme] .cp-navcfg{ border-radius:var(--r-pildora); }
}

/* ---------------- Escritorio: fila propia de Xarpie y Conversaciones ---------------- */
/* Propuesta 2 del lienzo: cada columna tiene su fila de arriba. La de Xarpie ("‹ Chats" y el lapiz)
   se sienta en la franja de la barra que queda sobre la columna; la miga y los iconos del CRM empiezan
   donde termina el chat. --co-chat-x/--co-chat-w los mide montarMarcoChat (app.js). */
@media (min-width:861px){
  :root[data-theme] body.nav-lat-on #cp-riel.show{ padding-left:calc(var(--co-chat-w, 0px) + 22px); }
  :root[data-theme] body.nav-lat-on .cp-riel-logo, :root[data-theme] body.nav-lat-on.nav-lat-fijo .cp-riel-logo{ display:none !important; }
  :root[data-theme] body.nav-lat-on #tel-fila-xa{
    display:flex; align-items:center; gap:2px; position:fixed; z-index:62; top:0; left:var(--co-chat-x, 76px);
    width:var(--co-chat-w, 432px); height:var(--topnav-h, 48px); margin:0; padding:0 12px;
    background-color:var(--x); background-image:var(--grano-modulo, none), radial-gradient(circle at center, var(--puntos) 1.1px, transparent 1.7px);
    background-size:220px 220px, 18px 18px; background-position:0 0, 9px 9px; background-attachment:fixed, fixed;
  }
  :root[data-theme]:not([data-theme="dark"]) body.nav-lat-on #tel-fila-xa{ background-image:radial-gradient(circle at center, var(--puntos) 1.1px, transparent 1.7px); background-size:18px 18px; background-position:9px 9px; background-attachment:fixed; }
  :root[data-theme] .chatpane{ background-attachment:fixed, fixed; }
  :root[data-theme]:not([data-theme="dark"]) .chatpane{ background-attachment:fixed; }
  html.co-sin-chat body.nav-lat-on #tel-fila-xa{ display:none; }
  /* Chat plegado (superficies de trabajo como el editor de contrato): la columna mide 0 pero la fila
     fija seguia pintando "Chats" desbordada encima de la miga del CRM. */
  :root[data-theme] body.nav-lat-on #app.chat-colapsado #tel-fila-xa{ display:none; }
  /* La puerta de vuelta al CRM ("El Foco ›", el nombre de la seccion a la que vuelves) solo
     tiene sentido cuando el CRM no se ve: con las dos columnas a la vista sobra, porque el CRM
     esta ahi al lado. Hasta el 2026-09-17 se escondia SIEMPRE en escritorio, asi que en "solo
     Xarpie" no quedaba ninguna salida visible -- solo el selector de vista de 30 px, que ademas
     estaba tapado (ver la regla de .cp-riel-der aqui abajo). Se noto cuando el boton nuevo de
     Xarpie hizo que se llegara ahi de verdad. */
  :root[data-theme] body.nav-lat-on #tel-a-crm{ display:none; }
  :root[data-theme] body.nav-lat-on #app.crm-colapsado #tel-a-crm{ display:inline-flex; }
  /* Esta fila es fixed y del ancho de la columna del chat. En "solo Xarpie" esa columna llega
     hasta el borde, o sea que pasaba POR ENCIMA de buscar, campana, plan, engrane y el selector
     de vista: medido con elementFromPoint, los cinco devolvian #tel-fila-xa. El grupo sube por
     encima (el fondo de la fila sigue corrido hasta el borde, asi no hay costura) y la fila le
     deja su hueco para que la puerta al CRM no caiga debajo. --co-nav-der lo mide montarMarcoChat. */
  :root[data-theme] body.nav-lat-on .cp-riel-der{ position:relative; z-index:63; }
  :root[data-theme] body.nav-lat-on #app.crm-colapsado #tel-fila-xa{ padding-right:calc(var(--co-nav-der, 280px) + var(--e-2)); }
  :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib){
    display:inline-flex; align-items:center; justify-content:center; gap:2px; height:40px; border:0; border-radius:var(--r-pildora);
    background:transparent; color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer;
  }
  :root[data-theme] body.nav-lat-on .tel-ib{ width:40px; padding:0; }
  :root[data-theme] body.nav-lat-on .tel-ib[hidden]{ display:none; }
  :root[data-theme] body.nav-lat-on .tel-nav{ padding:0 12px 0 4px; }
  :root[data-theme] body.nav-lat-on #tc-a-xarpie{ padding:0 4px 0 12px; }
  :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib) .ico{ width:18px; height:18px; stroke-width:1.5; }
  @media (hover:hover){ :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib):hover{ color:var(--tinta); background:var(--tinte-toque); } }
  :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib):active{ transform:scale(.97); }
  .tel-flex{ flex:1 1 auto; }

  :root[data-theme] body.nav-lat-on #app .tel-convs{
    display:none; position:fixed; z-index:63; top:0; bottom:0; left:var(--co-chat-x, 76px); width:var(--co-chat-w, 432px);
    flex-direction:column; padding:0 12px 16px; background:var(--pag);
  }
  :root[data-theme] body.nav-lat-on #app.tel-en-convs .tel-convs{ display:flex; }
  html.co-sin-chat body.nav-lat-on #app.tel-en-convs .tel-convs{ display:none; }
  :root[data-theme] body.nav-lat-on .tel-convs .tel-fila-xa{ display:flex; align-items:center; height:var(--topnav-h, 48px); flex:none; }
  :root[data-theme] body.nav-lat-on .tc-tit{ margin:8px 4px 12px; font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); }
  :root[data-theme] body.nav-lat-on .tc-tit[hidden], :root[data-theme] body.nav-lat-on .tc-busca-fila[hidden]{ display:none; }
  :root[data-theme] body.nav-lat-on .tc-busca-fila{ display:flex; align-items:center; gap:8px; margin:0 0 4px; flex:none; }
  :root[data-theme] body.nav-lat-on .tc-busca{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:20px; background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:var(--apagado); }
  :root[data-theme] body.nav-lat-on .tc-busca:focus-within{ box-shadow:inset 0 0 0 1px var(--linea), 0 0 0 2px var(--punto); }
  :root[data-theme] body.nav-lat-on .tc-busca input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:var(--t-texto); color:var(--tinta); }
  :root[data-theme] body.nav-lat-on .tc-cancelar{ min-height:36px; padding:0 8px; border:0; background:none; font:inherit; color:var(--tinta); border-radius:var(--r-pildora); cursor:pointer; }
  :root[data-theme] body.nav-lat-on .tc-lista{ flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px 8px; scrollbar-width:thin; }
  :root[data-theme] body.nav-lat-on .tc-cab{ margin:18px 10px 4px; font-size:var(--t-meta); color:var(--apagado); }
  :root[data-theme] body.nav-lat-on .tc-nota{ margin:24px 10px; color:var(--medio); }
  :root[data-theme] body.nav-lat-on .tc-fila{ position:relative; border-radius:var(--r); }
  :root[data-theme] body.nav-lat-on .tc-fila.on{ background:var(--piedra-on); }
  :root[data-theme] body.nav-lat-on .tc-abre{ display:flex; flex-direction:column; align-items:flex-start; width:100%; padding:9px 10px; border:0; border-radius:var(--r); background:transparent; font:inherit; text-align:left; cursor:pointer; color:inherit; }
  @media (hover:hover){ :root[data-theme] body.nav-lat-on .tc-fila:not(.on) .tc-abre:hover{ background:var(--tinte-toque); } }
  :root[data-theme] body.nav-lat-on .tc-t{ display:block; max-width:100%; font-size:var(--t-texto); color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :root[data-theme] body.nav-lat-on .tc-s{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
  :root[data-theme] body.nav-lat-on .tc-menu{ position:absolute; right:6px; top:44px; z-index:3; width:200px; padding:6px; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); transform-origin:top right; animation:co-menu var(--d-menu) var(--curva-entra) both; }
  :root[data-theme] body.nav-lat-on .tc-menu.arriba{ top:auto; bottom:44px; transform-origin:bottom right; }
  :root[data-theme] body.nav-lat-on .tc-menu button{ display:block; width:100%; min-height:36px; padding:0 10px; border:0; border-radius:var(--r); background:transparent; font:inherit; color:var(--texto); text-align:left; cursor:pointer; }
  @media (hover:hover){ :root[data-theme] body.nav-lat-on .tc-menu button:hover{ background:var(--tinte-toque); } }
  :root[data-theme] body.nav-lat-on .tc-menu button.peligro{ color:var(--urge); }
  :root[data-theme] body.nav-lat-on .tc-vacio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:100%; padding:0 28px; text-align:center; }
  :root[data-theme] body.nav-lat-on .tc-vt{ margin:0; font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
  :root[data-theme] body.nav-lat-on .tc-vs{ margin:0; color:var(--medio); line-height:1.5; }
  :root[data-theme] body.nav-lat-on .tc-empezar{ margin-top:8px; min-height:36px; padding:0 16px; border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-weight:500; cursor:pointer; }
  /* "‹ Xarpie" es la puerta del telefono; en escritorio el chat siempre esta al lado. */
  :root[data-theme] body.nav-lat-on #tel-a-xarpie{ display:none !important; }
  /* Bienvenida A: saludo y una oracion, al centro de la columna. Aparece al instante. */
  :root[data-theme] #chat-msgs > .xb-bienv:not([hidden]){ align-items:center; text-align:center; padding:0 16px 32px; animation:none; }
  :root[data-theme] .chatpane .tel-saludo{ margin:0; font-size:var(--t-saludo); font-weight:400; line-height:1.1; letter-spacing:-.02em; color:var(--medio); text-wrap:balance; }
  :root[data-theme] .chatpane .tel-saludo b{ font-weight:500; color:var(--tinta); }
  :root[data-theme] .chatpane .tel-linea{ max-width:300px; margin:12px 0 0; font-size:var(--t-campo); line-height:1.5; color:var(--medio); text-wrap:pretty; }
  :root[data-theme] .chatpane .tel-enlace{ display:inline; padding:0; border:0; background:none; font:inherit; color:var(--tinta); font-weight:500; cursor:pointer; text-decoration:underline; text-decoration-color:var(--punto); text-underline-offset:4px; }
  /* Sugerencias: solo al enfocar la caja vacia. */
  :root[data-theme] #app .chatpane > #chat-tips{ display:none !important; }
  :root[data-theme] #app .chatpane.tel-sug > #chat-tips{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:8px; overflow:visible; min-height:0; padding:0; margin:0 0 12px; animation:co-fundido var(--d-toque) var(--curva-cambia) both; }
  :root[data-theme] #app .chatpane.tel-sug > #chat-tips .chip{ min-height:32px; padding:0 14px; font-size:var(--t-texto); }
  /* La conversacion se apila desde abajo, pegada a la caja (como en el telefono). */
  :root[data-theme] .chatpane .chatscroll > :first-child{ margin-top:auto; }
  /* El saludo viejo de escritorio sobra: la bienvenida ya saluda. */
  :root[data-theme] body.nav-lat-on .chatpane > .greet{ display:none; }
  /* En escritorio Configuracion ya vive arriba (engrane): la pildora de perfil sobra. */
  :root[data-theme] body.nav-lat-on .tc-perfil{ display:none; }
  :root[data-theme] body.nav-lat-on .tel-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* ============================== Chat (los dos) ============================== */
/* Enviar se vuelve Detener mientras Xarpie responde. a-62 (chat fluido, motion): el corte
   seco de antes (solo opacity, 120ms) pasa a un CRUCE de verdad -- la flecha se encoge con
   blur mientras el cuadrado de "detener" entra igual (opacidad+escala+blur, 150ms,
   --curva-cambia: es un ESTADO que cambia, no algo que llega -- Jakub: swap de iconos con
   blur en vez de un salto). Con reduced-motion, SOLO opacidad, sin excepcion aunque sea
   chico -- Cuarto Oscuro no da excepciones por tamano (lo mismo que a-60 ya corrigio en el
   atajo de teclado del panel). body.co-chat-v1: interruptor sin desplegar. */
#chat-send.detener{ position:relative; background:var(--boton); color:var(--boton-t); }
#chat-send.detener svg{ opacity:0; transform:scale(.85); filter:blur(2px); }
/* content:"" siempre presente (base, oculto) -- content no se transiciona, opacity si. La
   posicion sigue siendo left/top/margin (como antes); scale() gira sobre su propio centro,
   sin necesitar un translate extra que la descentraria. */
#chat-send::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:2px; background:currentColor;
  opacity:0; transform:scale(.85); filter:blur(2px);
  transition:opacity 150ms var(--curva-cambia), transform 150ms var(--curva-cambia), filter 150ms var(--curva-cambia); }
#chat-send.detener::after{ opacity:1; transform:scale(1); filter:blur(0); }
#chat-send svg{ transition:opacity 150ms var(--curva-cambia), transform 150ms var(--curva-cambia), filter 150ms var(--curva-cambia); }
@media (prefers-reduced-motion:reduce){
  #chat-send svg, #chat-send::after{ transition:opacity 120ms linear !important; transform:none !important; filter:none !important; }
}
body.co-chat-v1 #chat-send svg, body.co-chat-v1 #chat-send::after{ transition:opacity var(--d-toque) var(--curva-cambia) !important; transform:none !important; filter:none !important; }

/* ============================== Chat movil limpio (a-68) ============================== */
/* R2: el "Revise N cosas" plegado (public/app.js, burbuja()) -- <details> nativo, sin JS que
   cablear un toggle. El marcador de fabrica (triangulo) se cambia por un texto propio (el
   Cuarto Oscuro no usa triangulos de navegador en ningun otro sitio) y NUNCA anima al abrir/
   cerrar: es un toque, no una entrada -- lo unico que se mueve es el `open` nativo del
   navegador, instantaneo. body.co-movil-v1 revierte a la linea tecnica de antes (.actnote,
   ya definida en styles.css, sin tocar). */
:root[data-theme] .actnote-plegada{ margin-top:8px; }
:root[data-theme] .actnote-plegada summary{ list-style:none; cursor:pointer; font-size:var(--t-meta); color:var(--medio); display:flex; align-items:center; gap:5px; }
:root[data-theme] .actnote-plegada summary::-webkit-details-marker{ display:none; }
:root[data-theme] .actnote-plegada summary::after{ content:"›"; }
:root[data-theme] .actnote-plegada[open] summary::after{ content:"‹"; }
:root[data-theme] .actnote-abierta{ margin-top:4px; font-size:var(--t-meta); color:var(--medio); }

/* R7: letra del CRM y del chat en telefono, de 14 a 16/17px (decision de Daniel: cambia TODA
   la app en telefono). --t-texto es un token GLOBAL (cuarto-oscuro.css linea 41): se
   sobreescribe SOLO dentro de max-width:860px, nunca en escritorio. El chat va un paso mas
   arriba (17px) porque es "la una cosa principal" del turno (principio 1 del plan). */
@media (max-width:860px){
  :root[data-theme]{ --t-texto:16px; --t-chat:17px; }
  :root[data-theme] .bub{ font-size:var(--t-chat); line-height:1.5; }
}
body.co-movil-v1{ --t-texto:14px !important; --t-chat:14px !important; }

:root[data-theme] .bub{ animation:none; border-radius:var(--r-flota); }
:root[data-theme] .bub-me{ background:var(--piedra-on); color:var(--tinta); border:0; border-radius:16px 16px 4px 16px; padding:10px 14px; }
:root[data-theme] .bub-ai{ background:transparent; border:0; padding:4px 0; color:var(--texto); }
:root[data-theme] .brow-me .bub-me.co-nuevo{ animation:co-salio calc(160ms * var(--lento)) var(--curva-entra) both; }
@keyframes co-salio{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* a-62 (chat fluido, motion): la respuesta de Xarpie "materializa" al nacer -- mas chica y
   mas rapida (180ms) que la entrada del CUERPO del chat (220ms, mas abajo), porque pasa una
   vez por TURNO, no por conversacion. .bub-viva la pone burbuja() (public/app.js) solo en la
   burbuja recien creada de un turno en vivo -- el historial nunca la trae, para no repetir la
   entrada en cada mensaje viejo al abrir o cambiar de conversacion. */
:root[data-theme] .bub-ai.bub-viva{ animation:co-llega calc(180ms * var(--lento)) var(--curva-entra) both; }
@keyframes co-llega{ from{ opacity:0; transform:translateY(6px); filter:blur(2px); } to{ opacity:1; transform:none; filter:blur(0); } }
@media (prefers-reduced-motion:reduce){ :root[data-theme] .bub-ai.bub-viva{ animation:co-fundido 120ms linear both; } }
body.co-chat-v1 .bub-ai.bub-viva{ animation:none !important; }

/* Flujo del chat (plan PLAN-chat-flujo-2026-09, F1; lienzo "Flujo del chat de Xarpie", tableros A, B, C y G). Todo en texto y filas:
   nada de tarjetas ni brillos. El unico color con significado es --urge en "No se envio". Toque de 44 px en todo lo que se pulsa. */
/* A. Si tarda: una segunda linea bajo la etiqueta, alineada con el texto de la etiqueta (el punto de .xarpie-progreso ocupa 12 px). */
:root[data-theme] .xarpie-tarda{ font-size:var(--t-meta); line-height:1.5; color:var(--medio); padding-left:12px; margin-top:2px; }
/* C y G. Notas de estado dentro de la burbuja ("Detenida") y burbujas que solo dicen que paso ("No pude responder esta."). */
:root[data-theme] .bub .bub-nota{ font-size:var(--t-meta); line-height:1.5; color:var(--medio); margin-top:6px; }
:root[data-theme] .bub.bub-nota{ color:var(--medio); }
/* C. Acciones bajo un aviso: la principal subrayada, la secundaria callada; "Entrar" y "Ver planes" son pildora (se tocan). */
:root[data-theme] .bub-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; margin:2px 0 0 -10px; }
:root[data-theme] .bub-accion{ min-height:44px; padding:0 10px; border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); text-decoration:underline; text-decoration-color:var(--punto); text-underline-offset:3px; cursor:pointer; }
:root[data-theme] .bub-accion + .bub-accion{ color:var(--medio); text-decoration:none; }
:root[data-theme] .bub-accion.bub-accion-pildora{ padding:0 20px; margin-left:10px; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); text-decoration:none; }
/* C. El mensaje de la persona que no llego al servidor: se queda a la vista, apagado, con "No se envio" y su Reintentar debajo. */
:root[data-theme] .brow-me.brow-fallida .bubwrap{ flex-direction:column; align-items:flex-end; }
:root[data-theme] .brow-fallida .bub-me{ opacity:.6; }
:root[data-theme] .bub-falla{ display:flex; align-items:center; gap:4px; font-size:var(--t-meta); color:var(--urge); }
:root[data-theme] .bub-falla .bub-accion{ font-size:var(--t-meta); color:var(--tinta); }
/* B. Llego una respuesta mientras la persona leia mas arriba: una pildora la lleva al fondo. La coloca chatRespuestaNueva (app.js). */
:root[data-theme] .chat-nueva-resp{ position:absolute; left:50%; transform:translateX(-50%); z-index:5; min-height:44px; padding:0 18px; display:inline-flex; align-items:center; gap:8px; border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); cursor:pointer; animation:co-fundido var(--d-aviso) var(--curva-entra) both; }
:root[data-theme] .chat-nueva-resp[hidden]{ display:none; }

/* Flujo del chat, F5 (lienzo "Flujo del chat de Xarpie", tableros D opcion B y E). */
/* D. Primera pantalla: "Prueba pedirme" y tres frases que se tocan (texto subrayado, como los enlaces de la bienvenida; no pildoras de
   comando). Un .xb-bloque es flex, asi que su [hidden] hay que devolverselo. */
:root[data-theme] .xb-bloque[hidden]{ display:none; }
:root[data-theme] .xb-frases{ display:flex; flex-direction:column; align-items:flex-start; }
:root[data-theme] .xb-frase{ min-height:44px; padding:0; border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); text-align:left; text-decoration:underline; text-decoration-color:var(--punto); text-underline-offset:4px; cursor:pointer; }
/* E. El «siguiente paso» debajo de la respuesta que lo motivo (mismo sangrado que .xarpieabrir, para alinear con la burbuja). */
:root[data-theme] .xarpie-sig{ flex:0 0 100%; min-width:0; margin:6px 0 2px 40px; display:flex; }
/* Xarpie socio (F2): la idea debajo de la respuesta. Sin caja ni raya (filas, no tarjetas): aire arriba, una linea de contexto en --medio y la idea en --tinta. */
:root[data-theme] .xarpie-idea{ flex:0 0 calc(100% - 40px); min-width:0; margin:14px 0 2px 40px; }
:root[data-theme] .xarpie-idea-rel{ font-size:var(--t-meta); color:var(--medio); margin-bottom:2px; }
:root[data-theme] .xarpie-idea-x{ margin:0; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); }
:root[data-theme] .xarpie-idea .bub-acciones{ margin-top:4px; }
:root[data-theme] .xarpie-idea-nota{ font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .xarpie-sig-btn{ min-height:44px; padding:0 16px; border:0; border-radius:var(--r-pildora); background:none; box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
/* E. Pulgar abajo: que salio mal, en el mismo sitio y en un toque. */
:root[data-theme] .xarpie-senal-b.on{ color:var(--tinta); }
:root[data-theme] .xarpie-motivos{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-1); margin-top:var(--e-2); }
:root[data-theme] .xarpie-motivos-t{ font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .xarpie-motivos-ops{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
:root[data-theme] .xarpie-motivo{ min-height:44px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:none; box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer; }
:root[data-theme] .xarpie-motivos-omitir{ min-height:44px; padding:0 2px; border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }

/* >>> BARRIDO (generado por evaluacion/cuarto-oscuro-barrido.mjs; no editar a mano) */
/* 1. Filas sin raya: 18 reglas */
:root[data-theme] .pj-fila{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .evrow{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .pl-crow.tot{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .payrow{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .payrow:last-of-type{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .cl-inforow{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .evtl-pop-row + .evtl-pop-row{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .barrow{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .gact-row{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .foco-item{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .cmd-ayuda-fila{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .cierre-fila{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .pj-arch-item{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .fl-ens-fila{ border-top-color:transparent; border-bottom-color:transparent; }
:root[data-theme] .lb-fila{ border-top-color:transparent; border-bottom-color:transparent; }
/* 2. Sin mayusculas decorativas: 131 reglas */
:root[data-theme] .login-card .sub{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pr-o-divider{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pj-r-lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pj-tl-fecha{ text-transform:none; letter-spacing:0; }
:root[data-theme] .plt-head{ text-transform:none; letter-spacing:0; }
:root[data-theme] .quiz-grupo-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .quiz-sabe-tt{ text-transform:none; letter-spacing:0; }
:root[data-theme] .quiz-sabe-k{ text-transform:none; letter-spacing:0; }
:root[data-theme] .carta-x-personal-tit{ text-transform:none; letter-spacing:0; }
:root[data-theme] .greetkicker{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pista-x-marca{ text-transform:none; letter-spacing:0; }
:root[data-theme] .tour-pop-kicker{ text-transform:none; letter-spacing:0; }
:root[data-theme] .peyebrow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .statlabel{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pblock-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ced .ced-label{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ced-field label{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ced-tpl .cbadge{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ced-pqhd{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ced-plabel{ text-transform:none; letter-spacing:0; }
:root[data-theme] .redp-slogan{ text-transform:none; letter-spacing:0; }
:root[data-theme] .redp-num{ text-transform:none; letter-spacing:0; }
:root[data-theme] .redp-corregido{ text-transform:none; letter-spacing:0; }
:root[data-theme] .redp-anulado-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .redp-label{ text-transform:none; letter-spacing:0; }
:root[data-theme] .table th{ text-transform:none; letter-spacing:0; }
:root[data-theme] .docnum{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fchip{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pl-head{ text-transform:none; letter-spacing:0; }
:root[data-theme] .flabel{ text-transform:none; letter-spacing:0; }
:root[data-theme] .lp-preview-top{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cig-hero-eyebrow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cig-dia-n{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cig-prev-top .lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cig-prev-eyebrow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cig-prev-badge{ text-transform:none; letter-spacing:0; }
:root[data-theme] .um-role{ text-transform:none; letter-spacing:0; }
:root[data-theme] .w-title{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ing-sub{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ing-chg-sub{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pendw-load .ll{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pendw-gh{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pendw-cat{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pendw-pop-label{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pendw-kh{ text-transform:none; letter-spacing:0; }
:root[data-theme] .acc-tipo{ text-transform:none; letter-spacing:0; }
:root[data-theme] .acc-brief-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cpx-campo{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cal-head-d{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cal-sem-hd{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cal-allday-lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .tgrupo-h{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ttabla th{ text-transform:none; letter-spacing:0; }
:root[data-theme] .kcol-h{ text-transform:none; letter-spacing:0; }
:root[data-theme] .gal-oculta-badge{ text-transform:none; letter-spacing:0; }
:root[data-theme] .gal-blq-tag{ text-transform:none; letter-spacing:0; }
:root[data-theme] .gal-blq-autor, :root[data-theme] .gal-blq-firma{ text-transform:none; letter-spacing:0; }
:root[data-theme] .g-sec-rotulo{ text-transform:none; letter-spacing:0; }
:root[data-theme] .ceo-kpi-l{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-label{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-eyebrow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-rtitle{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-mhead div{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-wdn{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-bmark{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-l1{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-dlgl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-flbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cf-sgl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .greetkicker{ text-transform:none; letter-spacing:0; }
:root[data-theme] .foco-eyebrow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .db-chip-union{ text-transform:none; letter-spacing:0; }
:root[data-theme] .db-cal-dow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .db-pie-et{ text-transform:none; letter-spacing:0; }
:root[data-theme] .db-cfg-f > label{ text-transform:none; letter-spacing:0; }
:root[data-theme] .al-adsec-h{ text-transform:none; letter-spacing:0; }
:root[data-theme] .muelle-tit{ text-transform:none; letter-spacing:0; }
:root[data-theme] .diaria-fecha{ text-transform:none; letter-spacing:0; }
:root[data-theme] .riel-negocio-l{ text-transform:none; letter-spacing:0; }
:root[data-theme] .eyebrow-btn{ text-transform:none; letter-spacing:0; }
:root[data-theme] .rkick{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cif-k{ text-transform:none; letter-spacing:0; }
:root[data-theme] .xaviso-eti{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cvp-req{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cvp-colhead{ text-transform:none; letter-spacing:0; }
:root[data-theme] .cvp-prev-et{ text-transform:none; letter-spacing:0; }
:root[data-theme] .tarea-hilo-h{ text-transform:none; letter-spacing:0; }
:root[data-theme] .gx-soonlbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pp-ttag{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pp-sub{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pp-avanzado summary{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pp-hex{ text-transform:none; letter-spacing:0; }
:root[data-theme] .pp-fmarca{ text-transform:none; letter-spacing:0; }
:root[data-theme] .gx-cardm{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fl-seccion-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fl-col-lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fl-boda-lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fl-hoy-lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fed-h-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fed-lbl{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fed-campo{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fl-como-aut-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .flpop-n{ text-transform:none; letter-spacing:0; }
:root[data-theme] .sc-vstat span{ text-transform:none; letter-spacing:0; }
:root[data-theme] .rv-ini-eyebrow{ text-transform:none; letter-spacing:0; }
:root[data-theme] .rv-ed-estado{ text-transform:none; letter-spacing:0; }
:root[data-theme] .rv-ed-cap-tt{ text-transform:none; letter-spacing:0; }
@media (min-width:1188px){ :root[data-theme] #app.crm-colapsado .riel-negocio-tit{ text-transform:none; letter-spacing:0; } }
:root[data-theme] .subtab-pronto{ text-transform:none; letter-spacing:0; }
:root[data-theme] .um-grupo{ text-transform:none; letter-spacing:0; }
@media (min-width:861px){ :root[data-theme] .nl-pronto{ text-transform:none; letter-spacing:0; } }
@media (min-width:861px){ :root[data-theme] .nl-grupo{ text-transform:none; letter-spacing:0; } }
@media (min-width:861px){ :root[data-theme] .nl-cab-grupo{ text-transform:none; letter-spacing:0; } }
:root[data-theme] .bus-grupo{ text-transform:none; letter-spacing:0; }
:root[data-theme] .plan-eti{ text-transform:none; letter-spacing:0; }
:root[data-theme] .rv-gl-grupo{ text-transform:none; letter-spacing:0; }
:root[data-theme] .rv-gl-sec-tt{ text-transform:none; letter-spacing:0; }
:root[data-theme] .edg-dims{ text-transform:none; letter-spacing:0; }
:root[data-theme] .hge-act-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .xb-kicker{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fsec-t{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fc-docgrupo-h{ text-transform:none; letter-spacing:0; }
:root[data-theme] .fb-cuenta-t{ text-transform:none; letter-spacing:0; }
/* <<< BARRIDO */

/* ============================ Ronda 2 (aprobada 2026-09-16) ============================ */
/* Pendientes, tablero: las columnas son aire; las tarjetas se quedan (se arrastran, son objetos),
   en piedra de 16 px sin borde ni sombra. */
:root[data-theme] .kcol{ background:transparent; border:0; border-radius:0; }
:root[data-theme] .kcol-h{ border-bottom:0; padding:8px 4px; font-family:var(--sans); font-weight:500; color:var(--tinta); }
:root[data-theme] .kcol-body{ padding:4px 0; }
:root[data-theme] .ktarj{ background:var(--piedra); border:0; border-radius:var(--r-flota); box-shadow:none; padding:12px 14px; }
:root[data-theme] .ktarj-tit{ color:var(--tinta); }
:root[data-theme] .pendw-kb{ gap:16px; background:transparent; border-top:0; }
:root[data-theme] .pendw-kc{ background:transparent; padding:8px 0 12px; }
:root[data-theme] .pendw-kh{ font-weight:500; color:var(--tinta); }
:root[data-theme] .pendw-kt{ border:0; background:var(--piedra); border-radius:var(--r-flota); padding:12px 14px; }
@media (hover:hover){ :root[data-theme] .pendw-kt:hover{ border-color:transparent; box-shadow:inset 0 0 0 100px var(--tinte-toque); } }
:root[data-theme] .pendw-kt .t{ font-size:var(--t-texto); font-weight:400; color:var(--tinta); }
:root[data-theme] .pendw-kt .m{ font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .pendw-ft{ border-top:0; }

/* Agenda: "hoy" en tinta (ya via --cal-accent) y bloques neutros; la raya de la boda la pone calendario.js. */
:root[data-theme] .calfull .cf-ev, :root[data-theme] .calfull .cf-mchip, :root[data-theme] .calfull .cf-adchip{ border-left-width:2px; }
@media (hover:hover){ :root[data-theme] .calfull .cf-ev:hover{ filter:none; box-shadow:inset 0 0 0 100px var(--tinte-toque); } }

/* Galerias: portadas de 16 px sin marco. */
:root[data-theme] .gal-cover{ border:0; border-radius:var(--r-flota); background:var(--piedra-on); }

/* Entrada: la caja flota (16 px) sobre la pagina oscura de Xarpie. */
:root[data-theme] #login{ background-color:var(--x); }
:root[data-theme] .login-card{ background:var(--piedra); border:0; border-radius:var(--r-flota); box-shadow:var(--sombra-flota); }

/* ============================ Barrido de cajas (2026-09-16) ============================ */
/* Listas: filas sin caja (proyectos, notas rapidas, salas de cine). */
:root[data-theme] .pj-lista{ border:0; border-radius:0; overflow:visible; }
:root[data-theme] .pj-fila{ border-bottom:0; border-radius:var(--r); padding:12px 8px; margin:0 -8px; }
@media (hover:hover){ :root[data-theme] .pj-fila:hover{ background:var(--tinte-toque); } }
:root[data-theme] :is(.nota-fila, .pn-fila){ background:transparent; border:0; border-radius:var(--r); padding-left:0; padding-right:0; }
:root[data-theme] .sc-fila{ background:transparent; border:0; padding:12px 0; }
/* Objetos en rejilla (automatizaciones, catalogo de Xarpie, estilos de galeria, disenos, bases,
   tarjetas del calendario): piedra de 16 px, sin borde ni sombra. */
:root[data-theme] :is(.fl-card, .cat-item, .gx-card, .dzcard, .db-card, .cf-rcard){ background:var(--piedra); border:0; border-radius:var(--r-flota); box-shadow:none; }
@media (hover:hover){ :root[data-theme] :is(.gx-card, .db-card, .cat-item):hover{ transform:none; box-shadow:inset 0 0 0 100px var(--tinte-toque); } }

/* Menu de puntos de los widgets del panel: solo al pasar el cursor por la tarjeta o con Tab. */
@media (hover:hover){
  :root[data-theme] .widget .w-menu{ opacity:0; }
  :root[data-theme] .widget:is(:hover, :focus-within) .w-menu, :root[data-theme] .w-menu:is(:focus-visible, [aria-expanded="true"]){ opacity:1; border-color:transparent; }
}

/* ================================ Admin (T5) ================================ */
/* Tarjetas de la cola: sin lomo de color a la izquierda (patron de plantilla); el tipo ya lo dice la
   linea de arriba. Flotan poco: piedra, 16 px. */
:root[data-theme] .cm-tarj{ border:0; border-radius:var(--r-flota); background:var(--piedra); }
:root[data-theme] :is(.cm-tarj-guardia, .cm-tarj-baja, .cm-tarj-reporte){ border-left:0; }
:root[data-theme] .cm-tabs-div{ background:var(--linea); }
:root[data-theme] #admin-tabs{ gap:0 20px; box-shadow:inset 0 -1px 0 var(--linea); }
:root[data-theme] #admin-tabs .tab{ margin-right:0; }
:root[data-theme] .tab-sec{ font-size:var(--t-texto); opacity:1; }

/* ============================ Portal del cliente (T6) ============================ */
/* Solo lo que es de Xarpen: forma de ventanas y avisos, y movimiento. Fondo, acento y letra son del
   estudio (llegan por --accent, --pserif y --bg desde portal.js) y aqui no se tocan.
   Excepcion consciente a la regla "sin x": la pareja entra pocas veces y no conoce los gestos; la x
   se queda, pero callada (pildora de icono, sin barra ni borde). */
.co-portal .ov{ animation:co-fundido 180ms var(--curva-cambia) both; }
.co-portal .modal{ border:0; border-radius:var(--r-flota); box-shadow:0 24px 60px -24px rgba(43,41,38,.35); animation:co-ventana 180ms var(--curva-entra) both; }
.co-portal .mhead{ border-bottom:0; padding:24px 24px 0; }
.co-portal .mfoot{ border-top:0; padding:16px 24px 24px; }
.co-portal .mhead .x{ width:36px; height:36px; border:0; border-radius:var(--r-pildora); display:inline-flex; align-items:center; justify-content:center; background:transparent; }
@media (hover:hover){ .co-portal .mhead .x:hover{ background:rgba(43,41,38,.06); } }
.co-portal #toast{ border-radius:var(--r-flota); box-shadow:0 18px 40px -18px rgba(43,41,38,.4); transition:opacity 140ms var(--curva-cambia), transform 140ms var(--curva-cambia); }
.co-portal #toast.show{ transition:opacity 200ms var(--curva-entra), transform 200ms var(--curva-entra); }
.co-portal #toast:before{ display:none; }
@media (prefers-reduced-motion: reduce){
  .co-portal .modal, .co-portal .ov{ animation:co-fundido 120ms linear both !important; }
  .co-portal #toast, .co-portal #toast.show{ transition:opacity 120ms linear !important; }
}

/* ============================ Movimiento reducido ============================ */
/* Una sola politica: nada se desliza ni escala; lo que aparece, aparece con fundido de 120 ms.
   html.movimiento-reducido es el espejo para probarlo en la vista previa. */
@media (prefers-reduced-motion: reduce){
  :root[data-theme] :is(.modal, .ov, .usermenu, .w-pop, .posp-menu){ animation:co-fundido 120ms linear both !important; }
  :root[data-theme] :is(.btn, .chip, .fchip, .seg-btn, .cp-navcfg, .cp-modo-btn, .co-boton, .co-icono):active{ transform:none !important; }
  :root[data-theme] #toast, :root[data-theme] #toast.show{ transform:translateX(-50%) !important; transition:opacity 120ms linear !important; }
  .co-menu, .co-menu.abierto, .co-aviso, .co-aviso.visible{ transform:none !important; transition:opacity 120ms linear, visibility 0s !important; }
  .brow-me .bub-me.co-nuevo{ animation:none !important; }
}
/* Red de seguridad de toda la app (una sola politica, sobre los 13 bloques sueltos de styles.css):
   con movimiento reducido solo se animan color y opacidad, nada se desplaza ni escala, y nada gira
   o late sin fin. Las reglas con nombre de arriba ganan por especificidad donde ya deciden algo. */
@media (prefers-reduced-motion: reduce){
  :root[data-theme] *, :root[data-theme] *::before, :root[data-theme] *::after{
    transition-property:opacity, color, background-color, border-color, box-shadow !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}
html.movimiento-reducido :is(.modal, .ov, .usermenu, .w-pop, .posp-menu){ animation:co-fundido 120ms linear both !important; }
html.movimiento-reducido :is(.btn, .chip, .fchip, .seg-btn, .cp-navcfg, .cp-modo-btn):active{ transform:none !important; }
html.movimiento-reducido #toast, html.movimiento-reducido #toast.show{ transform:translateX(-50%) !important; transition:opacity 120ms linear !important; }
html.movimiento-reducido :is(.co-menu, .co-menu.abierto, .co-aviso, .co-aviso.visible){ transform:none !important; transition:opacity 120ms linear, visibility 0s !important; }

/* ======================= Editor de contrato y de recibo (.ced) ======================= */
/* Lienzo "Contrato" (2026-09-16). El editor tenia paleta oscura PROPIA (--ced-*) y naranja en
   todo: se reasigna a los tokens del sistema, asi sigue el tema claro/oscuro y el color solo
   queda donde significa algo. La HOJA (.ced-paper) es el documento del estudio: recupera sus
   acentos de siempre para verse igual que el PDF que recibe la pareja. */
:root[data-theme] .ced{
  --ced-bg:var(--pag); --ced-panel:var(--piedra); --ced-panel2:var(--piedra-on);
  --ced-line:var(--linea); --ced-line2:var(--linea);
  --ced-ink:var(--tinta); --ced-ink2:var(--texto); --ced-ink3:var(--medio);
  --ced-accent:var(--tinta); --ced-accent2:var(--tinta);
  --ced-gold:var(--medio); --ced-red:var(--urge);
}
:root[data-theme] .ced .ced-paper{ --ced-accent:#d97757; --ced-accent2:#bd5d3a; }
:root[data-theme] .ced.red .ced-paper{ --ced-accent:#7c9471; --ced-accent2:#647a5b; }

/* Cabecera: sin raya; el estado es texto con punto, no pastilla de color. */
:root[data-theme] .ced-top{ border-bottom:0; padding:var(--e-3) var(--e-5) var(--e-4); gap:var(--e-3); }
:root[data-theme] .ced-iconbtn{ width:40px; height:40px; border:0; border-radius:var(--r-pildora); color:var(--medio); }
:root[data-theme] #ced-volver svg, :root[data-theme] #red-volver svg{ transform:rotate(90deg); }
@media (hover:hover){ :root[data-theme] .ced-iconbtn:hover{ background:var(--piedra-on); color:var(--tinta); } }
:root[data-theme] .ced-iconbtn[aria-expanded="true"]{ background:var(--piedra-on); color:var(--tinta); }
:root[data-theme] .ced-tnum{ font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .ced-tsub{ display:flex; align-items:center; gap:var(--e-2); color:var(--medio); flex-wrap:wrap; }
:root[data-theme] .ced-tsub-txt::before{ content:"·"; margin-right:var(--e-2); }
:root[data-theme] .ced-stpill{ padding:0; background:transparent; border-radius:0; font-weight:400; color:var(--tinta); gap:var(--e-2); }
:root[data-theme] .ced-stpill .ced-dot{ width:7px; height:7px; background:var(--medio); }
:root[data-theme] .ced-st-activo .ced-dot{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--punto); }
:root[data-theme] .ced-st-vencido{ color:var(--urge); }
:root[data-theme] .ced-st-vencido .ced-dot{ background:var(--urge); }
:root[data-theme] .ced-spread{ gap:var(--e-1); }
:root[data-theme] .ced-savestate{ margin-right:var(--e-2); color:var(--apagado); }

/* Botones: pildora; el principal en tinta, los demas callados. */
:root[data-theme] .ced-btn{ border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-weight:500; }
:root[data-theme] .ced-btn.sm{ height:36px; padding:0 var(--e-4); }
:root[data-theme] .ced-btn.accent{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .ced-btn.ced-btn-gh{ background:transparent; color:var(--texto); font-weight:400; }
@media (hover:hover){ :root[data-theme] .ced-btn.ced-btn-gh:hover{ background:var(--piedra-on); } }
:root[data-theme] .ced-btn[hidden]{ display:none; }

/* Paneles flotantes = menus del sistema. */
:root[data-theme] .ced-panel{ border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); padding:var(--e-2); z-index:var(--z-menu); }
:root[data-theme] .ced-panel-t{ font-size:var(--t-meta); color:var(--apagado); margin:var(--e-1) var(--e-2) var(--e-2); }
:root[data-theme] .ced-pact{ min-height:36px; padding:0 var(--e-2); border-radius:4px; color:var(--texto); }
@media (hover:hover){ :root[data-theme] .ced-pact:hover{ background:var(--piedra-on); color:var(--tinta); } }
:root[data-theme] .ced-pact.danger{ color:var(--urge); }
:root[data-theme] .ced-psep{ margin:var(--e-1); }
:root[data-theme] .ced-prow, :root[data-theme] .ced-toggle, :root[data-theme] .ced-panel .ced-field, :root[data-theme] .ced-panel .ced-hint{ padding-left:var(--e-2); padding-right:var(--e-2); }

/* Formulario: aire, no cajas. */
:root[data-theme] .ced-editor{ border-right:0; padding:var(--e-2) var(--e-6) var(--e-7) var(--e-5); }
:root[data-theme] .ced-sec{ margin-bottom:var(--e-6); }
:root[data-theme] .ced-sechd{ align-items:baseline; margin-bottom:var(--e-3); }
:root[data-theme] .ced-sechd .n{ width:auto; height:auto; border:0; background:transparent; font-size:var(--t-meta); font-weight:400; color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .ced-sechd h3{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
:root[data-theme] .ced-field label{ font-size:var(--t-meta); font-weight:400; color:var(--medio); }
:root[data-theme] .ced-inp, :root[data-theme] .ced-static{ border:0; border-radius:20px; background:var(--piedra); padding:10px var(--e-4); }
:root[data-theme] textarea.ced-inp{ border-radius:var(--r-flota); }
:root[data-theme] .ced-inp:focus{ box-shadow:inset 0 0 0 1px var(--punto); }
:root[data-theme] .ced-static a{ color:var(--tinta); font-weight:400; text-decoration:underline; text-decoration-color:var(--punto); text-underline-offset:3px; }
:root[data-theme] .ced-money .cur{ left:var(--e-4); }
:root[data-theme] .ced-money .ced-inp{ padding-left:30px; font-variant-numeric:tabular-nums; }
:root[data-theme] .ced-chk{ border-color:var(--punto); border-radius:4px; }
:root[data-theme] .ced-chk.on{ background:var(--boton); border-color:var(--boton); color:var(--boton-t); }
:root[data-theme] .ced-del{ border:0; border-radius:var(--r-pildora); }
:root[data-theme] .ced-addbtn{ border:0; border-radius:var(--r-pildora); color:var(--tinta); font-weight:400; padding:0 var(--e-3); height:36px; }
@media (hover:hover){ :root[data-theme] .ced-addbtn:hover{ background:var(--piedra-on); } }
:root[data-theme] .ced-tplbar, :root[data-theme] .ced-notice{ border:0; border-radius:var(--r-flota); }
:root[data-theme] .ced-tpl{ border:0; border-radius:var(--r-flota); }
:root[data-theme] .ced-tpl.on{ background:var(--piedra-on); box-shadow:inset 0 0 0 1px var(--punto); }
:root[data-theme] .ced-tplnew{ border-radius:var(--r-flota); border-color:var(--linea); }
:root[data-theme] .ced-pqmenu{ border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
:root[data-theme] .ced-pqopt{ border-bottom:0; }
:root[data-theme] .ced-pqhd{ border-bottom:0; color:var(--apagado); font-size:var(--t-meta); }

/* Anticipo: % y monto fijo en pildoras calladas; el activo en piedra, no en color. */
:root[data-theme] .ced .antmodo{ background:transparent; padding:0; gap:var(--e-1); }
:root[data-theme] .ced .antmodobtn, :root[data-theme] .ced .antpctchip{ height:32px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); font-weight:400; font-variant-numeric:tabular-nums; }
:root[data-theme] .ced .antmodobtn.on, :root[data-theme] .ced .antpctchip.on{ background:var(--piedra-on); color:var(--tinta); }
@media (hover:hover){ :root[data-theme] .ced .antpctchip:not(.on):hover{ color:var(--tinta); } }
:root[data-theme] .ced #ant-pct-custom{ height:32px; border:0; border-radius:var(--r-pildora); background:var(--piedra); }

/* Resumen de anticipo y saldo: filas con una linea, sin caja; el total en tinta. */
:root[data-theme] .ced .ced-calcbox{ border:0; background:transparent; padding:0; }
:root[data-theme] .ced .ced-calcrow{ border-bottom:0; min-height:44px; padding:10px 0; font-variant-numeric:tabular-nums; }
:root[data-theme] .ced .ced-calcrow + .ced-calcrow{ box-shadow:inset 0 1px 0 var(--linea); }
:root[data-theme] .ced .ced-calcrow .cv{ font-size:var(--t-texto); font-weight:400; color:var(--tinta); }
:root[data-theme] .ced .ced-calcrow.tot .cl, :root[data-theme] .ced .ced-calcrow.tot .cv{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }

/* Mesa de la vista previa: sin rayas. */
:root[data-theme] .ced-preview{ background:var(--x); }
:root[data-theme] .ced-previewbar .ced-label{ font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
/* Telefono: los pares de campos del editor van uno debajo del otro (a 390 px partian fechas y nombres). */
@media (max-width:860px){ :root[data-theme] .ced-grid2{ grid-template-columns:minmax(0,1fr); gap:0; } }
/* Telefono: Editar / Vista previa como pestanas de texto con linea; se ve una sola columna a la vez. */
:root[data-theme] .ced-pestanas-tel{ display:none; }
@media (max-width:860px){
  :root[data-theme] .ced-pestanas-tel{ display:flex; gap:var(--e-5); margin:0 var(--e-4); box-shadow:inset 0 -1px 0 var(--linea); flex:none; }
  :root[data-theme] .ced-ptab{ height:40px; color:var(--medio); box-shadow:inset 0 -2px 0 transparent; }
  :root[data-theme] .ced-ptab.on{ color:var(--tinta); box-shadow:inset 0 -2px 0 var(--tinta); }
  :root[data-theme] .ced .ced-editor{ border-bottom:0; }
  :root[data-theme] .ced .ced-preview{ display:none; padding:var(--e-4); }
  :root[data-theme] .ced.ced-en-vista .ced-editor{ display:none; }
  :root[data-theme] .ced.ced-en-vista .ced-preview{ display:block; }
  :root[data-theme] .ced-body{ overflow-y:auto; }
}
/* Telefono: las acciones del documento bajan a una barra de vidrio arriba de la barra inferior de la
   app (#barra-inf: 56 px a 20 px del borde), como en el lienzo. Los menus se abren hacia arriba. */
@media (max-width:860px){
  :root[data-theme] .ced-top .ced-spread{
    position:fixed; left:var(--e-4); right:var(--e-4); bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:57;
    height:56px; margin:0; padding:0 var(--e-2); flex-wrap:nowrap; border-radius:var(--r-pildora);
    background:var(--caja); box-shadow:var(--sombra-flota); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
  :root[data-theme] .ced-top .ced-spread .ced-btn.accent{ margin-left:auto; height:40px; }
  :root[data-theme] .ced-top .ced-spread .ced-savestate{ min-width:0; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 var(--e-1); }
  :root[data-theme] .ced-top .ced-spread .ced-panel{ top:auto; bottom:100%; margin:0 0 var(--e-2); transform-origin:bottom right; max-width:calc(100vw - 32px); }
  :root[data-theme] .ced .ced-editor, :root[data-theme] .ced .ced-preview{ padding-bottom:168px; }
}
@media (max-width:860px){
  /* Los envoltorios traen position:relative en linea; en la barra los paneles se anclan a la barra
     entera (que es fixed) para no salirse por la izquierda cuando su boton queda al centro. */
  :root[data-theme] .ced-top .ced-spread > div{ position:static !important; }
  :root[data-theme] .ced-top .ced-spread .ced-panel{ right:0; }
}
@media (max-width:860px){ :root[data-theme] .ced-top .ced-spread > div:has(> .ced-btn.accent){ margin-left:auto; } }

/* ================= Barrido 2026-09-17: lo que quedaba en telefono y color ================= */
/* Pendientes (widget del Panel y #/pendientes): su paleta propia seguia en terracota para la
   pestana activa, los contadores y lo fijado. Pasa a tinta; el terracota queda SOLO en lo vencido.
   Ademas .pendw-go era texto blanco sobre --accent (#C9C6BF en oscuro): no se leia. */
:root[data-theme] :is(.pendw, .pendw-pop){ --tint:var(--piedra-on); --acctxt:var(--tinta); --acc:var(--tinta); }
:root[data-theme] .pendw-pill.red{ background:color-mix(in srgb, var(--urge) 16%, transparent); color:var(--urge); }
:root[data-theme] .pendw-go{ border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font-weight:500; }
:root[data-theme] .pendw-go.ghost{ border:0; background:transparent; color:var(--texto); }
@media (hover:hover){ :root[data-theme] .pendw-go.ghost:hover{ background:var(--piedra-on); color:var(--tinta); } }
:root[data-theme] .pendw-tab{ border-radius:var(--r-pildora); }

/* Un saldo por cobrar no es urgente: va en tinta. Lo urgente ya lo dice la pastilla "Vencido". */
:root[data-theme] .fc-saldo-debe{ color:var(--tinta); }

@media (max-width:860px){
  /* Filas de botones que se cortaban a la derecha (Panel: "+ Tarea / Preparame el dia"; boda:
     "Combinar"; Servicios: "+ Paquete"). Se acomodan en dos lineas en vez de salirse. */
  :root[data-theme] .foco-head{ flex-wrap:wrap; }
  :root[data-theme] #view .fx.gap10{ flex-wrap:wrap; }
  /* Pendientes: la categoria y el selector dejaban el texto de la fila en 0 px de ancho. */
  :root[data-theme] .pendw-r{ flex-wrap:wrap; row-gap:var(--e-2); }
  :root[data-theme] .pendw-r .pendw-cat{ display:none; }
  :root[data-theme] .pendw-r .pendw-rm{ flex:1 1 60%; }
  /* Editor de la pagina publica: sus acciones de arriba se salian 270 px de la pantalla. */
  :root[data-theme] .pp-top{ flex-wrap:wrap; row-gap:var(--e-2); }
  :root[data-theme] .pp-top-acts{ flex-wrap:wrap; }
}
/* Editor de la pagina publica: sus @container de pagina.js/styles.css nunca movian la rejilla de
   .pp-editor porque un elemento no puede consultarse a si mismo como contenedor (solo a un
   ancestro). #view pasa a ser el contenedor: mide lo mismo, y asi las reglas de 1280/1080/820 px
   que ya existian por fin aplican (en telefono quedaba en 3 columnas de 660 px). */
.main > #view:has(.pp-editor){ container-type:inline-size; }
@media (max-width:860px){
  /* Pendientes: la lista de categorias a la izquierda (180 px) dejaba las filas en 158 px. */
  :root[data-theme] .pendw-2p{ grid-template-columns:minmax(0,1fr); }
}
/* Cajas que quedaban con borde (barrido 2026-09-17). Regla del lienzo: aire, no cajas; lo que flota
   (menus) es piedra con sombra, sin raya. */
:root[data-theme] .ceo-mini{ border:0; text-align:left; padding:var(--e-2) 0; }
:root[data-theme] .paybox{ border:0; background:transparent; padding:var(--e-2) 0; }
:root[data-theme] .paybig .money{ color:var(--tinta) !important; }
:root[data-theme] .foco-hero{ border:0; background:transparent; box-shadow:none; padding-left:0; padding-right:0; }
:root[data-theme] .cig-hero{ border:0; border-radius:var(--r-flota); }
:root[data-theme] .cig-vacio{ border:0; background:transparent; padding-left:0; padding-right:0; }
:root[data-theme] .cig-prevwrap{ border:0; border-radius:var(--r-flota); background:var(--piedra); }
:root[data-theme] .wadd-item{ border:0; border-radius:var(--r-flota); background:var(--piedra); }
@media (hover:hover){ :root[data-theme] .wadd-item:hover{ background:var(--piedra-on); } }
:root[data-theme] .sc-menu-pop{ border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
/* Automatizaciones: las recetas son objetos que se tocan (piedra 16 px, sin raya punteada); la caja
   de "pedir" y la de "como funciona" pierden el borde y el degradado. */
:root[data-theme] .fl-receta{ border:0; border-radius:var(--r-flota); background:var(--piedra); }
@media (hover:hover){ :root[data-theme] .fl-receta:hover{ background:var(--piedra-on); } }
:root[data-theme] .fl-pedir{ border:0; border-radius:var(--r-flota); background:var(--piedra); }
:root[data-theme] .fl-como{ border:0; border-radius:var(--r-flota); background:var(--piedra); }

/* ================= Ventanas en telefono = hojas (barrido 2026-09-17) ================= */
/* En telefono una ventana flotante al centro deja los botones lejos del pulgar y tapa la barra
   inferior sin cubrirla del todo. Sube desde abajo como hoja (280 ms, curva de arrastre: la misma
   que las hojas del telefono) y los botones de guardar quedan pegados abajo mientras se desplaza el
   formulario. Sin agarradera: todavia no se puede arrastrar para cerrar, y dibujarla prometeria un
   gesto que no existe. Se cierra tocando fuera, con Cancelar o con Escape. */
@keyframes co-hoja{ from{ transform:translateY(100%); } to{ transform:none; } }
@media (max-width:860px){
  :root[data-theme] #modal-bg.show{ align-items:flex-end; justify-content:stretch; padding:0; }
  :root[data-theme] #modal-bg .modal{
    width:100%; max-width:none; margin:0; max-height:calc(100dvh - var(--e-7));
    border-radius:var(--r-flota) var(--r-flota) 0 0; box-shadow:var(--sombra-flota);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    animation:co-hoja var(--d-hoja) var(--curva-arrastre) both;
  }
  :root[data-theme] #modal-bg .modal .mhead{ padding:20px var(--e-4) 0; }
  :root[data-theme] #modal-bg .modal .mbody{ padding:var(--e-3) var(--e-4) var(--e-2); }
  :root[data-theme] #modal-bg .modal .mfoot{ position:sticky; bottom:0; z-index:2; background:var(--hoja); padding:var(--e-3) var(--e-4) var(--e-4); }
  :root[data-theme] #modal-bg .modal .mfoot .btn{ flex:1 1 auto; justify-content:center; min-height:44px; }
  /* Formularios dentro: filas de campos una debajo de otra y segmentos que bajan de linea. */
  :root[data-theme] #modal-bg .modal .frow{ grid-template-columns:minmax(0,1fr); }
  :root[data-theme] #modal-bg .modal .seg{ flex-wrap:wrap; }
}
@media (max-width:860px) and (prefers-reduced-motion: reduce){
  :root[data-theme] #modal-bg .modal{ animation:co-fundido 120ms linear both; }
}
html.movimiento-reducido #modal-bg .modal{ animation:co-fundido 120ms linear both !important; }

/* Resumen de anticipo y saldo tambien en la ventana de Generar contrato (fuera de .ced). */
:root[data-theme] #gc-calcbox{ border:0; background:transparent; padding:0; }
:root[data-theme] #gc-calcbox .ced-calcrow{ border-bottom:0; min-height:44px; padding:10px 0; font-variant-numeric:tabular-nums; }
:root[data-theme] #gc-calcbox .ced-calcrow + .ced-calcrow{ box-shadow:inset 0 1px 0 var(--linea); }
:root[data-theme] #gc-calcbox .ced-calcrow .cv{ font-size:var(--t-texto); font-weight:400; color:var(--tinta); }
:root[data-theme] #gc-calcbox .ced-calcrow.tot .cl, :root[data-theme] #gc-calcbox .ced-calcrow.tot .cv{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }

/* Control de anticipo fuera del editor (ventana Generar contrato): usaba --accent de fondo con texto
   blanco, que en oscuro es gris claro sobre blanco. Mismas pildoras calladas que en el editor. */
:root[data-theme] #modal .antmodo{ background:transparent; padding:0; gap:var(--e-1); }
:root[data-theme] #modal :is(.antmodobtn, .antpctchip){ height:32px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); font-weight:400; font-variant-numeric:tabular-nums; }
:root[data-theme] #modal :is(.antmodobtn, .antpctchip).on{ background:var(--piedra-on); color:var(--tinta); }

/* ================= Portal del cliente en telefono (lienzo ronda 2, "Telefono · Portal") ================= */
/* Solo el marco de Xarpen: la marca del estudio (letra, acento, fondo) no se toca. La barra de
   arriba traia 6 iconos con raya apretados y la barra de desplazamiento a la vista; el lienzo los
   dibuja como pildoras calladas, la activa con un tinte. La etiqueta "Tus eventos" deja las
   mayusculas (filtro anti-plantilla) y los eventos son pildoras porque se tocan. */
.co-portal .portal .evsel-t{ text-transform:none; letter-spacing:0; }
.co-portal .portal .evsel-chip{ border-radius:var(--r-pildora); padding:8px 16px; }
@media (max-width:860px){
  /* No cabia: 6 secciones (274 px) + nombre del estudio + idioma en 390 px dejaban el nav en 158 px
     con la mitad de las secciones fuera de vista. Las secciones bajan a una barra al alcance del
     pulgar (en el color de la barra del estudio, no en uno nuestro); arriba quedan nombre e idioma. */
  .co-portal .portal .navlist{
    position:fixed; left:var(--e-4); right:var(--e-4); bottom:calc(var(--e-4) + env(safe-area-inset-bottom, 0px)); z-index:6;
    height:56px; min-width:0; padding:0 var(--e-2); gap:0; justify-content:space-around; align-items:center; overflow:visible;
    background:var(--dark); border-radius:var(--r-pildora); box-shadow:var(--sombra-flota);
  }
  .co-portal .portal .navi{ width:44px; height:44px; padding:0; justify-content:center; border:0; border-radius:var(--r-pildora); flex:none; position:relative; }
  .co-portal .portal .navi .ni{ opacity:1; }
  .co-portal .portal .navi.on{ border:0; }
  .co-portal .portal .navi .navbadge{ position:absolute; top:4px; right:4px; }
  .co-portal .portal .brand{ max-width:none; flex:1 1 auto; }
  .co-portal .portal .mainpad{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* "English" era texto oscuro sobre la barra oscura: hereda el claro de la barra. */
  .co-portal .portal .side #pv-lang-toggle{ color:inherit; border-color:currentColor; border-radius:var(--r-pildora); margin-left:auto; }
}

/* Ventana abierta con teclado: aparece sin animar (openModal marca .co-teclado). El velo tampoco. */
:root[data-theme] .modal.co-teclado, :root[data-theme] #modal-bg .modal.co-teclado{ animation:none; }
:root[data-theme] #modal-bg:has(.modal.co-teclado){ animation:none; }

/* ===================== Portal: ventanas, firma y botones (barrido 2026-09-17) ===================== */
/* El portal no marca data-theme, asi que las reglas :root[data-theme] del CRM no le llegan: aqui
   van sus equivalentes, en la paleta clara del portal. La firma era "inservible en telefono": el
   lienzo para dibujar no tenia fondo ni borde (no se veia donde firmar) y medía 86 px de alto
   (portal.js ahora le da 400x240 en telefono). Se dibuja como papel con una linea de firma. */
.co-portal #firma-pad{
  width:100%; height:auto; border-radius:var(--r-flota); background:var(--piedra);
  box-shadow:inset 0 0 0 1px var(--linea), inset 0 -36px 0 -35px var(--punto);
}
.co-portal #modal .flabel{ text-transform:none; letter-spacing:0; font-size:var(--t-meta); }
.co-portal #modal .btn{ border-radius:var(--r-pildora); }
.co-portal #modal .btn-gh{ border-color:transparent; background:transparent; }
@media (max-width:860px){
  .co-portal #modal-bg.show{ align-items:flex-end; justify-content:stretch; padding:0; }
  .co-portal #modal-bg .modal{
    width:100%; max-width:none; margin:0; max-height:calc(100dvh - var(--e-7));
    border-radius:var(--r-flota) var(--r-flota) 0 0; padding-bottom:env(safe-area-inset-bottom, 0px);
    animation:co-hoja var(--d-hoja) var(--curva-arrastre) both;
  }
  .co-portal #modal-bg .modal .mhead{ padding:20px var(--e-4) 0; }
  .co-portal #modal-bg .modal .mbody{ padding:var(--e-3) var(--e-4) var(--e-2); }
  .co-portal #modal-bg .modal .mfoot{ position:sticky; bottom:0; z-index:2; background:inherit; padding:var(--e-3) var(--e-4) var(--e-4); flex-wrap:wrap; gap:var(--e-2); }
}
@media (max-width:860px) and (prefers-reduced-motion: reduce){
  .co-portal #modal-bg .modal{ animation:co-fundido 120ms linear both; }
}

/* Menu "+" del chat en escritorio: era popover con raya, 4 px y la animacion vieja (pop .16s ease).
   Flota: 16 px, sombra de menu y 120 ms desde su esquina (se abre ARRIBA del +, abajo a la izquierda). */
@media (min-width:861px){
  :root[data-theme] .agregar-sheet:not([hidden]){
    border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu);
    transform-origin:bottom left; animation:co-menu var(--d-menu) var(--curva-entra) both;
  }
}

/* ============ Auditoria de movimiento y flotantes (barrido 2026-09-17, lente Emil) ============ */
/* Lo que seguia con pop/rise de curva generica ("ease") y raya de 1 px. Menus = 120 ms desde su
   esquina; ventanas = 180 ms; lo que aparece solo (recorrido, dia plegado) = fundido corto.
   .cmd-menu abre hacia ARRIBA de la caja del chat; .cp-drop hacia abajo de su campo. */
:root[data-theme] :is(.cp-drop, .cmd-menu, .tour-pop, .tour-fb){ border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
:root[data-theme] .cp-drop{ transform-origin:top center; animation:co-menu var(--d-menu) var(--curva-entra) both; }
:root[data-theme] .cmd-menu{ transform-origin:bottom center; animation:co-menu var(--d-menu) var(--curva-entra) both; }
:root[data-theme] .tour-pop{ animation:co-menu var(--d-menu) var(--curva-entra) both; }
:root[data-theme] .tour-fb{ animation:co-fundido var(--d-aviso) var(--curva-cambia) both; }
:root[data-theme] #app.crm-colapsado .diaria:not([hidden]){ animation:co-fundido var(--d-aviso) var(--curva-cambia) both; }
:root[data-theme] .wexp-backdrop:not([hidden]){ background:var(--velo); animation:co-fundido var(--d-ventana) var(--curva-cambia) both; }
:root[data-theme] .wexp:not([hidden]){ border:0; border-radius:var(--r-flota); background:var(--pag); box-shadow:var(--sombra-flota); animation:co-ventana var(--d-ventana) var(--curva-entra) both; }
@media (prefers-reduced-motion: reduce){
  :root[data-theme] :is(.cp-drop, .cmd-menu, .tour-pop, .wexp:not([hidden]), .agregar-sheet:not([hidden])){ animation:co-fundido 120ms linear both; }
}

/* Entrada: etiqueta arriba del campo (index.html), campos en pildora; en telefono la tarjeta ocupa
   el ancho con 16 px de margen y los campos crecen a 44 px (alcance del dedo). */
:root[data-theme] .login-card .login-lab{ display:block; text-align:left; font-size:var(--t-meta); color:var(--medio); margin:0 0 6px var(--e-1); }
:root[data-theme] .login-card input{ border:0; border-radius:var(--r-pildora); background:var(--pag); padding:10px var(--e-4); box-shadow:inset 0 0 0 1px var(--linea); }
:root[data-theme] .login-card input:focus{ background:var(--pag); box-shadow:inset 0 0 0 1px var(--punto); }
:root[data-theme] .login-card .btn{ min-height:44px; border-radius:var(--r-pildora); }
@media (max-width:860px){
  :root[data-theme] .login-card{ width:calc(100vw - var(--e-6)); padding:var(--e-6) var(--e-5); }
  :root[data-theme] .login-card input{ min-height:44px; }
}

/* ============ Editores de galeria, portal y album (barrido 2026-09-17) ============ */
/* El editor embebido (.ge-embebido: galeria unificada, diseno de portal) tenia paleta propia en
   hex fijos y una "regla de affordance" de agosto: accion = caja con raya, opcion = chip con raya
   rellena al activarse, rotulo = versalitas. Se conserva la regla, traducida a Cuarto Oscuro:
   accion = piedra 16 px con su flecha (sin raya), pagina = texto con linea de 2 px, segmento =
   pildora callada, rotulo = texto chico sin mayusculas. La paleta pasa a tokens y sigue el tema.
   La vista previa de la galeria (lo que ve la pareja) NO cambia: vive en su iframe. */
:root[data-theme] .ge-embebido .ge-rail{
  --ge-bg:var(--pag); --ge-ink:var(--tinta); --ge-ink2:var(--medio); --ge-ink3:var(--apagado);
  --ge-line:var(--linea); --ge-line2:var(--linea); --ge-prev:var(--piedra); --ge-ink2-caja:var(--medio);
  --ge-focus:var(--punto);
}
:root[data-theme] .ge-embebido :is(.ge-railtop, .ge-nav){ border-bottom:0; }
:root[data-theme] .ge-embebido .ge-nav{ gap:var(--e-5); box-shadow:inset 0 -1px 0 var(--linea); padding-top:0; padding-bottom:0; }
:root[data-theme] .ge-embebido .ge-navbtn{ min-height:44px; padding:0; border:0; border-radius:0; background:transparent; color:var(--medio); font-weight:400; box-shadow:inset 0 -2px 0 transparent; }
:root[data-theme] .ge-embebido .ge-navbtn.on{ background:transparent; color:var(--tinta); font-weight:500; box-shadow:inset 0 -2px 0 var(--tinta); }
@media (hover:hover){ :root[data-theme] .ge-embebido .ge-navbtn:hover{ border-color:transparent; color:var(--tinta); } }
:root[data-theme] .ge-embebido .ge-row, :root[data-theme] .ge-embebido .ge-rail .ge-row{ border:0; border-radius:var(--r-flota); background:var(--piedra); }
@media (hover:hover){ :root[data-theme] .ge-embebido .ge-row:hover{ background:var(--piedra-on); } }
:root[data-theme] .ge-embebido .ge-rail .ge-rbtn-caja{ border:0; border-radius:var(--r-pildora); background:var(--piedra-on); }
:root[data-theme] .ge-embebido .ge-rail .ge-flabel{ text-transform:none; letter-spacing:0; font-weight:400; }
:root[data-theme] .ge-sechd .ge-ix{ width:auto; height:auto; background:transparent; font-weight:400; color:var(--apagado); }
:root[data-theme] :is(.ge-seg, .ge-segdark){ background:var(--piedra); border-radius:var(--r-pildora); }
:root[data-theme] .ge-segbtn{ border:0; border-radius:var(--r-pildora); color:var(--medio); font-weight:400; }
:root[data-theme] .ge-segbtn.on{ background:var(--piedra-on); color:var(--tinta); box-shadow:none; font-weight:500; }
:root[data-theme] .edg-abrir-prev{ border:0; background:var(--piedra-on); color:var(--tinta); }
:root[data-theme] .ge-txpanel{ border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
:root[data-theme] .ge-txhd{ border-bottom:0; }

/* Barra del editor de album: botones cuadrados con raya y el activo en naranja. Pildoras; el
   activo en piedra. Los pares boton + flecha (Guias, Exportar) siguen unidos como una pildora. */
:root[data-theme] .al-tb{ border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); }
:root[data-theme] .al-tb.on{ background:var(--boton); color:var(--boton-t); border-color:transparent; }
:root[data-theme] .al-toolbar .al-tb-split{ border-radius:var(--r-pildora) 0 0 var(--r-pildora); }
:root[data-theme] .al-toolbar .al-tb-caret{ border-radius:0 var(--r-pildora) var(--r-pildora) 0; box-shadow:inset 1px 0 0 var(--linea); }
:root[data-theme] .ge-crumb .ge-bk{ width:32px; height:32px; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); }
:root[data-theme] .btn.edg-abrir-prev{ border-color:transparent; }
:root[data-theme] .lp-add-img{ border:0; border-radius:var(--r-flota); background:var(--piedra); color:var(--tinta); }
@media (hover:hover){ :root[data-theme] .lp-add-img:hover{ background:var(--piedra-on); } }

/* Tarjeta de accion de Xarpie en el chat: era caja con raya de 4 px. En el chat lo que Xarpie
   entrega flota sobre el papel punteado: piedra de 16 px, sin raya; botones en pildora. */
:root[data-theme] .xtarjeta{ border:0; border-radius:var(--r-flota); background:var(--piedra); box-shadow:var(--sombra-flota); padding:var(--e-4); }
:root[data-theme] .xtarjeta-titulo{ font-weight:500; color:var(--tinta); }
:root[data-theme] .xtarjeta .btn{ border-radius:var(--r-pildora); }
:root[data-theme] .bub-rico code{ border:0; border-radius:4px; background:var(--piedra-on); }
:root[data-theme] .bub-rico li::marker{ color:var(--apagado); }
@media (max-width:860px){ :root[data-theme] .xtarjeta{ margin-left:0; } }

/* ====================== BARRIDO 2: cajas con raya que nadie cubria (2026-09-17) ======================
   Generado desde styles.css: toda regla con "border:1px" + border-radius cuya clase no aparecia en
   este archivo. Clasificada por lo que ES en el sistema, no pantalla por pantalla:
     flota    (menus, paneles, avisos flotantes) -> 16 px, sombra de menu, sin raya
     se toca  (botones, chips, segmentos, opciones) -> pildora en piedra (sin la raya se perdia el boton)
     contiene (tarjetas, avisos, pasos, filas)      -> 16 px, piedra, sin raya
   :where() deja la especificidad igual a la regla original: los estados .on / :checked / .activo
   de cada componente siguen ganando. La raya pasa a transparente (no a 0) para no mover medidas.
   Fuera a proposito: plantillas del cliente (gx-, gxm-), Revelado (rv-, en pausa por decision de
   Daniel), la hoja del contrato (ced-ptable), campos de texto, muestras de color, miniaturas,
   celdas de calendario y pastillas de estado. */
:where(:root[data-theme]) .al-filterpanel,
:where(:root[data-theme]) .al-guias-pop,
:where(:root[data-theme]) .al-pop,
:where(:root[data-theme]) .cf-modal,
:where(:root[data-theme]) .cp-menu,
:where(:root[data-theme]) .pendw-pop-date,
:where(:root[data-theme]) .pendw-toast{ border-color:transparent; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
:where(:root[data-theme]) .al-fheart,
:where(:root[data-theme]) .al-gnum,
:where(:root[data-theme]) .al-ib,
:where(:root[data-theme]) .al-ix,
:where(:root[data-theme]) .al-poto,
:where(:root[data-theme]) .al-seg,
:where(:root[data-theme]) .cd-serv-rm,
:where(:root[data-theme]) .ced-pctchip,
:where(:root[data-theme]) .cf-btn,
:where(:root[data-theme]) .cf-copyb,
:where(:root[data-theme]) .cf-dact,
:where(:root[data-theme]) .cf-fchip,
:where(:root[data-theme]) .cf-freechip,
:where(:root[data-theme]) .cf-nav,
:where(:root[data-theme]) .cf-qadd,
:where(:root[data-theme]) .cf-seg,
:where(:root[data-theme]) .cf-seg2,
:where(:root[data-theme]) .cf-stepper,
:where(:root[data-theme]) .cf-xb,
:where(:root[data-theme]) .cig-chip,
:where(:root[data-theme]) .cig-dia-add,
:where(:root[data-theme]) .cp-close,
:where(:root[data-theme]) .cp-logout,
:where(:root[data-theme]) .cp-navbtn,
:where(:root[data-theme]) .db-arch-add,
:where(:root[data-theme]) .ecr-nueva,
:where(:root[data-theme]) .ent-opt,
:where(:root[data-theme]) .entw-go,
:where(:root[data-theme]) .evtl-chip,
:where(:root[data-theme]) .fed-back,
:where(:root[data-theme]) .fed-quitar,
:where(:root[data-theme]) .fed-redactar,
:where(:root[data-theme]) .fed-refinar,
:where(:root[data-theme]) .fed-seg,
:where(:root[data-theme]) .fed-zoom,
:where(:root[data-theme]) .filtro,
:where(:root[data-theme]) .foco-btn,
:where(:root[data-theme]) .foco-op,
:where(:root[data-theme]) .ge-pfbtn,
:where(:root[data-theme]) .ing-seg,
:where(:root[data-theme]) .kadd,
:where(:root[data-theme]) .pendw-ic,
:where(:root[data-theme]) .pendw-nat,
:where(:root[data-theme]) .pendw-src,
:where(:root[data-theme]) .pendw-st,
:where(:root[data-theme]) .pista-x-chip,
:where(:root[data-theme]) .pp-chip,
:where(:root[data-theme]) .pp-flag,
:where(:root[data-theme]) .pp-par,
:where(:root[data-theme]) .pp-seg,
:where(:root[data-theme]) .quiz-op,
:where(:root[data-theme]) .quiz-opt,
:where(:root[data-theme]) .sc-iconbtn,
:where(:root[data-theme]) .w-quick,
:where(:root[data-theme]) .wpanel-btn,
:where(:root[data-theme]) .xarpie-efecto-link,
:where(:root[data-theme]) .xarpieabrir-btn,
:where(:root[data-theme]) .xarpiepreg-op,
:where(:root[data-theme]) .xb-notif{ border-color:transparent; border-radius:var(--r-pildora); background:var(--piedra-on); }
:where(:root[data-theme]) .acc-card,
:where(:root[data-theme]) .ag-toggle-val,
:where(:root[data-theme]) .aj-solo-lectura,
:where(:root[data-theme]) .al-addspread,
:where(:root[data-theme]) .al-adforma,
:where(:root[data-theme]) .al-tpl,
:where(:root[data-theme]) .al-wstep,
:where(:root[data-theme]) .alw-preset,
:where(:root[data-theme]) .cf-calcfg,
:where(:root[data-theme]) .cf-detail,
:where(:root[data-theme]) .cf-di,
:where(:root[data-theme]) .cf-dli,
:where(:root[data-theme]) .cf-dnstat,
:where(:root[data-theme]) .cf-main,
:where(:root[data-theme]) .cf-urlrow,
:where(:root[data-theme]) .cf-warnbox,
:where(:root[data-theme]) .cig-aviso,
:where(:root[data-theme]) .cig-nuevo,
:where(:root[data-theme]) .cig-prev-card,
:where(:root[data-theme]) .cig-prev-vacio,
:where(:root[data-theme]) .cig-serv,
:where(:root[data-theme]) .cl-gal-card,
:where(:root[data-theme]) .cvp-aviso,
:where(:root[data-theme]) .cvp-grupo,
:where(:root[data-theme]) .cvp-tipo,
:where(:root[data-theme]) .cvp-vacio,
:where(:root[data-theme]) .db-arch-cell,
:where(:root[data-theme]) .db-calc-val,
:where(:root[data-theme]) .db-cv-det,
:where(:root[data-theme]) .db-fgrupo-caja,
:where(:root[data-theme]) .db-gal-card,
:where(:root[data-theme]) .ecr-fila,
:where(:root[data-theme]) .edg-paso,
:where(:root[data-theme]) .ent-aviso,
:where(:root[data-theme]) .ent-pieza,
:where(:root[data-theme]) .entw-est,
:where(:root[data-theme]) .fed-dias,
:where(:root[data-theme]) .fed-nota,
:where(:root[data-theme]) .fed-paso,
:where(:root[data-theme]) .fed-titulo,
:where(:root[data-theme]) .fl-auto,
:where(:root[data-theme]) .fl-ej,
:where(:root[data-theme]) .fl-prop-banda,
:where(:root[data-theme]) .foco-ayuda,
:where(:root[data-theme]) .gact-aviso,
:where(:root[data-theme]) .gal-prog-error-grupo,
:where(:root[data-theme]) .ge-aviso-custodia,
:where(:root[data-theme]) .ge-bbody,
:where(:root[data-theme]) .ge-card,
:where(:root[data-theme]) .ge-note,
:where(:root[data-theme]) .ge-pfmini,
:where(:root[data-theme]) .ge-txblock,
:where(:root[data-theme]) .kadd-box,
:where(:root[data-theme]) .lp-blk,
:where(:root[data-theme]) .lp-mini,
:where(:root[data-theme]) .lp-tpl,
:where(:root[data-theme]) .nocosto,
:where(:root[data-theme]) .onb-step,
:where(:root[data-theme]) .payaviso,
:where(:root[data-theme]) .pendw-note,
:where(:root[data-theme]) .pj-calbox,
:where(:root[data-theme]) .pj-card,
:where(:root[data-theme]) .pj-nota,
:where(:root[data-theme]) .pj-resumen,
:where(:root[data-theme]) .pj-tl-caja,
:where(:root[data-theme]) .pl-calc,
:where(:root[data-theme]) .pl-row,
:where(:root[data-theme]) .plt-row,
:where(:root[data-theme]) .pp-arrcard,
:where(:root[data-theme]) .pp-aviso-contraste,
:where(:root[data-theme]) .pp-capa,
:where(:root[data-theme]) .pp-item,
:where(:root[data-theme]) .pp-kpis,
:where(:root[data-theme]) .pp-tcard,
:where(:root[data-theme]) .pp-tmeta,
:where(:root[data-theme]) .pp-token-fila,
:where(:root[data-theme]) .rod-fila,
:where(:root[data-theme]) .sc-acard,
:where(:root[data-theme]) .sc-alinkrow,
:where(:root[data-theme]) .sc-err,
:where(:root[data-theme]) .sc-fg,
:where(:root[data-theme]) .sc-fondo-actual,
:where(:root[data-theme]) .sc-fondo-subiendo,
:where(:root[data-theme]) .sc-prev-caja,
:where(:root[data-theme]) .sc-stat,
:where(:root[data-theme]) .sc-visor,
:where(:root[data-theme]) .xarpiepreg,
:where(:root[data-theme]) .xb-tile{ border-color:transparent; border-radius:var(--r-flota); background:var(--piedra); }

/* Contraste (barrido 2026-09-17): reglas viejas con texto blanco fijo sobre el acento. Desde que el
   acento es gris claro en oscuro (y tinta en claro) quedaban en 1.3-1.7:1, ilegibles: la pestana
   activa del calendario, "Nuevo", el dia de hoy, "Lista" en Pendientes, los % del contrato. El par
   correcto es --boton / --boton-t, que se invierte solo con el tema.
   .quiz-opt.on (2026-09-19) es el caso inverso del mismo error: el fondo, no el texto. En oscuro
   --accent-solido (#2A2A28) cae casi encima de --piedra-on (#272624), el fondo que el barrido 2 le da
   a toda pildora, y la opcion elegida del cuestionario de bienvenida no se distinguia de las demas.
   Mismo caso, medido en el preview el mismo dia (1.05:1 entre elegido y no elegido): .ing-seg.on
   (periodo de Ingresos y vista del mini calendario), .foco-op.on (la respuesta tocada en El Foco
   mientras se guarda) y .al-fheart.on ("solo favoritas" del disenador de album: 1.01:1 contra su
   propio panel, que es --menu). */
/* .cf-mnum.today salio de esta lista (a-73, F3): tiene su propia regla dedicada mas abajo
   (anillo en tinta), y aqui perdia el empate de especificidad contra el argumento MAS
   especifico de este :is() (.cf-wdh.today .cf-wdd, 2 clases + descendiente + 1 clase) --
   background/color de fabrica (relleno solido) le ganaban a la regla dedicada aunque
   estuviera mas abajo en el archivo. Devuelto por Abuela con la causa exacta, 2026-09-26. */
:root[data-theme] :is(.cf-seg button.on, .cf-seg2 button.on, .cf-btn.accent, .cf-mid.today, .cf-wdh.today .cf-wdd, .pendw-vs button.on, .ced-pctchip.on, .sc-poster-star, .quiz-opt.on, .ing-seg.on, .foco-op.on, .al-fheart.on){
  background:var(--boton); border-color:transparent; color:var(--boton-t);
}
@media (hover:hover){
  :root[data-theme] .cf-btn.accent:hover{ background:var(--boton); opacity:.9; }
  :root[data-theme] .ced-pqopt:hover{ background:var(--piedra-on); color:var(--tinta); }
}
/* Barra de navegador falsa alrededor de la vista previa: siempre clara (imita un navegador), pero
   heredaba el texto claro del editor oscuro y la direccion no se leia (1.0:1). Texto oscuro fijo. */
.ge-browser .ge-bbar, .ge-browser .ge-url{ color:rgba(43,41,38,.72); }
:root[data-theme] :is(.ge-label, .ge-txses){ text-transform:none; letter-spacing:0; }
/* Bodas: las cifras de arriba eran tarjetas con raya (el lienzo aprobo "cifras sin tarjetas"). */
:root[data-theme] .lb-kpi{ border-color:transparent; background:transparent; padding-left:0; }
:where(:root[data-theme]) .lb-ent{ border-color:transparent; border-radius:var(--r-pildora); background:var(--piedra-on); }

/* Esqueleto de carga (esqueletoHTML en app.js): renglones de piedra, sin animacion. */
.co-esqueleto{ display:flex; flex-direction:column; gap:var(--e-3); padding:var(--e-3) 0; }
.co-esq-fila{ display:block; height:12px; border-radius:var(--r-pildora); background:var(--piedra-on); }
/* Filas que se esconden con hidden al borrar con Deshacer: su display:flex le ganaba al atributo. */
.chk[hidden], .pn-fila[hidden]{ display:none; }
.pblock[hidden], .ced-tpl[hidden]{ display:none; }
.wadd-item[hidden]{ display:none; }
/* Admin: rotulo de tarjeta en versalitas (filtro anti-plantilla). */
:root[data-theme] .cm-tarj-arriba{ text-transform:none; letter-spacing:0; }

/* El atributo hidden NO se respetaba en elementos con display propio (.btn, .cp-navcfg...: sus
   reglas le ganan al estilo del navegador). Barrido 2026-09-17: se veian el boton "Instalar la
   app" de la barra aunque no se pudiera instalar (el "boton de instalar en blanco" nunca
   reproducido), "+ Nueva plantilla" duplicado en Plantillas y los botones de avisos push en
   Ajustes. Medido en 14 pantallas: solo esos elementos estaban hidden y a la vista. */
[hidden]{ display:none !important; }

/* Toques en pantalla tactil (barrido 2026-09-17): botones de 15-30 px de alto (menu de widget, acciones
   sobre la foto, "Marcar todo como leido", la fecha de la hoja del dia, enlaces de miga...). Se agranda
   el AREA que recibe el toque con un ::after invisible, sin mover nada de lo que se ve. */
@media (pointer:coarse){
  :where(.gal-act, .w-menu, .w-quick, .pendw-ic, .pista-x-no, .foco-ayuda, .pendw-tab, .foco-op, .ing-seg,
         .diaria-fecha, .lnk, .pendw-vs button, .lb-aviso-link, .miga, .fb-cli, .por-ficha-link, .fc-docgrupo-ir,
         .ent-pieza, .edg-volver, .cf-fchip){ position:relative; }
  :where(.gal-act, .w-menu, .w-quick, .pendw-ic, .pista-x-no, .foco-ayuda, .pendw-tab, .foco-op, .ing-seg,
         .diaria-fecha, .lnk, .pendw-vs button, .lb-aviso-link, .miga, .fb-cli, .por-ficha-link, .fc-docgrupo-ir,
         .ent-pieza, .edg-volver, .cf-fchip, .gal-check, .por-hero-cambiar)::after{
    content:""; position:absolute; inset:-10px -6px; }
  :where(.pendw-st){ min-height:40px; }
}

/* ==================================================================
   BIENVENIDA A (lienzo "Cuarto Oscuro . bienvenida del chat", opcion A
   aprobada 2026-09-17): saludo, "Seguir con", "Hoy importa" con las filas
   REALES de El Foco y tres accesos. Sirve igual en telefono y escritorio.
   ================================================================== */
:root[data-theme] .xb-bienv{ gap:var(--e-5); }
:root[data-theme] #chat-msgs > .xb-bienv:not([hidden]){ align-items:stretch; text-align:left; gap:var(--e-5); }
:root[data-theme] .xb-bienv .tel-saludo{ text-align:left; }
:root[data-theme] .xb-bienv .tel-linea{ max-width:42ch; margin:0; }
:root[data-theme] .xb-bloque{ display:flex; flex-direction:column; gap:var(--e-1); min-width:0; }
:root[data-theme] .xb-eti{ font-size:var(--t-meta); color:var(--apagado); }

/* Seguir con: una fila de contenido (4 px), no una caja. */
:root[data-theme] .xb-seguir{ display:flex; align-items:center; gap:var(--e-3); width:100%; min-height:48px; padding:0 var(--e-3); margin:0 calc(var(--e-3) * -1); border:0; border-radius:var(--r); background:none; color:var(--texto); font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .xb-seguir-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
:root[data-theme] .xb-seguir-s{ flex:none; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .xb-chev{ display:inline-flex; flex:none; color:var(--apagado); transform:rotate(-90deg); }

/* Hoy importa: filas sin cajas. El boton de abrir cubre la fila y va DEBAJO del de accion. */
:root[data-theme] .xb-filas{ display:flex; flex-direction:column; }
:root[data-theme] .xb-fila{ position:relative; display:flex; align-items:center; gap:var(--e-3); min-height:56px; padding:0 var(--e-3); margin:0 calc(var(--e-3) * -1); border-radius:var(--r); transition:opacity var(--d-aviso) var(--curva-entra), transform var(--d-aviso) var(--curva-entra); }
:root[data-theme] .xb-fila > *{ position:relative; z-index:1; }
:root[data-theme] .xb-fila > .xb-abre{ position:absolute; inset:0; z-index:0; width:auto; min-height:0; padding:0; border:0; border-radius:inherit; background:none; cursor:pointer; }
:root[data-theme] .xb-fila > .xb-abre:focus-visible{ outline-offset:-2px; }
:root[data-theme] .xb-ico{ display:inline-flex; flex:none; color:var(--medio); }
:root[data-theme] .xb-fila.xb-urge .xb-ico{ color:var(--urge); }
:root[data-theme] .xb-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
:root[data-theme] .xb-t{ font-size:var(--t-texto); color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .xb-s{ font-size:var(--t-meta); color:var(--medio); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .xb-monto{ flex:none; font-size:var(--t-texto); color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .xb-acciones{ flex:none; display:flex; align-items:center; gap:var(--e-1); }
/* El boton primario de El Foco, en forma de pildora dentro de la fila. */
:root[data-theme] .xb-acciones .foco-btn{ min-height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); white-space:nowrap; }
/* Todas las acciones de la lista van en el mismo tono: tres botones rellenos seguidos
   compiten entre si y la lista pierde jerarquia. El boton relleno se reserva para la accion
   principal de una pantalla, no para cada fila. */
:root[data-theme] .xb-acciones .foco-btn-resolver{ background:var(--piedra-on); color:var(--tinta); font-weight:400; }
:root[data-theme] .xb-mas{ align-self:flex-start; min-height:36px; padding:0 var(--e-3); margin:0 calc(var(--e-3) * -1); border:0; border-radius:var(--r); background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer; }

/* Tres accesos: lo que mas se abre (medido en producto_eventos). */
:root[data-theme] .xb-accesos{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
:root[data-theme] .xb-acc{ display:inline-flex; align-items:center; gap:var(--e-2); min-height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto); font:inherit; font-size:var(--t-texto); cursor:pointer; }
:root[data-theme] .xb-acc svg{ color:var(--medio); }

/* Movimiento: la entrada se nota una vez al abrir y orienta (saludo, luego seguir, luego
   las filas). 180 ms escalonados 40; nada se repite al repintar, nada late. */
/* El titulo es lo que importa (ahi va el nombre del cliente), asi que la accion baja a su
   propia linea en vez de comerse el ancho y dejar "Entrega de galeria..." cortado. Va sin
   media query a proposito: la columna de Xarpie mide ~430 px en escritorio, casi lo mismo
   que un telefono, y ahi el titulo se cortaba igual. */
:root[data-theme] .xb-fila{ flex-wrap:wrap; align-items:flex-start; padding-top:var(--e-2); padding-bottom:var(--e-2); }
:root[data-theme] .xb-fila .xb-ico{ margin-top:2px; }
:root[data-theme] .xb-fila .xb-t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
:root[data-theme] .xb-fila .xb-acciones{ width:100%; justify-content:flex-end; margin-top:var(--e-1); }
@media (pointer:coarse){
  :root[data-theme] .xb-acciones .foco-btn{ min-height:40px; }
  :root[data-theme] .xb-mas, :root[data-theme] .xb-acc{ min-height:40px; }
  :root[data-theme] .xb-fila{ min-height:60px; }
}
@keyframes xb-entro{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
:root[data-theme] .xb-bienv.xb-entra .xb-b1{ animation:xb-entro var(--d-ventana) var(--curva-entra) both; }
:root[data-theme] .xb-bienv.xb-entra .xb-b2{ animation:xb-entro var(--d-ventana) var(--curva-entra) 40ms both; }
:root[data-theme] .xb-bienv.xb-entra .xb-b3{ animation:xb-entro var(--d-ventana) var(--curva-entra) 80ms both; }
@media (prefers-reduced-motion:reduce){
  :root[data-theme] .xb-bienv.xb-entra .xb-b1, :root[data-theme] .xb-bienv.xb-entra .xb-b2, :root[data-theme] .xb-bienv.xb-entra .xb-b3{ animation:co-fundido var(--d-toque) linear both; }
  :root[data-theme] .xb-fila{ transition:none; }
}

/* ==================================================================
   LA PUERTA A XARPIE desde el CRM (lienzo "Cuarto Oscuro . volver a Xarpie",
   2026-09-17: D en escritorio, B en telefono). Es el boton mas importante del
   CRM: lleva la marca, su nombre y el mayor peso visual de la pantalla.
   ================================================================== */
/* --- Escritorio: arriba del riel izquierdo, antes de Crear y de las secciones --- */
:root[data-theme] body.nav-lat-on .nl-fila.nl-xarpie{ gap:var(--e-3); min-height:52px; height:auto; padding:6px; margin-bottom:var(--e-2); border-radius:var(--r-pildora); color:var(--tinta); }
:root[data-theme] body.nav-lat-on .nl-xa-iso{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); flex:none; }
:root[data-theme] body.nav-lat-on .nl-fila.nl-xarpie .nl-lbl{ font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
:root[data-theme] body.nav-lat-on .nl-atajo{ margin-left:auto; padding-right:6px; font:inherit; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] body.nav-lat-on .nl-sep{ height:1px; margin:0 8px var(--e-2); background:var(--linea); }
@media (hover:hover){ :root[data-theme] body.nav-lat-on .nl-fila.nl-xarpie:hover{ background:var(--piedra-on); } }

/* --- Telefono: al centro de la pildora de abajo --- */
:root[data-theme] .barra-inf .bi-xarpie-c{ width:auto; height:44px; flex-direction:row; gap:var(--e-2); padding:0 16px 0 12px; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); }
:root[data-theme] .barra-inf .bi-xarpie-c .bi-xa-t{ font-size:var(--t-texto); font-weight:500; }
:root[data-theme] .barra-inf .bi-xarpie-c .bi-xa-iso{ display:inline-flex; }
:root[data-theme] .barra-inf .bi-xarpie-c.on{ background:var(--boton); color:var(--boton-t); }

/* --- El brillo: el barrido de prisma del lienzo "diseno prisma", UNA pasada ---
   Se dispara al entrar al CRM (xaPuertaDestella) y, con raton, al pasar el cursor. NUNCA en
   bucle: este boton se toca cien veces al dia y una luz que late se vuelve ruido (regla de
   frecuencia de Emil Kowalski). Con movimiento reducido no hay luz: el tamano ya lo hace
   visible. mix-blend-mode screen para que la luz SUME sobre el relleno en vez de taparlo. */
:root[data-theme] .xa-brillo{ position:relative; overflow:hidden; isolation:isolate; }
:root[data-theme] .xa-brillo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background-repeat:no-repeat; background-size:260% 100%; background-position:130% 0;
  mix-blend-mode:screen;
  background-image:var(--prisma-luz);
}
@keyframes xa-prisma{ 0%{ background-position:130% 0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ background-position:-30% 0; opacity:0; } }
:root[data-theme] .xa-brillo.xa-destella::after{ animation:xa-prisma 700ms var(--curva-entra) both; }
@media (hover:hover){ :root[data-theme] .xa-brillo:hover::after{ animation:xa-prisma 700ms var(--curva-entra) both; } }
@media (prefers-reduced-motion:reduce){
  :root[data-theme] .xa-brillo::after, :root[data-theme] .xa-brillo.xa-destella::after, :root[data-theme] .xa-brillo:hover::after{ animation:none; opacity:0; }
}

/* ==================================================================
   EL INICIO DEL CRM (#/resumen, 2026-09-18). Lienzo "Cuarto Oscuro · Home del CRM", mesas
   "Final · Home escritorio" y "Final · Home telefono"; plan home-crm-pared-de-museo.md.
   Se acomoda por el ancho de SU contenedor (container query), no por el de la ventana: en
   escritorio el CRM puede medir 600 px junto al chat o 1300 solo, y la pared tiene que decidir
   con lo que de verdad tiene.
   ================================================================== */
:root[data-theme] .ini{ container-type:inline-size; max-width:1080px; margin:0 auto; padding:var(--e-2) 0 var(--e-7); display:flex; flex-direction:column; gap:var(--e-6); }
:root[data-theme] .ini-sec{ display:flex; flex-direction:column; gap:var(--e-3); min-width:0; }
/* --- El Inicio a la medida (a-84, F1): el envoltorio de CADA bloque (fabrica o widget),
   la rejilla que los acomoda y el menu ···. inicio-libre.js pinta `.ini-bloque[data-ancho]`
   dentro de `.ini-principal` para TODO bloque, tareas_hoy incluido -- ya no hay una fila fija
   aparte para el companero (ver el comentario de `.ini-top` mas abajo, que ahora es el
   envoltorio INTERNO de un bloque como cualquier otro, no una seccion de pagina). */
:root[data-theme] .ini-bloque{ position:relative; min-width:0; }
/* El boton usa la pieza `.pz-acc` (piezas.css) tal cual -- mismo `···` que ya usa pzFila --
   asi que aqui solo se posiciona, sin repetir color ni forma. */
:root[data-theme] .ini-bloque-menu{ position:absolute; top:0; right:0; z-index:1; }
/* El asa para MOVER un bloque (a-84 F1b): junto al `···`, a su izquierda (28 px + 4 de aire). Con mouse aparece al pasar por el bloque o al llegar con Tab
   (mismo criterio que `.co-acc-fila`); en pantalla tactil se ve siempre, y ahi los dos botones suben a 44 px, el toque minimo del sistema. `touch-action:none`
   es lo que deja al dedo arrastrarla sin que la pagina se desplace; el arrastre en si espera medio segundo (inicio-libre.js), asi que un roce no levanta nada. */
:root[data-theme] .ini-bloque-asa{ position:absolute; top:0; right:32px; z-index:1; cursor:grab; touch-action:none; -webkit-touch-callout:none; user-select:none; opacity:0; transition:opacity var(--d-toque) var(--curva-cambia); }
@media (hover:hover){ :root[data-theme] .ini-bloque:hover .ini-bloque-asa{ opacity:1; } }
:root[data-theme] .ini-bloque:focus-within .ini-bloque-asa, :root[data-theme] .ini-bloque-asa:focus-visible, :root[data-theme] .ini-bloque-asa[aria-pressed="true"]{ opacity:1; }
@media (hover:none){ :root[data-theme] .ini-bloque-asa{ opacity:1; } }
@media (pointer:coarse){
  :root[data-theme] .ini-bloque-asa, :root[data-theme] .ini-bloque-menu{ width:44px; height:44px; }
  :root[data-theme] .ini-bloque-asa{ right:48px; }
}
:root[data-theme] .ini-bloque-asa[aria-pressed="true"]{ background:var(--tinte-toque); color:var(--tinta); cursor:grabbing; }
/* El bloque levantado (arrastrando o agarrado con el teclado): no cambia de sitio en la rejilla, se le aplica un transform desde JS. Un panel de `--piedra` que
   asoma 12 px por cada lado (pseudo-elemento, para no mover el contenido ni la rejilla) y la sombra de lo que flota. Nada se anima: sigue al dedo. */
:root[data-theme] .ini-bloque.ini-alzado{ z-index:30; isolation:isolate; }
:root[data-theme] .ini-bloque.ini-alzado::before{ content:""; position:absolute; inset:calc(var(--e-3) * -1); z-index:-1; background:var(--piedra); border-radius:var(--r-flota); box-shadow:var(--sombra-flota); }
/* Donde caera: una linea de 3 px, horizontal entre filas o vertical entre columnas. La ubica JS contra la rejilla (por eso `.ini-principal` es su referencia). */
:root[data-theme] .ini-principal{ position:relative; }
:root[data-theme] .ini-linea-caida{ position:absolute; z-index:25; background:var(--tinta); border-radius:2px; pointer-events:none; }
:root[data-theme] .ini-arrastrando .ini-bloque{ user-select:none; }
:root[data-theme] body.ini-arrastre-activo, :root[data-theme] body.ini-arrastre-activo *{ cursor:grabbing; user-select:none; }
/* Para el lector de pantalla: lo que dice al levantar, mover y soltar un bloque con el teclado. Fuera de la vista, no fuera del arbol. */
.ini-anuncio{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* "+ Agregar bloque" / "Restablecer mi inicio": siempre a todo el ancho de la rejilla, sin
   importar cuantas columnas tenga esa fila (grid-column:1/-1 ignora el span de los bloques). */
:root[data-theme] .ini-bloque-agregar{ display:flex; gap:var(--e-3); flex-wrap:wrap; grid-column:1 / -1; }
/* La galeria de "+ Agregar bloque" (Piezas.hoja): un grupo por familia, mismo titulo de
   seccion que ya usa el resto del Inicio (.ini-eti2). */
:root[data-theme] .ini-gal-grupo + .ini-gal-grupo{ margin-top:var(--e-5); }
:root[data-theme] .ini-gal-grupo > .ini-eti2{ margin-bottom:var(--e-2); }
/* El aviso de un bloque guardado que el plan ya no incluye (cimientos del Inicio): la misma tarjeta que un widget, con su titulo arriba, y un cuerpo tranquilo. Sin color de alarma ni
   icono de error: nadie hizo nada mal, el bloque se queda guardado y vuelve solo cuando la cuenta sube de plan. «Ver planes» es una pildora (se toca), a 44 px. */
:root[data-theme] .ini-plan .w-body{ padding-top:var(--e-3); }
:root[data-theme] .ini-plan-p{ margin:0 0 var(--e-1); color:var(--tinta); font-size:var(--t-texto); line-height:1.43; }
:root[data-theme] .ini-plan-s{ display:block; margin:0 0 var(--e-3); color:var(--medio); font-size:var(--t-texto); line-height:1.43; }
:root[data-theme] .ini-plan .btn{ min-height:44px; text-decoration:none; }

/* --- «Agenda de 14 dias» (.ia) y «Atajos» (.ib): a-84 F3 y F4, lienzos aprobados por Daniel el 2026-09-28. Solo tokens. Cada bloque es UNA
   tarjeta de 16 px (flota, como los widgets) que deja sitio arriba a la derecha al ···, que inicio-libre.js posiciona encima. Cuantas
   columnas caben en las dos semanas de un «completo» lo decide el ancho del PROPIO bloque (consulta de contenedor), no el de la ventana:
   la misma trampa de #ini-mes y #ini-negocio (un componente hereda el ancho de su columna). --- */
:root[data-theme] :is(.ia, .ib){ box-sizing:border-box; min-width:0; background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4); }
:root[data-theme] .ia{ container-type:inline-size; container-name:ia; }
:root[data-theme] :is(.ia-it, .ia-lin, .ia-mas, .ia-enlace){ appearance:none; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .ia-cab{ padding-right:var(--e-6); }
:root[data-theme] .ia-titulo{ margin:0; font-size:var(--t-campo); line-height:24px; font-weight:600; color:var(--tinta); }
:root[data-theme] .ia-sub{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .ia-dia{ display:flex; gap:14px; padding:10px 0; }
:root[data-theme] .ia-num{ width:44px; flex:none; text-align:center; }
:root[data-theme] .ia-num b{ display:block; font-size:var(--t-titulo); line-height:24px; font-weight:600; font-variant-numeric:tabular-nums; }
:root[data-theme] .ia-num span{ display:block; margin-top:var(--e-1); font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .ia-dia.hoy .ia-num span{ color:var(--tinta); font-weight:600; }
:root[data-theme] .ia-items{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
:root[data-theme] .ia-it{ display:flex; gap:10px; align-items:flex-start; width:100%; }
:root[data-theme] .ia-marca{ width:12px; flex:none; display:flex; justify-content:center; margin-top:7px; }
:root[data-theme] .ia-marca i{ display:block; width:6px; height:6px; border-radius:var(--r-pildora); background:var(--marca-punto); }
:root[data-theme] .ia-hueco{ display:block; box-sizing:border-box; width:12px; height:12px; flex:none; margin-top:4px; border-radius:var(--r-pildora); border:1.5px solid var(--medio); }
:root[data-theme] .ia-hora{ display:block; width:40px; flex:none; font-size:var(--t-texto); line-height:20px; color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .ia-que{ display:block; flex:1; min-width:0; font-size:var(--t-texto); line-height:20px; color:var(--tinta); overflow-wrap:anywhere; }
:root[data-theme] .ia-que small{ display:block; font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .ia-mas{ font-size:var(--t-meta); line-height:16px; color:var(--medio); text-decoration:underline; text-underline-offset:3px; }
:root[data-theme] .ia-pie{ padding-top:var(--e-2); font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .ia-enlace{ font-size:inherit; color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }
:root[data-theme] .ia-lineas{ padding-top:var(--e-1); }
:root[data-theme] .ia-lin{ display:flex; gap:var(--e-2); align-items:baseline; width:100%; padding:7px 0; }
:root[data-theme] .ia-d{ width:30px; flex:none; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .ia-d.hoy{ color:var(--tinta); font-weight:600; }
:root[data-theme] .ia-hr{ width:36px; flex:none; font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .ia-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .ia-semanas{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--e-3); padding-top:var(--e-2); }
@container ia (min-width:520px){
  :root[data-theme] .ia-semanas{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-6); }
}
:root[data-theme] .ia-sem-t{ margin:0; font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .ia-sem-vacia{ margin:0; padding:var(--e-3) 0; font-size:var(--t-texto); color:var(--medio); }
:root[data-theme] :is(.ia-vacio, .ib-vacio){ padding:20px 4px 8px; font-size:var(--t-texto); line-height:20px; }
:root[data-theme] :is(.ia-vacio, .ib-vacio) p{ margin:0 0 4px; color:var(--tinta); }
:root[data-theme] :is(.ia-vacio, .ib-vacio) span{ color:var(--medio); }
/* En una pantalla tactil una fila es un boton de 44 px: el lienzo la dibuja mas baja porque en escritorio el puntero no necesita mas. */
@media (pointer:coarse){
  :root[data-theme] :is(.ia-it, .ia-lin){ min-height:44px; }
}
:root[data-theme] .ib-eti{ margin:0; padding-right:var(--e-6); }
:root[data-theme] .ib-pildoras{ display:flex; flex-wrap:wrap; gap:var(--e-2); padding-top:var(--e-3); }
:root[data-theme] .ib-pil{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--e-2); max-width:100%; min-height:44px; margin:0; padding:0 var(--e-4); border:1px solid transparent; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer;
  transition:transform calc(140ms * var(--lento)) var(--curva-entra); }
:root[data-theme] .ib-pil:active{ transform:scale(.97); transition-duration:calc(60ms * var(--lento)); }
:root[data-theme] .ib-pil.linea{ background:none; border-color:var(--linea); }
:root[data-theme] .ib-pil .ib-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .ib-pil svg{ flex:none; }
:root[data-theme] .ib-xp{ display:block; flex:none; width:8px; height:8px; border-radius:var(--r-pildora); background:var(--marca-punto); }
/* La hoja de Compartir: el QR conserva su contraste fijo (qr.js pinta oscuro sobre claro en los dos temas). */
:root[data-theme] .ib-seg{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-bottom:var(--e-4); }
:root[data-theme] .ib-qr{ width:min(100%, 208px); margin:var(--e-2) auto 0; }
:root[data-theme] .ib-qr svg{ display:block; width:100%; height:auto; }
:root[data-theme] .ib-url{ display:block; margin:var(--e-4) 0; text-align:center; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
:root[data-theme] .ib-comp-nota{ margin:0; font-size:var(--t-texto); line-height:20px; color:var(--medio); }
/* Tablas de las vistas GRANDES de Leads y Proximas bodas (widgets en tres tamanos, F1, lienzo del 2026-09-29): una fila es una rejilla de columnas, sin cajas ni rayas
   (la forma dice que es: filas sueltas). El encabezado es una fila mas, en mayusculas chicas y apagada. Todo lo que no cabe se corta con puntos suspensivos: nunca desborda. */
:root[data-theme] .wl-tabla{ display:flex; flex-direction:column; container-type:inline-size; container-name:wl; }
:root[data-theme] .wl-fila{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.6fr) auto auto; column-gap:var(--e-4); align-items:center; padding:var(--e-2) 0; min-width:0; }
:root[data-theme] .wb-tabla .wl-fila{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1fr); }
:root[data-theme] .wl-th{ font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--medio); padding-top:var(--e-3); }
:root[data-theme] .wl-c{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .wl-c.wl-m{ color:var(--medio); }
:root[data-theme] .wl-wa{ justify-self:end; }
@media (pointer:coarse){ :root[data-theme] .wl-fila:not(.wl-th){ min-height:44px; } }
/* Una tabla en una columna angosta (un bloque «completo» en un telefono mide ~325 px): se queda con lo que importa. Leads: nombre, cuanto lleva esperando y WhatsApp; Bodas: fecha,
   cliente y cuanto falta. Lo demas (origen, contacto, lugar) sigue en la vista mediana y en la ficha. Se mide el ancho de la PROPIA tabla, no el de la ventana. */
@container wl (max-width:520px){
  :root[data-theme] .wl-fila{ grid-template-columns:minmax(0, 1fr) auto auto; }
  :root[data-theme] .wl-fila > :nth-child(2), :root[data-theme] .wl-fila > :nth-child(3){ display:none; }
  :root[data-theme] .wb-tabla .wl-fila{ grid-template-columns:auto minmax(0, 1fr) auto; }
  :root[data-theme] .wb-tabla .wl-fila > :nth-child(2){ display:block; }
}
/* La proxima boda en grande (vista chica de Proximas bodas): la fecha como cifra, el nombre y el lugar debajo, y las fechas que siguen en una linea. */
:root[data-theme] .wb-dest{ padding-top:var(--e-2); }
:root[data-theme] .wb-fecha{ font-size:var(--t-saludo); line-height:36px; font-weight:600; color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .wb-despues{ padding-top:var(--e-3); }
/* La hoja «Configurar» de un widget (widgets en tres tamanos, F2, lienzo "Inicio: widgets en tres tamanos", 2026-09-29): un campo por bloque, sus valores como pildoras
   de 44 px (se tocan) y el titulo como campo de texto de 16 px (debajo de eso iOS hace zoom). El activo se invierte (--boton), como el resto de los segmentos. */
:root[data-theme] .ini-cfg{ display:flex; flex-direction:column; gap:var(--e-5); }
:root[data-theme] .ini-cfg-campo{ display:flex; flex-direction:column; gap:var(--e-2); min-width:0; }
:root[data-theme] .ini-cfg-eti{ font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .ini-cfg-seg{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
:root[data-theme] .ini-cfg-pl{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:0; padding:0 var(--e-4); border:1px solid transparent; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer;
  transition:transform calc(140ms * var(--lento)) var(--curva-entra); }
:root[data-theme] .ini-cfg-pl:active{ transform:scale(.97); transition-duration:calc(60ms * var(--lento)); }
:root[data-theme] .ini-cfg-pl.on{ background:var(--boton); color:var(--boton-t); font-weight:500; }
:root[data-theme] .ini-cfg-inp{ box-sizing:border-box; width:100%; min-height:44px; margin:0; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-campo); }
:root[data-theme] .ini-cfg-ayuda{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
/* Botones a tu gusto (F3, 2026-09-29): el ESTILO (relleno es el de fabrica) y la DISPOSICION (en fila es la de fabrica) de un bloque de atajos, por las clases ib-st-* e ib-dp-* que arma
   inicio-botones.js desde valores de una lista cerrada. Todo mide 44 px al tocarse. «Solo icono» esconde el texto (sigue en el DOM y en el aria-label). Un contorno usa --punto (mas
   marcado que --linea) para distinguirse del fondo. Icono con lista se comporta como icono en fila: una fila de un solo glifo no dice nada. */
:root[data-theme] .ib-st-contorno .ib-pil{ background:none; border-color:var(--punto); }
:root[data-theme] .ib-st-texto .ib-pil{ background:none; padding:0 var(--e-2); }
:root[data-theme] .ib-st-texto .ib-txt{ text-decoration:underline; text-underline-offset:4px; }
:root[data-theme] .ib-st-icono .ib-pil{ width:44px; padding:0; justify-content:center; }
:root[data-theme] .ib-st-icono .ib-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:root[data-theme] .ib-dp-rejilla2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
:root[data-theme] .ib-dp-rejilla2 .ib-pil{ justify-content:flex-start; }
:root[data-theme] .ib-dp-rejilla3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
:root[data-theme] .ib-dp-rejilla3 .ib-pil{ flex-direction:column; justify-content:center; gap:var(--e-1); min-height:72px; padding:var(--e-2); border-radius:var(--r-flota); font-size:var(--t-meta); text-align:center; }
:root[data-theme] .ib-dp-rejilla3 .ib-txt{ white-space:normal; line-height:16px; }
:root[data-theme] .ib-dp-lista{ flex-direction:column; flex-wrap:nowrap; gap:0; }
:root[data-theme] .ib-dp-lista .ib-pil{ background:none; border-radius:0; padding:0; width:100%; min-height:48px; justify-content:flex-start; }
:root[data-theme] .ib-st-icono.ib-dp-lista{ flex-direction:row; flex-wrap:wrap; gap:var(--e-2); }
:root[data-theme] .ib-st-icono.ib-dp-lista .ib-pil{ width:44px; min-height:44px; border-radius:var(--r-pildora); }
:root[data-theme] :is(.ib-dp-rejilla2, .ib-dp-rejilla3).ib-st-icono .ib-pil{ width:44px; min-height:44px; padding:0; border-radius:var(--r-pildora); justify-self:start; }
/* El numero de un boton que cuenta (Pendientes, Reservas; tren «botones elegidos», lienzo «Botones nuevos»): una pildora chica DENTRO del boton, neutra (--boton) y roja (--urge) solo cuando lo que
   cuenta es lo ATRASADO: el rojo dice algo, no adorna. En rejilla de 3 y en solo icono el boton es una caja de icono y el numero se prende en su esquina de arriba a la derecha; en lista se va al
   borde derecho de la fila. El subrayado de «solo texto» va en el nombre (.ib-txt), no en el boton: si no, le pasaba por debajo al numero. */
:root[data-theme] .ib-ct{ display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font-size:var(--t-meta); line-height:20px; font-weight:600; font-variant-numeric:tabular-nums; }
:root[data-theme] .ib-ct.ib-ct-u{ background:var(--urge); color:var(--urge-t); }
:root[data-theme] .ib-pil .ib-ct{ margin-left:var(--e-1); }
:root[data-theme] .ib-dp-lista .ib-pil .ib-ct{ margin-left:auto; }
:root[data-theme] :is(.ib-dp-rejilla3, .ib-st-icono) .ib-pil{ position:relative; }
/* En rejilla de 3 el glifo va SIEMPRE arriba (en «ir» el HTML lo pone despues del nombre, como flecha): asi la esquina de arriba a la derecha, donde se prende el numero, nunca cae sobre el nombre. */
:root[data-theme] .ib-dp-rejilla3 .ib-pil svg{ order:-1; }
:root[data-theme] :is(.ib-dp-rejilla3, .ib-st-icono) .ib-pil .ib-ct{ position:absolute; top:var(--e-1); right:var(--e-1); margin:0; }
:root[data-theme] .ib-st-icono .ib-pil .ib-ct{ top:calc(var(--e-1) * -1); right:calc(var(--e-1) * -1); }
/* La hoja «Editar botones»: una fila por boton (nombre y de que clase es, subir, bajar, quitar) y una galeria de lo que se puede agregar. */
:root[data-theme] .ib-ed-lista{ display:flex; flex-direction:column; }
:root[data-theme] .ib-ed-fila{ appearance:none; background:none; border:0; margin:0; padding:0; font:inherit; color:inherit; text-align:left; display:flex; align-items:center; gap:var(--e-1); min-height:48px; width:100%; box-sizing:border-box; }
:root[data-theme] .ib-ed-op{ cursor:pointer; }
:root[data-theme] .ib-ed-t{ flex:1; min-width:0; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
:root[data-theme] .ib-ed-t small{ display:block; font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .ib-ed-ya .ib-ed-t{ color:var(--medio); }
:root[data-theme] .ib-ed-b{ appearance:none; flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); font:inherit; font-size:var(--t-sub); cursor:pointer; }
:root[data-theme] .ib-ed-b:disabled{ opacity:.35; cursor:default; }
:root[data-theme] .ib-ed-mas{ appearance:none; align-self:flex-start; background:none; border:0; margin:0; padding:0; min-height:44px; font:inherit; font-size:var(--t-texto); color:var(--tinta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; text-align:left; }
/* Los pasos de agregar un boton que pide mas que elegir (un evento, un texto, una direccion): la fila lleva su flecha al final, el area de texto es un campo que flota (16 px, como los demas
   campos de varias lineas) y lo que no se pudo agregar se dice en rojo debajo, sin mover el boton «Agregar». */
:root[data-theme] .ib-ed-sig{ flex:none; padding-right:var(--e-2); font-size:var(--t-sub); color:var(--medio); }
:root[data-theme] .ib-ed-area{ display:block; resize:none; height:auto; min-height:88px; padding:var(--e-3) var(--e-4); line-height:20px; border-radius:var(--r-flota); }
:root[data-theme] .ib-ed-err{ color:var(--urge); }
:root[data-theme] .ib-ed-err[hidden]{ display:none; }

/* --- Companero "tareas de hoy" (a-48 pieza 2): reusa .riel-cal/.diaria del riel de "solo
   chat" (public/index.html), adoptados por sincDiaria() en app.js. Desde F1 vive DENTRO del
   bloque tareas_hoy (inicio-libre.js) como cualquier otro bloque de `.ini-principal` -- se
   puede mover o quitar igual que los demas, asi que ya no hay una fila de PAGINA aparte para
   el: `.ini-top` es su envoltorio INTERNO (calendario arriba via #ini-cal-casa, tareas debajo,
   mismo orden en cualquier ancho -- sin `order` ni container query decidiendo quien va
   primero, es simple orden de DOM). */
:root[data-theme] .main > #view:has(.ini){ container-type:inline-size; container-name:ini-pagina; }
:root[data-theme] .ini-top{ display:flex; flex-direction:column; gap:var(--e-5); min-width:0; }
:root[data-theme] .ini-cal-casa:empty{ display:none; }
/* --- El mini calendario (a-84, 2026-09-29, pedido directo de Daniel, propuesta B del lienzo): la SEMANA en primer plano, con su
   agenda por dias, y "Ver el mes" para el mes entero. UNA pieza (public/calendario-semana.js) para el Inicio (#riel-cal, adentro de
   #ini-cal-casa) y para el widget "Calendario". Reemplaza a las reglas .mc-* de antes (marcas de 9 px, "+N", semana en banda...).
   Solo tokens. Forma de Cuarto Oscuro: pildora = se toca (el dia de la tira mide 44 px de ancho como minimo), 16 px = flota (el dia
   elegido del mes), 4 px = contenido. El almagre (--urge) vive SOLO en el numero de un dia atrasado: un solo rojo (a-73). Nada se
   anima: un dia se toca cien veces al dia. */
:root[data-theme] .cs{ container-type:inline-size; container-name:cs; display:block; max-width:720px; color:var(--tinta); font-size:var(--t-texto); line-height:20px; }
:root[data-theme] .cs.cs-widget{ max-width:none; }
:root[data-theme] .cs-cab{ display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; column-gap:var(--e-1); margin:0 0 var(--e-3); }
/* Las flechas van junto al titulo y NO en el extremo derecho: el asa y el menu ··· de cada bloque del Inicio viven en la esquina de arriba
   a la derecha (siempre a la vista en pantalla tactil) y unas flechas ahi quedaban tapadas. El titulo tiene un ancho minimo para que las
   flechas no se corran de sitio entre "Esta semana" y "Proxima semana": se tocan varias veces seguidas. */
:root[data-theme] .cs-mes{ grid-column:1; min-width:7.5em; white-space:nowrap; font-size:var(--t-sub); line-height:28px; font-weight:600; letter-spacing:-.01em; color:var(--tinta); }
:root[data-theme] .cs-nav{ grid-column:2; display:flex; align-items:center; }
:root[data-theme] .cs-cab2{ grid-column:1 / -1; display:flex; align-items:center; gap:var(--e-3); }
:root[data-theme] .cs-sub{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .cs-flecha{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); font:inherit; font-size:var(--t-sub); line-height:1; cursor:pointer; }
:root[data-theme] .cs-hoyb{ appearance:none; box-sizing:border-box; min-height:44px; margin:0; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
@media (hover:hover){
  :root[data-theme] .cs-flecha:hover{ background:var(--piedra-on); color:var(--tinta); }
}
/* La tira: siete pildoras. La letra, el numero (un circulo lleno si ese dia hay una BODA) y hasta 3 puntos (una cita o sesion cada
   uno). Las tareas no ponen marca (decision de Daniel). El dia elegido es la pildora invertida; hoy, un aro en el numero. */
:root[data-theme] .cs-tira{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
:root[data-theme] .cs-dia{ appearance:none; box-sizing:border-box; min-width:0; height:96px; margin:0; padding:10px 0 0; border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
@media (hover:hover){
  :root[data-theme] .cs-dia:not(.cs-sel):hover{ background:var(--piedra-on); }
}
/* Dentro de la tarjeta del widget el fondo ya es --piedra: las pildoras suben un escalon (--piedra-on) para no desaparecer. */
:root[data-theme] .cs-widget .cs-dia:not(.cs-sel){ background-color:var(--piedra-on); }
@media (hover:hover){
  :root[data-theme] .cs-widget .cs-dia:not(.cs-sel):hover{ background-color:color-mix(in srgb, var(--tinta) 6%, var(--piedra-on)); }
}
:root[data-theme] .cs-dia.cs-sel{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .cs-l{ font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; color:var(--medio); }
:root[data-theme] .cs-dia.cs-sel .cs-l{ color:var(--boton-t); opacity:.75; }
:root[data-theme] .cs-n{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; font-size:var(--t-sub); line-height:24px; font-weight:600; font-variant-numeric:tabular-nums; color:inherit; }
:root[data-theme] .cs-pts{ display:flex; align-items:center; gap:3px; height:5px; margin-top:2px; }
:root[data-theme] .cs-pts i{ display:block; width:5px; height:5px; border-radius:50%; background:var(--medio); }
:root[data-theme] .cs-dia.cs-sel .cs-pts i{ background:var(--boton-t); }
:root[data-theme] .cs-boda .cs-n{ background:var(--tinta); color:var(--pag); }
:root[data-theme] .cs-dia.cs-sel.cs-boda .cs-n{ background:var(--boton-t); color:var(--boton); }
:root[data-theme] .cs-hoy:not(.cs-sel) .cs-n{ box-shadow:0 0 0 1.5px var(--tinta); }
/* Atrasado: el numero en almagre. Sobre una boda (circulo de tinta) o sobre la pildora invertida el almagre no se lee, asi que ahi
   el aviso cambia de forma y no de color: un aro almagre en la boda, y el numero subrayado en el dia elegido. */
:root[data-theme] .cs-atrasado .cs-n{ color:var(--urge); font-weight:700; }
:root[data-theme] .cs-boda.cs-atrasado .cs-n{ color:var(--pag); box-shadow:0 0 0 2px var(--urge); }
:root[data-theme] .cs-dia.cs-sel.cs-atrasado .cs-n{ color:var(--boton-t); text-decoration:underline; text-underline-offset:3px; }
:root[data-theme] .cs-dia.cs-sel.cs-boda.cs-atrasado .cs-n{ color:var(--boton); box-shadow:0 0 0 2px var(--boton-t); text-decoration:none; }
/* Un dia bloqueado (no disponible) se rayea; la agenda de abajo lo dice con palabras. */
:root[data-theme] .cs-dia.cs-bloq:not(.cs-sel){ background-image:repeating-linear-gradient(45deg, transparent 0, transparent 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 8px); }
:root[data-theme] .cs-cel.cs-bloq:not(.cs-sel){ background-image:repeating-linear-gradient(45deg, transparent 0, transparent 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 8px); }
/* El mes ("Ver el mes"): la misma marca en una cuadricula. */
:root[data-theme] .cs-dow{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); margin-bottom:2px; }
:root[data-theme] .cs-dow span{ text-align:center; font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; color:var(--medio); }
:root[data-theme] .cs-rejilla{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
:root[data-theme] .cs-cel{ appearance:none; box-sizing:border-box; min-width:0; height:52px; margin:0; padding:4px 0 0; border:0; border-radius:var(--r-flota); background:none; color:var(--tinta); font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
@media (hover:hover){
  :root[data-theme] .cs-cel:not(.cs-sel):hover{ background:var(--piedra); }
}
@media (hover:hover){
  :root[data-theme] .cs-widget .cs-cel:not(.cs-sel):hover{ background:color-mix(in srgb, var(--tinta) 4%, var(--piedra)); }
}
:root[data-theme] .cs-cel .cs-n{ width:30px; height:30px; font-size:var(--t-texto); line-height:20px; font-weight:400; }
:root[data-theme] .cs-cel.cs-sel{ background:var(--piedra-on); }
:root[data-theme] .cs-cel.cs-fuera{ opacity:.5; }
:root[data-theme] .cs-cel.cs-boda .cs-n{ font-weight:600; }
:root[data-theme] .cs-cel.cs-hoy .cs-n{ box-shadow:0 0 0 1.5px var(--tinta); }
:root[data-theme] .cs-cel.cs-boda.cs-hoy .cs-n{ box-shadow:0 0 0 2px var(--pag), 0 0 0 3.5px var(--tinta); }
:root[data-theme] .cs-cel.cs-atrasado .cs-n{ color:var(--urge); font-weight:700; }
:root[data-theme] .cs-cel.cs-boda.cs-atrasado .cs-n{ color:var(--pag); box-shadow:0 0 0 2px var(--urge); }
/* La agenda por dias: hora, icono, titulo y, debajo, el cliente. Un dia sin nada dice "Libre"; uno bloqueado, "No disponible". */
:root[data-theme] .cs-agenda{ margin-top:var(--e-4); }
:root[data-theme] .cs-grupo{ margin-top:var(--e-5); }
:root[data-theme] .cs-grupo:first-child{ margin-top:0; }
:root[data-theme] .cs-gh{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); margin:0 0 2px; }
:root[data-theme] .cs-eti{ margin:0; font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .cs-nota{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .cs-fila{ appearance:none; box-sizing:border-box; display:flex; align-items:flex-start; gap:var(--e-3); width:100%; min-height:44px; margin:0; padding:8px 0; border:0; background:none; color:var(--tinta); font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .cs-hr{ flex:none; width:44px; color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .cs-ic{ display:block; flex:none; width:16px; height:16px; margin-top:2px; color:var(--tinta); }
:root[data-theme] .cs-ic svg{ display:block; }
:root[data-theme] .cs-hueco{ display:block; flex:none; box-sizing:border-box; width:14px; height:14px; margin-top:3px; border:1.5px solid var(--medio); border-radius:50%; }
:root[data-theme] .cs-q{ display:block; flex:1; min-width:0; }
:root[data-theme] .cs-ti{ display:block; overflow-wrap:anywhere; }
:root[data-theme] .cs-fuerte .cs-ti{ font-weight:600; }
:root[data-theme] .cs-q small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .cs-hecha :is(.cs-ti, .cs-hr, .cs-ic){ color:var(--apagado); }
:root[data-theme] .cs-mas{ appearance:none; min-height:44px; margin:0; padding:0 0 0 calc(44px + var(--e-3)); border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
:root[data-theme] .cs-pista{ margin:var(--e-4) 0 0; color:var(--medio); }
:root[data-theme] .cs-pie{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); margin-top:var(--e-4); }
:root[data-theme] .cs-txt{ appearance:none; min-height:44px; margin:0; padding:0 4px; border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
:root[data-theme] .cs-nuevo{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--e-2); min-height:44px; margin:0; padding:0 var(--e-4); border:1px solid var(--linea); border-radius:var(--r-pildora); background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
/* En el widget la tarjeta tiene alto propio: la agenda se desplaza por dentro (grande, mas alta) en vez de estirar la tarjeta. */
:root[data-theme] .cs-widget.cs-mediano .cs-agenda{ max-height:240px; overflow-y:auto; overscroll-behavior:contain; }
:root[data-theme] .cs-widget.cs-grande .cs-agenda{ max-height:420px; overflow-y:auto; overscroll-behavior:contain; }
/* Angosto (una tarjeta chica, o el telefono): la pildora baja a 88 px y el numero a 30. Se mide la pieza, no la ventana: una tarjeta
   angosta en una ventana ancha necesita lo mismo (la trampa de siempre: un componente hereda el ancho de su COLUMNA). */
@container cs (max-width:380px){
  :root[data-theme] .cs-tira{ gap:4px; }
  :root[data-theme] .cs-dia{ height:88px; padding-top:8px; }
  :root[data-theme] .cs-dia .cs-n{ width:30px; height:30px; font-size:var(--t-campo); line-height:22px; }
  :root[data-theme] .cs-hr{ width:40px; }
  :root[data-theme] .cs-mas{ padding-left:calc(40px + var(--e-3)); }
}
/* Muy angosto: el riel del modo "solo chat" mide ~208 px. Siete columnas de ~29 px no caben un circulo de 30: el numero baja a 26 (una boda
   ya no toca a sus vecinas) y la fila de la agenda no se come el ancho en la columna de la hora. */
@container cs (max-width:260px){
  :root[data-theme] .cs-dia .cs-n, :root[data-theme] .cs-cel .cs-n{ width:26px; height:26px; line-height:18px; font-size:var(--t-texto); }
  :root[data-theme] .cs-cel{ height:46px; }
  :root[data-theme] .cs-hr{ width:36px; }
  :root[data-theme] .cs-mas{ padding-left:calc(36px + var(--e-3)); }
  /* En esa columna lo que importa es la lista del dia que va DEBAJO (#diaria): la agenda se queda en los dos dias que siguen, no en toda
     la semana, o la lista de hoy quedaba fuera de la pantalla. */
  :root[data-theme] .cs-riel .cs-grupo:nth-child(n+3){ display:none; }
}
/* .diaria trae `display:none` de fabrica (styles.css) y solo se destapa bajo
   #app.crm-colapsado (el riel de "solo chat"): dentro del bloque del Inicio NO hay ese
   ancestro, asi que sin esta regla se quedaria invisible aunque JS ya le quito [hidden]. */
:root[data-theme] #ini-tareas-hoy .diaria:not([hidden]){ display:block; }
/* "Atrasado (N)" (2026-09-26): linea aparte arriba de la lista, mismo criterio de color que
   el resto de Cuarto Oscuro (--urge SOLO para lo que de verdad urge). [hidden] sin atrasadas. */
:root[data-theme] .ini-atrasado{ font-size:var(--t-meta); font-weight:600; color:var(--urge); }
/* La rejilla del Inicio a la medida (a-84, F1): CADA bloque que la persona acomodo, en SU
   orden -- ya no una fila fija de "mes + Hoy importa + Tu negocio". Rejilla de 6 columnas
   (mismo numero que el lienzo "Diseno" aprobado): tercio=2, mitad=3, completo=6, asi que 3
   tercios o 2 mitades llenan una fila exacta.
   El umbral se mide contra el CONTENIDO de #view, no contra `getBoundingClientRect()`: una
   consulta de contenedor usa la caja de contenido (sin el padding del propio contenedor), y
   `#view.wrap` trae 40px de padding a cada lado (medido en vivo) -- confundir las dos cajas
   ya fue un bug real en esta misma pagina, antes de F1.
   - #view < 560px: todo apilado a un ancho (telefono, mismo orden que en escritorio).
   - 560-780px: tercio se COMPORTA como mitad (2 por fila) -- un tercio de ~260px de columna
     seria ilegible.
   - >= 780px: tercio vuelve a ser tercio (3 por fila); mitad sigue siendo 2 por fila. */
:root[data-theme] .ini-principal{ display:flex; flex-direction:column; gap:var(--e-6); min-width:0; }
@container ini-pagina (min-width:560px){
  :root[data-theme] .ini-principal{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--e-6) var(--e-7); align-items:start; }
  :root[data-theme] .ini-principal > .ini-bloque{ grid-column:span 6; }
  :root[data-theme] .ini-principal > .ini-bloque[data-ancho="mitad"],
  :root[data-theme] .ini-principal > .ini-bloque[data-ancho="tercio"]{ grid-column:span 3; }
}
@container ini-pagina (min-width:780px){
  :root[data-theme] .ini-principal > .ini-bloque[data-ancho="tercio"]{ grid-column:span 2; }
}
/* Las cifras del mes, de dos en dos cuando SU columna es angosta (2026-09-26, visto por Daniel en
   produccion). La pieza (piezas.css) solo baja a 2 columnas por @media de la VENTANA (860 px), y
   con la columna companera y la rejilla de 2 bloques al lado, #ini-mes mide ~270-400 px en una
   ventana de 1600: cuatro columnas de 50 px con "$90,760" a --t-saludo encima de "Sin meta". La
   misma trampa de siempre: un componente hereda el ancho de su COLUMNA, no el de la ventana. */
:root[data-theme] #ini-mes{ container-type:inline-size; container-name:ini-mes; }
@container ini-mes (max-width:520px){
  :root[data-theme] #ini-mes .pz-cifras,
  :root[data-theme] #ini-mes .pz-cifras[data-n="3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4) var(--e-5); }
  :root[data-theme] #ini-mes .pz-cifra-v{ font-size:var(--t-titulo); }
}
/* Por TAMANO del bloque (widgets en tres tamanos, F1): el ancho que la persona le dio decide cuanto ensena. Chico: UNA cifra (la pieza ya la pone sola en su columna);
   mediano: dos por dos aunque la columna mida mas de 520 px; grande: todas en una fila (lo que ya hacia). Van con [data-ini-tam] para ganarle a la consulta de arriba. */
:root[data-theme] #ini-mes[data-ini-tam="chico"] .pz-cifras{ grid-template-columns:minmax(0, 1fr); }
:root[data-theme] #ini-mes[data-ini-tam="mediano"] .pz-cifras,
:root[data-theme] #ini-mes[data-ini-tam="mediano"] .pz-cifras[data-n="3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4) var(--e-5); }
:root[data-theme] #ini-mes[data-ini-tam="mediano"] .pz-cifra-v{ font-size:var(--t-titulo); }
/* "Tu negocio" tenia la MISMA trampa: su rejilla de 2 bloques solo bajaba a 1 columna cuando .ini
   (toda la pagina) media menos de 620 px, asi que en la media columna de ~270 px "Proximas bodas"
   quedaba en 120 px ("Valer... &..."). Ahora mira su propio ancho, con el mismo umbral. */
:root[data-theme] #ini-negocio{ container-type:inline-size; container-name:ini-negocio; }
@container ini-negocio (max-width:619px){
  :root[data-theme] #ini-negocio .ini-neg-grid{ grid-template-columns:minmax(0, 1fr); gap:var(--e-5); }
}

/* --- Marcas de dia del calendario GRANDE (a-69, 2026-09-26, contrato k-15; public/calendario.js, clases cf-*). El estado vive en la
   FORMA, el color solo avisa lo urgente (--urge): hecha = punto hueco (nunca verde: ya es el color de fabrica de una tarea, y
   verde/rojo es la peor combinacion para el daltonismo rojo-verde); dia atrasado con una tarea sin hacer = el NUMERO del dia en
   almagre, unica senal de color. El mini calendario del Inicio y el widget ya no comparten estas reglas: son las .cs-* de arriba. */
:root[data-theme] .cf-mdots .cf-dot-hueco{ width:8px; height:8px; border-radius:100px; background:transparent !important; border:1.3px solid var(--punto); box-sizing:border-box; }
:root[data-theme] .cf-mnum.atrasado{ color:var(--urge); font-weight:700; }
/* "N tareas atrasadas" abre la hoja de atrasadas (a-73 vagon 3): es un boton, se ve como uno. */
:root[data-theme] .ini-atrasado:not([hidden]){ cursor:pointer; }
:root[data-theme] .cf-mdots .cf-dot-punto{ width:8px; height:8px; border-radius:100px; background:var(--punto); }

/* F2/F3 en el calendario GRANDE, vista Mes (public/calendario.js, clases cf-*): la vista Mes
   habia quedado con el circulo relleno de siempre en "hoy" y sin banda de semana -- devuelto
   por Abuela (2026-09-26): "dos formas del mismo calendario". La Estratega confirmo que F1 a
   F5 aplican a los DOS calendarios; esto cierra F2 y F3 ahi. */
:root[data-theme] .cf-mcell.semana-actual{ background:color-mix(in srgb, var(--tinta) 5%, transparent); }
:root[data-theme] .cf-mnum.today{ background:transparent; color:var(--tinta); font-weight:400; box-shadow:0 0 0 1.5px var(--tinta); }
:root[data-theme] .cf-mnum.today.atrasado{ color:var(--urge); font-weight:700; box-shadow:0 0 0 1.5px var(--urge); }

/* A4 (a-73, contrato k-15, orden de Daniel, plan v2, 2026-09-26): el contexto ("Boda de...",
   diaria-fila y diaria-fila-evento en #diaria, la lista de "Hoy") pasa a una linea de
   metadatos DEBAJO del titulo, con el titulo a todo el ancho -- reemplaza la decision vieja
   ("al lado y no debajo") documentada en styles.css. Se cuida la razon de esa decision vieja
   de otra forma: la linea de meta solo existe cuando hay contexto (nunca un renglon vacio) y
   se recorta a UN renglon con elipsis, asi que tres "Solicitar resena al cliente" seguidas
   siguen siendo tres renglones (con contexto), no seis. */
:root[data-theme] .diaria-txtcol{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:1px; }
:root[data-theme] .diaria-meta{ font-size:var(--t-eti); line-height:1.4; color:var(--apagado); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Vagon 3 (a-73, contrato k-15): la hoja de atrasadas que abre "N tareas atrasadas". Lista
   con scroll propio (puede haber muchas mas de las que caben en una hoja) + una barra de
   acciones que solo aparece con algo seleccionado (Cuarto Oscuro: nada de botones inertes
   permanentes). */
:root[data-theme] .cal-atr-lista{ display:flex; flex-direction:column; max-height:min(50vh,420px); overflow-y:auto; margin:0 calc(var(--e-5) * -1); padding:0 var(--e-5); }
:root[data-theme] .cal-atr-fila{ display:flex; align-items:center; gap:var(--e-3); padding:8px 0; border-bottom:1px solid var(--linea); cursor:pointer; }
:root[data-theme] .cal-atr-fila:last-child{ border-bottom:0; }
:root[data-theme] .cal-atr-check{ flex:none; }
:root[data-theme] .cal-atr-txt{ flex:1 1 auto; min-width:0; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
:root[data-theme] .cal-atr-fecha{ flex:none; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .cal-atr-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); margin-top:var(--e-4); padding-top:var(--e-4); border-top:1px solid var(--linea); }
:root[data-theme] .cal-atr-cuenta{ flex:1 1 100%; font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .cal-atr-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }

:root[data-theme] .ini-cab{ display:flex; align-items:baseline; gap:var(--e-3); }
:root[data-theme] .ini-eti{ margin:0; font-size:var(--t-eti); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--apagado); }
:root[data-theme] .ini-rango{ margin-left:auto; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }

/* --- La pared de museo --- */
:root[data-theme] .ini-pared{ display:flex; align-items:center; gap:var(--e-6); min-height:280px; box-sizing:border-box; padding:var(--e-5) var(--e-6) var(--e-5) var(--e-5); border-radius:var(--r-flota); background:var(--pared); box-shadow:inset 0 0 0 1px var(--linea); }
:root[data-theme] .ini-marco{ position:relative; flex:none; width:320px; height:240px; }
:root[data-theme] .ini-cuadro{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--d-hoja) var(--curva-cambia); }
:root[data-theme] .ini-cuadro.on{ opacity:1; pointer-events:auto; }
/* El paspartu ES el padding: la foto entra completa en su caja (iniCaja) y el marfil la rodea. */
:root[data-theme] .ini-foto{ box-sizing:content-box; width:calc(var(--fw) * var(--ini-esc, 1) * 1px); height:calc(var(--fh) * var(--ini-esc, 1) * 1px); padding:var(--e-4); background:var(--paspartu); box-shadow:var(--sombra-flota); }
:root[data-theme] .ini-foto img{ display:block; width:100%; height:100%; object-fit:cover; background:var(--piedra-on); }
:root[data-theme] .ini-cedula{ flex:1 1 auto; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; gap:var(--e-4); }
:root[data-theme] .ini-ced{ display:flex; flex-direction:column; gap:var(--e-2); }
:root[data-theme] .ini-num{ font-size:var(--t-eti); letter-spacing:.18em; text-transform:uppercase; color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .ini-nombre{ font-size:var(--t-titulo); letter-spacing:-.01em; line-height:1.15; color:var(--tinta); overflow-wrap:anywhere; }
:root[data-theme] .ini-det, :root[data-theme] .ini-vistas{ font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
:root[data-theme] .ini-vn{ color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .ini-acciones{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-4); }
:root[data-theme] .ini-portada{ min-height:40px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-campo); cursor:pointer; white-space:nowrap; }
:root[data-theme] .ini-portada:disabled{ opacity:.6; cursor:default; }
:root[data-theme] .ini-enlace{ font-size:var(--t-texto); color:var(--medio); text-decoration:underline; text-decoration-color:var(--punto); text-underline-offset:3px; }
:root[data-theme] .ini-ctl{ display:flex; align-items:center; gap:var(--e-1); }
:root[data-theme] .ini-bctl{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); cursor:pointer; }
:root[data-theme] .ini-chev{ display:inline-flex; }
:root[data-theme] .ini-chev.ant{ transform:rotate(90deg); }
:root[data-theme] .ini-chev.sig{ transform:rotate(-90deg); }
:root[data-theme] .ini-puntos{ display:flex; align-items:center; margin-left:var(--e-2); }
:root[data-theme] .ini-punto{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer; }
:root[data-theme] .ini-punto > span{ display:block; width:6px; height:6px; border-radius:var(--r-pildora); background:var(--punto); transition:width var(--d-aviso) var(--curva-entra), background-color var(--d-aviso) var(--curva-cambia); }
:root[data-theme] .ini-punto.on > span{ width:18px; background:var(--tinta); }
:root[data-theme] .ini-cont{ margin-left:auto; font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .ini-solo-angosto{ display:none; }
:root[data-theme] .ini-pared-vacia{ flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--e-3); min-height:160px; }
:root[data-theme] .ini-pared-vacia p{ margin:0; max-width:46ch; font-size:var(--t-campo); line-height:1.45; color:var(--medio); }
@media (hover:hover){
  :root[data-theme] .ini-bctl:hover{ background:var(--piedra-on); color:var(--tinta); }
  :root[data-theme] .ini-enlace:hover{ color:var(--tinta); }
  :root[data-theme] button.ini-tarjeta:hover{ background:var(--piedra-on); }
}

/* --- Las dos tarjetas --- */
:root[data-theme] .ini-tarjetas{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4); }
:root[data-theme] .ini-tarjeta{ display:flex; align-items:center; gap:var(--e-3); min-width:0; padding:var(--e-3); border:0; border-radius:var(--r-flota); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:inherit; font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .ini-tarjeta-vacia{ cursor:default; }
:root[data-theme] .ini-mini{ flex:none; width:64px; height:64px; border-radius:var(--r); background:var(--piedra-on); overflow:hidden; }
:root[data-theme] .ini-mini img{ display:block; width:100%; height:100%; object-fit:cover; }
:root[data-theme] .ini-serie{ flex:none; display:flex; align-items:flex-end; gap:3px; width:64px; height:64px; box-sizing:border-box; padding:var(--e-2); border-radius:var(--r); background:var(--piedra-on); }
:root[data-theme] .ini-serie > span{ flex:1 1 0; height:calc(var(--h) * 1%); border-radius:var(--r); background:var(--punto); }
:root[data-theme] .ini-serie > span.pico{ background:var(--tinta); }
:root[data-theme] .ini-t-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
:root[data-theme] .ini-t-eti{ font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .ini-t-num{ font-size:var(--t-sub); color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .ini-t-sub{ font-size:var(--t-texto); color:var(--medio); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .ini-t-sub.urge{ color:var(--urge); }
/* El estado vacio es una frase, no un dato: se lee completa en vez de cortarse con puntos. */
:root[data-theme] .ini-tarjeta-vacia .ini-t-sub{ white-space:normal; }

/* --- El mes --- */
:root[data-theme] .ini-frase{ margin:0; font-size:var(--t-saludo); font-weight:400; letter-spacing:-.02em; line-height:1.1; color:var(--tinta); }
:root[data-theme] .ini-sub{ margin:0; max-width:58ch; font-size:var(--t-campo); line-height:1.5; color:var(--medio); }
/* El bloque de cifras del mes se fue a `Piezas.cifra` (piezas.css) el 2026-09-22. Estas tres clases
   NO estan muertas: "Tu negocio" las usa como su numero grande, su etiqueta y su linea de abajo. */
:root[data-theme] .ini-c-val{ font-size:var(--t-saludo); letter-spacing:-.02em; line-height:1.1; color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .ini-c-val.urge{ color:var(--urge); }
:root[data-theme] .ini-c-eti{ font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .ini-c-sub{ font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }

/* --- Hoy importa: las filas de El Foco, con el boton a la derecha (no en su propio renglon
   como en la columna del chat): el telefono pedia la pantalla mas corta. --- */
:root[data-theme] .ini-eti2{ margin:0; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
:root[data-theme] .ini-calma{ margin:0; font-size:var(--t-texto); color:var(--medio); }
:root[data-theme] .ini-hoy-cab{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--e-3); }
:root[data-theme] .ini-hoy-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
/* --- Tu negocio: cuatro bloques (por cobrar, proximas bodas, leads, ingresos). Sin cajas ni rayas:
   una cifra, una frase y hasta dos filas con su boton, como Hoy importa. --- */
:root[data-theme] .ini-negocio[hidden]{ display:none; }
:root[data-theme] .ini-neg-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-6) var(--e-7); margin-top:var(--e-4); }
:root[data-theme] .ini-neg{ display:flex; flex-direction:column; gap:var(--e-2); min-width:0; }
:root[data-theme] .ini-neg .ini-c-sub .urge, :root[data-theme] .ini-neg-fila .xb-s.urge{ color:var(--urge); }
:root[data-theme] .ini-neg .ini-c-eti{ margin-left:var(--e-1); }
:root[data-theme] .ini-neg-barras{ display:flex; align-items:flex-end; gap:var(--e-2); height:72px; margin-top:var(--e-2); }
:root[data-theme] .ini-neg-barra{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:var(--e-1); height:100%; }
:root[data-theme] .ini-neg-barra i{ display:block; border-radius:var(--r) var(--r) 0 0; background:var(--piedra-on); }
:root[data-theme] .ini-neg-barra.on i{ background:var(--texto); }
:root[data-theme] .ini-neg-barra em{ font-style:normal; font-size:var(--t-meta); color:var(--apagado); text-align:center; }
:root[data-theme] .ini .xb-fila{ flex-wrap:nowrap; align-items:center; }
:root[data-theme] .ini .xb-fila .xb-ico{ margin-top:0; }
:root[data-theme] .ini .xb-fila .xb-acciones{ width:auto; margin-top:0; }
/* El "por que" es la razon de la fila ("lleva 41 dias"): con el boton al lado se cortaba en el
   telefono justo en el numero. Dos renglones en vez de puntos suspensivos. */
:root[data-theme] .ini .xb-fila .xb-s{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* "+ N mas" es un enlace (lleva a El Foco) con la forma de los botones de texto de al lado. */
:root[data-theme] .ini-mas{ display:inline-flex; align-items:center; text-decoration:none; }

/* --- Cargando y error --- */
:root[data-theme] .ini-error{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-3); padding:var(--e-6) 0; }
:root[data-theme] .ini-error p{ margin:0; font-size:var(--t-campo); color:var(--medio); }
:root[data-theme] .ini-esq{ border-radius:var(--r); background:var(--piedra); }
:root[data-theme] .ini-esq-eti{ width:180px; height:10px; border-radius:var(--r-pildora); }
:root[data-theme] .ini-esq-pared{ height:280px; border-radius:var(--r-flota); }
:root[data-theme] .ini-esq-tarjeta{ height:88px; border-radius:var(--r-flota); }
:root[data-theme] .ini-esq-frase{ width:60%; height:32px; }
:root[data-theme] .ini-esq-linea{ width:80%; height:14px; }

/* --- Angosto (telefono, o el CRM apretado junto al chat): la mesa "Final · Home telefono" ---
   Misma foto (escalada .8125, casi la del lienzo), flechas a los lados de la foto, puntos y
   pausa debajo, cedula con "Usar de portada" al lado. La columna de la cedula se deshace
   (display:contents) para que sus piezas entren a la rejilla de la pared. */
@container (max-width: 619px){
  :root[data-theme] .ini{ gap:var(--e-5); }
  :root[data-theme] .ini-neg-grid{ grid-template-columns:minmax(0, 1fr); gap:var(--e-5); }
  /* La etiqueta y el rango no caben en una linea a 375 px: el rango baja, en vez de partir las dos. */
  :root[data-theme] .ini-cab{ flex-direction:column; align-items:flex-start; gap:2px; }
  :root[data-theme] .ini-rango{ margin-left:0; }
  :root[data-theme] .ini-t-num{ font-size:var(--t-campo); }
  :root[data-theme] .ini-pared{ --ini-esc:.8125; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"marco marco" "ctl ctl" "ced acc"; align-items:center; gap:var(--e-2) var(--e-3); min-height:0; padding:var(--e-4); }
  :root[data-theme] .ini-marco{ grid-area:marco; width:auto; height:196px; margin:0 calc(var(--e-4) * -1); }
  :root[data-theme] .ini-cedula{ display:contents; }
  :root[data-theme] .ini-ced{ grid-area:ced; gap:2px; min-width:0; }
  :root[data-theme] .ini-acciones{ grid-area:acc; }
  :root[data-theme] .ini-portada + .ini-enlace{ display:none; }
  :root[data-theme] .ini-ctl{ grid-area:ctl; position:relative; justify-content:center; min-height:44px; }
  :root[data-theme] .ini-ctl [data-ini="pausa"]{ position:absolute; right:calc(var(--e-2) * -1); top:0; width:44px; height:44px; }
  :root[data-theme] .ini-puntos{ margin-left:0; }
  :root[data-theme] .ini-cont{ display:none; }
  :root[data-theme] .ini-foto{ padding:var(--e-3); }
  :root[data-theme] .ini-nombre{ font-size:var(--t-sub); }
  :root[data-theme] .ini-det{ display:none; }
  :root[data-theme] .ini-solo-ancho{ display:none; }
  :root[data-theme] .ini-solo-angosto{ display:inline-flex; }
  :root[data-theme] .ini-lado{ position:absolute; top:76px; z-index:1; width:44px; height:44px; }
  :root[data-theme] .ini-lado[data-ini="ant"]{ left:3px; }
  :root[data-theme] .ini-lado[data-ini="sig"]{ right:3px; }
  :root[data-theme] .ini-tarjetas{ gap:var(--e-2); }
  :root[data-theme] .ini-tarjeta{ padding:var(--e-2) var(--e-3); }
  :root[data-theme] .ini-mini, :root[data-theme] .ini-serie{ display:none; }
  :root[data-theme] .ini-t-sub{ font-size:var(--t-meta); }
  :root[data-theme] .ini-frase{ font-size:var(--t-titulo); line-height:1.15; }
  :root[data-theme] .ini-c-val{ font-size:var(--t-titulo); }
  :root[data-theme] .ini-esq-pared{ height:320px; }
}
@media (pointer:coarse){
  :root[data-theme] .ini-bctl{ width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
  :root[data-theme] .ini-cuadro, :root[data-theme] .ini-punto > span{ transition:none; }
}

/* ---------------- Escritorio: el menu arriba (2026-09-18; a todo el ancho desde 2026-09-20) ---------------- */
/* Lienzo "El menu arriba, solo en el CRM". Las secciones vuelven a la barra de arriba como pildoras
   y el panel lateral se apaga. La puerta a Xarpie encabeza la fila y es interruptor: encendida mientras
   el chat se ve. Sin body.menu-arriba todo queda como antes.
   ANCHO COMPLETO (2026-09-20, pedido de Daniel): la barra empezaba donde termina la columna del chat (el
   padding-left con --co-chat-w de mas arriba) y en un 50/50 le quedaba la mitad, con las secciones
   cortadas ("Busi"). Xarpie y el CRM van casi siempre juntos, asi que ahora cubre TODO el ancho, encima de
   las dos columnas. La fila de Xarpie ("‹ Chats" y el lapiz) baja de la barra y se sienta arriba de SU
   columna, como las subpestanas arriba del CRM. Asi ninguna capa fija le tapa botones a la barra. */
.nav-xa, .nav-crear{ display:none; }
@media (min-width:861px){
  body.nav-lat-on.menu-arriba, body.nav-lat-on.nav-lat-fijo.menu-arriba{ --navlat-w:0px; }
  body.nav-lat-on.menu-arriba .nav-lat{ display:none !important; }
  :root[data-theme] body.nav-lat-on.menu-arriba #cp-riel.show{ display:flex; align-items:center; gap:12px; padding-right:16px; }
  body.nav-lat-on.menu-arriba .cp-miga-caja{ display:none; }
  /* Si la ventana es angosta y las secciones no caben, se recorren con el gesto (o con Tab) en vez de quedar cortadas a la mitad. */
  body.nav-lat-on.menu-arriba .cp-nav-central{ display:flex; justify-content:flex-start; flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  body.nav-lat-on.menu-arriba .cp-nav-central::-webkit-scrollbar{ display:none; }
  body.nav-lat-on.menu-arriba .subtabs:not([hidden]){ display:flex; }
  body.nav-lat-on.menu-arriba .cp-riel-der{ margin-left:auto; flex:none; }
  /* El selector de tres vistas lo reemplaza el interruptor de Xarpie; Cmd+\ sigue ciclando. */
  body.nav-lat-on.menu-arriba #nav-modo{ display:none; }
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-nav{ display:flex; align-items:center; gap:2px; }
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn{
    height:36px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:transparent;
    color:var(--medio); font-size:var(--t-texto); font-weight:400; gap:6px;
  }
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn .cp-navico{ display:none; }
  @media (hover:hover){ :root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn.on{ background:var(--piedra-on); color:var(--tinta); }
  :root[data-theme] body.nav-lat-on.menu-arriba .nav-xa{
    display:inline-flex; align-items:center; gap:8px; flex:none; height:36px; padding:0 14px 0 6px; border:0;
    border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea);
    color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer;
  }
  :root[data-theme] body.nav-lat-on.menu-arriba .nav-xa.on{ background:var(--boton); color:var(--boton-t); box-shadow:none; }
  :root[data-theme] body.nav-lat-on.menu-arriba .nav-xa-iso{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; }
  :root[data-theme] body.nav-lat-on.menu-arriba .nav-crear:not([hidden]){
    display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px 0 12px; border:0;
    border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); cursor:pointer;
  }
  :root[data-theme] body.nav-lat-on.menu-arriba .nav-crear .ico{ width:15px; height:15px; }
  /* Ancho completo: sin el hueco de la columna del chat a la izquierda. */
  :root[data-theme] body.nav-lat-on.menu-arriba #cp-riel.show{ padding-left:16px; }
  /* La fila de Xarpie deja de flotar sobre la barra: es la primera fila de SU columna (en flujo, sin fondo propio:
     el papel punteado es el de la columna). En "solo Xarpie" ya no hay iconos de la barra debajo que dejarles hueco. */
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa,
  :root[data-theme] body.nav-lat-on.menu-arriba #app.crm-colapsado #tel-fila-xa{
    position:relative; top:auto; left:auto; z-index:auto; width:auto; height:40px; flex:none; background:none;
    margin:0 -34px; padding:0 12px;   /* -34px = el padding lateral del chat: la fila llega al borde de la columna, como la de Chats */
  }
  /* La fila de Xarpie pega al borde de arriba de su columna: se quitan los 30 px de aire que traia el chat. */
  :root[data-theme] body.nav-lat-on.menu-arriba .chatpane{ padding-top:0; }
  /* La capa de Chats cubre la columna, no la barra. */
  :root[data-theme] body.nav-lat-on.menu-arriba #app .tel-convs{ top:var(--topnav-h, 48px); }
  /* Las dos filas de Xarpie (chat y Chats) miden lo que las subpestanas del CRM (40 px): la segunda fila queda a la misma altura en las dos columnas. */
  :root[data-theme] body.nav-lat-on.menu-arriba .tel-convs .tel-fila-xa{ height:40px; }
}

/* ---------------- Conversaciones del asistente de la liga de bio (public/conversaciones.js) ---------------- */
/* Fila sin cajas: lo seleccionado es piedra; lo que necesita a una persona es --urge (lo urgente). */
:root[data-theme] .cv-cols{ display:grid; grid-template-columns:minmax(240px, 320px) minmax(0, 1fr); gap:var(--e-5); align-items:start; }
:root[data-theme] .cv-lista{ display:flex; flex-direction:column; gap:var(--e-1); }
:root[data-theme] .cv-fila{ display:flex; flex-direction:column; gap:3px; padding:var(--e-3); border-radius:var(--r); color:inherit; text-decoration:none; }
:root[data-theme] .cv-fila.on{ background:var(--piedra); }
@media (hover:hover){ :root[data-theme] .cv-fila:not(.on):hover{ background:var(--tinte-toque); } }
:root[data-theme] .cv-fila-cab{ display:flex; align-items:baseline; gap:var(--e-2); }
:root[data-theme] .cv-fila-nom{ flex:1; min-width:0; font-size:var(--t-campo); font-weight:500; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .cv-fila-cuando, :root[data-theme] .cv-fila-est, :root[data-theme] .cv-meta{ font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
:root[data-theme] .cv-fila-ult{ font-size:var(--t-texto); color:var(--medio); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
:root[data-theme] .cv-flag{ font-size:var(--t-meta); color:var(--urge); }
:root[data-theme] .cv-hilo{ display:flex; flex-direction:column; min-height:420px; }
:root[data-theme] .cv-hilo-vacio{ padding:var(--e-6) 0; color:var(--apagado); }
:root[data-theme] .cv-hilo-cab{ display:flex; align-items:center; gap:var(--e-4); padding-bottom:var(--e-3); }
:root[data-theme] .cv-hilo-tit{ flex:1; min-width:0; }
:root[data-theme] .cv-hilo-nom{ font-size:var(--t-sub); font-weight:600; color:var(--tinta); }
:root[data-theme] .cv-hilo-est{ font-size:var(--t-texto); color:var(--medio); }
:root[data-theme] .cv-atras{ display:none; }
:root[data-theme] .cv-datos{ display:flex; flex-wrap:wrap; gap:var(--e-4); padding-bottom:var(--e-4); font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .cv-msgs{ display:flex; flex-direction:column; gap:var(--e-4); padding:var(--e-4) 0; max-height:min(52vh, 520px); overflow-y:auto; }
:root[data-theme] .cv-m{ display:flex; flex-direction:column; gap:var(--e-1); max-width:min(560px, 88%); }
:root[data-theme] .cv-q{ font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .cv-txt{ font-size:var(--t-campo); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
:root[data-theme] .cv-v, :root[data-theme] .cv-h{ align-self:flex-end; }
:root[data-theme] .cv-v .cv-txt{ padding:10px var(--e-4); border-radius:var(--r); background:var(--piedra); color:var(--tinta); }
:root[data-theme] .cv-h .cv-txt{ padding:10px var(--e-4); border-radius:var(--r); background:var(--boton); color:var(--boton-t); }
:root[data-theme] .cv-h .cv-q{ align-self:flex-end; }
:root[data-theme] .cv-sis{ align-self:center; font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .cv-pie{ padding-top:var(--e-3); }
:root[data-theme] .cv-caja{ display:flex; align-items:center; gap:var(--e-3); min-height:56px; padding:0 var(--e-2) 0 var(--e-5); border-radius:28px; background:var(--caja); box-shadow:var(--sombra-flota); }
:root[data-theme] .cv-caja input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:var(--t-campo); color:var(--tinta); }
:root[data-theme] .cv-caja-off{ color:var(--apagado); font-size:var(--t-campo); box-shadow:none; background:var(--piedra); padding-left:var(--e-5); }
:root[data-theme] .cv-env{ width:40px; height:40px; flex:none; border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); display:flex; align-items:center; justify-content:center; cursor:pointer; }
@media (max-width:860px){
  :root[data-theme] .cv-cols{ grid-template-columns:minmax(0, 1fr); }
  :root[data-theme] .cv-cols.cv-con-sel .cv-lista{ display:none; }
  :root[data-theme] .cv-cols:not(.cv-con-sel) .cv-hilo{ display:none; }
  :root[data-theme] .cv-atras{ display:inline-flex; }
}
/* Configuracion: filas sin cajas, interruptor en pildora. */
:root[data-theme] .cv-sw{ position:relative; width:48px; height:28px; flex:none; padding:0; border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); cursor:pointer; transition:background-color var(--d-toque) var(--curva-cambia); }
:root[data-theme] .cv-sw span{ position:absolute; left:4px; top:4px; width:20px; height:20px; border-radius:var(--r-pildora); background:var(--apagado); transition:transform var(--d-toque) var(--curva-entra); }
:root[data-theme] .cv-sw.on{ background:var(--boton); box-shadow:none; }
:root[data-theme] .cv-sw.on span{ background:var(--boton-t); transform:translateX(20px); }
:root[data-theme] .cv-seg{ display:flex; gap:var(--e-1); flex-wrap:wrap; }
:root[data-theme] .cv-seg button{ min-height:40px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer; }
:root[data-theme] .cv-seg button.on{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .cv-paso{ display:flex; align-items:center; gap:var(--e-1); }
:root[data-theme] .cv-paso button{ width:40px; height:40px; border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font-size:var(--t-sub); cursor:pointer; }
:root[data-theme] .cv-paso output{ min-width:48px; text-align:center; font-size:var(--t-campo); color:var(--tinta); font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){ :root[data-theme] .cv-sw, :root[data-theme] .cv-sw span{ transition:none; } }

/* Xarpen Business (F4b, lienzo aprobado 2026-09-19, pantalla 5): la vista previa del menu en el paso
   "Como trabajas" del cuestionario de un negocio. Solo tokens. */
.quiz-previa{ margin-top:var(--e-5); padding:var(--e-4); border-radius:4px; background:var(--pag); }
.quiz-previa-t{ margin:0 0 var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.quiz-previa-nav{ display:flex; gap:var(--e-4); font-size:var(--t-texto); color:var(--tinta); }
.quiz-previa-nav .on{ font-weight:500; box-shadow:inset 0 -2px 0 var(--tinta); padding-bottom:var(--e-1); }
.quiz-previa-btn{ display:inline-flex; align-items:center; height:32px; padding:0 var(--e-4); margin-top:var(--e-3); border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font-size:var(--t-meta); font-weight:500; }

/* ------------------------- Xarpie primero (F1): el CRM sigue a Xarpie ------------------------- */
/* Lienzo aprobado: "Xarpie primero: solo chat, CRM en vivo (F0)". Logica en public/xarpie-vivo.js.
   El boton es una pildora (se toca). Encendido = relleno de tinta con el punto de la marca; apagado y en pausa =
   contorno. El punto es --urge SOLO mientras sigue: es el unico color, y significa "esto se esta moviendo solo". */
:root[data-theme] .cp-seguir{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; margin-right:8px;
  border:0; border-radius:var(--r-pildora); cursor:pointer; font:inherit; font-size:var(--t-texto); font-weight:500;
  background:transparent; color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); white-space:nowrap;
}
:root[data-theme] .cp-seguir[hidden]{ display:none; }
:root[data-theme] .cp-seguir[data-estado="siguiendo"]{ background:var(--boton); color:var(--boton-t); box-shadow:none; }
:root[data-theme] .cp-seguir-punto{ width:6px; height:6px; border-radius:var(--r-pildora); background:var(--punto); flex-shrink:0; }
:root[data-theme] .cp-seguir[data-estado="siguiendo"] .cp-seguir-punto{ background:var(--urge); }
@media (hover:hover){ :root[data-theme] .cp-seguir:not([data-estado="siguiendo"]):hover{ color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linea), inset 0 0 0 100px var(--tinte-toque); } }
@media (max-width:860px){ :root[data-theme] .cp-seguir{ display:none; } }

/* El resalte de lo que Xarpie acaba de escribir: el mismo gesto que .xarpie-resalte (senalar_en_pantalla), para
   cualquier fila o campo con data-xa. Contorno de tinta que se apaga solo; con movimiento reducido no se anima. */
@keyframes xa-resalte{ 0%, 70%{ outline-color:var(--tinta); } 100%{ outline-color:transparent; } }
:root[data-theme] .xa-resalte{ outline:2px solid var(--tinta); outline-offset:4px; border-radius:4px; animation:xa-resalte 4s ease-out forwards; }
@media (prefers-reduced-motion: reduce){ :root[data-theme] .xa-resalte{ animation:none; } }
html.movimiento-reducido .xa-resalte{ animation:none !important; }

/* Las lineas del chat: una por cambio, bajo la respuesta. Sin caja ni raya (contenido, no tarjeta). */
:root[data-theme] .xa-lineas{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
:root[data-theme] .xa-linea{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--t-texto); color:var(--tinta); min-height:32px; }
:root[data-theme] .xa-linea-t{ font-weight:500; }
:root[data-theme] .xa-linea-t b{ font-weight:400; }
:root[data-theme] .xa-linea-mas{ color:var(--medio); font-weight:400; }
:root[data-theme] .xa-mini{
  display:inline-flex; align-items:center; height:28px; padding:0 12px; border:0; border-radius:var(--r-pildora);
  font:inherit; font-size:var(--t-meta); font-weight:500; cursor:pointer; background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linea);
}
@media (hover:hover){ :root[data-theme] .xa-mini:hover{ box-shadow:inset 0 0 0 1px var(--linea), inset 0 0 0 100px var(--tinte-toque); } }
@media (max-width:860px){ :root[data-theme] .xa-mini{ height:44px; padding:0 18px; font-size:var(--t-texto); } }

/* C1 "Hoja de ruta en vivo" (xarpie-hoja-ruta.js): una linea por cosa que Xarpie YA hizo, dentro
   de su propia burbuja. Sin caja ni raya en las filas normales (contenido, no tarjeta) -- mismo
   criterio que .xa-lineas; la unica caja es la de una tarjeta que espera tu OK, y esa YA es
   .xtarjeta (movida adentro, no reinventada). */
:root[data-theme] .xhr-lista{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
:root[data-theme] .xhr-fila{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; font-size:var(--t-texto); color:var(--tinta); min-height:28px; }
:root[data-theme] .xhr-fila-t{ padding-top:2px; }
:root[data-theme] .xhr-fila-t b{ font-weight:600; }
:root[data-theme] .xhr-marca{ flex:none; width:18px; text-align:center; color:var(--medio); font-size:var(--t-meta); line-height:1.7; }
:root[data-theme] .xhr-hecho .xhr-marca{ color:var(--tinta); }
:root[data-theme] .xhr-marca-ok{ color:var(--urge); }
:root[data-theme] .xhr-sigue{ color:var(--apagado); }
:root[data-theme] .xhr-sigue .xhr-fila-t{ padding-left:26px; } /* sin marca -- alinea con las filas que si tienen */
:root[data-theme] .xhr-ok{ flex-direction:column; align-items:stretch; }
:root[data-theme] .xhr-ok > .xhr-marca, :root[data-theme] .xhr-ok > .xhr-fila-t{ display:inline; }
:root[data-theme] .xhr-tarjeta-hueco:not(:empty){ margin:6px 0 2px 26px; }
:root[data-theme] .xhr-tarjeta-hueco .xtarjeta{ margin:0; }
:root[data-theme] .xhr-tira{ margin-top:6px; font-size:var(--t-meta); color:var(--medio); }

/* "Xarpie sigue trabajando en ... · Volver a seguir": flota (16 px) abajo a la izquierda del CRM. */
:root[data-theme] .xa-aviso{
  position:fixed; bottom:24px; z-index:var(--z-pegajoso, 40); display:flex; align-items:center; gap:12px;
  padding:10px 10px 10px 18px; border-radius:var(--r-flota); background:var(--menu); color:var(--tinta);
  box-shadow:var(--sombra-flota); font-size:var(--t-texto);
}

/* F2: Deshacer por cambio y Bitacora de hoy. La bitacora FLOTA (16 px) sobre el CRM, a la derecha. */
:root[data-theme] .xa-mini:disabled{ color:var(--medio); cursor:default; }
:root[data-theme] .xa-pill{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-pildora); font-size:var(--t-meta); color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); }
:root[data-theme] .xa-linea-deshecha .xa-linea-t, :root[data-theme] .xa-linea-deshecha .xa-bit-t{ color:var(--medio); text-decoration:line-through; }
:root[data-theme] .xa-bitacora{
  position:fixed; top:64px; right:24px; bottom:24px; width:min(440px, calc(100vw - 32px)); z-index:var(--z-pegajoso, 40);
  box-sizing:border-box; padding:22px 24px; border-radius:var(--r-flota); background:var(--menu); color:var(--tinta);
  box-shadow:var(--sombra-menu); display:flex; flex-direction:column; overflow:auto;
}
:root[data-theme] .xa-bit-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
:root[data-theme] .xa-bit-cab h2{ margin:0; font-size:var(--t-sub); font-weight:500; }
:root[data-theme] .xa-bit-sub{ margin:6px 0 0; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .xa-bit-lista{ list-style:none; margin:10px 0 0; padding:0; }
:root[data-theme] .xa-bit-fila{ display:flex; gap:14px; padding:12px 0; }
:root[data-theme] .xa-bit-hora{ width:40px; flex-shrink:0; padding-top:2px; font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .xa-bit-cuerpo{ flex-grow:1; display:flex; flex-direction:column; gap:6px; font-size:var(--t-texto); }
:root[data-theme] .xa-bit-t{ font-weight:500; } :root[data-theme] .xa-bit-t b{ font-weight:400; }
:root[data-theme] .xa-bit-motivo, :root[data-theme] .xa-bit-vacia{ font-size:var(--t-meta); color:var(--medio); line-height:1.4; }
@media (max-width:860px){ :root[data-theme] .xa-bitacora{ top:0; right:0; bottom:0; width:100vw; border-radius:0; } :root[data-theme] #nav-bitacora{ display:none; } }

/* F4: el riel "Ya puedes". Contenido, no tarjeta: sin caja. La pildora llena = ya se puede; contorno = falta. */
:root[data-theme] .xa-riel{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:10px 20px 6px; }
:root[data-theme] .xa-riel-et{ font-size:var(--t-meta); color:var(--medio); margin-right:4px; }
:root[data-theme] .xa-cap{ display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:var(--r-pildora); font-size:var(--t-meta); color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); white-space:nowrap; }
:root[data-theme] .xa-cap.on{ background:var(--boton); color:var(--boton-t); box-shadow:none; }

/* Corregir es hablar: el antes -> despues junto al dato que Xarpie cambio (dura lo que el resalte). */
:root[data-theme] .xa-cambio{ margin-top:6px; font-size:var(--t-meta); color:var(--tinta); }
:root[data-theme] .xa-cambio-antes{ color:var(--medio); text-decoration:line-through; }
:root[data-theme] .xa-cambio-flecha{ color:var(--medio); }
:root[data-theme] .xa-cambio-despues{ font-weight:500; }

/* El guion de configuracion (#/configurar). Filas sin cajas ni rayas; la marca del tramo: llena = hecho, contorno de tinta =
   ahora, contorno de linea = despues. "Tu negocio, en una pagina": seis bloques de contenido, sin tarjetas. */
:root[data-theme] .guion-rejilla{ display:grid; grid-template-columns:minmax(0, 460px) minmax(0, 1fr); gap:56px; }
@media (max-width:960px){ :root[data-theme] .guion-rejilla{ grid-template-columns:1fr; gap:28px; } }
:root[data-theme] .guion-lista{ list-style:none; margin:0; padding:0; }
:root[data-theme] .guion-tramo{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-radius:4px; }
:root[data-theme] .guion-n{ width:26px; height:26px; flex-shrink:0; border-radius:var(--r-pildora); display:inline-flex; align-items:center; justify-content:center; font-size:var(--t-meta); font-weight:500; color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); }
:root[data-theme] .guion-tramo[data-estado="hecho"] .guion-n{ background:var(--boton); color:var(--boton-t); box-shadow:none; }
:root[data-theme] .guion-tramo[data-estado="ahora"] .guion-n{ color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--tinta); }
:root[data-theme] .guion-t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
:root[data-theme] .guion-nombre{ font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .guion-tramo[data-estado="ahora"] .guion-nombre, :root[data-theme] .guion-bloque .guion-nombre{ font-weight:500; }
:root[data-theme] .guion-tramo:is([data-estado="despues"], [data-estado="saltado"]) .guion-nombre{ color:var(--medio); }
:root[data-theme] .guion-det{ font-size:var(--t-meta); color:var(--medio); line-height:1.45; margin:0; }
:root[data-theme] .guion-acc{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
:root[data-theme] .guion-ver{ font-size:var(--t-meta); color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }
:root[data-theme] .guion-pill{ display:inline-flex; align-items:center; height:20px; padding:0 8px; margin-left:6px; border-radius:var(--r-pildora); font-size:var(--t-meta); color:var(--medio); box-shadow:inset 0 0 0 1px var(--linea); }
:root[data-theme] .guion-lado{ display:flex; flex-direction:column; gap:22px; }
:root[data-theme] .guion-eti{ margin:0; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .guion-dicho{ margin:6px 0 4px; font-size:var(--t-texto); color:var(--tinta); line-height:1.5; }
:root[data-theme] .guion-pagina{ display:grid; grid-template-columns:repeat(2, minmax(0, 360px)); gap:30px 56px; }
@media (max-width:860px){ :root[data-theme] .guion-pagina{ grid-template-columns:1fr; } }
:root[data-theme] .guion-bloque{ display:flex; flex-direction:column; gap:6px; }
:root[data-theme] a.xa-riel-et{ text-decoration:none; }

/* Una tarjeta cuya confirmacion fallo dice POR QUE, dentro de la tarjeta (el aviso general dura 2 s). Urgencia = --urge. */
:root[data-theme] .xtarjeta-err{ margin:10px 0 0; font-size:var(--t-meta); line-height:1.45; color:var(--urge); }

/* La tarjeta confirmada: el "Ver" va junto a su estado ("Hecho"), sin caja ni raya. */
:root[data-theme] .xtarjeta-pie .xa-mini{ margin-left:10px; }

/* El total de una tabla del chat (suma de una columna sobre TODAS las filas del filtro): pegado al pie, sin caja ni raya. */
:root[data-theme] .db-mini-total{ display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:2px 10px; margin:10px 2px 0; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .db-mini-total b{ font-size:var(--t-texto); font-weight:600; color:var(--tinta); font-variant-numeric:tabular-nums; }

/* En la tarjeta de tabla del chat la primera columna (el titulo de la fila) no se come el ancho: el resto, con el monto, queda a su lado. */
:root[data-theme] #tv-tabla .db-tabla td:first-child, :root[data-theme] #tv-tabla .db-tabla th:first-child{ max-width:170px; }

/* Las tarjetas del chat (tablas, indicadores) median 100% + 40 px de margen: se salian del hilo y el borde derecho quedaba recortado.
   Se descuenta el margen; en telefono el margen ya es 0 y vuelve al 100%. */
:root[data-theme] .browwidgets{ flex-basis:calc(100% - 40px); }
@media (max-width:860px){ :root[data-theme] .browwidgets{ flex-basis:100%; } }

/* ================= Xarpie trabajando: el movimiento (public/xarpie-magia.js) ==========
   Numeros que giran como un odometro y filas que se levantan. Solo transform y opacity los mueven (JS, Web Animations);
   aqui solo esta la forma. Cada rodillo es una pila de 12 celdas (blanco, 0..9, 0) dentro de una columna que recorta. */
.xa-rod{display:inline-flex;align-items:flex-start;line-height:1.25;font-variant-numeric:tabular-nums}
.xa-rod-col{display:inline-block;width:1ch;height:1.25em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,black 24%,black 76%,transparent);mask-image:linear-gradient(transparent,black 24%,black 76%,transparent)}
.xa-rod-pila{display:block;will-change:transform}
.xa-rod-pila>span{display:block;height:1.25em;text-align:center}
.xa-rod-fijo{display:inline-block;height:1.25em;white-space:pre}
.xa-lev{position:relative;box-shadow:var(--sombra-flota)}
/* El punto de Xarpie (una luz con su nombre que pasa de un numero al siguiente) y la diferencia que viaja entre bloques. Posicion fija:
   el JS solo les mueve transform y opacity. El chip con Deshacer reutiliza .xa-aviso. */
.xa-punto{position:fixed;left:0;top:0;z-index:var(--z-aviso);pointer-events:none;will-change:transform,opacity}
.xa-punto-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:var(--r-pildora);background:var(--urge);box-shadow:0 0 0 6px var(--tinte-toque)}
.xa-punto-etq{position:absolute;right:14px;top:-10px;padding:2px 10px;border-radius:var(--r-pildora);background:var(--tinta);color:var(--pag);font-size:var(--t-meta);font-weight:600;line-height:18px;white-space:nowrap}
.xa-delta{position:fixed;left:0;top:0;z-index:var(--z-aviso);pointer-events:none;padding:2px 10px;border-radius:var(--r-pildora);background:var(--tinta);color:var(--pag);font-size:var(--t-meta);font-weight:600;line-height:18px;white-space:nowrap;will-change:transform,opacity}

/* Cambio de pagina fluido (public/pagina-fluida.js). SOLO #view lleva nombre de transicion ("vista"): el menu, el chat y el resto de la pagina no
   se animan ni parpadean. La fila que se toca en una lista se convierte en el encabezado de su ficha ("fila"). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(vista){animation-duration:calc(150ms*var(--lento))}
::view-transition-old(vista),::view-transition-new(vista){animation-duration:calc(150ms*var(--lento));animation-timing-function:var(--curva-cambia)}
::view-transition-group(fila){animation-duration:calc(320ms*var(--lento));animation-timing-function:var(--curva-arrastre)}

/* ---------------- Plantillas de recibo por servicio (Documentos > Plantillas > Recibos, 2026-09-20) ---------------- */
/* Con el chat y el CRM a mitad y mitad el CRM mide ~700 px: lista a la izquierda y editor a la derecha no caben. La lista es una fila de
   pildoras encima y el editor ocupa todo el ancho. Lo elegido es tinta llena. Solo tokens. */
:root[data-theme] .pl-svc-t{ margin:0; font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
:root[data-theme] .pl-svc{ display:flex; flex-direction:column; gap:var(--e-4); margin-bottom:var(--e-7); }
:root[data-theme] .pl-svc-lista{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
:root[data-theme] .pl-svc-item{ display:inline-flex; align-items:center; gap:var(--e-2); height:38px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-texto); color:var(--tinta); cursor:pointer; }
:root[data-theme] .pl-svc-item[hidden]{ display:none; }
:root[data-theme] .pl-svc-item.on{ background:var(--boton); color:var(--boton-t); box-shadow:none; }
@media (hover:hover){ :root[data-theme] .pl-svc-item:not(.on):hover{ background:var(--piedra-on); } }
:root[data-theme] .pl-svc-res{ font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .pl-svc-item.on .pl-svc-res{ color:inherit; opacity:.7; }
:root[data-theme] .pl-svc-ed{
  display:flex; flex-direction:column; gap:var(--e-4); padding:var(--e-5); border-radius:var(--r-flota); background:var(--piedra); box-shadow:var(--sombra-flota); min-width:0;
  /* Las clases del editor del recibo (.ced-inp, .ced-del...) leen --ced-*, que solo existen dentro de .ced: aqui se apuntan a los tokens. */
  --ced-panel:var(--piedra-on); --ced-line:var(--linea); --ced-line2:var(--linea); --ced-ink:var(--tinta); --ced-ink2:var(--medio); --ced-ink3:var(--apagado); --ced-accent:var(--tinta); --ced-red:var(--urge);
}
:root[data-theme] .pl-svc-acc{ display:flex; gap:var(--e-3); align-items:center; }
/* Sin la columna de importe (una plantilla no calcula): mismo grid del editor del recibo, un hueco menos. */
:root[data-theme] .pl-svc-ed .red-det-fila, :root[data-theme] .pl-svc-ed .red-det-cab{ grid-template-columns:22px minmax(0,1fr) 64px 120px 34px; padding-left:0; padding-right:0; background:transparent; }
:root[data-theme] .pl-svc-ed .red-det-cab > :nth-child(5){ display:none; }
:root[data-theme] .pl-svc-ed .red-det-imp{ display:none; }

/* Plantillas del detalle del recibo (fila de pildoras encima de los renglones): pildora = se toca; la elegida es tinta llena. Solo tokens. */
:root[data-theme] .red-chip{ height:34px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer; }
@media (hover:hover){ :root[data-theme] .red-chip:not(.on):hover{ color:var(--tinta); background:var(--piedra-on); } }
:root[data-theme] .red-chip.on{ background:var(--boton); color:var(--boton-t); box-shadow:none; }
:root[data-theme] .red-det-nota.ok{ color:var(--medio); }
:root[data-theme] .red-det-nota.aviso{ color:var(--urge); }
:root[data-theme] .red-det-nota.mal{ color:var(--urge); }


/* ---------------------------------- Bases clicables y editables (2026-09-21) ----------------------------------
   Solo tokens. La celda que apunta a otra cosa (Cliente, Evento) se subraya al pasar; el ··· de la fila aparece al pasar y siempre en tactil. */
:root[data-theme] .db-ref{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; text-underline-offset:3px; text-decoration:none; }
@media (hover:hover){ :root[data-theme] .db-ref:hover{ text-decoration:underline; text-decoration-color:var(--punto); } }
:root[data-theme] .db-ref:focus-visible{ outline:2px solid var(--punto); outline-offset:2px; border-radius:var(--e-1); }
:root[data-theme] .db-celda-acc{ width:44px; text-align:center; padding:0 var(--e-1); }
:root[data-theme] .db-acc-btn{ width:32px; height:32px; border-radius:var(--r-pildora); border:0; background:transparent; color:var(--medio); font-size:var(--t-campo); letter-spacing:1px; line-height:1; cursor:pointer; opacity:0; }
:root[data-theme] .db-tabla tr:hover .db-acc-btn, :root[data-theme] .db-acc-btn:focus-visible, :root[data-theme] .db-acc-btn[aria-expanded="true"]{ opacity:1; }
@media (hover:none){ :root[data-theme] .db-acc-btn{ opacity:1; } }
@media (hover:hover){ :root[data-theme] .db-acc-btn:hover{ background:var(--tinte-toque); color:var(--tinta); } }
:root[data-theme] .db-acc-menu{ min-width:232px; }
:root[data-theme] .db-acc-menu .w-pop-item[disabled]{ opacity:.45; cursor:not-allowed; }
/* Selector de equipo de una celda de base (lienzo F6, 2026-09-30): flota (16 px), el buscador y los roles son pildoras (se tocan), las filas van sin cajas. */
:root[data-theme] .db-pop-eq{ width:280px; max-height:min(420px, 70vh); overflow:auto; display:flex; flex-direction:column; gap:var(--e-1); padding:var(--e-2); border-radius:var(--r-flota); }
:root[data-theme] .db-eq-buscar{ border-radius:var(--r-pildora); }
:root[data-theme] .db-eq-lista{ display:flex; flex-direction:column; gap:var(--e-1); }
:root[data-theme] .db-eq-item{ display:flex; align-items:center; gap:var(--e-3); width:100%; text-align:left; background:transparent; border:0; }
:root[data-theme] .db-eq-ini{ width:28px; height:28px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--texto); display:flex; align-items:center; justify-content:center; font-size:var(--t-meta); flex:none; }
:root[data-theme] .db-eq-nom{ display:block; color:var(--tinta); font-size:var(--t-texto); }
:root[data-theme] .db-eq-rol{ display:block; color:var(--apagado); font-size:var(--t-meta); }
:root[data-theme] .db-eq-marca{ margin-left:auto; color:var(--tinta); }
:root[data-theme] .db-eq-nuevo{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-2); }
:root[data-theme] .db-eq-roles{ display:flex; gap:var(--e-2); }
:root[data-theme] .db-por-confirmar{ display:inline-block; font-size:var(--t-meta); color:var(--medio); background:var(--piedra-on); border-radius:var(--r-pildora); padding:2px var(--e-3); }
:root[data-theme] .db-eq-roles .pill{ border:0; border-radius:var(--r-pildora); padding:var(--e-1) var(--e-3); background:var(--piedra-on); color:var(--texto); font-size:var(--t-meta); cursor:pointer; }
:root[data-theme] .db-eq-roles .pill.on{ background:var(--boton); color:var(--boton-t); }
/* La «Base del cliente» (lienzo F6, 2026-09-30): titulo y dos acciones en pildora arriba, secciones sin cajas ni rayas, una leyenda al pie. */
:root[data-theme] .bcl{ display:flex; flex-direction:column; gap:var(--e-6); }
:root[data-theme] .bcl-cab{ display:flex; align-items:flex-start; gap:var(--e-4); flex-wrap:wrap; }
:root[data-theme] .bcl-cab-t{ flex:1 1 320px; display:flex; flex-direction:column; gap:var(--e-1); }
:root[data-theme] .bcl-titulo{ margin:0; font-size:var(--t-titulo); font-weight:500; color:var(--tinta); }
:root[data-theme] .bcl-sub{ font-size:var(--t-texto); color:var(--medio); }
:root[data-theme] .bcl-cab-acc{ display:flex; gap:var(--e-2); flex-wrap:wrap; }
:root[data-theme] .bcl-sec .fsec-t{ font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
:root[data-theme] .bcl-n{ font-size:var(--t-meta); font-weight:400; color:var(--apagado); margin-left:var(--e-1); }
:root[data-theme] .bcl-cuerpo{ overflow-x:auto; }
:root[data-theme] .bcl-vacio{ text-align:left; color:var(--medio); }
:root[data-theme] .bcl-leyenda{ display:flex; gap:var(--e-5); flex-wrap:wrap; font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .bcl-leyenda span{ display:inline-flex; align-items:center; gap:var(--e-2); }
:root[data-theme] .db-impacto{ margin-top:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--tinte-toque); display:flex; flex-direction:column; gap:var(--e-2); }
:root[data-theme] .db-imp-t{ font-size:var(--t-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .db-imp-f{ display:flex; justify-content:space-between; gap:var(--e-4); font-size:var(--t-texto); color:var(--texto); }
:root[data-theme] .db-aviso{ margin-top:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--tinte-toque); color:var(--tinta); font-size:var(--t-texto); line-height:1.5; }
:root[data-theme] .db-aviso p{ margin:0; }
:root[data-theme] .db-aviso p + p{ margin-top:var(--e-2); }
:root[data-theme] .db-pago-nota{ font-size:var(--t-meta); margin:var(--e-2) 0 0; }

/* El ··· tambien vive en la lista, el tablero y la galeria: al pasar sobre la fila o tarjeta, y siempre visible en tactil. En la tabla se queda pegado a la derecha al hacer scroll lateral. */
:root[data-theme] .db-fila, :root[data-theme] .db-ktarj, :root[data-theme] .db-gal-card{ position:relative; }
:root[data-theme] .db-fila .db-acc-btn{ margin-left:auto; flex:none; }
:root[data-theme] :is(.db-ktarj, .db-gal-card) .db-acc-btn{ position:absolute; top:var(--e-2); right:var(--e-2); background:var(--tinte-toque); }
:root[data-theme] :is(.db-fila, .db-ktarj, .db-gal-card):hover .db-acc-btn{ opacity:1; }
:root[data-theme] .db-celda-acc{ position:sticky; right:0; z-index:2; background:var(--pag); }
:root[data-theme] .widget .db-celda-acc{ background:var(--piedra); }

/* Xarpie en tu WhatsApp (canal del dueno): la marca "por WhatsApp" en las burbujas del hilo que pasaron por el celular. Solo tokens. */
.brow.brow-wa{ flex-wrap:wrap; }
.brow-wa .brow-origen{ flex-basis:100%; font-size:var(--t-meta); color:var(--medio); margin-bottom:var(--e-1); }
.brow-me.brow-wa .brow-origen{ text-align:right; }

/* ---- Conversar con Xarpie (modo manos libres, paso 3 de voz) ----
   Una capa que tapa la pantalla a proposito: en este modo no se lee, se habla. Solo tokens.
   El movimiento de la onda es decoracion y por eso desaparece con "reducir movimiento": lo que
   informa es el TEXTO del estado ("Te escucho", "Xarpie esta hablando"), no la animacion. */
.vozc-capa{ position:fixed; inset:0; z-index:80; background:var(--pag); display:grid; place-items:stretch; }
/* El pie se salia por abajo en un telefono con barra de gestos: el respiro de abajo es el
   del aparato, no un numero fijo. */
.vozc-caja{ display:flex; flex-direction:column; height:100%; max-width:560px; width:100%; margin:0 auto; box-sizing:border-box;
  padding:18px 20px 28px; padding-top:calc(18px + env(safe-area-inset-top, 0px)); padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); }
.vozc-top{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.vozc-vive{ font-size:var(--t-meta); color:var(--apagado); }
.vozc-salir{ border:0; background:transparent; color:var(--medio); font:inherit; font-size:var(--t-campo); padding:8px 4px; cursor:pointer; border-radius:var(--r-pildora); }
.vozc-medio{ flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center; }
.vozc-dicho{ margin:0; font-size:var(--t-titulo); line-height:1.4; color:var(--tinta); max-width:26ch; min-height:3em; }
/* Mientras no has dicho nada, el centro no se queda vacio: dice de quien es el turno. */
.vozc-dicho.vozc-pista{ color:var(--punto); }
.vozc-onda{ display:flex; align-items:center; gap:5px; height:72px; }
.vozc-onda span{ width:4px; height:14px; border-radius:var(--r-pildora); background:var(--medio); transition:opacity var(--d-toque) var(--curva-cambia); }
.vozc-capa[data-estado="escuchando"] .vozc-onda span{ background:var(--urge); animation:vozc-onda 1.1s ease-in-out infinite; }
@keyframes vozc-onda{ 0%,100%{ height:14px; } 50%{ height:52px; } }
.vozc-abajo{ flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.vozc-accion{ width:100%; padding:18px 20px; border:0; border-radius:var(--r-flota); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-sub); cursor:pointer; }
.vozc-capa[data-estado="contestando"] .vozc-accion{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1px var(--piedra-on); }
.vozc-pie{ margin:0; flex:0 0 auto; font-size:var(--t-meta); color:var(--punto); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .vozc-capa[data-estado="escuchando"] .vozc-onda span{ animation:none; height:32px; } }

/* La tarjeta de Confirmar, ya resuelta, se encoge a un CHIP (tablero 7 del lienzo de movimiento,
   https://claude.ai/artifact/VcxAYQFKjzRxPQAqVoDuc8). El cuerpo se pliega con `.m-quita` de
   motion.css -- que ya respeta "reducir movimiento" -- y lo que queda es una linea:
   «Hecho · Ver · Deshacer». Una tarjeta de algo que ya paso no tiene por que seguir ocupando media
   pantalla del chat con los campos de la propuesta.
   Solo tokens. El prefijo :root[data-theme] es para ganarle a .xtarjeta de styles.css sin !important. */
:root[data-theme] .xtarjeta-resuelta{
  flex:0 1 auto; width:auto; align-self:flex-start;
  padding:var(--e-2) var(--e-3); gap:0;
  border-radius:var(--r-pildora); border-color:transparent; background:var(--piedra);
}
:root[data-theme] .xtarjeta-resuelta .xtarjeta-pie{ align-items:center; gap:var(--e-2); }
:root[data-theme] .xtarjeta-resuelta .xtarjeta-cuerpo[hidden]{ display:none; }

/* ---- Conversar con Xarpie: el chat se queda, y abajo se enciende una aurora ----
   NO tapa la pantalla. La conversacion se LEE en el hilo de siempre (tu mensaje entra como tu
   burbuja, la respuesta se va escribiendo en la suya) y abajo se enciende la luz. Tapar el hilo
   con una pantalla completa era repetir ahi lo que el hilo ya estaba diciendo.

   La aurora NO vive dentro de la caja de abajo: es hermana del composer, asi que sube por
   DETRAS del hilo y se desvanece hacia arriba. Y responde a la voz: el mismo RMS que corta tu
   turno alimenta --vozc-nivel (0 a 1, suavizado), asi que la luz crece cuando hablas. Un video
   no podria hacer eso, ni seguir el tema, ni apagarse con "reducir movimiento".

   Aqui SI son varios colores (decision de Daniel, 2026-09-22, con su referencia a la vista):
   una aurora de un solo color no se lee como aurora. Son tokens, y la marca sigue siendo de un
   color en TODO lo demas: esto es luz de un modo, no una superficie de marca. */
:root{
  --aurora-1:color-mix(in srgb, var(--urge) 70%, transparent);      /* el almagre de la marca */
  --aurora-2:color-mix(in srgb, #4F86C6 72%, transparent);          /* i18n-ok: no es texto -- azul de aurora */
  --aurora-3:color-mix(in srgb, #3FA88F 60%, transparent);          /* verde-agua */
  --aurora-4:color-mix(in srgb, #7A5CA8 58%, transparent);          /* violeta */
  /* Las luciernagas (--luz-1/2/3) viven arriba, con el resto de los colores de tema: aqui solo
     estan los de la aurora porque cambian juntos y no dependen del tema. */
  --aurora-fuerza:.7;
}
:root[data-theme="dark"]{ --aurora-fuerza:1; }
/* EL BOTON QUE ABRE LA VOZ (lienzo aprobado 2026-09-23, opcion 2 "Onda"). El icono anterior
   era un punto con dos arcos: el boton si abria la voz, pero el dibujo no lo anunciaba --
   podia ser wifi, una grabadora o un objetivo. Ahora son dos olas pintadas con los MISMOS
   colores de la aurora que la persona va a ver al entrar, asi que el boton promete lo que hay
   dentro. Es lo unico con color en el composer, y eso es lo que lo hace encontrable.
   En reposo NO se mueve: esto se ve cien veces al dia. La aurora se mueve en el modo.
   Y el boton nunca tuvo UNA sola regla de CSS: era la caja gris que pone el navegador por
   defecto, 35 x 28.5 px con esquinas de formulario. De ahi salia media parte de que no se
   entendiera, y por eso no bastaba con cambiarle el dibujo. */
#chat-conversar{ width:34px; height:34px; flex:none; display:grid; place-items:center; padding:0;
  border:0; border-radius:var(--r-pildora); background:var(--piedra-on); cursor:pointer;
  transition:background-color var(--d-toque) var(--curva-cambia); }
/* Hacia la tinta: en oscuro sube de luz y en claro baja, que en los dos casos es "mas contraste"
   y no "mas claro", que solo seria cierto en un tema. */
#chat-conversar:hover{ background:color-mix(in srgb, var(--piedra-on) 88%, var(--tinta)); }
#chat-conversar .cvg1{ stop-color:var(--urge); }
#chat-conversar .cvg2{ stop-color:var(--onda-2); }
#chat-conversar .cvg3{ stop-color:var(--onda-3); }
#chat-conversar .cvg4{ stop-color:var(--onda-4); }
.vozc-luz{ position:relative; }
/* La luz NUNCA se sale de la columna del chat: `left/right:0` y su propio recorte. Con insets
   negativos medía 706 px en una columna de 504 y se derramaba sobre el panel de al lado
   (lo vio Daniel en produccion el 2026-09-22). */
/* Sube de 54% a 68% y se desvanece mas tarde (2026-09-22): la luz se veia lejos, arriba, y la
   franja de abajo era una tapa. Ahora llega hasta donde se habla. */
.vozc-aurora{ position:absolute; left:0; right:0; bottom:0; height:68%; z-index:0;
  pointer-events:none; overflow:hidden; contain:paint;
  opacity:calc(var(--aurora-fuerza) * (.66 + .34 * var(--vozc-nivel, 0)));
  transition:opacity 420ms var(--curva-cambia);
  /* Se desvanece hacia arriba, hacia el hilo. En una mascara el color no pinta: solo cuenta su
     opacidad, por eso `black` y no un token. */
  -webkit-mask-image:linear-gradient(to top, black 0%, black 46%, transparent 100%);
  mask-image:linear-gradient(to top, black 0%, black 46%, transparent 100%); }
/* CORTINAS, no manchas: cintas altas e inclinadas que se cruzan, cada una a su ritmo. Es lo que
   hace que se lea como aurora y no como una luz de fondo. */
.vozc-aurora i{ position:absolute; display:block; bottom:-40%; height:170%; width:46%;
  border-radius:48% 52% 45% 55% / 60% 58% 42% 40%;
  will-change:transform, opacity; transform:translate3d(0,0,0);
  scale:calc(1 + .12 * var(--vozc-nivel, 0)); transition:scale 320ms var(--curva-cambia); }
/* En oscuro las cintas se SUMAN como luz (screen): ahi nacen los verdes y violetas donde se
   cruzan, que es de donde una aurora saca su color. En claro eso quemaria el papel. */
:root[data-theme="dark"] .vozc-aurora i{ mix-blend-mode:screen; }
.vozc-aurora i:nth-child(1){ left:-8%;  background:var(--aurora-1); filter:blur(46px); animation:vozc-cortina1 13s ease-in-out infinite alternate, vozc-latido 7s ease-in-out infinite; }
.vozc-aurora i:nth-child(2){ left:20%;  background:var(--aurora-2); filter:blur(52px); animation:vozc-cortina2 17s ease-in-out infinite alternate, vozc-latido 9s ease-in-out infinite 1.5s; }
.vozc-aurora i:nth-child(3){ left:46%;  background:var(--aurora-3); filter:blur(58px); animation:vozc-cortina3 21s ease-in-out infinite alternate, vozc-latido 11s ease-in-out infinite .8s; }
.vozc-aurora i:nth-child(4){ left:70%;  background:var(--aurora-4); filter:blur(50px); animation:vozc-cortina2 15s ease-in-out infinite alternate-reverse, vozc-latido 8s ease-in-out infinite 2.2s; }
@keyframes vozc-cortina1{ from{ transform:translate3d(-14%,6%,0) rotate(-14deg) scaleY(.8); }  to{ transform:translate3d(16%,-6%,0) rotate(9deg) scaleY(1.15); } }
@keyframes vozc-cortina2{ from{ transform:translate3d(12%,-5%,0) rotate(11deg) scaleY(1.1); }  to{ transform:translate3d(-16%,7%,0) rotate(-8deg) scaleY(.85); } }
@keyframes vozc-cortina3{ from{ transform:translate3d(-10%,4%,0) rotate(6deg) scaleY(.9); }    to{ transform:translate3d(14%,-7%,0) rotate(-12deg) scaleY(1.25); } }
/* El latido: cada cinta respira en su propio tiempo, asi la mezcla nunca se repite igual. */
@keyframes vozc-latido{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* LUCIERNAGAS. Viven DENTRO de la aurora a proposito, y eso resuelve tres cosas sin codigo:
   heredan su mascara (se adelgazan hacia arriba), heredan su nivel de voz (brillan cuando
   hablas, sin una segunda escritura por tic) y, como el velo se pinta ENCIMA de la aurora, las
   que caen sobre el texto desaparecen solas -- no hay que recortarlas aparte.
   Van en <b> y no en <i> para no chocar con `.vozc-aurora i`, que son las cortinas.
   Solo animan transform y opacity, que el navegador resuelve sin volver a dibujar la pagina:
   doce puntos no le cuestan bateria a un microfono abierto. */
.vozc-aurora b{ position:absolute; display:block; width:8px; height:8px; --luz:var(--luz-1);
  background:radial-gradient(circle, var(--luz) 0%, var(--luz) 15%, color-mix(in srgb, var(--luz) 26%, transparent) 44%, transparent 72%);
  /* .26 es lo que queda con "reducir movimiento": un polvo quieto y muy tenue, en vez de doce
     puntos congelados a todo brillo (que es lo que pasaria sin un valor base). */
  opacity:.26; will-change:transform, opacity; }
.vozc-aurora b:nth-of-type(1){  left:8%;  bottom:44%; animation:vozc-deriva1 19s ease-in-out infinite alternate, vozc-chispa 7.5s ease-in-out infinite; }
.vozc-aurora b:nth-of-type(2){  left:19%; bottom:62%; animation:vozc-deriva2 23s ease-in-out 1.8s infinite alternate, vozc-chispa 9s ease-in-out 1.8s infinite; }
.vozc-aurora b:nth-of-type(3){  left:27%; bottom:40%; scale:1.3; animation:vozc-deriva3 17s ease-in-out 3.4s infinite alternate, vozc-chispa 8.2s ease-in-out 3.4s infinite; }
.vozc-aurora b:nth-of-type(4){  left:36%; bottom:72%; --luz:var(--luz-2); animation:vozc-deriva1 25s ease-in-out .9s infinite alternate, vozc-chispa 10.5s ease-in-out .9s infinite; }
.vozc-aurora b:nth-of-type(5){  left:44%; bottom:48%; animation:vozc-deriva2 20s ease-in-out 5.1s infinite alternate, vozc-chispa 7.8s ease-in-out 5.1s infinite; }
.vozc-aurora b:nth-of-type(6){  left:52%; bottom:80%; scale:.75; animation:vozc-deriva3 22s ease-in-out 2.6s infinite alternate, vozc-chispa 11s ease-in-out 2.6s infinite; }
.vozc-aurora b:nth-of-type(7){  left:60%; bottom:42%; --luz:var(--luz-3); animation:vozc-deriva1 18s ease-in-out 6.3s infinite alternate, vozc-chispa 8.8s ease-in-out 6.3s infinite; }
.vozc-aurora b:nth-of-type(8){  left:68%; bottom:66%; scale:1.3; animation:vozc-deriva2 26s ease-in-out 4.2s infinite alternate, vozc-chispa 9.6s ease-in-out 4.2s infinite; }
.vozc-aurora b:nth-of-type(9){  left:76%; bottom:52%; animation:vozc-deriva3 21s ease-in-out 1.2s infinite alternate, vozc-chispa 7.2s ease-in-out 1.2s infinite; }
.vozc-aurora b:nth-of-type(10){ left:84%; bottom:76%; --luz:var(--luz-2); animation:vozc-deriva1 24s ease-in-out 7.4s infinite alternate, vozc-chispa 10.2s ease-in-out 7.4s infinite; }
.vozc-aurora b:nth-of-type(11){ left:91%; bottom:46%; animation:vozc-deriva2 19s ease-in-out 3.9s infinite alternate, vozc-chispa 8.5s ease-in-out 3.9s infinite; }
.vozc-aurora b:nth-of-type(12){ left:13%; bottom:84%; scale:.75; animation:vozc-deriva3 27s ease-in-out 5.7s infinite alternate, vozc-chispa 12s ease-in-out 5.7s infinite; }
/* La deriva va en `transform` y el parpadeo en `opacity`, separados a proposito: dos animaciones
   sobre la MISMA propiedad no se suman, gana la ultima y la otra se pierde en silencio. */
@keyframes vozc-deriva1{ from{ transform:translate3d(0,0,0); }  to{ transform:translate3d(14px,-34px,0); } }
@keyframes vozc-deriva2{ from{ transform:translate3d(0,0,0); }  to{ transform:translate3d(-18px,-26px,0); } }
@keyframes vozc-deriva3{ from{ transform:translate3d(0,0,0); }  to{ transform:translate3d(8px,-46px,0); } }
/* Ninguna comparte duracion ni retraso con otra: si coincidieran se leeria como una luz que
   prende y apaga todo junto, no como bichos. */
@keyframes vozc-chispa{ 0%,100%{ opacity:0; } 14%{ opacity:.95; } 38%{ opacity:.12; } 62%{ opacity:.8; } 86%{ opacity:.06; } }
@media (prefers-reduced-motion: reduce){ .vozc-aurora i{ animation:none; scale:1; opacity:.8; } .vozc-aurora b{ animation:none; } }
/* La franja de controles. Mientras conversas, el composer deja de ser una caja de escribir:
   se esconden sus hijos (el turno entra por la voz) y queda a lo ancho de la columna. */
#chat-composer.vozc-on{ position:relative; z-index:1; display:block; padding:6px 4px;
  background:transparent; border-color:transparent; box-shadow:none; }
#chat-composer.vozc-on > *:not(.vozc-barra){ display:none; }
.vozc-barra{ position:relative; display:flex; flex-direction:column; gap:12px; padding:14px 16px 16px; background:transparent; }
/* EL HORIZONTE: la luz no MUERE en la franja, NACE ahi. Un arco bajo y ancho justo encima del
   texto, hecho con los colores de la propia aurora, que crece y brilla con la voz. Es el que
   hace que se sienta que Xarpie te esta oyendo: antes la luz vivia arriba, lejos, y aqui abajo
   no pasaba nada. Cuelga de `bottom:100%` para SEGUIR a la franja: si crece (un telefono, un
   texto que se va a dos renglones) el arco sube con ella en vez de quedar detras del texto. */
.vozc-barra::after{ content:""; position:absolute; left:0; right:0; bottom:100%; height:170px; z-index:0;
  pointer-events:none; filter:blur(20px);
  opacity:calc(var(--aurora-fuerza) * (.4 + .6 * var(--vozc-nivel, 0)));
  transition:opacity 420ms var(--curva-cambia);
  background:radial-gradient(58% 120% at 50% 100%,
    color-mix(in srgb, var(--aurora-1) 72%, transparent) 0%,
    color-mix(in srgb, var(--aurora-4) 46%, transparent) 46%,
    color-mix(in srgb, var(--aurora-2) 22%, transparent) 68%, transparent 82%); }
/* EL VELO. Antes era `.vozc-barra::before` con `inset:-40px -20px -10px`: un rectangulo que se
   salia 20 px de la columna por cada lado y cortaba en seco arriba, a los lados y abajo. Sobre
   una aurora encendida eso no se lee como un velo, se lee como una caja negra con borde (lo vio
   Daniel en produccion el 2026-09-22). Ahora es HERMANO del composer, como la aurora, que es lo
   unico que permite medir la columna entera sin insets negativos; y es una elipse anclada abajo
   al centro: solida bajo el texto y curvandose hacia afuera conforme sube, sin una sola orilla
   recta. El unico borde que le queda es el de abajo, que es el borde de la pantalla. */
/* LA LINEA DE ARRIBA, y por que hace falta la mascara (2026-09-23, Daniel la vio en produccion).
   Un degradado radial NO llega a transparente donde uno cree: con la elipse centrada en 108% y
   un radio vertical de 130%, el borde de ARRIBA de la caja cae al 83% del degradado, y al 83%
   todavia pinta un 22% del color de pagina. Arriba de la caja no hay nada, asi que ese 22% que
   se corta de golpe es una raya recta cruzando la aurora: exactamente lo que el velo venia a
   evitar. La elipse se queda porque es la que curva las orillas; lo que garantiza que arriba
   valga CERO es la mascara, que no depende de afinar ningun numero del degradado. */
.vozc-velo{ position:absolute; left:0; right:0; bottom:0; height:320px; z-index:0; pointer-events:none;
  background:radial-gradient(140% 120% at 50% 100%,
    var(--pag) 0%,
    color-mix(in srgb, var(--pag) 88%, transparent) 34%,
    color-mix(in srgb, var(--pag) 52%, transparent) 58%,
    color-mix(in srgb, var(--pag) 18%, transparent) 78%, transparent 92%);
  /* Solido hasta 122 px (los 110 px de la franja, donde vive el texto) y despues 200 px de
     desvanecido. En una mascara el color no pinta, solo cuenta su opacidad: por eso `black`. */
  -webkit-mask-image:linear-gradient(to top, black 0%, black 38%, transparent 100%);
  mask-image:linear-gradient(to top, black 0%, black 38%, transparent 100%); }
.vozc-alto{ position:relative; z-index:1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
/* El par se CENTRA y el boton grande tiene tope. Estirado a lo ancho de una columna de 800 px
   era una loza, y "Salir" quedaba como texto suelto a un lado: dos especies distintas. Mismo
   alto, misma pildora, mismo relleno discreto, y se leen como un par. */
.vozc-fila{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; }
.vozc-vive{ min-width:0; font-size:var(--t-campo); font-weight:500; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* --punto a 12 px daba 3.3:1 contra la pagina, debajo del minimo legible de 4.5. */
.vozc-pie{ margin:0; flex:0 0 auto; font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vozc-accion{ flex:1 1 auto; max-width:320px; min-height:48px; padding:13px 24px; border:0; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
/* Mientras Xarpie piensa no hay nada que tocar, pero el hueco se RESERVA. Con `hidden` el boton
   salia del acomodo y "Salir" brincaba de la derecha al centro y regresaba en CADA turno. */
.vozc-barra[data-estado="mandando"] .vozc-accion{ visibility:hidden; }
.vozc-barra[data-estado="contestando"] .vozc-accion{ background:var(--piedra); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--piedra-on); }
.vozc-salir{ flex:0 0 auto; min-height:48px; border:0; background:color-mix(in srgb, var(--tinta) 10%, transparent); color:var(--texto); font:inherit; font-size:var(--t-texto); padding:13px 20px; cursor:pointer; border-radius:var(--r-pildora); }