/* CRM de seguros — sistema visual «Vidrio de mar».
   ===========================================================================
   Identidad propia (07-10-2026): ya no es la copia de Estatefy. La idea es la
   de una oficina de seguros de confianza: un verde azulado de petróleo hondo
   como color de la casa, menta para acompañar y un coral cálido que sale muy
   poco (el globo de la campanita, el logotipo, el brillo del canto).

   El cristal es «vidrio de mar»: teñido del color de la casa, con un canto de
   refracción (un pelo de luz que se descompone en menta y coral, como un
   prisma), un brillo dentro arriba y capas de profundidad. Solo lo que flota
   es de cristal: el riel de la izquierda, la barra fina de arriba, las
   pestañas del móvil, los menús y las ventanas. Las tarjetas con datos son
   sólidas y limpias, para leerse bien.

   Cómo está organizado:

     1. Fichas de color (claro y oscuro, completas)
     2. Medidas, formas, cristal, sombras, tiempos y tipografía
     3. Base y el fondo de luz
     4. Controles: botones, campos, desplegables, casillas
     5. Piezas: tarjetas, chips, pestañas, tablas, ventanas, avisos
     6. Las cifras
     7. Piezas de las pantallas (ficha, conversación, gráficas…)
     8. Movimiento y esqueletos de carga
     9. El armazón: riel de la izquierda y barra fina de arriba (js/barra.js)
    10. En el móvil: pestañas de abajo y la hoja «Más»
    11. Buscador (js/buscar.js) y campanita (js/campanita.js)
    12. El vidrio de mar: canto de refracción
    13. Entre pantallas
    14. Fácil de pulsar con el dedo
    15. Cuando no se puede o no se quiere: transparencia, contraste, movimiento

   Reglas que se siguen en todo el archivo:

   - Sobre el color de la casa nunca se escribe un blanco a pelo:
     var(--sobre-acento). Sobre un color de estado, var(--sobre-color).
   - El verde, el ámbar y el rojo SOLO dicen un estado (bien, atención, mal).
     El índigo es el asistente de IA y el ciruela, la póliza o venta: tampoco
     se usan para otra cosa. El coral es adorno y sale poco.
   - Al añadir algo se tira de las escalas (--e1…--e8, --radio-*, --sombra-*,
     --rapido/--medio/--lento, --salida/--entrada/--muelle) en vez de
     inventar un valor.
   - Sin estilos en el HTML (la CSP los bloquea): todo va aquí.
   =========================================================================== */

/* ==========================================================================
   1. Fichas de color
   --------------------------------------------------------------------------
   Claro: grises cálidos con un punto de verde, tinta de petróleo (nunca
   negro) y el petróleo #0E5E6F para lo que se pulsa. Oscuro: una tinta honda
   teñida del mismo petróleo (#0A181C), nunca negro puro.

   El tema no se decide con prefers-color-scheme sino con el atributo
   data-tema que pone js/tema.js antes de pintar. Cada bloque lleva la paleta
   entera, sin heredar nada del otro.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Superficies, de atrás hacia delante. */
  --fondo: #EEF2F0;
  --panel: #FFFFFF;
  --panel-alto: #FFFFFF;
  --hundido: #F3F6F4;

  /* Líneas. */
  --linea: #E3E9E6;
  --borde: #CCD6D2;
  --borde-fuerte: #98A7A2;

  /* Tinta. */
  --texto: #13292D;
  --suave: #4C6064;
  --tenue: #82918E;

  /* El petróleo de la casa: lo que se pulsa. */
  --acento: #0E5E6F;
  --acento-alto: #0A4E5D;
  --acento-vivo: #15839A;
  --acento-claro: #E1EFF0;
  --acento-borde: #B2D4D9;
  --sobre-acento: #FFFFFF;
  --acento-degradado: linear-gradient(180deg, #17768A 0%, #0E5E6F 100%);
  --acento-degradado-alto: linear-gradient(180deg, #13697B 0%, #0A4E5D 100%);
  --anillo: color-mix(in srgb, #15839A 55%, transparent);

  /* Los compañeros: menta (apoyo) y coral (acento cálido, poco). */
  --menta: #3BB9A1;
  --menta-claro: #DCF2EC;
  --coral: #D65B40;
  --coral-claro: #FCE8E1;
  --sobre-coral: #FFFFFF;

  /* Los tres estados. No son decoración. */
  --bien: #2B7A3E;
  --bien-claro: #E5F3E8;
  --bien-borde: #B5DBBE;
  --aviso: #A35800;
  --aviso-claro: #FDF1DF;
  --aviso-borde: #EFD0A3;
  --peligro: #C22A33;
  --peligro-claro: #FCEAEA;
  --peligro-borde: #F0BEC1;

  /* El asistente de IA (índigo) y la póliza o venta (ciruela). */
  --ia: #5A4ED0;
  --ia-claro: #EEECFB;
  --ia-borde: #CBC5F2;
  --venta: #A03A7C;
  --venta-claro: #F8E8F2;
  --venta-borde: #E6BFD7;
  /* Lo que se escribe encima de un color lleno (estado, IA, venta). */
  --sobre-color: #FFFFFF;

  --tinta-sombra: 9 40 46;

  /* El cristal: teñido de petróleo y menta. */
  --vidrio: rgb(241 248 247 / .6);
  --vidrio-hoja: rgb(247 251 250 / .9);
  --vidrio-tinte: linear-gradient(165deg, rgb(59 185 161 / .12) 0%, rgb(14 94 111 / .05) 55%, rgb(214 91 64 / .04) 100%);
  --vidrio-borde: rgb(255 255 255 / .5);
  --vidrio-luz: rgb(255 255 255 / .9);
  --vidrio-sombra-dentro: rgb(14 94 111 / .08);
  /* El canto de refracción: luz blanca que se abre en menta y coral. */
  --refraccion: conic-gradient(from 215deg,
    rgb(255 255 255 / .95), rgb(118 222 200 / .85) 11%, rgb(255 255 255 / .25) 26%,
    rgb(14 94 111 / .3) 44%, rgb(255 255 255 / .2) 60%, rgb(240 140 112 / .6) 77%,
    rgb(255 255 255 / .95));

  /* Rellenos de controles y carriles: con un punto de petróleo, no grises. */
  --control: rgb(14 94 111 / .07);
  --control-encima: rgb(14 94 111 / .13);
  --seleccion: #FFFFFF;
  --campo: #FFFFFF;
  --campo-borde: #C9D4D0;
  --carril: rgb(14 94 111 / .055);
  --boton-fondo: linear-gradient(180deg, #FFFFFF 0%, #F2F6F4 100%);
  --boton-fondo-encima: linear-gradient(180deg, #FFFFFF 0%, #E9F1EF 100%);
  --boton-borde: #C9D4D0;
  --boton-brillo: rgb(255 255 255 / .9);

  /* Las tarjetas con datos: sólidas y limpias. */
  --tarjeta: var(--panel);
  --tarjeta-borde: #DFE6E3;
  --tarjeta-sombra: 0 1px 2px rgb(9 40 46 / .05), 0 12px 30px -18px rgb(9 40 46 / .22);

  /* El avatar y los avisos que suben. */
  --avatar: linear-gradient(135deg, #2FAE97 0%, #0E5E6F 100%);
  --tostada: #12343A;
  --sobre-tostada: #EAF5F3;

  /* Las luces quietas del fondo. */
  --luz-1: 59 185 161 / .26;
  --luz-2: 21 131 154 / .2;
  --luz-3: 214 91 64 / .1;
  --onda: 255 255 255 / .55;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #0A181C;
  --panel: #10242A;
  --panel-alto: #163038;
  --hundido: #0D1F24;

  --linea: #1B343A;
  --borde: #29464D;
  --borde-fuerte: #4C6A71;

  --texto: #E3EEEC;
  --suave: #9AB0AF;
  --tenue: #678184;

  --acento: #45BAC7;
  --acento-alto: #69CBD5;
  --acento-vivo: #5CD3C2;
  --acento-claro: #0F3239;
  --acento-borde: #1F525B;
  --sobre-acento: #04232A;
  --acento-degradado: linear-gradient(180deg, #5CC6D1 0%, #3BAAB8 100%);
  --acento-degradado-alto: linear-gradient(180deg, #74D1DA 0%, #4BB7C4 100%);
  --anillo: color-mix(in srgb, #5CD3C2 60%, transparent);

  --menta: #5CD5BD;
  --menta-claro: #103530;
  --coral: #F08B6F;
  --coral-claro: #3A1E17;
  --sobre-coral: #2A0E07;

  --bien: #55C47F;
  --bien-claro: #0F2A1C;
  --bien-borde: #1F4A31;
  --aviso: #F0A445;
  --aviso-claro: #2B1F0C;
  --aviso-borde: #57401B;
  --peligro: #FF6E70;
  --peligro-claro: #311517;
  --peligro-borde: #5D2528;

  --ia: #9D93FF;
  --ia-claro: #1C1A3E;
  --ia-borde: #393371;
  --venta: #E585C5;
  --venta-claro: #33172B;
  --venta-borde: #5E2B4F;
  --sobre-color: #0A181C;

  --tinta-sombra: 0 6 8;

  --vidrio: rgb(15 36 42 / .62);
  --vidrio-hoja: rgb(15 34 40 / .93);
  --vidrio-tinte: linear-gradient(165deg, rgb(92 213 189 / .09) 0%, rgb(69 186 199 / .03) 55%, rgb(240 139 111 / .03) 100%);
  --vidrio-borde: rgb(160 230 220 / .1);
  --vidrio-luz: rgb(200 255 245 / .1);
  --vidrio-sombra-dentro: rgb(0 0 0 / .25);
  --refraccion: conic-gradient(from 215deg,
    rgb(170 240 228 / .5), rgb(92 213 189 / .4) 11%, rgb(255 255 255 / .05) 26%,
    rgb(69 186 199 / .22) 44%, rgb(255 255 255 / .04) 60%, rgb(240 139 111 / .3) 77%,
    rgb(170 240 228 / .5));

  --control: rgb(120 200 200 / .09);
  --control-encima: rgb(120 200 200 / .16);
  --seleccion: #1D3C44;
  --campo: #0D2025;
  --campo-borde: #2A474E;
  --carril: rgb(120 200 200 / .06);
  --boton-fondo: linear-gradient(180deg, #19353C 0%, #142C32 100%);
  --boton-fondo-encima: linear-gradient(180deg, #1F3F47 0%, #18343B 100%);
  --boton-borde: #2B4950;
  --boton-brillo: rgb(255 255 255 / .06);

  --tarjeta: var(--panel);
  --tarjeta-borde: #1C363C;
  --tarjeta-sombra: 0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -18px rgb(0 0 0 / .6);

  --avatar: linear-gradient(135deg, #2E9F8C 0%, #176877 100%);
  --tostada: #DCEBE8;
  --sobre-tostada: #0A181C;

  --luz-1: 32 128 114 / .26;
  --luz-2: 22 94 112 / .34;
  --luz-3: 150 72 50 / .12;
  --onda: 160 240 225 / .07;
}

/* ==========================================================================
   2. Medidas, formas, cristal, sombras, tiempos y tipografía
   ========================================================================== */

:root {
  /* Formas: rectángulos suaves, no cápsulas. */
  --radio-xs: 6px;
  --radio: 10px;
  --radio-g: 14px;
  --radio-xg: 20px;
  --redondo: 999px;

  /* Cristal: background var(--cristal), backdrop-filter var(--cristal-filtro),
     box-shadow var(--cristal-sombra) y el canto del apartado 12. */
  --cristal-filtro: blur(22px) saturate(160%);
  --cristal-filtro-fino: blur(14px) saturate(150%);
  --tarjeta-filtro: none;
  --cristal: var(--vidrio-tinte), var(--vidrio);
  --cristal-hoja: var(--vidrio-tinte), var(--vidrio-hoja);
  --cristal-sombra:
    inset 0 1px 0 var(--vidrio-luz),
    inset 0 -1px 0 var(--vidrio-sombra-dentro),
    0 1px 2px rgb(var(--tinta-sombra) / .06),
    0 16px 36px -16px rgb(var(--tinta-sombra) / .3);
  --cristal-sombra-alta:
    inset 0 1px 0 var(--vidrio-luz),
    inset 0 -1px 0 var(--vidrio-sombra-dentro),
    0 2px 6px rgb(var(--tinta-sombra) / .08),
    0 34px 80px -24px rgb(var(--tinta-sombra) / .45);

  /* Espacio: una sola escala. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 22px;
  --e6: 30px;
  --e7: 42px;
  --e8: 58px;

  /* Sombras de lo que no es cristal. */
  --sombra: 0 1px 2px rgb(var(--tinta-sombra) / .06);
  --sombra-media: 0 1px 2px rgb(var(--tinta-sombra) / .05), 0 8px 22px -8px rgb(var(--tinta-sombra) / .16);
  --sombra-alta: 0 2px 6px rgb(var(--tinta-sombra) / .07), 0 18px 40px -14px rgb(var(--tinta-sombra) / .26);
  --sombra-flotante: 0 4px 12px rgb(var(--tinta-sombra) / .1), 0 26px 60px -18px rgb(var(--tinta-sombra) / .4);

  /* Tiempos. */
  --rapido: 120ms;
  --medio: 200ms;
  --lento: 340ms;
  --muy-lento: 520ms;

  /* Curvas. */
  --salida: cubic-bezier(.22, 1, .36, 1);
  --entrada: cubic-bezier(.4, 0, .2, 1);
  --muelle: cubic-bezier(.32, 1.2, .56, 1);
  --muelle-lente: linear(0, 0.03, 0.107, 0.214, 0.336, 0.463, 0.586, 0.699, 0.798, 0.882, 0.95, 1.002, 1.04, 1.065, 1.08, 1.086, 1.085, 1.08, 1.072, 1.062, 1.051, 1.04, 1.03, 1.021, 1.013, 1.007, 1.002, 0.998, 0.995, 0.994, 0.993, 0.993, 0.993, 0.993, 0.994, 0.995, 1);
  --lente-tiempo: 480ms;

  /* La tipografía del sistema (las fuentes solo pueden venir del servidor y
     no se sirve ninguna): la de texto para leer, la «Display» para títulos y
     cifras grandes cuando el sistema la tiene. */
  --fuente: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
            system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulo: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
            system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: var(--fuente);
  --codigo: ui-monospace, 'Cascadia Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* El rótulo pequeño: versalitas espaciadas en gris. */
  --rotulo: 650 11.5px/1.4 var(--fuente);
  --rotulo-letra: .06em;

  /* El armazón. */
  --ancho-riel: 248px;
  --ancho-riel-plegado: 78px;
  --alto-barra: 58px;
  --alto-pestanas: 66px;
}
:root[data-riel="plegado"] { --ancho-riel: var(--ancho-riel-plegado); }
@media (min-width: 721px) and (max-width: 1080px) { :root { --ancho-riel: var(--ancho-riel-plegado); } }

/* ==========================================================================
   3. Base y el fondo de luz
   ========================================================================== */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
html { min-height: 100%; background: var(--fondo); }
/* El fondo: luz quieta que entra por el agua. Tres manchas suaves (menta
   arriba a la izquierda, petróleo a la derecha, un calor de coral abajo) y
   unos anillos finos de cáustica, muy tenues. Nada se mueve. */
html::before, html::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
}
html::before {
  background:
    radial-gradient(55% 48% at 4% 0%, rgb(var(--luz-1)), transparent 70%),
    radial-gradient(42% 52% at 100% 22%, rgb(var(--luz-2)), transparent 72%),
    radial-gradient(50% 42% at 78% 104%, rgb(var(--luz-3)), transparent 70%);
}
html::after {
  background:
    radial-gradient(closest-side, transparent 93%, rgb(var(--onda)) 97%, transparent 100%) -8vw -30vh / 62vw 70vh no-repeat,
    radial-gradient(closest-side, transparent 92%, rgb(var(--onda)) 97%, transparent 100%) 18vw -18vh / 44vw 52vh no-repeat,
    radial-gradient(closest-side, transparent 94%, rgb(var(--onda)) 98%, transparent 100%) 64vw 58vh / 54vw 64vh no-repeat,
    linear-gradient(118deg, transparent 38%, rgb(var(--onda)) 50%, transparent 62%);
  opacity: .55;
  -webkit-mask: linear-gradient(180deg, #000, transparent 85%);
  mask: linear-gradient(180deg, #000, transparent 85%);
}

body {
  min-height: 100vh;
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -.006em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-family: var(--fuente-titulo); font-size: 1.85rem; font-weight: 700; letter-spacing: -.022em; margin-bottom: var(--e4); }
h2 { font-family: var(--fuente-titulo); font-size: 1.16rem; font-weight: 650; letter-spacing: -.012em; margin-bottom: var(--e3); }
h3 { font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave); margin-bottom: var(--e2); }
p { margin: 0 0 var(--e3); text-wrap: pretty; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; border-radius: 4px; }

code, .mono { font-family: var(--codigo); font-size: .84em; }
code { padding: 1px 6px; border-radius: var(--radio-xs); background: var(--carril); overflow-wrap: anywhere; }

.etiqueta { font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave); }
.suave { color: var(--suave); }
.pequeno { font-size: .84rem; }
.derecha { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: var(--redondo); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--borde-fuerte); background-clip: content-box; }
::selection { background: color-mix(in srgb, var(--menta) 32%, transparent); color: var(--texto); }
th { user-select: none; }

/* La página: ancha pero no infinita. Con el riel, la columna de la derecha. */
main.principal { max-width: 1320px; margin: 0 auto; padding: var(--e4) var(--e5) var(--e8); }
body > main.principal:first-child { padding-top: var(--e7); }
@media (max-width: 560px) { main.principal { padding: var(--e3) var(--e4) var(--e7); } }

/* La cinta de la oficina de demostración: una etiqueta ámbar pequeña. */
.aviso-demo {
  position: relative; z-index: 701;
  width: fit-content; max-width: calc(100% - 24px);
  margin: 10px auto 0; padding: 3px 12px;
  border-radius: var(--radio-xs);
  background: var(--aviso-claro); color: var(--aviso);
  border: 1px solid var(--aviso-borde);
  font-size: .76rem; font-weight: 650; text-align: center;
}

/* Disposición. */
.fila { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.fila > h1, .fila > h2 { margin-bottom: 0; }
.fila.entre:has(> h1) { margin-bottom: var(--e5); }
.columna { display: flex; flex-direction: column; gap: var(--e3); }
@media (max-width: 560px) {
  .fila > select, .fila > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 100%; width: 100% !important; }
}
.separador { height: 1px; background: transparent; margin: var(--e2) 0; }
.rejilla { display: grid; gap: var(--e4); }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.rejilla.ficha { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; }
@media (max-width: 1080px) { .rejilla.ficha { grid-template-columns: minmax(0, 1fr); } }
.rejilla > * { min-width: 0; }
.rejilla > .tarjeta { margin-bottom: 0; }

/* ==========================================================================
   4. Controles
   ========================================================================== */

/* Los botones: rectángulos de esquinas suaves con un degradado leve y un
   brillo de un pelo arriba. El principal, lleno del petróleo. */
.boton {
  appearance: none;
  position: relative;
  border: 1px solid var(--boton-borde);
  background: var(--boton-fondo);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 9px 16px;
  min-height: 42px;
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--boton-brillo), 0 1px 2px rgb(var(--tinta-sombra) / .06);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition:
    background var(--rapido) var(--entrada),
    border-color var(--rapido) var(--entrada),
    box-shadow var(--rapido) var(--entrada),
    opacity var(--rapido) var(--entrada),
    transform var(--medio) var(--muelle);
}
.boton:hover { background: var(--boton-fondo-encima); border-color: var(--borde-fuerte); text-decoration: none; }
.boton:active { transform: translateY(1px) scale(.985); }
.boton:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.boton[disabled] { opacity: .45; cursor: default; transform: none; }
.boton[disabled]:hover { background: var(--boton-fondo); border-color: var(--boton-borde); }

.boton.principal {
  background: var(--acento-degradado); color: var(--sobre-acento);
  border-color: color-mix(in srgb, var(--acento-alto) 70%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(var(--tinta-sombra) / .2), 0 8px 18px -10px color-mix(in srgb, var(--acento) 80%, transparent);
}
.boton.principal:hover { background: var(--acento-degradado-alto); border-color: var(--acento-alto); }
.boton.principal[disabled]:hover { background: var(--acento-degradado); }
.boton.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--acento); }
.boton.fantasma:hover { background: var(--control); border-color: transparent; }
.boton.peligro { color: var(--peligro); background: var(--peligro-claro); border-color: var(--peligro-borde); box-shadow: none; }
.boton.peligro:hover { background: color-mix(in srgb, var(--peligro) 16%, var(--panel)); border-color: var(--peligro); }
.boton.ancho { width: 100%; }
.boton.pequeno { min-height: 34px; padding: 5px 12px; font-size: .87rem; border-radius: 8px; }
.boton svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 560px) { .boton { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; } }

/* El botón de cerrar ventanas: un cuadrado suave con el aspa. */
.cerrar {
  appearance: none; flex: none; cursor: pointer;
  width: 34px; height: 34px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radio);
  background: var(--control); color: var(--suave);
  transition: background var(--rapido) var(--entrada), color var(--rapido), transform var(--medio) var(--muelle);
}
.cerrar:hover { background: var(--control-encima); color: var(--texto); }
.cerrar:active { transform: scale(.92); }
.cerrar:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.cerrar svg { width: 12px; height: 12px; display: block; }

/* Los campos. */
input, select, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--campo);
  border: 1px solid var(--campo-borde);
  border-radius: var(--radio);
  padding: 9px 12px;
  min-height: 42px;
  max-width: 100%;
  min-width: 0;
  box-shadow: inset 0 1px 2px rgb(var(--tinta-sombra) / .04);
  transition:
    border-color var(--rapido) var(--entrada),
    box-shadow var(--medio) var(--entrada),
    background var(--rapido) var(--entrada);
}
input:hover:not(:focus):not([type="checkbox"]):not([type="radio"]),
select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--borde-fuerte); }
textarea { width: 100%; min-height: 84px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--tenue); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento-vivo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento-vivo) 22%, transparent);
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 40px var(--panel) inset;
  caret-color: var(--texto);
}
select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--suave) 50%),
    linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option, select optgroup { background-color: var(--panel); color: var(--texto); }
