/* =====================================================================
   Panel 166 · Estilo «suave» con vidrio líquido (preparado, aún sin activar).
   ---------------------------------------------------------------------
   El mismo panel —mismas pantallas, menú, iconos y WhatsApp— con otra
   piel: fondo cálido con manchas de color muy suaves (la foto de la
   consulta casi no se ve), tarjetas de vidrio translúcido con canto de
   luz arriba a la izquierda, botones como pastillas de cristal en el
   color de la consulta y cifras en Inter Display (estilo Apple).

   Todo va bajo html[data-estilo="suave"]: sin ese atributo, el panel se
   ve exactamente como ahora. Se enciende con CONFIG.estilo = "suave" (o
   ?estilo=suave en la dirección, para enseñarlo sin tocar nada).

   Rendimiento: el desenfoque es el mismo que el panel ya usa hoy; en el
   móvil es más corto para que vaya fluido en Android de gama media.
   ===================================================================== */

/* Las cifras: Inter Display, solo números y signos (9 KB). Licencia OFL en
   fonts/cifras-inter-LICENSE.txt. Las letras siguen en Figtree. */
@font-face {
  font-family: "Cifras"; src: url("../fonts/cifras-inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0030-0039, U+002B-002F, U+003A, U+0025, U+00B7, U+2013, U+2212, U+20AC;
}

html[data-estilo="suave"]:not([data-theme="dark"]) {
  --fondo: #F3EEEA;
  --vidrio: rgba(255, 255, 255, .5);
  --vidrio-fuerte: rgba(255, 255, 255, .72);
  --vidrio-borde: rgba(255, 255, 255, .7);
  /* El brillo del cristal: luz que entra por arriba a la izquierda. */
  --vidrio-reflejo: linear-gradient(160deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, 0) 58%);
  --canto: inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .45),
           inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -18px 30px -26px rgba(255, 255, 255, .9);
  --sombra-vidrio: var(--canto), 0 1px 2px rgba(60, 35, 25, .05), 0 22px 44px -28px rgba(70, 40, 30, .36);
  --sombra-flota: var(--canto), 0 30px 60px -28px rgba(70, 40, 30, .42);
  --divider: rgba(40, 28, 24, .08);
  --dash-bg: rgba(40, 28, 24, .04);
  /* Los botones y enlaces de acción, en el color de la consulta (antes iban
     siempre en azul). Algo oscurecido para que el texto blanco se lea bien:
     con el naranja del logo, contraste 4,9:1. */
  --accion: color-mix(in oklab, var(--marca) 80%, #000);
  --accion-oscura: color-mix(in oklab, var(--marca) 68%, #000);
  --accion-clara: color-mix(in oklab, var(--marca) 12%, #fff);
  /* Los colores de cada tipo de cosa. Suaves: tiñen, no pintan. */
  --t-sesion: var(--marca);
  --t-whatsapp: #1E8A4C;
  --t-despacho: #167A76;
  --t-pendiente: #B26A0C;
  --t-riesgo: #B42318;
}
html[data-estilo="suave"] { --desenfoque: blur(26px) saturate(180%); }
/* La pantalla de WhatsApp no cambia: conserva el azul de acción de siempre
   (botón «Tomar el control», reproductor de audio, aviso de presencia). */
html[data-estilo="suave"] #view-conversaciones { --accion: #2563eb; --accion-oscura: #1d4ed8; --accion-clara: #e6eefe; }
html[data-estilo="suave"][data-theme="dark"] #view-conversaciones { --accion: #5b8def; --accion-oscura: #3f74e0; --accion-clara: rgba(91, 141, 239, .16); }
@media (max-width: 860px) { html[data-estilo="suave"] { --desenfoque: blur(16px) saturate(160%); } }

/* ---------------------------------------------------------------- fondo
   Para que el vidrio se note hace falta color detrás: tres manchas suaves
   (color de la consulta, acento y un malva neutro). La foto, casi oculta. */
html[data-estilo="suave"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(40vw 34vw at 92% 6%, color-mix(in oklab, var(--marca) 42%, transparent), transparent 68%),
    radial-gradient(30vw 26vw at 30% 42%, color-mix(in oklab, var(--marca) 26%, transparent), transparent 70%),
    radial-gradient(34vw 30vw at 70% 50%, rgba(178, 160, 220, .42), transparent 70%),
    radial-gradient(44vw 40vw at 6% 98%, color-mix(in oklab, var(--acento) 55%, transparent), transparent 70%),
    radial-gradient(36vw 30vw at 98% 96%, rgba(150, 196, 200, .4), transparent 70%),
    var(--fondo);
  background-attachment: fixed;
}
/* La foto de la consulta de fondo: a medio camino entre la textura de hoy y
   la foto entera. Se ve en toda la pantalla (no solo abajo), desenfocada y
   algo apagada para que las tarjetas de cristal sigan mandando. */
html[data-estilo="suave"] body::before {
  opacity: var(--foto-opacidad, .3); filter: blur(var(--foto-desenfoque, 5px)) saturate(.75);
  -webkit-mask-image: radial-gradient(150% 130% at 55% 85%, #000 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, .45) 100%);
  mask-image: radial-gradient(150% 130% at 55% 85%, #000 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, .45) 100%);
}
html[data-estilo="suave"][data-theme="dark"] body::before { filter: blur(var(--foto-desenfoque, 5px)) saturate(.6) brightness(.6); }

html[data-estilo="suave"]:not([data-theme="dark"]) .nav-sidebar { background: var(--vidrio-reflejo), rgba(255, 255, 255, .46); }

/* ---------------------------------------------------------------- cifras y títulos */
html[data-estilo="suave"] .saludo-texto h1 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.025em; }
html[data-estilo="suave"] :is(.reloj-hm, .reloj-s, .kpi-valor, .mt-t-valor, .mt-cifra, .alm-grande, .sg-n, .pl-cifra b) {
  font-family: "Cifras", var(--font-ui);
  font-variation-settings: "opsz" 32;
  font-feature-settings: "cv11";
}
html[data-estilo="suave"] .reloj-hm { font-weight: 600; font-size: 60px; letter-spacing: -.04em; }
html[data-estilo="suave"] .reloj-s { font-weight: 600; }
html[data-estilo="suave"] .kpi-valor { font-weight: 700; font-size: 42px; letter-spacing: -.03em; }
html[data-estilo="suave"] .kpi-nombre { color: var(--text-dark); font-weight: 600; }

/* ---------------------------------------------------------------- Inicio: cada tarjeta con su color */
html[data-estilo="suave"] #inicio-root .kpis:not(.wa-kpis) .kpi:nth-child(1) { --t: var(--t-sesion); }
html[data-estilo="suave"] #inicio-root .kpis:not(.wa-kpis) .kpi:nth-child(2) { --t: var(--t-despacho); }
html[data-estilo="suave"] #inicio-root .kpis:not(.wa-kpis) .kpi:nth-child(3) { --t: var(--t-whatsapp); }
html[data-estilo="suave"] #inicio-root .kpis:not(.wa-kpis) .kpi:nth-child(4) { --t: #8A8487; }
html[data-estilo="suave"] #inicio-root .kpis:not(.wa-kpis) .kpi.alerta { --t: var(--t-riesgo); }
html[data-estilo="suave"] #inicio-root .wa-kpis .kpi:nth-child(1) { --t: var(--t-whatsapp); }
html[data-estilo="suave"] #inicio-root .wa-kpis .kpi:nth-child(2) { --t: var(--t-sesion); }
html[data-estilo="suave"] #inicio-root .wa-kpis .kpi:nth-child(3) { --t: var(--t-pendiente); }
html[data-estilo="suave"] #inicio-root .wa-kpis .kpi:nth-child(4) { --t: #8A8487; }
/* Cristal teñido: el color entra por la esquina y se pierde hacia el centro. */
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi {
  background:
    var(--vidrio-reflejo),
    linear-gradient(135deg, color-mix(in oklab, var(--t, var(--marca)) 26%, transparent), transparent 70%),
    var(--vidrio);
  box-shadow: var(--sombra-vidrio), 0 22px 40px -28px color-mix(in oklab, var(--t, var(--marca)) 80%, transparent);
}
/* La cifra va en una tinta más oscura de su color: el naranja del logo tal
   cual no llega a leerse bien sobre el cristal (2,9:1); oscurecido pasa de
   4,5:1. Y un halo blanco detrás para que la foto no le meta ruido. */
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi .kpi-valor {
  color: color-mix(in oklab, var(--t, var(--text-dark)) 74%, #000);
  text-shadow: 0 0 1px rgba(255, 255, 255, .9), 0 0 18px rgba(255, 255, 255, .95), 0 1px 0 rgba(255, 255, 255, .6);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi.alerta .kpi-nombre { color: var(--t-riesgo); }
/* «Os toca responder» sigue destacando, con un canto de su color. */
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi.aviso {
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--t, var(--marca)) 45%, transparent), var(--sombra-vidrio);
}

html[data-estilo="suave"]:not([data-theme="dark"]) .saludo {
  background: var(--vidrio-reflejo), linear-gradient(120deg, transparent 50%, color-mix(in oklab, var(--marca) 12%, transparent)), var(--vidrio);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .pendientes {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--t-pendiente) 14%, transparent), transparent 55%), var(--vidrio);
}
html[data-estilo="suave"]:not([data-theme="dark"]) #inicio-root .paneles .panel:nth-child(1) {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--t-sesion) 12%, transparent), transparent 55%), var(--vidrio);
}
html[data-estilo="suave"]:not([data-theme="dark"]) #inicio-root .paneles .panel:nth-child(2) {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--t-pendiente) 12%, transparent), transparent 55%), var(--vidrio);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .wa-resumen {
  border-radius: var(--r-xl); padding: 18px 20px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--t-whatsapp) 10%, rgba(255, 255, 255, .4)), rgba(255, 255, 255, .2) 60%);
  box-shadow: var(--canto);
}

