/* Ryng — Temas visuales (Aurora · Turno noche · Pulso)
   Tokens copiados 1:1 de ryng-estilos.html .v-a / .v-n / .v-p.
   Un bloque por tema bajo [data-ryng-theme]. */

/* ============================= AURORA ============================= */
:root,
html[data-ryng-theme="aurora"] {
  --bg:              #EDF5F1;
  --surface:         #FFFFFF;
  --surface-glass:   rgba(255,255,255,0.72);
  --surface-2:       #ECF1EE;
  --border:          rgba(16,36,29,0.08);
  --border-strong:   #DCE8E3;
  --text:            #10241D;
  --text-muted:      #5E726B;
  --text-subtle:     #88A196;

  --brand-50:  #E3F6EE;
  --brand-100: #DDF4EA;
  --brand-200: #B9EBD3;
  --brand-300: #86DBB4;
  --brand-400: #4BCB95;
  --brand-500: #12B886;
  --brand-600: #0A9A6C;
  --brand-700: #067A55;
  --brand-800: #065F46;
  --brand-900: #053F30;

  /* Semánticos sincronizados con la referencia (--ok, --warn, --bad, --info) */
  --ok:         #12B886;
  --ok-strong:  #0A9A6C;
  --success:    #12B886;
  --warning:    #F59E0B;
  --warn:       #F59E0B;
  --danger:     #E5484D;
  --bad:        #E5484D;
  --bad-bg:     #FDECEC;
  --info:       #2D6BDB;

  /* Sidebar */
  --sidebar-bg:        rgba(255,255,255,0.66);
  --sidebar-fg:        #2D423B;
  --sidebar-border:    rgba(255,255,255,0.9);
  --sb-fg:             #2D423B;
  --nav-hover-bg:      rgba(255,255,255,0.5);
  --nav-active-bg:     linear-gradient(135deg,#12B886,#067A55);
  --nav-active-fg:     #fff;
  --nav-active-shadow: 0 8px 18px -8px rgba(6,122,85,0.75);
  --nav-icon-color:    #88A196;
  --nav-icon-hover:    #10241D;
  --nav-icon-active:   #fff;
  --badge-bg:          #E3F6EE;
  --badge-fg:          #067A55;
  --me-bg:             rgba(255,255,255,0.8);
  --av-bg:             #D7F2E6;
  --av-fg:             #067A55;
  --av-ring:           #fff;

  /* Logo (R + yng) */
  --logo:              #0B9467;
  --logo-r:            #0F1F1A;

  /* Topbar / Hero */
  --topbar-bg:         rgba(255,255,255,0.65);
  --topbar-fg:         #10241D;
  --top-fg:            #10241D;
  --hero-fg:           #10241D;
  --hero-fg2:          inherit;
  --line-m:            rgba(16,36,29,0.08);

  /* Pills (topbar / conn / seg) */
  --pill-bg:           rgba(255,255,255,0.75);
  --pill-line:         rgba(255,255,255,0.95);
  --conn-bg:           #DFF5EB;
  --conn-fg:           #067A55;
  --conn-line:         #C3EBD9;
  --seg-bg:            rgba(255,255,255,0.7);
  --seg-line:          #fff;
  --seg-fg:            #40554E;

  /* Cards + iconos */
  --card:              rgba(255,255,255,0.72);
  --card-line:         rgba(255,255,255,0.95);
  --card-sh:           0 14px 34px -16px rgba(6,78,59,0.22);
  --rad:               20px;
  --blur:              12px;
  --ic-bg:             #DDF4EA;
  --ic-fg:             #0A8F63;
  --ic2-bg:            #E0EEFF;
  --ic2-fg:            #2D6BDB;
  --ic3-bg:            #FFF1DA;
  --ic3-fg:            #D98200;
  --chip-bg:           #DDF4EA;
  --chip-fg:           #067A55;

  /* Inputs + botón primario + filas */
  --inp-bg:            rgba(255,255,255,0.9);
  --inp-line:          #DCE8E3;
  --btn-bg:            linear-gradient(135deg,#12B886,#067A55);
  --btn-sh:            0 10px 22px -10px rgba(6,122,85,0.8);
  --row-alt:           rgba(237,245,241,0.8);
  --kpi-bg:            rgba(237,245,241,0.9);

  --font-sans: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fondo decorativo: 4 radiales + grid de puntos */
  --deco:
    radial-gradient(520px 380px at 92% -4%,  rgba(18,184,134,0.32), transparent 65%),
    radial-gradient(520px 420px at 26% 108%, rgba(45,190,212,0.24), transparent 65%),
    radial-gradient(380px 300px at 62% 52%,  rgba(163,230,53,0.12), transparent 65%),
    radial-gradient(rgba(6,78,59,0.07) 1px, transparent 1.2px) 0 0/22px 22px;

  /* Estados de agente — un color distinto por estado, aplicado en badge + anillo del avatar.
     Documentado en RYNG-TEMAS.md §9. */
  --state-available: #12B886;  /* verde — disponible */
  --state-on-call:   #2D6BDB;  /* azul — en llamada  */
  --state-dialing:   #0EA5B5;  /* turquesa — marcando */
  --state-paused:    #F59E0B;  /* ámbar — pausa      */
  --state-wrap-up:   #9333EA;  /* morado — wrap-up   */
  --state-offline:   #88A196;  /* gris — offline     */
}

/* ============================ TURNO NOCHE ========================== */
html[data-ryng-theme="noche"] {
  --bg:              #091310;
  --surface:         #141E1B;
  --surface-glass:   rgba(20,30,27,0.75);
  --surface-2:       #0C1915;
  --border:          rgba(160,230,200,0.09);
  --border-strong:   rgba(160,230,200,0.18);
  --text:            #E2F0EA;
  --text-muted:      #8BA59C;
  --text-subtle:     #6E8580;

  --brand-50:  rgba(63,224,164,0.08);
  --brand-100: rgba(63,224,164,0.12);
  --brand-200: rgba(63,224,164,0.2);
  --brand-300: #19B87E;
  --brand-400: #22C38A;
  --brand-500: #3FE0A4;
  --brand-600: #3FE0A4;
  --brand-700: #6CF0BE;
  --brand-800: #86F2CC;
  --brand-900: #B8F5D9;

  --ok:         #3FE0A4;
  --ok-strong:  #19B87E;
  --success:    #3FE0A4;
  --warning:    #F5B544;
  --warn:       #F5B544;
  --danger:     #FF6B6B;
  --bad:        #FF6B6B;
  --bad-bg:     rgba(255,107,107,0.12);
  --info:       #8AB8FF;

  --sidebar-bg:        #0C1915;
  --sidebar-fg:        #A9C2B9;
  --sidebar-border:    rgba(160,230,200,0.07);
  --sb-fg:             #A9C2B9;
  --nav-hover-bg:      rgba(255,255,255,0.04);
  --nav-active-bg:     rgba(63,224,164,0.12);
  --nav-active-fg:     #6CF0BE;
  --nav-active-shadow: inset 0 0 0 1px rgba(63,224,164,0.22);
  --nav-icon-color:    #6E8580;
  --nav-icon-hover:    #E4EEEA;
  --nav-icon-active:   #3FE0A4;
  --badge-bg:          rgba(245,181,68,0.16);
  --badge-fg:          #F5B544;
  --me-bg:             rgba(255,255,255,0.04);
  --av-bg:             #143229;
  --av-fg:             #6CF0BE;
  --av-ring:           #0C1915;

  --logo:              #3FE0A4;
  --logo-r:            #F1FAF6;

  --topbar-bg:         rgba(12,25,21,0.78);
  --topbar-fg:         #E2F0EA;
  --top-fg:            #E2F0EA;
  --hero-fg:           #F1FAF6;
  --hero-fg2:          inherit;
  --line-m:            rgba(160,230,200,0.08);

  --pill-bg:           rgba(255,255,255,0.04);
  --pill-line:         rgba(160,230,200,0.09);
  --conn-bg:           rgba(63,224,164,0.08);
  --conn-fg:           #6CF0BE;
  --conn-line:         rgba(63,224,164,0.25);
  --seg-bg:            rgba(255,255,255,0.03);
  --seg-line:          rgba(160,230,200,0.09);
  --seg-fg:            #A9C2B9;

  --card:              linear-gradient(180deg,rgba(20,40,34,0.85),rgba(13,27,23,0.85));
  --card-line:         rgba(160,230,200,0.09);
  --card-sh:           0 20px 40px -24px rgba(0,0,0,0.8);
  --rad:               16px;
  --blur:              0px;
  --ic-bg:             rgba(63,224,164,0.1);
  --ic-fg:             #4FE8AE;
  --ic2-bg:            rgba(110,168,255,0.12);
  --ic2-fg:            #8AB8FF;
  --ic3-bg:            rgba(245,181,68,0.12);
  --ic3-fg:            #F5B544;
  --chip-bg:           rgba(63,224,164,0.1);
  --chip-fg:           #6CF0BE;

  --inp-bg:            #0B1714;
  --inp-line:          rgba(160,230,200,0.12);
  --btn-bg:            linear-gradient(135deg,#1FC88A,#0E8F60);
  --btn-sh:            0 0 0 1px rgba(63,224,164,0.3),0 12px 26px -12px rgba(63,224,164,0.6);
  --row-alt:           rgba(255,255,255,0.025);
  --kpi-bg:            rgba(255,255,255,0.035);

  --font-sans: 'Sora', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fondo: 2 radiales + rejilla 36×36 */
  --deco:
    radial-gradient(600px 360px at 18% -10%, rgba(63,224,164,0.16), transparent 65%),
    radial-gradient(500px 360px at 100% 100%, rgba(245,181,68,0.07), transparent 65%),
    linear-gradient(rgba(160,230,200,0.035) 1px, transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg, rgba(160,230,200,0.035) 1px, transparent 1px) 0 0/36px 36px;

  /* Estados de agente — tonos más brillantes para fondo oscuro */
  --state-available: #3FE0A4;
  --state-on-call:   #8AB8FF;
  --state-dialing:   #6CE0F0;
  --state-paused:    #F5B544;
  --state-wrap-up:   #BB73F0;
  --state-offline:   #6E8580;

  color-scheme: dark;
}

/* ============================== PULSO ============================== */
html[data-ryng-theme="pulso"] {
  --bg:              #F3F6F5;
  --surface:         #FFFFFF;
  --surface-glass:   rgba(255,255,255,0.95);
  --surface-2:       #F5F8F7;
  --border:          #E6EDEA;
  --border-strong:   #D4E0DA;
  --text:            #0F1F1A;
  --text-muted:      #61736D;
  --text-subtle:     #8B9D96;

  --brand-50:  #E2F6EE;
  --brand-100: #CDEFDE;
  --brand-200: #A6E3C4;
  --brand-300: #6ED3A2;
  --brand-400: #34B47F;
  --brand-500: #0C8A5F;
  --brand-600: #0B9467;
  --brand-700: #076345;
  --brand-800: #05432F;
  --brand-900: #032D20;

  --ok:         #22C38A;
  --ok-strong:  #0B9467;
  --success:    #22C38A;
  --warning:    #FFB020;
  --warn:       #FFB020;
  --danger:     #E5484D;
  --bad:        #E5484D;
  --bad-bg:     #FDECEC;
  --info:       #3B6FE0;

  --sidebar-bg:        linear-gradient(180deg,#0C8A5F 0%,#086647 55%,#05432F 100%);
  --sidebar-fg:        rgba(255,255,255,0.85);
  --sidebar-border:    transparent;
  --sb-fg:             rgba(255,255,255,0.8);
  --nav-hover-bg:      rgba(255,255,255,0.08);
  --nav-active-bg:     #ffffff;
  --nav-active-fg:     #076345;
  --nav-active-shadow: 0 10px 22px -10px rgba(0,0,0,0.45);
  --nav-icon-color:    rgba(255,255,255,0.7);
  --nav-icon-hover:    #fff;
  --nav-icon-active:   #076345;
  --badge-bg:          rgba(255,255,255,0.18);
  --badge-fg:          #fff;
  --me-bg:             rgba(255,255,255,0.1);
  --av-bg:             #fff;
  --av-fg:             #076345;
  --av-ring:           #086647;

  --logo:              #fff;
  --logo-r:            #B8F5D9;

  /* Hero + topbar van sobre franja verde → texto blanco */
  --topbar-bg:         transparent;
  --topbar-fg:         #fff;
  --top-fg:            #fff;
  --hero-fg:           #fff;
  --hero-fg2:          #fff;
  --line-m:            rgba(255,255,255,0.18);

  --pill-bg:           rgba(255,255,255,0.14);
  --pill-line:         rgba(255,255,255,0.2);
  --conn-bg:           rgba(255,255,255,0.16);
  --conn-fg:           #fff;
  --conn-line:         rgba(255,255,255,0.28);
  /* Segmented por default es "dentro de tarjeta": fondo claro, texto oscuro.
     Para franja Pulso existe la variante .seg--on-strip definida abajo. */
  --seg-bg:            #F5F8F7;
  --seg-line:          #E1E9E6;
  --seg-fg:            #40554E;

  --card:              #fff;
  --card-line:         #E6EDEA;
  --card-sh:           0 18px 36px -22px rgba(5,67,47,0.35);
  --rad:               18px;
  --blur:              0px;
  --ic-bg:             #E2F6EE;
  --ic-fg:             #0B9467;
  --ic2-bg:            #E6EEFF;
  --ic2-fg:            #3B6FE0;
  --ic3-bg:            #FFF2DC;
  --ic3-fg:            #D98200;
  --chip-bg:           #E2F6EE;
  --chip-fg:           #0B7A55;

  --inp-bg:            #F5F8F7;
  --inp-line:          #E1E9E6;
  --btn-bg:            #0B9467;
  --btn-sh:            0 10px 20px -10px rgba(11,148,103,0.8);
  --row-alt:           #F5F8F7;
  --kpi-bg:            #F5F8F7;

  --font-sans: 'Manrope', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fondo discreto; la franja decorativa va aparte en .main::before (ver abajo) */
  --deco:
    radial-gradient(520px 380px at 88% 12%, rgba(11,148,103,0.08), transparent 65%),
    radial-gradient(500px 420px at 10% 100%, rgba(11,148,103,0.05), transparent 65%);

  /* Estados de agente */
  --state-available: #22C38A;
  --state-on-call:   #3B6FE0;
  --state-dialing:   #0EA5B5;
  --state-paused:    #FFB020;
  --state-wrap-up:   #8B5CF6;
  --state-offline:   #8B9D96;
}

/* ============== Overrides globales (todas las temas) ============== */

body { font-family: var(--font-sans); }

/* Fondo global: cada tema aplica su --deco. Sin watermark de logo. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--deco);
  pointer-events: none;
  z-index: 0;
}
body::before { display: none; } /* eliminar watermark gigante del logo */

/* Sidebar hereda tokens de tema */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right-color: var(--sidebar-border) !important;
  color: var(--sidebar-fg);
}
.sidebar .nav-section-title { color: var(--sidebar-fg); opacity: 0.55; letter-spacing: 0.13em; font-weight: 700; }
.nav a { color: var(--sidebar-fg); font-weight: 600; }
.nav a .nav-icon { color: var(--nav-icon-color); }
.nav a:hover { background: var(--nav-hover-bg); color: var(--sidebar-fg); }
.nav a:hover .nav-icon { color: var(--nav-icon-hover); }
.nav a.active {
  background: var(--nav-active-bg) !important;
  color: var(--nav-active-fg) !important;
  box-shadow: var(--nav-active-shadow);
}
.nav a.active .nav-icon { color: var(--nav-icon-active); }

/* Topbar hereda tokens; en Pulso vuelve transparente para que se vea la franja */
.topbar {
  background: var(--topbar-bg) !important;
  color: var(--topbar-fg) !important;
  border-bottom-color: var(--line-m) !important;
}
.topbar .topbar-greet,
.topbar .topbar-greet strong,
.topbar .topbar-time,
.topbar .topbar-time .mono { color: var(--topbar-fg) !important; }
.topbar .topbar-time { opacity: 0.85; }
/* Pills del topbar (search / bell / date): también heredan el fg del tema */
.topbar .pill, .topbar .pill .muted { color: var(--topbar-fg) !important; }
.topbar .pill-icon { color: var(--topbar-fg) !important; }

/* Pulso: labels de secciones del sidebar más legibles sobre verde oscuro */
html[data-ryng-theme="pulso"] .sidebar .nav-section-title { opacity: 0.75; }
/* Pulso: footer del admin (nombre + Apariencia + Cerrar sesión) debe ser blanco */
html[data-ryng-theme="pulso"] .sidebar .user-name,
html[data-ryng-theme="pulso"] .sidebar .user-role { color: #fff; }

/* Pulso: aviso de seguridad en API Docs necesita fondo sólido para legibilidad
   sobre la franja verde. Blanco con borde ámbar y sombra; íconos en ámbar. */
html[data-ryng-theme="pulso"] .api-security-notice {
  background: #FFFBF2 !important;
  border: 1px solid #FFB020 !important;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.35);
}
html[data-ryng-theme="pulso"] .api-security-notice .api-security-title { color: #5C3900; }
html[data-ryng-theme="pulso"] .api-security-notice .api-security-body { color: #6B4A1F; }
html[data-ryng-theme="pulso"] .api-security-notice .api-security-body strong { color: #3F2800; }
html[data-ryng-theme="pulso"] .api-security-notice .api-security-icon { color: #B8710F; }

/* Logo oficial SVG recortado (sin margen transparente) — swap por tema.
   Nunca se recrea como texto. Originales viven en /img/*.svg sin modificar.
   - Aurora:   logotipo-crop.svg (verde oficial)
   - Noche:    logotipoDark-crop.svg (silueta multicolor; rect de fondo ya quitado)
   - Pulso:    logotipo-crop.svg con filter blanco (brightness(0) invert(1))
   - .brand-mark (sidebar colapsado futuro): logo-crop.svg / logoDark-crop.svg
*/
.brand-logo { display: block; width: auto; }

html[data-ryng-theme="noche"] .brand-full { content: url('/img/logotipoDark-crop.svg'); }
html[data-ryng-theme="noche"] .brand-mark { content: url('/img/logoDark-crop.svg'); }

html[data-ryng-theme="pulso"] .brand-full,
html[data-ryng-theme="pulso"] .brand-mark {
  filter: brightness(0) invert(1);
}
/* Pulso: en el login la card es blanca (surface=#FFFFFF), un logo blanco
   quedaría invisible. Dejamos el logo original (verde marca) sólo acá. */
html[data-ryng-theme="pulso"] .login-card .brand-full,
html[data-ryng-theme="pulso"] .login-card .brand-mark {
  filter: none;
}

/* Login card: centrar y dar aire */
.login-card .brand .brand-logo { margin: 0 auto; }

/* User chip al pie: todo texto hereda sidebar-fg (fix contraste Pulso) */
.sidebar .foot, .sidebar .user-chip { background: transparent; color: var(--sidebar-fg); }
.sidebar .user-name { color: var(--sidebar-fg); }
.sidebar .user-role { color: var(--sidebar-fg); opacity: 0.7; }
.sidebar .avatar { background: var(--av-bg); color: var(--av-fg); }
.sidebar .logout {
  color: var(--sidebar-fg);
  background: transparent;
  border-color: color-mix(in srgb, var(--sidebar-fg) 25%, transparent);
  display: flex; align-items: center; gap: 8px;
}
.sidebar .logout svg { pointer-events: none; flex-shrink: 0; }
.sidebar .logout:hover { background: var(--nav-hover-bg); }
html[data-ryng-theme="noche"] .sidebar .logout:hover { background: rgba(255,107,107,0.1); color: #FF6B6B; border-color: rgba(255,107,107,0.3); }

/* Avatar: punto de estado (verde = disponible) */
.sidebar .avatar { position: relative; }
.sidebar .avatar::after {
  content: '';
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--av-ring);
}

/* ============== Pulso: franja decorativa de cabecera ============== */
/* La franja ocupa el ancho del área principal, altura 300px, con 3 anillos
   decorativos y el corner inferior-izquierdo redondeado. */
html[data-ryng-theme="pulso"] .main { position: relative; }
html[data-ryng-theme="pulso"] .main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
  background:
    radial-gradient(circle at 88% 30%, rgba(255,255,255,0.14) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 30%, transparent 0 150px, rgba(255,255,255,0.08) 151px 152px, transparent 153px),
    radial-gradient(circle at 88% 30%, transparent 0 220px, rgba(255,255,255,0.06) 221px 222px, transparent 223px),
    linear-gradient(115deg,#13A774 0%,#0B8A5F 50%,#0E7A6E 100%);
  border-radius: 0 0 0 36px;
  pointer-events: none;
  z-index: 0;
}
html[data-ryng-theme="pulso"] .main > * { position: relative; z-index: 1; }
/* Para que el borde inferior de la topbar no corte la franja */
html[data-ryng-theme="pulso"] .topbar { border-bottom: 0 !important; }

/* ----- Pulso: contraste en elementos que caen sobre la franja ----- */
/* La franja ocupa los primeros ~300px. Caen sobre ella típicamente:
   .page-head (primitivo Fase 3), .view-head (legacy), .section-label,
   la fila .row directa después del header, y agent-notices-slot.
   Texto va blanco; botones primarios se invierten (blanco con texto verde),
   como en la referencia .v-p .hero .btn2. */
/* Blanco solo sobre franja: page-head/view-head directos + elementos marcados
   explícitamente con --on-strip (row del segmented en Mi panel, section-label si
   la hubiera dentro de la zona franja). Las .section-label normales usan color
   de texto del tema. */
html[data-ryng-theme="pulso"] #main > .page-head,
html[data-ryng-theme="pulso"] #main > .page-head *,
html[data-ryng-theme="pulso"] #main > .view-head,
html[data-ryng-theme="pulso"] #main > .view-head *,
html[data-ryng-theme="pulso"] #main > .section-label--on-strip,
html[data-ryng-theme="pulso"] #main > .row--on-strip--on-strip,
html[data-ryng-theme="pulso"] #main > .row--on-strip--on-strip * {
  color: #fff;
}
/* Subtítulos y secundarios al 80% para jerarquía visual */
html[data-ryng-theme="pulso"] #main > .page-head .page-sub,
html[data-ryng-theme="pulso"] #main > .page-head .muted,
html[data-ryng-theme="pulso"] #main > .view-head .view-sub,
html[data-ryng-theme="pulso"] #main > .view-head .muted,
html[data-ryng-theme="pulso"] #main > .section-label--on-strip {
  color: rgba(255,255,255,0.8);
}
/* Tags/badges muted sobre franja → pills translúcidas blancas */
html[data-ryng-theme="pulso"] #main > .page-head .tag,
html[data-ryng-theme="pulso"] #main > .page-head .tag.muted,
html[data-ryng-theme="pulso"] #main > .view-head .tag,
html[data-ryng-theme="pulso"] #main > .view-head .tag.muted,
html[data-ryng-theme="pulso"] #main > .row--on-strip .tag,
html[data-ryng-theme="pulso"] #main > .row--on-strip .tag.muted {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
/* Botones sobre franja: primary → blanco con texto verde oscuro; ghost → línea blanca */
html[data-ryng-theme="pulso"] #main > .page-head .btn,
html[data-ryng-theme="pulso"] #main > .view-head .btn,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  font-weight: 600;
}
html[data-ryng-theme="pulso"] #main > .page-head .btn:hover,
html[data-ryng-theme="pulso"] #main > .view-head .btn:hover,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.65);
}
html[data-ryng-theme="pulso"] #main > .page-head .btn.primary,
html[data-ryng-theme="pulso"] #main > .view-head .btn.primary,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn.primary {
  background: #fff;
  color: #076345;
  border-color: #fff;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.4);
  font-weight: 700;
}
html[data-ryng-theme="pulso"] #main > .page-head .btn.primary:hover,
html[data-ryng-theme="pulso"] #main > .view-head .btn.primary:hover,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn.primary:hover {
  background: #F5F8F7;
  border-color: #F5F8F7;
}
/* Primary disabled sobre franja: no atenuar visualmente (ref .v-p .hero .btn2). */
html[data-ryng-theme="pulso"] #main > .page-head .btn.primary:disabled,
html[data-ryng-theme="pulso"] #main > .view-head .btn.primary:disabled,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn.primary:disabled {
  opacity: 1;
  cursor: default;
}
html[data-ryng-theme="pulso"] #main > .page-head .btn.danger,
html[data-ryng-theme="pulso"] #main > .view-head .btn.danger,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn.danger {
  background: rgba(255,255,255,0.95);
  color: #B3261E;
  border-color: rgba(255,255,255,0.95);
}
html[data-ryng-theme="pulso"] #main > .page-head .btn.ghost,
html[data-ryng-theme="pulso"] #main > .view-head .btn.ghost,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
}
html[data-ryng-theme="pulso"] #main > .row--on-strip > select.btn {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
html[data-ryng-theme="pulso"] #main > .row--on-strip > select.btn option { color: #0F1F1A; background: #fff; }