select option:disabled { color: var(--tenue); }
:root[data-tema="oscuro"] select { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--acento); width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; cursor: pointer; box-shadow: none;
}
input[type="file"] { padding: 8px 10px; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

label.campo { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--suave); }
label.campo > input:not([type="checkbox"]):not([type="radio"]), label.campo > select, label.campo > textarea {
  width: 100%; font-size: .95rem; font-weight: 400; color: var(--texto);
}
label.casilla { display: inline-flex; gap: 9px; align-items: center; cursor: pointer; font-size: .93rem; line-height: 1.4; }
.formulario { display: grid; gap: var(--e4) var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.formulario .ancho { grid-column: 1 / -1; }

/* ==========================================================================
   5. Piezas
   ========================================================================== */

/* La tarjeta de datos: sólida, con un borde fino y una sombra corta. */
.tarjeta {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-g);
  padding: var(--e5);
  box-shadow: var(--tarjeta-sombra);
  margin-bottom: var(--e4);
}
.tarjeta > h2:first-child { margin-top: 0; }
.tarjeta > .fila.entre:first-child { margin-bottom: var(--e3); }
.tarjeta > .fila.entre:first-child > h2 { margin-bottom: 0; }
@media (max-width: 560px) { .tarjeta { padding: var(--e4); } }

.vacio { padding: 28px 16px; text-align: center; color: var(--suave); font-size: .92rem; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; flex: none; }

/* Pastillas de estado: rectángulos pequeños de esquinas suaves. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 7px;
  font-size: .76rem; font-weight: 650; line-height: 1.4; letter-spacing: 0;
  background: var(--carril); color: var(--texto); white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}
.chip.ok { background: var(--bien-claro); color: var(--bien); border-color: var(--bien-borde); }
.chip.aviso { background: var(--aviso-claro); color: var(--aviso); border-color: var(--aviso-borde); }
.chip.error { background: var(--peligro-claro); color: var(--peligro); border-color: var(--peligro-borde); }
.chip.info { background: var(--acento-claro); color: var(--acento); border-color: var(--acento-borde); }
.chip.acento, .chip.ia { background: var(--ia-claro); color: var(--ia); border-color: var(--ia-borde); }
.chip.venta { background: var(--venta-claro); color: var(--venta); border-color: var(--venta-borde); }
.chip.inactivo { background: var(--carril); color: var(--suave); }
h2 .chip { margin-left: 6px; vertical-align: 3px; }

/* --- Pestañas: control segmentado en un carril ------------------------------ */
.pestanas {
  display: flex; gap: 2px; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin: 0 0 var(--e5); padding: 4px;
  background: var(--carril);
  border: 1px solid var(--linea);
  border-radius: 12px;
}
.pestanas button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 550; font-size: .9rem; color: var(--suave);
  padding: 7px 15px; border-radius: 8px;
  transition: background var(--medio) var(--salida), color var(--rapido), box-shadow var(--medio) var(--salida), transform var(--medio) var(--muelle);
}
.pestanas button:hover:not(.activa):not([aria-current="page"]) { background: var(--control); color: var(--texto); }
.pestanas button:active { transform: scale(.97); }
.pestanas button.activa, .pestanas button[aria-current="page"] {
  font-weight: 650; color: var(--acento);
  background: var(--seleccion);
  box-shadow: 0 1px 2px rgb(var(--tinta-sombra) / .12), 0 2px 8px -2px rgb(var(--tinta-sombra) / .14), 0 0 0 1px rgb(var(--tinta-sombra) / .04);
}
:root[data-tema="oscuro"] .pestanas button.activa, :root[data-tema="oscuro"] .pestanas button[aria-current="page"] { color: var(--texto); }
.pestanas button:focus-visible { outline: 3px solid var(--anillo); outline-offset: 1px; }
.pestanas button .num { font-weight: 700; margin-left: 5px; color: var(--tenue); }
.pestanas button.activa .num { color: var(--acento); }
@media (max-width: 560px) {
  .pestanas { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas button { flex: none; }
}

/* --- Tablas ------------------------------------------------------------------
   Cabecera en rótulo de versalitas, filas altas y la fila bajo el ratón
   marcada entera con una pestaña de menta al margen. */
.tabla-envoltorio { overflow-x: auto; border-radius: var(--radio); }
.tarjeta > .tabla-envoltorio { margin: 0 calc(-1 * var(--e2)); }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; background: transparent; }
.tabla th, .tabla td { padding: 11px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.tabla th {
  font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave);
  white-space: nowrap; padding-top: 6px; padding-bottom: 9px;
  position: sticky; top: 0; z-index: 1;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla th.ordenable { cursor: pointer; }
.tabla th.ordenable:hover { color: var(--texto); }
.tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla td.num { font-weight: 650; }
.tabla tbody tr { transition: background var(--rapido) var(--entrada); }
.tabla tbody tr td { transition: background var(--rapido) var(--entrada); }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover td { background: var(--carril); }
.tabla tr.clicable:hover td:first-child { box-shadow: inset 3px 0 0 var(--menta); }
.tabla tr.total td { font-weight: 700; background: var(--carril); }
.tabla td > .chip + .chip { margin-left: 4px; }
@media (max-width: 560px) {
  table.tabla { min-width: 600px; }
  .tabla th, .tabla td { padding: 10px 9px; }
}

/* --- Ventanas (<dialog>): vidrio de mar, la pieza más gruesa ------------------ */
dialog {
  border: 0;
  border-radius: var(--radio-xg);
  padding: 0;
  background: var(--cristal-hoja);
  -webkit-backdrop-filter: var(--cristal-filtro);
  backdrop-filter: var(--cristal-filtro);
  color: var(--texto);
  box-shadow: var(--cristal-sombra-alta);
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
}
dialog::backdrop { background: rgb(var(--tinta-sombra) / .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fundir var(--medio) var(--entrada); }
dialog[open] { animation: ventana var(--lente-tiempo) var(--muelle-lente); }
dialog.cerrando { animation: ventana-sale 160ms var(--entrada) forwards; }
dialog.cerrando::backdrop { animation: fundir-sale 160ms var(--entrada) forwards; }
@keyframes ventana { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes ventana-sale { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes fundir { from { opacity: 0; } }
@keyframes fundir-sale { to { opacity: 0; } }

dialog.modal { width: min(580px, calc(100vw - 24px)); overflow: hidden; display: none; flex-direction: column; }
dialog.modal[open] { display: flex; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e5) var(--e5) var(--e3); }
.modal-cab h2 { margin: 0; font-size: 1.2rem; }
.modal-cuerpo { padding: var(--e2) var(--e5) var(--e5); overflow-y: auto; min-height: 0; }
.modal .acciones {
  display: flex; justify-content: flex-end; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3) var(--e5) var(--e5);
  border-top: 1px solid var(--linea);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
}
@media (max-width: 560px) {
  dialog.modal { margin: auto auto 12px; width: calc(100vw - 16px); border-radius: var(--radio-xg); }
  .modal .acciones { flex-direction: column-reverse; }
  .modal .acciones .boton { width: 100%; min-height: 48px; }
}

/* --- Avisos que suben y se van (ui.js avisar) --------------------------------
   Un rectángulo de tinta de petróleo abajo en el centro. Verde si salió
   bien, rojo si no. */
.avisos {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 2000;
  translate: -50% 0;
  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--e2);
  width: max-content; max-width: calc(100vw - 24px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 11px 18px 11px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--tostada) 94%, transparent); color: var(--sobre-tostada);
  -webkit-backdrop-filter: var(--cristal-filtro-fino); backdrop-filter: var(--cristal-filtro-fino);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), var(--sombra-flotante);
  font-size: .9rem; font-weight: 550; line-height: 1.35;
  pointer-events: auto;
  animation: toast-entra var(--lente-tiempo) var(--muelle-lente);
}
.toast.sale { animation: toast-sale 220ms var(--entrada) forwards; }
.toast-icono { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--sobre-tostada) 18%, transparent); }
.toast-icono svg { width: 13px; height: 13px; }
.toast.ok .toast-icono { background: var(--bien); color: var(--sobre-color); }
.toast.error { background: var(--peligro); color: var(--sobre-color); }
.toast.error .toast-icono { background: rgb(255 255 255 / .22); color: inherit; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toast-sale { to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* --- Bloques de aviso dentro de una pantalla: con su filo de color ----------- */
.bloque-aviso, .bloque-error, .bloque-info {
  padding: 12px 16px; border-radius: var(--radio); margin-bottom: var(--e3);
  font-size: .92rem; line-height: 1.5; color: var(--texto);
  border: 1px solid transparent;
  border-left-width: 4px;
}
.bloque-aviso { background: var(--aviso-claro); border-color: var(--aviso-borde); border-left-color: var(--aviso); }
.bloque-error { background: var(--peligro-claro); border-color: var(--peligro-borde); border-left-color: var(--peligro); }
.bloque-info { background: var(--acento-claro); border-color: var(--acento-borde); border-left-color: var(--acento); }
.bloque-aviso.pequeno, .bloque-error.pequeno, .bloque-info.pequeno { font-size: .84rem; padding: 9px 13px; }

/* --- Salud de las conexiones ------------------------------------------------------ */
.indicadores { display: flex; flex-direction: column; gap: 4px; }
.indicador {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: var(--radio); background: var(--carril);
}
.indicador .marca-estado { margin-top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tenue); }
.indicador.ok .marca-estado { background: var(--bien); }
.indicador.aviso .marca-estado { background: var(--aviso); }
.indicador.error .marca-estado { background: var(--peligro); }
.indicador.error { background: var(--peligro-claro); }
.indicador.aviso { background: var(--aviso-claro); }
.indicador .detalle { color: var(--suave); font-size: .82rem; overflow-wrap: anywhere; }

/* --- Varios ---------------------------------------------------------------------- */
/* Pares nombre → valor. La columna del nombre no pasa del 42 % (un nombre de
   campo largo baja de línea en vez de montarse sobre el valor). */
dl.datos { display: grid; grid-template-columns: minmax(0, min(42%, 12rem)) minmax(0, 1fr); gap: 9px 14px; margin: 0; }
dl.datos .dato { display: contents; }
dl.datos dt { font-size: .86rem; font-weight: 500; color: var(--suave); line-height: 1.4; overflow-wrap: anywhere; }
dl.datos dd { margin: 0; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 420px) { dl.datos { grid-template-columns: 1fr; gap: 0; } dl.datos dt { margin-top: 8px; } dl.datos dt:first-child { margin-top: 0; } }

.copiable { display: flex; gap: 6px; align-items: center; }
.copiable code { flex: 1; padding: 8px 12px; border-radius: var(--radio); overflow-x: auto; white-space: nowrap; }
.paginacion { display: flex; gap: var(--e2); align-items: center; justify-content: flex-end; margin-top: var(--e3); flex-wrap: wrap; }
.miniatura { width: 38px; height: 38px; object-fit: cover; border-radius: var(--radio-xs); vertical-align: middle; }
.formula { font-size: .78rem; color: var(--suave); }
details > summary { cursor: pointer; color: var(--suave); font-weight: 600; padding: 4px 0; }
details > summary:hover { color: var(--texto); }

/* La pantalla de entrar: una hoja de vidrio de mar en el centro. */
.entrar { max-width: 410px; margin: 10vh auto 0; }
.entrar-marca { display: flex; align-items: center; gap: 14px; margin: 0 4px var(--e5); }
.entrar-marca img { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 6px 14px rgb(var(--tinta-sombra) / .25)); }
.entrar-marca b { display: block; font: 700 1.5rem/1.15 var(--fuente-titulo); letter-spacing: -.02em; }
.entrar-marca span { display: block; margin-top: 3px; font-size: .92rem; color: var(--suave); line-height: 1.35; }
.entrar .tarjeta {
  padding: var(--e6);
  background: var(--cristal-hoja);
  -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
  border: 0; border-radius: var(--radio-xg);
  box-shadow: var(--cristal-sombra-alta);
}
.entrar h1 { font-size: 1.9rem; }
.entrar .boton { width: 100%; min-height: 48px; margin-top: var(--e2); }
.entrar label.campo input { width: 100%; }