/* Las filas de dentro: cristal más claro, con su canto. */
html[data-estilo="suave"]:not([data-theme="dark"]) .lista li {
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), 0 6px 14px -12px rgba(70, 40, 30, .3);
}

/* ---------------------------------------------------------------- botones y controles: pastillas de cristal */
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-primario:not(#view-conversaciones *) {
  border-color: color-mix(in oklab, var(--marca) 55%, rgba(255, 255, 255, .6));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, color-mix(in oklab, var(--accion) 86%, #fff), var(--accion-oscura));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px -2px rgba(0, 0, 0, .14),
              0 12px 26px -12px color-mix(in oklab, var(--marca) 85%, transparent);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-primario:not(#view-conversaciones *):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px -2px rgba(0, 0, 0, .14),
              0 16px 32px -12px color-mix(in oklab, var(--marca) 90%, transparent);
}
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5));
  border-color: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(70, 40, 30, .35);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-secundario:not(#view-conversaciones *):hover { background: rgba(255, 255, 255, .88); }

/* El apartado activo del menú: una pastilla de cristal, teñida del color de la consulta. */
html[data-estilo="suave"]:not([data-theme="dark"]) .nav-item.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)),
    color-mix(in oklab, var(--marca) 26%, transparent);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(255, 255, 255, .4),
              inset 0 0 0 1px color-mix(in oklab, var(--marca) 18%, transparent),
              0 10px 22px -14px var(--marca);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .nav-item:hover:not(.active) { background: rgba(255, 255, 255, .4); }