/* Dentro de los botones sobre franja, los <span>/<svg> hijos deben heredar el
   color del botón (verde o rojo), NO el blanco cascada de .page-head *. */
html[data-ryng-theme="pulso"] #main > .page-head .btn *,
html[data-ryng-theme="pulso"] #main > .view-head .btn *,
html[data-ryng-theme="pulso"] #main > .row--on-strip > .btn * {
  color: inherit;
}

/* Pulso: conn-pill sobre franja → pill blanco translúcido uniforme (el dot muestra el estado).
   Esto evita texto blanco sobre fondo rojo claro cuando .conn-pill--danger se mezcla con el
   override de .page-head * { color: #fff }. */
html[data-ryng-theme="pulso"] #main > .page-head .conn-pill {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #fff !important;
}

/* Pulso: SegmentedControl variante onStrip (sobre franja verde) → translúcido blanco,
   opción activa en blanco sólido con texto verde (coincide con la ref .v-p .seg .s.on).
   Especificidad reforzada con #main para ganarle al override de .row * color:#fff. */
html[data-ryng-theme="pulso"] #main .seg--on-strip {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}
html[data-ryng-theme="pulso"] #main .seg--on-strip .seg-opt,
html[data-ryng-theme="pulso"] #main .seg--on-strip .seg-opt * {
  color: #fff;
}
html[data-ryng-theme="pulso"] #main .seg--on-strip .seg-opt.on,
html[data-ryng-theme="pulso"] #main .seg--on-strip .seg-opt.on * {
  background-color: #fff;
  color: #076345;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.35);
}
html[data-ryng-theme="pulso"] #main .seg--on-strip .seg-opt.on {
  background: #fff;
}

