/* =====================================================================
   Panel de la consulta — acabado "vidrio líquido"
   Mismo esqueleto que CRM Obradores (shell + nav-sidebar 240px + vistas por
   data-view, cada sección en su #…-root). Marca = var(--marca), que fija
   js/marca.js según la organización; el resto de tonos se derivan con color-mix.
   Azul = acción. Marca = identidad y estado. No mezclar.
   ===================================================================== */

/* Fuentes alojadas en el panel (ninguna petición a Google). Licencia SIL OFL 1.1. */
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Emojis como en el móvil también en Windows/Android/Linux (en Windows faltaban las banderas y
   los más nuevos). Solo se usa donde emojis.js pone html.emoji-web (no en Apple, que ya los trae);
   el navegador lo descarga una vez y solo si hay un emoji en pantalla. Noto Color Emoji · OFL 1.1. */
@font-face { font-family: "Emoji Panel"; src: url("../fonts/noto-color-emoji.woff2") format("woff2"); font-display: swap;
  unicode-range: U+200d,U+203c,U+2049,U+20e3,U+2122,U+2139,U+2194-2199,U+21a9-21aa,U+231a-231b,U+2328,U+23cf,U+23e9-23f3,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2600-2604,U+260e,U+2611,U+2614-2615,U+2618,U+261d,U+2620,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638-263a,U+2640,U+2642,U+2648-2653,U+265f-2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2692-2697,U+2699,U+269b-269c,U+26a0-26a1,U+26a7,U+26aa-26ab,U+26b0-26b1,U+26bd-26be,U+26c4-26c5,U+26c8,U+26ce-26cf,U+26d1,U+26d3-26d4,U+26e9-26ea,U+26f0-26f5,U+26f7-26fa,U+26fd,U+2702,U+2705,U+2708-270d,U+270f,U+2712,U+2714,U+2716,U+271d,U+2721,U+2728,U+2733-2734,U+2744,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2763-2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b50,U+2b55,U+3030,U+303d,U+3297,U+3299,U+1f004,U+1f0cf,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f1e6-1f1ff,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f300-1f321,U+1f324-1f393,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f3f0,U+1f3f3-1f3f5,U+1f3f7-1f4fd,U+1f4ff-1f53d,U+1f549-1f54e,U+1f550-1f567,U+1f56f-1f570,U+1f573-1f57a,U+1f587,U+1f58a-1f58d,U+1f590,U+1f595-1f596,U+1f5a4-1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5bc,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5e3,U+1f5e8,U+1f5ef,U+1f5f3,U+1f5fa-1f64f,U+1f680-1f6c5,U+1f6cb-1f6d2,U+1f6d5-1f6d9,U+1f6dc-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f0,U+1f6f3-1f6fc,U+1f7e0-1f7eb,U+1f7f0,U+1f90c-1f93a,U+1f93c-1f945,U+1f947-1f9ff,U+1fa70-1fa7c,U+1fa80-1fac6,U+1fac8,U+1facc-1fadd,U+1fadf-1faeb,U+1faef-1fafa,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f; }
html.emoji-web {
  --font-ui: "Figtree", "Emoji Panel", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marca: "Newsreader", "Emoji Panel", Georgia, "Times New Roman", serif;
}

