/* =====================================================================
   Panel 209 · Estilo «Medianoche».
   ---------------------------------------------------------------------
   Oscuro de verdad (no solo «el tema oscuro»): casi negro, con una aurora
   lenta del color de la consulta detrás y tarjetas de cristal ahumado con
   un filo de luz arriba, como el liquid glass. Para trabajar de tarde y de
   noche: lo que menos cansa la vista. Al elegirlo se enciende el tema
   oscuro (con el botón de arriba se puede volver al claro: entonces se ve
   como «Color»). Avisos: rojo solo con riesgo, ámbar solo si os toca.
   ===================================================================== */

html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] {
  --fondo: #06080E;
  --text-dark: #ECEFF7;
  --text-muted: #9AA3B8;
  --divider: rgba(255, 255, 255, .08);
  --dash-bg: rgba(255, 255, 255, .045);
  --vidrio: rgba(16, 20, 32, .52);
  --vidrio-fuerte: rgba(14, 18, 30, .78);
  --vidrio-borde: rgba(255, 255, 255, .09);
  --vidrio-reflejo: linear-gradient(170deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 38%);
  --clear: rgba(16, 20, 32, .5);
  --filo: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05);
  --sombra-vidrio: var(--filo), 0 24px 50px -28px rgba(0, 0, 0, .9);
  --sombra-flota: var(--filo), 0 30px 70px -30px rgba(0, 0, 0, .95);
  --desenfoque: blur(26px) saturate(160%);
  --luz: color-mix(in oklab, var(--marca) 55%, #fff);       /* el color de la consulta, encendido */
  --marca-texto: var(--luz);
  --t-sesion: var(--luz); --t-despacho: var(--luz); --t-whatsapp: var(--luz);
  --t-pendiente: #F2B35A;
  --t-riesgo: #FF6B6B;
  --accion: color-mix(in oklab, var(--marca) 88%, #fff);
  --accion-oscura: var(--marca);
  --foto-factor: .45; --foto-brillo: .45; --foto-saturacion: .5;
}

/* ---------------------------------------------------------------- la aurora (se mueve muy despacio)
   En una capa aparte (body::after) que solo se desplaza y gira un poco: lo hace la tarjeta gráfica. */
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] body { background: var(--fondo); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] body::after {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 30% at 22% 20%, color-mix(in oklab, var(--marca) 55%, transparent), transparent 70%),
    radial-gradient(36% 26% at 72% 32%, color-mix(in oklab, var(--marca) 30%, #6b4bd8 30%), transparent 70%),
    radial-gradient(42% 30% at 40% 80%, color-mix(in oklab, var(--marca) 26%, #1aa7b8 22%), transparent 72%),
    radial-gradient(30% 24% at 86% 84%, color-mix(in oklab, var(--acento) 30%, transparent), transparent 72%);
  animation: mn-aurora 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mn-aurora {
  0% { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) rotate(6deg) scale(1.08); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(-4deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] body::after { animation: none; }
}

/* ---------------------------------------------------------------- cristal ahumado */
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] :is(.nav-sidebar, .panel, .kpi, .saludo, .cajon,
    .mt-tarjeta, .pl-cifra, .pendientes, .hz-tarjeta, .tabla-wrap),
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] #agenda-root {
  background: var(--vidrio-reflejo), var(--vidrio);
  border-color: var(--vidrio-borde);
  box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] :is(.cajon, #agenda-root, .tabla-wrap) { background: var(--vidrio-reflejo), var(--vidrio-fuerte); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] :is(h1, h2, p, span, b, strong, small, div, a) { text-shadow: none; }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .lista li { background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

/* ---------------------------------------------------------------- Inicio */
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] #inicio-root .kpis .kpi:nth-child(n) { --t: var(--luz); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] #inicio-root .kpis .kpi.aviso:nth-child(n) { --t: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] #inicio-root .kpis .kpi.alerta:nth-child(n) { --t: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi { background: var(--vidrio-reflejo), var(--clear); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi .kpi-valor { color: #fff; text-shadow: 0 0 24px color-mix(in oklab, var(--t, var(--luz)) 45%, transparent); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi.alerta :is(.kpi-valor, .kpi-nombre) { color: var(--t-riesgo); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi.aviso .kpi-valor { color: var(--t-pendiente); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi-icono {
  color: var(--t, var(--luz));
  background: color-mix(in oklab, var(--t, var(--luz)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, var(--luz)) 30%, transparent), 0 0 22px -6px color-mix(in oklab, var(--t, var(--luz)) 70%, transparent);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi-tend { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .kpi .kpi-luz::after { filter: blur(9px); opacity: .95; }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .reloj-hm { text-shadow: 0 0 30px color-mix(in oklab, var(--luz) 35%, transparent); }

/* ---------------------------------------------------------------- menú, botones y controles */
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .nav-item.active {
  background: color-mix(in oklab, var(--marca) 24%, transparent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px color-mix(in oklab, var(--luz) 30%, transparent),
              0 0 26px -10px var(--luz);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .nav-item:hover:not(.active) { background: rgba(255, 255, 255, .05); }
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .btn-primario:not(#view-conversaciones *) {
  background: linear-gradient(180deg, color-mix(in oklab, var(--marca) 80%, #fff 20%), var(--marca));
  border-color: color-mix(in oklab, var(--luz) 60%, transparent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 26px -6px color-mix(in oklab, var(--marca) 80%, transparent);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] :is(.btn-secundario, .btn-peligro):not(#view-conversaciones *) {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--text-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .campo:not(#view-conversaciones *) {
  background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .campo:not(#view-conversaciones *):focus {
  border-color: var(--luz); box-shadow: 0 0 0 3px color-mix(in oklab, var(--luz) 25%, transparent);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] :is(.ag-segmento, .mt-rangos, .mt-pestanas, .reloj-modos, .pa-modos) {
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] :is(.mt-rango.activo, .mt-pestana.activo, .reloj-modos button[aria-pressed="true"], .pa-modo.activo) {
  background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 18px -8px var(--luz);
}

/* ---------------------------------------------------------------- agenda */
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .ag-cita {
  background: color-mix(in oklab, var(--ag-color, var(--marca)) 20%, rgba(14, 18, 30, .92));
  border-color: color-mix(in oklab, var(--ag-color, var(--marca)) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--ag-color, var(--marca)), inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px -14px rgba(0, 0, 0, .9);
}
html[data-estilo="suave"][data-tema="medianoche"][data-theme="dark"] .ag-cab.hoy strong { color: var(--luz); }