/* Topbar en Pulso: la fecha + reloj se montan sobre la franja → full blanco sin opacity */
html[data-ryng-theme="pulso"] .topbar-time { opacity: 1; color: #fff; }
html[data-ryng-theme="pulso"] .topbar-time .mono { color: #fff; }
html[data-ryng-theme="pulso"] .topbar-greet,
html[data-ryng-theme="pulso"] .topbar-greet strong { color: #fff; }

/* ============== Theme switcher (modal) ============== */
.theme-switcher-modal { display: grid; gap: 10px; }
.theme-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color 0.1s, background 0.1s;
}
.theme-option:hover { border-color: var(--brand-600); background: var(--surface-2); }
.theme-option.active { border-color: var(--brand-600); background: var(--brand-50); }
.theme-option .swatch {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--border);
}
.theme-option .swatch.aurora { background: linear-gradient(135deg,#12B886,#7DD3FC); }
.theme-option .swatch.noche  { background: #0C1915; box-shadow: inset 0 0 0 2px #3FE0A4; }
.theme-option .swatch.pulso  { background: linear-gradient(180deg,#0C8A5F,#05432F); }
.theme-option .meta strong { display: block; font-size: 13px; }
.theme-option .meta small { color: var(--text-muted); font-size: 11px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar .avatar::after { animation: none !important; }
}

/* ================= Modales ================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 13, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.modal-backdrop .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
  min-width: 320px;
  max-width: 92vw;
  max-height: 92vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.modal-backdrop .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-backdrop .modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.modal-backdrop .modal-head .x {
  background: transparent;
  border: 0;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.modal-backdrop .modal-head .x:hover { color: var(--text); }
.modal-backdrop .modal-body { padding: 16px 18px; }
.modal-backdrop .modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.modal-backdrop .modal input[type="text"],
.modal-backdrop .modal input[type="number"],
.modal-backdrop .modal input[type="password"],
.modal-backdrop .modal input[type="date"],
.modal-backdrop .modal input[type="datetime-local"],
.modal-backdrop .modal textarea,
.modal-backdrop .modal select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}