/* ════════════════════════════════════════════════════════════════
   SGC — Lumina Culture Design System (claro / oscuro)
   Basado en el sistema de diseño del proyecto Stitch.
   ════════════════════════════════════════════════════════════════ */

/* Self-hosted Hanken Grotesk — avoids blocked Google Fonts request */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2020, U+2022, U+2026, U+2030, U+2039-203A, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted Material Symbols Outlined — icon font (CSP-safe, no external CDN) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ────────────────────────────────────────────────────────────────
   TEMA CLARO — base (fuente de verdad única)
   Los bloques :root de cada módulo HTML han sido eliminados.
   Los estilos glass de cada módulo pueden sobreescribir valores
   puntuales; todo lo demás cae aquí.
   ──────────────────────────────────────────────────────────────── */
:root{
  /* Fondos */
  --bg:#fef7ff;
  --surface:#FFFFFF;
  --surface-blur:rgba(255,255,255,0.78);
  --card:rgba(255,255,255,0.80);

  /* Bordes y separadores */
  --border:rgba(0,0,0,0.08);
  --border-soft:rgba(0,0,0,0.04);
  --border-med:rgba(0,0,0,0.12);
  --border-strong:rgba(0,0,0,0.18);
  --sep:rgba(0,0,0,0.05);
  --fill:rgba(0,0,0,0.04);
  --fill-hover:rgba(0,0,0,0.06);

  /* Texto */
  --text:#1C1C1E;
  --text-sec:#48484A;
  --text-soft:#6C6C70;
  --muted:#6C6C70;
  --muted-light:#AEAEB2;

  /* Acento principal — Purple */
  --azul:#7c3aed;
  --azul-dark:#4d13c8;
  --azul-soft:rgba(124,58,237,0.10);
  --azul-glow:rgba(124,58,237,0.24);
  --primary:#7c3aed;
  --primary-hover:#4d13c8;
  --primary-soft:rgba(124,58,237,0.10);

  /* Secundario */
  --teal:#005b68;
  --teal-soft:rgba(0,91,104,0.10);

  /* Estados semánticos */
  --rojo:#A0001C;    --danger:#A0001C;    --danger-soft:rgba(160,0,28,0.10);
  --verde:#007757;   --success:#007757;
  --verde-light:#00a882;
  --oro:#B8861E;     --warn:#C8922A;      --warning:#C8922A;
  --violeta:#7c3aed;
  --naranja:#C06010;
  --teacher:#7c3aed;
  --rooms:#005b68;

  /* Sombras */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.05);
  --shadow:0 2px 8px rgba(0,0,0,0.06),0 8px 28px rgba(0,0,0,0.08);
  --shadow-md:0 4px 14px rgba(0,0,0,0.07);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.06);
  --shadow-pop:0 20px 60px rgba(0,0,0,0.14),0 4px 16px rgba(0,0,0,0.08);

  /* Geometría */
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --radius-lg:16px;

  color-scheme:light;
}

/* Transición suave al alternar tema */
html[data-theme] body,
html[data-theme] .card,
html[data-theme] .chart-card,
html[data-theme] .kpi,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ────────────────────────────────────────────────────────────────
   TEMA OSCURO — Lumina Culture (dark)
   Paleta: Deep Navy + Electric Purple + Cyan + Mint
   ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  /* Fondos — Deep Navy Canvas */
  --bg:#0b0e14;
  --bg-soft:#10131a;
  --surface:#1d2026;
  --surface-blur:rgba(13,16,24,0.88);
  --card:rgba(30,36,51,0.40);

  /* Bordes y separadores */
  --border:rgba(255,255,255,0.08);
  --border-soft:rgba(255,255,255,0.05);
  --border-med:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.20);
  --sep:rgba(255,255,255,0.04);
  --fill:rgba(255,255,255,0.05);
  --fill-hover:rgba(255,255,255,0.09);

  /* Texto */
  --text:#e1e2eb;
  --text-sec:#cac3d8;
  --text-soft:#a09aac;
  --muted:#948ea1;
  --muted-light:#827c94;

  /* Acento principal — Electric Purple */
  --azul:#7047eb;
  /* #4d13c8 (mismo valor que en claro) daba 2.06:1 contra el fondo oscuro — nunca se
     adaptó al tema oscuro. La mayoría de sus usos son texto sobre fondo oscuro, así que
     se aclara para eso (un uso puntual como fondo de hover con texto blanco queda algo
     más claro de lo ideal, pero es un estado transitorio, no texto estático). */
  --azul-dark:#968cdc;
  --azul-soft:rgba(112,71,235,0.16);
  --azul-glow:rgba(112,71,235,0.32);
  --primary:#ccbdff;
  --primary-hover:#7047eb;
  --primary-soft:rgba(204,189,255,0.16);

  /* Secundario — Cyan */
  --teal:#00daf6;
  --teal-soft:rgba(0,218,246,0.14);

  /* Estados semánticos */
  --rojo:#ffb4ab;       --danger:#ffb4ab;    --danger-soft:rgba(255,180,171,0.16);
  --verde:#35dfaa;      --success:#35dfaa;
  --verde-light:#5dfdc5;
  --oro:#e0c56b;        --warn:#e0c56b;      --warning:#e0c56b;
  --violeta:#ccbdff;
  --naranja:#ffb86c;
  --teacher:#ccbdff;
  --rooms:#00daf6;

  /* Sombras */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.34);
  --shadow:0 2px 10px rgba(0,0,0,0.46),0 10px 30px rgba(0,0,0,0.40);
  --shadow-md:0 6px 22px rgba(0,0,0,0.48);
  --shadow-lg:0 12px 44px rgba(0,0,0,0.55);
  --shadow-pop:0 24px 64px rgba(0,0,0,0.62);

  color-scheme:dark;
}

