/* ============================================================================
   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: el icono cambia en 120 ms (lienzo v19). */
#chat-send.detener{ position:relative; background:var(--boton); color:var(--boton-t); }
#chat-send.detener svg{ opacity:0; }
#chat-send.detener::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:2px; background:currentColor; }
#chat-send svg{ transition:opacity var(--d-toque) var(--curva-cambia); }

: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; } }

/* >>> 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] .mc-listhead{ 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). */
:root[data-theme] :is(.cf-seg button.on, .cf-seg2 button.on, .cf-btn.accent, .cf-mid.today, .cf-mnum.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:820px; 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; }
: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); } }

/* "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; }
: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); }