/* ============================================================================
   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;
  --t-saludo-carta:44px;   /* el saludo de la carta de entrada (lienzo «A+», 12 nov 2026); 36 px en telefono, ver LA CARTA DE ENTRADA */
  --t-cifra-carta:48px;    /* los numeros de esa carta; 40 px en telefono */
  --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);
  /* El COLOR de un AREA del CRM (Inicio v3, botones principales; plan PLAN-inicio-v3-2026-10, decision 21; Daniel, 5 oct: «agreguemos tambien color a los iconos»). Cinco matices con la misma luz y el mismo croma dentro de
     cada tema (OKLCH), uno por area: ambar, rosa, salvia, azul y violeta. Dice A QUE AREA PERTENECE un boton y nada mas: nunca es rojo (--urge, la urgencia) ni almagre (Xarpie), nunca es lo unico que distingue a un
     boton (el nombre y el dibujo ya lo dicen) y no se usa en ninguna otra parte (el ambar y la salvia se parecen a un aviso y a un «ok»). Profundos sobre marfil en claro (5,5 a 6,1 contra --piedra) y claros sobre
     grafito en oscuro (8,5 a 9,1). Solo vive en el CRM del equipo: ni el portal ni lo del fotografo (acento, letra y fondo son del estudio). paridad-inicio-botones los vigila. */
  --area-galerias:#865812; --area-eventos:#8E4969; --area-clientes:#367341; --area-calendario:#1B6A95; --area-documentos:#655897;
  --area-trabajos:#007472; --area-edicion:#007472; --area-finanzas:#696713; --cons-tono:#4B5AA8; --cons-a:#367341; --cons-b:#8E4969; --cons-c:#865812; --cons-d:#1B6A95;   /* los dos botones de un negocio sin fotos (plan PLAN-inicio-business): turquesa y oliva, misma luz y croma que los cinco; 5,4 y 5,7 contra --piedra */
  --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));
  /* La intencion de un menu que se abre al pasar el mouse (plan inicio-carta T3, D10): quieto 300 ms para abrir (cruzar camino a otra cosa no abre nada) y 500 ms de
     gracia para cerrar (bajar en diagonal hacia el menu no lo cierra). No son movimiento: no se escalan con --lento. Los mismos en la barra (nav-puerta-menu.js) y las tarjetas. */
  --d-intencion:300ms; --d-gracia:500ms;
  --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);
}
/* El editor de galeria (.edg) ya no es siempre oscuro (2026-10-14): sigue el tema del CRM. */
/* La «isla de noche» (.co-noche): una zona que se queda oscura aunque el CRM este en claro, por ejemplo el mapa de la Constelacion (public/constelacion.css). Mismos
   tokens que el tema oscuro; el marco de la app no cambia. */
:root[data-theme="dark"], .co-noche{
  --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);
  --area-galerias:#DBAE76; --area-eventos:#E5A0BD; --area-clientes:#90C897; --area-calendario:#7FC0EA; --area-documentos:#B8ADED;   /* el color de un area, claros sobre grafito (ver el bloque claro) */
  --area-trabajos:#6CCAC6; --area-edicion:#6CCAC6; --area-finanzas:#BDBC77; --cons-tono:#A3B0F0; --cons-a:#90C897; --cons-b:#E5A0BD; --cons-c:#DBAE76; --cons-d:#7FC0EA;
  --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); }

/* El margen de los lados de la fila de pestanas grandes (el resto vive en widgets-inicio.css, junto a .ba): el mismo que la pagina en cada ancho de ventana. */
:root[data-theme] .subtabs.subtabs-grandes{ padding-inline:var(--e-4); }
@media (min-width:861px){ :root[data-theme] .subtabs.subtabs-grandes{ padding-inline:var(--e-6); } }
/* El Menu del telefono con puertas (telMenuAbrir): las pestanas de cada puerta, debajo de su renglon. Pildora = se toca. */
.tel-subs{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-2); padding:0 var(--e-3) var(--e-2) var(--e-5); }
.tel-sub{ min-height:36px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.tel-sub:active{ background:var(--tinte-toque); }
.tel-sub.off{ display:inline-flex; align-items:center; cursor:default; opacity:.55; }

/* 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; }
/* El menu de una puerta de la barra (plan inicio-carta T3, public/nav-puerta-menu.js): el mismo de siempre, que crece desde la puerta de la que cuelga. Sus renglones
   son enlaces: sin subrayado y a todo lo ancho. Abierto con el teclado no se anima. La pestana que aun no existe va apagada, como en la tarjeta del Inicio. */
:root[data-theme] .nav-puerta-menu{ transform-origin:top left; }
:root[data-theme] .nav-puerta-menu.sin-anim{ animation:none; }
:root[data-theme] .nav-puerta-menu .um-item{ display:flex; align-items:center; text-decoration:none; }
:root[data-theme] .nav-puerta-menu .um-item.off{ color:var(--medio); opacity:.55; cursor:default; }
@media (hover:hover){ :root[data-theme] .nav-puerta-menu .um-item.off:hover{ background:none; color:var(--medio); } }
: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 y liso
     (sin papel punteado ni grano desde el 2026-10-13). 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);
    border-right:0;
  }
  /* 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);
  }
  html.co-sin-chat body.nav-lat-on #tel-fila-xa{ display:none; }
  /* Chat plegado (superficies de trabajo como el editor de contrato): la columna mide 0 pero la fila
     fija seguia pintando "Chats" desbordada encima de la miga del CRM. */
  :root[data-theme] body.nav-lat-on #app.chat-colapsado #tel-fila-xa{ display:none; }
  /* La puerta de vuelta al CRM ("El Foco ›", el nombre de la seccion a la que vuelves) solo
     tiene sentido cuando el CRM no se ve: con las dos columnas a la vista sobra, porque el CRM
     esta ahi al lado. Hasta el 2026-09-17 se escondia SIEMPRE en escritorio, asi que en "solo
     Xarpie" no quedaba ninguna salida visible -- solo el selector de vista de 30 px, que ademas
     estaba tapado (ver la regla de .cp-riel-der aqui abajo). Se noto cuando el boton nuevo de
     Xarpie hizo que se llegara ahi de verdad. */
  :root[data-theme] body.nav-lat-on #tel-a-crm{ display:none; }
  :root[data-theme] body.nav-lat-on #app.crm-colapsado #tel-a-crm{ display:inline-flex; }
  /* Esta fila es fixed y del ancho de la columna del chat. En "solo Xarpie" esa columna llega
     hasta el borde, o sea que pasaba POR ENCIMA de buscar, campana, plan, engrane y el selector
     de vista: medido con elementFromPoint, los cinco devolvian #tel-fila-xa. El grupo sube por
     encima (el fondo de la fila sigue corrido hasta el borde, asi no hay costura) y la fila le
     deja su hueco para que la puerta al CRM no caiga debajo. --co-nav-der lo mide montarMarcoChat. */
  :root[data-theme] body.nav-lat-on .cp-riel-der{ position:relative; z-index:63; }
  :root[data-theme] body.nav-lat-on #app.crm-colapsado #tel-fila-xa{ padding-right:calc(var(--co-nav-der, 280px) + var(--e-2)); }
  :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib){
    display:inline-flex; align-items:center; justify-content:center; gap:2px; height:40px; border:0; border-radius:var(--r-pildora);
    background:transparent; color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer;
  }
  :root[data-theme] body.nav-lat-on .tel-ib{ width:40px; padding:0; }
  :root[data-theme] body.nav-lat-on .tel-ib[hidden]{ display:none; }
  :root[data-theme] body.nav-lat-on .tel-nav{ padding:0 12px 0 4px; }
  :root[data-theme] body.nav-lat-on #tc-a-xarpie{ padding:0 4px 0 12px; }
  :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib) .ico{ width:18px; height:18px; stroke-width:1.5; }
  @media (hover:hover){ :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib):hover{ color:var(--tinta); background:var(--tinte-toque); } }
  :root[data-theme] body.nav-lat-on :is(.tel-nav, .tel-ib):active{ transform:scale(.97); }
  .tel-flex{ flex:1 1 auto; }

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

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

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

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

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

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

/* Flujo del chat, F5 (lienzo "Flujo del chat de Xarpie", tableros D opcion B y E). */
/* D. Primera pantalla: tres ideas para pedirle. Desde el plan inicio-carta T1 (D17, lienzo 6b y 6d) ya no son frases subrayadas dentro de la bienvenida
   (parecian enlaces que llevan a otro lado): son pildoras en su hueco, #xb-ideas, justo sobre la caja, y solo en la bienvenida (al escribir, el chat sale
   del modo y se van). En escritorio envuelven; en el telefono se deslizan en un renglon: dos renglones de pildoras le comen la pantalla a la conversacion.
   Un .xb-bloque es flex, asi que su [hidden] hay que devolverselo. */
:root[data-theme] .xb-bloque[hidden]{ display:none; }
:root[data-theme] .chatpane > .xb-ideas{ display:none; }
/* «Hablando de Ana y Luis ×» (plan inicio-carta T12a, tablero 6f): pildora junto a la caja, con el icono y el matiz de la seccion de esa ficha.
   El matiz (--cv-area) lo pone widgets-inicio.css por data-area: los --area-* viven en UN solo archivo (paridad-inicio-areas). Pildora = se toca. */