/* Digital / Analógico y demás selectores de dos posiciones. */
html[data-estilo="suave"]:not([data-theme="dark"]) .reloj-modos {
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 3px rgba(70, 40, 30, .12), inset 0 -1px 0 rgba(255, 255, 255, .7);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .reloj-modos button[aria-pressed="true"] {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .78));
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(70, 40, 30, .32);
}

/* ---------------------------------------------------------------- tema oscuro: cristal ahumado */
html[data-estilo="suave"][data-theme="dark"] {
  --vidrio: rgba(24, 30, 34, .58);
  --vidrio-fuerte: rgba(22, 28, 32, .78);
  --vidrio-borde: rgba(255, 255, 255, .1);
  --vidrio-reflejo: linear-gradient(160deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 45%);
  --sombra-vidrio: inset 1px 1px 0 rgba(255, 255, 255, .12), 0 22px 44px -26px rgba(0, 0, 0, .7);
}
html[data-estilo="suave"][data-theme="dark"] .kpi .kpi-valor { color: var(--text-dark); }
/* En el tema oscuro, el color de la consulta se aclara para todo lo que es
   texto o icono: un azul oscuro como el de SyS desaparece sobre el fondo
   negro (los segundos del reloj, la etiqueta HOY, las horas sin leer…). */