/* ==========================================================================
   6. Las cifras (ui.js cifra)
   --------------------------------------------------------------------------
   Una ficha sólida: qué es arriba, el número grande debajo (cifras de ancho
   fijo) y una pestaña de color en el borde de arriba que dice de qué tipo
   es. Si lleva a una lista, la ficha entera se pulsa y lleva una flecha.
   ========================================================================== */

.cifras {
  --columnas: 4;
  display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: var(--e3); margin-bottom: var(--e5);
}
.cifras:has(> :nth-child(3):last-child), .cifras:has(> :nth-child(9):last-child) { --columnas: 3; }
.cifras:has(> :nth-child(6):last-child) { --columnas: 3; }
.cifras:has(> :nth-child(5):last-child) { --columnas: 5; }
.cifras:has(> :nth-child(2):last-child) { --columnas: 2; }
@media (min-width: 1280px) { .cifras:has(> :nth-child(6):last-child) { --columnas: 6; } }
@media (max-width: 1000px) { .cifras:has(> :nth-child(5):last-child) { --columnas: 3; } .cifras { --columnas: 3; } .cifras:has(> :nth-child(4):last-child), .cifras:has(> :nth-child(8):last-child) { --columnas: 2; } }
@media (max-width: 560px) {
  .cifras { --columnas: 2 !important; gap: 10px; }
  /* Una cifra suelta al final ocupa la fila entera. */
  .cifras > .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.cifra {
  --cifra-color: var(--borde);
  appearance: none; font: inherit; color: inherit;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  min-height: 120px; text-align: left;
  container-type: inline-size;
  background: var(--tarjeta); border: 1px solid var(--tarjeta-borde);
  border-radius: var(--radio-g); padding: 16px 16px 14px;
  box-shadow: var(--tarjeta-sombra);
  animation: subir var(--muy-lento) var(--salida) backwards;
  transition: box-shadow var(--medio) var(--entrada), transform var(--medio) var(--salida), border-color var(--rapido);
}
/* La pestaña de color del borde de arriba. */
.cifra::before {
  content: ''; position: absolute; top: 0; left: 16px;
  width: 30px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--cifra-color);
}
.cifra .etiqueta {
  order: -1; padding-right: 26px;
  font: 600 13.5px/1.3 var(--fuente); letter-spacing: -.003em; text-transform: none; color: var(--suave);
}
.cifra .valor {
  display: block; margin-top: 6px;
  /* Crece con la ficha (y la larga, «80.370,00 €», cabe en una línea también en el móvil). */
  font-family: var(--fuente-titulo); font-size: clamp(1.5rem, 22cqi, 2.35rem); font-weight: 700; line-height: 1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.cifra.larga .valor { font-size: clamp(1.2rem, 14.5cqi, 2.1rem); }
.cifra .detalle { margin-top: auto; padding-top: 6px; font-size: .76rem; color: var(--tenue); line-height: 1.35; max-width: 28ch; }
.cifra.destacada { --cifra-color: var(--acento-vivo); }
.cifra.destacada .valor { color: var(--acento); }
.cifra.alerta { --cifra-color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 30%, var(--tarjeta-borde)); }
.cifra.alerta .valor { color: var(--peligro); }
.cifra.bien { --cifra-color: var(--bien); }
.cifra.bien .valor { color: var(--bien); }
.cifra.ia { --cifra-color: var(--ia); }
.cifra.ia .valor { color: var(--ia); }
.cifra.venta { --cifra-color: var(--venta); }
.cifra.venta .valor { color: var(--venta); }
.cifra.enlace { cursor: pointer; }
.cifra.enlace:hover { transform: translateY(-2px); border-color: var(--acento-borde); box-shadow: var(--tarjeta-sombra), var(--sombra-alta); }
.cifra.enlace:active { transform: scale(.98); transition-duration: var(--rapido); }
.cifra.enlace:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.cifra-flecha {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 7px;
  color: var(--tenue); background: var(--carril);
  transition: color var(--rapido), background var(--rapido), transform var(--medio) var(--muelle);
}
.cifra-flecha svg { width: 10px; height: 10px; }
.cifra.enlace:hover .cifra-flecha { color: var(--sobre-acento); background: var(--acento); transform: translateX(2px); }
.cifras > .cifra:nth-child(2) { animation-delay: 45ms; }
.cifras > .cifra:nth-child(3) { animation-delay: 90ms; }
.cifras > .cifra:nth-child(4) { animation-delay: 135ms; }
.cifras > .cifra:nth-child(5) { animation-delay: 180ms; }
.cifras > .cifra:nth-child(n+6) { animation-delay: 225ms; }
@media (max-width: 560px) {
  .cifra { min-height: 108px; padding: 14px 12px 12px; }
  .cifra::before { left: 12px; }
  .cifra .etiqueta { font-size: 12.5px; }
  .cifra-flecha { top: 9px; right: 9px; }
}

/* ==========================================================================
   7. Piezas de las pantallas
   ========================================================================== */

/* --- Etapas del lead: segmentos en un carril; la actual, llena ---------------- */
.etapas { display: flex; gap: 3px; flex-wrap: wrap; padding: 4px; background: var(--carril); border: 1px solid var(--linea); border-radius: 12px; width: fit-content; max-width: 100%; }
.etapas button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 550; color: var(--texto);
  padding: 7px 13px; border-radius: 8px;
  transition: background var(--medio) var(--salida), color var(--rapido), transform var(--medio) var(--muelle);
}
.etapas button:hover { background: var(--control); }
.etapas button:active { transform: scale(.96); }
.etapas button.actual { background: var(--acento-degradado); color: var(--sobre-acento); font-weight: 650; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 4px 10px -4px color-mix(in srgb, var(--acento) 60%, transparent); }
.etapas button.ganada { color: var(--bien); }
.etapas button.perdida { color: var(--peligro); }
.etapas button.ganada.actual { background: var(--bien); color: var(--sobre-color); }
.etapas button.perdida.actual { background: var(--peligro); color: var(--sobre-color); }
.etapas button:focus-visible { outline: 3px solid var(--anillo); outline-offset: 1px; }

/* --- Historial: cada cosa en su renglón, con el día y quién ------------------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linea-tiempo li {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px;
  padding: 11px 13px; border-radius: 12px; background: var(--carril);
  animation: subir var(--lento) var(--salida) backwards;
}
.linea-tiempo .cuando { color: var(--suave); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.linea-tiempo .quien { margin-top: 4px; font-size: .74rem; }
.linea-tiempo .cuerpo {
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto); font-size: .9rem;
  margin-top: 6px; padding: 8px 11px; border-radius: 9px; background: var(--panel);
}
@media (max-width: 560px) {
  .linea-tiempo li { grid-template-columns: 1fr; gap: 4px; }
  .linea-tiempo .quien { display: inline-block; margin: 0 0 0 6px; }
}

/* --- Conversación: burbujas ----------------------------------------------------- */
.chat {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 460px; overflow-y: auto; padding: 10px;
  border-radius: var(--radio); background: var(--hundido);
  border: 1px solid var(--linea);
}
.burbuja {
  max-width: 80%; padding: 8px 13px; border-radius: 16px;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.4;
}
.burbuja.entrante { align-self: flex-start; background: var(--panel-alto); color: var(--texto); border-bottom-left-radius: 5px; box-shadow: var(--sombra); border: 1px solid var(--linea); }
.burbuja.saliente { align-self: flex-end; background: var(--ia); color: var(--sobre-color); border-bottom-right-radius: 5px; }
.burbuja .meta { display: block; font-size: .7rem; opacity: .75; margin-top: 3px; }
.chat-funcion {
  align-self: center; max-width: 92%; font-size: .74rem; color: var(--suave);
  font-family: var(--codigo); padding: 3px 10px; border-radius: 8px;
  background: var(--panel); overflow-wrap: anywhere;
}

/* --- Gráficas ------------------------------------------------------------------ */
.grafica { width: 100%; height: auto; display: block; }
.grafica .eje { stroke: var(--linea); }
.grafica .texto-eje { fill: var(--suave); font-size: 11px; font-family: var(--fuente); }
.grafica .serie-1 { stroke: var(--acento-vivo); fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafica .serie-2 { stroke: var(--venta); fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafica .barra-1 { fill: var(--acento-vivo); }
.grafica rect.barra-1, .grafica rect.barra-2 { rx: 3px; }
.grafica .barra-2 { fill: var(--venta); opacity: .85; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--suave); margin-bottom: var(--e2); }
.leyenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda .l1::before { background: var(--acento-vivo); }
.leyenda .l2::before { background: var(--venta); }

/* El embudo: barras que menguan, del petróleo a la menta. */
.embudo { display: flex; flex-direction: column; gap: 8px; }
.embudo .paso { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) 120px; gap: 12px; align-items: center; font-size: .9rem; }
.embudo .barra-embudo {
  height: 30px; min-width: 4px; border-radius: 8px;
  background: linear-gradient(90deg, var(--acento), var(--acento-vivo));
  animation: crecer var(--muy-lento) var(--salida) backwards; transform-origin: left center;
}
/* Lo que cuenta Meta (impresiones, clics), en menta: el índigo es solo del agente de IA. */
.embudo .barra-embudo.meta { background: linear-gradient(90deg, color-mix(in srgb, var(--menta) 70%, var(--panel)), color-mix(in srgb, var(--menta) 45%, var(--panel))); }
.embudo .paso:nth-child(2) .barra-embudo { animation-delay: 70ms; }
.embudo .paso:nth-child(3) .barra-embudo { animation-delay: 140ms; }
.embudo .paso:nth-child(n+4) .barra-embudo { animation-delay: 210ms; }
@media (max-width: 640px) {
  .embudo .paso { grid-template-columns: 1fr auto; }
  .embudo .paso > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   8. Movimiento y esqueletos de carga
   ========================================================================== */

.aparece { animation: subir var(--muy-lento) var(--salida) backwards; animation-delay: calc(min(var(--i, 0), 8) * 45ms); }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }
.crece-barra { animation: crecer var(--muy-lento) var(--salida) backwards; transform-origin: left center; }
@keyframes crecer { from { transform: scaleX(0); } }
.recien { animation: destacar 1.6s var(--entrada); }
@keyframes destacar { from { background: var(--menta-claro); } to { background: transparent; } }

#principal > div > .tarjeta { animation: subir var(--muy-lento) var(--salida) backwards; }
#principal > div > .tarjeta:nth-of-type(2) { animation-delay: 60ms; }
#principal > div > .tarjeta:nth-of-type(3) { animation-delay: 120ms; }
#principal > div > .tarjeta:nth-of-type(n+4) { animation-delay: 180ms; }

