/* =========================================================
   FAES LMS — Hoja de estilos de la plataforma (login, panel
   Super Admin y panel Alumno). Hoja independiente y autocontenida.
   ========================================================= */

:root{
  --faes-navy: #0A2647;
  --faes-navy-2: #0F3460;
  --faes-blue: #1B6FC9;
  --faes-blue-light: #EAF2FC;
  --faes-gold: #F2A93C;
  --faes-gold-dark: #D98C1F;
  --faes-ink: #142433;
  --faes-gray: #5B6B7B;
  --faes-bg: #F4F7FB;
  --faes-white: #FFFFFF;
  --faes-success: #1F9D6C;
  --faes-danger: #E14B4B;
  --faes-warning: #E0A32C;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px rgba(10,38,71,.08);
  --shadow-mid: 0 16px 40px rgba(10,38,71,.14);
  --ff-display: 'Poppins', 'Inter', sans-serif;
  --ff-body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; }
body{ font-family: var(--ff-body); color: var(--faes-ink); }
h1,h2,h3,h4,h5,.display-font{ font-family: var(--ff-display); font-weight:700; color:var(--faes-navy); letter-spacing:-.01em; }
a{ text-decoration:none; }

.btn-gold{
  background: linear-gradient(135deg, var(--faes-gold), var(--faes-gold-dark));
  color: var(--faes-navy); font-weight:700; border:none;
  padding:.7rem 1.5rem; border-radius:50px;
  box-shadow: 0 10px 24px rgba(242,169,60,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(242,169,60,.4); color: var(--faes-navy); }
.btn-outline-navy{
  border:2px solid var(--faes-navy); color:var(--faes-navy); font-weight:700;
  padding:.6rem 1.4rem; border-radius:50px; background:transparent; transition:.15s ease;
}
.btn-outline-navy:hover{ background: var(--faes-navy); color:#fff; }
.btn-navy{ background: var(--faes-navy); color:#fff; font-weight:700; border:none; border-radius:50px; padding:.6rem 1.4rem; }
.btn-navy:hover{ background: var(--faes-blue); color:#fff; }

.faes-logo{ display:flex; align-items:center; gap:.6rem; font-family: var(--ff-display); font-weight:800; font-size:1.3rem; color: var(--faes-navy); }
.faes-logo .mark{
  width:42px; height:42px; border-radius:12px;
  background: linear-gradient(145deg, var(--faes-navy), var(--faes-blue));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.05rem; box-shadow: var(--shadow-soft); flex-shrink:0;
}
.faes-logo small{ display:block; font-family: var(--ff-body); font-weight:600; font-size:.6rem; letter-spacing:.14em; color:var(--faes-gray); text-transform:uppercase; }

/* ================= AUTH (login) ================= */
.auth-body{ background: var(--faes-bg); min-height:100vh; margin:0; }
.auth-wrap{
  min-height:100vh; display:flex; flex-wrap:wrap;
}
.auth-brand{
  flex:1 1 420px;
  background: radial-gradient(1000px 500px at 90% -10%, rgba(242,169,60,.18), transparent 60%),
              linear-gradient(160deg, var(--faes-navy), var(--faes-navy-2) 60%, #123A6B);
  color:#fff; padding: 4rem 3.5rem; display:flex; flex-direction:column; justify-content:center;
}
.auth-points{ list-style:none; padding:0; margin-top:2rem; }
.auth-points li{ display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.85); font-size:.92rem; margin-bottom:.9rem; }
.auth-points i{ color: var(--faes-gold); font-size:1.1rem; }
.auth-card{
  flex:1 1 420px; display:flex; flex-direction:column; justify-content:center;
  padding: 3rem 3.5rem; max-width:560px; margin:0 auto;
}
@media (max-width:767px){ .auth-brand,.auth-card{ padding: 2.6rem 1.6rem; } }
.auth-card .form-control{ border-radius: var(--radius-sm); padding:.75rem 1rem; border:1.5px solid rgba(10,38,71,.12); }
.auth-card .form-control:focus{ border-color: var(--faes-blue); box-shadow: 0 0 0 4px rgba(27,111,201,.12); }

/* ================= APP SHELL (admin / alumno) ================= */
.app-body{ background: var(--faes-bg); min-height:100vh; }

.app-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:264px;
  background: var(--faes-navy); color:#fff; z-index:1040;
  display:flex; flex-direction:column;
  transition: transform .25s ease;
}
.app-sidebar .side-brand{ padding: 1.5rem 1.4rem; border-bottom:1px solid rgba(255,255,255,.08); }
.app-sidebar .side-brand .faes-logo{ color:#fff; font-size:1.15rem; }
.app-sidebar .side-brand .faes-logo small{ color:rgba(255,255,255,.5); }
.app-sidebar nav{ flex:1; padding: 1rem .9rem; overflow-y:auto; }
.app-sidebar .nav-link{
  color: rgba(255,255,255,.72); font-weight:600; font-size:.9rem;
  padding:.7rem .9rem; border-radius: var(--radius-sm);
  display:flex; align-items:center; gap:.7rem; margin-bottom:.25rem;
}
.app-sidebar .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.app-sidebar .nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.app-sidebar .nav-link.active{ background: linear-gradient(135deg, var(--faes-gold), var(--faes-gold-dark)); color: var(--faes-navy); }
.app-sidebar .side-section{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); padding: 1rem .9rem .3rem; font-weight:700; }
.app-sidebar .side-foot{ padding: 1rem 1.4rem; border-top:1px solid rgba(255,255,255,.08); font-size:.78rem; color:rgba(255,255,255,.45); }

.app-main{ margin-left:264px; min-height:100vh; display:flex; flex-direction:column; }
@media (max-width: 991px){
  .app-sidebar{ transform: translateX(-100%); }
  .app-sidebar.show{ transform: translateX(0); box-shadow: var(--shadow-mid); }
  .app-main{ margin-left:0; }
}

.app-topbar{
  background:#fff; border-bottom:1px solid rgba(10,38,71,.06);
  padding: .9rem 1.6rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:1030;
}
.app-topbar .burger{ display:none; background:none; border:none; font-size:1.4rem; color:var(--faes-navy); }
@media (max-width: 991px){ .app-topbar .burger{ display:inline-flex; } }
.app-topbar h1{ font-size:1.15rem; margin:0; }
.app-topbar .user-chip{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.app-topbar .avatar-sm{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  background: linear-gradient(135deg, var(--faes-blue), var(--faes-navy));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem;
}
.app-topbar .user-chip strong{ display:block; font-size:.85rem; color:var(--faes-navy); }
.app-topbar .user-chip span{ font-size:.72rem; color:var(--faes-gray); }

.app-content{ padding: 1.8rem; flex:1; }
@media (max-width: 575px){ .app-content{ padding: 1.1rem; } }

.overlay-backdrop{ position:fixed; inset:0; background:rgba(10,38,71,.4); z-index:1035; display:none; }
.overlay-backdrop.show{ display:block; }

/* ---------- Cards / stat tiles ---------- */
.stat-tile{
  background:#fff; border-radius: var(--radius-lg); padding:1.4rem 1.5rem;
  box-shadow: var(--shadow-soft); display:flex; align-items:center; gap:1rem; height:100%;
  border:1px solid rgba(10,38,71,.05);
}
.stat-tile .ic{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  background: var(--faes-blue-light); color: var(--faes-blue);
}
.stat-tile .ic.gold{ background: rgba(242,169,60,.16); color: var(--faes-gold-dark); }
.stat-tile .ic.green{ background: rgba(31,157,108,.14); color: var(--faes-success); }
.stat-tile .ic.red{ background: rgba(225,75,75,.12); color: var(--faes-danger); }
.stat-tile h3{ font-size:1.5rem; margin:0; }
.stat-tile span{ font-size:.78rem; color: var(--faes-gray); font-weight:600; }

.panel-card{
  background:#fff; border-radius: var(--radius-lg); padding:1.6rem;
  box-shadow: var(--shadow-soft); border:1px solid rgba(10,38,71,.05);
}
.panel-card .panel-head{ display:flex; align-items:center; justify-content:between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.panel-card .panel-head h5{ margin:0; }

/* ---------- Tables ---------- */
.table-faes thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faes-gray);
  border-bottom:2px solid rgba(10,38,71,.08); font-weight:700; padding:.8rem .9rem;
}
.table-faes tbody td{ padding:.85rem .9rem; vertical-align:middle; font-size:.9rem; border-bottom:1px solid rgba(10,38,71,.05); }
.table-faes tbody tr:hover{ background: var(--faes-blue-light); }

.avatar-table{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  background: linear-gradient(135deg, var(--faes-blue), var(--faes-navy));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.75rem;
}

/* ---------- Badges de estado ---------- */
.badge-estado{ font-size:.72rem; font-weight:700; padding:.35rem .7rem; border-radius:50px; }
.badge-activo{ background: rgba(31,157,108,.12); color: var(--faes-success); }
.badge-bloqueado{ background: rgba(225,75,75,.12); color: var(--faes-danger); }
.badge-inactivo{ background: rgba(91,107,123,.14); color: var(--faes-gray); }
.badge-general{ background: var(--faes-blue-light); color: var(--faes-blue); }
.badge-especialidad{ background: rgba(242,169,60,.16); color: var(--faes-gold-dark); }

/* ---------- Progreso ---------- */
.progress-faes{ height:10px; border-radius:50px; background: rgba(10,38,71,.08); overflow:hidden; }
.progress-faes .bar{ height:100%; border-radius:50px; background: linear-gradient(90deg, var(--faes-blue), var(--faes-navy)); transition: width .4s ease; }
.progress-faes.gold .bar{ background: linear-gradient(90deg, var(--faes-gold), var(--faes-gold-dark)); }
.progress-faes.green .bar{ background: linear-gradient(90deg, #35C08A, var(--faes-success)); }

.materia-card{
  background:#fff; border-radius: var(--radius-lg); padding:1.4rem;
  box-shadow: var(--shadow-soft); border:1px solid rgba(10,38,71,.05); height:100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.materia-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-mid); }
.materia-card .tipo{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }

.tema-item{ border:1px solid rgba(10,38,71,.08); border-radius: var(--radius-md); margin-bottom:.7rem; overflow:hidden; }
.tema-item .tema-head{ padding: .9rem 1.1rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; background:#fff; }
.tema-item .subtema-row{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.1rem; border-top:1px solid rgba(10,38,71,.06); font-size:.88rem; }
.tema-item .subtema-row:hover{ background: var(--faes-blue-light); }

.check-completo{ color: var(--faes-success); }

/* ---------- Forms ---------- */
.form-control, .form-select{ border-radius: var(--radius-sm); padding:.65rem .9rem; border:1.5px solid rgba(10,38,71,.12); font-size:.92rem; }
.form-control:focus, .form-select:focus{ border-color: var(--faes-blue); box-shadow: 0 0 0 4px rgba(27,111,201,.12); }
.form-label{ font-weight:600; font-size:.85rem; color: var(--faes-navy); }

/* ---------- Misc ---------- */
.dot-live{ width:8px; height:8px; border-radius:50%; background: var(--faes-success); display:inline-block; margin-right:.35rem; }
.upload-drop{
  border:2px dashed rgba(10,38,71,.18); border-radius: var(--radius-md);
  padding: 2rem 1rem; text-align:center; color: var(--faes-gray); background: var(--faes-blue-light);
}