/* El matiz de base, con poco peso a proposito: .chat-viendo[data-area=...] de widgets-inicio.css (mas especifico) lo cambia por el de la seccion. */
.chat-viendo{ --cv-area:var(--medio); }
:root[data-theme] .chatpane > .chat-viendo{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:32px; margin:0 0 var(--e-2); padding:0 4px 0 10px; border:0; border-radius:var(--r-pildora); background:color-mix(in srgb, var(--cv-area) 12%, transparent); color:var(--tinta); font-size:var(--t-meta); }
:root[data-theme] .chatpane > .chat-viendo[hidden]{ display:none; }
:root[data-theme] .chat-viendo .cv-ico{ flex:none; display:inline-grid; place-items:center; color:var(--cv-area); }
:root[data-theme] .chat-viendo .cv-eti{ flex:none; color:var(--medio); }
:root[data-theme] .chat-viendo .cv-nombre{ color:var(--tinta); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
:root[data-theme] .chat-viendo .cv-fijar{ margin-left:2px; }
:root[data-theme] .chat-viendo .cv-btn{ width:28px; height:28px; border-radius:var(--r-pildora); color:var(--medio); }
@media (pointer:coarse){ :root[data-theme] .chat-viendo .cv-btn{ width:36px; height:36px; } }
:root[data-theme] .chat-viendo .cv-btn:focus-visible{ outline:2px solid var(--tinta); outline-offset:1px; }
:root[data-theme] .chatpane.xb-modo > .xb-ideas:not([hidden]){ display:flex; flex-wrap:wrap; gap:var(--e-2); flex-shrink:0; margin:0 0 var(--e-2); }
:root[data-theme] .xb-frase{ min-height:44px; padding:0 var(--e-4); 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); white-space:nowrap; cursor:pointer; }
@media (hover:hover){ :root[data-theme] .xb-frase:hover{ background:var(--piedra-on); } }
:root[data-theme] .xb-frase:focus-visible{ outline:2px solid var(--punto); outline-offset:2px; }
@media (max-width:860px){
  :root[data-theme] .chatpane.xb-modo > .xb-ideas:not([hidden]){ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
}
/* E. El «siguiente paso» debajo de la respuesta que lo motivo (mismo sangrado que .xarpieabrir, para alinear con la burbuja). */
:root[data-theme] .xarpie-sig{ flex:0 0 100%; min-width:0; margin:6px 0 2px 40px; display:flex; }
/* Xarpie socio (F2): la idea debajo de la respuesta. Sin caja ni raya (filas, no tarjetas): aire arriba, una linea de contexto en --medio y la idea en --tinta. */
:root[data-theme] .xarpie-idea{ flex:0 0 calc(100% - 40px); min-width:0; margin:14px 0 2px 40px; }
:root[data-theme] .xarpie-idea-rel{ font-size:var(--t-meta); color:var(--medio); margin-bottom:2px; }
:root[data-theme] .xarpie-idea-x{ margin:0; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); }
:root[data-theme] .xarpie-idea .bub-acciones{ margin-top:4px; }
:root[data-theme] .xarpie-idea-nota{ font-size:var(--t-meta); color:var(--medio); }
/* «Tu avance» (Xarpie guia, F1): puntos, «3 de 8» y una lista que se abre con un toque. Mismo molde que la tarjeta de una idea. */
:root[data-theme] .xav-pts{ display:flex; gap:6px; margin:6px 0; }
:root[data-theme] .xav-pts i{ display:block; width:14px; height:14px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--punto); }
:root[data-theme] .xav-pts i.ok{ background:var(--tinta); box-shadow:none; }
:root[data-theme] .xav-falta{ color:var(--medio); font-size:var(--t-meta); }
:root[data-theme] .xav-lista{ margin:8px 0 0; padding:0; list-style:none; }
:root[data-theme] .xav-lista li{ display:flex; align-items:center; gap:12px; min-height:44px; font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .xav-lista li.ok{ color:var(--medio); }
:root[data-theme] .xav-c{ flex:0 0 18px; width:18px; height:18px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--punto); }
:root[data-theme] .xav-lista li.ok .xav-c{ background:var(--tinta); box-shadow:none; }
:root[data-theme] .xav-go{ margin-left:auto; min-height:44px; padding:0 4px; border:0; background:none; color:var(--tinta); font:inherit; text-decoration:underline; text-decoration-color:var(--punto); text-underline-offset:3px; cursor:pointer; }
:root[data-theme] .xarpie-sig-btn{ min-height:44px; padding:0 16px; border:0; border-radius:var(--r-pildora); background:none; box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
/* E. Pulgar abajo: que salio mal, en el mismo sitio y en un toque. */
:root[data-theme] .xarpie-senal-b.on{ color:var(--tinta); }
:root[data-theme] .xarpie-motivos{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-1); margin-top:var(--e-2); }
:root[data-theme] .xarpie-motivos-t{ font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .xarpie-motivos-ops{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
:root[data-theme] .xarpie-motivo{ min-height:44px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:none; box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer; }
:root[data-theme] .xarpie-motivos-omitir{ min-height:44px; padding:0 2px; border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Por donde empezar (plan inicio-carta T1, D13, lienzo 6b y 6d): una linea en vez de «Hoy importa». En escritorio el Inicio esta al lado y la linea termina con
   «Lo demas esta en tu inicio»; en el telefono no esta al lado y la misma frase es una fila que lleva a el (sin numero: la cuenta es del Inicio). Lo elige el CSS,
   no el JS: girar la pantalla. */
:root[data-theme] .xb-bienv .xb-empieza{ max-width:46ch; color:var(--texto); }
:root[data-theme] .xb-empieza .tel-enlace{ font-weight:600; color:var(--tinta); }
:root[data-theme] .xb-tocan{ display:none; }
/* La leccion de El Rodaje (rodajeDelDia, o /rodaje): su frase de ejemplo es larga («Agenda la boda de Ana y Luis el 14 de marzo en...») y en un telefono se salia
   de la tarjeta. Una pildora que no cabe parte su texto en dos renglones; nunca corta lo que dice. */
:root[data-theme] .rod-acc .chip{ max-width:100%; height:auto; white-space:normal; text-align:left; }
@media (max-width:860px){
  :root[data-theme] .xb-resto{ display:none; }
  :root[data-theme] .xb-tocan{ display:flex; align-items:center; gap:var(--e-3); width:100%; min-height:48px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--texto); font:inherit; text-align:left; cursor:pointer; }
  :root[data-theme] .xb-tocan-t{ flex:1 1 auto; min-width:0; font-size:var(--t-texto); color:var(--tinta); }
  :root[data-theme] .xb-tocan-ver{ flex:none; font-size:var(--t-meta); color:var(--apagado); }
}

/* 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). */

/* 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{ 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 CARTA DE ENTRADA (plan PLAN-entrada-carta-con-numeros-2026-11, T1; lienzo «A+ · Carta con numeros», aprobado por Daniel el 12 nov 2026).
   Solo con la bandera ENTRADA_CARTA (src/entrada.js): #chatpane lleva .xb-carta y la bienvenida trae otro HTML (pintarBienvenidaXarpie).
   Sin la bandera ninguna de estas reglas aplica. Va ANTES del bloque CHAT-LIMPIO a proposito (ahi todo cuelga de html.chat-limpio).
   ================================================================== */
/* Arriba y no al centro: la carta empieza bajo la fila de la cara y lo que sobra queda abajo, junto a la caja. Un solo margen izquierdo: el de los mensajes. */
:root[data-theme] .chatpane.xb-carta.xb-modo #chat-msgs > .xb-bienv{ margin-top:var(--e-7); }   /* sola o con algo debajo (la leccion de El Rodaje): el margen de abajo sigue siendo el `auto` de styles.css cuando es hija unica */
:root[data-theme] .chatpane.xb-carta #chat-msgs > .xb-bienv:not([hidden]){ gap:0; padding-inline:0; }
:root[data-theme] .chatpane.xb-carta .xbc-fecha{ margin:0 0 var(--e-2); font-size:var(--t-meta); line-height:1.35; color:var(--medio); }
/* El saludo en dos renglones: el nombre es el mismo <b> de siempre, que aqui baja al suyo. */
:root[data-theme] .chatpane.xb-carta .xb-bienv .tel-saludo{ font-size:var(--t-saludo-carta); line-height:1.1; letter-spacing:-.025em; text-wrap:wrap; }
:root[data-theme] .chatpane.xb-carta .xb-bienv .tel-saludo b{ display:block; font-weight:600; }
:root[data-theme] .chatpane.xb-carta .xb-bienv .esp-chat:not([hidden]){ margin-top:var(--e-5); }
/* Los numeros (T2): hasta tres, grandes y delgados, con su medidor fino; cada uno es un boton de contenido (4 px) que abre su seccion.
   D1 (Daniel, 12 nov): solo se VEN cuando el Inicio no esta a la vista (telefono, o el chat solo en escritorio: #app.crm-colapsado); con el Inicio al
   lado los mismos numeros se verian dos veces. Van siempre en el HTML y aqui se elige, como .xb-resto / .xb-tocan: girar o plegar no deja la variante equivocada. */
:root[data-theme] .xbc-nums{ --xbc-pista:color-mix(in srgb, var(--tinta) 20%, transparent); display:none; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-2); margin:var(--e-5) calc(var(--e-3) * -1) 0; }
:root[data-theme] .xbc-nums[data-n="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
:root[data-theme] #app.crm-colapsado .xbc-nums{ display:grid; }
:root[data-theme] .xbc-num{ display:flex; flex-direction:column; min-width:0; padding:var(--e-3); border:0; border-radius:var(--r); background:none; color:var(--tinta); font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .xbc-num-v{ display:flex; align-items:baseline; gap:var(--e-1); min-width:0; }
:root[data-theme] .xbc-num-n{ flex:none; font-size:var(--t-cifra-carta); line-height:1.1; font-weight:400; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
:root[data-theme] .xbc-num-u{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-texto); color:var(--medio); }
/* Los medidores: 14 puntos (dos semanas; los oscuros son los dias que faltan), una linea (un porcentaje) o tramos (X de Y). Siempre 6 px de alto, tambien vacio. */
:root[data-theme] .xbc-num-m{ display:flex; align-items:center; min-height:6px; margin-top:var(--e-3); }
:root[data-theme] .xbc-m-puntos{ display:grid; grid-template-columns:repeat(14, 4px); justify-content:space-between; width:100%; max-width:108px; }
:root[data-theme] .xbc-m-puntos i{ width:4px; height:4px; border-radius:var(--r-pildora); background:var(--xbc-pista); }
:root[data-theme] .xbc-m-tramos{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:var(--e-1); width:100%; }
:root[data-theme] .xbc-m-tramos i{ height:2px; border-radius:var(--r-pildora); background:var(--xbc-pista); }
:root[data-theme] .xbc-m-puntos i.on, :root[data-theme] .xbc-m-tramos i.on{ background:var(--tinta); }
:root[data-theme] .xbc-m-barra{ display:block; width:100%; height:2px; border-radius:var(--r-pildora); background:var(--xbc-pista); }
/* `--p` (0 a 100) lo escribe xbNumerosHTML en linea, sobre este mismo nodo; aqui va su valor por omision para que la regla no dependa de un token que nadie define (paridad-anatomia, ANA-13). */
:root[data-theme] .xbc-m-barra > span{ --p:0; display:block; width:calc(var(--p) * 1%); height:100%; border-radius:inherit; background:var(--tinta); }
:root[data-theme] .xbc-num-e{ display:flex; align-items:center; gap:var(--e-1); min-width:0; margin-top:var(--e-2); font-size:var(--t-meta); line-height:1.35; color:var(--medio); }
:root[data-theme] .xbc-num-et{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .xbc-num .xb-chev{ color:var(--medio); }
@media (hover:hover){ :root[data-theme] .xbc-num:hover{ background:var(--tinte-toque); } :root[data-theme] .xbc-num:hover .xbc-num-e{ color:var(--tinta); } }
:root[data-theme] .xbc-num:focus-visible{ outline:2px solid var(--punto); outline-offset:-2px; }
@media (max-width:860px){
  :root{ --t-cifra-carta:40px; }
  :root[data-theme] .xbc-nums{ display:grid; gap:var(--e-1); margin-inline:calc(var(--e-2) * -1); }
  :root[data-theme] .xbc-num{ padding:var(--e-2); }
  :root[data-theme] .xbc-num-u{ font-size:var(--t-meta); }
  /* En el telefono la columna es angosta: el nombre de la boda puede ocupar dos renglones antes de cortarse. */
  :root[data-theme] .xbc-num-e{ align-items:flex-start; }
  :root[data-theme] .xbc-num-et{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}
/* Tres renglones iguales: contenido (4 px), sin cajas ni rayas. El margen negativo deja el texto en la columna y que el tinte al pasar el cursor respire. */
:root[data-theme] .xbc-filas{ display:flex; flex-direction:column; gap:var(--e-1); margin:var(--e-6) calc(var(--e-3) * -1) 0; }
:root[data-theme] .chatpane.xb-carta .xb-bienv .xb-empieza{ max-width:none; }
:root[data-theme] .xbc-fila{ display:flex; align-items:center; gap:var(--e-4); width:100%; box-sizing:border-box; min-height:64px; padding:0 var(--e-3); border:0; border-radius:var(--r); background:none; color:var(--tinta); font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .xbc-ico{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--medio); }
/* Por donde empezar es el unico con relleno: un punto oscuro con su flecha. */
:root[data-theme] .xbc-punto{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-pildora); background:var(--boton); color:var(--boton-t); }
:root[data-theme] .xbc-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
/* La etiqueta y, al otro extremo de su mismo renglon, la hora («Hace 6 min»): el titulo de abajo se queda con todo el ancho. */
:root[data-theme] .xbc-eti{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-2); font-size:var(--t-meta); line-height:1.35; color:var(--medio); }
:root[data-theme] .xbc-t{ font-size:var(--t-campo); line-height:1.35; font-weight:500; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme] .xb-empieza .xbc-t{ font-weight:600; }
:root[data-theme] .xbc-meta{ flex:none; font-variant-numeric:tabular-nums; }
@media (hover:hover){ :root[data-theme] .xbc-fila:hover{ background:var(--tinte-toque); } }
:root[data-theme] .xbc-fila:focus-visible{ outline:2px solid var(--punto); outline-offset:-2px; }
/* «Lo demas esta en tu inicio»: alineado con el texto de los renglones (32 px del icono mas su separacion). En telefono es la fila de siempre (.xb-tocan). */
:root[data-theme] .chatpane.xb-carta .xb-bienv .xbc-resto{ margin:var(--e-5) 0 0 calc(32px + var(--e-4)); max-width:none; font-size:var(--t-texto); line-height:1.45; color:var(--medio); }
/* «Todo en orden por hoy» (El Foco vacio): con o sin renglones encima, se separa igual. */
:root[data-theme] .chatpane.xb-carta .xb-bienv > .tel-linea:not(.xbc-resto){ margin-top:var(--e-5); }
@media (max-width:860px){
  :root{ --t-saludo-carta:36px; }
  :root[data-theme] .chatpane.xb-carta.xb-modo #chat-msgs > .xb-bienv{ margin-top:var(--e-5); }
  :root[data-theme] .chatpane.xb-carta .xb-bienv .xb-tocan{ margin-top:var(--e-4); }
  :root[data-theme] .xbc-filas{ margin-top:var(--e-5); }
  :root[data-theme] .xbc-fila{ gap:var(--e-3); min-height:60px; }
  /* En telefono la hora va pegada a la etiqueta: «Seguir con · Hace 29 min» (lienzo «A+ en telefono»). */
  :root[data-theme] .xbc-eti{ justify-content:flex-start; gap:var(--e-1); }
  :root[data-theme] .xbc-meta::before{ content:"\00B7"; margin-right:var(--e-1); }
}
/* ---- El movimiento de la carta (T3; lienzo «A+», 12 nov 2026) ----
   UNA vez por carga: la clase .xb-entra la pone pintarBienvenidaXarpie en la primera pintada (nunca si se llego con el teclado) y la quita al terminar
   (XB_CARTA_ENTRADA_MS) o al primer repintado. En orden: la fecha, el saludo y el nombre, los numeros y sus medidores, los renglones, «lo demas», y al
   final un toque en la flecha de «Empieza por aqui». Despues todo queda quieto.
   Solo transform, opacity y box-shadow: ni filtros ni nada atado al scroll (una galeria grande se cayo en iPhone por animaciones atadas al scroll).
   Los tiempos son dos tokens y multiplos de un paso; con «reducir movimiento» todo es un fundido corto, a la vez, y la flecha no se mueve. */
:root{ --d-carta:calc(480ms * var(--lento)); --d-carta-paso:calc(70ms * var(--lento)); }
@keyframes xbc-crece{ from{ transform:scaleX(0); } to{ transform:none; } }
@keyframes xbc-toque{ 0%, 100%{ transform:none; } 50%{ transform:translateX(4px); } }
@keyframes xbc-anillo{ from{ box-shadow:0 0 0 0 color-mix(in srgb, var(--boton) 28%, transparent); } to{ box-shadow:0 0 0 12px transparent; } }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-fecha{ animation:co-fundido var(--d-carta) var(--curva-cambia) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .tel-saludo{ animation:xb-entro var(--d-carta) var(--curva-entra) var(--d-carta-paso) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .tel-saludo b{ animation:xb-entro var(--d-carta) var(--curva-entra) calc(var(--d-carta-paso) * 2) both; }
/* Las dos franjas no entran enteras (lo harian con el .xb-b2 de la bienvenida de antes): cada numero y cada renglon entra por su cuenta. */
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra :is(.xbc-nums, .xbc-filas){ animation:none; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-num{ animation:xb-entro var(--d-carta) var(--curva-entra) calc(var(--d-carta-paso) * 4) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-num:nth-child(2){ animation-delay:calc(var(--d-carta-paso) * 5); }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-num:nth-child(3){ animation-delay:calc(var(--d-carta-paso) * 6); }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-filas > *{ animation:xb-entro var(--d-carta) var(--curva-entra) calc(var(--d-carta-paso) * 7) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-filas > :nth-child(2){ animation-delay:calc(var(--d-carta-paso) * 8); }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-filas > :nth-child(3){ animation-delay:calc(var(--d-carta-paso) * 9); }
/* Los medidores: la linea crece desde la izquierda; los puntos y los tramos aparecen (escalarlos los deformaria). */
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-m-barra > span{ transform-origin:left center; animation:xbc-crece calc(var(--d-carta) * 1.6) var(--curva-entra) calc(var(--d-carta-paso) * 9) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra :is(.xbc-m-puntos, .xbc-m-tramos){ animation:co-fundido var(--d-carta) var(--curva-cambia) calc(var(--d-carta-paso) * 9) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra :is(.xbc-resto, .xb-tocan, .tel-linea.xb-b2){ animation:co-fundido var(--d-carta) var(--curva-cambia) calc(var(--d-carta-paso) * 11) both; }
/* Al final, por donde empezar: un anillo que se abre y la flecha que da un paso. Una vez. */
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-punto{ animation:xbc-anillo calc(var(--d-carta) * 1.8) var(--curva-entra) calc(var(--d-carta-paso) * 18) both; }
:root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra .xbc-punto svg{ animation:xbc-toque var(--d-carta) var(--curva-cambia) calc(var(--d-carta-paso) * 18) both; }
@media (prefers-reduced-motion:reduce){
  /* El :nth-child(n) casa con todo y solo sube el peso: sin el, los retrasos escalonados de arriba (que llevan su propio :nth-child) le ganarian. */
  :root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra :is(.xbc-fecha, .tel-saludo, .tel-saludo b, .xbc-num, .xbc-filas > *, .xbc-resto, .xb-tocan, .tel-linea, .xbc-m-barra > span, .xbc-m-puntos, .xbc-m-tramos):nth-child(n){ animation:co-fundido var(--d-toque) linear both; }
  :root[data-theme] .chatpane.xb-carta .xb-bienv.xb-entra :is(.xbc-punto, .xbc-punto svg){ animation:none; }
}

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

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

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

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

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

/* --- Companero "tareas de hoy" (a-48 pieza 2): reusa .riel-cal/.diaria del riel de "solo
   chat" (public/index.html), adoptados por sincDiaria() en app.js. Desde F1 vive DENTRO del
   bloque tareas_hoy (inicio-libre.js) como cualquier otro bloque de `.ini-principal` -- se
   puede mover o quitar igual que los demas, asi que ya no hay una fila de PAGINA aparte para
   el: `.ini-top` es su envoltorio INTERNO (calendario arriba via #ini-cal-casa, tareas debajo,
   mismo orden en cualquier ancho -- sin `order` ni container query decidiendo quien va
   primero, es simple orden de DOM). */
:root[data-theme] .main > #view:has(.ini){ container-type:inline-size; container-name:ini-pagina; }
:root[data-theme] .ini-top{ display:flex; flex-direction:column; gap:var(--e-5); min-width:0; }
:root[data-theme] .ini-cal-casa:empty{ display:none; }
/* --- El mini calendario (a-84, 2026-09-29, pedido directo de Daniel, propuesta B del lienzo): la SEMANA en primer plano, con su
   agenda por dias, y "Ver el mes" para el mes entero. UNA pieza (public/calendario-semana.js) para el Inicio (#riel-cal, adentro de
   #ini-cal-casa) y para el widget "Calendario". Reemplaza a las reglas .mc-* de antes (marcas de 9 px, "+N", semana en banda...).
   Solo tokens. Forma de Cuarto Oscuro: pildora = se toca (el dia de la tira mide 44 px de ancho como minimo), 16 px = flota (el dia
   elegido del mes), 4 px = contenido. El almagre (--urge) vive SOLO en el numero de un dia atrasado: un solo rojo (a-73). Nada se
   anima: un dia se toca cien veces al dia. */
:root[data-theme] .cs{ container-type:inline-size; container-name:cs; display:block; max-width:720px; color:var(--tinta); font-size:var(--t-texto); line-height:20px; }
:root[data-theme] .cs.cs-widget{ max-width:none; }
:root[data-theme] .cs-cab{ display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; column-gap:var(--e-1); margin:0 0 var(--e-3); }
/* Las flechas van junto al titulo y NO en el extremo derecho: el asa y el menu ··· de cada bloque del Inicio viven en la esquina de arriba
   a la derecha (siempre a la vista en pantalla tactil) y unas flechas ahi quedaban tapadas. El titulo tiene un ancho minimo para que las
   flechas no se corran de sitio entre "Esta semana" y "Proxima semana": se tocan varias veces seguidas. */
:root[data-theme] .cs-mes{ grid-column:1; min-width:7.5em; white-space:nowrap; font-size:var(--t-sub); line-height:28px; font-weight:600; letter-spacing:-.01em; color:var(--tinta); }
:root[data-theme] .cs-nav{ grid-column:2; display:flex; align-items:center; }
:root[data-theme] .cs-cab2{ grid-column:1 / -1; display:flex; align-items:center; gap:var(--e-3); }
:root[data-theme] .cs-sub{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .cs-flecha{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); font:inherit; font-size:var(--t-sub); line-height:1; cursor:pointer; }
:root[data-theme] .cs-hoyb{ appearance:none; box-sizing:border-box; min-height:44px; margin:0; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
@media (hover:hover){
  :root[data-theme] .cs-flecha:hover{ background:var(--piedra-on); color:var(--tinta); }
}
/* La tira: siete pildoras. La letra, el numero (un circulo lleno si ese dia hay una BODA) y hasta 3 puntos (una cita o sesion cada
   uno). Las tareas no ponen marca (decision de Daniel). El dia elegido es la pildora invertida; hoy, un aro en el numero. */
:root[data-theme] .cs-tira{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
:root[data-theme] .cs-dia{ appearance:none; box-sizing:border-box; min-width:0; height:96px; margin:0; padding:10px 0 0; border:0; border-radius:var(--r-flota); background:var(--piedra); color:var(--tinta); font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
@media (hover:hover){
  :root[data-theme] .cs-dia:not(.cs-sel):hover{ background:var(--piedra-on); }
}
/* Dentro de la tarjeta del widget el fondo ya es --piedra: las pildoras suben un escalon (--piedra-on) para no desaparecer. */
:root[data-theme] .cs-widget .cs-dia:not(.cs-sel){ background-color:var(--piedra-on); }
@media (hover:hover){
  :root[data-theme] .cs-widget .cs-dia:not(.cs-sel):hover{ background-color:color-mix(in srgb, var(--tinta) 6%, var(--piedra-on)); }
}
:root[data-theme] .cs-dia.cs-sel{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .cs-l{ font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; color:var(--medio); }
:root[data-theme] .cs-dia.cs-sel .cs-l{ color:var(--boton-t); opacity:.75; }
:root[data-theme] .cs-n{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; font-size:var(--t-sub); line-height:24px; font-weight:600; font-variant-numeric:tabular-nums; color:inherit; }
:root[data-theme] .cs-pts{ display:flex; align-items:center; gap:3px; height:5px; margin-top:2px; }
:root[data-theme] .cs-pts i{ display:block; width:5px; height:5px; border-radius:50%; background:var(--medio); }
:root[data-theme] .cs-dia.cs-sel .cs-pts i{ background:var(--boton-t); }
:root[data-theme] .cs-boda .cs-n{ background:var(--tinta); color:var(--pag); }
:root[data-theme] .cs-dia.cs-sel.cs-boda .cs-n{ background:var(--boton-t); color:var(--boton); }
:root[data-theme] .cs-hoy:not(.cs-sel) .cs-n{ box-shadow:0 0 0 1.5px var(--tinta); }
/* Atrasado: el numero en almagre. Sobre una boda (circulo de tinta) o sobre la pildora invertida el almagre no se lee, asi que ahi
   el aviso cambia de forma y no de color: un aro almagre en la boda, y el numero subrayado en el dia elegido. */
:root[data-theme] .cs-atrasado .cs-n{ color:var(--urge); font-weight:700; }
:root[data-theme] .cs-boda.cs-atrasado .cs-n{ color:var(--pag); box-shadow:0 0 0 2px var(--urge); }
:root[data-theme] .cs-dia.cs-sel.cs-atrasado .cs-n{ color:var(--boton-t); text-decoration:underline; text-underline-offset:3px; }
:root[data-theme] .cs-dia.cs-sel.cs-boda.cs-atrasado .cs-n{ color:var(--boton); box-shadow:0 0 0 2px var(--boton-t); text-decoration:none; }
/* En la semana la boda no es un circulo: el numero queda liso y la etiqueta la nombra. */
:root[data-theme] .cs-dia.cs-boda .cs-n{ background:transparent; color:inherit; }
:root[data-theme] .cs-dia.cs-sel.cs-boda .cs-n{ background:transparent; color:inherit; }
:root[data-theme] .cs-dia.cs-boda.cs-atrasado .cs-n{ background:transparent; color:var(--urge); box-shadow:none; }
:root[data-theme] .cs-dia.cs-sel.cs-boda.cs-atrasado .cs-n{ background:transparent; color:inherit; box-shadow:none; text-decoration:underline; text-underline-offset:3px; }
/* Semana v2 (lienzo «Enfoque de tarea», tablero 12, opcion A): el dia ya no es una pildora (con 7 columnas anchas parecia un circulo) sino un rectangulo de 16 px, con una
   barra de carga en vez de puntos y la etiqueta «Boda» en vez del circulo lleno. El mes conserva puntos y circulo. */
:root[data-theme] .cs-carga{ display:block; flex:none; width:28px; height:4px; margin-top:var(--e-2); border-radius:var(--r-pildora); background:color-mix(in srgb, var(--tinta) 12%, transparent); overflow:hidden; }
:root[data-theme] .cs-carga i{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--tinta); opacity:.75; }
:root[data-theme] .cs-carga[data-n="0"] i{ width:0; }
:root[data-theme] .cs-carga[data-n="1"] i{ width:34%; }
:root[data-theme] .cs-carga[data-n="2"] i{ width:67%; }
:root[data-theme] .cs-carga[data-n="3"] i{ width:100%; }
:root[data-theme] .cs-dia.cs-sel .cs-carga{ background:color-mix(in srgb, var(--boton-t) 25%, transparent); }
:root[data-theme] .cs-dia.cs-sel .cs-carga i{ background:var(--boton-t); }
:root[data-theme] .cs-etiq{ display:block; flex:none; margin-top:var(--e-1); padding:0 6px; border:1px solid currentColor; border-radius:var(--r-pildora); font-size:var(--t-eti); font-weight:600; line-height:14px; color:var(--tinta); }
:root[data-theme] .cs-dia.cs-sel .cs-etiq{ color:var(--boton-t); }

/* Un dia bloqueado (no disponible) se rayea; la agenda de abajo lo dice con palabras. */
:root[data-theme] .cs-dia.cs-bloq:not(.cs-sel){ background-image:repeating-linear-gradient(45deg, transparent 0, transparent 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 8px); }
:root[data-theme] .cs-cel.cs-bloq:not(.cs-sel){ background-image:repeating-linear-gradient(45deg, transparent 0, transparent 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 8px); }
/* El mes ("Ver el mes"): la misma marca en una cuadricula. */
:root[data-theme] .cs-dow{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); margin-bottom:2px; }
:root[data-theme] .cs-dow span{ text-align:center; font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; color:var(--medio); }
:root[data-theme] .cs-rejilla{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
:root[data-theme] .cs-cel{ appearance:none; box-sizing:border-box; min-width:0; height:52px; margin:0; padding:4px 0 0; border:0; border-radius:var(--r-flota); background:none; color:var(--tinta); font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
@media (hover:hover){
  :root[data-theme] .cs-cel:not(.cs-sel):hover{ background:var(--piedra); }
}
@media (hover:hover){
  :root[data-theme] .cs-widget .cs-cel:not(.cs-sel):hover{ background:color-mix(in srgb, var(--tinta) 4%, var(--piedra)); }
}
:root[data-theme] .cs-cel .cs-n{ width:30px; height:30px; font-size:var(--t-texto); line-height:20px; font-weight:400; }
:root[data-theme] .cs-cel.cs-sel{ background:var(--piedra-on); }
:root[data-theme] .cs-cel.cs-fuera{ opacity:.5; }
:root[data-theme] .cs-cel.cs-boda .cs-n{ font-weight:600; }
:root[data-theme] .cs-cel.cs-hoy .cs-n{ box-shadow:0 0 0 1.5px var(--tinta); }
:root[data-theme] .cs-cel.cs-boda.cs-hoy .cs-n{ box-shadow:0 0 0 2px var(--pag), 0 0 0 3.5px var(--tinta); }
:root[data-theme] .cs-cel.cs-atrasado .cs-n{ color:var(--urge); font-weight:700; }
:root[data-theme] .cs-cel.cs-boda.cs-atrasado .cs-n{ color:var(--pag); box-shadow:0 0 0 2px var(--urge); }
/* La agenda por dias: hora, icono, titulo y, debajo, el cliente. Un dia sin nada dice "Libre"; uno bloqueado, "No disponible". */
:root[data-theme] .cs-agenda{ margin-top:var(--e-4); }
:root[data-theme] .cs-grupo{ margin-top:var(--e-5); }
:root[data-theme] .cs-grupo:first-child{ margin-top:0; }
:root[data-theme] .cs-gh{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); margin:0 0 2px; }
:root[data-theme] .cs-eti{ margin:0; font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .cs-nota{ font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .cs-fila{ appearance:none; box-sizing:border-box; display:flex; align-items:flex-start; gap:var(--e-3); width:100%; min-height:44px; margin:0; padding:8px 0; border:0; background:none; color:var(--tinta); font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .cs-hr{ flex:none; width:44px; color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .cs-ic{ display:block; flex:none; width:16px; height:16px; margin-top:2px; color:var(--tinta); }
:root[data-theme] .cs-ic svg{ display:block; }
:root[data-theme] .cs-hueco{ display:block; flex:none; box-sizing:border-box; width:14px; height:14px; margin-top:3px; border:1.5px solid var(--medio); border-radius:50%; }
:root[data-theme] .cs-q{ display:block; flex:1; min-width:0; }
:root[data-theme] .cs-ti{ display:block; overflow-wrap:anywhere; }
:root[data-theme] .cs-fuerte .cs-ti{ font-weight:600; }
:root[data-theme] .cs-q small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-meta); line-height:16px; color:var(--medio); }
:root[data-theme] .cs-hecha :is(.cs-ti, .cs-hr, .cs-ic){ color:var(--apagado); }
:root[data-theme] .cs-mas{ appearance:none; min-height:44px; margin:0; padding:0 0 0 calc(44px + var(--e-3)); border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
:root[data-theme] .cs-pista{ margin:var(--e-4) 0 0; color:var(--medio); }
:root[data-theme] .cs-pie{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); margin-top:var(--e-4); }
:root[data-theme] .cs-txt{ appearance:none; min-height:44px; margin:0; padding:0 4px; border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
:root[data-theme] .cs-nuevo{ appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--e-2); min-height:44px; margin:0; padding:0 var(--e-4); border:1px solid var(--linea); border-radius:var(--r-pildora); background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); font-weight:500; cursor:pointer; }
/* En el widget la tarjeta tiene alto propio: la agenda se desplaza por dentro (grande, mas alta) en vez de estirar la tarjeta. */
:root[data-theme] .cs-widget.cs-mediano .cs-agenda{ max-height:240px; overflow-y:auto; overscroll-behavior:contain; }
:root[data-theme] .cs-widget.cs-grande .cs-agenda{ max-height:420px; overflow-y:auto; overscroll-behavior:contain; }
/* Angosto (una tarjeta chica, o el telefono): la pildora baja a 88 px y el numero a 30. Se mide la pieza, no la ventana: una tarjeta
   angosta en una ventana ancha necesita lo mismo (la trampa de siempre: un componente hereda el ancho de su COLUMNA). */
@container cs (max-width:380px){
  :root[data-theme] .cs-tira{ gap:4px; }
  :root[data-theme] .cs-dia{ height:88px; padding-top:8px; }
  :root[data-theme] .cs-dia .cs-n{ width:30px; height:30px; font-size:var(--t-campo); line-height:22px; }
  :root[data-theme] .cs-hr{ width:40px; }
  :root[data-theme] .cs-mas{ padding-left:calc(40px + var(--e-3)); }
}
/* Muy angosto: el riel del modo "solo chat" mide ~208 px. Siete columnas de ~29 px no caben un circulo de 30: el numero baja a 26 (una boda
   ya no toca a sus vecinas) y la fila de la agenda no se come el ancho en la columna de la hora. */
@container cs (max-width:260px){
  /* Sin ancho para la etiqueta: la boda vuelve a ser el circulo lleno de siempre. */
  :root[data-theme] .cs-etiq{ display:none; }
  :root[data-theme] .cs-dia.cs-boda .cs-n{ background:var(--tinta); color:var(--pag); }
  :root[data-theme] .cs-dia.cs-sel.cs-boda .cs-n{ background:var(--boton-t); color:var(--boton); }
  :root[data-theme] .cs-dia .cs-n, :root[data-theme] .cs-cel .cs-n{ width:26px; height:26px; line-height:18px; font-size:var(--t-texto); }
  :root[data-theme] .cs-cel{ height:46px; }
  :root[data-theme] .cs-hr{ width:36px; }
  :root[data-theme] .cs-mas{ padding-left:calc(36px + var(--e-3)); }
  /* En esa columna lo que importa es la lista del dia que va DEBAJO (#diaria): la agenda se queda en los dos dias que siguen, no en toda
     la semana, o la lista de hoy quedaba fuera de la pantalla. */
  :root[data-theme] .cs-riel .cs-grupo:nth-child(n+3){ display:none; }
}
/* .diaria trae `display:none` de fabrica (styles.css) y solo se destapa bajo
   #app.crm-colapsado (el riel de "solo chat"): dentro del bloque del Inicio NO hay ese
   ancestro, asi que sin esta regla se quedaria invisible aunque JS ya le quito [hidden]. */
:root[data-theme] #ini-tareas-hoy .diaria:not([hidden]){ display:block; }
/* "Atrasado (N)" (2026-09-26): linea aparte arriba de la lista, mismo criterio de color que
   el resto de Cuarto Oscuro (--urge SOLO para lo que de verdad urge). [hidden] sin atrasadas. */
:root[data-theme] .ini-atrasado{ font-size:var(--t-meta); font-weight:600; color:var(--urge); }
/* La rejilla del Inicio a la medida (a-84, F1): CADA bloque que la persona acomodo, en SU
   orden -- ya no una fila fija de "mes + Hoy importa + Tu negocio". Rejilla de 6 columnas
   (mismo numero que el lienzo "Diseno" aprobado): tercio=2, mitad=3, completo=6, asi que 3
   tercios o 2 mitades llenan una fila exacta.
   El umbral se mide contra el CONTENIDO de #view, no contra `getBoundingClientRect()`: una
   consulta de contenedor usa la caja de contenido (sin el padding del propio contenedor), y
   `#view.wrap` trae 40px de padding a cada lado (medido en vivo) -- confundir las dos cajas
   ya fue un bug real en esta misma pagina, antes de F1.
   - #view < 560px: todo apilado a un ancho (telefono, mismo orden que en escritorio).
   - 560-780px: tercio se COMPORTA como mitad (2 por fila) -- un tercio de ~260px de columna
     seria ilegible.
   - >= 780px: tercio vuelve a ser tercio (3 por fila); mitad sigue siendo 2 por fila. */
:root[data-theme] .ini-principal{ display:flex; flex-direction:column; gap:var(--e-6); min-width:0; }
@container ini-pagina (min-width:560px){
  :root[data-theme] .ini-principal{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--e-6) var(--e-7); align-items:start; }
  :root[data-theme] .ini-principal > .ini-bloque{ grid-column:span 6; }
  :root[data-theme] .ini-principal > .ini-bloque[data-ancho="mitad"],
  :root[data-theme] .ini-principal > .ini-bloque[data-ancho="tercio"]{ grid-column:span 3; }
}
@container ini-pagina (min-width:780px){
  :root[data-theme] .ini-principal > .ini-bloque[data-ancho="tercio"]{ grid-column:span 2; }
}
/* Las cifras del mes, de dos en dos cuando SU columna es angosta (2026-09-26, visto por Daniel en
   produccion). La pieza (piezas.css) solo baja a 2 columnas por @media de la VENTANA (860 px), y
   con la columna companera y la rejilla de 2 bloques al lado, #ini-mes mide ~270-400 px en una
   ventana de 1600: cuatro columnas de 50 px con "$90,760" a --t-saludo encima de "Sin meta". La
   misma trampa de siempre: un componente hereda el ancho de su COLUMNA, no el de la ventana. */
:root[data-theme] #ini-mes{ container-type:inline-size; container-name:ini-mes; }
@container ini-mes (max-width:520px){
  :root[data-theme] #ini-mes .pz-cifras,
  :root[data-theme] #ini-mes .pz-cifras[data-n="3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4) var(--e-5); }
  :root[data-theme] #ini-mes .pz-cifra-v{ font-size:var(--t-titulo); }
}
/* Por TAMANO del bloque (widgets en tres tamanos, F1): el ancho que la persona le dio decide cuanto ensena. Chico: UNA cifra (la pieza ya la pone sola en su columna);
   mediano: dos por dos aunque la columna mida mas de 520 px; grande: todas en una fila (lo que ya hacia). Van con [data-ini-tam] para ganarle a la consulta de arriba. */
:root[data-theme] #ini-mes[data-ini-tam="chico"] .pz-cifras{ grid-template-columns:minmax(0, 1fr); }
:root[data-theme] #ini-mes[data-ini-tam="mediano"] .pz-cifras,
:root[data-theme] #ini-mes[data-ini-tam="mediano"] .pz-cifras[data-n="3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4) var(--e-5); }
:root[data-theme] #ini-mes[data-ini-tam="mediano"] .pz-cifra-v{ font-size:var(--t-titulo); }
/* "Tu negocio" tenia la MISMA trampa: su rejilla de 2 bloques solo bajaba a 1 columna cuando .ini
   (toda la pagina) media menos de 620 px, asi que en la media columna de ~270 px "Proximas bodas"
   quedaba en 120 px ("Valer... &..."). Ahora mira su propio ancho, con el mismo umbral. */
:root[data-theme] #ini-negocio{ container-type:inline-size; container-name:ini-negocio; }
@container ini-negocio (max-width:619px){
  :root[data-theme] #ini-negocio .ini-neg-grid{ grid-template-columns:minmax(0, 1fr); gap:var(--e-5); }
}

/* --- Marcas de dia del calendario GRANDE (a-69, 2026-09-26, contrato k-15; public/calendario.js, clases cf-*). El estado vive en la
   FORMA, el color solo avisa lo urgente (--urge): hecha = punto hueco (nunca verde: ya es el color de fabrica de una tarea, y
   verde/rojo es la peor combinacion para el daltonismo rojo-verde); dia atrasado con una tarea sin hacer = el NUMERO del dia en
   almagre, unica senal de color. El mini calendario del Inicio y el widget ya no comparten estas reglas: son las .cs-* de arriba. */
:root[data-theme] .cf-mdots .cf-dot-hueco{ width:8px; height:8px; border-radius:100px; background:transparent !important; border:1.3px solid var(--punto); box-sizing:border-box; }
:root[data-theme] .cf-mnum.atrasado{ color:var(--urge); font-weight:700; }
/* "N tareas atrasadas" abre la hoja de atrasadas (a-73 vagon 3): es un boton, se ve como uno. */
:root[data-theme] .ini-atrasado:not([hidden]){ cursor:pointer; }
/* Y lo es de verdad (un <button>: se alcanza con el teclado y el lector de pantalla dice que se toca). Se le quita lo de boton de fabrica para que siga viendose como la linea de siempre; `display:block` solo
   cuando no esta [hidden] (poner `display` sin eso lo destaparia). */
:root[data-theme] button.ini-atrasado{ margin:0; padding:0; border:0; background:none; font-family:inherit; text-align:left; }
:root[data-theme] button.ini-atrasado:not([hidden]){ display:block; }
:root[data-theme] .cf-mdots .cf-dot-punto{ width:8px; height:8px; border-radius:100px; background:var(--punto); }

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

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

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

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

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

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

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

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

/* --- Inicio v3, T3: la cabecera de la pagina y «Para ti» (plan PLAN-inicio-v3-2026-10, lienzo tableros 1 y 3). Todo cuelga de `.inicio-v3`: sin el interruptor no se aplica nada.
   La cabecera mira el ancho de `.ini` y no el de la ventana (con el chat abierto al CRM le tocan ~420 px aunque la ventana mida 1280): con menos de 560 px el titulo baja de 32 a 24.
   Desde el 5 nov 2026 el titulo es el dia («Jueves 5 de noviembre») y no el saludo, que ya dice el chat al lado: el renglon chico de la fecha que iba debajo ya no existe. --- */
:root[data-theme] .inicio-v3 .ini3-cab{ min-width:0; }
:root[data-theme] .inicio-v3 .ini3-cab-t{ margin:0; font-size:var(--t-saludo); line-height:36px; font-weight:500; letter-spacing:-.02em; color:var(--tinta); }
:root[data-theme] .inicio-v3 .ini3-cab-r{ margin:var(--e-4) 0 0; max-width:560px; font-size:var(--t-campo); line-height:24px; color:var(--texto); }
@container (max-width:559px){
  :root[data-theme] .inicio-v3 .ini3-cab-t{ font-size:var(--t-titulo); line-height:28px; }
}
/* «Para ti»: el titulo a la izquierda y, a la derecha, cuantas cosas hay y «Preparame el dia». Deja libre el lugar del asa y del ··· del bloque (56 px; 88 con el dedo: dentro de la tarjeta, desde el 7 oct; antes 64 y 96), como el titulo de «Lo siguiente».
   Si no caben en una linea (un bloque de 325 px con el dedo: el titulo se partia en «Para / ti», medido en un navegador a 375 px) el grupo de la derecha baja, alineado a la derecha, y el titulo no se parte nunca.
   El «por que» y el boton de cada fila se acomodan por el ancho del BLOQUE (no el de la ventana): con 440 px o mas el boton va en la misma linea, con menos baja debajo del texto, a la derecha y con el
   alto del dedo (el lienzo, tablero 3). */
:root[data-theme] .inicio-v3 #ini-hoy{ container-type:inline-size; container-name:ini-hoy; }
:root[data-theme] .inicio-v3 .ini-hoy-cab{ flex-wrap:wrap; row-gap:var(--e-1); padding-right:calc(var(--e-6) * 2 - var(--e-2)); }
:root[data-theme] .inicio-v3 .ini-hoy-cab .ini-eti2{ white-space:nowrap; }
:root[data-theme] .inicio-v3 .ini-hoy-acc{ margin-left:auto; align-items:center; justify-content:flex-end; }
:root[data-theme] .inicio-v3 .ini3-cuenta{ font-size:var(--t-meta); line-height:16px; color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (pointer:coarse){ :root[data-theme] .inicio-v3 .ini-hoy-cab{ padding-right:calc(var(--e-6) * 3 - var(--e-2)); } }
@container ini-hoy (max-width:439px){
  :root[data-theme] .inicio-v3 #ini-hoy .xb-fila{ flex-wrap:wrap; align-items:flex-start; padding-top:var(--e-2); padding-bottom:var(--e-2); }
  :root[data-theme] .inicio-v3 #ini-hoy .xb-fila .xb-ico{ margin-top:2px; }
  :root[data-theme] .inicio-v3 #ini-hoy .xb-fila .xb-acciones{ width:100%; justify-content:flex-end; margin-top:var(--e-1); }
  :root[data-theme] .inicio-v3 #ini-hoy .xb-acciones .foco-btn, :root[data-theme] .inicio-v3 #ini-hoy .xb-mas{ min-height:44px; }
}
/* Inicio v3 de un NEGOCIO sin fotos (plan PLAN-inicio-business-2026-10, ronda 2; lienzo «Inicio de Business mas claro», hojas «Cada fila, una sola forma» y «Despues»). Lo de abajo solo lo pinta app.js para una cuenta SIN fotos con el
   interruptor (`inicioV3Negocio`), y todo cuelga de `.inicio-v3`: el Inicio de fotografia no lo conoce.
   «Para ti»: UNA sola forma de fila. Un control de 44 px a la izquierda (el circulo de una tarea, o el icono de su tipo), el titulo, UNA linea de contexto (en rojo solo si algo ya se paso) y, si hace falta, un boton a la derecha. La fila
   NO se parte en dos renglones en un bloque angosto (la de siempre baja el boton con menos de 440 px): aqui la fila mide lo mismo en escritorio, con el chat abierto y en el telefono. Va DESPUES del bloque de T3 y con la misma especificidad
   para ganarle. El circulo es un boton de 44 px de area tactil con un aro de 20 px dibujado adentro. */
:root[data-theme] .inicio-v3 #ini-hoy .xb-fila.ini4-fila{ flex-wrap:nowrap; align-items:center; gap:0; min-height:56px; padding-top:0; padding-bottom:0; }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-ico, :root[data-theme] .inicio-v3 #ini-hoy .ini4-chk{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0; border:0; background:none; }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-chk{ cursor:pointer; border-radius:var(--r-pildora); }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-aro{ display:block; width:20px; height:20px; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 2px var(--medio); }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-chk:hover .ini4-aro{ box-shadow:inset 0 0 0 2px var(--tinta); }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-chk:disabled{ opacity:.5; cursor:default; }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-tx{ padding:var(--e-1) 0; }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* El contexto puede ocupar dos renglones a CUALQUIER ancho (antes solo con menos de 440 px de bloque): «jue 8 · 10:00 · espera hace 3 h» perdia justo el «3 h» con puntos suspensivos, y la frase de una sugerencia de Xarpie
   («Sin esto no puedo cotizarle a un lead...», 374 px en una linea) se cortaba en un bloque de 440 a 600 px (lo encontro el barrido de anchos con las dos del servidor en ingles). Una linea cortada esconde justo lo que importa; dos no cuestan nada. */
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-s{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-s.urge{ color:var(--urge); }
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-acciones{ width:auto; margin:0 0 0 var(--e-3); justify-content:flex-end; }
/* Con menos de 440 px de bloque la fila PUEDE partirse, pero solo cuando hace falta: el texto nunca baja de 140 px, un boton corto («Responder») se queda en la linea y uno que no cabe a su lado (los de texto largo: «Registrar pago»,
   «Crear mi primer paquete») baja a su propio renglon, a la derecha. Antes la fila era SIEMPRE de un renglon: en un bloque de 296 px (el de mitad con el chat abierto) «Arma tus paquetes» se quedaba con 36 px de ancho y «Tomas Acosta
   debe $900» perdia el monto en el recorte (lo encontro el barrido de anchos en Safari y en Chrome con la ventana de telefono). */
@container ini-hoy (max-width:439px){
  :root[data-theme] .inicio-v3 #ini-hoy .xb-fila.ini4-fila{ flex-wrap:wrap; padding-bottom:var(--e-1); }
  :root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-tx{ flex:1 1 140px; min-width:140px; }
  :root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-acciones{ margin-left:auto; }
}
/* El enlace de WhatsApp de un lead (`.btn-wa`, styles.css) fija el texto en blanco con !important para su fondo verde; aqui el boton es una pildora clara como las demas y el blanco quedaba ILEGIBLE en el tema claro. */
:root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-acciones .btn-wa{ color:var(--tinta) !important; }
@media (pointer:coarse){ :root[data-theme] .inicio-v3 #ini-hoy .ini4-fila .xb-acciones .foco-btn{ min-height:44px; } }
:root[data-theme] .inicio-v3 #ini-hoy .xb-mas.ini4-mas{ padding-left:calc(var(--e-3) + 44px); }
/* «Tu negocio» de un negocio: tres numeros (cobrado con su meta, por cobrar con lo vencido, ingresos de seis meses), sin filas ni botones. El ancho que decide es el del BLOQUE (con el chat abierto un bloque de mitad mide ~296 px): con 700 px o mas
   los tres en una fila; con menos, dos y los ingresos debajo a todo lo ancho; con menos de 440, uno debajo del otro. */
:root[data-theme] .inicio-v3 #ini-negocio{ container-type:inline-size; container-name:ini-neg; }
/* Cada numero es CONTENIDO de la tarjeta del bloque (7 oct, opcion C del lienzo «Tarjetas por bloque»): un cuadrito de 4 px en --piedra-on, para que un dato se distinga del siguiente sin rayas. Las pistas de las barras y del avance
   (--piedra-on) se pasan a --piedra: sobre el cuadrito del mismo tono desaparecian. */
:root[data-theme] .inicio-v3 .ini4-neg{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-3); margin-top:0; }
:root[data-theme] .inicio-v3 .ini4-n{ display:flex; flex-direction:column; gap:var(--e-1); min-width:0; padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra-on); }
:root[data-theme] .inicio-v3 .ini4-n .ini-c-sub .urge{ color:var(--urge); }
:root[data-theme] .inicio-v3 .ini4-prog{ height:6px; margin-top:var(--e-3); border-radius:var(--r-pildora); background:var(--piedra); overflow:hidden; }
:root[data-theme] .inicio-v3 .ini4-prog i{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--tinta); }
:root[data-theme] .inicio-v3 .ini4-n .ini-neg-barras{ height:48px; }
:root[data-theme] .inicio-v3 .ini4-n .ini-neg-barra:not(.on) i{ background:var(--piedra); }
@container ini-neg (max-width:699px){
  :root[data-theme] .inicio-v3 .ini4-neg{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  :root[data-theme] .inicio-v3 .ini4-ancho{ grid-column:1 / -1; }
}
@container ini-neg (max-width:439px){
  :root[data-theme] .inicio-v3 .ini4-neg{ grid-template-columns:minmax(0, 1fr); }
}
/* Inicio v3, T5 · BLOQUES PLANOS (decision 8 del plan; lienzo «Inicio v3», tablero 1). Desde el 7 oct (Daniel: «hazlo con C») la TARJETA de un bloque es el `.ini-bloque` entero (bloque de abajo, «UNA TARJETA POR BLOQUE»), asi que el
   `.widget` de adentro sigue SIN la suya: un widget del Inicio (Proximas bodas, En produccion, Galerias y cualquiera que la persona agregue con «+ Agregar bloque») pierde el fondo, el radio y el relleno de su tarjeta (dos tarjetas una dentro de
   la otra serian una caja de mas) y su cuenta pierde la pildora. Su titulo es el de los demas bloques (14 px, 500, --tinta). El asa y el ··· del bloque siguen arriba a la derecha: el encabezado les deja el mismo hueco que «Para ti»
   (56 px; 88 con el dedo, contando los 16 del relleno de la tarjeta). Solo cuelga de `.inicio-v3` (la lleva el Inicio de una cuenta con el interruptor): el Inicio de hoy, una pagina propia, el chat y la mini-ficha conservan su tarjeta de siempre. `.pendw` y `.entw`
   (pendientes y entregas) cuentan con el relleno de la tarjeta para sangrar a todo lo ancho: aqui no sangran. */
:root[data-theme] .inicio-v3 .ini-bloque-cont > .widget{ background:transparent; border-radius:0; overflow:visible; }
:root[data-theme] .inicio-v3 .ini-bloque-cont > .widget > .w-head{ padding:0 calc(var(--e-6) * 2 - var(--e-2)) 0 0; margin:0 0 var(--e-3); min-height:var(--e-4); }
:root[data-theme] .inicio-v3 .ini-bloque-cont > .widget > .w-head .w-title{ font-size:var(--t-texto); line-height:20px; font-weight:500; color:var(--tinta); }
:root[data-theme] .inicio-v3 .ini-bloque-cont > .widget > .w-head .w-count{ background:transparent; border-radius:0; padding:0; min-width:0; font-size:var(--t-meta); line-height:16px; font-weight:400; color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .inicio-v3 .ini-bloque-cont > .widget > .w-body{ padding:0; }
:root[data-theme] .inicio-v3 .ini-bloque-cont > .widget > .w-body > :is(.pendw, .entw){ margin:0; }
@media (pointer:coarse){ :root[data-theme] .inicio-v3 .ini-bloque-cont > .widget > .w-head{ padding-right:calc(var(--e-6) * 3 - var(--e-2)); } }
/* Inicio v3 · UNA TARJETA POR BLOQUE (7 oct; Daniel: «hazlo con C»; lienzo «Tarjetas por bloque», https://claude.ai/artifact/4bypWYAptySzRYog2VuYhT, opcion C). Reemplaza a «bloques planos»: con el fondo quitado, el aire entre un bloque y
   el siguiente media lo mismo que el aire entre dos filas, y «Lo siguiente» y «Para ti», lado a lado, se leian como una sola linea. La tarjeta es el `.ini-bloque` (la envoltura que pinta inicio-libre.js) y no el `.widget` de adentro: asi tambien la
   tienen «Lo siguiente», «Para ti» y «Tu negocio», que no son widgets. Los botones principales (`data-ini-id="botones"`) ya son tarjetas y se quedan como estan. Forma: 16 px = una tarjeta (--r-flota); lo de adentro sigue sin cajas ni rayas, salvo cada
   numero de «Tu negocio», que es contenido (4 px, --piedra-on). Dos tarjetas de una fila miden lo mismo (`align-items:stretch`); entre tarjetas hay 16 px y entre los botones y la primera, 32. El asa y el ··· bajan DENTRO de la tarjeta, a la altura del titulo
   (28 px con raton, 44 con el dedo; el encabezado les deja el hueco a la derecha). Todo cuelga de `.inicio-v3`: sin esa clase, una pagina propia (que pinta los mismos `.ini-bloque`) tendria tarjeta doble. */
:root[data-theme] .inicio-v3 .ini-principal{ gap:var(--e-4); align-items:stretch; }
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]){ padding:var(--e-3) var(--e-4) var(--e-4); border-radius:var(--r-flota); background:var(--piedra); }
:root[data-theme] .inicio-v3 .ini-bloque[data-ini-id="botones"]{ margin-bottom:var(--e-4); }
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) > .ini-bloque-menu{ top:var(--e-3); right:var(--e-2); }
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) > .ini-bloque-asa{ top:var(--e-3); right:calc(var(--e-2) + var(--e-6)); }
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) :is(.ini-hoy-cab, .ws-cab, .w-head){ min-height:28px; margin-bottom:var(--e-2); }
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) :is(.ini-hoy-cab > .ini-eti2, .ws-titulo, #ini-negocio > .ini-eti2){ font-size:var(--t-texto); line-height:20px; font-weight:500; color:var(--tinta); }
/* Tres bloques traen SU PROPIA tarjeta (la agenda de 14 dias `.ia`, «Cifra a elegir» y «Grafica a elegir» `.ci`): dentro de la del bloque serian una caja de mas del mismo tono y le sumarian 16 px de relleno (su titulo quedaba sangrado respecto de los demas). */
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) :is(.ia, .ib, .ci){ padding:0; border-radius:0; background:transparent; }
/* Un bloque cuyo contenido se esconde ENTERO (el «Tu negocio» de un asistente, que no ve dinero: `#ini-negocio[hidden]`) no deja una tarjeta vacia: plano era invisible, con tarjeta era una barra en blanco (lo vio la captura del asistente). */
:root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]):has(> .ini-bloque-cont > [hidden]:only-child){ display:none; }
@media (pointer:coarse){
  :root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) > .ini-bloque-asa{ right:calc(var(--e-2) + 48px); }
  :root[data-theme] .inicio-v3 .ini-bloque:not([data-ini-id="botones"]) :is(.ini-hoy-cab, .ws-cab, .w-head){ min-height:44px; }
}

/* --- 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.
   LA BARRA PARTIDA EN DOS ZONAS (2026-10-04, pedido de Daniel, lienzo https://claude.ai/artifact/Rfwjkva5EpJCCd9jEAjsC3, opcion B): vuelve a empezar donde
   termina el chat, pero ahora lleva MUCHO menos (las siete secciones y Buscar, Crear, campana y cuenta: sin Bitacora, Siguiendo, Planes ni selector de vista), asi que
   ya no se corta como el 20-sep. Sobre el chat va SU banda: «‹ Chats», «✎» y esconder el chat en los bordes y la cara de Xarpie al centro (xarpie-cara.css). */
.nav-xa, .nav-crear{ display:none; }
#xa-esconder{ display:none; }
/* El medidor de uso de IA (#xa-uso, banda del chat; 2026-11-11, pedido de Daniel): un anillo y su numero. Es un .tel-nav (la pildora transparente de la banda) mas apretado.
   [hidden] se escribe a mano: .tel-nav pone display:inline-flex y le gana al atributo (la misma trampa de .cp-navbtn[hidden]); sin esto se pintaria vacio para el asistente.
   El riel es el mismo trazo a un cuarto de fuerza, asi sigue al tema sin un color propio. Sin transicion: se ve en cada pantalla (nada se anima en lo de cien veces al dia). */
#xa-uso[hidden]{ display:none !important; }
#xa-uso{ gap:var(--e-1); padding:0 var(--e-2); font-size:var(--t-meta); font-variant-numeric:tabular-nums; }
.xa-uso-anillo{ flex:none; }
.xa-uso-riel{ stroke:currentColor; stroke-width:2.5; opacity:.25; }
.xa-uso-arco{ stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:0 100; }
#xa-uso.alto .xa-uso-arco{ stroke:var(--gold); }
#xa-uso.tope{ color:var(--urge); }
@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; }
  :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; }
  /* Las secciones que no caben pasan a «Mas» (ajustarSeccionesNav, app.js): `hidden` tiene que ganarle al display:flex del boton. */
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn[hidden]{ display:none; }
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-navmas .ico{ width:14px; height:14px; }
  @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); }
  /* La pastilla «Xarpie» se quito: la puerta es la cara (xarpie-cara.css). Esto es solo el RESPALDO: el isotipo en la esquina, con la cara apagada y el chat escondido. */
  :root[data-theme] body.nav-lat-on.menu-arriba:not(.xc-on):has(#app.chat-colapsado) .nav-xa{
    display:inline-flex; position:fixed; z-index:64; top:6px; left:10px; width:36px; height:36px; align-items:center; justify-content:center; padding:0; border:0;
    border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); cursor:pointer;
  }
  :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; }
  /* Barra apretada (ajustarSeccionesNav): «Crear» queda en el «+» antes de mandar secciones a «Mas». */
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-compacto .nav-crear:not([hidden]){ width:36px; padding:0; justify-content:center; }
  :root[data-theme] body.nav-lat-on.menu-arriba .cp-compacto .nav-crear span{ display:none; }
  /* La barra empieza donde termina el chat (--co-chat-w lo mide montarMarcoChat) y deja 56 px a la izquierda cuando el chat esta escondido: ahi vive la cara chica.
     max(): mientras el chat se pliega el relleno lo sigue, y a partir de 40 px se queda quieto en 56 (sin brinco al final). */
  :root[data-theme] body.nav-lat-on.menu-arriba #cp-riel.show{ padding-left:calc(max(var(--co-chat-w, 0px), 40px) + 16px); }
  /* "Solo Xarpie" (el chat ocupa todo): no hay zona del CRM a la que correr la barra. Las secciones quedan tapadas por la banda del chat y solo los iconos de la derecha
     se ven encima (.cp-riel-der sube a z-index 63, mas arriba). */
  :root[data-theme] body:has(#app.crm-colapsado).nav-lat-on.menu-arriba #cp-riel.show{ padding-left:16px; }
  /* La banda del chat: la fila fija de arriba (la regla de mas arriba, 48 px, con el papel de la columna). Tres zonas: «‹ Chats» a la izquierda, «✎» y esconder el chat a la derecha,
     y entre las dos la cara de Xarpie (position:fixed, xarpie-cara.css). El orden va por CSS: en telefono la fila sigue como siempre. */
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa .tel-flex{ order:1; }
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa #tel-nueva{ order:2; }
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa #xa-esconder{ order:3; display:inline-flex; }
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa #tel-a-crm{ order:4; }
  /* El medidor de uso de IA va entre el lapiz y esconder (mismo order que #xa-esconder, y antes que el en el HTML). Ahi y no al principio del grupo por dos cosas: el lapiz
     aparece y desaparece (no hay «nueva conversacion» en la bienvenida) y el medidor brincaria 42 px cada vez; y asi Tab recorre la banda en el orden en que se ve. */
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa #xa-uso{ order:3; }
  /* En esta banda vive tambien la cara de Xarpie, al centro (152 px de caja). Con el chat angosto el medidor se le metia debajo: medido a 300 px (el piso del divisor), el anillo quedaba
     tapado. Primero se va el numero (queda el anillo, y su globo dice la cifra); si ni asi cabe, el medidor se esconde y el numero sigue en engrane, Planes. Los cortes salen de la cuenta
     «media banda menos la cara (76) menos el relleno (12) >= medidor + lapiz + esconder»: 440 px de contenido con numero, 388 con solo el anillo. */
  :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa{ container-type:inline-size; }
  @container (max-width:439px){ :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa .xa-uso-num{ display:none; } }
  @container (max-width:387px){ :root[data-theme] body.nav-lat-on.menu-arriba #tel-fila-xa #xa-uso{ display:none; } }
  /* La cara de Xarpie es un circulo de vidrio que flota (xarpie-cara.css): el chat ya NO le deja un hueco arriba, su texto pasa por debajo (2026-10-05, pedido de Daniel).
     El relleno va DENTRO del desplazable (no del panel): en reposo el primer renglon queda justo bajo el circulo, y al subir el texto lo cruza sin recortarse. */
  :root[data-theme] body.nav-lat-on.menu-arriba.xc-on #chat-msgs{ padding-top:58px; }
}

/* ---------------- 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 «Siguiendo a Xarpie» (.cp-seguir) y el de la Bitacora se quitaron de la barra el 2026-10-04 (pedido de Daniel): el interruptor «Seguir a Xarpie» y la
   Bitacora de hoy viven en el menu de la cara de Xarpie (opcionesCara en app.js, xarpie-cara-menu.js). */

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

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

/* C1 "Hoja de ruta en vivo" (xarpie-hoja-ruta.js): una linea por cosa que Xarpie YA hizo, dentro
   de su propia burbuja. Sin caja ni raya en las filas normales (contenido, no tarjeta) -- mismo
   criterio que .xa-lineas; la unica caja es la de una tarjeta que espera tu OK, y esa YA es
   .xtarjeta (movida adentro, no reinventada). */
:root[data-theme] .xhr-lista{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
:root[data-theme] .xhr-fila{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; font-size:var(--t-texto); color:var(--tinta); min-height:28px; }
:root[data-theme] .xhr-fila-t{ padding-top:2px; }
:root[data-theme] .xhr-fila-t b{ font-weight:600; }
:root[data-theme] .xhr-marca{ flex:none; width:18px; text-align:center; color:var(--medio); font-size:var(--t-meta); line-height:1.7; }
:root[data-theme] .xhr-hecho .xhr-marca{ color:var(--tinta); }
:root[data-theme] .xhr-marca-ok{ color:var(--urge); }
:root[data-theme] .xhr-sigue{ color:var(--apagado); }
:root[data-theme] .xhr-sigue .xhr-fila-t{ padding-left:26px; } /* sin marca -- alinea con las filas que si tienen */
:root[data-theme] .xhr-ok{ flex-direction:column; align-items:stretch; }
:root[data-theme] .xhr-ok > .xhr-marca, :root[data-theme] .xhr-ok > .xhr-fila-t{ display:inline; }
:root[data-theme] .xhr-tarjeta-hueco:not(:empty){ margin:6px 0 2px 26px; }
:root[data-theme] .xhr-tarjeta-hueco .xtarjeta{ margin:0; }
:root[data-theme] .xhr-tira{ margin-top:6px; font-size:var(--t-meta); color:var(--medio); }
/* Plan inicio-carta T11a (lienzo «Inicio como carta», fila 9): Xarpie trabaja a la vista (public/xarpie-trabajo.js). Filas sin cajas ni rayas; los unicos
   colores con significado son --ok en la palomita y --urge en lo que fallo y en el punto de «Trabajando». El reloj usa cifras de ancho fijo para no
   bailar. Nada gira con prefers-reduced-motion, y abrir el pliegue no se anima (se usa con el teclado). */
:root[data-theme] .xtr-vivo{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
:root[data-theme] .xtr-vivo-cab{ display:flex; align-items:center; gap:8px; font-size:var(--t-meta); line-height:1.5; color:var(--tinta); }
:root[data-theme] .xtr-reloj{ color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .xtr-punto{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--urge); animation:xarpiePulso 1s ease-in-out infinite; }
:root[data-theme] .xtr-vivo-pasos, :root[data-theme] .xtr-pasos{ display:flex; flex-direction:column; gap:4px; }
:root[data-theme] .xtr-paso{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
:root[data-theme] .xtr-paso-t{ min-width:0; flex:0 1 auto; }   /* Reintentar se queda junto a su frase, no al otro lado de la burbuja */
:root[data-theme] .xtr-ok{ flex:none; width:12px; color:var(--ok); }
:root[data-theme] .xtr-ahora{ color:var(--tinta); }
:root[data-theme] .xtr-anillo{ flex:none; align-self:center; width:10px; height:10px; margin-right:2px; border-radius:50%; border:2px solid var(--linea); border-top-color:var(--urge); animation:xtr-gira calc(900ms * var(--lento)) linear infinite; }
@keyframes xtr-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ :root[data-theme] .xtr-anillo, :root[data-theme] .xtr-punto{ animation:none; } }
:root[data-theme] .xtr-plegado{ margin:0 0 4px; }
:root[data-theme] .xtr-cab{ appearance:none; border:0; background:none; padding:0; min-height:32px; display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--t-meta); line-height:1.5; color:var(--medio); text-align:left; cursor:pointer; border-radius:4px; }
@media (pointer:coarse){ :root[data-theme] .xtr-cab{ min-height:44px; } }
:root[data-theme] .xtr-cab:hover .xtr-cab-t{ color:var(--tinta); }
:root[data-theme] .xtr-cab:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
:root[data-theme] .xtr-chev{ flex:none; width:6px; height:6px; margin-left:2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
:root[data-theme] .xtr-cab[aria-expanded="true"] .xtr-chev{ transform:rotate(45deg); margin-top:-3px; }
:root[data-theme] .xtr-pasos{ padding:0 0 6px 20px; }
:root[data-theme] .xtr-solo .xtr-paso{ min-height:28px; align-items:center; }
:root[data-theme] .xtr-mal-t, :root[data-theme] .xtr-marca-mal{ color:var(--urge); font-weight:600; }
:root[data-theme] .xtr-marca-mal{ flex:none; width:12px; text-align:center; }
:root[data-theme] .xtr-paso-mal{ color:var(--tinta); }
:root[data-theme] .xtr-re{ appearance:none; border:0; background:none; padding:0 4px; min-height:28px; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (pointer:coarse){ :root[data-theme] .xtr-re{ min-height:44px; } }
.xtr-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* "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, :root[data-theme] .xa-linea-deshecha .xhr-fila-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; } }

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

/* ============================================================================
   El reporte con borrador de Xarpie (modalReporteXarpie en app.js; lienzo "Reporte con borrador de Xarpie",
   https://claude.ai/artifact/3RmDyWDc1MrsnK5CojwPRB, aprobado por Daniel el 2026-10-06).
   Solo tokens. Filas sin cajas ni rayas; la ventana flota (16 px); el campo de texto es contenido (4 px).
   El CUERPO se desplaza y el pie queda fijo: el modal mide ~824 px y una pantalla de laptop tiene 800.
   ============================================================================ */
:root[data-theme] .modal.rp-modal{ width:min(560px, 100%); max-width:100%; display:flex; flex-direction:column; overflow:hidden; }
:root[data-theme] .rp-modal .mhead, :root[data-theme] .rp-modal .mfoot{ flex:none; }
:root[data-theme] .rp-modal .mbody{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-top:var(--e-5); }
.rp-sub{ margin:var(--e-1) 0 0; font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
.rp-fila{ display:flex; flex-direction:column; gap:var(--e-2); margin-bottom:var(--e-5); }
.rp-cabeza{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); }
.rp-eti{ font-size:var(--t-meta); font-weight:500; color:var(--medio); line-height:1.2; }
.rp-nota{ font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
/* El texto del borrador SE VE como texto y se edita al tocarlo: sin caja hasta que tiene el foco. */
.rp-edit{ display:block; box-sizing:border-box; width:calc(100% + 2 * var(--e-3)); margin:calc(-1 * var(--e-2)) calc(-1 * var(--e-3)); padding:var(--e-2) var(--e-3); border:0; border-radius:var(--r); background:transparent; color:var(--texto); font:inherit; font-size:var(--t-texto); line-height:1.55; resize:none; overflow:hidden; }
.rp-edit:focus{ outline:none; background:var(--piedra-on); }
@media (hover:hover){ .rp-edit:hover{ background:var(--piedra-on); } }
.rp-idea{ box-sizing:border-box; width:100%; min-height:76px; padding:var(--e-3); border:0; border-radius:var(--r); background:var(--piedra-on); color:var(--texto); font:inherit; font-size:var(--t-campo); line-height:1.45; resize:none; }
.rp-linea{ display:flex; gap:var(--e-3); align-items:flex-start; color:var(--texto); font-size:var(--t-texto); line-height:1.55; }
.rp-linea .ico, .rp-linea svg{ flex:none; margin-top:2px; color:var(--medio); }
.rp-linea-urge{ color:var(--urge); }
.rp-sk{ height:12px; border-radius:var(--r); background:var(--piedra-on); }
.rp-sk + .rp-sk{ margin-top:var(--e-2); }
.rp-resumen{ display:flex; align-items:center; gap:var(--e-2); width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.rp-resumen b{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.rp-resumen span{ font-size:var(--t-meta); color:var(--medio); }
.rp-resumen .rp-mas{ margin-left:auto; display:flex; }
.rp-resumen[aria-expanded="true"] .rp-mas{ transform:rotate(180deg); }
.rp-lista{ display:flex; flex-direction:column; gap:var(--e-5); margin-top:var(--e-4); }
.rp-lista .rp-par{ display:flex; flex-direction:column; gap:2px; }
.rp-cod{ margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--t-meta); line-height:1.6; color:var(--medio); overflow-wrap:anywhere; }
.rp-falla{ font-size:var(--t-meta); font-weight:500; color:var(--urge); }
.rp-causa{ margin:0 0 0 calc(16px + var(--e-3)); }
.rp-txt{ margin:0; font-size:var(--t-texto); line-height:1.55; color:var(--texto); overflow-wrap:anywhere; }

/* ============================== Chat de Xarpie: que respire (2026-10-14) ============================== */
/* Pedido de Daniel: el chat se veia saturado. Dos cosas, y solo de ESCALA (nada cambia de lugar):
   1) El texto ya no corre de borde a borde: la conversacion vive en una columna centrada de
      ~44rem (unos 70 caracteres por renglon, lo comodo de leer). En una columna angosta (el
      escritorio con el CRM al lado) el tope no muerde y todo queda igual que antes.
   2) Las tarjetas (la pregunta con opciones, las lineas de "Cree la tarea") se compactan: menos
      relleno, menos aire entre opciones. El ancho de columna lo hereda cada una, no la ventana. */
:root[data-theme] .chatpane #chat-msgs > .brow,
:root[data-theme] .chatpane #chat-msgs > .xarpie-efectos{ width:100%; max-width:44rem; margin-inline:auto; box-sizing:border-box; }
:root[data-theme] .chatpane #chat-msgs > .brow-ai .bubwrap,
:root[data-theme] .chatpane #chat-msgs > .brow-ai .bub-ai{ max-width:38rem; }   /* con #chat-msgs: el chat limpio fija max-width:100% con ese id */
:root[data-theme] .chatpane .chatscroll{ gap:10px; }
:root[data-theme] .chatpane .chatscroll .brow-me + .brow-ai,
:root[data-theme] .chatpane .chatscroll .brow-ai + .brow-me{ margin-top:14px; }
:root[data-theme] .bub-ai{ line-height:1.6; }
/* La tarjeta de pregunta: mas chica, opciones mas bajas. */
:root[data-theme] .xarpiepreg{ margin-block:6px 0; padding:10px 12px; max-width:30rem; }
:root[data-theme] .xarpiepreg-q{ font-size:var(--t-texto); margin-bottom:8px; }
:root[data-theme] .xarpiepreg-ops{ gap:6px; }
:root[data-theme] .xarpiepreg-op{ padding:7px 14px; }
:root[data-theme] .xarpiepreg-et{ font-size:var(--t-texto); }
:root[data-theme] .xarpiepreg-pie{ margin-top:8px; }
/* Las lineas de "Cree la tarea ... Ver / Deshacer": mas juntas. */
:root[data-theme] .brow > .xarpie-efectos{ margin-block:6px 0; }
:root[data-theme] .xarpie-efectos{ gap:4px; }
:root[data-theme] .xarpie-efecto-link{ padding:3px 11px; }

/* >>> ESPERAN-TU-SI (public/esperan.js; lienzos «Dónde aparece tu sí» y «Para revisar», 22 oct 2026)
   Forma: la tarjeta FLOTA (16 px, sombra de flota) porque espera un toque; las filas de «Para revisar» van sin cajas ni rayas; lo que se toca es pildora.
   Nada se anima: la franja, la hoja y el contador se usan a diario y con teclado. */
.esp-franja{ margin:0 0 var(--e-4, 16px); }
.esp-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.esp-h{ margin:0; font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.esp-h2{ margin:2px 0 8px; font-size:var(--t-sub); font-weight:500; color:var(--tinta); overflow-wrap:anywhere; }
.esp-tj{ background:var(--piedra); border-radius:var(--r-flota); box-shadow:var(--sombra-flota); padding:12px 14px; margin-bottom:8px; min-width:0; }
.esp-meta{ font-size:var(--t-meta); color:var(--apagado); overflow-wrap:anywhere; }
.esp-t{ color:var(--tinta); font-size:var(--t-texto); font-weight:500; margin:2px 0; overflow-wrap:anywhere; }
.esp-l{ font-size:var(--t-meta); color:var(--medio); margin-bottom:8px; overflow-wrap:anywhere; }
.esp-acc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.esp-b{ border-radius:var(--r-pildora); min-height:32px; }
.esp-pill-urge{ display:inline-flex; border-radius:var(--r-pildora); color:var(--urge); box-shadow:inset 0 0 0 1px var(--urge); font-size:var(--t-meta); padding:0 8px; white-space:nowrap; }
.esp-pill{ display:inline-flex; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-meta); padding:1px 10px; white-space:nowrap; vertical-align:1px; }
.esp-calma{ color:var(--medio); font-size:var(--t-texto); margin:8px 0; }
.esp-nota{ color:var(--medio); font-size:var(--t-meta); margin:8px 0 0; }
/* PX2 (public/sugerencia-ajuste.js): la llegada de una sugerencia. El MISMO marco de .ajs2-aqui (2 px de tinta, 6 de aire, 4 de radio), pero QUIETO hasta
   que la persona decide (lienzo v2): hay una pregunta abierta. «Ahora» y «Sugerido» lado a lado en piedra de 4 px (contenido); nada se anima. */
.sug-aqui{ outline:2px solid var(--tinta); outline-offset:6px; border-radius:var(--r); scroll-margin-top:96px; }
.sug-panel{ margin:14px 6px 18px; padding:2px 0; min-width:0; }
.sug-cab{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.sug-l{ color:var(--tinta); font-size:var(--t-campo); font-weight:500; overflow-wrap:anywhere; }
.sug-pill{ display:inline-flex; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--punto); color:var(--tinta); font-size:var(--t-meta); padding:1px 10px; white-space:nowrap; }
.sug-lado{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.sug-lado > div{ background:var(--piedra); border-radius:var(--r); padding:10px 12px; min-width:0; }
.sug-k{ color:var(--apagado); font-size:var(--t-meta); overflow-wrap:anywhere; }
.sug-n{ color:var(--medio); font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.sug-s .sug-n{ color:var(--tinta); }
#modal .sug-lado > div{ background:var(--piedra-on); }   /* dentro del editor de una plantilla la hoja ya es piedra */
.sug-dijo{ color:var(--medio); font-size:var(--t-meta); margin:0 0 12px; overflow-wrap:anywhere; }
.sug-dijo q{ color:var(--texto); }
.sug-acc{ display:flex; flex-wrap:wrap; gap:8px; }
.sug-nota{ color:var(--medio); font-size:var(--t-meta); margin:8px 0 0; }
.esp-aviso{ color:var(--urge); font-size:var(--t-meta); margin:8px 0 0; }
.esp-difs{ margin:4px 0; }
.esp-dif{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; padding:8px 0; font-size:var(--t-texto); color:var(--tinta); }
.esp-dif > span:last-child{ overflow-wrap:anywhere; white-space:pre-line; }
.esp-k{ color:var(--apagado); font-size:var(--t-meta); }
.esp-contador{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-meta); font-weight:500; white-space:nowrap; cursor:pointer; }
.esp-contador:focus-visible, .esp-filtro:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.esp-velo{ position:fixed; inset:0; z-index:var(--z-velo); background:var(--velo); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.esp-velo[hidden]{ display:none; }
.esp-hoja{ background:var(--hoja); border-radius:var(--r-flota); box-shadow:var(--sombra-menu); width:100%; max-width:520px; max-height:calc(100dvh - 32px); overflow:auto; padding:16px; overscroll-behavior:contain; }
@media (min-width:861px){ .esp-velo{ align-items:center; } }
.esp-chat .esp-chat-frase{ margin:0 0 8px; color:var(--tinta); font-size:var(--t-texto); }
.esp-filtros{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.esp-filtro{ border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-meta); padding:4px 12px; min-height:32px; cursor:pointer; }
.esp-filtro[aria-pressed="true"]{ background:var(--boton); color:var(--boton-t); }
.esp-fila{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; min-height:44px; }
.esp-fila-x{ flex:1; min-width:0; }
.esp-fila-a{ color:var(--tinta); font-size:var(--t-texto); overflow-wrap:anywhere; }
.esp-listo{ padding:8px 0; }
.esp-cerrar{ float:right; margin:-4px -6px 0 8px; }
@media (max-width:420px){ .esp-b, .esp-contador{ min-height:44px; } .esp-dif{ grid-template-columns:96px minmax(0,1fr); } }
/* <<< ESPERAN-TU-SI-FIN */

/* AG2 (invariante 23): Ajustes > Agentes y la pagina del telefono para aflojar limites (public/agentes-si.js). Filas sin cajas; numeros cortos; 48 px en el telefono. */
.agsi .seg{ margin-bottom:var(--e-4); }
.agsi-ayuda{ font-size:var(--t-meta); max-width:600px; margin:0 0 var(--e-3); }
.agsi-campo .inp{ width:7.5em; }
.agsi-tope{ font-size:var(--t-meta); white-space:nowrap; }
.agsi-herrs{ display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-4); margin-top:var(--e-2); }
.agsi-herr{ display:inline-flex; align-items:center; gap:var(--e-1); font-size:var(--t-meta); }
.agsi-grande{ min-height:48px; flex:1; }
/* La frase que oyo la persona, en la tarjeta de #/confirmar (public/confirmar.js, cfSi). */
.cf-si-frase{ font-size:var(--t-sub); color:var(--tinta); margin:var(--e-2) 0 var(--e-3); text-wrap:balance; }
@media (max-width:560px){ .agsi .evrow{ flex-wrap:wrap; } }

/* AG1.5: «Agentes conectados» (public/agentes-panel.js, lienzo 4CowPE4j). Filas sin cajas ni rayas; el estado es una pildora con palabra (Contaminado en almagre,
   con contorno: es un aviso, no un boton); los botones son pildora y en el telefono llegan a 44 px. Nada se anima: es una pantalla de control. */
.agp-ayuda{ font-size:var(--t-meta); max-width:600px; margin:0 0 var(--e-3); }
.agp-cortar{ margin-bottom:var(--e-2); }
/* A1 de Ajustes > Agentes (la pagina unica, lienzo K475Dojm): cuatro pisos con su titulo, sin cajas. Una regla del estudio es una fila: lo que dice a la
   izquierda y su control a la derecha; en el telefono el control baja. */
.agp-migas{ display:inline-block; margin-bottom:var(--e-2); text-decoration:none; }
.agp-arriba{ margin:0 0 var(--e-5); }
.agp-sec{ margin:0 0 var(--e-6); }
.agp-s{ font-size:var(--t-sub); font-weight:600; color:var(--tinta); margin:0 0 var(--e-2); }
.agp-claude{ margin:var(--e-2) 0 var(--e-3); }
.agp-eti{ margin:var(--e-3) 0 var(--e-1); }
.agp-notas, .agp-lista{ font-size:var(--t-meta); margin:var(--e-3) 0; padding-left:18px; display:flex; flex-direction:column; gap:var(--e-1); max-width:68ch; }
.agp-lista{ font-size:var(--t-texto); color:var(--tinta); }
.agp-regla{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-4); padding:var(--e-3) 0; }
/* El texto pide 280 px antes de dejar que el control se le pegue: con el chat abierto la columna mide ~420 px y el control baja solo (la trampa
   de «un componente hereda el ancho de su COLUMNA, no el de la ventana», CLAUDE.md, Ola 5). */
.agp-regla .f1{ flex:1 1 280px; min-width:0; }
.agp :is(a.btn, a.pz-b-p), #aj-claude a.btn{ text-decoration:none; }
@media (max-width:560px){ .agp-regla{ flex-wrap:wrap; } .agp-regla .seg{ flex-wrap:wrap; } :root[data-theme] .agp-regla .btn{ min-height:44px; } }
.agp-fila{ padding:var(--e-3) 0; }
.agp-cab{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; }
.agp-nombre{ flex:1; min-width:0; color:var(--tinta); font-size:var(--t-campo); font-weight:500; overflow-wrap:anywhere; }
.agp-meta{ font-size:var(--t-meta); }
.agp-linea{ font-size:var(--t-texto); margin:var(--e-2) 0 var(--e-1); max-width:68ch; }
.agp-cats{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-2); margin-top:2px; }
:root[data-theme] .agp-pill{ display:inline-flex; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-meta); padding:1px 10px; white-space:nowrap; }
:root[data-theme] .agp-pill-urge{ background:transparent; color:var(--urge); box-shadow:inset 0 0 0 1px var(--urge); }
.agp-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-2); }
:root[data-theme] .agp-peligro{ color:var(--urge); }
.agp-dif{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--e-3); padding:var(--e-2) 0; font-size:var(--t-texto); }
@media (max-width:560px){ :root[data-theme] .agp-acc .btn, :root[data-theme] .agp-cortar .btn{ min-height:44px; } .agp-dif{ grid-template-columns:1fr; gap:2px; } }

/* ---- Galerias F3: el panel de una subida, el aviso de RAW/HEIC, el recordatorio y el aviso fuera del editor ----
   El panel vive en el cascaron del editor (#g-prog, entre las pestanas y el cuerpo) para seguir a la vista en Fotos, Diseno,
   Ajustes y Actividad. Flota (16 px), como todo lo que se pone encima del trabajo; la barra y los botones son pildora. */
.gsub[hidden]{ display:none; }
#g-prog.gsub{ flex:none; display:flex; flex-direction:column; gap:12px; padding:0 32px 14px; }
.gsub-panel, .gsub-aviso{ display:flex; flex-direction:column; gap:14px; padding:16px 20px; background:var(--piedra); border-radius:var(--r-flota); box-shadow:var(--sombra-flota); color:var(--texto); }
.gsub-aviso{ flex-direction:row; align-items:flex-start; gap:12px; }
.gsub-recordatorio{ align-items:center; margin-bottom:16px; }
/* Los botones bajan a su propio renglon cuando no caben (12 nov: «Cerrar», «Reintentar» y «Elegir otra vez» juntos). El panel hereda el
   ancho de su COLUMNA, no el de la ventana: con el chat abierto mide ~350 px aunque la ventana mida 1024, la regla de 860 px de abajo no
   aplica, y sin esto el titulo se partia palabra por palabra y el ultimo boton se salia del panel. */
.gsub-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.gsub-f1{ flex:1 1 220px; min-width:0; }
.gsub-ico{ width:36px; height:36px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); display:flex; align-items:center; justify-content:center; flex:none; }
.gsub-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.gsub-s{ margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.gsub-barra{ height:6px; border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.gsub-barra i{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--tinta); transition:width var(--d-toque) var(--curva-cambia); }
.gsub-barra.quieta i{ background:var(--punto); }
.gsub-cifras{ display:flex; flex-wrap:wrap; gap:8px 40px; }
.gsub-cifra b{ display:block; font-size:var(--t-sub); font-weight:500; line-height:1.25; color:var(--tinta); font-variant-numeric:tabular-nums; }
.gsub-cifra span{ font-size:var(--t-meta); color:var(--medio); }
.gsub-nota{ display:flex; align-items:center; gap:8px; font-size:var(--t-meta); color:var(--medio); }
.gsub-punto{ width:6px; height:6px; border-radius:var(--r-pildora); background:var(--punto); flex:none; }
.gsub-nombres{ margin-top:10px; font-size:var(--t-meta); color:var(--medio); line-height:1.6; overflow-wrap:anywhere; }
.gsub-nombres span{ color:var(--texto); }
.gsub-enlace{ border:0; background:none; padding:0; font:inherit; color:var(--tinta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gsub-ignorados{ margin-top:10px; padding-top:10px; box-shadow:inset 0 1px 0 var(--linea); font-size:var(--t-meta); color:var(--medio); }
.gsub-f1 > .gsub-ignorados:first-child{ margin-top:0; padding-top:0; box-shadow:none; }
.gsub-x{ width:32px; padding:0; }
.gsub .gal-prog-errores{ margin-top:0; }
/* El aviso chico fuera del editor: abajo a la izquierda (el aviso de siempre, #toast, vive abajo al centro y no se pisan). */
.gsub-chip{ --gsub-p:0%; position:fixed; left:24px; bottom:24px; z-index:90; display:flex; align-items:center; gap:12px; min-height:48px; max-width:calc(100vw - 48px); padding:0 8px 0 16px; background:var(--menu); border-radius:var(--r-flota); box-shadow:var(--sombra-menu); white-space:nowrap; }
.gsub-chip b{ font-weight:500; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; }
.gsub-chip > span:not(.gsub-anillo){ color:var(--medio); }
.gsub-anillo{ width:20px; height:20px; border-radius:var(--r-pildora); background:conic-gradient(var(--tinta) 0 var(--gsub-p, 0%), var(--piedra-on) 0); display:flex; align-items:center; justify-content:center; flex:none; }
.gsub-anillo i{ width:12px; height:12px; border-radius:var(--r-pildora); background:var(--menu); }
@media (max-width:860px){
  #g-prog.gsub{ padding:0 16px 10px; }
  .gsub-panel{ padding:16px; }
  .gsub-panel .gsub-ico{ display:none; }
  .gsub-cifras{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; }
  .gsub-recordatorio{ flex-wrap:wrap; }
  .gsub-chip{ left:8px; right:8px; max-width:none; bottom:calc(96px + env(safe-area-inset-bottom)); }
}
/* La barra de lote (Galerias F3): flota (16 px) encima de la cuadricula, pegada arriba al hacer scroll. «Rango» solo en el telefono
   (en escritorio el rango es Shift + clic, y la pista lo dice). El :root[data-theme] le gana a la regla vieja de styles.css. */
:root[data-theme] #g-bulk.on{ position:sticky; top:8px; z-index:6; display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:8px; padding:8px 8px 8px 16px; border:0; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
#g-bulk .g-bulk-n{ font-weight:500; color:var(--tinta); margin-right:8px; }
#g-bulk .g-bulk-acc{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
#g-bulk .g-bulk-sep{ width:1px; height:20px; background:var(--linea); margin:0 6px; }
#g-bulk .g-bulk-rango{ display:none; }
#g-bulk .btn:disabled{ opacity:.4; }
#g-bulk-pista{ min-height:0; margin:0 0 12px 16px; font-size:var(--t-meta); color:var(--medio); }
#g-bulk-pista:empty{ display:none; }
#g-bulk-pista kbd{ font-family:inherit; font-size:var(--t-eti); padding:1px 6px; border-radius:var(--r); background:var(--piedra-on); color:var(--tinta); }
.gal-item.gal-sel{ box-shadow:0 0 0 2px var(--pag), 0 0 0 4px var(--tinta); }
@media (max-width:860px){
  /* En el telefono la barra se va abajo, encima de todo, con las acciones en una fila que se desliza. */
  :root[data-theme] #g-bulk.on{ position:fixed; left:8px; right:8px; top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60; padding:12px; gap:8px; }
  #g-bulk .g-bulk-rango{ display:inline-flex; }
  #g-bulk .g-bulk-acc{ order:5; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  #g-bulk .g-bulk-sep{ display:none; }
  #g-bulk .btn, #g-bulk .sel{ min-height:44px; }
  #g-bulk-pista .g-bulk-shift{ display:none; }
}
/* Cada foto del editor es un <figure>, y nada le quitaba el margen que le pone el navegador (1em arriba y abajo, 40 px a los lados):
   con el chat abierto el panel mide ~400 px y las fotos quedaban de ~30 px; en escritorio, huecos de 80 px. La separacion es el gap de
   la cuadricula (styles.css). Lo hallo Galerias F2 midiendo con getComputedStyle (22 oct). */
.gal-masonry > .gal-item{ margin:0; }

/* El acceso rapido de la Constelacion en la barra: a color (pedido de Daniel, 29 oct). Letra e icono en su color de area; la pildora lleva un tinte suyo, mas fuerte cuando esta abierta. */
:root[data-theme] .cp-navbtn[data-cat="constelacion"]{ background:color-mix(in srgb, var(--cons-tono) 12%, transparent); }
:root[data-theme] .cp-navbtn[data-cat="constelacion"].on{ background:color-mix(in srgb, var(--cons-tono) 28%, transparent); }
@media (hover:hover){ :root[data-theme] .cp-navbtn[data-cat="constelacion"]:hover{ background:color-mix(in srgb, var(--cons-tono) 22%, transparent); } }
/* Icono solo (Daniel, 29 oct). Sus cuatro estrellas tienen tokens propios (--cons-a..d, los mismos tonos que el mapa) porque los --area-* son solo del Inicio
   (paridad-inicio-areas). : la palabra queda para el lector de pantalla y el menu «Mas»; el icono se ve tambien con el menu arriba, que esconde los demas. */
:root[data-theme] .cp-navbtn[data-cat="constelacion"] .cp-navtxt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn[data-cat="constelacion"] .cp-navico{ display:inline-flex; }
:root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn[data-cat="constelacion"]{ padding:0 10px; background:color-mix(in srgb, var(--cons-tono) 12%, transparent); }
:root[data-theme] body.nav-lat-on.menu-arriba .cp-navbtn[data-cat="constelacion"].on{ background:color-mix(in srgb, var(--cons-tono) 28%, transparent); }
.cons-nav-ico{ display:block; width:24px; height:24px; flex:none; }
.cons-nav-ico .l{ fill:none; stroke:var(--cons-tono); stroke-width:1.4; stroke-linejoin:round; opacity:.7; }
.cons-nav-ico .a{ fill:var(--cons-a); }
.cons-nav-ico .b{ fill:var(--cons-b); }
.cons-nav-ico .c{ fill:var(--cons-c); }
.cons-nav-ico .d{ fill:var(--cons-d); }
.cons-nav-ico .e{ fill:var(--cons-tono); }

/* El widget «Cuestionario» de la boda (public/cuestionarios.js): lo que la pareja contesto en su portal. Filas sin cajas (regla 2); la pregunta
   chica y apagada arriba, la respuesta en tinta; una pildora de estado solo para lo que cambio o corrigieron. */
:root[data-theme] .cqw{ display:flex; flex-direction:column; }
:root[data-theme] .cqw-estado{ font-size:var(--t-meta); color:var(--apagado); margin-bottom:6px; }
:root[data-theme] .cqw-corr{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:32px; font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .cqw-corr b{ font-weight:500; }
:root[data-theme] .cqw-pill{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--medio); font-size:var(--t-meta); font-weight:400; }
:root[data-theme] .cqw-sec{ font-size:var(--t-meta); font-weight:500; color:var(--medio); margin:14px 0 2px; }
:root[data-theme] .cqw-resp{ display:flex; flex-direction:column; gap:2px; padding:7px 0; }
:root[data-theme] .cqw-q{ font-size:var(--t-meta); color:var(--apagado); }
:root[data-theme] .cqw-a{ font-size:var(--t-texto); line-height:1.5; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
:root[data-theme] .cqw-vacia{ color:var(--apagado); }
/* Tren C: la tarjeta de correccion (lienzo «BodaRespuestas»). Flota sobre la lista (16 px) porque pide una decision; sus botones son pildoras. */
:root[data-theme] .cqw-tarjeta{ margin:8px 0 14px; padding:16px; border-radius:var(--r-flota); background:var(--piedra-on); }
:root[data-theme] .cqw-tarjeta-t{ font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
:root[data-theme] .cqw-tarjeta-p{ margin-top:4px; font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
:root[data-theme] .cqw-tarjeta-b{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* La pagina «Cuestionario» del editor del portal (public/cuestionario-editor.js, tren B; lienzo «EditorCuestionario» y «EditorPregunta»).
   Filas sin cajas (regla 2): una seccion es un renglon con su cuenta y su flecha; una pregunta, su texto y una linea apagada de lo que hara.
   Lo unico con fondo es el editor de UNA pregunta (flota sobre la lista mientras se escribe) y las pildoras que se tocan. */
:root[data-theme] .cqe{ display:flex; flex-direction:column; }
:root[data-theme] .cqe-para{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
:root[data-theme] .cqe-eti{ font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .cqe-t{ font-size:var(--t-meta); font-weight:500; color:var(--apagado); margin:18px 0 4px; }
:root[data-theme] .cqe-sabe{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .cqe-sabe-t{ font-size:var(--t-meta); color:var(--apagado); white-space:nowrap; }
:root[data-theme] .cqe-sec-cab{ display:flex; align-items:center; gap:6px; }
:root[data-theme] .cqe-sec-btn{ flex:1; display:flex; align-items:center; gap:10px; min-height:44px; padding:0; background:none; border:0; color:var(--tinta); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
:root[data-theme] .cqe-sec-n{ flex:1; }
:root[data-theme] .cqe-sec.abierta .cqe-sec-n{ font-weight:500; }
:root[data-theme] .cqe-sec-c{ font-size:var(--t-meta); color:var(--apagado); }
/* El icono «chevron» apunta abajo: cerrada se gira a la derecha (›), abierta queda abajo (como el lienzo). */
:root[data-theme] .cqe-chev{ display:inline-flex; color:var(--apagado); transform:rotate(-90deg); transition:transform var(--d-toque) var(--curva-cambia); }
:root[data-theme] .cqe-sec.abierta .cqe-chev{ transform:none; }
:root[data-theme] .cqe-sec-ren{ display:flex; align-items:center; gap:8px; padding:6px 0; }
:root[data-theme] .cqe-sec-ren .inp{ flex:1; }
:root[data-theme] .cqe-lista{ display:flex; flex-direction:column; padding:0 0 6px 10px; }
:root[data-theme] .cqe-q{ display:flex; align-items:flex-start; gap:8px; padding:7px 0; }
:root[data-theme] .cqe-q.dragging{ opacity:.5; }
:root[data-theme] .cqe-asa{ display:inline-flex; padding-top:3px; color:var(--punto); cursor:grab; }
:root[data-theme] .cqe-q.abierta .cqe-asa{ visibility:hidden; }
:root[data-theme] .cqe-cliente .cqe-asa{ display:none; }
:root[data-theme] .cqe-qbtn{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:0; background:none; border:0; color:var(--tinta); font:inherit; text-align:left; cursor:pointer; }
:root[data-theme] .cqe-qfija{ cursor:default; }
:root[data-theme] .cqe-qt{ font-size:var(--t-texto); line-height:1.4; overflow-wrap:anywhere; }
:root[data-theme] .cqe-qm{ font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
:root[data-theme] .cqe-q.tachada .cqe-qt{ text-decoration:line-through; color:var(--apagado); }
:root[data-theme] .cqe-ojo{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); cursor:pointer; }
:root[data-theme] .cqe-ojo.on{ background:var(--piedra-on); color:var(--tinta); }
:root[data-theme] .cqe-ojo:disabled{ cursor:default; opacity:.5; }
:root[data-theme] .cqe-falta{ color:var(--urge); }
:root[data-theme] .cqe-marca{ color:var(--tinta); font-weight:500; }
:root[data-theme] .cqe-ed{ display:flex; flex-direction:column; gap:6px; margin:4px 0 12px; padding:16px; border-radius:var(--r-flota); background:var(--piedra-on); }
:root[data-theme] .cqe-ed .ge-flabel{ margin-top:6px; }
:root[data-theme] .cqe-chips{ display:flex; flex-wrap:wrap; gap:6px; }
:root[data-theme] .cqe-chip{ min-height:32px; padding:0 12px; border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font:inherit; font-size:var(--t-meta); cursor:pointer; }
:root[data-theme] .cqe-chip[aria-checked="true"]{ background:var(--boton); color:var(--boton-t); }
:root[data-theme] .cqe-ops{ display:flex; flex-direction:column; gap:6px; }
:root[data-theme] .cqe-op{ display:flex; align-items:center; gap:6px; }
:root[data-theme] .cqe-op .inp{ flex:1; }
:root[data-theme] .cqe-aviso{ margin:2px 0 0; font-size:var(--t-meta); }
:root[data-theme] .cqe-radio{ display:flex; align-items:center; gap:8px; min-height:32px; font-size:var(--t-texto); color:var(--tinta); cursor:pointer; }
:root[data-theme] .cqe-si{ display:flex; flex-direction:column; gap:6px; padding-left:24px; }
:root[data-theme] .cqe-si-valor{ display:flex; align-items:center; gap:8px; font-size:var(--t-texto); color:var(--medio); }
:root[data-theme] .cqe-si-valor .inp{ width:auto; min-width:120px; }
:root[data-theme] .cqe-ed-pie{ display:flex; align-items:center; gap:6px; margin-top:10px; }
:root[data-theme] .cqe-hueco{ flex:1; }
:root[data-theme] .cqe-quitar{ padding:8px 0; border:0; background:none; color:var(--urge); font:inherit; font-size:var(--t-texto); cursor:pointer; }
:root[data-theme] .cqe-mas{ align-self:flex-start; display:inline-flex; text-decoration:none; align-items:center; gap:6px; min-height:32px; margin:6px 0 10px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); font:inherit; font-size:var(--t-meta); cursor:pointer; }
:root[data-theme] .cqe-mas-chico{ margin:0; }
:root[data-theme] .cqe-mas-sec{ margin-top:12px; }
:root[data-theme] .cqe-nota{ margin:0 0 12px; padding:10px 12px; border-radius:var(--r); background:var(--piedra-on); font-size:var(--t-meta); line-height:1.5; color:var(--medio); }
:root[data-theme] .cqe-conflicto{ margin:0 0 12px; padding:12px; border-radius:var(--r); background:var(--piedra-on); font-size:var(--t-texto); color:var(--tinta); }
:root[data-theme] .cqe-conflicto p{ margin:0 0 8px; }
:root[data-theme] .cqe-conflicto-b{ display:flex; flex-wrap:wrap; gap:8px; }
:root[data-theme] .cqe-sola{ max-width:560px; margin:0 auto; padding:24px 16px 48px; }
@media (prefers-reduced-motion: reduce){ :root[data-theme] .cqe-chev{ transition:none; } }

/* ================= La linea de avisos (plan PLAN-avisos-en-el-chat-2026-11, F2) =================
   Fuera del bloque CHAT-LIMPIO a proposito: la linea existe con y sin chat limpio (humo-chat-limpio H2 exige que ahi todo cuelgue de esa clase). */
/* Una pildora sobre la caja de escribir (lienzo «Avisos en el chat», cuadro 1): campana, cuantos sin leer, el ultimo aviso y «Ver».
   Mismo relleno que la caja porque es parte del pie del chat, no un mensaje; sin raya (la forma ya dice que se toca). Se usa cien
   veces al dia: nada se anima. Desde el plan inicio-carta T1 (4 nov) tambien sale en la bienvenida: la bienvenida ya no dice «N avisos sin leer». */
.chatpane > .xn-linea:not([hidden]){
  display:flex; align-items:center; gap:var(--e-2); flex-shrink:0; box-sizing:border-box; width:100%; margin:0 0 var(--e-2);
  padding:var(--e-2) var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra);
  color:var(--texto); font:inherit; font-size:var(--t-meta); text-align:left; cursor:pointer;
}
.xn-linea-ico{ display:inline-flex; flex:none; color:var(--medio); }
.xn-linea-n{ flex:none; min-width:20px; box-sizing:border-box; padding:1px var(--e-2); border-radius:var(--r-pildora); background:var(--piedra-on);
  color:var(--tinta); font-weight:600; font-variant-numeric:tabular-nums; text-align:center; }
.xn-linea-txt{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xn-linea-ver{ flex:none; color:var(--tinta); font-weight:500; }
@media (hover:hover){
  .chatpane > .xn-linea:hover{ background:var(--piedra-on); }
  .chatpane > .xn-linea:hover .xn-linea-n{ background:var(--piedra); }
}
.chatpane > .xn-linea:focus-visible{ outline:2px solid var(--punto); outline-offset:2px; }
/* Con la carta de entrada (.xb-carta; plan PLAN-entrada-carta-con-numeros-2026-11, D4) la linea va DEBAJO de la caja (aplicarEntradaCarta mueve el nodo) y sin
   relleno: una linea de texto, no una tercera barra apilada. Sigue siendo un boton de 44 px de alto. */
.chatpane.xb-carta > .xn-linea:not([hidden]){ min-height:44px; margin:var(--e-1) 0 0; background:none; }
.chatpane.xb-carta > .xn-linea .xn-linea-n{ min-width:0; padding:0; background:none; }
@media (hover:hover){
  .chatpane.xb-carta > .xn-linea:hover{ background:var(--tinte-toque); }
  .chatpane.xb-carta > .xn-linea:hover .xn-linea-n{ background:none; }
}

/* ============================================================================
   Contrato en el chat, version 2: «Xarpie propone, tu ajustas» (public/contrato-chat.js; plan PLAN-contrato-en-el-chat-2026-11, F1;
   lienzo «Contrato en el chat», tablero 5 = la tabla de movimiento). Solo tokens. Lo que se mueve: opacidad, posicion y enfoque, salvo los
   pliegues (rejilla 1fr <-> 0fr, una pieza chica, a proposito: asi el chat pegado abajo se acomoda solo y anda igual en Safari). Con teclado
   (.cgx-tecla) nada se anima; con movimiento reducido todo es un fundido.
   ============================================================================ */
:root[data-theme] .cgx-brow{ display:block; }
:root[data-theme] .cgx{ --cgx-paso:16ms; --cgx-i:0; --cgx-d:0ms; flex:0 0 100%; min-width:0; display:flex; flex-direction:column; gap:14px; }
:root[data-theme] .cgx-yo{ display:flex; justify-content:flex-end; }
:root[data-theme] .cgx-yo .bub-me{ max-width:80%; animation:cgx-llega var(--d-ventana) var(--curva-entra) both; }
:root[data-theme] .cgx-xa{ display:flex; flex-direction:column; gap:10px; max-width:34rem; min-width:0; }
:root[data-theme] .cgx-t{ font-size:var(--t-chat, var(--t-texto)); line-height:1.55; color:var(--texto); text-wrap:pretty; }
:root[data-theme] .cgx-t b{ font-weight:500; color:var(--tinta); }
/* Xarpie escribe: cada palabra aparece, sube 4 px y se enfoca (160 ms, una tras otra cada 16 ms; la frase nunca pasa de ~400 ms). */
:root[data-theme] .cgx-w{ display:inline-block; white-space:pre; animation:cgx-palabra calc(160ms * var(--lento)) var(--curva-entra) both; animation-delay:calc(var(--cgx-i) * var(--cgx-paso, 16ms) * var(--lento)); }
:root[data-theme] .cgx-quieto .cgx-w{ animation:none; }
@keyframes cgx-palabra{ from{ opacity:0; transform:translateY(4px); filter:blur(2px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes cgx-llega{ from{ opacity:0; transform:translateY(6px); filter:blur(2px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes cgx-tarjeta{ from{ opacity:0; transform:translateY(8px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
:root[data-theme] .cgx-pensando{ display:flex; align-items:center; gap:8px; min-height:24px; font-size:var(--t-meta); color:var(--medio); animation:cgx-llega var(--d-ventana) var(--curva-entra) both; }
:root[data-theme] .cgx-punto{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--urge); animation:cgx-pulso calc(1s * var(--lento)) ease-in-out infinite; }
@keyframes cgx-pulso{ 0%, 100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---- las opciones: cada una en un pliegue; el espacio entre filas es padding DENTRO del pliegue (un gap no se recoge) ---- */
:root[data-theme] .cgx-ops{ display:flex; flex-direction:column; }
:root[data-theme] .cgx-pl{ display:grid; grid-template-rows:1fr; transition:grid-template-rows calc(220ms * var(--lento)) var(--curva-arrastre), opacity var(--d-toque) var(--curva-cambia), filter var(--d-toque) var(--curva-cambia); }
:root[data-theme] .cgx-pl > div{ min-height:0; overflow:hidden; padding-bottom:6px; }
:root[data-theme] .cgx-pl.cgx-fuera{ grid-template-rows:0fr; opacity:0; filter:blur(2px); pointer-events:none; transition-delay:calc(60ms * var(--lento)), 0s, 0s; }
:root[data-theme] .cgx-pl.cgx-entra > div > *{ animation:cgx-llega var(--d-ventana) var(--curva-entra) both; animation-delay:calc(var(--cgx-d) * var(--lento)); }
:root[data-theme] .cgx-op{ appearance:none; border:0; width:100%; min-height:48px; padding:7px 14px 7px 8px; display:grid; grid-template-columns:28px minmax(0, 1fr) auto; align-items:center; column-gap:10px; text-align:left; font:inherit;
  border-radius:var(--r-pildora); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); color:var(--tinta); cursor:pointer;
  transition:background-color var(--d-toque) var(--curva-cambia), color calc(160ms * var(--lento)) var(--curva-cambia), box-shadow var(--d-toque) var(--curva-cambia), transform var(--d-toque) var(--curva-entra); }
@media (hover:hover){ :root[data-theme] .cgx-op:hover:not(:disabled){ background:var(--piedra-on); } :root[data-theme] .cgx-op:hover:not(:disabled) .cgx-flecha{ transform:translateX(2px); } }
:root[data-theme] .cgx-op:active:not(:disabled){ transform:scale(.98); }
:root[data-theme] .cgx-op:disabled{ cursor:default; }
:root[data-theme] .cgx-ico{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--piedra-on); color:var(--medio); font-size:var(--t-eti); font-weight:600; letter-spacing:.02em;
  transition:background-color calc(160ms * var(--lento)) var(--curva-cambia), color calc(160ms * var(--lento)) var(--curva-cambia); }
:root[data-theme] .cgx-txts{ display:flex; flex-direction:column; min-width:0; }
:root[data-theme] .cgx-eti{ font-size:var(--t-texto); font-weight:500; line-height:1.3; }
:root[data-theme] .cgx-det{ font-size:var(--t-meta); line-height:1.35; color:var(--medio); transition:color calc(160ms * var(--lento)) var(--curva-cambia); }
:root[data-theme] .cgx-flecha{ color:var(--medio); display:inline-flex; transition:transform var(--d-toque) var(--curva-entra), opacity var(--d-toque) var(--curva-cambia); }
:root[data-theme] .cgx-actual{ font-size:var(--t-meta); color:var(--medio); }
/* Elegida: se rellena fuerte (el toque se siente) y se calma al tono de tus mensajes en cuanto Xarpie sigue (lo mas visible es lo de ahora). */
:root[data-theme] .cgx-op.cgx-on{ background:var(--boton); color:var(--boton-t); box-shadow:none; }
:root[data-theme] .cgx-op.cgx-on .cgx-ico{ background:color-mix(in srgb, var(--boton-t) 16%, transparent); color:var(--boton-t); }
:root[data-theme] .cgx-op.cgx-on .cgx-det{ color:color-mix(in srgb, var(--boton-t) 72%, transparent); }
:root[data-theme] .cgx-op.cgx-on .cgx-flecha{ opacity:0; }
:root[data-theme] .cgx-op.cgx-on.cgx-asentada{ background:var(--piedra-on); color:var(--tinta); transition:background-color calc(240ms * var(--lento)) var(--curva-cambia), color calc(240ms * var(--lento)) var(--curva-cambia); }
:root[data-theme] .cgx-op.cgx-on.cgx-asentada .cgx-ico{ background:var(--pag); color:var(--medio); }
:root[data-theme] .cgx-op.cgx-on.cgx-asentada .cgx-det{ color:var(--medio); }
:root[data-theme] .cgx-elegida{ display:flex; align-items:center; gap:8px; }
:root[data-theme] .cgx-elegida .cgx-op{ flex:1; min-width:0; }
:root[data-theme] .cgx-cambiar, :root[data-theme] .cgx-quieta, :root[data-theme] .cgx-enlace{ appearance:none; border:0; background:none; padding:0 4px; font:inherit; font-size:var(--t-meta); color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
:root[data-theme] .cgx-cambiar{ flex:none; min-height:44px; padding:0 6px; animation:cgx-llega var(--d-ventana) var(--curva-entra) both; }
:root[data-theme] .cgx-quieta{ min-height:36px; align-self:flex-start; }
:root[data-theme] .cgx-enlace{ padding:0; color:var(--tinta); }
:root[data-theme] .cgx-cambiar:hover, :root[data-theme] .cgx-quieta:hover{ color:var(--tinta); }
:root[data-theme] .cgx-buscar{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); color:var(--medio); }
:root[data-theme] .cgx-buscar input{ flex:1; min-width:0; border:0; background:none; outline:none; font:inherit; font-size:var(--t-campo); color:var(--tinta); padding:8px 0; }
:root[data-theme] .cgx-buscar:focus-within{ box-shadow:inset 0 0 0 1.5px var(--tinta); }

/* ---- formulario corto dentro del turno ---- */
:root[data-theme] .cgx-mini{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:var(--r-flota); background:var(--piedra); max-width:30rem; animation:cgx-llega var(--d-ventana) var(--curva-entra) both; }
:root[data-theme] .cgx-mini label{ display:flex; flex-direction:column; gap:4px; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .cgx-mini input{ min-height:44px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-campo); color:var(--tinta); }
:root[data-theme] .cgx-mini input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--tinta); }
:root[data-theme] .cgx-fila2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
:root[data-theme] .cgx-mini-acc{ display:flex; justify-content:flex-end; }
:root[data-theme] .cgx-chips{ display:flex; flex-wrap:wrap; gap:6px; }
:root[data-theme] .cgx-chip{ appearance:none; border:0; min-height:36px; padding:0 14px; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto); font:inherit; cursor:pointer;
  transition:background-color var(--d-toque) var(--curva-cambia), color var(--d-toque) var(--curva-cambia); }
:root[data-theme] .cgx-chip[aria-pressed="true"]{ background:var(--boton); color:var(--boton-t); box-shadow:none; }

/* ---- la propuesta: una sola pieza que se vuelve el contrato ---- */
:root[data-theme] .cgx-prop{ display:flex; flex-direction:column; padding:14px 10px; border-radius:var(--r-flota); background:var(--piedra); max-width:32rem; animation:cgx-tarjeta calc(240ms * var(--lento)) var(--curva-entra) both; }
:root[data-theme] .cgx-prop .cgx-pf, :root[data-theme] .cgx-prop .cgx-rev, :root[data-theme] .cgx-prop .cgx-tot, :root[data-theme] .cgx-prop .cgx-acc{ animation:cgx-llega var(--d-ventana) var(--curva-entra) both; animation-delay:calc(var(--cgx-d) * var(--lento)); }
:root[data-theme] .cgx-prop-cab{ display:flex; flex-direction:column; gap:2px; padding:0 6px 6px; }
:root[data-theme] .cgx-prop-eti{ display:flex; align-items:center; gap:8px; min-height:18px; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .cgx-prop-nom{ font-size:var(--t-sub); font-weight:500; line-height:1.3; color:var(--tinta); }
:root[data-theme] .cgx-num{ font-weight:600; letter-spacing:.02em; color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .cgx-estado{ display:inline-flex; align-items:center; gap:6px; }
:root[data-theme] .cgx-estado::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--punto); }
:root[data-theme] .cgx-pf{ display:flex; flex-direction:column; }
:root[data-theme] .cgx-pf-b{ appearance:none; border:0; background:none; width:100%; min-height:48px; display:grid; grid-template-columns:72px minmax(0, 1fr) 14px; column-gap:10px; align-items:start;
  padding:9px 8px 9px 6px; text-align:left; font:inherit; color:inherit; cursor:pointer; border-radius:var(--r); transition:background-color var(--d-toque) var(--curva-cambia); }
@media (hover:hover){ :root[data-theme] .cgx-pf-b:hover:not(:disabled){ background:var(--tinte-toque); } }
:root[data-theme] .cgx-pf-b:disabled{ cursor:default; }
:root[data-theme] .cgx-pf-eti{ font-size:var(--t-meta); color:var(--medio); padding-top:2px; }
:root[data-theme] .cgx-pf-v{ display:flex; flex-direction:column; min-width:0; }
:root[data-theme] .cgx-pf-val{ font-size:var(--t-texto); font-weight:500; line-height:1.4; color:var(--tinta); }
:root[data-theme] .cgx-pf-val.cgx-vacio{ font-weight:400; color:var(--medio); }
:root[data-theme] .cgx-pf-raz{ font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
/* P0d (plan PLAN-propuestas-en-el-chat): certeza, «por revisar» y titulos de grupo. Solo tokens, sin color nuevo. */
:root[data-theme] .cgx-pf-val.cgx-creo{ text-decoration:underline dotted var(--medio); text-underline-offset:3px; }
:root[data-theme] .cgx-por-revisar{ display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:var(--r-pildora); background:var(--urge); vertical-align:middle; }
:root[data-theme] .cgx-pf-grupo{ padding:10px 0 2px; font-size:var(--t-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .cgx-chev{ width:6px; height:6px; margin:7px 2px 0 0; justify-self:end; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; color:var(--medio); transform:rotate(-45deg); transition:transform var(--d-toque) var(--curva-cambia); }
:root[data-theme] .cgx-pf.cgx-abierta .cgx-chev{ transform:rotate(45deg); margin-top:4px; }
:root[data-theme] .cgx-pf.cgx-solo .cgx-chev{ opacity:0; }
:root[data-theme] .cgx-pf-mas{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows calc(220ms * var(--lento)) var(--curva-arrastre), opacity calc(140ms * var(--lento)) var(--curva-cambia); }
:root[data-theme] .cgx-pf.cgx-abierta .cgx-pf-mas{ grid-template-rows:1fr; opacity:1; }
:root[data-theme] .cgx-pf-mas > div{ min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:0 4px; }
:root[data-theme] .cgx-pf.cgx-abierta .cgx-pf-mas > div{ padding:2px 4px 10px; }
:root[data-theme] .cgx-ayuda{ font-size:var(--t-meta); line-height:1.45; color:var(--medio); padding:0 4px 2px; }
:root[data-theme] .cgx-pf-mas .cgx-op{ background:var(--pag); }
:root[data-theme] .cgx-pf-mas .cgx-chip{ background:var(--piedra-on); box-shadow:none; }
/* Lo que cambio se ilumina una vez y se apaga (900 ms): dice «esto se movio» sin dejar nada encendido. */
:root[data-theme] .cgx-pf.cgx-cambio .cgx-pf-b{ animation:cgx-resalte calc(900ms * var(--lento)) var(--curva-cambia); }
@keyframes cgx-resalte{ from{ background:var(--piedra-on); } to{ background:transparent; } }
:root[data-theme] .cgx-rev{ display:flex; flex-direction:column; gap:8px; margin:6px 6px 0; padding-top:12px; box-shadow:inset 0 1px 0 var(--linea); }
:root[data-theme] .cgx-rev-t{ font-size:var(--t-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--medio); }
:root[data-theme] .cgx-rev-l{ display:grid; grid-template-columns:12px minmax(0, 1fr); column-gap:8px; font-size:var(--t-meta); line-height:1.5; color:var(--texto); }
:root[data-theme] .cgx-rev-l b{ font-weight:500; color:var(--tinta); }
:root[data-theme] .cgx-rev-m{ height:12px; margin-top:3px; display:grid; place-items:center; color:var(--ok); }
:root[data-theme] .cgx-aviso .cgx-rev-m::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--urge); }
:root[data-theme] .cgx-rev-campo{ display:flex; gap:6px; margin-top:2px; }
:root[data-theme] .cgx-rev-campo input{ flex:1; min-width:0; min-height:40px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-campo); color:var(--tinta); }
:root[data-theme] .cgx-rev-campo input:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--tinta); }
:root[data-theme] .cgx-tot{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:10px 6px 0; padding-top:12px; box-shadow:inset 0 1px 0 var(--linea); }
:root[data-theme] .cgx-tot span{ display:block; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .cgx-tot b{ display:block; font-size:var(--t-sub); font-weight:500; color:var(--tinta); font-variant-numeric:tabular-nums; }
:root[data-theme] .cgx-acc{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 6px 0; }
:root[data-theme] .cgx-acc .btn{ min-height:44px; }
/* La receta Galeria ya armada (public/propuestas/galeria.js, P5): la linea con el conteo, el panel del subidor de siempre (.gsub-panel) dentro de la
   tarjeta, hasta 6 miniaturas FIJAS (nada animado por foto ni atado al scroll: memoria del iPhone, 27 oct) y sus botones. 4 px = contenido. */
:root[data-theme] .cgx-prop .rgx-linea{ padding:12px 6px 0; }
:root[data-theme] .cgx-prop .rgx-prog{ padding:10px 0 0; }
:root[data-theme] .cgx-prop .rgx-prog:empty, :root[data-theme] .cgx-prop .rgx-minis:empty{ display:none; }
:root[data-theme] .cgx-prop .rgx-minis{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:4px; padding:10px 6px 0; }
:root[data-theme] .cgx-prop .rgx-minis img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; background:var(--piedra); }
:root[data-theme] .cgx-prop .rgx-acc{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 6px 0; }
:root[data-theme] .cgx-prop .rgx-acc .btn{ min-height:44px; }

/* ---- Xarpie lo arma, dentro de la tarjeta (mismo dibujo que «Xarpie trabaja a la vista», T11a) ---- */
:root[data-theme] .cgx-trab{ display:flex; flex-direction:column; gap:4px; padding:12px 6px 0; font-size:var(--t-meta); color:var(--medio); }
:root[data-theme] .cgx-trab-cab{ appearance:none; border:0; background:none; padding:0; min-height:28px; display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--t-meta); color:var(--tinta); text-align:left; }
:root[data-theme] .cgx-trab-cab.cgx-hecho{ color:var(--medio); cursor:pointer; }
:root[data-theme] .cgx-trab-cab.cgx-hecho:hover{ color:var(--tinta); }
:root[data-theme] .cgx-trab-cab .cgx-chev{ margin:0 0 0 2px; }
:root[data-theme] .cgx-trab-cab[aria-expanded="true"] .cgx-chev{ transform:rotate(45deg); margin-top:-3px; }
:root[data-theme] .cgx-reloj{ color:var(--medio); font-variant-numeric:tabular-nums; }
:root[data-theme] .cgx-pasos{ display:grid; grid-template-rows:1fr; transition:grid-template-rows calc(220ms * var(--lento)) var(--curva-arrastre), opacity calc(140ms * var(--lento)) var(--curva-cambia); }
:root[data-theme] .cgx-pasos > div{ min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:4px; padding-left:14px; }
:root[data-theme] .cgx-pasos.cgx-cerrado{ grid-template-rows:0fr; opacity:0; }
:root[data-theme] .cgx-paso{ display:flex; align-items:center; gap:8px; min-height:22px; animation:cgx-llega var(--d-ventana) var(--curva-entra) both; }
:root[data-theme] .cgx-marca{ position:relative; flex:none; width:12px; height:12px; }
:root[data-theme] .cgx-anillo, :root[data-theme] .cgx-ok{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity calc(160ms * var(--lento)) var(--curva-cambia), transform calc(160ms * var(--lento)) var(--curva-entra), filter calc(160ms * var(--lento)) var(--curva-cambia); }
:root[data-theme] .cgx-anillo{ border-radius:50%; border:2px solid var(--linea); border-top-color:var(--urge); animation:cgx-gira calc(900ms * var(--lento)) linear infinite; }
:root[data-theme] .cgx-ok{ color:var(--ok); opacity:0; transform:scale(.8); filter:blur(2px); }
:root[data-theme] .cgx-listo .cgx-anillo{ opacity:0; transform:scale(.6); animation:none; }
:root[data-theme] .cgx-listo .cgx-ok{ opacity:1; transform:none; filter:none; }
:root[data-theme] .cgx-paso-t{ color:var(--tinta); }
:root[data-theme] .cgx-listo .cgx-paso-t{ color:var(--medio); }
:root[data-theme] .cgx-mal .cgx-anillo{ animation:none; border-color:var(--urge); }
:root[data-theme] .cgx-mal .cgx-paso-t{ color:var(--urge); }
@keyframes cgx-gira{ to{ transform:rotate(360deg); } }
.cgx-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---- teclado y movimiento reducido ---- */
:root[data-theme] .cgx.cgx-tecla *, :root[data-theme] .cgx.cgx-tecla *::before{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
  :root[data-theme] .cgx *{ animation-name:cgx-fundido !important; animation-duration:120ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; }
  :root[data-theme] .cgx-anillo, :root[data-theme] .cgx-punto, :root[data-theme] .cgx-pf.cgx-cambio .cgx-pf-b{ animation:none !important; }
  :root[data-theme] .cgx-pl, :root[data-theme] .cgx-pf-mas, :root[data-theme] .cgx-pasos{ transition:opacity 120ms linear !important; }
  :root[data-theme] .cgx-pl.cgx-fuera{ filter:none; }
  :root[data-theme] .cgx-op:active{ transform:none; }
}
@keyframes cgx-fundido{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================================================================================
   CHAT LIMPIO (src/chat-limpio.js; lienzo «Clean chat», direccion Clean con el color A1; Daniel, 2026-10-13). Fundido aqui desde
   public/chat-limpio.css el 2026-10-13 (T6 del plan): va AL FINAL de este archivo a proposito, y todo cuelga de `html.chat-limpio` (la pone
   theme-init.js antes del primer pintado y la corrige app.js con la sesion): sin la clase, nada de esto aplica y el chat es el de hoy.
   Trampa de especificidad: varias reglas de antes llevan #app o body.nav-lat-on (p. ej. la caja de escribir de "solo chat", styles.css);
   cada regla de aqui lleva al menos los mismos ids que la que reemplaza. humo-chat-limpio lee ESTE bloque (entre las dos marcas).
   >>> CHAT-LIMPIO-INICIO
   ============================================================================================================================ */
/* ================= Fondo: un color liso en toda la app ================= */
/* El papel punteado y el grano eran el «soporte» de la marca (taller/marca-xarpen/README.md). Desde el 2026-10-13 la app no lo usa;
   el marketing (Instagram, la pagina de inicio) si. */
/* El grano de pelicula del tema oscuro es UNA capa encima de toda la pantalla (styles.css), no del chat: se va de toda la app. */
:root.chat-limpio[data-theme] body::after{ content:none; display:none; }
/* El chat y su fila de arriba: el mismo color de siempre (--x, A1: un poco mas oscuro que el CRM en oscuro, mas calido en claro), sin
   puntos ni grano. La diferencia de color sigue separando las dos mitades. */
:root.chat-limpio[data-theme] body .chatpane{ background-image:none; }
:root.chat-limpio[data-theme] body.nav-lat-on #app #tel-fila-xa{ background-image:none; }
@media (max-width:860px){ :root.chat-limpio[data-theme] body #app .chatpane{ background-image:none; } }
/* Los rieles de la pantalla ancha toman el color del CRM: en oscuro habia tres negros distintos lado a lado. */
:root.chat-limpio[data-theme] body #app .riel-lat:not([hidden]){ background:var(--pag); }

/* ================= El hilo, plano ================= */
/* La tarjeta de accion era lo unico con sombra dentro del hilo: el relleno ya la separa del fondo liso. */
:root.chat-limpio[data-theme] #chat-msgs .xtarjeta{ box-shadow:none; }
/* Todo lo que se toca es una pildora con relleno; nada lleva raya (la forma ya dice que se toca). */
:root.chat-limpio[data-theme] #chat-msgs .bubrefs .pill,
:root.chat-limpio[data-theme] #chat-msgs .xarpie-sig-btn,
:root.chat-limpio[data-theme] #chat-msgs .xarpie-efecto-link{ border:0; box-shadow:none; background:var(--piedra); color:var(--tinta); }
:root.chat-limpio[data-theme] #chat-msgs .xaviso{ border:0; }
:root.chat-limpio[data-theme] body #app .repisa{ border:0; box-shadow:none; background:transparent; }
:root.chat-limpio[data-theme] body #app .chat-viendo{ border:0; }
/* «Cree la tarea, lo encuentras en...»: el boton va junto al texto, no colgado en el otro extremo de la fila. */
:root.chat-limpio[data-theme] #chat-msgs .xarpie-efecto{ align-items:center; }
:root.chat-limpio[data-theme] #chat-msgs .xarpie-efecto-txt{ flex:0 1 auto; }

/* ================= Una sola caja de escribir ================= */
/* La misma en todas partes: con "solo chat" a 1188 px o mas se volvia rectangulo con el boton de enviar cuadrado (styles.css). Sobre el
   fondo liso no hace falta la sombra pesada: un anillo fino. */
:root.chat-limpio[data-theme] body #app .chatpane .composer{
  background-color:var(--piedra); background-image:none; box-shadow:inset 0 0 0 1px var(--linea); padding:8px; border-color:transparent;
}
:root.chat-limpio[data-theme] body #app .chatpane .composer:focus-within{ box-shadow:inset 0 0 0 2px var(--punto); }
:root.chat-limpio[data-theme] body #app.crm-colapsado #chat-send{ width:34px; height:34px; border-radius:var(--r-pildora); }

/* ================= La cara: grande solo en la bienvenida ================= */
/* Sin vidrio: un circulo solido del color del chat (en la bienvenida no pasa texto por debajo, asi que el vidrio no se veia). */
@media (min-width:861px){
  .chat-limpio body.nav-lat-on.menu-arriba #xc-cabeza{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--x); box-shadow:none; }
}
@media (max-width:860px){
  .chat-limpio body #xc-cabeza{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--tel-xa-fondo); box-shadow:none; }
}
.chat-limpio body #xc-cabeza :is(.xc-nombre, .xc-estado){ -webkit-backdrop-filter:none; backdrop-filter:none; background:transparent; }
/* Durante la conversacion la cara se encoge a 64 px (56 en telefono) dentro de la fila de arriba, con el nombre y el estado a su lado: nada flota encima
   de los mensajes. Antes el circulo de 152 px tapaba el primer renglon de una respuesta (telefono y chat al lado del CRM). Se encoge con
   la MISMA transicion de xarpie-cara.css al salir de la bienvenida. Chat escondido = el circulo de la esquina de siempre (no se toca). */
@media (min-width:861px){
  .chat-limpio body.nav-lat-on.menu-arriba:has(.chatpane:is(:not(.xb-modo), .xb-carta)):not(:has(#app.chat-colapsado)) #xc-cabeza{
    top:0; width:64px; height:64px; left:calc(var(--co-chat-cx, 0px) - 82px); background:var(--x);
  }
  .chat-limpio body.nav-lat-on.menu-arriba:has(.chatpane:is(:not(.xb-modo), .xb-carta)):not(:has(#app.chat-colapsado)) #xc-cara .xc-svg{ width:64px; }
  .chat-limpio body.nav-lat-on.menu-arriba:has(.chatpane:is(:not(.xb-modo), .xb-carta)):not(:has(#app.chat-colapsado)) #xc-cabeza :is(.xc-nombre, .xc-estado){
    left:calc(100% + 8px); transform:none; padding:0; max-width:160px; overflow:hidden; text-overflow:ellipsis;
  }
  .chat-limpio body.nav-lat-on.menu-arriba:has(.chatpane:is(:not(.xb-modo), .xb-carta)):not(:has(#app.chat-colapsado)) #xc-cabeza .xc-nombre{ top:13px; }
  .chat-limpio body.nav-lat-on.menu-arriba:has(.chatpane:is(:not(.xb-modo), .xb-carta)):not(:has(#app.chat-colapsado)) #xc-cabeza .xc-estado{ top:32px; }
  /* Sin cara colgando, el hilo ya no le guarda 58 px arriba. */
  :root.chat-limpio[data-theme] body.nav-lat-on.menu-arriba.xc-on .chatpane:is(:not(.xb-modo), .xb-carta) #chat-msgs{ padding-top:var(--e-2); }
  /* La bienvenida le deja lugar a la cara grande: hoy el «Aqui estoy» cae encima del nombre del saludo. */
  :root.chat-limpio[data-theme] body.nav-lat-on.menu-arriba.xc-on .chatpane.xb-modo #chat-msgs{ padding-top:100px; }
  /* Con la carta de entrada (.xb-carta) no hay cara grande que esquivar: la de la fila de arriba es la unica tambien en la bienvenida. */
  :root.chat-limpio[data-theme] body.nav-lat-on.menu-arriba.xc-on .chatpane.xb-modo.xb-carta #chat-msgs{ padding-top:var(--e-2); }
}
@media (max-width:860px){
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cabeza{
    top:calc(2px + env(safe-area-inset-top)); width:56px; height:56px; margin-left:-74px; background:var(--tel-xa-fondo);
  }
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cara .xc-svg{ width:56px; }
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cabeza :is(.xc-nombre, .xc-estado){
    left:calc(100% + 8px); transform:none; padding:0; max-width:110px; overflow:hidden; text-overflow:ellipsis;
  }
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cabeza .xc-nombre{ top:10px; }
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cabeza .xc-estado{ top:29px; }
  .chat-limpio body.xc-on .chatpane:is(:not(.xb-modo), .xb-carta) #chat-msgs{ padding-top:var(--e-2); }
  /* La fila lleva cinco cosas en 390 px (Chats, la cara con su nombre, el medidor de uso y la puerta de regreso) y la cara NO esta en el flujo: con una seccion de
     nombre largo («Calendario ›») el medidor se corria a la izquierda hasta encimarse con «Xarpie» (medido el 12 nov: el anillo en 222 px y el nombre hasta 236).
     La puerta y el medidor se aprietan, y el nombre de la seccion se recorta con puntos antes de empujar: 50vw - 132px es lo que queda a la derecha del nombre
     (que acaba en 50% + 41) quitando 6 de aire, el medidor con dos cifras (51) y el relleno y el chevron de la puerta (30). A 390 px son 63: caben «Clientes»,
     «Galerias», «Edicion», «Dinero» e «Inicio»; «Calendario» (80) se recorta. Solo con la cara en la fila; en la bienvenida no hay nada que esquivar. */
  .chat-limpio body.xc-on .chatpane:is(:not(.xb-modo), .xb-carta) #tel-fila-xa #xa-uso{ padding:0 var(--e-1); }
  .chat-limpio body.xc-on .chatpane:is(:not(.xb-modo), .xb-carta) #tel-fila-xa #tel-a-crm{ padding-left:var(--e-1); }
  .chat-limpio body.xc-on .chatpane:is(:not(.xb-modo), .xb-carta) #tel-a-crm-txt{ max-width:max(36px, calc(50vw - 132px)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Daniel, 12 nov («Icono de la seccion»): en el telefono la puerta lleva el ICONO de la seccion en lugar de su nombre, el mismo dibujo y color de su puerta en
     la hoja de abajo (widgets-inicio.css); «Calend...» recortado no decia nada. Siempre en el telefono, tambien en la bienvenida: que la misma puerta no cambie de
     forma al escribir el primer mensaje. El nombre sigue en aria-label. `con-ico` lo pone telSincEtiqueta solo si hay dibujo: sin el, la palabra de antes (con
     el recorte de arriba). Fuera del telefono el dibujo nace escondido (styles.css, junto a .tel-fila-xa) y queda la palabra. */
  .chat-limpio body #tel-a-crm.con-ico #tel-a-crm-txt{ display:none; }
  .chat-limpio body #tel-a-crm.con-ico .tel-a-crm-ico{ display:inline-flex; align-items:center; }
}
/* Columna angosta (menos de 340 px, en telefono o con el divisor arrastrado): xarpie-cara.css fija la cara en 140 px con un id y un atributo,
   y le ganaba a las reglas de arriba (la cara chica salia GRANDE tapando los mensajes). Esta lleva los dos ids para ganarle. */
.chat-limpio body #chatpane[data-xc-ancho="estrecho"]:is(:not(.xb-modo), .xb-carta) #xc-cara .xc-svg{ width:56px; }
@media (min-width:861px){ .chat-limpio body.nav-lat-on #chatpane[data-xc-ancho="estrecho"]:is(:not(.xb-modo), .xb-carta) #xc-cara .xc-svg{ width:64px; } }
/* Un telefono angosto no tiene lugar para el nombre entre «Chats» y la puerta al CRM: solo la cara, al centro. El estado lo sigue
   diciendo #xc-voz a un lector de pantalla. */
@media (max-width:359px){
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cabeza{ margin-left:-28px; }
  .chat-limpio body .chatpane:is(:not(.xb-modo), .xb-carta) #xc-cabeza :is(.xc-nombre, .xc-estado){ display:none; }
}

/* ================= Sin avatar en cada respuesta ================= */
/* La cara de arriba ya dice quien habla. Lo de Xarpie empieza en la orilla y todo lo que colgaba con 40 px de sangria (para alinearse con
   el avatar) va a la orilla tambien: con el chat al lado del CRM, la tarjeta de accion se salia por la derecha de la columna. Tus mensajes
   conservan su relleno, asi se sigue viendo quien es quien. */
.chat-limpio #chat-msgs .brow-ai > .ava{ display:none; }
.chat-limpio #chat-msgs .brow-ai{ gap:0; }
:root.chat-limpio[data-theme] #chat-msgs :is(.xtarjeta, .browwidgets, .xarpie-sig, .xarpie-idea, .turno-chips, .xaviso, .xarpieabrir, .xarpiepreg, .xnotifs, .brow-local-tag),
:root.chat-limpio[data-theme] #chat-msgs .brow > .xarpie-efectos{ margin-left:0; }
:root.chat-limpio[data-theme] #chat-msgs :is(.browwidgets, .xarpie-idea){ flex-basis:100%; }
.chat-limpio #chat-msgs .brow-ai .bubwrap{ max-width:100%; }

/* ================= Copiar, WhatsApp y pulgares: solo en la ultima respuesta (pantalla tactil) ================= */
/* En escritorio ya esperan al raton (styles.css) y se quedan asi. En tactil se veian bajo CADA respuesta: ahora solo bajo la ultima, y
   tocar una anterior los trae (app.js, «cl-abierta»). «Ultima» = la fila de Xarpie que no tiene otra despues: sin JS que la marque. */
@media (hover:none){
  .chat-limpio #chat-msgs .brow-ai:has(~ .brow-ai):not(.cl-abierta) .bubtools{ display:none; }
}

/* ================= Leer mejor en escritorio ================= */
/* 16 px con interlineado de 1.6 (era 14 px), y en "solo chat" una columna de 640 px: unos 70 caracteres por renglon a ese tamano. */
@media (min-width:861px){
  :root.chat-limpio[data-theme] #chat-msgs .bub{ font-size:var(--t-campo); line-height:1.6; }
  .chat-limpio body #app.crm-colapsado .chatpane .chatscroll,
  .chat-limpio body #app.crm-colapsado .chatpane .chips{ padding-inline:max(0px, calc((100% - 640px) / 2)); }
  .chat-limpio body #app.crm-colapsado .chatpane .composer,
  .chat-limpio body #app.crm-colapsado .chatpane .attach-prev{ max-width:640px; }
  /* Con la carta de entrada (.xb-carta) las ideas y la linea de avisos van en esa MISMA columna: sin esto ocupaban todo el ancho del chat y cada una empezaba
     en un margen distinto al de la caja (el «un solo margen» del lienzo «A+»). */
  .chat-limpio body #app.crm-colapsado .chatpane.xb-carta > .xb-ideas:not([hidden]),
  .chat-limpio body #app.crm-colapsado .chatpane.xb-carta > .xn-linea:not([hidden]){ width:100%; max-width:640px; margin-inline:auto; box-sizing:border-box; }
}
/* <<< CHAT-LIMPIO-FIN */