.esqueleto { display: grid; gap: var(--e4); padding-top: var(--e2); animation: fundir var(--lento) var(--entrada) backwards; }
.esq {
  position: relative; overflow: hidden;
  border-radius: var(--radio-g); background: var(--carril);
}
.esq::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45) 50%, transparent);
  animation: barrido 1.4s var(--entrada) infinite;
}
:root[data-tema="oscuro"] .esq::after { background: linear-gradient(90deg, transparent, rgb(160 240 225 / .05) 50%, transparent); }
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.esq-titulo { height: 36px; width: min(320px, 70%); border-radius: var(--radio); }
.esq-cifras { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.esq-cifra { height: 120px; }
.esq-bloque { height: 220px; }
.esq-bloque.bajo { height: 140px; }
@media (max-width: 560px) { .esq-cifras { grid-template-columns: repeat(2, 1fr); } .esq-cifra { height: 108px; } .esq-cifras > :nth-child(n+5) { display: none; } }

/* ==========================================================================
   9. El armazón (js/barra.js)
   --------------------------------------------------------------------------
   Ordenador: un riel de vidrio a la izquierda con todas las secciones (icono
   y nombre; se pliega a solo iconos) y una barra fina arriba con el
   buscador, la campanita, el punto de salud, el tema y tu nombre.
   Entre 721 y 1080 px el riel va plegado solo.

   .barra-app es el hueco pegado arriba de la columna de la derecha; el riel
   va fijo dentro (por eso .barra-app no lleva backdrop-filter: haría de
   contenedor de lo fijo).
   ========================================================================== */

.barra-app {
  position: sticky; top: 0; z-index: 700;
  padding: calc(10px + env(safe-area-inset-top)) var(--e5) 6px;
  pointer-events: none;
}
@media (min-width: 721px) {
  body:has(> #barraApp:not([hidden])) { padding-left: calc(var(--ancho-riel) + 12px); transition: padding-left var(--lento) var(--salida); }
}

/* --- El riel ------------------------------------------------------------------ */
.riel {
  pointer-events: auto;
  position: fixed; z-index: 2;
  top: calc(12px + env(safe-area-inset-top)); bottom: 12px; left: 12px;
  width: var(--ancho-riel);
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px 10px;
  border-radius: var(--radio-xg);
  background: var(--cristal);
  -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
  box-shadow: var(--cristal-sombra);
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none;
  transition: width var(--lento) var(--salida);
}
.riel::-webkit-scrollbar { display: none; }
.riel-marca {
  display: flex; align-items: center; gap: 10px; flex: none;
  min-height: 48px; padding: 4px 6px; margin-bottom: 10px;
  color: var(--texto); text-decoration: none; border-radius: var(--radio);
}
.riel-marca:hover { text-decoration: none; }
.riel-marca:focus-visible { outline: 3px solid var(--anillo); outline-offset: 0; }
.riel-marca img { width: 36px; height: 36px; flex: none; display: block; filter: drop-shadow(0 4px 8px rgb(var(--tinta-sombra) / .25)); }
.riel-marca-texto { display: grid; min-width: 0; line-height: 1.2; }
.riel-marca-texto b { font-family: var(--fuente-titulo); font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.riel-marca-texto small { font-size: .74rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.riel-nav { display: grid; gap: 3px; }
.riel-enlace {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 5px 10px 5px 6px;
  border-radius: 12px;
  color: var(--texto); font-weight: 550; font-size: .97rem; text-decoration: none; white-space: nowrap;
  transition: background var(--rapido) var(--entrada), color var(--rapido), box-shadow var(--medio) var(--salida), transform var(--medio) var(--muelle);
}
.riel-enlace:hover { background: var(--control); text-decoration: none; }
.riel-enlace:active { transform: scale(.97); }
.riel-enlace:focus-visible { outline: 3px solid var(--anillo); outline-offset: -1px; }
.riel-icono {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: var(--acento);
  transition: background var(--rapido), color var(--rapido);
}
.riel-icono svg { width: 21px; height: 21px; }
/* La sección donde estás: llena del petróleo, con su brillo de vidrio. */
.riel-enlace[aria-current="page"] {
  background: var(--acento-degradado); color: var(--sobre-acento); font-weight: 650;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 8px 18px -10px color-mix(in srgb, var(--acento) 85%, transparent);
}
.riel-enlace[aria-current="page"] .riel-icono { color: inherit; background: rgb(255 255 255 / .14); }
.riel-separador { height: 1px; margin: 10px 8px; background: linear-gradient(90deg, transparent, var(--borde), transparent); flex: none; }
.riel-pie { margin-top: auto; padding-top: 10px; }
.riel-plegar {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  width: 100%; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 10px 4px 6px; border-radius: 12px;
  color: var(--suave); font-size: .88rem; font-weight: 550; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.riel-plegar:hover { background: var(--control); color: var(--texto); }
.riel-plegar:focus-visible { outline: 3px solid var(--anillo); outline-offset: -1px; }
.riel-plegar .riel-icono { color: inherit; }
.riel-plegar svg { transition: rotate var(--lento) var(--salida); }
:root[data-riel="plegado"] .riel-plegar svg { rotate: 180deg; }

/* El riel plegado: solo iconos (el nombre sigue ahí para el lector de
   pantalla y sale al pasar el ratón como título). */
:root[data-riel="plegado"] .riel-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-riel="plegado"] .riel-enlace, :root[data-riel="plegado"] .riel-plegar, :root[data-riel="plegado"] .riel-marca { justify-content: center; padding-left: 0; padding-right: 0; }
@media (min-width: 721px) and (max-width: 1080px) {
  .riel-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .riel-enlace, .riel-marca { justify-content: center; padding-left: 0; padding-right: 0; }
  .riel-pie { display: none; }
}

/* --- La barra fina de arriba ------------------------------------------------------ */
.barra-alta {
  pointer-events: auto;
  position: relative;
  max-width: calc(1320px - 2 * var(--e5)); margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
  min-height: var(--alto-barra); padding: 8px 8px 8px 10px;
  border-radius: 16px;
  background: var(--cristal);
  -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
  box-shadow: var(--cristal-sombra);
}
.barra-alta-marca { display: none; }
.barra-app-hueco { flex: 1; }

/* El buscador: parece un campo, con su atajo. */
.barra-app-buscar {
  flex: 0 1 380px; min-width: 0; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 8px 0 12px; border-radius: 12px;
  border: 1px solid var(--campo-borde);
  background: color-mix(in srgb, var(--campo) 80%, transparent); color: var(--suave);
  font: inherit; font-size: .9rem; text-align: left;
  box-shadow: inset 0 1px 2px rgb(var(--tinta-sombra) / .05);
  transition: border-color var(--rapido), background var(--rapido), transform var(--medio) var(--muelle);
}
.barra-app-buscar:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.barra-app-buscar:active { transform: scale(.99); }
.barra-app-buscar:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.barra-app-buscar svg { width: 17px; height: 17px; flex: none; color: var(--acento); }
.barra-app-buscar-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-app-buscar kbd {
  flex: none; font: 650 .7rem/1 var(--fuente); color: var(--suave);
  padding: 5px 7px; border-radius: 6px; background: var(--carril); border: 1px solid var(--linea);
}

/* Los botones cuadrados de la derecha: campanita y tema. */
.barra-app-tema {
  flex: none; position: relative;
  appearance: none;
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--texto);
  cursor: pointer;
  transition: background var(--rapido) var(--entrada), color var(--rapido) var(--entrada), transform var(--medio) var(--muelle);
}
.barra-app-tema:hover { background: var(--control); }
.barra-app-tema:active { transform: scale(.92); }
.barra-app-tema:focus-visible { outline: 3px solid var(--anillo); outline-offset: 1px; }
.barra-app-tema svg { grid-area: 1 / 1; width: 20px; height: 20px; display: block; }
.barra-app-tema .icono-sol, .barra-app-tema .icono-luna { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida); }
.barra-app-tema .icono-luna { opacity: 0; transform: scale(.4) rotate(-70deg); }
:root[data-tema="oscuro"] .barra-app-tema .icono-sol { opacity: 0; transform: scale(.4) rotate(70deg); }
:root[data-tema="oscuro"] .barra-app-tema .icono-luna { opacity: 1; transform: none; }

/* El estado de las conexiones: un punto y, si hay sitio, qué pasa. */
.barra-salud {
  flex: none; appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 0 10px; color: var(--suave); font-size: .84rem; font-weight: 550;
  transition: background var(--rapido);
}
.barra-salud:hover { background: var(--control); color: var(--texto); }
.barra-salud:focus-visible { outline: 3px solid var(--anillo); outline-offset: 1px; }
.barra-salud .punto { width: 10px; height: 10px; color: var(--tenue); position: relative; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.barra-salud[data-estado="ok"] .punto { color: var(--bien); }
.barra-salud[data-estado="aviso"] .punto { color: var(--aviso); }
.barra-salud[data-estado="error"] .punto { color: var(--peligro); }
.barra-salud[data-estado="aviso"] .barra-salud-texto { color: var(--aviso); }
.barra-salud[data-estado="error"] .barra-salud-texto { color: var(--peligro); }
.barra-salud[data-estado="error"] .punto::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: anillo 2.4s var(--salida) infinite;
}
@keyframes anillo { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
.barra-salud-texto { white-space: nowrap; }
@media (max-width: 1240px) { .barra-salud-texto { display: none; } .barra-salud { padding: 0; } }

/* Quién eres: el avatar y tu nombre; al pulsar, Mi cuenta y Salir. */
button.barra-app-quien {
  appearance: none; background: none; border: 0; margin: 0 0 0 4px; flex: none;
  display: flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 3px 10px 3px 4px; border-radius: 12px;
  font: inherit; color: var(--texto); cursor: pointer; text-align: left;
  transition: background var(--rapido) var(--entrada);
}
button.barra-app-quien:hover, button.barra-app-quien[aria-expanded="true"] { background: var(--control); }
button.barra-app-quien:focus-visible { outline: 3px solid var(--anillo); outline-offset: 1px; }
.barra-app-letra {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--avatar); color: #FFFFFF; font-weight: 700; font-size: .86rem; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25);
}
.barra-app-quien-texto { display: grid; line-height: 1.22; min-width: 0; }
.barra-app-quien-texto b { font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
.barra-app-quien-texto span { font-size: .74rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
button.barra-app-quien > svg { width: 11px; height: 11px; color: var(--suave); transition: rotate var(--medio) var(--muelle); }
button.barra-app-quien[aria-expanded="true"] > svg { rotate: 180deg; }
@media (max-width: 1380px) { .barra-app-quien-texto { display: none; } button.barra-app-quien { padding-right: 8px; } }

/* El desplegable de tu nombre, de vidrio. */
.barra-quien-menu {
  position: absolute; top: calc(100% - 2px); right: var(--e5); z-index: 710; min-width: 250px;
  display: grid; gap: 2px; padding: 6px; border-radius: var(--radio-g);
  background: var(--cristal-hoja); -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
  box-shadow: var(--cristal-sombra-alta);
  pointer-events: auto; transform-origin: top right;
  animation: menu-entra var(--lente-tiempo) var(--muelle-lente);
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-6px) scale(.95); } }
.barra-quien-menu a, .barra-quien-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 550; color: var(--texto); text-decoration: none; text-align: left;
}
.barra-quien-menu a:hover, .barra-quien-menu button:hover, .barra-quien-menu a[aria-current="page"] { background: var(--control); text-decoration: none; }
.barra-quien-menu a[aria-current="page"] { color: var(--acento); }
.barra-quien-menu a:focus-visible, .barra-quien-menu button:focus-visible { outline: 3px solid var(--anillo); outline-offset: -2px; }
.barra-quien-cab { padding: 8px 10px 10px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.barra-quien-cab b { display: block; font-size: .95rem; }
.barra-quien-cab span { display: block; font-size: .78rem; color: var(--suave); overflow-wrap: anywhere; }
.barra-quien-menu .salir { color: var(--peligro); }
.menu-icono { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: var(--acento); background: var(--carril); }
.menu-icono svg { width: 19px; height: 19px; }
a[aria-current="page"] .menu-icono { color: var(--sobre-acento); background: var(--acento); }
.salir .menu-icono { color: var(--peligro); background: var(--peligro-claro); }

/* ==========================================================================
   10. En el móvil (≤ 720 px)
   --------------------------------------------------------------------------
   Sin riel. Arriba, una barra fina con el logotipo, la lupa y la campanita.
   Abajo, las pestañas de siempre (las secciones y «Más»), grandes y con su
   nombre debajo. «Más» abre una hoja de vidrio con lo demás.
   ========================================================================== */

.pestanas-movil, .menu-movil { display: none; }

@media (max-width: 720px) {
  :root { --alto-barra: 54px; }
  .riel { display: none; }
  .barra-app { padding: calc(8px + env(safe-area-inset-top)) 10px 4px; }
  .barra-alta { gap: 4px; padding: 6px 6px 6px 8px; border-radius: 16px; }
  .barra-alta-marca {
    display: flex; align-items: center; gap: 8px; flex: none;
    min-height: 42px; padding: 0 4px; border-radius: var(--radio);
    color: var(--texto); text-decoration: none;
  }
  .barra-alta-marca:hover { text-decoration: none; }
  .barra-alta-marca img { width: 32px; height: 32px; display: block; }
  .barra-alta-marca b { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; white-space: nowrap; }
  .barra-app-buscar { order: 3; flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; background: transparent; box-shadow: none; }
  .barra-app-buscar svg { width: 21px; height: 21px; }
  .barra-app-buscar-texto, .barra-app-buscar kbd { display: none; }
  .barra-app-tema.campanita { order: 4; width: 44px; height: 44px; }
  .barra-app-hueco { order: 2; }
  .barra-salud, .barra-app-quien, .barra-app-tema.tema, .barra-quien-menu { display: none !important; }

  /* Hueco abajo para que las pestañas no tapen el final de la página. */
  body:has(> #barraApp:not([hidden])) main.principal { padding-bottom: calc(var(--alto-pestanas) + 40px + env(safe-area-inset-bottom)); }
  body:has(> #barraApp:not([hidden])) .avisos { bottom: calc(var(--alto-pestanas) + 24px + env(safe-area-inset-bottom)); }

  .pestanas-movil {
    pointer-events: auto;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; z-index: 3;
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    height: var(--alto-pestanas); padding: 5px;
    border-radius: var(--radio-xg);
    background: var(--cristal);
    -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
    box-shadow: var(--cristal-sombra-alta);
  }
  .pestana-movil {
    appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
    min-width: 0; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 14px; padding: 2px 0;
    color: var(--suave); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
    transition: color var(--rapido), transform var(--medio) var(--muelle);
  }
  .pestana-movil:hover { text-decoration: none; color: var(--texto); }
  .pestana-movil:active { transform: scale(.94); }
  .pestana-movil:focus-visible { outline: 3px solid var(--anillo); outline-offset: -2px; }
  .pestana-icono {
    width: 54px; height: 30px; border-radius: 10px;
    display: grid; place-items: center;
    transition: background var(--medio) var(--salida), color var(--rapido);
  }
  .pestana-icono svg { width: 23px; height: 23px; }
  .pestana-texto { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
  .pestana-movil[aria-current="page"], .pestana-movil[aria-expanded="true"] { color: var(--acento); font-weight: 700; }
  .pestana-movil[aria-current="page"] .pestana-icono { background: var(--acento-degradado); color: var(--sobre-acento); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 6px 14px -8px color-mix(in srgb, var(--acento) 90%, transparent); }
  .pestana-movil[aria-expanded="true"] .pestana-icono { background: var(--control-encima); }
  :root[data-tema="oscuro"] .pestana-movil[aria-current="page"] { color: var(--acento-alto); }

  /* La hoja «Más»: sube desde las pestañas. */
  .menu-movil {
    display: block; position: fixed; z-index: 4;
    left: 8px; right: 8px; bottom: calc(var(--alto-pestanas) + 16px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--alto-pestanas) - 110px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; pointer-events: auto;
    border-radius: var(--radio-xg);
    background: var(--cristal-hoja);
    -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
    box-shadow: var(--cristal-sombra-alta);
    transform-origin: calc(100% - 36px) 100%;
    opacity: 0; transform: translateY(10px) scale(.96);
    transition: opacity 200ms var(--salida), transform 420ms var(--muelle-lente);
  }
  .menu-movil[hidden] { display: none; }
  .menu-movil.abierto { opacity: 1; transform: none; }

  .menu-fila {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 52px; padding: 6px 10px; margin: 0;
    border: 0; border-radius: 12px; background: none; cursor: pointer;
    font: inherit; color: var(--texto); text-align: left; text-decoration: none;
    transition: background var(--rapido);
  }
  .menu-fila:hover, .menu-fila:active { background: var(--control); text-decoration: none; }
  .menu-fila:focus-visible { outline: 3px solid var(--anillo); outline-offset: -2px; }
  .menu-fila[aria-current="page"] { color: var(--acento); background: var(--acento-claro); }
  .menu-fila .menu-icono { width: 38px; height: 38px; border-radius: 11px; }
  .menu-fila .menu-icono svg { width: 22px; height: 22px; }
  .menu-fila[aria-current="page"] .menu-icono { color: var(--sobre-acento); background: var(--acento); }
  .menu-texto { min-width: 0; }
  .menu-texto b { display: block; font-size: .98rem; font-weight: 650; }
  .menu-texto small { display: block; font-size: .78rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-grupo { border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 6px; }
  .menu-salir { color: var(--peligro); }
  .menu-salir .menu-icono { color: var(--peligro); background: var(--peligro-claro); }
  .menu-fila .barra-app-letra { width: 38px; height: 38px; border-radius: 11px; }
  .menu-fila .menu-icono:has(.barra-app-letra) { background: none; }
  .menu-fila .punto { width: 12px; height: 12px; }
  .menu-tema .icono-luna { display: none; }
  :root[data-tema="oscuro"] .menu-tema .icono-sol { display: none; }
  :root[data-tema="oscuro"] .menu-tema .icono-luna { display: block; }
  .menu-salud .punto { color: var(--tenue); }
  .menu-salud[data-estado="ok"] .punto { color: var(--bien); }
  .menu-salud[data-estado="aviso"] .punto { color: var(--aviso); }
  .menu-salud[data-estado="error"] .punto { color: var(--peligro); }
}

/* ==========================================================================
   11. Buscador (js/buscar.js) y campanita (js/campanita.js)
   ========================================================================== */

dialog.buscador {
  width: min(620px, calc(100vw - 24px)); max-height: min(78vh, 640px);
  margin: 10vh auto auto; padding: 0; overflow: hidden;
  display: none; flex-direction: column;
}
dialog.buscador[open] { display: flex; }
/* La ventana también se llama «buscador», como el campo de la lista de leads
   (apartado 16): sin esto heredaba su ancho máximo y su lupa suelta. */
dialog.buscador { position: fixed; flex: none; max-width: calc(100vw - 24px); }
dialog.buscador .buscador-cab > svg { position: static; translate: none; }
dialog.buscador .buscador-cab input { padding-left: 4px; }
.buscador-cab {display: flex; gap: 10px; align-items: center; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--linea); }
.buscador-cab > svg { width: 21px; height: 21px; color: var(--acento); flex: none; }
.buscador-cab input {
  flex: 1; min-width: 0; font-size: 1.12rem; padding: 8px 4px;
  border: 0; background: transparent; box-shadow: none !important; min-height: 44px;
}
.buscador-cab input:focus { box-shadow: none; }
.buscador-cab input::-webkit-search-cancel-button { display: none; }
.buscador-cuerpo { overflow-y: auto; padding: 6px 8px 10px; min-height: 0; }
.buscador-pista { margin: 10px 10px 8px; font-size: .88rem; color: var(--suave); }
.buscador-lista { display: flex; flex-direction: column; gap: 2px; }
.buscador-lista h3 { margin: 10px 10px 4px; }
.buscador-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--radio); color: var(--texto); text-decoration: none;
}
.buscador-fila:hover { text-decoration: none; }
.buscador-fila.elegida, a.buscador-fila:focus-visible { background: var(--acento-degradado); color: var(--sobre-acento); outline: none; }
.buscador-fila.elegida .buscador-sub, .buscador-fila.elegida .chip { color: var(--sobre-acento); }
.buscador-fila.elegida .chip { background: rgb(255 255 255 / .18); border-color: transparent; }
.buscador-fila.elegida .buscador-letra { background: rgb(255 255 255 / .2); color: var(--sobre-acento); }
.buscador-letra {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  background: var(--acento-claro); color: var(--acento);
}
.buscador-texto { display: grid; min-width: 0; flex: 1; }
.buscador-texto b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-sub { font-size: .82rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-pie {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 9px 18px; border-top: 1px solid var(--linea);
  font-size: .76rem; color: var(--suave);
}
.buscador-pie kbd { font: 650 .7rem/1 var(--fuente); padding: 3px 6px; border-radius: 5px; background: var(--carril); border: 1px solid var(--linea); margin-right: 3px; }
@media (max-width: 720px) {
  dialog.buscador { margin-top: 10px; max-height: calc(100dvh - 20px); }
  .buscador-pie { display: none; }
}

/* --- La campanita --------------------------------------------------------------- */
.campanita { overflow: visible; }
.campana-dibujo { width: 21px; height: 21px; display: block; transform-origin: 50% 12%; }
.campanita.suena .campana-dibujo { animation: sonar 900ms var(--salida); }
@keyframes sonar {
  0% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
/* El globo: el coral de la casa (el rojo, solo si es urgente). */
.campana-globo {
  position: absolute; top: 1px; right: 0; z-index: 2;
  height: 18px; min-width: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--coral); color: var(--sobre-coral);
  font: 700 10.5px/1 var(--fuente); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgb(var(--tinta-sombra) / .25), 0 0 0 2px var(--panel);
  pointer-events: none;
}
.campana-globo.urgente { background: var(--peligro); color: var(--sobre-color); }
.campana-globo.entra { animation: globo-entra 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes globo-entra { from { transform: scale(0); opacity: 0; } }

dialog.avisos-ventana { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: hidden; display: none; flex-direction: column; }
dialog.avisos-ventana[open] { display: flex; }
.avisos-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e5) var(--e5) var(--e2); }
.avisos-cab h2 { font-size: 1.2rem; margin: 0; }
.avisos-explica { padding: 0 var(--e5) var(--e3); font-size: .82rem; color: var(--suave); border-bottom: 1px solid var(--linea); margin: 0; }
.avisos-lista { display: grid; gap: 2px; padding: var(--e2) var(--e3) var(--e4); overflow-y: auto; min-height: 0; }
.avisos-titulo { font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave); padding: var(--e3) var(--e3) 2px; margin: 0; }
.avisos-vacio { padding: var(--e6) var(--e4); text-align: center; color: var(--suave); font-size: .92rem; }
.avisos-vacio svg { display: block; margin: 0 auto 10px; width: 36px; height: 36px; color: var(--bien); }
.aviso-fila {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: 10px var(--e3); border-radius: var(--radio);
  color: var(--texto); text-decoration: none;
  transition: background var(--rapido);
}
.aviso-fila:hover, .aviso-fila:focus-visible { background: var(--control); text-decoration: none; outline: none; }
.aviso-icono {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--sobre-color); background: var(--tenue);
}
.aviso-icono svg { width: 17px; height: 17px; }
.aviso-fila.humano .aviso-icono, .aviso-fila.ia .aviso-icono { background: var(--ia); }
.aviso-fila.tarea .aviso-icono { background: var(--aviso); }
.aviso-fila.tarea.urgente .aviso-icono, .aviso-fila.conexion.urgente .aviso-icono { background: var(--peligro); }
.aviso-fila.nuevo .aviso-icono { background: var(--acento); color: var(--sobre-acento); }
.aviso-fila.conexion .aviso-icono { background: var(--suave); }
.aviso-texto { display: grid; gap: 2px; min-width: 0; flex: 1; }
.aviso-texto b { font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.aviso-texto span { font-size: .8rem; color: var(--suave); }
.aviso-fila.urgente .aviso-texto span { color: var(--peligro); }
.aviso-cuando { flex: none; font-size: .72rem; color: var(--suave); white-space: nowrap; padding-top: 2px; }

/* ==========================================================================
   12. El vidrio de mar: canto de refracción
   --------------------------------------------------------------------------
   Lo que hace que este cristal no sea el de Apple: un filo de 1 px dibujado
   con un degradado cónico (luz blanca que se abre en menta y coral, como
   en un prisma), recortado con una máscara para que solo quede el borde.
   Debajo, el brillo de dentro (inset arriba) y la sombra teñida de petróleo
   que lo separa del fondo en capas. Solo en lo que flota.
   ========================================================================== */

:is(.riel, .barra-alta, .pestanas-movil, .menu-movil, .barra-quien-menu, dialog)::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: var(--refraccion);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Un segundo brillo, ancho y muy suave, arriba a la izquierda: la luz que
   entra en el vidrio. */
:is(.riel, .barra-alta, .pestanas-movil)::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 0% 0%, rgb(255 255 255 / .35), transparent 55%);
  pointer-events: none;
}
:root[data-tema="oscuro"] :is(.riel, .barra-alta, .pestanas-movil)::after { background: radial-gradient(120% 60% at 0% 0%, rgb(160 240 225 / .06), transparent 55%); }
.riel > *, .barra-alta > *, .pestanas-movil > * { position: relative; z-index: 2; }
/* El riel y el menú son fijos o absolutos: el ::before se pinta sobre ellos;
   los demás necesitan ser el contenedor. */