html[data-estilo="suave"][data-theme="dark"] {
  --marca-texto: color-mix(in oklab, var(--marca) 58%, #fff);
  --t-sesion: var(--marca-texto);
  --t-whatsapp: #4CC27A;
  --t-despacho: #4FB8B3;
  --t-pendiente: #E0A24C;
  --t-riesgo: #F0705F;
}
html[data-estilo="suave"][data-theme="dark"] :is(.reloj-s, .kpi.aviso .kpi-valor, .agl-dia h2 span, .msg-item[data-sinleer="1"] .msg-item-hora, .msg-relevo > svg, .form a, .reloj-seg) { color: var(--marca-texto); }
html[data-estilo="suave"][data-theme="dark"] .reloj-seg { stroke: var(--marca-texto); }
html[data-estilo="suave"][data-theme="dark"] .reloj-eje { fill: var(--marca-texto); }
html[data-estilo="suave"][data-theme="dark"] .kpi.alerta .kpi-nombre { color: var(--t-riesgo); }

/* ---------------------------------------------------------------- pantalla de acceso (Clerk)
   Ahora es siempre oscura y con la foto teñida del color de la consulta. En
   el estilo suave pasa a clara: el mismo cálido del panel, tarjeta de
   cristal y la foto con un tinte mucho más ligero. El formulario de Clerk
   hereda los colores de aquí (sus piezas llevan nuestras clases ck-*). */
html[data-estilo="suave"] .acceso {
  color-scheme: light;
  color: #13262A;
  --fondo: #F3EEEA;
  --text-dark: #13262A;
  --text-muted: #3E5055;
  --divider: rgba(19, 38, 42, .12);
  --vidrio: rgba(255, 255, 255, .62);
  --vidrio-borde: rgba(255, 255, 255, .85);
  --vidrio-reflejo: linear-gradient(160deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 50%);
  --sombra-vidrio: inset 1px 1px 0 #fff, 0 30px 70px -36px rgba(40, 30, 30, .45), 0 2px 8px -4px rgba(40, 30, 30, .1);
  --peligro: #B42318; --peligro-claro: #fdecea;
}
/* Detrás de la tarjeta, color fluido (marca, acento, malva y un verde agua)
   para que el cristal tenga algo que dejar ver, como en el panel. */
html[data-estilo="suave"] .acceso.acceso {
  background:
    radial-gradient(60% 46% at 96% 0%, color-mix(in oklab, var(--marca) 62%, transparent) 0%, transparent 70%),
    radial-gradient(40% 34% at 22% 30%, color-mix(in oklab, var(--marca) 30%, transparent) 0%, transparent 70%),
    radial-gradient(50% 44% at 72% 56%, rgba(170, 150, 220, .55) 0%, transparent 70%),
    radial-gradient(58% 50% at 0% 100%, color-mix(in oklab, var(--acento) 80%, transparent) 0%, transparent 70%),
    radial-gradient(46% 38% at 100% 100%, rgba(140, 196, 200, .6) 0%, transparent 70%),
    #F1ECE8;
}
/* La tarjeta: cristal de verdad (translúcido, con desenfoque y canto). */
html[data-estilo="suave"] .acceso .auth-tarjeta {
  background: var(--vidrio-reflejo), rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(255, 255, 255, .75);
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1px -1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .3),
              0 2px 6px rgba(70, 45, 30, .06), 0 40px 80px -40px rgba(70, 45, 30, .5);
}
html[data-estilo="suave"] .acceso .auth-tarjeta:hover {
  border-color: color-mix(in oklab, var(--marca) 55%, transparent);
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1px -1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .3),
              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);
}
html[data-estilo="suave"] .acceso .form h2 { font-weight: 700; letter-spacing: -.03em; }
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-boton, html[data-estilo="suave"] .acceso .entrar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, color-mix(in oklab, var(--marca) 86%, #fff), color-mix(in oklab, var(--marca) 92%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px -2px rgba(0, 0, 0, .14),
              0 16px 30px -14px color-mix(in oklab, var(--marca) 90%, transparent);
}
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-social {
  background: linear-gradient(180deg, #fff, #FBF8F6); border: 1px solid rgba(19, 38, 42, .14); color: #13262A; font-weight: 600;
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -2px 5px -2px rgba(70, 45, 30, .14), 0 2px 4px rgba(70, 45, 30, .08), 0 12px 22px -14px rgba(70, 45, 30, .55);
}
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-social:hover {
  background: #fff; border-color: color-mix(in oklab, var(--marca) 45%, transparent); transform: translateY(-1px);
}
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-social * { color: #13262A; }
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-divisor-texto { color: var(--text-muted); font-weight: 600; }
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-divisor { background: rgba(19, 38, 42, .14); }
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-label, html[data-estilo="suave"] .acceso .form label { color: #13262A; font-weight: 650; }
html[data-estilo="suave"] .acceso .form .sub { color: var(--text-muted); font-weight: 500; }
html[data-estilo="suave"] .acceso .confianza { color: var(--text-muted); font-weight: 500; }
html[data-estilo="suave"] .acceso .confianza a { color: #13262A; }
html[data-estilo="suave"] .acceso .sello small { color: var(--text-muted); }
/* El humo de marca detrás del formulario y el halo que sigue al ratón
   (humo.js) se quedan como en la pantalla de ahora: al entrar con el ratón
   la tarjeta se resalta, sube un poco y el humo coge intensidad. */
html[data-estilo="suave"] .humo { opacity: .32; }
html[data-estilo="suave"] .auth-tarjeta:hover .humo { opacity: .85; }
html[data-estilo="suave"] .acceso .sello .icono { background: #fff; box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .3); }
html[data-estilo="suave"] .acceso .acc-campo,
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-campo,
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-otp,
html[data-estilo="suave"] .acceso :is(#clerk-signin, #clerk-components) .ck-identidad {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .85)); border-color: rgba(255, 255, 255, .9); color: #13262A;
  box-shadow: inset 0 1.5px 3px rgba(70, 40, 30, .1), inset 0 -1px 0 #fff;
}

/* La foto de la izquierda: el tinte de marca mucho más ligero y un velo
   cálido abajo para que el texto blanco se siga leyendo. */
html[data-estilo="suave"] .hero-foto { filter: grayscale(.25) saturate(.9) brightness(1.04); }
html[data-estilo="suave"] .hero::before { opacity: .42; }
html[data-estilo="suave"] .hero::after {
  background: linear-gradient(90deg, rgba(30, 22, 20, .5) 0%, rgba(30, 22, 20, .12) 55%, rgba(30, 22, 20, 0) 80%),
              linear-gradient(180deg, rgba(30, 22, 20, .2) 0%, rgba(30, 22, 20, 0) 30%, rgba(30, 22, 20, .72) 100%);
}

/* ---------------------------------------------------------------- el resto de pantallas
   Lo mismo que Inicio, sin tocar la estructura: títulos, cifras, tarjetas de
   cristal con un tinte del color de la consulta. Donde se lee mucho (tablas,
   agenda, cajón lateral) el cristal es más tupido para que el texto no
   compita con el fondo. La pantalla de WhatsApp no cambia. */
html[data-estilo="suave"] :is(.view-cabecera h1, .mt-cab h1, .hz-cab h1) { font-size: 26px; font-weight: 650; letter-spacing: -.022em; }
html[data-estilo="suave"] :is(.mt-t-valor, .mt-cifra, .alm-grande, .sg-n, .pl-cifra b) { font-weight: 700; letter-spacing: -.03em; }
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.mt-t-valor, .mt-cifra, .alm-grande, .sg-n, .pl-cifra b) { text-shadow: 0 0 14px rgba(255, 255, 255, .9); }
html[data-estilo="suave"] .pl-cifra b { font-size: 30px; }
html[data-estilo="suave"] .mt-t-valor { font-size: 2.2rem; }
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.mt-tarjeta, .pl-cifra) {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--marca) 12%, transparent), transparent 62%), var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
}
/* La tarjeta destacada ya no lleva la raya a la izquierda: se tiñe un poco más. */
html[data-estilo="suave"]:not([data-theme="dark"]) .mt-tarjeta.destacada {
  border-left: 1px solid var(--vidrio-borde);
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--marca) 22%, transparent), transparent 66%), var(--vidrio);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .mt-tarjeta.destacada .mt-t-valor { color: color-mix(in oklab, var(--marca) 74%, #000); }
html[data-estilo="suave"]:not([data-theme="dark"]) .tabla-wrap { background: var(--vidrio-reflejo), rgba(255, 255, 255, .74); }
html[data-estilo="suave"]:not([data-theme="dark"]) .tabla th { background: rgba(255, 255, 255, .55); }
html[data-estilo="suave"]:not([data-theme="dark"]) .cajon { background: var(--vidrio-reflejo), rgba(255, 255, 255, .86); }
html[data-estilo="suave"]:not([data-theme="dark"]) #agenda-root { background: var(--vidrio-reflejo), rgba(255, 255, 255, .8); }
html[data-estilo="suave"]:not([data-theme="dark"]) .hz-tarjeta {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--c, var(--marca)) 12%, transparent), transparent 62%), rgba(255, 255, 255, .55);
  box-shadow: var(--sombra-vidrio);
}

