/* ═══════════════════════════════════════════════════════════════════
   Tema "app Hart" para el portal web (dashboard.html y portal.html)
   Mismo lenguaje visual que la app (inicio.html): fondo casi negro con
   vino, dorado #cda45e, superficies sólidas redondeadas, "chips" en vez de
   pestañas subrayadas, tarjeta de bienvenida con degradado y brillo
   dorado, botones en píldora y hojas modales que suben desde abajo en
   celular.

   SOLO estilos: no cambia ninguna función, estructura ni identificador.
   Se carga después de los estilos de cada página; para volver al diseño
   anterior basta quitar el <link> a este archivo.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#120609;
  --surface:#1d0d12;
  --surface2:#2a1219;
  --line:rgba(255,255,255,.09);
  --wine:#4a1220;
  --wine2:#6b1a2d;
  --primary:#4a1220;
  --dark:#2b0a12;
  --accent:#cda45e;
  --accent-l:#e2c48a;
  --card:#1d0d12;
  --border:rgba(255,255,255,.09);
  --text:#f4ece0;
  --muted:#b9a99a;
  --ok:#6ee0a0;
  --on-gold:#4a1220;
}

body{background:var(--bg);}

/* barras de desplazamiento discretas, como en la app */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ── BARRA SUPERIOR ── */
.dash-header{
  background:rgba(18,6,9,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:0 16px;
}
.dash-logo img{width:32px;height:32px;}
.dash-logo span{letter-spacing:1.5px;font-size:1rem;}
.notif-bell-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:1.2rem;}
.notif-bell-btn:hover{background:var(--surface2);}
.notif-dot{border-color:var(--bg);}
.badge{border-radius:20px;letter-spacing:.3px;}
.badge-admin,.badge-coordinador{background:rgba(205,164,94,.16);color:var(--accent);border:1px solid rgba(205,164,94,.55);}
.badge-maestro{background:rgba(139,92,246,.16);color:#d3c6ff;border:1px solid rgba(139,92,246,.4);}
.badge-estudiante{background:rgba(110,224,160,.12);color:var(--ok);border:1px solid rgba(110,224,160,.35);}
.btn-logout{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
  border-radius:18px;padding:6px 14px;font-weight:600;
}
.btn-logout:hover{background:var(--accent);color:var(--on-gold);}

/* ── BOTONES (en píldora) ── */
.btn-primary{border-radius:22px;padding:10px 20px;background:var(--accent);color:var(--on-gold);font-weight:700;}
.btn-primary:hover{background:var(--accent-l);}
.btn-secondary{border-radius:22px;background:transparent;border:1px solid rgba(255,255,255,.26);color:var(--text);}
.btn-secondary:hover{background:rgba(255,255,255,.09);}
.btn-cancel{border-radius:22px;background:transparent;border:1px solid rgba(255,255,255,.2);}
.btn-sm{border-radius:10px;}
.ac-mode-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-gold);}
.tag{border-radius:20px;}
.htool-btn,.as-btn{border-radius:10px;background:var(--surface2);border-color:var(--line);}
.htool-btn.htool-active{background:var(--text);color:var(--bg);border-color:var(--text);}