/* ────────────────────────────────────────────────────────────────
   TEMA OSCURO — overrides puntuales
   ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body{
  background:var(--bg);
  color:var(--text);
  font-family:'Hanken Grotesk','Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}

/* Fuente en titulares — Hanken Grotesk reemplaza Playfair Display */
html[data-theme="dark"] .header-text h1,
html[data-theme="dark"] .app-title,
html[data-theme="dark"] .mod-title,
html[data-theme="dark"] .panel-head h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6{
  font-family:'Hanken Grotesk','Source Sans 3',sans-serif !important;
  color:var(--text) !important;
  letter-spacing:-0.01em;
}

/* Franja de encabezado — Purple-to-Cyan gradient */
html[data-theme="dark"] .header-stripe,
html[data-theme="dark"] .app-stripe,
html[data-theme="dark"] .flag-stripe{
  background:linear-gradient(90deg,#7047eb,#00daf6) !important;
  opacity:1 !important;
}

/* Inputs / selects / textareas */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background-color:rgba(30,36,51,0.6) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:var(--muted-light) !important; }
html[data-theme="dark"] option{ background:#191c22; color:var(--text); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  background-color:rgba(30,36,51,0.8) !important;
  border-color:#7047eb !important;
  box-shadow:0 0 0 3px rgba(112,71,235,0.22) !important;
}
html[data-theme="dark"] select{
  background:rgba(30,36,51,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23948ea1' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center/12px 12px !important;
  /* sin appearance:none el navegador dibuja su flecha nativa encima de la SVG (doble chevrón
     en páginas que no cargan glass.css) */
  appearance:none !important;
  -webkit-appearance:none !important;
  padding-right:28px !important;
}

/* Fondos blancos hardcodeados */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background:white"]{
  background:var(--surface) !important;
}

/* Tarjetas y superficies */
html[data-theme="dark"] .card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .doc-header-card,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .rec-item,
html[data-theme="dark"] .cl-row,
html[data-theme="dark"] .teacher-row,
html[data-theme="dark"] .panel{
  background:var(--card) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  border-color:var(--border) !important;
  color:var(--text);
}