/* ---------------------------------------------------------------- Clear legible
   El cristal transparente se queda en lo que se mira de un
   vistazo (menú, saludo, cifras, botones); donde hay que leer, cristal
   esmerilado claro. Es lo que hace Apple: vidrio para navegar, material
   más tupido para el contenido. */
html[data-estilo="suave"]:not([data-theme="dark"]) {
  --text-muted: #4D5B60;
  --vidrio: rgba(255, 255, 255, .62);
  --vidrio-fuerte: rgba(255, 255, 255, .78);
  --vidrio-borde: rgba(255, 255, 255, .6);
  --vidrio-reflejo: linear-gradient(155deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 48%, rgba(255,255,255,0) 78%, rgba(255,255,255,.14) 100%);
  --canto: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1.5px -1.5px 0 rgba(255,255,255,.45),
           inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 22px -4px rgba(255,255,255,.55),
           inset -10px -12px 22px -18px rgba(70,45,30,.35);
  --sombra-vidrio: var(--canto), 0 1px 2px rgba(60,35,25,.06), 0 24px 46px -30px rgba(60,35,25,.45);
  --clear: rgba(255, 255, 255, .14);
}
/* Contenido: esmerilado claro (se intuye la sala, no compite con el texto). */
html[data-estilo="suave"] { --desenfoque: blur(16px) saturate(150%) brightness(1.06); }
@media (max-width: 860px) { html[data-estilo="suave"] { --desenfoque: blur(12px) saturate(140%) brightness(1.06); } }