/* ── "CHIPS": pestañas, menú del maestro y menú del admin ── */
.tabs,.teacher-topnav,.sidebar{scrollbar-width:none;}
.tabs::-webkit-scrollbar,.teacher-topnav::-webkit-scrollbar,.sidebar::-webkit-scrollbar{display:none;}
.tabs{border-bottom:none;gap:8px;padding:2px 0 8px;margin-bottom:16px;}
.tab-btn{
  padding:8px 16px;border-radius:10px;background:var(--surface2);
  color:var(--text);font-weight:500;border:none;border-bottom:none;
}
.tab-btn:hover{background:#35171f;color:var(--text);}
.tab-btn.active{background:var(--text);color:var(--bg);font-weight:600;border-bottom:none;}
.tab-btn.active .notif-badge{color:#fff;}

.teacher-topnav{background:var(--bg);border-bottom:1px solid var(--line);padding:10px 16px;gap:8px;}
.tnav{background:var(--surface2);color:var(--text);border-radius:10px;padding:8px 16px;font-weight:500;}
.tnav:hover{background:#35171f;color:var(--text);}
.tnav.active{background:var(--text);color:var(--bg);font-weight:700;}

.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:12px 10px;}
.sidebar-item{border-left:none;border-radius:10px;margin-bottom:2px;padding:11px 14px;color:var(--text);}
.sidebar-item:hover{background:var(--surface2);color:var(--text);}
.sidebar-item.active{background:var(--surface2);color:var(--accent);font-weight:600;border-left:none;}

.dw-tab{background:var(--surface2);border-radius:10px;border:none;color:var(--text);}
.dw-tab.on{background:var(--text);color:var(--bg);border:none;}

@media(max-width:860px){
  .sidebar{background:var(--bg);border-right:none;border-bottom:1px solid var(--line);padding:10px 12px;gap:8px;}
  .sidebar-item{border-bottom:none;margin-bottom:0;background:var(--surface2);color:var(--text);}
  .sidebar-item.active{border-bottom:none;background:var(--text);color:var(--bg);}
  .student-list{background:var(--bg);}
}

/* ── TARJETAS ── */
.config-card,.stat-card,.materia-section,.tc-card,.cal-card,.mat-card,
.admin-chat-card,.as-card,.s-bio-edit{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.stat-card{border-radius:16px;}
.mat-card:hover{border-color:rgba(205,164,94,.4);}
.materia-header:hover,.as-head:hover,.admin-chat-header:hover{background:rgba(255,255,255,.04);}
.file-item,.note-item,.mat-pair{background:var(--surface2);border-color:var(--line);border-radius:12px;}
.horario-toolbar{background:var(--surface);border-color:var(--line);border-radius:14px;}
.student-list{background:var(--surface);border-right-color:var(--line);}
.stu-item{border-bottom-color:var(--line);}
.stu-item:hover{background:var(--surface2);}
.stu-item.active{background:var(--surface2);border-left-color:var(--accent);}
.stu-avatar,.s-photo,.sp-photo,.tc-photo{background:linear-gradient(135deg,var(--wine2),var(--wine));}

/* tarjeta de bienvenida / ficha del alumno: degradado vino con brillo dorado,
   igual que el "hero" de la app */
.student-header,.student-profile-header{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--wine2),var(--wine) 55%,#2b0a12);
  border:1px solid rgba(205,164,94,.25);border-radius:18px;
}
.student-header::after,.student-profile-header::after{
  content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,164,94,.28),transparent 70%);pointer-events:none;
}
.student-header>*,.student-profile-header>*{position:relative;z-index:1;}
.student-header{margin:14px 16px 0;border-bottom:1px solid rgba(205,164,94,.25);}
@media(max-width:860px){.student-header{margin:12px 12px 0;}}

/* ── FORMULARIOS ── */
.field input,.field select,.field textarea,
.prof-field input,.prof-field textarea,.prof-field select,
.search-input,.chat-textarea,.as-nota,.tr-search,.s-bio-edit textarea{
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;color:var(--text);
}
.search-input{border-radius:22px;padding:9px 16px;}
.field input:focus,.field select:focus,.field textarea:focus,
.prof-field input:focus,.prof-field textarea:focus,.prof-field select:focus,
.search-input:focus,.chat-textarea:focus,.as-nota:focus,.tr-search:focus{border-color:var(--accent);outline:none;}
select{background-color:var(--surface2) !important;}
select option{background-color:var(--surface);color:var(--text);}
.mat-check-container,.tr-picker-list,.chat-messages{background:var(--surface);border-color:var(--line);border-radius:14px;}
.tr-opt{border-bottom-color:var(--line);}
.tr-opt:hover{background:var(--surface2);}
.tr-opt.sel{background:rgba(205,164,94,.14);}
.upload-zone{border-radius:14px;border-color:rgba(205,164,94,.35);}

/* ── TABLAS ── */
.table-wrap{border-radius:14px;border-color:var(--line);background:var(--surface);}
th{background:var(--surface2);color:var(--accent);}
td{border-top-color:var(--line);}
tr:hover td{background:rgba(255,255,255,.03);}
@media(max-width:700px){
  .table-wrap{background:transparent;border:none;}
  .table-wrap tr{background:var(--surface);border-color:var(--line);border-radius:14px;}
}

/* ── CHAT ── */
.chat-bubble{border-radius:18px;}
.chat-msg.theirs .chat-bubble{background:var(--surface2);border:none;}