.barra-alta { position: relative; }

/* ==========================================================================
   13. Entre pantallas
   ========================================================================== */

#principal { view-transition-name: pagina; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(pagina) { animation: 120ms var(--entrada) both pantalla-sale; }
::view-transition-new(pagina) { animation: 240ms var(--salida) both pantalla-entra; }
::view-transition-group(pagina) { animation-duration: 0s; }
@keyframes pantalla-sale { to { opacity: 0; } }
@keyframes pantalla-entra { from { opacity: 0; transform: translateY(8px); } }
/* En el móvil la página pasa por debajo de las pestañas de abajo: la foto de
   #principal se pintaría encima de ellas. Allí se funde la página entera (las
   barras son iguales en las dos fotos y no se mueven). */
@media (max-width: 720px) {
  #principal { view-transition-name: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: revert; animation-duration: 180ms; }
}

/* ==========================================================================
   14. Fácil de pulsar con el dedo
   ========================================================================== */

@media (pointer: coarse) {
  .boton, .chip.pulsable { min-height: 44px; }
  .boton.pequeno { min-height: 40px; }
  .pestanas button, .etapas button { min-height: 44px; }
  .cerrar { width: 44px; height: 44px; }
  .cerrar svg { width: 14px; height: 14px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; min-height: 46px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label.casilla { min-height: 44px; }
  .tabla td { padding-top: 13px; padding-bottom: 13px; }
  .barra-app-tema, .barra-salud { min-width: 44px; height: 44px; }
  .riel-enlace { min-height: 48px; }
}

/* ==========================================================================
   15. Cuando no se puede o no se quiere
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
  :root {
    --vidrio: var(--panel) !important;
    --vidrio-hoja: var(--panel) !important;
    --vidrio-tinte: linear-gradient(transparent, transparent) !important;
    --refraccion: linear-gradient(var(--borde), var(--borde)) !important;
    --cristal-filtro: none !important;
    --cristal-filtro-fino: none !important;
  }
  html::before, html::after { display: none; }
  :is(.riel, .barra-alta, .pestanas-movil)::after { display: none; }
  dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --vidrio: var(--panel) !important;
    --vidrio-hoja: var(--panel) !important;
    --vidrio-tinte: linear-gradient(transparent, transparent) !important;
    --refraccion: linear-gradient(var(--borde-fuerte), var(--borde-fuerte)) !important;
    --tarjeta-borde: var(--borde-fuerte) !important;
    --boton-borde: var(--borde-fuerte) !important;
    --cristal-filtro: none !important;
    --suave: var(--texto) !important;
  }
  html::after { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --vidrio: var(--panel) !important;
    --vidrio-hoja: var(--panel) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cifra.enlace:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  html::before, html::after, .barra-app, #barraApp, .avisos, .aviso-demo { display: none !important; }
  html, body { background: #fff !important; color: #000; padding-left: 0 !important; }
}

/* ==========================================================================
   16. Las pantallas de trabajo (fase B, 07-10-2026)
   --------------------------------------------------------------------------
   Copiado de Estatefy y adaptado: el «Hoy» por hora (panel.js), la barra de
   trabajo y el cajón de la lista (crm.html), el marcador de «sin contactar»,
   el historial por colores (historial.js) y los mensajes de siempre
   (mensajes-rapidos.js). Mismas reglas: verde, ámbar y rojo solo para estado;
   índigo, el asistente de IA; morado, la póliza.
   ========================================================================== */

/* --- Piezas comunes ----------------------------------------------------------- */
.boton-icono { display: inline-grid; place-items: center; flex: none; }
.boton-icono svg { width: 18px; height: 18px; }
.boton.pequeno .boton-icono svg { width: 16px; height: 16px; }
.boton.ia { background: var(--ia); color: var(--sobre-color); border-color: transparent; font-weight: 650; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 6px 14px -8px var(--ia); }
.boton.ia:hover { background: color-mix(in srgb, var(--ia) 86%, var(--panel)); border-color: transparent; }

a.volver {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--e3);
  font-weight: 600; font-size: .95rem;
}
a.volver svg { width: 16px; height: 16px; }

/* Los botones grandes de hacer algo: cápsulas en fila; en el móvil, de dos en dos. */
.capsulas { display: flex; flex-wrap: wrap; gap: var(--e2); }
@media (max-width: 560px) {
  .capsulas { display: grid; grid-template-columns: 1fr 1fr; }
  .capsulas > .boton { width: 100%; min-height: 48px; }
  .capsulas > .boton.principal { grid-column: 1 / -1; }
}

/* Opciones de un toque (resultado de la llamada): pastillas que se encienden. */
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion, .boton.opcion {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 500;
  padding: 8px 14px; min-height: 40px; border-radius: var(--radio);
  background: var(--control); color: var(--texto);
  transition: background var(--rapido) var(--entrada), color var(--rapido) var(--entrada), transform var(--medio) var(--muelle);
}
.opcion:hover { background: var(--control-encima); }
.opcion:active { transform: scale(.95); }
.opcion[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.opcion:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }

details.detalles { margin-top: var(--e3); }
details.detalles > summary { font-size: .84rem; }
.bloque-codigo {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--radio-xs);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .76rem; background: var(--carril);
}
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* --- Etapas: control segmentado grande, la actual llena de su color ------------ */
.etapas.grandes { width: 100%; gap: 3px; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)); }
.etapas.grandes button { min-height: 40px; padding: 8px 10px; font-size: .9rem; }
.etapas button.etapa-morado { color: var(--venta); }
.etapas button.etapa-rojo { color: var(--peligro); }
.etapas button.actual.etapa-morado { background: var(--venta); color: var(--sobre-color); box-shadow: 0 3px 8px color-mix(in srgb, var(--venta) 30%, transparent); }
.etapas button.actual.etapa-rojo { background: var(--peligro); color: var(--sobre-color); box-shadow: 0 3px 8px color-mix(in srgb, var(--peligro) 30%, transparent); }
@media (max-width: 560px) { .etapas.grandes { grid-template-columns: repeat(2, 1fr); } }

/* --- El marcador de «hace X días sin contactar» -------------------------------- */
.marcador {
  display: flex; align-items: center; gap: 14px; padding: 14px 17px; margin: var(--e3) 0;
  border-radius: var(--radio-g); border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 9%, var(--panel));
  animation: subir var(--lento) var(--salida) backwards;
}
.marcador b { display: block; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.02em; color: var(--texto); }
.marcador div span { display: block; font-size: .84rem; color: var(--suave); margin-top: 3px; }
.marcador.reciente { color: var(--bien); }
.marcador.medio { color: var(--aviso); }
.marcador.antiguo { color: var(--peligro); }
.marcador.nunca { color: var(--tenue); }
.marcador-punto { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }

.contacto { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .84rem; font-weight: 500; }
.contacto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.contacto.reciente { color: var(--bien); }
.contacto.medio { color: var(--aviso); }
.contacto.antiguo { color: var(--peligro); }
.contacto.nunca { color: var(--tenue); font-weight: 400; }

/* --- Historial: grande y por colores ----------------------------------------- */
.historial { display: grid; gap: 4px; }
.hv-dia { font: 700 15px/1.2 var(--fuente); letter-spacing: -.01em; color: var(--texto); margin: 14px 2px 6px; }
.hv-dia:first-child { margin-top: 2px; }
.hv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hv-cosa {
  --hv-color: var(--tenue);
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--hv-color) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--hv-color) 24%, transparent);
  animation: subir var(--lento) var(--salida) backwards;
}
.hv-azul { --hv-color: var(--acento); }
.hv-morado { --hv-color: var(--venta); }
.hv-indigo { --hv-color: var(--ia); }
.hv-rojo { --hv-color: var(--peligro); }
.hv-gris { --hv-color: var(--tenue); }
.hv-icono {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--hv-color); color: var(--sobre-color);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--hv-color) 36%, transparent);
}
.hv-icono svg { width: 20px; height: 20px; display: block; }
.hv-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hv-titulo { font: 700 16px/1.25 var(--fuente); letter-spacing: -.015em; color: var(--texto); }
.hv-hora { flex: none; font: 600 14px/1 var(--fuente); color: var(--texto); font-variant-numeric: tabular-nums; }
.hv-quien { margin-top: 3px; font-size: 13.5px; color: var(--suave); }
.hv-texto {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 12px;
  background: var(--panel); color: var(--texto);
  font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.hv-vacio { margin: 4px 0 0; padding: 18px 16px; border-radius: 14px; background: var(--carril); color: var(--suave); text-align: center; }
.hv-mas { justify-self: center; margin-top: var(--e2); }

/* --- Inicio «Hoy» ---------------------------------------------------------------- */
.pestanas.compacta { margin: 0; }
.hoy-grupo {
  display: flex; align-items: center; gap: 8px; margin: var(--e4) 0 var(--e1);
  font: 700 15px/1.2 var(--fuente); letter-spacing: -.01em; color: var(--texto);
}
.hoy-grupo:first-of-type { margin-top: var(--e1); }
.hoy-grupo.atrasada { color: var(--peligro); }
.hoy-cuenta {
  min-width: 22px; padding: 1px 8px; border-radius: 7px; text-align: center;
  font-size: .76rem; font-weight: 700; background: var(--carril); color: var(--suave);
}
.hoy-grupo.atrasada .hoy-cuenta { background: var(--peligro-claro); color: var(--peligro); }
.hoy-lista { list-style: none; margin: 0; padding: 0; }
.hoy-linea {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 10px; border-bottom: 1px solid var(--linea); border-radius: var(--radio);
  cursor: pointer; transition: background var(--rapido) var(--entrada);
}
.hoy-linea:last-child { border-bottom: 0; }
.hoy-linea:hover { background: var(--carril); }
.hoy-linea.atrasada { box-shadow: inset 3px 0 0 var(--peligro); }
.hoy-hora { display: flex; flex-direction: column; font-size: .78rem; color: var(--suave); line-height: 1.25; }
.hoy-hora b { font-size: 1.12rem; color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hoy-linea.atrasada .hoy-hora, .hoy-linea.atrasada .hoy-hora b { color: var(--peligro); }
.hoy-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hoy-que { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--texto); flex-wrap: wrap; }
.hoy-tipo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--acento-claro); color: var(--acento); flex: none; }
.hoy-tipo svg { width: 15px; height: 15px; }
.hoy-contacto { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .9rem; }
.hoy-persona { font-weight: 600; }
a.tel { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--acento); white-space: nowrap; }
a.tel svg { width: 14px; height: 14px; }
.hoy-notas { overflow-wrap: anywhere; }
.hoy-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hoy-libre { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; text-align: center; }
.hoy-libre b { font-size: 1.1rem; }
@media (max-width: 560px) {
  .hoy-linea { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 10px; padding: 12px 4px; }
  .hoy-botones { grid-column: 1 / -1; justify-content: stretch; }
  .hoy-botones > .boton { flex: 1; min-height: 44px; }
}