:root {
  color-scheme: light;
  --marca: #1B8F8B;
  --acento: #EE7F6A;
  --marca-oscura: color-mix(in oklab, var(--marca) 62%, #041c1c);
  --marca-media: color-mix(in oklab, var(--marca) 90%, #000);
  --marca-clara: color-mix(in oklab, var(--marca) 14%, #fff);
  --coral: var(--acento);

  --accion: #2563eb;
  --accion-oscura: #1d4ed8;
  --accion-clara: #e6eefe;
  --peligro: #B42318;
  --peligro-claro: #fdecea;
  --aviso: #9A5B08;
  --aviso-claro: #fef3dc;

  --fondo: color-mix(in oklab, var(--marca) 11%, #F6F9F9);   /* toma el tono de cada consulta */
  --text-dark: #13262A;
  --text-muted: #5A6D72;
  --divider: rgba(19, 52, 56, .09);
  --dash-bg: rgba(19, 52, 56, .045);
  --card-bg: rgba(255, 255, 255, .86);        /* superficies que deben tapar (cabeceras sticky) */

  --vidrio: rgba(255, 255, 255, .5);
  --vidrio-fuerte: rgba(255, 255, 255, .76);
  --vidrio-borde: rgba(255, 255, 255, .72);
  --vidrio-reflejo: linear-gradient(150deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%);
  --desenfoque: blur(24px) saturate(165%);
  --sombra-vidrio:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    0 22px 44px -26px rgba(12, 52, 54, .42),
    0 2px 8px -3px rgba(12, 52, 54, .10);
  --sombra-flota: 0 26px 60px -24px rgba(12, 52, 54, .45), 0 4px 14px -6px rgba(12, 52, 54, .14);
  --brillo-color: rgba(255, 255, 255, .62);
  --focus: 0 0 0 3px rgba(37, 99, 235, .75);

  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marca: "Newsreader", Georgia, "Times New Roman", serif;
  --r-xl: 26px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --radius: var(--r-md);
  --nav-w: 240px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --marca-oscura: color-mix(in oklab, var(--marca) 55%, #ffffff);
  --marca-media: color-mix(in oklab, var(--marca) 85%, #ffffff);
  --marca-clara: color-mix(in oklab, var(--marca) 24%, #0b1b1d);
  --accion: #5b8def; --accion-oscura: #3f74e0; --accion-clara: rgba(91, 141, 239, .16);
  --peligro: #f2877d; --peligro-claro: rgba(242, 135, 125, .14);
  --aviso: #f0b45a; --aviso-claro: rgba(240, 180, 90, .14);
  --fondo: color-mix(in oklab, var(--marca) 14%, #04100F);
  --text-dark: #E6F0F1;
  --text-muted: #93A7AD;
  --divider: rgba(255, 255, 255, .075);
  --dash-bg: rgba(255, 255, 255, .03);
  --card-bg: rgba(16, 32, 36, .88);
  --vidrio: rgba(22, 42, 46, .52);
  --vidrio-fuerte: rgba(18, 36, 40, .8);
  --vidrio-borde: rgba(255, 255, 255, .09);
  --vidrio-reflejo: linear-gradient(150deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 40%);
  --sombra-vidrio: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 48px -26px rgba(0, 0, 0, .7);
  --sombra-flota: 0 26px 60px -24px rgba(0, 0, 0, .8);
  --brillo-color: rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(52vw 44vw at 94% -6%, color-mix(in oklab, var(--marca) 46%, transparent), transparent 68%),
    radial-gradient(36vw 32vw at 30% 20%, color-mix(in oklab, var(--marca) 16%, transparent), transparent 70%),
    radial-gradient(42vw 36vw at -4% 102%, color-mix(in oklab, var(--acento) 26%, transparent), transparent 68%),
    radial-gradient(40vw 34vw at 62% 78%, rgba(110, 150, 255, .16), transparent 70%),
    var(--fondo);
  background-attachment: fixed;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(56vw 46vw at 92% -8%, color-mix(in oklab, var(--marca) 34%, transparent), transparent 70%),
    radial-gradient(44vw 38vw at -6% 104%, color-mix(in oklab, var(--acento) 12%, transparent), transparent 70%),
    var(--fondo);
  background-attachment: fixed;
}
/* ---------------------------------------------------------------- foto de fondo
   La foto de la consulta, muy tenue, detrás de todas las secciones. Va en una
   capa fija propia para que no se mueva con el scroll y para poder rebajarla sin
   tocar los degradados de color, que quedan debajo.

   Tres cuidados para que no estorbe a la lectura:
   · opacidad muy baja y desaturada: es textura, no una fotografía que mirar;
   · se difumina hacia arriba con una máscara, que es donde vive el saludo;
   · los paneles de vidrio la desenfocan por encima con backdrop-filter. */
body::before {
  content: "";
  position: fixed; inset: -4%; z-index: -1; pointer-events: none;
  background: var(--foto-fondo, url("../img/sala.webp")) center 45% / cover no-repeat;
  opacity: .18;
  /* Desenfocada y desaturada: tiene que leerse como ambiente, no como una
     fotografía que invita a mirarla. El inset negativo evita que el desenfoque
     deje los bordes transparentes. */
  filter: blur(1.5px) saturate(.6) contrast(.95);
  /* Se concentra abajo y se apaga hacia arriba y hacia los lados, que es donde
     vive el contenido. */
  -webkit-mask-image: radial-gradient(140% 105% at 58% 112%, #000 0%, rgba(0, 0, 0, .7) 46%, transparent 88%);
  mask-image: radial-gradient(140% 105% at 58% 112%, #000 0%, rgba(0, 0, 0, .7) 46%, transparent 88%);
}
html[data-theme="dark"] body::before { opacity: .17; filter: blur(1.5px) saturate(.5) brightness(.65); }
@media (max-width: 760px) { body::before { opacity: .16; } }

button, input, select, textarea { font: inherit; color: inherit; }
/* Panel 117 · En el móvil, al tocar cualquier botón el navegador (Chrome en
   Android) pintaba encima su resaltado de toque: un rectángulo azulado
   semitransparente, recto aunque el botón sea redondo, que se quedaba un
   momento. Fuera: la respuesta al toque la da cada botón (ver .brillo y :active). */
html { -webkit-tap-highlight-color: transparent; }
/* Panel 218 · En el móvil y la tableta (pantalla táctil), sin barras de desplazamiento: se desplaza con el dedo
   y la barra que pintaba el navegador a la derecha de cada zona con scroll (p. ej., la agenda en «Año») quedaba
   rara. Con !important para ganar a las barras finas de la conversación y del menú. En el ordenador se quedan:
   con ratón hacen falta. */
@media (hover: none) and (pointer: coarse) {
  * { scrollbar-width: none !important; }
  *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
}
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- vidrio */
.vidrio, .nav-sidebar, .panel, .kpi, .tabla-wrap, .saludo, .cajon, .auth-tarjeta, #agenda-root {
  background: var(--vidrio-reflejo), var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-vidrio);
}

/* ---------------------------------------------------------------- destello al pasar el ratón
   .brillo = luz que sigue al cursor (--mx/--my los pone app.js) + un barrido diagonal al entrar.
   La luz va DEBAJO del contenido (z-index -1 dentro de su propio contexto): brilla el
   fondo del elemento, nunca se aclara el texto. */
.brillo { position: relative; isolation: isolate; overflow: hidden; }
.brillo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--brillo-color), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.brillo::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, var(--brillo-color) 50%, transparent 100%);
  transform: skewX(-18deg); opacity: 0;
}
.brillo:hover::after { opacity: .8; }
.brillo:hover::before { animation: destello .9s cubic-bezier(.2, .7, .2, 1) 1; }
@keyframes destello { 0% { left: -70%; opacity: 0; } 18% { opacity: 1; } 100% { left: 135%; opacity: 0; } }
/* Panel 117 · En pantallas táctiles el :hover se queda «pegado» después de
   tocar, y el brillo se quedaba encendido sobre el botón. Solo con ratón. */
@media (hover: none) {
  .brillo:hover::after { opacity: 0; }
  .brillo:hover::before { animation: none; }
  .kpi:hover { transform: none; box-shadow: var(--sombra-vidrio); }
}
/* Al tocar o pulsar, el botón cede un poco: se nota que ha recibido el toque. */
:is(.icono-btn, .mt-pestana, .mt-rango, .ma-filtro, .kpi[data-wa]):active { transform: scale(.97); }
.nav-item:active { transform: scale(.98); }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; cursor: pointer; background: none;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  /* Un <a class="btn"> tiene que verse igual que un <button>: el enlace
     de la sala de vídeo es un enlace de verdad porque abre en otra
     pestaña, pero debe parecer un botón. */
  text-decoration: none; font-family: inherit;
}
a.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primario {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accion) 88%, #fff), var(--accion-oscura));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px var(--accion);
}
.btn-primario:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 28px -12px var(--accion); }
.btn-secundario {
  background: var(--vidrio-fuerte); border-color: var(--vidrio-borde);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 16px -12px rgba(12, 52, 54, .5);
}
.btn-secundario:hover { background: var(--card-bg); }
.btn-peligro { color: var(--peligro); background: var(--vidrio-fuerte); border-color: color-mix(in oklab, var(--peligro) 45%, transparent); }
.btn-peligro:hover { background: var(--peligro-claro); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- marca */
.marca-logo { display: block; flex: none; }
.marca-simbolo {
  background-color: var(--m, var(--marca));
  -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
  mask: url("../img/logo.svg") center / contain no-repeat;
}
.marca-monograma {
  display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(145deg, color-mix(in oklab, var(--m) 80%, #fff), var(--m));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------- acceso
   Mismo diseño que la portada comercial: foto con duotono naranja, logo de Astra,
   claim y módulos a la izquierda; acceso a la derecha. */
.auth-wrapper { display: grid; grid-template-columns: 58fr 42fr; width: 100vw; min-height: 100vh; }

.hero { position: relative; overflow: hidden; background: var(--marca-oscura); color: #fff; isolation: isolate; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  filter: grayscale(1) contrast(1.05) brightness(1.12); z-index: -3; }
/* Duotono de marca sobre la foto (en Obradores es verde, aquí naranja) */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; mix-blend-mode: multiply;
  background: linear-gradient(135deg, color-mix(in oklab, var(--marca) 55%, #fff) 0%, var(--marca) 40%,
              color-mix(in oklab, var(--marca) 72%, #000) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(56, 18, 4, .52) 0%, rgba(56, 18, 4, .16) 50%, rgba(56, 18, 4, 0) 75%),
              linear-gradient(180deg, rgba(56, 18, 4, .18) 0%, rgba(56, 18, 4, 0) 26%, rgba(46, 14, 3, .7) 100%); }

.hero-logo { position: absolute; top: 7.5%; left: clamp(28px, 4vw, 64px); height: clamp(34px, 4vh, 50px); }
.hero-logo img { height: 100%; display: block; }

.claim { position: absolute; left: clamp(28px, 4vw, 64px); bottom: 11.5%; max-width: 540px; }
.claim h1 { margin: 0; font-family: var(--font-ui); font-size: clamp(34px, 3.4vw, 62px); line-height: 1.04;
  font-weight: 800; letter-spacing: -.028em; }
.claim p { margin: 20px 0 0; font-size: clamp(15px, 1.15vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 34ch; }
.modulos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.modulos span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modulos svg { width: 15px; height: 15px; }
.dominio { position: absolute; left: clamp(28px, 4vw, 64px); bottom: 4.6%; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .58); }

/* El acceso es SIEMPRE oscuro, con el tema que sea: la foto en duotono a la
   izquierda pide un lado derecho oscuro, y el humo de marca luce más sobre
   negro. Se fijan aquí los tokens del tema oscuro para esta sección; al
   entrar, el panel sigue el tema que tenga cada uno. */
.acceso {
  color-scheme: dark;
  color: #E6F0F1;
  --fondo: color-mix(in oklab, var(--marca) 14%, #04100F);
  --text-dark: #E6F0F1;
  --text-muted: #93A7AD;
  --divider: rgba(255, 255, 255, .075);
  --vidrio: rgba(22, 42, 46, .52);
  --vidrio-fuerte: rgba(18, 36, 40, .8);
  --vidrio-borde: rgba(255, 255, 255, .09);
  --vidrio-reflejo: linear-gradient(150deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 40%);
  --sombra-vidrio: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 48px -26px rgba(0, 0, 0, .7);
  --peligro: #f2877d; --peligro-claro: rgba(242, 135, 125, .14);
}
.acceso { position: relative; display: grid; place-items: center; padding: 48px; overflow: hidden;
  background:
    radial-gradient(55% 45% at 100% 0%, color-mix(in oklab, var(--marca) 22%, #fff) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(45% 40% at 0% 100%, color-mix(in oklab, var(--marca) 16%, #fff) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(35% 30% at 85% 85%, color-mix(in oklab, var(--marca) 10%, #fff) 0%, rgba(255, 255, 255, 0) 70%),
    #FBF8F5; }

/* La tarjeta de acceso: vidrio (regla compartida de arriba) con el humo de
   marca detrás del contenido. isolation crea el contexto para que el humo
   (z-index -1) se quede dentro de la tarjeta y no debajo de la página. */
.auth-tarjeta { position: relative; isolation: isolate; overflow: hidden; width: min(464px, 100%);
  padding: 40px 40px 36px; border-radius: 30px;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
/* Al entrar con el ratón, la tarjeta se resalta: borde de marca, halo
   naranja alrededor y un pelín de elevación. El humo sube de intensidad. */
.auth-tarjeta:hover {
  border-color: color-mix(in oklab, var(--marca) 55%, transparent);
  box-shadow: var(--sombra-vidrio),
              0 0 0 1px color-mix(in oklab, var(--marca) 35%, transparent),
              0 0 60px -10px color-mix(in oklab, var(--marca) 70%, transparent),
              0 30px 70px -30px color-mix(in oklab, var(--marca) 60%, #000);
  transform: translateY(-3px); }
.auth-tarjeta:hover .humo { opacity: .95; }
.humo { transition: opacity .5s ease; }
.humo { position: absolute; inset: -35%; z-index: -1; pointer-events: none; filter: blur(48px); opacity: .9; }
.humo i { position: absolute; display: block; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--marca) 62%, #fff) 0%, color-mix(in oklab, var(--marca) 40%, transparent) 45%, transparent 72%); }
.humo i:nth-child(1) { width: 62%; height: 58%; left: -8%; top: 4%;   animation: humo-a 11s ease-in-out infinite alternate; }
.humo i:nth-child(2) { width: 54%; height: 60%; right: -12%; top: 22%; animation: humo-b 14s ease-in-out infinite alternate; opacity: .85; }
.humo i:nth-child(3) { width: 48%; height: 46%; left: 22%; bottom: -10%; animation: humo-c 17s ease-in-out infinite alternate; opacity: .7; }
@keyframes humo-a { 0% { transform: translate(0, 0) scale(1); }    50% { transform: translate(22%, 26%) scale(1.18); }  100% { transform: translate(38%, 6%) scale(.92); } }
@keyframes humo-b { 0% { transform: translate(0, 0) scale(1); }    50% { transform: translate(-30%, 18%) scale(1.12); } 100% { transform: translate(-12%, -24%) scale(1.22); } }
@keyframes humo-c { 0% { transform: translate(0, 0) scale(1); }    50% { transform: translate(18%, -34%) scale(1.25); } 100% { transform: translate(-26%, -12%) scale(.9); } }

/* Lo que responde al ratón (humo.js). El humo lleva inset -35 %; humo.js
   corrige ese desplazamiento al colocar el aura y la estela. */
.humo .aura, .humo .estela { position: absolute; border-radius: 50%; pointer-events: none; }
.humo .aura { width: 340px; height: 340px; left: 0; top: 0; opacity: 0; transition: opacity .7s ease;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--marca) 92%, #fff) 0%, color-mix(in oklab, var(--marca) 70%, transparent) 38%, transparent 70%);
  animation: none; }
.humo .aura.viva { opacity: .95; transition: opacity .25s ease; }
.humo .estela { transform: translate(-50%, -50%) scale(.4); opacity: .8; animation: estela-fuera 1.1s ease-out forwards;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--marca) 80%, #fff) 0%, color-mix(in oklab, var(--marca) 45%, transparent) 45%, transparent 72%); }
@keyframes estela-fuera { to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }

.form { width: 100%; position: relative; }
.sello { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.sello .icono { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: #fff; border: 1px solid #ECEEF3; box-shadow: 0 1px 0 #fff inset, 0 12px 26px -16px rgba(0, 32, 180, .45); }
.sello .icono img { width: 40px; height: auto; display: block; }
.sello b { font-size: 21px; letter-spacing: -.01em; color: var(--text-dark); }
.sello small { display: block; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.form h2 { margin: 0; font-family: var(--font-ui); font-size: 38px; font-weight: 800; letter-spacing: -.025em; }
.form .sub { margin: 8px 0 28px; color: var(--text-muted); font-size: 17px; }
.form label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 7px; }
.acc-campo { width: 100%; height: 50px; border-radius: 12px; border: 1px solid #E7DFD8; background: #FDFBF9;
  padding: 0 16px; font: inherit; font-size: 15px; color: var(--text-dark); margin-bottom: 18px; }
.acc-campo:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in oklab, var(--marca) 20%, transparent); background: #fff; }
.fila-aux { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 24px; font-size: 14px; color: var(--text-muted); }
.fila-aux label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.fila-aux input { accent-color: var(--marca); width: 16px; height: 16px; }
.form a { color: var(--marca); font-weight: 600; text-decoration: none; }
.entrar { width: 100%; height: 52px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; font: inherit;
  font-size: 16px; font-weight: 700;
  background: linear-gradient(180deg, color-mix(in oklab, var(--marca) 88%, #fff), var(--marca));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 30px -14px color-mix(in oklab, var(--marca) 90%, transparent); }
.entrar:hover { filter: brightness(1.03); }
.ayuda { text-align: center; margin: 20px 0 0; font-size: 14px; color: var(--text-muted); }
.nota-demo { text-align: center; margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }
#clerk-signin:not(:empty) { margin-bottom: 8px; }

/* Formulario de Clerk dentro de nuestra tarjeta. Las clases ck-* se las
   pasa auth.js en appearance.elements. Van con el id delante a propósito:
   Clerk inyecta sus estilos al montar, después de esta hoja, y con la
   clase sola ganaría él. Y van los DOS ids porque Clerk puede pintar en
   nuestro hueco (#clerk-signin) o en su propio contenedor al final del
   body (#clerk-components), según versión; visto en producción. Nada de tarjeta dentro de tarjeta: su caja ocupa
   el ancho de .form, sin fondo, sin sombra, sin borde. */
/* Clerk fija el ancho de su caja (25rem) en sus clases estables cl-*.
   Se apunta a las dos: a las nuestras (ck-*) y a las suyas, por si en
   alguna pieza no aplica la nuestra. */
:is(#clerk-signin, #clerk-components) .cl-rootBox, :is(#clerk-signin, #clerk-components) .cl-cardBox, :is(#clerk-signin, #clerk-components) .cl-card,
:is(#clerk-signin, #clerk-components) .cl-signIn-root, :is(#clerk-signin, #clerk-components) .cl-signIn-start, :is(#clerk-signin, #clerk-components) .cl-main, :is(#clerk-signin, #clerk-components) .cl-form,
:is(#clerk-signin, #clerk-components) > div { width: 100% !important; max-width: none !important; min-width: 0 !important; }
/* El propio hueco: Clerk le cuelga cl-rootBox y lo pone a ancho de
   contenido, y todo lo de dentro (al 100 %) se encoge con él. Visto en
   producción: 200 px dentro de una tarjeta de 418. */
#clerk-signin, #clerk-signin.cl-rootBox { display: block !important; width: 100% !important; max-width: none !important; }
:is(#clerk-signin, #clerk-components) .ck-root { width: 100% !important; }
:is(#clerk-signin, #clerk-components) .ck-cardbox { width: 100% !important; max-width: none !important; box-shadow: none; border: 0; border-radius: 0; background: transparent; }
:is(#clerk-signin, #clerk-components) .ck-card { width: 100% !important; max-width: none !important; padding: 0; gap: 0; box-shadow: none; border: 0; background: transparent; }
:is(#clerk-signin, #clerk-components) .ck-main { gap: 0; }
:is(#clerk-signin, #clerk-components) .ck-oculto { display: none; }
:is(#clerk-signin, #clerk-components) .ck-form { gap: 0; }
:is(#clerk-signin, #clerk-components) .ck-fila { margin: 0; }
:is(#clerk-signin, #clerk-components) .ck-label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 7px; color: var(--text-dark); }
:is(#clerk-signin, #clerk-components) .ck-campo { width: 100%; height: 50px; border-radius: 12px; border: 1px solid #E7DFD8; background: #FDFBF9;
  padding: 0 16px; font: inherit; font-size: 15px; color: var(--text-dark); box-shadow: none; margin-bottom: 18px; }
:is(#clerk-signin, #clerk-components) .ck-campo:focus, :is(#clerk-signin, #clerk-components) .ck-campo:focus-visible { outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--marca) 20%, transparent); background: #fff; }
:is(#clerk-signin, #clerk-components) .ck-boton { width: 100%; height: 52px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; font: inherit;
  font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; margin-top: 6px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--marca) 88%, #fff), var(--marca));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 30px -14px color-mix(in oklab, var(--marca) 90%, transparent); }
:is(#clerk-signin, #clerk-components) .ck-boton:hover { filter: brightness(1.03); background: linear-gradient(180deg, color-mix(in oklab, var(--marca) 88%, #fff), var(--marca)); }
:is(#clerk-signin, #clerk-components) .ck-social { height: 50px; border-radius: 12px; border: 1px solid #E7DFD8; background: #fff; font: inherit;
  font-size: 15px; font-weight: 600; color: var(--text-dark); box-shadow: none; }
:is(#clerk-signin, #clerk-components) .ck-social:hover { background: #FDFBF9; border-color: #D9CFC6; }
:is(#clerk-signin, #clerk-components) .ck-divisor { background: var(--divider); }
:is(#clerk-signin, #clerk-components) .ck-divisor-texto { color: var(--text-muted); font-size: 13px; }
:is(#clerk-signin, #clerk-components) .ck-identidad { border-radius: 999px; border: 1px solid #E7DFD8; background: #FDFBF9; padding: 6px 12px; margin-bottom: 18px; }
:is(#clerk-signin, #clerk-components) .ck-otp { height: 50px; border-radius: 12px; border: 1px solid #E7DFD8; background: #FDFBF9; font: inherit; font-size: 20px; font-weight: 700; }
:is(#clerk-signin, #clerk-components) .ck-otp:focus { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in oklab, var(--marca) 20%, transparent); }
:is(#clerk-signin, #clerk-components) .ck-enlace { color: var(--marca); font-weight: 600; font-size: 14px; }
:is(#clerk-signin, #clerk-components) .ck-alerta, :is(#clerk-signin, #clerk-components) .ck-error { font-size: 14px; }
:is(#clerk-signin, #clerk-components) .ck-aviso { background: var(--peligro-claro); color: var(--peligro); border: 0; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 18px; box-shadow: none; }
:is(#clerk-signin, #clerk-components) .ck-aviso svg { color: var(--peligro); }
/* El pie («Secured by Clerk», y en desarrollo el aviso «Development mode»)
   se queda pero discreto: es de Clerk y no se quita en el plan gratuito. */
:is(#clerk-signin, #clerk-components) .ck-pie { background: transparent; border: 0; padding: 14px 0 0; justify-content: center; font-size: 12px; opacity: .7; }
:is(#clerk-signin, #clerk-components) .ck-pie > * { background: transparent; border: 0; padding: 0; }
:is(#clerk-signin, #clerk-components) .error-form { margin-bottom: 18px; }

.acceso :is(#clerk-signin, #clerk-components) .ck-campo,
.acceso :is(#clerk-signin, #clerk-components) .ck-otp,
.acceso :is(#clerk-signin, #clerk-components) .ck-identidad { background: rgba(255, 255, 255, .04); border-color: var(--divider); color: var(--text-dark); }
/* El botón de Google va en blanco aunque la tarjeta sea oscura: es el
   aspecto con el que la gente lo reconoce. */
.acceso :is(#clerk-signin, #clerk-components) .ck-social { background: #fff; border-color: #fff; color: #13262A; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.acceso :is(#clerk-signin, #clerk-components) .ck-social:hover { background: #F4F4F4; border-color: #F4F4F4; }
.acceso :is(#clerk-signin, #clerk-components) .ck-social * { color: #13262A; }
/* La etiqueta «Last used» que Clerk cuelga del último método usado, fuera:
   se sale del botón y aquí no aporta nada. */
:is(#clerk-signin, #clerk-components) [class*="lastAuthenticationStrategy"],
:is(#clerk-signin, #clerk-components) [class*="LastAuthenticationStrategy"],
:is(#clerk-signin, #clerk-components) [class*="lastUsed"] { display: none !important; }
.confianza { position: absolute; bottom: 5%; left: 0; right: 0; display: flex; justify-content: center; gap: 22px;
  font-size: 13px; color: var(--text-muted); }
.confianza span { display: inline-flex; align-items: center; gap: 7px; }
.confianza svg { width: 15px; height: 15px; }

.acceso.acceso { background:
    radial-gradient(55% 45% at 100% 0%, color-mix(in oklab, var(--marca) 26%, transparent) 0%, transparent 70%),
    radial-gradient(45% 40% at 0% 100%, color-mix(in oklab, var(--marca) 18%, transparent) 0%, transparent 70%),
    var(--fondo); }
.humo { opacity: .78; }
.acceso .acc-campo { background: rgba(255, 255, 255, .04); border-color: var(--divider); }
.acceso .sello .icono { background: #fff; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; gap: 14px; height: 100vh; padding: 14px; }
/* Panel 214 · El alto que se ve de verdad. En el iPhone, 100vh es más que la pantalla y la barra de
   abajo se salía por el borde (había que desplazar para ver el menú). Lo mide js/sin-zoom.js; hasta
   entonces, 100dvh, y 100vh solo en navegadores que no lo conocen. */
@supports (height: 100dvh) { .shell { height: 100dvh; } }
html.alto-medido .shell { height: var(--alto-app); }
.nav-sidebar { display: flex; flex-direction: column; padding: 18px 12px; border-radius: var(--r-xl); min-height: 0; }
.nav-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; }
.nav-brand strong { display: block; font-family: var(--font-marca); font-weight: 500; font-size: 19px; line-height: 1.1; }
.nav-brand span { font-size: 12px; color: var(--text-muted); }
.nav-brand .nav-logo { font-size: inherit; color: inherit; }
/* Panel 416 · Silvia (24/10): el logo de la consulta, grande y a la vista, en una tarjeta blanca arriba del menú. */
.nav-brand:has(.nav-logo img) { flex-direction: column; align-items: stretch; gap: 10px; }
.nav-brand .nav-logo:has(img) { display: flex; align-items: center; justify-content: center; padding: 10px 14px;
  border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(10, 30, 70, .12), inset 0 0 0 1px rgba(10, 30, 70, .06); }
.nav-brand .nav-logo img.marca-logo { width: 100%; height: 64px; object-fit: contain; }   /* Panel 419 · más grande, y recortado (marca.js) */
.nav-brand:has(.nav-logo img) > div { padding: 0 4px; }
.nav-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: start; }
/* Panel 164 · Con pantallas bajas (portátil, zoom), el menú ya no cabía y Equipo y Ajustes se
   salían por debajo del panel. Ahora el menú se aprieta un poco y, si aun así no cabe, se
   desplaza por dentro del panel. */
@media (min-width: 861px) {
  .nav-sidebar { overflow: hidden; }
  .nav-items { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
               scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text-muted) 35%, transparent) transparent;
               margin: 0 -6px; padding: 0 6px; }
  .nav-bottom { flex: none; padding-top: 10px; }
}
@media (min-width: 861px) and (max-height: 860px) {
  .nav-brand { padding-bottom: 12px; }
  .nav-brand .nav-logo img.marca-logo { height: 52px; }
  .nav-item { padding-top: 8px; padding-bottom: 8px; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .nav-item { padding-top: 6px; padding-bottom: 6px; }
  .nav-sidebar { padding-top: 12px; padding-bottom: 12px; }
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  color: var(--text-muted); font-weight: 500; cursor: pointer; user-select: none; transition: color .2s, background-color .2s;
}
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item:hover { color: var(--text-dark); background: rgba(255, 255, 255, .45); }
html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, .05); }
.nav-item.active {
  color: var(--marca-oscura); font-weight: 650;
  background: linear-gradient(135deg, color-mix(in oklab, var(--marca) 20%, rgba(255,255,255,.7)), color-mix(in oklab, var(--marca) 9%, rgba(255,255,255,.5)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px color-mix(in oklab, var(--marca) 22%, transparent), 0 8px 18px -12px var(--marca);
}
html[data-theme="dark"] .nav-item.active {
  background: linear-gradient(135deg, color-mix(in oklab, var(--marca) 30%, transparent), color-mix(in oklab, var(--marca) 12%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px color-mix(in oklab, var(--marca) 35%, transparent);
}
.nav-badge {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--marca); color: #fff; font-size: 12px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.nav-badge.riesgo { background: var(--peligro); }
html[data-theme="dark"] .nav-badge.riesgo { color: #2a0d0a; }
.nav-bottom { margin-top: auto; display: grid; gap: 10px; }
.nav-demo { font-size: 12px; color: var(--aviso); background: var(--aviso-claro); padding: 8px 10px; border-radius: 12px; }
#nav-avatar-btn { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; width: 100%; }
#nav-avatar-btn:hover { background: rgba(255, 255, 255, .45); }
html[data-theme="dark"] #nav-avatar-btn:hover { background: rgba(255, 255, 255, .05); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(145deg, color-mix(in oklab, var(--marca) 75%, #fff), var(--marca-media));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
#nav-avatar-btn small { display: block; color: var(--text-muted); font-size: 12px; }

.view-container { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.franja-proveedor { display: flex; justify-content: flex-end; align-items: center; gap: 14px; min-height: 26px; padding: 0 8px 4px; font-size: 12px; color: var(--text-muted); }

/* ---------------------------------------------------------------- pie
   Firma del software. Una línea, sin fondo, sin borde y sin sombra: tiene
   que leerse como el crédito de quien lo ha hecho, no como publicidad. */
.pie { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 8px; padding: 10px 8px 4px; }
.pie-sep { font-size: 12px; color: var(--text-muted); opacity: .5; }
.firma {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; line-height: 1.35; color: var(--text-muted);
  text-decoration: none; opacity: .72;
  transition: opacity .18s ease, color .18s ease;
}
.firma img { height: 16px; width: auto; display: block; flex: none; }
.firma-txt > span { white-space: nowrap; }     /* el nombre nunca se parte */
.firma:hover, .firma:focus-visible { opacity: 1; color: var(--text-dark); }
/* El subrayado va en el texto, no en el enlace: si no, cruza también el logo. */
.firma:hover .firma-txt, .firma:focus-visible .firma-txt {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}
.firma:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
/* En oscuro el azul de Astra pierde presencia: se le sube un punto. */
html[data-theme="dark"] .firma { opacity: .62; }
html[data-theme="dark"] .pie-sep { opacity: .4; }
html[data-theme="dark"] .firma img { filter: brightness(1.25) saturate(1.1); }
html[data-theme="dark"] .firma:hover, html[data-theme="dark"] .firma:focus-visible { opacity: 1; }
@media (max-width: 560px) {
  .pie { padding-bottom: 2px; }
  .firma { flex-wrap: wrap; justify-content: center; text-align: center; }
}
.franja-proveedor button { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.franja-proveedor button:hover { color: var(--text-dark); background: rgba(255, 255, 255, .5); }
.view { display: none; flex: 1; min-height: 0; overflow: auto; }
.view.active { display: block; }
#view-agenda.active { display: flex; flex-direction: column; overflow: hidden; }
.view-cabecera { padding: 8px 4px 0; }
.view-cabecera h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.view-cabecera p { margin: 4px 0 0; color: var(--text-muted); }

/* ---------------------------------------------------------------- inicio */
#inicio-root { padding: 2px 2px 28px; display: grid; gap: 16px; max-width: 1320px; }
.saludo {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  border-radius: var(--r-xl); padding: 16px 16px 16px 32px; min-height: 196px;
}
.saludo-texto h1 { font-family: var(--font-marca); font-weight: 500; font-size: 34px; line-height: 1.12; margin: 0 0 8px; letter-spacing: -.005em; }
.saludo-texto p { margin: 0; color: var(--text-muted); font-size: 16px; }
/* El tiempo de hoy en Madrid (panel 175). Una línea bajo la fecha. */
.tiempo { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--text-muted); font-size: 15px; line-height: 1.3; }
.tiempo[hidden] { display: none; }
.tiempo-icono { flex: none; width: 28px; height: 28px; color: var(--marca, currentColor); }
.tiempo-texto strong { color: var(--text-dark); font-weight: 600; }
.tiempo-texto small { display: block; font-size: 13px; color: var(--text-muted); }
.tiempo-texto small strong { font-weight: 600; }

/* ---- Reloj de Inicio (digital o analógico) ---- */
.saludo { grid-template-columns: 1fr auto auto; }
.reloj { display: grid; justify-items: center; gap: 10px; }
.reloj-cara { display: grid; place-items: center; min-width: 150px; min-height: 124px; }
.reloj-digital { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.reloj-hm { font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--text-dark); }
.reloj-s { font-size: 20px; font-weight: 700; color: var(--marca); width: 2ch; }
.reloj-analogico { width: 124px; height: 124px; display: none; overflow: visible; }
.reloj[data-modo="analogico"] .reloj-analogico { display: block; }
.reloj[data-modo="analogico"] .reloj-digital { display: none; }
.reloj-esfera {
  fill: color-mix(in oklab, var(--card-bg) 70%, transparent);
  stroke: var(--vidrio-borde); stroke-width: 1.5;
  filter: drop-shadow(0 8px 14px rgba(12, 52, 54, .18));
}
.reloj-marcas line { stroke: var(--text-muted); stroke-width: 1.6; stroke-linecap: round; }
.reloj-h, .reloj-m { stroke: var(--text-dark); stroke-linecap: round; }
.reloj-h { stroke-width: 3.6; }
.reloj-m { stroke-width: 2.4; }
.reloj-seg { stroke: var(--marca); stroke-width: 1.2; stroke-linecap: round; }
.reloj-eje { fill: var(--marca); }
.reloj-modos {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(19, 52, 56, .06); box-shadow: inset 0 1px 2px rgba(12, 52, 54, .08);
}
html[data-theme="dark"] .reloj-modos { background: rgba(255, 255, 255, .06); }
.reloj-modos button {
  border: 0; background: transparent; padding: 0 12px; height: 28px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.reloj-modos button[aria-pressed="true"] { background: var(--card-bg); color: var(--text-dark); box-shadow: 0 2px 6px -2px rgba(12, 52, 54, .3); }
@media (max-width: 1100px) { .reloj-hm { font-size: 44px; } }
/* Banner de la consulta: imagen apaisada de esquina muy redondeada, en la
   tarjeta de saludo. Lo sube la dirección desde Ajustes; si no hay ninguno,
   se usa el del producto. Más estrecho que la foto que había antes: el
   protagonista de esta tarjeta es el saludo, no la imagen. */
/* Ajustes · bloque del banner */
/* El padding vive en .marca-edit, no en el panel: este bloque necesita el suyo
   o se sale por el borde redondeado de la tarjeta. */
.marca-banner {
  display: grid; grid-template-columns: 1fr minmax(170px, 260px); gap: 26px; align-items: center;
  padding: 20px 20px 22px; border-top: 1px solid var(--divider);
}
.marca-banner > div { min-width: 0; }
.marca-banner h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.banner-previa {
  margin: 0; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--vidrio-borde), var(--sombra-flota); background: var(--dash-bg);
}
.banner-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .marca-banner { grid-template-columns: 1fr; padding: 16px 14px 18px; } }

.banner-marca {
  position: relative; margin: 0; width: clamp(180px, 20vw, 280px); aspect-ratio: 3 / 2;
  border-radius: 28px; overflow: hidden; align-self: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 6px rgba(255, 255, 255, .22), var(--sombra-flota);
}
.banner-marca img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.banner-marca::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 32%),
              radial-gradient(120% 90% at 100% 110%, rgba(0, 0, 0, .18), transparent 55%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -10px 24px -14px rgba(0, 0, 0, .35);
}
.banner-marca:hover img { transform: scale(1.04); }
html[data-theme="dark"] .banner-marca { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 6px rgba(255, 255, 255, .03), var(--sombra-flota); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { border-radius: var(--r-lg); padding: 18px 20px; transition: transform .2s ease, box-shadow .2s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-vidrio), var(--sombra-flota); }
.kpi-valor { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-nombre { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.kpi-detalle { font-size: 13px; margin-top: 10px; color: var(--text-muted); }
.kpi.alerta {
  background: var(--vidrio-reflejo), color-mix(in oklab, var(--peligro) 11%, var(--vidrio));
  border-color: color-mix(in oklab, var(--peligro) 35%, transparent);
}
.kpi.alerta .kpi-valor, .kpi.alerta .kpi-nombre { color: var(--peligro); }

.paneles { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
/* Panel 100 · WhatsApp por categorías en Inicio */
.kpi.aviso .kpi-valor { color: var(--marca); }
.kpi.aviso { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--marca) 45%, transparent), var(--sombra-vidrio); }

/* Panel 204 · Las tarjetas de Inicio llevan siempre una luz de SU color dando vueltas despacio al borde,
   con un poco de resplandor: se ve que están vivas y se actualizan solas. Cuando su cifra cambia (novedad),
   la luz se intensifica: gira más rápido, brilla más y la tarjeta se ilumina por dentro unos segundos. */
@property --kpi-giro { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.kpi { --kpi-c: var(--t, var(--marca)); }
.kpi.alerta { --kpi-c: var(--peligro); }
.kpi .kpi-luz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  animation: kpi-gira 3.2s linear infinite; }      /* todas a la vez (el desfase lo pone inicio.js por el reloj) */
.kpi .kpi-luz::before, .kpi .kpi-luz::after {          /* el arco de luz (nítido) y su halo (difuminado) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--kpi-giro), transparent 0deg 140deg,
              color-mix(in oklab, var(--kpi-c) 30%, transparent) 230deg, color-mix(in oklab, var(--kpi-c) 85%, transparent) 310deg,
              var(--kpi-c) 340deg, color-mix(in oklab, var(--kpi-c) 40%, #fff) 354deg, transparent 360deg);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .95; padding: 2.5px; transition: opacity .6s ease;
}
.kpi .kpi-luz::after { padding: 7px; filter: blur(7px); opacity: .8; }
/* Novedad: la luz se intensifica (más gruesa y más brillante) y la tarjeta se enciende por dentro; sigue al
   mismo ritmo que las demás para que no se descompasen. */
.kpi.novedad .kpi-luz::before { opacity: 1; padding: 3.5px; }
.kpi.novedad .kpi-luz::after { opacity: 1; padding: 12px; filter: blur(10px); }
.kpi.novedad { animation: kpi-brilla 5s cubic-bezier(.2, .7, .2, 1) 1; }
.kpi .kpi-resplandor { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0;
  box-shadow: inset 0 0 38px 6px color-mix(in oklab, var(--kpi-c) 45%, transparent);
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--kpi-c) 24%, transparent), transparent 72%); }
.kpi.novedad .kpi-resplandor { animation: kpi-enciende 5s ease-in 1; }
@keyframes kpi-gira { to { --kpi-giro: 360deg; } }
@keyframes kpi-enciende { 0% { opacity: 0; } 10%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kpi-brilla {      /* sin 0 % ni 100 %: parte de la sombra que tenga la tarjeta y vuelve a ella */
  12%, 55% { box-shadow: var(--sombra-vidrio), 0 0 0 1px color-mix(in oklab, var(--kpi-c) 45%, transparent),
                         0 0 48px 8px color-mix(in oklab, var(--kpi-c) 55%, transparent); }
}
.kpi.novedad .kpi-valor { animation: kpi-cifra .6s cubic-bezier(.2, .9, .3, 1.3) 1; }
@keyframes kpi-cifra { 0% { transform: translateY(6px) scale(.92); opacity: .3; } 100% { transform: none; opacity: 1; } }
@media (max-width: 700px) { .kpi .kpi-luz::after { filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) {
  .kpi .kpi-luz { animation: none; --kpi-giro: 120deg; }
  .kpi.novedad .kpi-valor { animation: none; }
}
.kpi[data-wa]:focus-visible { outline: none; box-shadow: var(--focus); }
.wa-resumen { display: grid; gap: 12px; }
.wa-resumen-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 4px; }
.wa-resumen-cab h2 { margin: 0; font-size: 17px; }
.wa-resumen .sec { color: var(--text-muted); font-size: 13px; }
.wa-etapas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 4px; }
.wa-etapa { font-size: 13px; }
.wa-etapa b { font-variant-numeric: tabular-nums; margin-right: 2px; }
.panel { border-radius: var(--r-lg); overflow: hidden; }
.panel h2 { font-size: 16px; margin: 0; padding: 16px 20px 12px; }
.lista { list-style: none; margin: 0; padding: 0 8px 8px; }
.lista li { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; }
.lista li + li { margin-top: 2px; }
.lista li:hover { background: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .lista li:hover { background: rgba(255, 255, 255, .04); }
.lista .hora { font-variant-numeric: tabular-nums; font-weight: 650; }
.lista .sec { display: block; font-size: 13px; color: var(--text-muted); }
.vacio { padding: 8px 20px 22px; color: var(--text-muted); margin: 0; }

/* ---------------------------------------------------------------- chips (burbujas de estado) */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.chip-pendiente { background: var(--aviso-claro); color: var(--aviso); }
.chip-confirmada { background: var(--marca-clara); color: var(--marca-oscura); }
.chip-realizada { background: var(--dash-bg); color: var(--text-muted); }
.chip-cancelada { background: var(--dash-bg); color: var(--text-muted); text-decoration: line-through; }
.chip-no_presentada { background: var(--peligro-claro); color: var(--peligro); }
.chip-online { background: var(--accion-clara); color: var(--accion-oscura); }

/* ---------------------------------------------------------------- pacientes y tablas */
#pacientes-root { padding: 2px 2px 28px; max-width: 1320px; }
.barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.campo {
  height: 40px; padding: 0 14px; border-radius: 12px; min-width: 0;
  border: 1px solid var(--vidrio-borde); background: var(--vidrio-fuerte);
  box-shadow: inset 0 1px 2px rgba(12, 52, 54, .06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.campo:focus { border-color: var(--accion); box-shadow: var(--focus); outline: none; }
.buscador { width: min(400px, 100%); border-radius: 999px; padding: 0 18px; }
.tabla-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 13px; padding: 12px 16px; border-bottom: 1px solid var(--divider); position: sticky; top: 0; background: var(--vidrio-fuerte); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tabla td { padding: 11px 16px; border-bottom: 1px solid var(--divider); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background-color .15s; }
.tabla tbody tr:hover { background: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .tabla tbody tr:hover { background: rgba(255, 255, 255, .04); }
.tabla .inactivo td { color: var(--text-muted); }

/* ---------------------------------------------------------------- secciones por llegar */
.proxima { padding: 30px; max-width: 680px; border-radius: var(--r-xl); margin: 2px; }
.proxima h1 { margin: 0 0 8px; font-size: 22px; }
.proxima p { color: var(--text-muted); margin: 0 0 12px; }
.proxima ul { margin: 0; padding-left: 20px; color: var(--text-muted); }

.marca-edit { display: grid; grid-template-columns: 200px 1fr; gap: 26px; padding: 4px 20px 20px; align-items: start; }
.marca-vista { display: grid; justify-items: center; gap: 10px; text-align: center; }
.marca-previa { display: grid; place-items: center; width: 118px; height: 118px; border-radius: 24px;
  background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.marca-previa img, .marca-previa svg, .marca-previa .marca-logo { max-width: 86px; max-height: 86px; }
.marca-vista .btn { width: 100%; }
.marca-campos { display: grid; gap: 16px; max-width: 460px; }
@media (max-width: 860px) { .marca-edit { grid-template-columns: 1fr; padding: 4px 14px 16px; } }

/* ---------------------------------------------------------------- cajón lateral */
.cajon-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(8, 26, 28, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cajon {
  position: fixed; top: 14px; right: 14px; bottom: 14px; width: min(430px, calc(100vw - 28px)); z-index: 41;
  border-radius: var(--r-xl); display: flex; flex-direction: column; overflow: hidden;
  background: var(--vidrio-reflejo), var(--vidrio-fuerte);
  box-shadow: var(--sombra-vidrio), var(--sombra-flota);
  animation: cajon-entra .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes cajon-entra { from { transform: translateX(28px) scale(.99); opacity: 0; } }
.cajon header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; border-bottom: 1px solid var(--divider); }
.cajon header h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.cajon header p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.cajon-cerrar { border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; flex: none; }
html[data-theme="dark"] .cajon-cerrar { background: rgba(255, 255, 255, .06); }
.cajon-cuerpo { padding: 18px 24px; overflow: auto; flex: 1; display: grid; gap: 14px; align-content: start; }
.cajon-pie { padding: 14px 24px 18px; border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; gap: 8px; }
.dato { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 14px; margin: 0; }
.dato dt { color: var(--text-muted); }
.dato dd { margin: 0; }
.form-fila { display: grid; gap: 6px; }
.form-fila label { font-size: 13px; font-weight: 600; }
.form-fila .campo { width: 100%; }
.error-form { background: var(--peligro-claro); color: var(--peligro); padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.nota-privada { font-size: 13px; color: var(--text-muted); background: var(--dash-bg); padding: 10px 14px; border-radius: 12px; margin: 0; }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(14, 30, 33, .78); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), var(--sombra-flota);
  animation: toast-entra .25s cubic-bezier(.2, .7, .2, 1);
}
@keyframes toast-entra { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ---------------------------------------------------------------- notificaciones (panel 63) */
.notif-panel {
  position: fixed; right: 22px; top: 22px; z-index: 70; max-width: min(380px, calc(100vw - 32px));
  display: grid; gap: 3px; padding: 13px 18px; border-radius: 16px; cursor: pointer;
  color: #fff; background: rgba(14, 30, 33, .86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), var(--sombra-flota);
  animation: notif-entra .28s cubic-bezier(.2, .7, .2, 1);
}
.notif-panel strong { font-size: 14px; }
.notif-panel span { font-size: 13px; opacity: .85; }
/* Panel 96: con el icono del tipo a la izquierda, como la notificación del móvil. */
.notif-panel.con-icono { grid-template-columns: 40px 1fr; align-items: center; column-gap: 12px; padding: 11px 16px 11px 12px; }
.notif-icono { width: 40px; height: 40px; display: block; }
.notif-textos { display: grid; gap: 2px; min-width: 0; }
.notif-panel.notif-riesgo { background: #9b1c1c; box-shadow: 0 0 0 3px rgba(155, 28, 28, .35), var(--sombra-flota); }
@keyframes notif-entra { from { transform: translateY(-10px); opacity: 0; } }
@media (max-width: 640px) { .notif-panel { left: 16px; right: 16px; top: 16px; max-width: none; } }
.notif-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }
.notif-tipo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--dash-bg); cursor: pointer; }
.notif-tipo input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--marca); flex: none; }
.notif-tipo span { display: grid; gap: 2px; }
.notif-tipo strong { font-size: 14px; }
.notif-tipo small { font-size: 12.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paneles { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .auth-wrapper { grid-template-columns: 1fr; }
  .hero { min-height: 50vh; }
  .claim h1 { font-size: 32px; }
  .claim p { font-size: 15px; margin-top: 14px; }
  .modulos { margin-top: 16px; }
  .acceso { padding: 28px 16px 72px; }
  .auth-tarjeta { padding: 30px 22px 26px; border-radius: 26px; }
  .sello { margin-bottom: 26px; }
  .form h2 { font-size: 30px; }
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 10px; gap: 10px;
           padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .nav-sidebar { order: 2; flex-direction: row; padding: 6px; border-radius: 22px; }
  .nav-brand, .nav-bottom { display: none; }
  .nav-items { grid-auto-flow: column; width: 100%; }
  .nav-item { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 4px; justify-content: center; }
  .nav-badge { position: absolute; margin: -4px 0 0 22px; height: 16px; min-width: 16px; font-size: 10px; }
  .saludo { grid-template-columns: 1fr; padding: 14px; }
  /* En el móvil el reloj va en una fila: la cara a la izquierda y el
     selector a la derecha, sin robar alto al saludo. */
  .reloj { grid-auto-flow: column; justify-content: space-between; align-items: center; padding: 0 8px; }
  .reloj-cara { min-width: 0; min-height: 0; }
  .reloj-hm { font-size: 40px; }
  .reloj-analogico { width: 92px; height: 92px; }
  .banner-marca { width: 100%; aspect-ratio: 21 / 9; }
  .pie { padding: 8px 8px 2px; }
  .saludo-texto { padding: 0 8px 6px; }
  .saludo-texto h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --vidrio: rgba(255, 255, 255, .92); --vidrio-fuerte: #fff; }
  html[data-theme="dark"] { --vidrio: rgba(20, 38, 42, .96); --vidrio-fuerte: #14262a; }
}

/* ==================================================================
   Sala de videollamada, historial de la cita y notas internas
   Añadido con la 0016: lo que la base de datos ya guardaba y el panel
   no tenía por dónde enseñar.
   ================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- la sala ---- */
.sala {
  display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in oklab, var(--accion) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accion) 24%, transparent);
}
.sala-vacia {
  background: var(--dash-bg); border: 1px dashed var(--divider);
  color: var(--text-muted); font-size: 13px; line-height: 1.5;
}
.sala-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sala-url {
  flex: 1; min-width: 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--card-bg); border: 1px solid var(--divider); border-radius: 9px;
  padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dark); user-select: all;
}
.sala .btn { justify-self: start; }
.sala-pie { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.sala-aviso { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--aviso); line-height: 1.45; }

/* ---- historial de la cita ---- */
.historial { border-top: 1px solid var(--divider); padding-top: 10px; }
.historial > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  list-style: none; display: flex; align-items: center; gap: 7px;
}
.historial > summary::-webkit-details-marker { display: none; }
.historial > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s ease;
}
.historial[open] > summary::before { transform: rotate(45deg); }
.historial > summary:hover { color: var(--text-dark); }
.cargando-linea { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }

.pasos { list-style: none; margin: 12px 0 0; padding: 0 0 0 16px; display: grid; gap: 12px; }
.paso { position: relative; display: grid; gap: 2px; }
/* El punto y la línea que los une: se lee de un vistazo como una línea
   de tiempo, que es lo que es. */
.paso::before {
  content: ""; position: absolute; left: -16px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marca);
}
.paso:not(:last-child)::after {
  content: ""; position: absolute; left: -12.6px; top: 15px; bottom: -12px;
  width: 1px; background: var(--divider);
}
.paso-asistente::before { background: var(--accion); }
.paso-sistema::before   { background: var(--text-muted); }
.paso-que   { font-size: 13.5px; color: var(--text-dark); }
.paso-quien { font-size: 12px; color: var(--text-muted); }
.paso-motivo { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* ---- notas internas ---- */
.notas-bloque { border-top: 1px solid var(--divider); padding-top: 14px; display: grid; gap: 10px; }
.notas-bloque h3 { margin: 0; font-size: 14px; }
.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nota {
  background: var(--dash-bg); border-radius: 12px; padding: 9px 12px;
  display: grid; gap: 3px;
}
.nota p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dark); }
.nota span { font-size: 11.5px; color: var(--text-muted); }
.notas-vacio { font-size: 13px; color: var(--text-muted); }

/* ==================================================================
   Videollamadas
   La misma información de la agenda, colocada para lo que se hace con
   ella: entrar. En la agenda hay que buscar la cita, abrirla y sacar el
   enlace de dentro. Aquí el botón está a la vista.
   ================================================================== */
#view-videollamadas.active { display: block; }
/* minmax(0,1fr) y no 1fr: por defecto un elemento de rejilla no se
   encoge por debajo de su contenido, así que la tabla del historial
   ensanchaba la columna entera y en el móvil se salía todo por la
   derecha. */
#videollamadas-root {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 18px; align-content: start;
}
#videollamadas-root > * { min-width: 0; }

.vc-cargando { display: grid; place-items: center; min-height: 240px; }
.vc-cargando i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--divider); border-top-color: var(--marca);
  animation: vc-giro .8s linear infinite;
}
@keyframes vc-giro { to { transform: rotate(360deg); } }

.vc-cab h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.vc-cab p { margin: 4px 0 0; color: var(--text-muted); font-size: .92rem; }

/* ---- tarjetas de cabecera ---- */
.vc-tarjetas {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.vc-tarjeta {
  display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-lg, 18px);
}
.vc-t-titulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.vc-t-valor { font-size: 2.1rem; line-height: 1.1; font-weight: 700; color: var(--text-dark); }
.vc-t-pie { font-size: .78rem; color: var(--text-muted); }

/* ---- bloques ---- */
.vc-bloque { padding: 18px 20px; border-radius: var(--r-lg, 18px); }
.vc-bloque h2 { margin: 0 0 12px; font-size: 1rem; }
.vc-vacio { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ---- próximas ---- */
.vc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vc-fila {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 150px 1fr auto auto;
  padding: 12px 12px; border-radius: 14px;
  border-bottom: 1px solid var(--divider);
}
.vc-fila:last-child { border-bottom: 0; }
.vc-fila:hover { background: var(--dash-bg); }
/* La sesión que toca ahora se distingue sin colorines: una franja. */
.vc-fila.ahora {
  background: color-mix(in oklab, var(--marca) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--marca);
}
/* La que ya terminó: apagada, en gris y rayada de lado a lado, sin llamar la atención.
   Las rayas no tapan los clics: si la sesión se alarga, «Unirse» sigue sirviendo. */
.vc-fila { position: relative; }
.vc-fila.pasada > * { opacity: .5; filter: grayscale(1); }
.vc-fila.pasada::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--text-muted) 22%, transparent) 0 1.5px, transparent 1.5px 9px);
}
.vc-fila.pasada:hover { background: transparent; }
.vc-cuando, .vc-quien { display: grid; gap: 2px; min-width: 0; }
.vc-cuando strong { font-size: .92rem; color: var(--text-dark); }
.vc-cuando small, .vc-quien small { font-size: .76rem; color: var(--text-muted); }
.vc-quien strong {
  font-size: .95rem; color: var(--text-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-accion { display: flex; align-items: center; gap: 6px; }
.vc-unirse { min-height: 34px; padding: 0 16px; font-size: 13.5px; }
/* Honesto: mientras no haya sala no hay botón que pulsar. */
.vc-sin-sala {
  font-size: .78rem; color: var(--text-muted);
  background: var(--dash-bg); padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

.vc-tabla td { font-size: .88rem; }

@media (max-width: 860px) {
  .vc-fila {
    grid-template-columns: 1fr auto;
    grid-template-areas: "cuando estado" "quien quien" "accion accion";
    row-gap: 8px;
  }
  .vc-cuando { grid-area: cuando; }
  .vc-quien  { grid-area: quien; }
  .vc-fila > .chip { grid-area: estado; justify-self: end; }
  .vc-accion { grid-area: accion; }
  .vc-unirse { flex: 1; }
}

/* El icono de WhatsApp del menú.
   Va como máscara y no como <img>: así toma el color del menú —gris
   apagado, naranja al estar activo— y se ve igual en tema oscuro. Un
   PNG plano se quedaría siempre del mismo color. */
.ico-wa {
  width: 22px; height: 22px; flex: none; display: block;
  background-color: currentColor;
  -webkit-mask: url("../img/wa.png") center / contain no-repeat;
          mask: url("../img/wa.png") center / contain no-repeat;
}

/* =====================================================================
   Métricas
   ---------------------------------------------------------------------
   Dos registros distintos a propósito. Lo medido va en tarjetas
   neutras. Lo estimado va en una lista de cuenta, con la operación a
   la vista, para que se lea como lo que es: una suma que alguien puede
   rehacer en un papel y discutir.
   ===================================================================== */
.mt-cargando { display: grid; place-items: center; min-height: 240px; }
.mt-cargando i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--divider); border-top-color: var(--marca);
  animation: vc-giro .8s linear infinite;
}

.mt-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mt-cab h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.mt-cab p  { margin: 4px 0 0; color: var(--text-muted); font-size: .92rem; }

.mt-rangos { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--dash-bg); }
.mt-grupos { width: fit-content; max-width: 100%; margin: 8px 0 6px; }   /* Panel 418 · Cobros y pagos | Actividad */
.mt-rango {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 13px; border-radius: 10px; font: inherit; font-size: .84rem;
  color: var(--text-muted); white-space: nowrap;
}
.mt-rango:hover  { color: var(--text-dark); }
.mt-rango.activo { background: var(--surface, #fff); color: var(--text-dark); font-weight: 600;
                   box-shadow: 0 1px 3px rgb(0 0 0 / .08); }

/* ---- el veredicto ---- */
.mt-veredicto {
  display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--r-lg, 18px);
  border-left: 4px solid var(--divider);
}
.mt-veredicto.bien   { border-left-color: #2F8F5B; }
.mt-veredicto.mal    { border-left-color: #C0763B; }
.mt-veredicto.neutro { border-left-color: var(--divider); }
.mt-cifra { font-size: 2.6rem; line-height: 1.05; font-weight: 700; color: var(--text-dark); }
.mt-veredicto.bien .mt-cifra { color: #2F8F5B; }
.mt-veredicto.mal  .mt-cifra { color: #C0763B; }
.mt-veredicto p     { margin: 2px 0 0; color: var(--text-dark); font-size: .95rem; max-width: 62ch; }
.mt-veredicto small { color: var(--text-muted); font-size: .78rem; }

.mt-titulo { margin: 4px 0 0; font-size: 1.05rem; }
.mt-nota   { margin: 0; color: var(--text-muted); font-size: .86rem; max-width: 70ch; }

/* ---- tarjetas de lo medido ---- */
.mt-tarjetas {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.mt-tarjeta { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-lg, 18px); min-width: 0; }
.mt-tarjeta.destacada { border-left: 3px solid var(--marca); }
.mt-t-titulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.mt-t-valor { font-size: 2rem; line-height: 1.1; font-weight: 700; color: var(--text-dark); }
.mt-t-pie   { font-size: .78rem; color: var(--text-muted); }

.mt-bloque { padding: 18px 20px; border-radius: var(--r-lg, 18px); }
.mt-bloque h3 { margin: 0 0 4px; font-size: 1rem; }

/* ---- lo que conviene vigilar ---- */
.mt-lista-plana { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.mt-lista-plana li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline;
  padding: 11px 2px; border-bottom: 1px solid var(--divider);
}
.mt-lista-plana li:last-child { border-bottom: 0; }
.mt-lista-plana span   { font-size: .92rem; color: var(--text-dark); }
.mt-lista-plana strong { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); }
.mt-lista-plana small  { grid-column: 1 / -1; font-size: .78rem; color: var(--text-muted); }
.mt-lista-plana li.alerta strong { color: #C0763B; }
.mt-lista-plana li.alerta small b { color: #C0763B; }

/* ---- 0184 · retomados por el asistente ---- */
.mt-retomados-lista { padding: 4px 18px; border-radius: var(--r-lg, 18px); margin-top: 12px; }
.mt-retomados-lista strong { font-size: .95rem; font-weight: 600; }

/* ---- la cuenta ---- */
.mt-cuenta { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.mt-cuenta li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline;
  padding: 13px 2px; border-bottom: 1px solid var(--divider);
}
.mt-cuenta span   { font-size: .95rem; color: var(--text-dark); }
.mt-cuenta em     { grid-column: 1; font-style: normal; font-size: .78rem; color: var(--text-muted); }
.mt-cuenta strong { grid-row: 1 / 3; grid-column: 2; font-size: 1.2rem; font-weight: 700;
                    color: #2F8F5B; white-space: nowrap; }
.mt-cuenta li.mt-coste strong { color: var(--text-muted); }
.mt-cuenta li.mt-total {
  border-bottom: 0; margin-top: 6px; padding-top: 16px;
  border-top: 2px solid var(--divider);
}
.mt-cuenta li.mt-total span   { font-weight: 600; }
.mt-cuenta li.mt-total strong { font-size: 1.6rem; }
.mt-cuenta li.mt-total.mal strong { color: #C0763B; }

/* ---- los supuestos ---- */
.mt-campos {
  display: grid; gap: 16px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.mt-campo { display: grid; gap: 5px; min-width: 0; }
.mt-c-titulo { font-size: .88rem; font-weight: 600; color: var(--text-dark); }
.mt-c-entrada { display: flex; align-items: center; gap: 8px; }
.mt-c-entrada input {
  width: 100%; min-width: 0; padding: 9px 11px; font: inherit; font-size: 1rem;
  border: 1px solid var(--divider); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-dark);
}
.mt-c-entrada input:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.mt-c-entrada input:disabled { background: var(--dash-bg); color: var(--text-muted); }
.mt-c-entrada i { font-style: normal; font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.mt-campo small { font-size: .77rem; color: var(--text-muted); line-height: 1.45; }

.mt-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mt-actualizado { display: block; margin-top: 12px; font-size: .76rem; color: var(--text-muted); }

#metricas-root { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }   /* Panel 309 · una línea larga no ensancha la pantalla */

/* ---------------------------------------------------------------------
   Histórico del ahorro
   ---------------------------------------------------------------------
   Los colores de las series NO son los de la marca. La marca la cambia
   cada consulta desde Ajustes, y si una serie lleva el color de marca,
   el dia que alguien lo cambie a naranja el grafico pasa a significar
   otra cosa. El color sigue al dato, no al logotipo.

   Pareja validada para daltonismo sobre las dos superficies del panel
   (azul/naranja, separacion CVD ΔE 24,7 en claro y 26,8 en oscuro). En
   claro el naranja se queda en 2,99:1 de contraste, por debajo de 3:1:
   por eso el grafico lleva leyenda Y tabla de datos, que es el relieve
   que compensa.
   ------------------------------------------------------------------ */
:root {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
}
html[data-theme="dark"] {
  --serie-1: #3987e5;
  --serie-2: #d95926;
}

.mt-historico { display: grid; gap: 16px; }

.mt-acumulado {
  display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px;
  background: var(--dash-bg); border-left: 3px solid var(--divider);
}
.mt-acumulado.bien { border-left-color: #2F8F5B; }
.mt-acumulado.mal  { border-left-color: #C0763B; }
.mt-acumulado span   { font-size: .78rem; font-weight: 700; letter-spacing: .06em;
                       text-transform: uppercase; color: var(--text-muted); }
.mt-acumulado strong { font-size: 1.8rem; line-height: 1.1; color: var(--text-dark); }
.mt-acumulado.bien strong { color: #2F8F5B; }
.mt-acumulado.mal  strong { color: #C0763B; }
.mt-acumulado small  { font-size: .82rem; color: var(--text-muted); }

/* ---- leyenda ---- */
.mt-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mt-leyenda span { display: inline-flex; align-items: center; gap: 7px;
                   font-size: .82rem; color: var(--text-muted); }
.mt-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.mt-sw-1 { background: var(--serie-1); }
.mt-sw-2 { background: var(--serie-2); }
.mt-sw-c { height: 0; border-top: 2px solid var(--text-muted); border-radius: 0; }

/* ---- el svg ---- */
.mt-graf { position: relative; margin: 0; }
.mt-graf svg { display: block; width: 100%; height: auto; overflow: visible; }

.mt-rej         { stroke: var(--divider); stroke-width: 1; }
.mt-eje-y,
.mt-eje-x       { fill: var(--text-muted); font-size: 11px; font-family: inherit; }
.mt-b1          { fill: var(--serie-1); }
.mt-b2          { fill: var(--serie-2); }
.mt-hit         { fill: transparent; }
.mt-col.parcial .mt-b1,
.mt-col.parcial .mt-b2 { opacity: .55; }
.mt-col:hover   .mt-hit { fill: var(--dash-bg); }
.mt-col:focus-visible   { outline: 2px solid var(--marca); outline-offset: 2px; }
.mt-marca-sup   { fill: var(--text-muted); }

.mt-coste-linea  { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
.mt-coste-rotulo { fill: var(--text-muted); font-size: 11px; font-family: inherit; }

.mt-graf figcaption { margin-top: 10px; font-size: .76rem; color: var(--text-muted);
                      line-height: 1.5; max-width: 66ch; }

/* ---- tooltip ---- */
.mt-tip {
  position: absolute; top: 4px; z-index: 5; pointer-events: none;
  display: grid; gap: 3px; min-width: 190px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--vidrio-fuerte, var(--surface, #fff));
  border: 1px solid var(--divider); box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  font-size: .8rem; color: var(--text-dark);
}
.mt-tip[hidden] { display: none; }
.mt-tip strong  { font-size: .86rem; }
.mt-tip span    { display: grid; grid-template-columns: 11px 1fr auto; gap: 7px;
                  align-items: center; color: var(--text-muted); }
.mt-tip b       { color: var(--text-dark); font-variant-numeric: tabular-nums; }
.mt-tip span.mt-tip-neto {
  grid-template-columns: 1fr auto;          /* dos columnas: no lleva muestra */
  border-top: 1px solid var(--divider); margin-top: 3px; padding-top: 5px;
}
.mt-tip small   { color: var(--text-muted); font-size: .74rem; }

.mt-pos { color: #2F8F5B; }
.mt-neg { color: #C0763B; }

.mt-tabla-datos summary {
  cursor: pointer; font-size: .84rem; color: var(--text-muted);
  padding: 8px 0; list-style-position: inside;
}
.mt-tabla-datos summary:hover { color: var(--text-dark); }
.mt-tabla-datos .tabla td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Métricas · editable frente a medido
   ---------------------------------------------------------------------
   La separación visual es el punto de la seccion, no un adorno. Si un
   valor calculado parece un campo de texto, alguien intentara editarlo;
   y si ademas se deja, la cifra de ahorro deja de valer nada.
   ------------------------------------------------------------------ */
.mt-aviso {
  padding: 13px 16px; border-radius: 14px;
  border-left: 3px solid var(--aviso); font-size: .88rem; line-height: 1.5;
}
.mt-aviso strong { display: block; color: var(--text-dark); }

.mt-h-editable, .mt-h-medido {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 4px; font-size: 1rem;
}
.mt-h-editable::before, .mt-h-medido::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.mt-h-editable::before { background: var(--accion); }
.mt-h-medido::before   { background: var(--text-muted); }

/* Los medidos: ni caja, ni borde, ni nada que invite a escribir. */
.mt-lista-medida { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.mt-lista-medida li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; align-items: baseline;
  padding: 13px 2px; border-bottom: 1px solid var(--divider);
}
.mt-lista-medida li:last-child { border-bottom: 0; }
.mt-md-titulo { font-size: .9rem; font-weight: 600; color: var(--text-dark); }
.mt-md-valor  { font-size: 1.05rem; font-weight: 700; color: var(--text-dark);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-md-valor.vacio { color: var(--text-muted); font-weight: 500; font-size: .92rem; }
.mt-lista-medida small { grid-column: 1 / -1; font-size: .77rem; color: var(--text-muted);
                         line-height: 1.5; max-width: 72ch; }

/* Subtotal de la cuenta: la linea donde los minutos pasan a horas. */
.mt-cuenta li.mt-subtotal {
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  background: var(--dash-bg); padding-left: 10px; padding-right: 10px;
  border-radius: 8px; margin: 4px 0;
}
.mt-cuenta li.mt-subtotal strong { color: var(--text-dark); }

.mt-sin-rescate {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--divider);
  font-size: .8rem; color: var(--text-muted); line-height: 1.55; max-width: 76ch;
}
.mt-sin-rescate strong { color: var(--text-dark); }

/* Un mes sin medir no es un mes malo: se dibuja rayado, no en color. */
.mt-col.sin-medir .mt-b1 { fill: var(--text-muted); opacity: .28; }
.mt-tip-aviso { display: block; font-size: .74rem; color: var(--aviso); }

.mt-t-valor small { font-size: .55em; font-weight: 600; color: var(--text-muted); }

/* Portada de metricas cuando el tiempo no cubre el coste.
   Ni verde ni rojo: la respuesta no es un veredicto, es una pregunta
   con la vara puesta. El rojo diria "pierdes dinero", que es una
   conclusion que los datos no sostienen. */
.mt-veredicto.umbral { border-left-color: var(--accion); }
.mt-veredicto.umbral .mt-cifra { color: var(--text-dark); }
.mt-veredicto.mal    .mt-cifra { color: var(--text-dark); }
.mt-pregunta {
  margin: 10px 0 0; padding: 11px 14px; border-radius: 12px;
  background: var(--dash-bg); font-size: .95rem; line-height: 1.55;
  max-width: 68ch; color: var(--text-dark);
}
.mt-pregunta strong { font-weight: 700; }

/* ---------------------------------------------------------------- plantillas (0024) */
.pl-cabecera-vista { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pl-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 4px 6px; }
.pl-filtros { display: flex; gap: 6px; }
.pl-filtros button { border: 1px solid var(--vidrio-borde); background: var(--vidrio); color: var(--text-muted); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pl-filtros button b { font-weight: 700; color: var(--text-dark); margin-left: 4px; }
.pl-filtros button.activo { background: var(--marca-clara); color: var(--marca-oscura); border-color: transparent; }
.pl-filtros button.activo b { color: inherit; }
.pl-sync { font-size: 13px; color: var(--text-muted); }
.pl-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; padding: 8px 4px 20px; }
/* Panel 297 · Mosaico: cada tarjeta mide lo que su plantilla (filas de 6 px; el hueco de abajo va en la propia tarjeta). */
.pl-rejilla.pl-mosaico { grid-auto-rows: 6px; row-gap: 0; align-items: start; }
.pl-rejilla.pl-mosaico > .pl-tarjeta { margin-bottom: 14px; }
.pl-rejilla > .pl-sin-resultados { grid-column: 1 / -1; grid-row: span 6; margin: 8px 4px; }
.pl-tarjeta[hidden] { display: none; }
.pl-buscar { flex: 1 1 220px; max-width: 360px; }
.pl-buscar .campo { width: 100%; }
.pl-tarjeta { border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.pl-tarjeta.pl-no { opacity: .78; }
.pl-tarjeta header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pl-tarjeta h3 { margin: 0; font-size: 15px; font-weight: 700; word-break: break-all; }
.pl-tarjeta header p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); }
.pl-tarjeta footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.pl-motivo { margin: 0; font-size: 12px; color: var(--peligro); }
.pl-burbuja { background: #E7F8DC; color: #1a2a20; border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 14px; line-height: 1.45;
  display: grid; gap: 6px; max-width: 420px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
html[data-theme="dark"] .pl-burbuja { background: #1f3a2c; color: #e6f0ea; }
.pl-cabecera { font-weight: 700; }
.pl-cuerpo { white-space: pre-wrap; }
.pl-pie { font-size: 12px; opacity: .7; }
.pl-botones { display: grid; gap: 4px; margin-top: 4px; }
.pl-botones span { display: block; text-align: center; background: rgba(255, 255, 255, .6); border-radius: 8px; padding: 6px; font-weight: 600; color: var(--accion-oscura); font-size: 13px; }
html[data-theme="dark"] .pl-botones span { background: rgba(255, 255, 255, .08); color: var(--accion); }
mark.pl-var { background: var(--aviso-claro); color: var(--aviso); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.pl-vacio { border-radius: var(--r-lg); padding: 40px 28px; text-align: center; max-width: 620px; margin: 20px auto; }
.pl-vacio h2 { margin: 0 0 8px; font-size: 20px; }
.pl-vacio p { margin: 0; color: var(--text-muted); }
.pl-nota { margin: 6px 4px 30px; }
/* el cajón de envío */
.pl-envio { display: grid; gap: 14px; }
.pl-destino { display: flex; align-items: baseline; gap: 10px; background: var(--dash-bg); border-radius: 12px; padding: 10px 14px; }
.pl-destino span { font-size: 13px; color: var(--text-muted); }
.pl-destino small { color: var(--text-muted); margin-left: auto; }
.pl-resultados { display: grid; gap: 4px; margin-top: 6px; }
.pl-resultados button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--vidrio-borde);
  background: var(--vidrio-fuerte); border-radius: 10px; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--text-dark); }
.pl-resultados button:hover { background: var(--card-bg); }
.pl-resultados button[disabled] { opacity: .5; cursor: not-allowed; }
.pl-resultados small { color: var(--text-muted); }
.pl-resultados p { margin: 0; font-size: 13px; color: var(--text-muted); padding: 6px 2px; }
.pl-variables { display: grid; gap: 10px; background: var(--dash-bg); border-radius: 12px; padding: 12px 14px; }
.pl-variables-titulo { margin: 0; font-size: 13px; font-weight: 700; }
.pl-variables-titulo small { display: block; font-weight: 400; color: var(--text-muted); }
.pl-previa-titulo { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pl-previa { max-width: none; }
/* Ajustes → avisos */
.av-tabla td { vertical-align: top; }
.av-tabla select.campo { min-width: 200px; }

/* ---------------------------------------------------------------- controles de envío (0025) */
/* El botón de emergencia. Verde tranquilo cuando todo sale; rojo sin
   estridencias cuando está parado, que parado es lo que se pidió. */
.pl-control { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-radius: var(--r-lg); padding: 14px 18px; margin: 14px 4px 4px; border-left: 4px solid var(--marca); }
.pl-control-texto { display: flex; align-items: center; gap: 14px; }
.pl-control strong { font-size: 15px; }
.pl-control p { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); max-width: 70ch; }
.pl-luz { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--marca) 22%, transparent); }
.pl-control-off { border-left-color: var(--peligro); }
.pl-control-off .pl-luz { background: var(--peligro); box-shadow: 0 0 0 4px var(--peligro-claro); animation: pl-late 1.6s ease-in-out infinite; }
@keyframes pl-late { 50% { box-shadow: 0 0 0 8px transparent; } }
.pl-estados { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pl-tarjeta-acciones { display: flex; align-items: center; gap: 10px; }
.pl-interruptor { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.pl-interruptor input { -webkit-appearance: none; appearance: none; flex: none; min-width: 34px; width: 34px; height: 20px; border-radius: 999px; background: var(--vidrio-borde); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.pl-interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.pl-interruptor input:checked { background: var(--marca); }
.pl-interruptor input:checked::after { left: 16px; }
.pl-interruptor input:disabled { opacity: .5; cursor: not-allowed; }
/* Panel 501 · José (3/11): en el móvil, con un texto de varias líneas, el interruptor se encogía (flex) hasta quedar
   aplastado. Tamaño fijo, arriba con la primera línea, y toda la etiqueta se pulsa (zona cómoda con el dedo). */
.pl-interruptor > span { flex: 1 1 auto; min-width: 0; line-height: 1.35; padding-top: 1px; }
@media (max-width: 720px) { .pl-interruptor { padding: 6px 0; } }
/* salud */
.pl-salud { display: grid; gap: 10px; padding: 10px 4px 0; }
.pl-salud-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 10px; }
.pl-cifra { border-radius: 14px; padding: 10px 12px; display: grid; gap: 1px; }
.pl-cifra b { font-size: 22px; font-weight: 700; line-height: 1.1; }
.pl-cifra span { font-size: 12px; font-weight: 600; }
.pl-cifra small { font-size: 11px; color: var(--text-muted); min-height: 13px; }
.pl-alertas { display: grid; gap: 6px; }
.pl-alerta { border-radius: 12px; padding: 9px 14px; font-size: 13px; border-left: 4px solid var(--aviso); background: var(--aviso-claro); color: var(--text-dark); }
.pl-alerta-alto { border-left-color: var(--peligro); background: var(--peligro-claro); }
.pl-alerta-bajo { border-left-color: var(--vidrio-borde); background: var(--dash-bg); color: var(--text-muted); }
.pl-metricas { border-radius: 14px; padding: 8px 14px; }
.pl-metricas summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 4px 0; }
.pl-metricas table { margin-top: 8px; font-size: 13px; width: 100%; }
/* Ajustes → familias */
.av-familias-lista { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.av-familia { border: 1px solid var(--vidrio-borde); background: var(--vidrio); border-radius: 999px; padding: 6px 12px 6px 8px; color: var(--text-dark); }
.av-familia.apagada { color: var(--text-muted); }
.av-regla-apagada { opacity: .55; }
/* chat: contacto */
.msg-contacto-chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--dash-bg); color: var(--text-muted); }
.msg-sin-ficha { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.msg-contacto-baja, .msg-contacto-suprimido { background: var(--peligro-claro); color: var(--peligro); }
.msg-contacto-inalcanzable, .msg-contacto-numero_invalido { background: var(--aviso-claro); color: var(--aviso); }
.msg-contacto-pausa { background: var(--aviso-claro); color: var(--aviso); }
.icono-btn.msg-contacto-marcado { color: var(--peligro); }
.ct-estado { border-radius: 12px; padding: 12px 14px; background: var(--dash-bg); margin-bottom: 12px; }
.ct-estado p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.ct-baja, .ct-suprimido { background: var(--peligro-claro); }
.ct-inalcanzable, .ct-numero_invalido { background: var(--aviso-claro); }
.ct-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.cajon hr { border: 0; border-top: 1px solid var(--vidrio-borde); margin: 14px 0; }
@media (max-width: 640px) {
  .pl-control { flex-direction: column; align-items: stretch; }
  .pl-control .btn { width: 100%; }
}

/* ---------------------------------------------------------------- servicios y menores (0026) */
.sv-tarjeta { border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.sv-tarjeta.sv-inactivo { opacity: .72; }
.sv-tarjeta header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sv-tarjeta h3 { margin: 0; font-size: 15px; font-weight: 700; }
.sv-tarjeta h3 small { font-weight: 500; color: var(--text-muted); }
.sv-tarjeta header p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); }
.sv-desc { margin: 0; font-size: 13px; color: var(--text-dark); }
.sv-cond { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.sv-cond span { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--aviso-claro); color: var(--aviso); }
.sv-pros { display: flex; flex-wrap: wrap; gap: 6px 12px; background: var(--dash-bg); border-radius: 12px; padding: 8px 12px; }
.sv-pro.apagada span { color: var(--text-muted); text-decoration: line-through; }
/* 173 · áreas al lado del nombre y las no activas recogidas */
.sv-pro { flex-wrap: wrap; row-gap: 2px; }
.sv-areas { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 2px; }
.sv-areas i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1; padding: 3px 7px; border-radius: 999px;
              background: color-mix(in oklab, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.sv-areas i.sv-area-sexo { background: color-mix(in oklab, var(--marca) 18%, transparent); color: var(--marca); }
html[data-theme="dark"] .sv-areas i.sv-area-sexo { color: color-mix(in oklab, var(--marca) 70%, #fff); }
.sv-inactivas { flex-basis: 100%; }
.sv-inactivas summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); list-style: none; padding: 2px 0; }
.sv-inactivas summary::-webkit-details-marker { display: none; }
.sv-inactivas summary:hover { color: var(--text-dark); }
.sv-inactivas > div { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 6px; }
.sv-tarjeta footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.sv-mods { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sv-edad summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.sv-edad summary small { font-weight: 400; color: var(--text-muted); }
.btn-mini { padding: 4px 10px; font-size: 12px; }
/* ficha: menores */
.mn-banda { border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: grid; gap: 4px; font-size: 13px; }
.mn-banda strong { font-size: 13px; letter-spacing: .04em; }
.mn-menor { background: var(--peligro-claro); color: var(--peligro); border-left: 4px solid var(--peligro); }
.mn-menor span { color: var(--text-dark); }
.mn-aviso { background: var(--aviso-claro); color: var(--aviso); border-left: 4px solid var(--aviso); }
.mn-aviso span { color: var(--text-dark); }
.mn-bloqueado { color: var(--peligro); font-weight: 600; }
/* 0144 · Sin móvil no es estar bloqueada: solo no le llegan los WhatsApp. Aviso, no alarma. */
.mn-sin-wa { color: var(--aviso); font-weight: 600; }
.mn-dob { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; }
.mn-dob .campo { width: auto; }
.mn-tutores { margin: 10px 0; }
.mn-tutores h3 { margin: 0 0 6px; font-size: 13px; }
.mn-lista { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.mn-lista li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--dash-bg); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.mn-lista li small { color: var(--text-muted); }
.mn-acc { margin-left: auto; display: flex; gap: 6px; }
.mn-nuevo { background: var(--dash-bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }

/* ---------------------------------------------------------------- almacenamiento (panel 68) */
.alm { padding: 20px 2px 40px; max-width: 1320px; display: grid; gap: 18px; }
/* Ajustes · aviso de color propio en «Mi cuenta» */
.marca-propio { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: var(--aviso-claro); color: var(--aviso); }
.marca-propio .btn-enlace { display: block; margin-top: 4px; }

/* 0061 · Conservación de las conversaciones */
.alm-conservacion { padding: 18px 20px; }
.alm-conservacion h2 { font-size: 15px; margin: 0 0 6px; padding: 0; }
.alm-conservacion p { margin: 0 0 6px; line-height: 1.9; }
.alm-conservacion small { color: var(--text-muted); display: block; line-height: 1.5; }
.alm-plazo { display: inline-block; width: auto; height: 32px; padding: 0 28px 0 10px; margin: 0 4px; vertical-align: baseline; }

/* 0061 · Suprimir paciente (final de la ficha) */
.pa-suprimir { margin-top: 22px; padding-top: 16px; border-top: 1px dashed color-mix(in oklab, var(--peligro) 35%, transparent); }
.pa-suprimir-caja { border: 1px solid color-mix(in oklab, var(--peligro) 45%, transparent); background: var(--peligro-claro);
  border-radius: 12px; padding: 14px 16px; }
.pa-suprimir-caja h3 { margin: 0 0 6px; font-size: 15px; color: var(--peligro); }
.pa-suprimir-caja p, .pa-suprimir-caja li { font-size: 13px; line-height: 1.5; }
.pa-suprimir-caja ul { margin: 6px 0 8px; padding-left: 18px; }
.pa-suprimir-caja li { margin-bottom: 4px; }
.pa-suprimir-nota { color: var(--text-muted); }
.pa-suprimir-caja .form-fila span { font-size: 13px; }
.pa-suprimir-caja .ct-acciones { margin-top: 8px; }

.alm-resumen { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 22px; align-items: center; padding: 20px; }
.alm-grande { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.alm-de { color: var(--text-muted); }
.alm-barra { height: 10px; border-radius: 999px; background: var(--dash-bg); overflow: hidden; margin: 10px 0 8px; }
.alm-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
.alm-uso small { color: var(--text-muted); font-size: 12.5px; line-height: 1.45; display: block; }
.alm-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.alm-tipo { display: grid; gap: 2px; justify-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--vidrio-borde);
  background: var(--vidrio-fuerte); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.alm-tipo:hover { border-color: var(--marca); }
.alm-tipo-ico { font-size: 20px; }
.alm-tipo strong { font-size: 17px; }
.alm-tipo span:last-child { color: var(--text-muted); font-size: 12.5px; }
.alm-filtros { padding: 16px 16px 0; }
.alm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.chip-filtro { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--vidrio-borde); background: var(--vidrio-fuerte);
  font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; }
.chip-filtro.activo { background: var(--marca-clara); border-color: var(--marca); color: var(--marca-oscura); font-weight: 600; }
.alm-accion { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 16px 12px; padding: 10px 14px;
  border-radius: 12px; background: var(--peligro-claro); }
.alm-accion span { margin-right: auto; }
.alm-tabla td { vertical-align: middle; }
.alm-tabla tr.sel td { background: color-mix(in oklab, var(--marca) 7%, transparent); }
.alm-mini { width: 44px; height: 44px; border-radius: 10px; background: var(--dash-bg); display: grid; place-items: center;
  font-size: 20px; overflow: hidden; }
.alm-mini img { width: 100%; height: 100%; object-fit: cover; }
.alm-nombre { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.alm-mas { display: flex; justify-content: center; padding: 14px; }

/* El selector de archivo con el aspecto del panel, no el gris del navegador. */
input[type="file"] { max-width: 100%; font: inherit; font-size: 14px; color: var(--text-muted); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--text-dark); cursor: pointer;
  border: 1px solid var(--vidrio-borde); border-radius: 999px; background: var(--vidrio-fuerte);
  padding: 8px 16px; margin-right: 10px;
}
input[type="file"]::file-selector-button:hover { border-color: var(--marca); }
@media (max-width: 860px) {
  .alm-resumen { grid-template-columns: 1fr; }
  .alm-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alm-nombre { max-width: 150px; }
}

/* En el chat, un archivo borrado para liberar espacio. */
.archivo-borrado { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in oklab, var(--text-muted) 10%, transparent); color: var(--text-muted); font-size: 13.5px; font-style: italic; }

/* ---------------------------------------------------------------------
   Métricas · La consulta (0034)
   ------------------------------------------------------------------ */
.mt-pestanas { display: inline-flex; gap: 2px; margin-top: 8px; padding: 3px;
               border-radius: 12px; background: var(--dash-bg); }
.mt-pestana {
  border: 0; background: transparent; font: inherit; font-size: .88rem; cursor: pointer;
  padding: 6px 14px; border-radius: 9px; color: var(--text-muted);
}
.mt-pestana:hover  { color: var(--text-dark); }
.mt-pestana.activo { background: var(--surface, #fff); color: var(--text-dark); font-weight: 600;
                     box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.mt-pestana:focus-visible { outline: none; box-shadow: var(--focus); }

.mt-filas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.mt-filas li {
  display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 2fr) auto;
  align-items: center; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--divider);
}
.mt-filas li:last-child { border-bottom: 0; }
.mt-f-nombre { font-size: .92rem; color: var(--text-dark); min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-f-nombre small { color: var(--text-muted); }
.mt-filas strong { font-size: 1.02rem; font-weight: 700; color: var(--text-dark);
                   font-variant-numeric: tabular-nums; text-align: right; min-width: 3.5em; }
.mt-filas small  { grid-column: 1 / -1; font-size: .78rem; color: var(--text-muted); }
.mt-barra { display: block; height: 8px; border-radius: 4px; background: var(--dash-bg); overflow: hidden; }
.mt-barra i { display: block; height: 100%; border-radius: 4px; background: var(--serie-1); }

.mt-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }

.mt-calor-wrap { overflow-x: auto; }
.mt-calor table { border-collapse: separate; border-spacing: 2px; margin: 0 auto; }
.mt-calor th { font-size: .74rem; font-weight: 600; color: var(--text-muted); padding: 2px 6px; }
.mt-calor th[scope="row"] { text-align: right; font-variant-numeric: tabular-nums; }
.mt-calor td {
  width: 64px; height: 28px; border-radius: 6px; text-align: center;
  font-size: .74rem; font-variant-numeric: tabular-nums;
}
.mt-calor-celda {
  background: color-mix(in oklab, var(--serie-1) var(--v), transparent);
  color: var(--text-dark); cursor: default;
}
.mt-calor-celda:focus-visible { outline: none; box-shadow: var(--focus); }
.mt-calor-nada { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--dash-bg) 5px 7px); }
.mt-escala { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
             margin-top: 10px; font-size: .74rem; color: var(--text-muted); }
.mt-escala i { width: 120px; height: 8px; border-radius: 4px;
               background: linear-gradient(90deg, color-mix(in oklab, var(--serie-1) 6%, transparent),
                                                   color-mix(in oklab, var(--serie-1) 70%, transparent)); }

.mt-b1.mt-futuro, .mt-sw.mt-futuro { opacity: .35; }
.mt-col:focus-visible { outline: none; }
.mt-col:focus-visible .mt-hit { fill: var(--dash-bg); }

@media (max-width: 720px) {
  .mt-filas li { grid-template-columns: minmax(0, 1fr) auto; }
  .mt-filas li .mt-barra { grid-column: 1 / -1; grid-row: 2; }
  .mt-calor td { width: 44px; height: 26px; }
  .mt-pestanas { display: flex; }
  .mt-pestana { flex: 1; }
}

/* ---------------------------------------------------------------------
   Pacientes · Seguimiento por profesional (0037)
   ------------------------------------------------------------------ */
.pa-modos { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px;
            border-radius: 12px; background: var(--dash-bg); }
.pa-modo {
  border: 0; background: transparent; font: inherit; font-size: .9rem; cursor: pointer;
  padding: 7px 14px; border-radius: 9px; color: var(--text-muted);
}
.pa-modo:hover  { color: var(--text-dark); }
.pa-modo.activo { background: var(--surface, #fff); color: var(--text-dark); font-weight: 600;
                  box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.pa-modo:focus-visible, .seg-estado:focus-visible { outline: none; box-shadow: var(--focus); }
.seg-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-estado {
  border: 1px solid var(--divider); background: var(--vidrio); font: inherit; font-size: .84rem;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--text-dark);
}
.seg-estado b { font-weight: 700; margin-left: 4px; color: var(--text-muted); }
.seg-estado.activo { background: var(--marca-clara); border-color: color-mix(in oklab, var(--marca) 35%, transparent); }
.seg-estado.activo b { color: var(--marca-oscura); }
.seg-nota { margin: -4px 0 12px; font-size: .8rem; }
.seg-hace  { color: var(--text-muted); }
.seg-falta { color: var(--peligro); }
[data-vista-seguimiento] .cargando-linea { color: var(--text-muted); }
@media (max-width: 720px) {
  .pa-modos { display: flex; }
  .pa-modo { flex: 1; font-size: .84rem; padding: 8px 6px; }
}
.btn-enlace {
  border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-size: .88em; font-weight: 600;
  color: var(--accion); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.btn-enlace:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

/* --surface no estaba definido: los botones activos de las pestañas caían
   al #fff de reserva también en oscuro, con texto claro encima. */
:root { --surface: #ffffff; }
html[data-theme="dark"] { --surface: #1d3337; }

/* ---------------------------------------------------------------------
   Horarios (0038)
   ------------------------------------------------------------------ */
#horarios-root { padding: 2px 2px 32px; max-width: 1320px; display: grid; gap: 16px; }
.hz-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.hz-cab .campo { min-width: 240px; }
.hz-aviso { padding: 12px 16px; border-radius: var(--r-md); border-left: 3px solid var(--aviso); font-size: .92rem; }
.hz-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.hz-semana, .hz-habitual { grid-column: 1 / -1; }
.hz-bloque { padding: 16px 18px; border-radius: var(--r-lg); display: grid; gap: 10px; }
.hz-bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hz-bloque-cab h2 { margin: 0; font-size: 1.02rem; }
.hz-nav { display: flex; gap: 6px; align-items: center; }
.hz-nota { margin: 0; font-size: .82rem; color: var(--text-muted); }
.hz-nota-dia { margin: 0 0 8px; color: var(--text); }
/* Panel 151 · el error de guardar se queda a la vista, con el campo marcado. */
.hz-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: .88rem; line-height: 1.4;
  color: var(--peligro); background: color-mix(in oklab, var(--peligro) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--peligro) 30%, transparent); }
.hz-bloque .campo.invalido { border-color: var(--peligro); box-shadow: 0 0 0 3px color-mix(in oklab, var(--peligro) 18%, transparent); }
.hz-nada { color: var(--text-muted); font-size: .88rem; }

.hz-dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.hz-dia { padding: 12px; border-radius: var(--r-md); background: var(--dash-bg); display: grid; gap: 8px; align-content: start; }
.hz-dia.cambiado { box-shadow: inset 3px 0 0 var(--aviso); }
.hz-dia.pasado { opacity: .55; }
.hz-dia-cab { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hz-dia-cab .chip { height: 20px; font-size: 11px; padding: 0 8px; }
.hz-franjas { display: flex; flex-wrap: wrap; gap: 6px; }
.hz-franja { font-size: .84rem; padding: 3px 9px; border-radius: 999px; background: var(--marca-clara); color: var(--marca-oscura);
             font-variant-numeric: tabular-nums; }
.hz-franja.online { background: color-mix(in oklab, var(--ag-morado) 14%, transparent); color: var(--ag-morado-texto); }
/* Panel 385 · Antes «.bloqueo», que es la pantalla del PIN (bloqueo.css: fija y a pantalla completa): el aviso de un
   bloqueo de media hora tapaba toda la pantalla, invisible, y no dejaba pulsar nada (Amparo, 22/10). */
.hz-franja.hz-franja-bloqueo { background: color-mix(in oklab, var(--aviso) 16%, transparent); color: var(--text); }
.hz-dia.bloqueado { box-shadow: inset 3px 0 0 var(--aviso); }
.hz-bloqueado { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-muted); }
.hz-bloqueado .chip { height: 22px; font-size: 12px; }
.hz-dia .btn-enlace { justify-self: start; padding-left: 0; }

.hz-editor { display: grid; gap: 6px; }
.hz-editor > .btn-enlace { justify-self: start; padding-left: 0; }
.hz-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hz-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hz-habitual .hz-editor { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); align-items: center; }
.hz-habitual .hz-filas { display: contents; }
.hz-fila input[type="time"] { width: 104px; }
.hz-online { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; color: var(--text-dark); }
.hz-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

.hz-habitual-dias { display: grid; gap: 2px; }
.hz-habitual-dia { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.hz-habitual-dia:last-child { border-bottom: 0; }
.hz-habitual-nombre { display: grid; gap: 2px; align-content: start; padding-top: 8px; }
.hz-habitual-nombre small { color: var(--text-muted); font-size: .76rem; }

.hz-lista-bloqueos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hz-lista-bloqueos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--divider); font-size: .9rem; }
.hz-lista-bloqueos li:last-child { border-bottom: 0; }
.hz-lista-bloqueos small { color: var(--text-muted); }
.hz-nuevo-bloqueo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px 10px; align-items: end;
                    padding-top: 10px; border-top: 1px solid var(--divider); }
.hz-nuevo-bloqueo label { display: grid; gap: 4px; font-size: .8rem; color: var(--text-muted); }
.hz-nuevo-bloqueo .hz-online { display: inline-flex; align-self: center; }
.hz-nuevo-bloqueo .hz-ancho { grid-column: 1 / -1; }

.hz-marco-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hz-marco-dias li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hz-marco-dias strong { width: 90px; }
.hz-marco-dias input[type="time"] { width: 104px; }

/* Quitar una franja: un botón que se vea como botón, no una × suelta. */
.hz-fila [data-quitar] {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--dash-bg); color: var(--text-muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.hz-fila [data-quitar]:hover { color: var(--peligro); background: var(--peligro-claro); }

@media (max-width: 720px) {
  .hz-rejilla { grid-template-columns: minmax(0, 1fr); }
  .hz-habitual-dia { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hz-habitual-nombre { padding-top: 0; }
  .hz-cab .campo { min-width: 0; width: 100%; }
  .hz-bloque { padding: 14px; }

  /* Una franja por fila: desde – hasta y quitar arriba, «solo online»
     debajo. Con 104 px fijos y letra de 16 la hora salía «02:0C». */
  .hz-habitual .hz-editor { grid-template-columns: minmax(0, 1fr); }
  .hz-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 44px;
    align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 14px; background: var(--dash-bg);
  }
  .hz-fila input[type="time"] { width: 100%; padding: 0 10px; }
  .hz-fila .hz-online { grid-column: 1 / -1; grid-row: 2; min-height: 30px; }
  .hz-fila [data-quitar] { grid-column: 4; grid-row: 1; width: 44px; height: 44px; background: var(--card-bg); }
  .hz-acciones .btn { flex: 1 1 100%; }

  /* Los días de la semana, más juntos: siete tarjetas altas eran dos
     pantallas de desplazamiento antes de llegar a los bloqueos. */
  .hz-dias { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hz-dia { padding: 10px 12px; gap: 6px; }

  .hz-nuevo-bloqueo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hz-nuevo-bloqueo input[type="date"], .hz-nuevo-bloqueo input[type="time"] { width: 100%; padding: 0 10px; }
  .hz-nuevo-bloqueo > .btn { grid-column: 1 / -1; }

  /* Horario de la consulta: el día y «abierta» arriba, las horas debajo. */
  .hz-marco-dias li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 8px;
    padding: 8px 0; border-bottom: 1px solid var(--divider);
  }
  .hz-marco-dias li:last-child { border-bottom: 0; }
  .hz-marco-dias strong { width: auto; grid-column: 1 / 3; }
  .hz-marco-dias .hz-online { justify-self: end; }
  .hz-marco-dias input[type="time"] { width: 100%; padding: 0 10px; }
}

/* Panel 144 · bajo el campo del nombre de un paciente */
.aviso-nombre { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
.mn-dob[data-renombrar-caja], .mn-dob[data-derivar-caja] { flex-wrap: wrap; }
/* 0083 · Derivar: la lista y el motivo, en línea; en pantallas estrechas, uno debajo de otro. */
.mn-dob[data-derivar-caja] { margin-left: 0; margin-top: 6px; }
.mn-dob[data-derivar-caja] [data-derivar-pro] { flex: 1 1 160px; min-width: 0; }
.mn-dob[data-derivar-caja] [data-derivar-motivo] { flex: 1 1 180px; min-width: 0; }
.mn-dob .aviso-nombre { flex-basis: 100%; margin-top: 0; }
.hz-dia .hz-solo-dia { font-size: .8rem; }

/* Panel 161 · Horarios: «Todo el equipo», una tarjeta por profesional */
.hz-cab-der { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hz-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; align-items: start; }
.hz-tarjeta { all: unset; box-sizing: border-box; display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--vidrio-borde); transition: transform .15s ease, box-shadow .15s ease; text-align: left; color: var(--text-dark); }
.hz-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-flota); }
.hz-tarjeta:focus-visible { box-shadow: var(--focus); }
.hz-tarjeta.sin { border: 1px dashed color-mix(in oklab, var(--aviso) 55%, transparent); }
.hz-t-cab { display: flex; gap: 10px; align-items: center; min-width: 0; }
.hz-t-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 600 14px/1 var(--font-ui); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--c); }
.hz-t-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.hz-t-nombre { display: grid; min-width: 0; }
.hz-t-nombre strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-t-nombre small { font-size: 12.5px; color: var(--text-muted); }
.hz-tarjeta.sin .hz-t-nombre small { color: var(--aviso); font-weight: 600; }
.hz-t-semana { display: grid; gap: 5px; }
.hz-t-dia { display: grid; grid-template-columns: 30px minmax(60px, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.hz-t-letra { color: var(--text-muted); font-weight: 600; }
.hz-t-dia.hoy .hz-t-letra { color: var(--c); }
.hz-t-barra { position: relative; height: 8px; border-radius: 4px; background: var(--dash-bg); overflow: hidden; }
.hz-t-barra i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.hz-t-barra i.online { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in oklab, var(--c) 35%, transparent) 3px 6px); }
.hz-t-horas { font-variant-numeric: tabular-nums; color: var(--text-dark); display: grid; justify-items: end; line-height: 1.35; }
.hz-t-horas span { white-space: nowrap; }
.hz-t-horas em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.hz-t-dia.libre .hz-t-horas { color: var(--text-muted); }
.hz-t-vacia { font-size: 13px; color: var(--text-muted); }
.hz-leyenda { margin-top: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hz-leyenda i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: var(--marca); margin-left: 6px; }
.hz-leyenda i.hz-ley-online { background: repeating-linear-gradient(135deg, var(--marca) 0 3px, color-mix(in oklab, var(--marca) 35%, transparent) 3px 6px); }
:root[data-theme="dark"] .hz-tarjeta { color: #e8f0f0; }
:root[data-theme="dark"] .hz-t-horas { color: #e8f0f0; }
@media (max-width: 860px) {
  .hz-equipo { grid-template-columns: minmax(0, 1fr); }
  .hz-cab-der { width: 100%; justify-content: stretch; }
  .hz-cab-der .hz-modo { width: 100%; }
  .hz-cab-der .hz-modo button { flex: 1; }
}

/* Panel 162 · Deshacer y el WhatsApp antes de que salga */
.toast.toast-accion { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; }
.toast-accion button { border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #10262a; }
.av-previa { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--dash-bg); font-size: 13.5px; }
.av-previa.no-sale { background: var(--aviso-claro); }
.av-previa.no-sale span { color: var(--text-muted); }
.av-burbuja { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; line-height: 1.45;
  background: #dcf8c6; color: #10262a; white-space: normal; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.av-burbuja small { display: block; color: #4b6b5a; font-size: 11.5px; margin-bottom: 2px; }
.av-previa-no { margin: 0; color: var(--aviso); font-size: 13px; }
.av-previa-cargando { margin: 0; color: var(--text-muted); font-size: 13px; }
.av-no-avisar { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }

/* Panel 162 · Citas que se repiten */
.nc-repetir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-serie-resultado { padding: 12px; border-radius: 14px; background: var(--aviso-claro); font-size: 13.5px; display: grid; gap: 6px; }
.nc-serie-resultado ul { margin: 0; padding-left: 18px; }

/* Panel 162 · Buscador rápido */
#btn-buscar kbd { font: 600 10.5px/1 var(--font-ui); padding: 2px 5px; border-radius: 5px; border: 1px solid var(--divider); margin-left: 4px; }
.bq-fondo { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px;
  background: rgba(8, 20, 22, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bq-caja { width: min(620px, 100%); max-height: 75vh; display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden;
  background: var(--card-bg); box-shadow: var(--sombra-flota); border: 1px solid var(--vidrio-borde); }
:root[data-theme="dark"] .bq-caja { background: #142226; color: #e8f0f0; }
.bq-campo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.bq-campo > span { display: grid; color: var(--text-muted); }
.bq-campo > span svg { width: 20px; height: 20px; }
.bq-campo input { flex: 1; border: 0; background: transparent; font: 500 17px/1.3 var(--font-ui); color: inherit; outline: none; min-width: 0; }
.bq-campo kbd { font: 600 11px/1 var(--font-ui); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--divider); color: var(--text-muted); }
.bq-lista { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.bq-lista li[data-r] { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.bq-lista li[aria-selected="true"] { background: var(--accion-clara); }
:root[data-theme="dark"] .bq-lista li[aria-selected="true"] { background: rgba(37, 99, 235, .2); }
.bq-sec { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.bq-vacio { padding: 14px 10px; color: var(--text-muted); font-size: 14px; }
.bq-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--dash-bg); color: var(--text-muted); }
.bq-ico svg { width: 18px; height: 18px; }
.bq-lista li[aria-selected="true"] .bq-ico { background: rgba(255, 255, 255, .7); color: var(--accion-oscura); }
:root[data-theme="dark"] .bq-lista li[aria-selected="true"] .bq-ico { background: rgba(255, 255, 255, .08); color: #b9cdfa; }
#btn-buscar, .mas-buscar { display: inline-flex; align-items: center; gap: 6px; }
#btn-buscar svg { width: 14px; height: 14px; }
.mas-buscar svg { width: 18px; height: 18px; flex: none; }
.bq-txt { display: grid; min-width: 0; flex: 1; }
.bq-txt small { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-acc { display: flex; gap: 6px; }
.bq-acc button { border: 1px solid var(--divider); background: transparent; color: inherit; border-radius: 999px; padding: 4px 10px; font: 600 12.5px/1.2 var(--font-ui); cursor: pointer; }
.bq-acc button:hover { background: var(--dash-bg); }
.mas-buscar { width: calc(100% - 8px); margin: 4px 4px 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--divider);
  background: var(--dash-bg); color: var(--text-muted); font: 500 15px/1 var(--font-ui); text-align: left; cursor: pointer; }
@media (max-width: 860px) { .bq-fondo { padding-top: 8px; } .bq-caja { max-height: calc(var(--alto-app, 100vh) - 16px); } }

/* Panel 163 · Seguimiento: todo el equipo, en tarjetas (como Horarios). */
.sg-barra-sup { align-items: center; }
.seg-vista { flex: none; }
.sg-total { font-size: 13.5px; color: var(--text-muted); margin-right: 4px; align-self: center; }
.sg-total b { color: var(--text-dark); font-size: 15px; }
.sg-tarjeta.vacia { opacity: .7; }
.sg-tarjeta .hz-t-cab { width: 100%; }
.sg-n { margin-left: auto; font-size: 26px; font-weight: 700; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.sg-barra { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--dash-bg); }
.sg-barra i { display: block; min-width: 4px; }
.sg-estados { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.sg-estado { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 6px;
             border-radius: 8px; cursor: pointer; color: var(--text-dark); }
.sg-estado:hover { background: var(--dash-bg); }
.sg-estado:focus-visible { box-shadow: var(--focus); }
.sg-estado i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sg-estado b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sg-estado.cero { color: var(--text-muted); cursor: default; }
.sg-estado.cero:hover { background: none; }
.sg-pie { font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--divider); padding-top: 8px; }
.sg-pie strong { color: var(--aviso); }
:root[data-theme="dark"] .sg-estado { color: #e8f0f0; }

/* Panel 163 · Consentimiento con DNI. */
.gc-ayuda { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.gc-error { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--peligro-claro); color: var(--peligro); }
[data-gc] .campo.invalido { border-color: var(--peligro); box-shadow: 0 0 0 3px color-mix(in oklab, var(--peligro) 18%, transparent); }
[data-gc] input::placeholder { text-transform: none; }
.bq-campo input:focus-visible { box-shadow: none; }

/* ---------------------------------------------------------------- Panel 169 · selector de color (js/selector-color.js) */
.sc-capa { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 20, 22, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sc-caja { width: min(360px, 100%); display: grid; gap: 14px; padding: 18px; border-radius: 24px;
  background: var(--vidrio-fuerte, #fff); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-flota, 0 30px 60px -28px rgba(0,0,0,.5));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
html:not([data-theme="dark"]) .sc-caja { background: rgba(255, 255, 255, .94); }
.sc-area { position: relative; height: 190px; border-radius: 14px; cursor: crosshair; touch-action: none; outline: none; }
.sc-area:focus-visible { box-shadow: var(--focus); }
.sc-blanco, .sc-negro { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sc-blanco { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.sc-negro { background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0)); }
.sc-punto, .sc-tirador { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .3); pointer-events: none; }
.sc-tono { position: relative; height: 16px; border-radius: 999px; cursor: pointer; touch-action: none; outline: none; margin: 4px 0;
  background: linear-gradient(90deg, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); }
.sc-tono:focus-visible { box-shadow: var(--focus); }
.sc-tirador { top: 50%; width: 24px; height: 24px; }
.sc-fila { display: flex; gap: 10px; align-items: center; }
.sc-muestra { width: 44px; height: 40px; border-radius: 12px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sc-hex { flex: 1; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .04em; }
.sc-sugeridos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sc-sug { aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .12s; }
.sc-sug:hover { transform: scale(1.08); }
.sc-sug[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card-bg, #fff), 0 0 0 4px var(--c); }
.sc-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 600px) {
  .sc-capa { place-items: end stretch; padding: 0; }
  .sc-caja { width: 100%; border-radius: 26px 26px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sc-area { height: 210px; }
  .sc-pie .btn { flex: 1; }
}
/* El cuadrado del input de color: la muestra del color, sin el marco del sistema. */
input[type="color"] { -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 8px; }

/* Panel 179 · El menú lateral en cuatro bloques. Solo escritorio y solo visual: el orden del
   HTML (y con él la barra de abajo del móvil) no cambia; aquí se reordena con `order`. */
.nav-grupo { display: none; }
@media (min-width: 861px) {
  .nav-grupo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
               color: var(--text-muted); padding: 0 12px; margin: 14px 0 2px; }
  .nav-grupo[hidden] { display: none; }
  .nav-items > li:first-child { order: -1; }
  .nav-grupo[data-grupo="dia"] { order: 0; margin-top: 2px; }
  .nav-grupo[data-grupo="consulta"] { order: 10; }
  .nav-grupo[data-grupo="gestion"] { order: 20; }
  .nav-grupo[data-grupo="ajustes"] { order: 30; }
  .nav-item[data-view="inicio"] { order: 1; }  .nav-item[data-view="agenda"] { order: 2; }  .nav-item[data-view="disponibilidad"] { order: 2; }
  .nav-item[data-view="conversaciones"] { order: 3; }  .nav-item[data-view="pacientes"] { order: 4; }
  .nav-item[data-view="documentos"] { order: 5; }
  .nav-item[data-view="horarios"] { order: 11; }  .nav-item[data-view="despachos"] { order: 12; }
  .nav-item[data-view="videollamadas"] { order: 13; }  .nav-item[data-view="equipo"] { order: 14; }
  .nav-item[data-view="metricas"] { order: 21; }  .nav-item[data-view="tpv"] { order: 22; }
  .nav-item[data-view="servicios"] { order: 23; }
  .nav-item[data-view="mejora"] { order: 31; }  .nav-item[data-view="almacenamiento"] { order: 32; }
  .nav-item[data-view="ajustes"] { order: 33; }
}

/* Panel 179 · Plantillas ya no es una entrada del menú: vive dentro de WhatsApp, como pestaña.
   El elemento sigue en la lista (la búsqueda y los permisos lo usan) pero no se pinta. */
.nav-oculto { display: none !important; }
.wa-pestanas { margin: 2px 0 0; }

/* Panel 243 · Ajustes → Banner de bienvenida en el móvil: el texto quedaba en una columna estrechísima con la foto
   encima (había dos copias de estas reglas metidas por error dentro de otras). Una columna, la foto debajo. */
@media (max-width: 860px) {
  .marca-banner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .marca-banner .banner-previa { width: 100%; max-width: 460px; justify-self: start; }
}

/* 0117 · Plantilla con un PDF en la cabecera */
.pl-cabecera-doc {
  font-weight: 600; font-size: .86rem; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px;
  background: color-mix(in oklab, var(--marca) 10%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Panel 249 · El aviso de versión nueva no se va solo. */
.toast.toast-fija { animation: none; opacity: 1; }
/* Panel 256 · En el móvil el aviso de versión nueva se metía encima de la barra de abajo y partía el texto en cuatro
   líneas. Ahora es una franja arriba, de lado a lado, con «Recargar» y «Luego». */
.toast-fija .toast-luego { background: transparent; color: rgba(255, 255, 255, .85); padding: 7px 10px; font-weight: 600; }
@media (max-width: 860px) {
  .toast.toast-fija { left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto; transform: none;
    width: auto; max-width: none; z-index: 950; border-radius: 16px; gap: 8px; padding: 8px 8px 8px 16px; font-size: 14px; }
  .toast.toast-fija span { flex: 1; min-width: 0; line-height: 1.3; }
  .toast.toast-fija button { flex: none; }
}

/* 0120 · Con dos interruptores y «Enviar», el pie de la tarjeta de plantilla cabe en el móvil: se parte en líneas. */
.pl-tarjeta footer { flex-wrap: wrap; min-width: 0; }
.pl-tarjeta footer > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pl-tarjeta-acciones { flex-wrap: wrap; row-gap: 6px; }


/* Panel 266 · Letra grande (Mi cuenta → Tamaño de letra, en este dispositivo). Todo el panel se agranda;
   el alto de la pantalla se divide por lo mismo para que siga cabiendo justo. */
html[data-letra="grande"] { --zl: 1.2; }
html[data-letra="muy-grande"] { --zl: 1.4; }
html[data-letra] body { zoom: var(--zl); }
html[data-letra] .shell { height: calc(100vh / var(--zl)); }
@supports (height: 100dvh) { html[data-letra] .shell { height: calc(100dvh / var(--zl)); } }
html[data-letra].alto-medido .shell { height: calc(var(--alto-app) / var(--zl)); }
.serie-dia { font-size: 1.15em; }

/* ---------------------------------------------------------------------
   Ajustes en pestañas y quién tiene las notificaciones (panel 284 · 0137)
   ------------------------------------------------------------------ */
.aj-barra { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 10px; }
.aj-barra .mt-pestanas { margin-top: 0; flex-wrap: wrap; }
.aj-buscar { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.aj-que-hay { margin: 8px 0 0; }
.aj-que-hay:empty { display: none; }
.ne-resumen { display: flex; align-items: center; gap: 18px; margin: 0 20px 6px; padding: 14px 18px; border-radius: 14px;
              background: color-mix(in oklab, var(--text-dark) 5%, transparent); }
.ne-cifra { display: flex; align-items: baseline; gap: 6px; flex: none; }
.ne-cifra strong { font-size: 30px; line-height: 1; }
.ne-cifra span { color: var(--text-muted); }
.ne-barra-caja { flex: 1; min-width: 0; }
.ne-barra-caja p { margin: 0 0 8px; }
.ne-barra { height: 8px; border-radius: 99px; background: color-mix(in oklab, var(--text-dark) 12%, transparent); overflow: hidden; }
.ne-barra i { display: block; height: 100%; border-radius: inherit; background: var(--accent, var(--primary, #0007DB)); }
.ne-titulo { margin: 16px 20px 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
.ne-lista { list-style: none; margin: 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ne-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av nom" "av est"; gap: 4px 12px;
           align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--divider);
           background: color-mix(in oklab, var(--text-dark) 3%, transparent); }
.ne-no { border-color: color-mix(in oklab, var(--danger, #d92d20) 45%, transparent);
         background: color-mix(in oklab, var(--danger, #d92d20) 8%, transparent); }
.ne-avatar { grid-area: av; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
             background: color-mix(in oklab, var(--text-dark) 12%, transparent); }
.ne-nombre { grid-area: nom; display: flex; flex-direction: column; min-width: 0; }
.ne-nombre strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ne-nombre small { color: var(--text-muted); font-size: 12.5px; }
.ne-estado { grid-area: est; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ne-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 12.5px;
           background: color-mix(in oklab, var(--text-dark) 9%, transparent); }
.ne-chip-no { background: color-mix(in oklab, var(--danger, #d92d20) 18%, transparent); color: var(--danger, #d92d20); font-weight: 600; }
.ne-fallo { font-size: 12px; color: var(--text-muted); }
.ne-como { margin: 14px 20px 20px; color: var(--text-muted); font-size: 13.5px; }
.ne-como summary { cursor: pointer; font-weight: 600; color: var(--text-dark); }
.ne-como p { margin: 8px 0 0; line-height: 1.5; }
@media (max-width: 640px) {
  .aj-barra .mt-pestanas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .aj-barra .mt-pestana { padding: 7px 6px; }
  .aj-buscar { max-width: none; flex-basis: 100%; }
  .ne-lista { grid-template-columns: minmax(0, 1fr); margin: 0 14px; }
  .ne-resumen { margin: 0 14px 6px; }
}

/* 0141 · «Pendiente de pago»: la fecha en que dijo que pagaba, ya pasada. */
.pd-dijo { color: var(--aviso, #d97706); font-weight: 600; }

/* Panel 293 · Caja del día: Pendientes · Morosidad · Pagados, como en Organízate (Silvia, 15/10). */
.cj-contadores { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.cj-contador { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde, rgba(127,127,127,.3)); background: var(--superficie, transparent); color: inherit; font: inherit; }
.cj-contador b { min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center; color: #fff; font-size: .9em; }
.cj-c-pendientes b { background: #2563eb; }
.cj-c-morosidad b { background: #dc2626; }
.cj-c-pagadas b { background: #16a34a; }
.cj-contador.activo { outline: 2px solid currentColor; outline-offset: 1px; font-weight: 600; }
.cj-contador:hover { filter: brightness(1.08); }
.chip.cj-e-pendientes { background: rgba(37,99,235,.14); color: #1d4ed8; }
.chip.cj-e-morosidad { background: rgba(220,38,38,.14); color: #b91c1c; }
.chip.cj-e-pagadas { background: rgba(22,163,74,.14); color: #15803d; }
@media (prefers-color-scheme: dark) { .chip.cj-e-pendientes { color: #93c5fd; } .chip.cj-e-morosidad { color: #fca5a5; } .chip.cj-e-pagadas { color: #86efac; } }
[data-theme="dark"] .chip.cj-e-pendientes { color: #93c5fd; } [data-theme="dark"] .chip.cj-e-morosidad { color: #fca5a5; } [data-theme="dark"] .chip.cj-e-pagadas { color: #86efac; }

/* Panel 300 · José Carlos (17/10): «un pop up arriba que salga del centro y luego se extienda hacia la derecha y la
   izquierda». Baja como un punto en el centro, se abre hacia los dos lados y después aparece el texto. */
.aviso-version {
  position: fixed; z-index: 1000; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%;
  width: min(620px, calc(100vw - 24px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: color-mix(in oklab, var(--marca) 88%, #000); color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .14) inset;
  font-size: 14px; line-height: 1.3;
  animation: aviso-version-baja .38s cubic-bezier(.2, .8, .3, 1) both, aviso-version-abre .55s .34s cubic-bezier(.65, 0, .25, 1) both;
}
.aviso-version > * { animation: aviso-version-texto .3s .8s ease-out both; }
.aviso-version-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: aviso-version-texto .3s .8s both, aviso-version-latido 2s 1.2s infinite; }
.aviso-version-txt { flex: 1; min-width: 0; }
.aviso-version button { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; border-radius: 999px; padding: 8px 16px; }
.aviso-version-si { background: #fff; color: color-mix(in oklab, var(--marca) 80%, #000); }
.aviso-version-si:hover { filter: brightness(.95); }
.aviso-version-luego { background: transparent; color: rgba(255, 255, 255, .85); padding: 8px 10px !important; }
.aviso-version-luego:hover { color: #fff; }
@keyframes aviso-version-baja { from { transform: translate(-50%, -160%); } to { transform: translate(-50%, 0); } }
@keyframes aviso-version-abre { from { clip-path: inset(0 calc(50% - 22px) round 999px); } to { clip-path: inset(0 0 round 999px); } }
@keyframes aviso-version-texto { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes aviso-version-latido { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
@media (max-width: 600px) {
  .aviso-version { border-radius: 20px; padding: 8px 6px 8px 14px; gap: 6px; font-size: 13.5px; }
  .aviso-version-txt strong { display: block; }
  .aviso-version button { padding: 8px 12px; }
  @keyframes aviso-version-abre { from { clip-path: inset(0 calc(50% - 22px) round 20px); } to { clip-path: inset(0 0 round 20px); } }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-version, .aviso-version > *, .aviso-version-punto { animation: none; }
}

/* Panel 320 · José Carlos (18/10): en un monitor grande (1920) quedaba una franja vacía a la derecha (Inicio, Mejora del
   asistente, Ajustes, Disponibilidad…), mientras la cabecera y los filtros sí llegaban al borde. Ahora ocupan todo el
   ancho, igual que la Agenda o WhatsApp. (Selectores con .view delante para ganar a gestion.css, que va después.) */
#view-inicio #inicio-root, #view-pacientes #pacientes-root, .view .alm, #view-horarios #horarios-root, .view .ma-cuerpo,
.view .aj-cuerpo, #view-disponibilidad #disponibilidad-root { max-width: none; }

/* Panel 329 · Con la letra grande (y en la agenda del móvil siempre) los nombres no se cortan con «…»: bajan de línea.
   «Había cosas que se cortaban en la agenda o en diferentes partes» (19/10). En las cajas de la rejilla de horas, que
   tienen alto fijo, se queda el «…». */
html .agl-cuerpo > strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
html[data-letra] :is(.msg-item-nombre, .msg-hilo-quien strong, .hz-t-nombre strong, .ne-nombre strong, .dsp-tarjeta header strong,
  .mas-usuario strong, .msg-contacto-nombre, .doc-nombre, .bq-txt small, .msg-respuestas li span, .ag-menu-pro span, .alm-nombre) {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html[data-letra] .msg-item-previa { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Panel 345 · Las opciones de los desplegables, con fondo sólido (antes heredaban el cristal translúcido del
   campo y en Windows salían con un fondo gris feo, sobre todo en el tema oscuro). */
select option, select optgroup { background-color: #fff; color: #13262A; }
html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup {
  background-color: color-mix(in oklab, var(--marca) 14%, #0e1320); color: #E6EAF2; }
select optgroup { font-weight: 700; }
select option { font-weight: 400; }

/* Panel 417 · José Carlos (25/10): con un texto largo, el aviso flotante (toast) se volvía una bola enorme en el móvil
   (border-radius: 999px con cinco líneas). Ahora es una tarjeta: ancho limitado, esquinas normales y, en el móvil,
   de lado a lado por encima de la barra de abajo. */
.toast { box-sizing: border-box; width: max-content; max-width: min(520px, calc(100vw - 32px)); border-radius: 18px;
  line-height: 1.38; text-align: left; overflow-wrap: break-word; }
.toast.toast-accion > span { flex: 1; min-width: 0; }
.toast.toast-accion > button { flex: none; }
@media (max-width: 860px) {
  .toast:not(.toast-fija):not(.toast-equipo) { left: 12px; right: 12px; width: auto; max-width: none; transform: none;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; padding: 12px 16px; font-size: 14px;
    animation-name: toast-entra-movil; }
  .toast.toast-accion:not(.toast-fija) { padding: 8px 8px 8px 16px; }
  @keyframes toast-entra-movil { from { transform: translateY(10px); opacity: 0; } }
}

/* Panel 418 · En la app instalada, el enlace a la web abría la web dentro de la app y no se podía volver (Silvia, 25/10). */
@media (display-mode: standalone) { .pie-web { display: none !important; } }

/* 0217 · Crear y borrar plantillas desde el panel */
.pl-peticiones { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; }
.pl-peticiones h3 { margin: 0 0 8px; font-size: 15px; }
.pl-peticiones ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-peticiones li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.pl-peticiones li small { color: var(--text-muted); }
.pl-peticiones li.pl-pet-error small { color: var(--danger, #b42318); }
.pl-peticiones code, .pl-borrar-caja code { font-size: .92em; word-break: break-all; }
.pl-nueva { display: grid; gap: 4px; }
.pn-tecnico { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12.5px; word-break: break-all; }
.pn-tipo { border: 0; padding: 0; margin: 4px 0 10px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pn-tipo legend { font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.pn-tipo label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--wa-divider, rgba(0,0,0,.12));
  border-radius: 12px; cursor: pointer; }
.pn-tipo label:has(input:checked) { border-color: var(--accent, #1553C8); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #1553C8) 25%, transparent); }
.pn-tipo span { display: grid; gap: 2px; }
.pn-tipo small { color: var(--text-muted); font-size: 12.5px; }
.pn-datos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 8px; }
.pn-datos > span { font-size: 13px; color: var(--text-muted); margin-right: 2px; }
.pn-dato { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--accent, #1553C8) 35%, transparent);
  background: color-mix(in oklab, var(--accent, #1553C8) 8%, transparent); color: inherit; }
.pn-dato:active { transform: scale(.97); }
.pn-ayuda { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12.5px; }
.pn-psico { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; font-size: 14px; }
.pl-borrar { color: var(--danger, #b42318); }
.pl-borrar[disabled] { opacity: .45; cursor: not-allowed; }
.pl-borrar-caja p { margin: 0 0 12px; }
/* Panel 428 · José Carlos (26/10): «Nueva plantilla» más llamativo, con ondas que salen del borde todo el rato
   (tres anillos desfasados, así siempre hay una onda saliendo). Sin latido: el botón no se mueve al pulsarlo. */
.pl-nueva-btn { --onda: var(--accion); animation: pl-ondas 2.1s linear infinite; }
.pl-nueva-btn:hover, .pl-nueva-btn:focus-visible { animation-duration: 1.4s; }
@keyframes pl-ondas {
  0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
         0 0 0 0    color-mix(in oklab, var(--onda) 75%, transparent),
         0 0 0 7px  color-mix(in oklab, var(--onda) 45%, transparent),
         0 0 0 14px color-mix(in oklab, var(--onda) 20%, transparent); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
         0 0 0 7px  color-mix(in oklab, var(--onda) 45%, transparent),
         0 0 0 14px color-mix(in oklab, var(--onda) 20%, transparent),
         0 0 0 21px color-mix(in oklab, var(--onda) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-nueva-btn { animation: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px color-mix(in oklab, var(--accion) 35%, transparent); }
}
/* Panel 429 · José Carlos (26/10): más aire entre «Nueva plantilla» (con sus ondas) y «Sincronizar». */
.pl-acciones .pl-nueva-btn { margin-right: 18px; }
@media (max-width: 600px) { .pl-acciones .pl-nueva-btn { margin: 0 14px 10px 0; } }