/* Lo que se mira de un vistazo: Clear de verdad. */
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.nav-sidebar, .saludo) {
  -webkit-backdrop-filter: blur(3px) saturate(150%) brightness(1.1); backdrop-filter: blur(3px) saturate(150%) brightness(1.1);
}
/* Las tarjetas con cifras: cristal igual de claro, pero algo más desenfocado
   detrás para que la foto no se meta entre los números. */
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.kpi, .mt-tarjeta, .pl-cifra) {
  -webkit-backdrop-filter: blur(7px) saturate(150%) brightness(1.1); backdrop-filter: blur(7px) saturate(150%) brightness(1.1);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .nav-sidebar { background: var(--vidrio-reflejo), rgba(255,255,255,.2); }
html[data-estilo="suave"]:not([data-theme="dark"]) .saludo {
  background: var(--vidrio-reflejo), linear-gradient(120deg, transparent 50%, color-mix(in oklab, var(--marca) 12%, transparent)), var(--clear);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--t, var(--marca)) 24%, transparent), transparent 70%), var(--clear);
}
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.mt-tarjeta, .pl-cifra) {
  background: var(--vidrio-reflejo), linear-gradient(135deg, color-mix(in oklab, var(--marca) 16%, transparent), transparent 62%), var(--clear);
}
/* Sobre cristal transparente, un halo blanco muy suave detrás de las letras
   (lo que Apple llama «vibrancy»): se leen aunque detrás pase algo oscuro. */
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.nav-sidebar, .saludo, .kpi, .mt-tarjeta, .pl-cifra) :is(h1, h2, p, span, b, strong, small, div, a) {
  text-shadow: 0 0 14px rgba(255, 255, 255, .85), 0 0 2px rgba(255, 255, 255, .6);
}
/* Las filas de dentro de una lista: placa casi blanca. */
html[data-estilo="suave"]:not([data-theme="dark"]) .lista li { background: rgba(255,255,255,.72); }
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.tabla-wrap, #agenda-root, .cajon) {
  background: var(--vidrio-reflejo), rgba(255,255,255,.74);
}

/* ---------------------------------------------------------------- Inicio: icono y gráfica en cada tarjeta
   (Panel 166). El icono va en una baldosa de cristal del color de la
   tarjeta; en «Citas hoy» y «Huecos libres» hay además una gráfica de los
   últimos 7 días: verde si va mejor que hace una semana, roja si va peor,
   gris si igual. Lo pinta inicio.js solo con el estilo suave. */