/* --- La lista de leads: categorías, buscador, filtros y filas (08-10-2026) ------------- */
.barra-leads { display: grid; gap: var(--e3); margin-bottom: var(--e4); }
.pestanas.vistas { margin: 0; }
/* Las categorías: el punto de su color delante, el número detrás. */
.categorias-tabs { width: 100%; }
.categorias-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.tab-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.categorias-tabs button.activa { color: var(--c, var(--acento)); }
.categorias-tabs button .num { margin-left: 0; }
.categorias-tabs button.activa .num { color: inherit; }
.tab-quitar { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--control); }
.tab-quitar svg { width: 9px; height: 9px; }

.linea-filtros { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.buscador { position: relative; flex: 1 1 300px; max-width: 520px; }
.buscador svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--tenue); pointer-events: none; }
.buscador input { width: 100%; padding-left: 38px; }
select.orden-sel { width: auto; min-width: 0; max-width: 100%; }
.filtros-cuenta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--acento); color: var(--sobre-acento); }
.filtros-panel { padding: var(--e4); border-radius: var(--radio-g); background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); box-shadow: var(--tarjeta-sombra); animation: subir var(--medio) var(--salida); }
.filtros-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.filtros-pie { justify-content: flex-end; margin-top: var(--e3); }
.filtros-activos { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-pastilla {
  appearance: none; border: 1px solid var(--acento-borde); background: var(--acento-claro); color: var(--acento); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font: inherit; font-size: .84rem; font-weight: 600; padding: 4px 10px; border-radius: 8px;
}
.filtro-pastilla span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-pastilla svg { width: 9px; height: 9px; flex: none; }
.filtro-pastilla:hover { background: var(--control-encima); }
.aviso-busqueda { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e3); padding: 10px 14px; border-radius: var(--radio); background: var(--aviso-claro); color: var(--aviso); font-weight: 600; font-size: .9rem; }
.aviso-busqueda svg { flex: none; }

.hoja-tarjeta { padding: 6px 10px; }
.leads-hoja { transition: opacity var(--medio) var(--entrada); }
.leads-hoja.cargando { opacity: .55; }
.leads-lista { list-style: none; margin: 0; padding: 0; }
.lead-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 10rem) minmax(0, 12.5rem) minmax(0, 1.25fr) auto;
  gap: 16px; align-items: center; padding: 13px 12px;
  border-bottom: 1px solid var(--linea); border-radius: var(--radio);
  cursor: pointer; transition: background var(--rapido) var(--entrada);
}
.leads-lista .lead-fila:last-child { border-bottom: 0; }
.lead-fila:hover { background: var(--carril); box-shadow: inset 3px 0 0 var(--menta); }
.lead-fila:focus-visible { outline: none; background: var(--carril); box-shadow: inset 3px 0 0 var(--acento); }
.lead-fila.abierta { background: var(--acento-claro); box-shadow: inset 3px 0 0 var(--acento); }
.lead-fila.cabecera { cursor: default; padding-top: 8px; padding-bottom: 8px; font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave); }
.lead-fila.cabecera:hover { background: none; box-shadow: none; }
.lf-persona, .lf-paso { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf-origen, .lf-etapa { min-width: 0; display: flex; }
.lf-nombre { font-weight: 650; font-size: 1rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-nombre:hover { color: var(--acento); }
.lf-sub { font-size: .82rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-marcas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.lf-paso-cuando { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-paso-cuando svg { width: 14px; height: 14px; color: var(--acento); flex: none; }
.lf-paso.tarde .lf-paso-cuando, .lf-paso.tarde .lf-paso-cuando svg { color: var(--peligro); }
.lf-paso-que { display: block; max-width: 100%; font-size: .84rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-sin-paso { font-size: .84rem; color: var(--tenue); }
.lf-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.lf-acciones .boton { padding-left: 12px; padding-right: 12px; }
/* Con menos sitio, los botones solo con su icono (la etiqueta va en el título). */
@media (min-width: 721px) and (max-width: 1360px) {
  .lf-acciones .boton > span:not(.boton-icono) { display: none; }
  .lf-acciones .boton { width: 40px; padding: 0; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .lead-fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 12rem) minmax(0, 1fr) auto; }
  .lead-fila > .lf-origen { display: none; }
  .lead-fila.cabecera > :nth-child(2) { display: none; }
}
/* En el móvil, cada persona es una tarjeta con sus botones grandes abajo. */
@media (max-width: 720px) {
  .buscador { max-width: none; flex-basis: 100%; }
  .linea-filtros > .boton, .linea-filtros > select { flex: 1 1 calc(50% - 8px); }
  .hoja-tarjeta { padding: 0; background: none; border: 0; box-shadow: none; }
  .lead-fila.cabecera { display: none; }
  .leads-lista { display: grid; gap: 10px; }
  .lead-fila, .leads-lista .lead-fila:last-child {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "persona origen" "etapa etapa" "paso paso" "acciones acciones";
    gap: 10px 12px; padding: 14px; border: 1px solid var(--tarjeta-borde); border-radius: var(--radio-g);
    background: var(--tarjeta); box-shadow: var(--tarjeta-sombra);
  }
  .lf-persona { grid-area: persona; }
  .lf-origen { grid-area: origen; align-self: start; justify-content: flex-end; }
  .lf-etapa { grid-area: etapa; }
  .lf-paso { grid-area: paso; padding: 9px 11px; border-radius: var(--radio); background: var(--carril); }
  .lf-paso:has(> .lf-sin-paso) { padding: 0 2px; background: none; }
  .lf-acciones { grid-area: acciones; display: grid; grid-template-columns: repeat(2, 1fr); }
  .lf-acciones .boton { min-height: 44px; width: 100%; }
  .lf-nombre { font-size: 1.05rem; white-space: normal; }
}

/* Nuevo lead: las personas que ya están en el CRM. */
.parecidas:empty { display: none; }
.parecidas-caja { display: grid; gap: 8px; padding: 12px; border-radius: var(--radio-g); background: var(--aviso-claro); border: 1px solid var(--aviso-borde); }
.parecidas-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; color: var(--aviso); }
.parecidas-titulo svg { flex: none; }
.parecida { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radio); background: var(--panel); }
.parecida-texto { display: grid; gap: 3px; min-width: 0; flex: 1 1 220px; }
.parecida-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.parecida-elegida { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mas-datos { margin-top: var(--e3); }
.cajon-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* --- El cajón de la lista (el panel rápido de un lead) ------------------------------ */
dialog.cajon {
  margin: 10px 10px 10px auto; height: calc(100dvh - 20px); max-height: calc(100dvh - 20px);
  width: min(560px, calc(100vw - 20px)); max-width: calc(100vw - 20px);
  overflow: hidden;
}
dialog.cajon[open] { display: flex; flex-direction: column; animation: cajon var(--lento) var(--muelle); }
dialog.cajon.cerrando { animation: cajon-sale 160ms var(--entrada) forwards; }
@keyframes cajon { from { transform: translateX(40px) scale(.98); opacity: 0; } }
@keyframes cajon-sale { to { transform: translateX(30px); opacity: 0; } }
dialog.cajon::backdrop { background: rgb(var(--tinta-sombra) / .3); }
.cajon-cab { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--linea); flex: none; }
.cajon-cab > div:first-child { flex: 1; min-width: 0; }
.cajon-cab h2 { margin: 0 0 3px; font-size: 1.2rem; }
.cajon-cab .esq-titulo { flex: 1; height: 28px; }
.cajon-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 28px; overscroll-behavior: contain; }
.cajon-cuerpo .esq-bloque { margin-top: 16px; }
.cajon-cuerpo > .capsulas { margin-bottom: var(--e2); }
.cajon-bloque { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.cajon-bloque:last-child { border-bottom: 0; }
.cajon-bloque h3 { margin: 0 0 10px; }
.cajon-bloque.resaltado { margin: 8px -10px 0; padding: 14px 10px; border-radius: var(--radio-g); background: var(--acento-claro); border-bottom-color: transparent; animation: subir var(--lento) var(--salida) backwards; }
.cajon-bloque textarea { min-height: 70px; margin-bottom: 8px; }
.derecha-fila { justify-content: flex-end; }
.cajon-paso {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 12px; border-radius: var(--radio); background: var(--carril);
}
.cajon-paso > div:nth-child(2) { display: grid; }
.cajon-paso > div:nth-child(2) span { font-size: .86rem; color: var(--suave); }
.cajon-paso > .fila { grid-column: 1 / -1; margin-top: 6px; }
.cajon-paso.tarde { background: var(--peligro-claro); }
.cajon-paso.tarde > div:nth-child(2) span { color: var(--peligro); font-weight: 600; }
@media (max-width: 560px) {
  dialog.cajon { margin: auto 0 0; width: 100vw; max-width: 100vw; height: 92dvh; max-height: 92dvh; border-radius: var(--radio-xg) var(--radio-xg) 0 0; }
  dialog.cajon[open] { animation-name: cajon-movil; }
  @keyframes cajon-movil { from { transform: translateY(40px); opacity: 0; } }
  .cajon-cab { padding: 16px 16px 12px; flex-wrap: wrap; }
  .cajon-cuerpo { padding: 4px 16px 24px; }
}

/* --- La ficha del lead --------------------------------------------------------------- */
.ficha-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ficha-quien { min-width: 0; }
.ficha-quien h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.ficha-contacto { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; }
.ficha-cabecera .capsulas { margin: var(--e2) 0 var(--e4); }
.ficha-rotulo { margin-top: var(--e2); }
.ficha-campos {
  display: grid; gap: var(--e3); margin-top: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tareas.hechas { margin-top: var(--e2); }
.tarea {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 13px; border-radius: 14px; background: var(--carril);
}
.tarea.tarde { background: var(--peligro-claro); }
.tarea.cerrada { opacity: .75; }
.tarea-icono {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--acento); color: var(--sobre-acento);
}
.tarea-icono svg { width: 17px; height: 17px; }
.tarea.tarde .tarea-icono, .cajon-paso.tarde .tarea-icono { background: var(--peligro); color: var(--sobre-color); }
.tarea.poliza .tarea-icono { background: var(--venta); color: var(--sobre-color); }
.tarea.cerrada .tarea-icono { background: var(--tenue); color: var(--sobre-color); }
.tarea-que { display: grid; gap: 2px; min-width: 0; }
.tarea-que b { font-weight: 650; }
.tarea-cuando { font-size: .86rem; color: var(--suave); }
.tarea.tarde .tarea-cuando { color: var(--peligro); font-weight: 600; }
.tarea-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .tarea { grid-template-columns: 34px minmax(0, 1fr); }
  .tarea-botones, .tarea > .chip { grid-column: 1 / -1; }
  .tarea > .chip { justify-self: start; }
  .tarea-botones > .boton { flex: 1; }
}

/* El asistente de IA: su tarjeta lleva el índigo en el título y en sus avisos. */
.bloque-asistente h2 { display: flex; align-items: center; gap: 8px; }
.titulo-ia { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ia); color: var(--sobre-color); }
.titulo-ia svg { width: 16px; height: 16px; }
.resumen-ia { margin: var(--e3) 0; padding: 12px 14px; border-radius: var(--radio); background: var(--ia-claro); color: var(--texto); }
.prueba-fila { display: flex; gap: 8px; margin-top: 8px; }
.prueba-fila input { flex: 1; }
.chat-funcion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--fuente); font-size: .82rem; color: var(--ia);
  background: var(--ia-claro); border-radius: 14px; padding: 6px 12px; max-width: 92%;
}
.chat-funcion.fallida { color: var(--peligro); background: var(--peligro-claro); }
.chat-funcion-icono { display: inline-grid; place-items: center; flex: none; }
.chat-funcion-icono svg { width: 14px; height: 14px; }
.chat-funcion details.detalles { flex-basis: 100%; margin-top: 2px; color: var(--suave); }

