/* Ryng — Temas visuales seleccionables
   Aurora (claro, degradados suaves), Noche (dark operación), Pulso (sidebar de marca)
   Mapea los tokens del diseño a las variables ya usadas por el panel.
   Default: aurora si no hay data-ryng-theme en <html>.
*/

/* ============================= 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;

  --success: #12B886;
  --warning: #F59E0B;
  --danger:  #E5484D;
  --info:    #2D6BDB;

  --sidebar-bg:        rgba(255,255,255,0.66);
  --sidebar-fg:        #2D423B;
  --sidebar-border:    rgba(255,255,255,0.9);
  --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;

  --topbar-bg:         rgba(255,255,255,0.65);
  --topbar-fg:         #10241D;

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

  --watermark-opacity: 0.045;
  --watermark-logo:    url('/img/logo.svg');
  --halo:
    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%);
}

/* ============================ 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:            #E4EEEA;
  --text-muted:      #93A69C;
  --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;

  --success: #3FE0A4;
  --warning: #F5B544;
  --danger:  #FF6B6B;
  --info:    #8AB8FF;

  --sidebar-bg:        #0C1915;
  --sidebar-fg:        #A9C2B9;
  --sidebar-border:    rgba(160,230,200,0.07);
  --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;

  --topbar-bg:         rgba(12,25,21,0.78);
  --topbar-fg:         #E4EEEA;

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

  --watermark-opacity: 0.03;
  --watermark-logo:    url('/img/logoDark.svg');
  --halo:
    radial-gradient(600px 360px at 18% -10%, rgba(63,224,164,0.14), transparent 65%),
    radial-gradient(500px 360px at 100% 100%, rgba(245,181,68,0.06), 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;

  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;

  --success: #22C38A;
  --warning: #FFB020;
  --danger:  #E5484D;
  --info:    #3B6FE0;

  --sidebar-bg:        linear-gradient(180deg,#0C8A5F 0%,#086647 55%,#05432F 100%);
  --sidebar-fg:        rgba(255,255,255,0.85);
  --sidebar-border:    transparent;
  --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;

  --topbar-bg:         rgba(255,255,255,0.95);
  --topbar-fg:         #0F1F1A;

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

  --watermark-opacity: 0.04;
  --watermark-logo:    url('/img/logo.svg');
  --halo:
    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%);
}

/* ============== Overrides específicos del tema ============== */

/* Sidebar: usar 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.6; }
.nav a { color: var(--sidebar-fg); }
.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 */
.topbar {
  background: var(--topbar-bg) !important;
  color: var(--topbar-fg) !important;
}

/* Body font + halo + watermark responsive al tema */
body { font-family: var(--font-sans); }
body::before { background-image: var(--watermark-logo); opacity: var(--watermark-opacity); }
body::after  { background: var(--halo); }

/* Logo del sidebar/login: alternar light vs dark */
html[data-ryng-theme="noche"] .sidebar .logo img.light,
html[data-ryng-theme="noche"] .login-card .brand img.light { display: none; }
html:not([data-ryng-theme="noche"]) .sidebar .logo img.dark,
html:not([data-ryng-theme="noche"]) .login-card .brand img.dark { display: none; }

/* Tema pulso: logo en sidebar queda sobre fondo verde → usar dark con R blanca */
html[data-ryng-theme="pulso"] .sidebar .logo img.light { display: none; }
html[data-ryng-theme="pulso"] .sidebar .logo img.dark  { display: block; }
html[data-ryng-theme="pulso"] .sidebar .logo img.light { display: none; }

/* User chip al pie: adaptar al sidebar */
.sidebar .foot, .sidebar .user-chip { background: transparent; color: var(--sidebar-fg); }
.sidebar .logout { color: var(--sidebar-fg); border-color: var(--sidebar-border); background: 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 en user chip: 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(--success);
  border: 2px solid var(--sidebar-bg, var(--surface));
}

/* Theme switcher */
.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;
}