/* ── VENTANAS: tarjeta centrada en escritorio, hoja desde abajo en celular ── */
.modal-overlay{background:rgba(0,0,0,.7);}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:20px;}
.modal h3{font-family:var(--font-head);}
.notif-panel,.gs-modal{background:var(--surface);border-color:var(--line);border-radius:16px;}
.notif-panel-header{background:var(--surface);border-bottom-color:var(--line);}
.notif-item{border-bottom-color:var(--line);}
.notif-item.unread{background:rgba(205,164,94,.09);}
.dw{background:var(--surface);border-left-color:var(--line);}
.dw-head{border-bottom-color:var(--line);}
.dw-body{border-top-color:var(--line);}
.dw-handle{background:linear-gradient(180deg,var(--wine2),var(--wine));border-color:rgba(205,164,94,.6);}
@media(max-width:700px){
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal{border-radius:20px 20px 0 0;max-width:none;max-height:88vh;padding:22px 20px calc(22px + env(safe-area-inset-bottom));}
}
@media(max-width:560px){
  .notif-panel{border-radius:20px 20px 0 0;}
}

/* ── AVISOS ── */
#globalToast{border-radius:22px !important;}

/* ═══════════════ PÁGINA DE ACCESO (portal.html) ═══════════════ */
.portal-main{padding-top:24px;}
body:has(.portal-card){background:radial-gradient(120% 60% at 50% 0,#3a0d18,var(--bg) 70%) fixed;}
.bg-particles{display:none;}
header .logo-img{animation:none;width:34px;height:34px;}
header .logo-text{font-size:1.1rem;letter-spacing:1.5px;}
header{background:rgba(18,6,9,.55);border-bottom-color:var(--line);}
.portal-card{
  background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.portal-logo{animation:none;}
.portal-card h1{letter-spacing:2px;}
.campo input{background:var(--surface2);border:1px solid var(--line);border-radius:12px;}
.campo input:focus{border-color:var(--accent);background:var(--surface2);box-shadow:0 0 0 3px rgba(205,164,94,.15);}
.btn-login,.goto-dashboard{background:var(--accent);color:var(--on-gold);border-radius:26px;font-weight:800;}
.btn-login:hover:not(:disabled),.goto-dashboard:hover{background:var(--accent-l);}
.btn-logout{border-radius:22px;}
footer{border-top-color:var(--line);}

/* ═══════════════ BOTÓN DE TEMA ═══════════════ */
.theme-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:1.15rem;line-height:1;background:transparent;border:0;color:inherit;cursor:pointer;flex:none;}
.theme-btn:hover{background:var(--surface2);}
html.in-app .theme-btn{display:none;} /* en la app el tema se cambia desde su menú */
.hdr-actions{display:flex;align-items:center;gap:10px;}

/* ═══════════════ TEMA CLARO ═══════════════
   Mismos colores que el modo claro de la app: fondo crema, superficies blancas, dorado oscuro para que se lea.
   Los valores --w* / --c-* sustituyen a los blancos translúcidos y a los colores de estado pensados para fondo oscuro. */
html[data-tema="claro"]{
  color-scheme:light;
  --bg:#faf6f1;--surface:#ffffff;--surface2:#f1e9e0;--card:#ffffff;
  --line:rgba(74,18,32,.13);--border:rgba(74,18,32,.13);
  --text:#2a1519;--muted:#7b6a64;
  --accent:#9a6a17;--accent-l:#7d5510;--on-gold:#ffffff;--ok:#1c9b5b;
  --w02:rgba(74,18,32,.02);--w025:rgba(74,18,32,.03);--w03:rgba(74,18,32,.035);--w04:rgba(74,18,32,.04);--w05:rgba(74,18,32,.05);
  --w06:rgba(74,18,32,.06);--w07:rgba(74,18,32,.07);--w08:rgba(74,18,32,.08);--w1:rgba(74,18,32,.1);--w12:rgba(74,18,32,.13);
  --w13:rgba(74,18,32,.13);--w15:rgba(74,18,32,.16);--w2:rgba(74,18,32,.2);--w4:rgba(74,18,32,.4);--w55:rgba(42,21,25,.62);
  --c-warn:#a16207;--c-bad-l:#b42318;--c-bad:#c62828;--c-ok:#15803d;--c-ok-l:#15803d;
  --c-info:#1d4ed8;--c-info-l:#1d4ed8;--c-info-xl:#1e40af;--c-sky:#0369a1;--c-violet:#6d28d9;
}
html[data-tema="claro"] *{scrollbar-color:rgba(74,18,32,.25) transparent;}
html[data-tema="claro"] ::-webkit-scrollbar-thumb{background:rgba(74,18,32,.22);}
html[data-tema="claro"] select{color-scheme:light;}

/* barra superior, chips y menús */
html[data-tema="claro"] .dash-header{background:rgba(250,246,241,.94);}
html[data-tema="claro"] .badge-maestro{background:rgba(109,40,217,.1);color:#6d28d9;border-color:rgba(109,40,217,.35);}
html[data-tema="claro"] .badge-estudiante{background:rgba(21,128,61,.1);color:#15803d;border-color:rgba(21,128,61,.35);}
html[data-tema="claro"] .tab-btn:hover,
html[data-tema="claro"] .tnav:hover{background:#e8dcd0;color:var(--text);}
html[data-tema="claro"] .tab-btn.active .notif-badge{color:#fff;}
html[data-tema="claro"] .sidebar-item.active{color:var(--accent);}

/* tarjeta de bienvenida y ficha del alumno: siguen siendo vino con texto claro */
html[data-tema="claro"] .student-header,
html[data-tema="claro"] .student-profile-header{
  --text:#f4ece0;--muted:#d7c4b4;--accent:#e2c48a;--accent-l:#f0d9a8;--border:rgba(255,255,255,.16);--line:rgba(255,255,255,.16);
  --w04:rgba(255,255,255,.04);--w06:rgba(255,255,255,.06);--w08:rgba(255,255,255,.08);--w1:rgba(255,255,255,.1);--w12:rgba(255,255,255,.12);--w15:rgba(255,255,255,.15);
  --c-ok:#4ade80;--c-ok-l:#86efac;--c-warn:#fbbf24;--c-bad:#f87171;--c-bad-l:#fca5a5;
  --on-gold:#4a1220;color:var(--text);
}

/* chat, ventanas y capas */
html[data-tema="claro"] .chat-msg.mine .chat-bubble{color:#fff;}
html[data-tema="claro"] .modal-overlay{background:rgba(42,21,25,.5);}
html[data-tema="claro"] .modal,
html[data-tema="claro"] .gs-modal{box-shadow:0 24px 60px rgba(74,18,32,.22);}
html[data-tema="claro"] .notif-panel,
html[data-tema="claro"] .dw{box-shadow:0 16px 44px rgba(74,18,32,.2);}
html[data-tema="claro"] .upload-zone{border-color:rgba(154,106,23,.4);}
html[data-tema="claro"] .notif-item.unread{background:rgba(154,106,23,.09);}
html[data-tema="claro"] .tr-opt.sel{background:rgba(154,106,23,.12);}

/* ── acceso (portal.html) ── */
html[data-tema="claro"] body:has(.portal-card){background:radial-gradient(120% 60% at 50% 0,#f3e3d6,#faf6f1 70%) fixed;color:var(--text);}
html[data-tema="claro"] header{background:rgba(250,246,241,.75);}
html[data-tema="claro"] .back-link{color:var(--muted);}
html[data-tema="claro"] .portal-card{box-shadow:0 18px 50px rgba(74,18,32,.14);}
html[data-tema="claro"] .portal-card .sub,
html[data-tema="claro"] .campo label,
html[data-tema="claro"] .hint,
html[data-tema="claro"] footer p,
html[data-tema="claro"] .user-welcome .welcome-text{color:var(--muted);}
html[data-tema="claro"] .campo input{background:#fff;color:var(--text);border-color:var(--line);}
html[data-tema="claro"] .campo input::placeholder{color:rgba(42,21,25,.4);}
html[data-tema="claro"] .campo input:focus{background:#fff;}
html[data-tema="claro"] .error-msg{background:rgba(180,35,24,.08);border-color:rgba(180,35,24,.3);color:#b42318;}
html[data-tema="claro"] .role-estudiante{background:rgba(157,23,77,.08);color:#9d174d;border-color:rgba(157,23,77,.35);}
html[data-tema="claro"] .user-section .btn-logout{color:var(--muted);border-color:var(--line);}
html[data-tema="claro"] .user-section .btn-logout:hover{color:var(--text);background:var(--surface2);}