/* Encabezados de tarjeta */
html[data-theme="dark"] .cc-head,
html[data-theme="dark"] .card-head,
html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .section-head{
  background:rgba(255,255,255,0.04) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .card-head h2,
html[data-theme="dark"] .panel-head h2,
html[data-theme="dark"] .section-head h2{ color:var(--text) !important; }

/* Botones / chips con fondo blanco */
html[data-theme="dark"] .btn-refresh,
html[data-theme="dark"] .subtab,
html[data-theme="dark"] .hamburger,
html[data-theme="dark"] .btn-logout,
html[data-theme="dark"] .mb-mark{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}

/* Tabs activos */
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .ctab.active{
  background:rgba(112,71,235,0.14) !important;
  color:#ccbdff !important;
}

/* Barra de tabs */
html[data-theme="dark"] .clases-tabs{
  background:rgba(255,255,255,0.03) !important;
  border-color:var(--border) !important;
}

/* Tablas */
html[data-theme="dark"] table th,
html[data-theme="dark"] thead tr{ background:rgba(255,255,255,0.04) !important; color:var(--text-sec) !important; border-color:var(--border) !important; }
html[data-theme="dark"] table td{ border-color:var(--sep) !important; color:var(--text); }

/* Sidebar / header glass */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .mobile-bar,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .mod-header,
html[data-theme="dark"] .shell-header,
html[data-theme="dark"] .top-bar,
html[data-theme="dark"] .top,
html[data-theme="dark"] .save-bar,
html[data-theme="dark"] .action-bar{
  background:rgba(13,16,24,0.88) !important;
  backdrop-filter:saturate(160%) blur(24px) !important;
  -webkit-backdrop-filter:saturate(160%) blur(24px) !important;
  border-color:var(--border) !important;
}

/* Modales */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .overlay-content,
html[data-theme="dark"] .rec-list,
html[data-theme="dark"] .records-list,
html[data-theme="dark"] .list-wrap,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .btn-clear{
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--text);
}