html[data-estilo="suave"] .kpi-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
html[data-estilo="suave"] .kpi-icono {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  color: var(--t, var(--marca));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .55) 100%),
    color-mix(in oklab, var(--t, var(--marca)) 16%, transparent);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(255, 255, 255, .5),
              inset 0 0 0 1px color-mix(in oklab, var(--t, var(--marca)) 16%, transparent),
              0 8px 16px -10px color-mix(in oklab, var(--t, var(--marca)) 70%, transparent);
}
html[data-estilo="suave"] .kpi-icono svg { width: 22px; height: 22px; }
html[data-estilo="suave"] .kpi.alerta .kpi-icono { --t: var(--t-riesgo); }
html[data-estilo="suave"] .kpi-tend {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px 4px 6px; border-radius: 999px;
  font-family: "Cifras", var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .4), 0 6px 14px -10px rgba(70, 45, 30, .4);
  --tc: #8A8487;
}
html[data-estilo="suave"] .kpi-tend.bien { --tc: #1E8A4C; }
html[data-estilo="suave"] .kpi-tend.mal { --tc: #B42318; }
html[data-estilo="suave"] .kpi-tend b { color: var(--tc); min-width: 2ch; text-align: right; }
html[data-estilo="suave"] .kpi-tend svg { display: block; overflow: visible; }
html[data-estilo="suave"] .kpi-tend-linea { fill: none; stroke: var(--tc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-estilo="suave"] .kpi-tend-area { fill: var(--tc); opacity: .13; }
html[data-estilo="suave"] .kpi-tend-punto { fill: var(--tc); stroke: #fff; stroke-width: 1.5; }
html[data-estilo="suave"] .kpi-valor { font-size: 42px; }
html[data-estilo="suave"] .kpi-nombre { margin-top: 2px; font-size: 14.5px; }
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi-detalle { color: #4A4245; }
html[data-estilo="suave"]:not([data-theme="dark"]) .kpi-tend b { font-size: 13px; }
@media (max-width: 860px) {
  html[data-estilo="suave"] .kpi-icono { width: 38px; height: 38px; border-radius: 12px; }
  html[data-estilo="suave"] .kpi-icono svg { width: 20px; height: 20px; }
  html[data-estilo="suave"] .kpi-tend svg { width: 56px; }
  html[data-estilo="suave"] .kpi-cab { margin-bottom: 8px; }
}
html[data-estilo="suave"][data-theme="dark"] .kpi-icono {
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)), color-mix(in oklab, var(--t, var(--marca)) 22%, transparent);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px color-mix(in oklab, var(--t, var(--marca)) 25%, transparent);
}
html[data-estilo="suave"][data-theme="dark"] .kpi-tend { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
html[data-estilo="suave"][data-theme="dark"] .kpi-tend.bien { --tc: #4CC27A; }
html[data-estilo="suave"][data-theme="dark"] .kpi-tend.mal { --tc: #F0705F; }
html[data-estilo="suave"][data-theme="dark"] .kpi-tend-punto { stroke: #1a2226; }

/* ---------------------------------------------------------------- lo mejor de las referencias
   · Botones secundarios como pastillas blancas con cuerpo (canto claro
     arriba, sombra corta debajo), como las piezas de un kit de cristal.
   · Campos y desplegables de cristal, con el hueco marcado por dentro.
   · Selectores de dos o más posiciones: carril hundido y pieza activa
     que sobresale como una lente.
   · Tema oscuro: cristal ahumado con un filo de luz muy fino.
   La pantalla de WhatsApp queda fuera de todo esto. */
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-secundario:not(#view-conversaciones *) {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .78) 100%);
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -2px 5px -2px rgba(70, 45, 30, .14),
              0 1px 2px rgba(70, 45, 30, .08), 0 12px 22px -14px rgba(70, 45, 30, .5);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-secundario:not(#view-conversaciones *):hover { background: #fff; transform: translateY(-1px); }
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-secundario:not(#view-conversaciones *):active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(70, 45, 30, .18); }
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-primario:not(#view-conversaciones *) { border-color: color-mix(in oklab, var(--marca) 45%, #fff); }
html[data-estilo="suave"]:not([data-theme="dark"]) .btn-primario:not(#view-conversaciones *):active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22); }

html[data-estilo="suave"]:not([data-theme="dark"]) .campo:not(#view-conversaciones *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .88));
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1.5px 3px rgba(70, 45, 30, .1), inset 0 -1px 0 #fff, 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .campo:not(#view-conversaciones *):focus {
  background: #fff; border-color: color-mix(in oklab, var(--marca) 55%, #fff);
  box-shadow: inset 0 1.5px 3px rgba(70, 45, 30, .08), 0 0 0 4px color-mix(in oklab, var(--marca) 18%, transparent);
}

html[data-estilo="suave"]:not([data-theme="dark"]) :is(.ag-segmento, .mt-rangos, .mt-pestanas) {
  background: rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 3px rgba(70, 45, 30, .12), inset 0 -1px 0 rgba(255, 255, 255, .7);
}
html[data-estilo="suave"]:not([data-theme="dark"]) :is(.mt-rango.activo, .mt-pestana.activo) {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .8));
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(70, 45, 30, .35);
}
html[data-estilo="suave"]:not([data-theme="dark"]) .ag-segmento button[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 5px -2px rgba(0, 0, 0, .18), 0 6px 12px -8px var(--marca);
}

/* El menú del móvil es una barra que flota sobre el contenido: cristal
   con más desenfoque y un filo de luz arriba, como las barras de iOS. */
@media (max-width: 860px) {
  html[data-estilo="suave"]:not([data-theme="dark"]) .nav-sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35),
                0 -1px 0 rgba(255, 255, 255, .3), 0 18px 40px -22px rgba(70, 45, 30, .5);
  }
}

html[data-estilo="suave"][data-theme="dark"] {
  --vidrio: rgba(22, 27, 31, .6);
  --vidrio-fuerte: rgba(20, 25, 29, .8);
  --vidrio-borde: rgba(255, 255, 255, .08);
  --vidrio-reflejo: linear-gradient(155deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, 0) 55%);
  --sombra-vidrio: inset 1px 1px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(255, 255, 255, .03),
                   0 1px 2px rgba(0, 0, 0, .3), 0 26px 50px -28px rgba(0, 0, 0, .8);
}
html[data-estilo="suave"][data-theme="dark"] .btn-secundario:not(#view-conversaciones *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 20px -14px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------------- móvil (revisión del 166)
   · El reloj del estilo suave (60px) se montaba sobre Digital/Analógico en
     pantallas de 360-390px: en el móvil va a 44px, como el de antes.
   · Las pestañas y los periodos de Estadísticas y Mejora del asistente se
     cortaban por la derecha («Mes anterio»): si no caben, se parten en dos
     filas. */
@media (max-width: 860px) {
  html[data-estilo="suave"] .reloj-hm { font-size: 44px; letter-spacing: -.035em; }
  html[data-estilo="suave"] .reloj-s { font-size: 18px; }
}
@media (max-width: 720px) {
  html[data-estilo="suave"] :is(.mt-rangos, .mt-pestanas) { flex-wrap: wrap; overflow: visible; }
  html[data-estilo="suave"] :is(.mt-rango, .mt-pestana) { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- Panel 168 · la gráfica no se sale de la tarjeta
   En móviles estrechos, o con la letra del sistema agrandada, la pastilla
   de la tendencia se salía por la derecha y cortaba el «+2». Ahora la
   gráfica se encoge para que la cifra quepa siempre, y si la tarjeta es
   muy estrecha la pastilla pasa debajo del icono, a todo el ancho. */
html[data-estilo="suave"] #inicio-root .kpi { container-type: inline-size; min-width: 0; }
html[data-estilo="suave"] .kpi-cab { min-width: 0; }
html[data-estilo="suave"] .kpi-tend { flex: 0 1 auto; min-width: 0; }
html[data-estilo="suave"] .kpi-tend svg { flex: 0 1 74px; width: 74px; min-width: 34px; height: 28px; }
html[data-estilo="suave"] .kpi-tend b { flex: none; white-space: nowrap; }
@media (max-width: 860px) { html[data-estilo="suave"] .kpi-tend svg { flex-basis: 56px; width: 56px; } }
@container (max-width: 175px) {
  html[data-estilo="suave"] .kpi-cab { flex-wrap: wrap; gap: 8px; }
  html[data-estilo="suave"] .kpi-tend { flex: 1 1 100%; justify-content: space-between; }
  html[data-estilo="suave"] .kpi-tend svg { flex: 1 1 auto; width: auto; max-width: 110px; }
}