/* --- Mensajes de siempre (plantillas) --------------------------------------------- */
dialog.mr-ventana { width: min(560px, calc(100vw - 24px)); }
.mr-cuerpo { display: grid; gap: var(--e3); }
.mr-cuerpo h3 { margin-bottom: 6px; }
.mr-cuerpo textarea { min-height: 140px; line-height: 1.5; }
.mr-plantillas { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-plantilla {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: var(--radio); padding: 7px 12px; font: inherit; font-size: .84rem; font-weight: 600;
  background: var(--control); color: var(--texto); cursor: pointer;
  transition: background var(--rapido), color var(--rapido), transform var(--rapido) var(--salida);
}
.mr-plantilla svg { width: 14px; height: 14px; flex: none; }
.mr-plantilla:hover { background: var(--control-encima); }
.mr-plantilla[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.mr-plantilla:active { transform: scale(.95); }
.mr-nota { margin: 0; font-size: .82rem; color: var(--suave); }
.mr-canales { display: flex; gap: var(--e2); flex-wrap: wrap; }
.mr-canal { flex: 1 1 120px; }
.mr-canal svg { width: 18px; height: 18px; flex: none; }
.mr-canal[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
/* El de WhatsApp, en su verde de siempre cuando está elegido: es su marca, no un estado. */
.mr-canal.mr-whatsapp[aria-pressed="true"] { background: #1DA851; color: #fff; }
.mr-huecos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mr-hueco {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-family: var(--codigo); font-size: .76rem;
  padding: 4px 8px; border-radius: var(--radio-xs); background: var(--acento-claro); color: var(--acento);
}
.mr-hueco:hover { background: color-mix(in srgb, var(--acento) 20%, var(--panel)); }
.mr-ejemplo { margin: 0; font-size: .84rem; color: var(--suave); padding: 8px 12px; border-left: 3px solid var(--acento-borde); white-space: pre-wrap; }
.mr-lista { display: grid; gap: 6px; margin-bottom: 6px; }
.mr-editar { border-radius: var(--radio); background: var(--carril); padding: 4px 12px; }
.mr-editar > summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--texto); font-weight: 500; }
.mr-editar.mr-nuevo > summary { color: var(--acento); font-weight: 600; }
.mr-editar-cuerpo { display: grid; gap: var(--e2); padding: 4px 0 12px; }
.mr-editar-cuerpo .fila > input { flex: 1 1 220px; }
.mr-canal-icono { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--acento-claro); color: var(--acento); flex: none; }
.mr-canal-icono.mr-whatsapp { background: color-mix(in srgb, #1DA851 16%, var(--panel)); color: #1DA851; }

/* --- Tablas que en el móvil pasan a tarjetas (ui.js tabla(..., { tarjetas: true })) --- */
@media (max-width: 560px) {
  .tabla-envoltorio.con-tarjetas { overflow: visible; }
  .tarjeta > .tabla-envoltorio.con-tarjetas { margin: 0; }
  table.tabla.tarjetas { min-width: 0; }
  .tabla.tarjetas thead { display: none; }
  .tabla.tarjetas { display: block; }
  .tabla.tarjetas tbody { display: grid; gap: 10px; }
  .tabla.tarjetas tr { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radio-g); background: var(--carril); }
  .tabla.tarjetas tr.clicable:hover td { background: none; }
  .tabla.tarjetas tr.clicable:hover td:first-child { box-shadow: none; }
  .tabla.tarjetas td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0; border: 0; text-align: right; }
  .tabla.tarjetas td::before { content: attr(data-etiqueta); font: var(--rotulo); color: var(--suave); text-align: left; flex: none; max-width: 50%; }
  .tabla.tarjetas td.principal { display: block; text-align: left; font-size: 1.02rem; font-weight: 600; }
  .tabla.tarjetas td.principal::before, .tabla.tarjetas td.sin-nombre::before { content: none; }
  .tabla.tarjetas td.sin-nombre { justify-content: flex-start; }
}

/* --- Con el dedo ------------------------------------------------------------------- */
@media (pointer: coarse) {
  .opcion, .mr-plantilla, .mr-hueco { min-height: 44px; }
  .etapas.grandes button { min-height: 46px; }
  .lf-acciones .boton { min-height: 44px; }
}

/* --- WhatsApp en la ficha ------------------------------------------------------
   Lo del asistente, en índigo (como todo lo de la IA); lo que escribe la
   oficina, en el azul del acento. Las marcas de entrega, como en WhatsApp. */
.chat-wa .burbuja.saliente:not(.ia) { background: var(--acento); color: var(--sobre-acento); }
.chat-wa .burbuja.fallida { background: var(--peligro-claro); color: var(--peligro); }
.burbuja .entrega { font-weight: 600; letter-spacing: -.08em; }
.burbuja .entrega.leido { color: #9CF0DF; }
/* En oscuro la burbuja es petróleo claro con letra oscura: el leído, en tinta honda. */
:root[data-tema="oscuro"] .burbuja .entrega.leido { color: #0B3F7A; }
.burbuja .entrega.fallida { color: inherit; }
.burbuja .meta.error { font-weight: 600; opacity: 1; }

/* --- Seguimiento automático (js/seguimiento.js) --------------------------------------------- */
.seg-mensaje { margin: 6px 0 0; font-size: .88rem; line-height: 1.45; padding: 8px 12px; border-left: 3px solid var(--acento-borde); background: var(--carril); border-radius: 0 8px 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.seg-estado { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg-estado > div { display: grid; gap: 3px; }
.seg-secuencia { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--linea); }
.seg-secuencia > p { margin: 0; }
.seg-pasos { display: grid; gap: 10px; justify-items: start; }
.seg-paso-caja { display: grid; gap: 6px; width: 100%; }
.seg-paso { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; }
.seg-paso select { min-width: 0; width: 100%; }
.seg-dias { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg-paso-fin { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.seg-horario { align-items: center; padding-top: 12px; border-top: 1px solid var(--linea); }
@media (max-width: 720px) {
  .seg-paso { grid-template-columns: auto minmax(0, 1fr); }
  .seg-paso select, .seg-paso-fin { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ==========================================================================
   17. Lo simple (08-10-2026)
   --------------------------------------------------------------------------
   La clienta quiere la pantalla limpia: pocas cosas, grandes y que no se
   pisen. Aquí van las piezas de esa limpieza:

     - las categorías de la clienta (js/categorias.js): cada una con su
       color y su icono, iguales en Inicio, en la lista y en la ficha;
     - el origen de cada persona (js/origen.js): Meta, WhatsApp, a mano…;
     - la cabecera de página, los avisos en franja y los menús «Más»;
     - reglas para que nada se monte: todo lo que va en fila baja de línea
       con su hueco, y los textos largos se cortan con «…» o bajan.
   ========================================================================== */

/* --- Colores de las categorías y de los orígenes ------------------------------ */
:root {
  --cat-presupuestar: #0E5E6F; --cat-presupuestar-claro: #E1EFF0; --cat-presupuestar-borde: #B2D4D9;
  --cat-presupuestado: #2F5FC4; --cat-presupuestado-claro: #E8EEFB; --cat-presupuestado-borde: #C3D2F3;
  --cat-rechaza: #C22A33; --cat-rechaza-claro: #FCEAEA; --cat-rechaza-borde: #F0BEC1;
  --cat-falta: #A35800; --cat-falta-claro: #FDF1DF; --cat-falta-borde: #EFD0A3;
  --cat-nocontesta: #56656F; --cat-nocontesta-claro: #EDF1F3; --cat-nocontesta-borde: #D2DAE0;
  --cat-nuevo: #237F6D; --cat-nuevo-claro: #DCF2EC; --cat-nuevo-borde: #A9DCCD;
  --cat-cita: #1D7593; --cat-cita-claro: #E0F1F7; --cat-cita-borde: #B0D9E8;
  --cat-cliente: #A03A7C; --cat-cliente-claro: #F8E8F2; --cat-cliente-borde: #E6BFD7;
  --cat-perdido: #8A5458; --cat-perdido-claro: #F4ECEC; --cat-perdido-borde: #DEC9CA;

  --or-meta: #2A5FD0; --or-meta-claro: #E8EEFC; --or-meta-borde: #C5D3F4;
  --or-whatsapp: #17824A; --or-whatsapp-claro: #E2F4E9; --or-whatsapp-borde: #B3DEC3;
  --or-gris: #56656F; --or-gris-claro: #EDF1F3; --or-gris-borde: #D2DAE0;
  --or-calido: #9A5A08; --or-calido-claro: #FBF0E0; --or-calido-borde: #EBD2AA;
}
:root[data-tema="oscuro"] {
  --cat-presupuestar: #45BAC7; --cat-presupuestar-claro: #0F3239; --cat-presupuestar-borde: #1F525B;
  --cat-presupuestado: #93AFFF; --cat-presupuestado-claro: #172240; --cat-presupuestado-borde: #2C3D70;
  --cat-rechaza: #FF6E70; --cat-rechaza-claro: #311517; --cat-rechaza-borde: #5D2528;
  --cat-falta: #F0A445; --cat-falta-claro: #2B1F0C; --cat-falta-borde: #57401B;
  --cat-nocontesta: #A9B8C2; --cat-nocontesta-claro: #1A252B; --cat-nocontesta-borde: #33434C;
  --cat-nuevo: #5CD5BD; --cat-nuevo-claro: #103530; --cat-nuevo-borde: #1E5A50;
  --cat-cita: #6CC4E3; --cat-cita-claro: #0F2C37; --cat-cita-borde: #1E4E60;
  --cat-cliente: #E585C5; --cat-cliente-claro: #33172B; --cat-cliente-borde: #5E2B4F;
  --cat-perdido: #D29A9E; --cat-perdido-claro: #2A1C1D; --cat-perdido-borde: #4A3335;

  --or-meta: #93AFFF; --or-meta-claro: #172240; --or-meta-borde: #2C3D70;
  --or-whatsapp: #5BD08D; --or-whatsapp-claro: #0F2A1C; --or-whatsapp-borde: #1F4A31;
  --or-gris: #A9B8C2; --or-gris-claro: #1A252B; --or-gris-borde: #33434C;
  --or-calido: #F0A445; --or-calido-claro: #2B1F0C; --or-calido-borde: #57401B;
}
.cat-presupuestar { --c: var(--cat-presupuestar); --c-claro: var(--cat-presupuestar-claro); --c-borde: var(--cat-presupuestar-borde); }
.cat-presupuestado { --c: var(--cat-presupuestado); --c-claro: var(--cat-presupuestado-claro); --c-borde: var(--cat-presupuestado-borde); }
.cat-rechaza { --c: var(--cat-rechaza); --c-claro: var(--cat-rechaza-claro); --c-borde: var(--cat-rechaza-borde); }
.cat-falta { --c: var(--cat-falta); --c-claro: var(--cat-falta-claro); --c-borde: var(--cat-falta-borde); }
.cat-nocontesta { --c: var(--cat-nocontesta); --c-claro: var(--cat-nocontesta-claro); --c-borde: var(--cat-nocontesta-borde); }
.cat-nuevo { --c: var(--cat-nuevo); --c-claro: var(--cat-nuevo-claro); --c-borde: var(--cat-nuevo-borde); }
.cat-cita { --c: var(--cat-cita); --c-claro: var(--cat-cita-claro); --c-borde: var(--cat-cita-borde); }
.cat-cliente { --c: var(--cat-cliente); --c-claro: var(--cat-cliente-claro); --c-borde: var(--cat-cliente-borde); }
.cat-perdido { --c: var(--cat-perdido); --c-claro: var(--cat-perdido-claro); --c-borde: var(--cat-perdido-borde); }
.origen-meta { --o: var(--or-meta); --o-claro: var(--or-meta-claro); --o-borde: var(--or-meta-borde); }
.origen-whatsapp { --o: var(--or-whatsapp); --o-claro: var(--or-whatsapp-claro); --o-borde: var(--or-whatsapp-borde); }
.origen-manual, .origen-otro, .origen-telefono { --o: var(--or-gris); --o-claro: var(--or-gris-claro); --o-borde: var(--or-gris-borde); }
.origen-web, .origen-referido { --o: var(--or-calido); --o-claro: var(--or-calido-claro); --o-borde: var(--or-calido-borde); }

/* --- El chip de la categoría y la pastilla del origen ------------------------- */
.cat-chip, .origen {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; min-width: 0;
  padding: 2px 8px 2px 6px; border-radius: 7px;
  font-size: .78rem; font-weight: 650; line-height: 1.45; letter-spacing: 0;
  white-space: nowrap; vertical-align: middle;
  border: 1px solid transparent;
}
.cat-chip { color: var(--c); background: var(--c-claro); border-color: var(--c-borde); }
.origen { color: var(--o); background: var(--o-claro); border-color: var(--o-borde); }
.cat-chip > span, .origen-nombre { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cat-chip svg, .origen svg { flex: none; width: 13px; height: 13px; }
.cat-chip.grande { font-size: .9rem; padding: 4px 11px 4px 8px; border-radius: 9px; gap: 7px; }
.cat-chip.grande svg { width: 16px; height: 16px; }
.origen-detalle { font-weight: 500; opacity: .9; flex: none; }
.origen-detalle::before { content: '·'; margin-right: 4px; }
.origen-mas { flex: none; margin-left: 1px; padding: 0 5px; border-radius: 5px; font-size: .7rem; background: color-mix(in srgb, currentColor 14%, transparent); }

/* Los canales por los que ha llegado (la ficha). */
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.canal { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; }
.canal-icono { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--o-claro); color: var(--o); border: 1px solid var(--o-borde); }
.canal-icono svg { width: 16px; height: 16px; }
.canal-texto { min-width: 0; display: grid; gap: 1px; }
.canal-texto b { font-weight: 650; }
.canal-texto span { font-size: .84rem; color: var(--suave); }

/* --- La cabecera de cada página -------------------------------------------------- */
.pagina-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 4px 0 var(--e5); }
.pagina-cab > div:first-child { min-width: 0; }
.pagina-cab h1 { margin: 0; overflow-wrap: anywhere; }
.pagina-sub { margin: 6px 0 0; color: var(--suave); font-size: .95rem; }
.pagina-cab .pestanas { margin: 0; }
.acciones-cab { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* --- Avisos en franja (lo que pide atención, solo si lo hay) ------------------------ */
.franjas { display: grid; gap: 10px; margin-bottom: var(--e5); }
.franja {
  --b: var(--acento); --b-claro: var(--acento-claro); --b-borde: var(--acento-borde);
  display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap;
  padding: 12px 14px 12px 12px; border-radius: var(--radio-g);
  background: var(--b-claro); border: 1px solid var(--b-borde);
}
.franja.peligro { --b: var(--peligro); --b-claro: var(--peligro-claro); --b-borde: var(--peligro-borde); }
.franja.aviso { --b: var(--aviso); --b-claro: var(--aviso-claro); --b-borde: var(--aviso-borde); }
.franja.ia { --b: var(--ia); --b-claro: var(--ia-claro); --b-borde: var(--ia-borde); }
.franja-icono { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--b); color: var(--sobre-color); }
.franja-icono svg { width: 19px; height: 19px; }
.franja-texto { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.franja-texto b { font-weight: 650; }
.franja-texto span { font-size: .86rem; color: var(--suave); }
.franja-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.franja .boton { flex: none; }

/* --- Inicio: las cinco categorías de la clienta ------------------------------------------ */
.categorias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.categoria {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative; min-width: 0; min-height: 136px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px; border-radius: var(--radio-g);
  background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); box-shadow: var(--tarjeta-sombra);
  animation: subir var(--muy-lento) var(--salida) backwards;
  transition: transform var(--medio) var(--salida), box-shadow var(--medio) var(--entrada), border-color var(--rapido);
}
.categoria:hover { transform: translateY(-2px); border-color: var(--c-borde); box-shadow: var(--tarjeta-sombra), var(--sombra-alta); }
.categoria:active { transform: scale(.98); transition-duration: var(--rapido); }
.categoria:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.categoria-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.categoria-icono { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--c-claro); color: var(--c); }
.categoria-icono svg { width: 19px; height: 19px; }
.categoria-nombre { font-weight: 650; font-size: .93rem; line-height: 1.25; color: var(--texto); overflow-wrap: anywhere; }
.categoria-numero { margin-top: auto; font: 700 2.15rem/1 var(--fuente-titulo); letter-spacing: -.025em; color: var(--c); font-variant-numeric: tabular-nums lining-nums; }
.categoria.cero .categoria-numero { color: var(--tenue); }
.categoria-pista { font-size: .8rem; line-height: 1.3; color: var(--suave); }
/* La primera, la de los presupuestos por hacer, es la que más importa: llena del color de la casa. */
.categoria.principal { background: var(--acento-degradado); border-color: transparent; color: var(--sobre-acento); box-shadow: 0 1px 2px rgb(var(--tinta-sombra) / .2), 0 14px 28px -16px color-mix(in srgb, var(--acento) 90%, transparent); }
.categoria.principal .categoria-icono { background: rgb(255 255 255 / .18); color: var(--sobre-acento); }
.categoria.principal .categoria-nombre, .categoria.principal .categoria-numero, .categoria.principal .categoria-pista { color: var(--sobre-acento); }
.categoria.principal .categoria-pista { opacity: .88; }
.categorias > .categoria:nth-child(2) { animation-delay: 40ms; }
.categorias > .categoria:nth-child(3) { animation-delay: 80ms; }
.categorias > .categoria:nth-child(4) { animation-delay: 120ms; }
.categorias > .categoria:nth-child(5) { animation-delay: 160ms; }
@media (max-width: 1180px) {
  .categorias { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .categorias > .categoria { grid-column: span 2; }
  .categorias > .categoria:nth-child(4), .categorias > .categoria:nth-child(5) { grid-column: span 3; }
}
@media (max-width: 560px) {
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .categorias > .categoria, .categorias > .categoria:nth-child(4), .categorias > .categoria:nth-child(5) { grid-column: span 1; }
  .categorias > .categoria.principal { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
  .categorias > .categoria.principal .categoria-numero { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
  .categorias > .categoria.principal .categoria-pista { grid-column: 1; padding-left: 46px; }
  .categoria { min-height: 118px; padding: 14px; gap: 8px; }
  .categoria-numero { font-size: 1.9rem; }
}

/* --- «Lo de hoy» -------------------------------------------------------------------- */
.hoy-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: var(--e3); }
.hoy-cab h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.hoy-linea { gap: 10px 16px; }
.hoy-cuerpo { gap: 4px; }
.hoy-contacto { gap: 6px 14px; }
.hoy-botones { gap: 8px; }
.hoy-libre { padding: 30px 12px 22px; }
.hoy-libre .boton { margin-top: 6px; }
.hoy-ver-mas { margin: 6px 0 0 4px; }
details.lo-que-viene { margin-top: var(--e4); border-top: 1px solid var(--linea); padding-top: var(--e3); }
details.lo-que-viene > summary { cursor: pointer; font-weight: 600; color: var(--acento); padding: 4px 0; width: fit-content; }
details.lo-que-viene[open] > summary { margin-bottom: var(--e2); }

/* --- Los botones «Más» (un menú pequeño que se abre debajo) ------------------------- */
.menu-mas { position: relative; display: inline-flex; }
.menu-mas-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  min-width: 240px; max-width: min(320px, calc(100vw - 32px)); padding: 6px;
  border-radius: var(--radio-g);
  background: var(--cristal-hoja); -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
  box-shadow: var(--cristal-sombra-alta);
  display: grid; gap: 2px;
  animation: subir var(--medio) var(--salida);
}
.menu-mas-panel[hidden] { display: none; }
.menu-mas-panel.izquierda { right: auto; left: 0; }
.menu-mas-panel button, .menu-mas-panel a {
  appearance: none; border: 0; background: none; font: inherit; font-weight: 550; color: var(--texto); cursor: pointer; text-align: left; text-decoration: none;
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 10px;
}
.menu-mas-panel button:hover, .menu-mas-panel a:hover { background: var(--control); text-decoration: none; }
.menu-mas-panel button:focus-visible, .menu-mas-panel a:focus-visible { outline: 3px solid var(--anillo); outline-offset: -2px; }
.menu-mas-panel svg { width: 18px; height: 18px; flex: none; color: var(--suave); }
.menu-mas-panel hr { border: 0; border-top: 1px solid var(--linea); margin: 4px 6px; }

/* --- Que nada se monte ------------------------------------------------------------------ */
.fila > *, .capsulas > *, .hoy-contacto > *, .lf-marcas > * { min-width: 0; }
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
dd, .tarea-que, .hoy-cuerpo, .ficha-quien, .cajon-cab > div:first-child { overflow-wrap: anywhere; }

/* --- La ficha del lead (08-10-2026) ------------------------------------------------------ */
.ficha-titulo { align-items: flex-start; }
.ficha-titulo > .origen { margin-top: 6px; }
.ficha-cabecera .marcador { margin: var(--e4) 0 var(--e3); padding: 11px 14px; }
.ficha-cabecera .marcador b { font-size: 1.1rem; }
.ficha-cabecera > .franja { margin-bottom: var(--e3); }
.ficha-botones { margin: var(--e3) 0 0; }
.ficha-etapa { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.ficha-etapa .ficha-rotulo { margin: 0 0 var(--e3); }
.ficha-motivo { margin: var(--e2) 0 0; }
/* Las categorías: botones grandes de su color; el de ahora, lleno. */
.etapas-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr)); gap: 8px; }
.etapa-cat {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 12px;
  border-radius: var(--radio); border: 1px solid var(--c-borde); background: var(--c-claro); color: var(--c);
  font-size: .9rem; font-weight: 600; line-height: 1.25;
  transition: background var(--rapido) var(--entrada), color var(--rapido), box-shadow var(--medio) var(--entrada), transform var(--medio) var(--muelle);
}
.etapa-cat span { min-width: 0; overflow-wrap: anywhere; }
.etapa-cat svg { flex: none; width: 16px; height: 16px; }
.etapa-cat:hover { box-shadow: 0 0 0 1px var(--c) inset; }
.etapa-cat:active { transform: scale(.97); }
.etapa-cat:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.etapa-cat.actual { background: var(--c); border-color: var(--c); color: var(--sobre-color); box-shadow: 0 6px 14px -8px var(--c); }
:root[data-tema="oscuro"] .etapa-cat.actual { color: var(--fondo); }
select.etapa-otra { min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--suave); }
select.etapa-otra.actual { color: var(--c); border-color: var(--c); background-color: var(--c-claro); }
.vacio-paso { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radio); background: var(--aviso-claro); color: var(--texto); }
.vacio-paso > span { flex: 1 1 260px; min-width: 0; }
.sin-margen { margin: 0; }
/* Datos para el presupuesto. */
.datos-presupuesto { border-color: var(--acento-borde); }
.datos-presupuesto .fila.entre { margin-bottom: var(--e3); }
/* ¿Es la misma persona? */
.parecidos { border-color: var(--aviso-borde); background: color-mix(in srgb, var(--aviso-claro) 55%, var(--tarjeta)); }
.parecido { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linea); }
.parecido:first-of-type { border-top: 0; padding-top: 0; }
.parecido-texto { display: grid; gap: 4px; min-width: 0; }
.otras-veces { margin-top: var(--e4); }

/* Los botones de cada fila de la lista, discretos: no compiten con los nombres. */
.lf-acciones .boton { background: var(--carril); border-color: transparent; box-shadow: none; color: var(--acento); }
.lf-acciones .boton:hover { background: var(--acento-claro); border-color: var(--acento-borde); }
.canales + dl.datos, .canales + details { margin-top: var(--e3); }

/* --- Clientes y personas (08-10-2026) ---------------------------------------------- */
.barra-clientes { margin-bottom: var(--e4); }
.celda-persona { display: grid; gap: 2px; min-width: 0; }
.celda-nombre { font-weight: 650; color: var(--texto); }
.repetidas { display: grid; gap: var(--e3); }
.repetidas > h2 { margin: 0; }
.repetida { display: grid; gap: var(--e3); margin: 0; }
.repetida-pareja { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.repetida-persona { display: grid; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: var(--radio); background: var(--carril); color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.repetida-persona:hover { background: var(--control-encima); text-decoration: none; }
.repetida-y { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--aviso-claro); color: var(--aviso); }
@media (max-width: 560px) {
  .repetida-pareja { grid-template-columns: 1fr; }
  .repetida-y { justify-self: center; transform: rotate(90deg); }
}
.sus-leads { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sus-leads-fila { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radio); background: var(--carril); color: var(--texto); text-decoration: none; }
.sus-leads-fila:hover { background: var(--control-encima); text-decoration: none; }
.sus-leads-fecha { font-weight: 650; font-variant-numeric: tabular-nums; }
.sus-leads-valor { margin-left: auto; font-weight: 650; }
.persona .ficha-titulo h1 { margin-bottom: var(--e3); }
.persona .ficha-titulo + dl.datos, .persona .ficha-titulo + .bloque-aviso { margin-top: var(--e4); }

/* --- Marketing (08-10-2026) ------------------------------------------------------------ */
.frase-retorno { display: grid; gap: 4px; border-color: var(--venta-borde); background: color-mix(in srgb, var(--venta-claro) 60%, var(--tarjeta)); }
.frase-retorno b { font-family: var(--fuente-titulo); font-size: 1.2rem; letter-spacing: -.012em; }
.mini-cifras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mini-cifra { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radio); background: var(--carril); min-width: 0; }
.mini-cifra b { font: 700 1.5rem/1.1 var(--fuente-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mini-cifra span { font-size: .84rem; color: var(--suave); }
.mini-cifra.destacada { background: var(--acento-claro); }
.mini-cifra.destacada b { color: var(--acento); }
@media (max-width: 720px) { .mini-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mini-cifra.destacada { grid-column: 1 / -1; } }
.celda-campana { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-campana a { font-weight: 600; overflow-wrap: anywhere; }
.periodo-fechas { gap: 6px; }
.periodo-fechas input { width: auto; }
.marketing .tarjeta > .tabla-envoltorio + details.detalles { margin-top: var(--e4); }

/* En el móvil y la tableta, la ficha es una sola columna y lo más útil va
   arriba: quién es, si está repetida, los datos del presupuesto y el
   próximo paso; el historial, al final. */
@media (max-width: 1080px) {
  .ficha-pagina .rejilla.ficha > div { display: contents; }
  .ficha-pagina .rejilla.ficha .tarjeta { margin-bottom: 0; order: 6; }
  .ficha-pagina .rejilla.ficha .ficha-cabecera { order: 1; }
  .ficha-pagina .rejilla.ficha .parecidos { order: 2; }
  .ficha-pagina .rejilla.ficha .datos-presupuesto { order: 3; }
  .ficha-pagina .rejilla.ficha .bloque-proximo { order: 4; }
  .ficha-pagina .rejilla.ficha .bloque-origen, .ficha-pagina .rejilla.ficha .bloque-detalles { order: 8; }
  .ficha-pagina .rejilla.ficha .bloque-historial { order: 9; }
}
@media (max-width: 560px) {
  .ficha-botones .menu-mas { grid-column: 1 / -1; }
  .ficha-botones .menu-mas > .boton { width: 100%; }
}

/* En el móvil, las categorías de la lista no se esconden de lado: de dos en dos. */
@media (max-width: 720px) {
  .pestanas.categorias-tabs { flex-wrap: wrap; overflow: visible; gap: 4px; }
  .pestanas.categorias-tabs button { flex: 1 1 calc(50% - 4px); justify-content: flex-start; text-align: left; line-height: 1.25; padding: 9px 10px; min-height: 44px; }
  .pestanas.categorias-tabs button .num { margin-left: auto; }
}

/* Panel del dueño: probar cómo se lee un evento del calendario. */
.probar-resultado { display: grid; gap: var(--e3); margin-top: var(--e3); }
.probar-resultado:empty { display: none; }

/* Las notas de una tarea con sus líneas (los datos del presupuesto, uno por línea). */
.tarea-notas, .hoy-notas { white-space: pre-line; }

/* Panel del dueño: la app de Meta y lo que hay que pegar en su panel. */
.app-meta h3 { margin-top: var(--e5); }
.pegar { display: grid; gap: 10px; }
.pegar-fila { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radio); background: var(--carril); }
.pegar-donde { font-size: .84rem; color: var(--suave); }
.pegar-valor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pegar-valor code { flex: 1 1 260px; min-width: 0; padding: 6px 8px; background: var(--panel); }
.lista-pasos { display: grid; gap: 6px; padding-left: 1.2em; margin: 0; }

/* --- Conversaciones: lo que habló el asistente de WhatsApp con cada persona --------------- */
.cv-herramientas { display: flex; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.cv-buscar { flex: 1 1 280px; max-width: 460px; min-width: 0; }
.cv-filtros { margin-bottom: var(--e3); flex-wrap: wrap; }
.cv-cuenta { margin: 0 0 var(--e3); }
.cv-lista { display: grid; gap: var(--e4); }
.cv-lista > .tarjeta { margin-bottom: 0; }
.cv-tarjeta { display: grid; gap: var(--e3); min-width: 0; }
.cv-tarjeta.por-hacer { border-left: 4px solid var(--aviso); }
.cv-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cv-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ia-claro); color: var(--ia); font-weight: 750; font-size: .92rem; border: 1px solid var(--ia-borde);
}
.cv-quien { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.cv-nombre { font-weight: 700; font-size: 1.05rem; color: var(--texto); overflow-wrap: anywhere; }
.cv-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cv-detalle { display: grid; gap: 10px; min-width: 0; }
.cv-detalle.anterior { padding-top: var(--e3); margin-top: var(--e3); border-top: 1px dashed var(--linea); }
.cv-linea { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; }
.cv-resumen { margin: 0; padding: 12px 14px; border-radius: var(--radio); background: var(--ia-claro); color: var(--texto); line-height: 1.5; overflow-wrap: anywhere; }
.cv-datos { display: grid; gap: 6px; margin: 0; }
.cv-dato { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.cv-dato dt { font-size: .82rem; color: var(--suave); font-weight: 600; }
.cv-dato dd { margin: 0; overflow-wrap: anywhere; }
.cv-toca {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radio); background: var(--aviso-claro); border: 1px solid var(--aviso-borde);
}
.cv-toca.hecha { background: var(--bien-claro); border-color: var(--bien-borde); }
.cv-toca-icono { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--aviso); color: var(--sobre-color); }
.cv-toca.hecha .cv-toca-icono { background: var(--bien); }
.cv-toca-texto { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.cv-toca .boton { flex: none; }
.cv-botones, .cv-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-acciones { padding-top: var(--e3); border-top: 1px solid var(--linea); }
.cv-chat:not([hidden]) { display: block; }
.cv-antes > summary { cursor: pointer; color: var(--suave); font-size: .9rem; font-weight: 600; }
.cv-vacio { display: grid; justify-items: center; gap: 6px; }
.cv-vacio-icono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ia-claro); color: var(--ia); margin-bottom: 4px; }
@media (max-width: 560px) {
  .cv-dato { grid-template-columns: minmax(0, 1fr); }
  .cv-toca .boton { width: 100%; }
}

/* Probar el asistente (ventana): el chat ocupa lo que haga falta. */
.prueba-asistente { display: grid; gap: var(--e3); }
.prueba-chat { display: grid; gap: 8px; }
.prueba-chat .chat { min-height: 220px; max-height: 50vh; }
.prueba-chat textarea { flex: 1; min-width: 0; resize: vertical; }

/* --- Guía con dibujos para conectar Meta (js/guia-meta.js) ------------------------------- */
.guia-meta { --fb: #1877F2; --verde: #12A150; display: grid; gap: var(--e4); }
.guia-plegada > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.guia-plegada > summary::-webkit-details-marker { display: none; }
.guia-plegada > summary::before { content: '\25B8'; color: var(--suave); }
.guia-plegada[open] > summary::before { content: '\25BE'; }
.guia-plegada[open] > summary { margin-bottom: var(--e4); }
.gm-puntos-pasos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gm-punto {
  appearance: none; font: inherit; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--panel); color: var(--suave); font-weight: 700;
  transition: background var(--rapido) var(--entrada), color var(--rapido) var(--entrada), transform var(--rapido) var(--entrada);
}
.gm-punto:hover { color: var(--texto); }
.gm-punto:active { transform: scale(.94); }
.gm-punto.hecho { background: var(--bien-claro); color: var(--bien); border-color: var(--bien-borde); }
.gm-punto.activo { background: var(--acento); color: var(--sobre-acento, #fff); border-color: var(--acento); }
.gm-punto:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
.gm-paso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--e5); align-items: start; }
.gm-paso-texto { display: flex; gap: 14px; min-width: 0; }
.gm-paso-texto > div { min-width: 0; }
.gm-paso-texto h3 { margin: 4px 0 8px; font: 700 1.15rem/1.3 var(--fuente); text-transform: none; letter-spacing: normal; color: var(--texto); }
.gm-paso-texto ul { margin: 0 0 var(--e3); padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.gm-numero { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento, #fff); font-weight: 800; font-size: 1.05rem; }
.gm-navegar { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 820px) { .gm-paso { grid-template-columns: minmax(0, 1fr); } }

/* La ventana dibujada */
.gm-ventana { border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: var(--panel-alto); box-shadow: var(--tarjeta-sombra); font-size: .84rem; min-width: 0; }
.gm-barra { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--carril); border-bottom: 1px solid var(--linea); }
.gm-puntos { display: inline-flex; gap: 5px; }
.gm-puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--borde); }
.gm-url { flex: 1; min-width: 0; padding: 3px 10px; border-radius: 999px; background: var(--panel); color: var(--suave); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-cuerpo { padding: 12px; display: grid; gap: 10px; }
.gm-fb { margin: -12px -12px 2px; padding: 9px 14px; background: var(--fb); color: #fff; font-size: .9rem; }
.gm-tarjeta { display: grid; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--panel); min-width: 0; }
.gm-fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gm-dos { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 10px; }
.gm-dos.iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .gm-dos, .gm-dos.iguales { grid-template-columns: minmax(0, 1fr); } }
.gm-menu { display: grid; gap: 2px; align-content: start; }
.gm-menu span { padding: 5px 8px; border-radius: 7px; color: var(--suave); }
.gm-menu span.activo { background: var(--carril); color: var(--texto); font-weight: 650; }
.gm-lista, .gm-pila { display: grid; gap: 8px; min-width: 0; }
.gm-fila { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; border: 1px solid var(--linea); min-width: 0; }
.gm-fila > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.gm-fila small, .gm-casilla small { color: var(--suave); display: block; }
.gm-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ia-claro); color: var(--ia); font-size: .7rem; font-weight: 800; }
.gm-avatar.grande { width: 52px; height: 52px; font-size: .95rem; }
.gm-etiqueta { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--carril); color: var(--suave); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.gm-etiqueta.ok { background: var(--bien-claro); color: var(--bien); }
.gm-centro { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 8px 0 4px; }
.gm-enlace { color: var(--fb); }
.gm-relleno { display: grid; gap: 6px; }
.gm-relleno i { display: block; height: 7px; border-radius: 4px; background: var(--carril); }
.gm-tabla { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 6px 12px; align-items: center; }
.gm-tabla .cab { font-size: .7rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }

/* Botones, casillas e interruptores dibujados; lo que hay que pulsar, en verde */
.gm-boton { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--borde); background: var(--panel); font-weight: 650; white-space: nowrap; }
.gm-boton.azul { background: var(--fb); border-color: var(--fb); color: #fff; }
.gm-boton.marcado { outline: 3px solid var(--verde); outline-offset: 3px; }
.gm-boton.marcado:not(.azul) { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento, #fff); }
.gm-pulsa {
  position: absolute; top: calc(100% + 9px); right: -4px; z-index: 1;
  padding: 2px 8px; border-radius: 6px; background: var(--verde); color: #fff; font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.gm-pulsa::before { content: ''; position: absolute; top: -5px; right: 14px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--verde); }
.gm-ventana .gm-fila-entre:has(.gm-pulsa) { padding-bottom: 26px; }
.gm-centro:has(.gm-pulsa) { padding-bottom: 28px; }
@media (prefers-reduced-motion: no-preference) { .gm-boton.marcado { animation: gm-latido 1.8s ease-in-out infinite; } }
@keyframes gm-latido { 0%, 100% { outline-color: var(--verde); } 50% { outline-color: color-mix(in srgb, var(--verde) 35%, transparent); } }
.gm-casilla { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--linea); min-width: 0; overflow-wrap: anywhere; }
.gm-casilla.resaltada { border-color: var(--verde); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 30%, transparent); }
.gm-check { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--borde); display: grid; place-items: center; color: #fff; }
.gm-check.si { background: var(--fb); border-color: var(--fb); }
.gm-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--linea); }
.gm-interruptor > span:first-child { min-width: 0; }
.gm-switch { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--fb); position: relative; }
.gm-switch i { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.gm-tabla .resaltada { display: inline-block; outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 6px; justify-self: start; }
.gm-fila.resaltada { border-color: var(--verde); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 30%, transparent); }

/* «Si algo falla» */
.gm-faqs { display: grid; gap: 6px; padding-top: var(--e3); border-top: 1px solid var(--linea); }
.gm-faqs h3 { margin: 0 0 4px; }
.gm-faq { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.gm-faq > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; }
.gm-faq-resp { padding: 0 12px 10px; color: var(--suave); }
.gm-faq-resp p { margin: 0 0 6px; }