/* Banners de alerta */
html[data-theme="dark"] .alert-banner{
  background:var(--surface) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .alert-banner.ok{
  background:rgba(53,223,170,0.10) !important;
  border-color:rgba(53,223,170,0.35) !important;
}
html[data-theme="dark"] .alert-banner.warn{
  background:rgba(224,197,107,0.10) !important;
  border-color:rgba(224,197,107,0.35) !important;
}
html[data-theme="dark"] .alert-banner .alert-title,
html[data-theme="dark"] .alert-banner .alert-desc,
html[data-theme="dark"] .alert-banner .ab-text p{ color:var(--text); }

/* Botones/badges "peligro"/"primario" con fondo sólido + texto blanco: en oscuro, --rojo
   y --azul pasan a versiones pastel pensadas para texto legible sobre fondo oscuro, no
   para ser fondo sólido con texto blanco encima (1.7-1.9:1 de contraste — casi invisible).
   Se fuerzan tonos saturados aparte, solo para estos casos de fondo sólido.
   NOTA: .btn.danger NO va aquí — el mismo nombre de clase es un botón sólido en algunas
   páginas (mod_inventario, mod_usuarios) pero un botón "outline"/translúcido en otras
   (mod_auditoria, mod_docentes, mod_operaciones, cada una con su propio ajuste de oscuro
   ya correcto); una regla global aquí forzaría fondo sólido también donde nunca lo hubo.
   Se corrige página por página. */
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .aa-remove,
html[data-theme="dark"] .tab .badge{
  background:#b91c1c !important;
}
html[data-theme="dark"] .attach-btn,
html[data-theme="dark"] .aa-view,
html[data-theme="dark"] .tab-badge,
html[data-theme="dark"] .fil-pill.active,
html[data-theme="dark"] .cal-day.is-today .day-num{
  background:#5b3ed6 !important;
}
/* .subtab.active NO va aquí: en index.html el mismo nombre de clase usa gradientes
   distintos por sección a propósito ("Active subtabs keep their gradient") — se corrige
   solo en mod_inventario.html, donde sí es un fondo azul plano. */

/* Banner de advertencia */
html[data-theme="dark"] .warn-banner{
  background:rgba(224,197,107,0.10) !important;
  border-color:rgba(224,197,107,0.30) !important;
  color:#e0c56b !important;
}

/* Code box */
html[data-theme="dark"] .code-box{
  background:rgba(112,71,235,0.10) !important;
  border-left-color:#7047eb !important;
}
html[data-theme="dark"] .code-box,
html[data-theme="dark"] .code-box *{ color:var(--text); }

/* Sub-paneles */
html[data-theme="dark"] .att-date-bar,
html[data-theme="dark"] .att-obs,
html[data-theme="dark"] .attach-item,
html[data-theme="dark"] .avail-time,
html[data-theme="dark"] .cal-day,
html[data-theme="dark"] .cal-dow,
html[data-theme="dark"] .conditional,
html[data-theme="dark"] .course-item,
html[data-theme="dark"] .disc-check,
html[data-theme="dark"] .doc-modal-foot,
html[data-theme="dark"] .doc-modal-head,
html[data-theme="dark"] .emer-item,
html[data-theme="dark"] .fld,
html[data-theme="dark"] .head-naranja,
html[data-theme="dark"] .head-oro,
html[data-theme="dark"] .head-rojo,
html[data-theme="dark"] .head-verde,
html[data-theme="dark"] .head-violeta,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .other-month,
html[data-theme="dark"] .photo-frame,
html[data-theme="dark"] .rec-search-wrap,
html[data-theme="dark"] .records-head,
html[data-theme="dark"] .search-inp,
html[data-theme="dark"] .week-event-card{
  background:rgba(255,255,255,0.04) !important;
  border-color:var(--border) !important;
  color:var(--text);
}

/* Textos con color oscuro hardcodeado */
html[data-theme="dark"] .user-name,
html[data-theme="dark"] .app-title,
html[data-theme="dark"] .topbar-title,
html[data-theme="dark"] .mb-title,
html[data-theme="dark"] .mant-card-title,
html[data-theme="dark"] .wec-title,
html[data-theme="dark"] .cal-nav-month,
html[data-theme="dark"] .wdl-date,
html[data-theme="dark"] .week-day-label .wdl-date,
html[data-theme="dark"] .wh-left .wh-title,
html[data-theme="dark"] .kpi .k-val,
html[data-theme="dark"] .kpi .val,
html[data-theme="dark"] .res-kpi .rv,
html[data-theme="dark"] .doc-info-sm .name,
html[data-theme="dark"] .doc-modal-head span,
html[data-theme="dark"] .alumno-nombre,
html[data-theme="dark"] .clase-nombre,
html[data-theme="dark"] .clase-card .cc-name,
html[data-theme="dark"] .doc-nombre,
html[data-theme="dark"] .mes-titulo,
html[data-theme="dark"] .chart-title,
html[data-theme="dark"] .asist-grid td.td-nombre,
html[data-theme="dark"] .alert-banner .ab-text strong,
html[data-theme="dark"] .alert-banner .alert-title{
  color:var(--text) !important;
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar{ width:10px; height:10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track{ background:transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background:rgba(112,71,235,0.45);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{
  background:rgba(112,71,235,0.70);
  background-clip:content-box;
}

/* ────────────────────────────────────────────────────────────────
   UTILIDADES LUMINA CULTURE (disponibles en ambos temas)
   ──────────────────────────────────────────────────────────────── */

/* Tarjeta glassmorphism */
.glass-card{
  background:rgba(30,36,51,0.40);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(255,255,255,0.15);
  box-shadow:0 4px 30px rgba(0,0,0,0.15);
}
html[data-theme="light"] .glass-card{
  background:rgba(255,255,255,0.60);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(124,58,237,0.12);
  box-shadow:0 10px 30px rgba(124,58,237,0.06);
}

/* Gradiente primario (purple → cyan) */
.primary-gradient{
  background:linear-gradient(45deg,#7047eb,#00daf6);
}

/* Botón de gradiente */
.btn-gradient{
  background:linear-gradient(45deg,#7047eb,#00daf6);
  color:#fff;
  border:none;
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;
  border-radius:12px;
  padding:10px 24px;
  cursor:pointer;
  transition:opacity .18s, transform .18s;
}
.btn-gradient:hover{ opacity:.9; transform:translateY(-1px); }
.btn-gradient:active{ transform:translateY(0); }

/* ────────────────────────────────────────────────────────────────
   BOTÓN INTERRUPTOR DE TEMA
   ──────────────────────────────────────────────────────────────── */
/* .icon-btn: mismo estilo cuadrado, para botones de ícono que NO deben recibir el
   sol/luna que theme.js dibuja en cada .theme-toggle (ver applyTheme en theme.js). */
.theme-toggle,.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:17px;line-height:1;
  transition:all .18s;flex-shrink:0;
}
.theme-toggle:hover,.icon-btn:hover{ border-color:#7047eb; transform:translateY(-1px); }
.theme-toggle:active,.icon-btn:active{ transform:translateY(0); }

.theme-toggle.floating{
  position:fixed;bottom:18px;left:18px;z-index:9998;
  width:42px;height:42px;border-radius:50%;
  box-shadow:var(--shadow);
}

/* Logos */
.logo-svg-mc,.logo-svg-ccng,
.brand-mark,.mb-mark,.app-logo,
.sidebar-logo .brand-mark,
.logo-box img,
.header-inner img,
img[src*="logo_sgc"]{
  border-radius:12px !important;
  overflow:hidden;
}

/* Clases de dispositivo */
html.is-mobile  .hide-mobile{ display:none !important; }
html.is-desktop .only-mobile{ display:none !important; }