/* =============================================================
   Sistema de Control Escolar — IPN
   Paleta Institucional: Guinda #6F1D1B · Dorado #C8A951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --guinda:        #6F1D1B;
  --guinda-dk:     #4d1412;
  --guinda-mid:    #7d2320;
  --guinda-lt:     #9b3d3b;
  --guinda-pale:   #f9eded;
  --dorado:        #C8A951;
  --dorado-lt:     #d4bc6a;
  --dorado-pale:   #fdf6e3;
  --dorado-dk:     #a88c3e;

  --bg:            #f4f0eb;
  --bg-sidebar:    #3d0e0c;
  --white:         #ffffff;
  --card:          #ffffff;
  --card-border:   #e8ddd0;

  --txt:           #1c1a1a;
  --txt-2:         #5e5555;
  --txt-3:         #9e9090;
  --txt-inv:       #ffffff;

  --success:       #2d8a4e;
  --success-bg:    #eef8f2;
  --warning:       #c97b2a;
  --warning-bg:    #fef6ed;
  --danger:        #c0392b;
  --danger-bg:     #fef0ef;
  --info:          #2470a0;
  --info-bg:       #edf5fb;

  --shadow-xs:     0 1px 4px rgba(111,29,27,.07);
  --shadow-sm:     0 2px 10px rgba(111,29,27,.10);
  --shadow-md:     0 4px 20px rgba(111,29,27,.14);
  --shadow-lg:     0 8px 40px rgba(111,29,27,.18);

  --sidebar-w:     260px;
  --header-h:      64px;
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     24px;

  --transition:    all .28s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  min-height:100vh;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ── Layout principal (sidebar + contenido) ─────────────────── */
.layout {
  display:flex;
  min-height:100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  background:var(--bg-sidebar);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0;
  height:100vh;
  z-index:100;
  transition:var(--transition);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--guinda-lt) transparent;
}
.sidebar-brand {
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(200,169,81,.2);
  text-decoration:none;
}
.sidebar-brand-icon {
  width:40px; height:40px;
  background:var(--dorado);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; color:var(--guinda-dk);
  flex-shrink:0;
}
.sidebar-brand-text {
  display:flex; flex-direction:column;
}
.sidebar-brand-text strong {
  color:var(--dorado);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}
.sidebar-brand-text span {
  color:rgba(255,255,255,.5);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.sidebar-user {
  padding:16px 20px;
  border-bottom:1px solid rgba(200,169,81,.15);
}
.sidebar-user-avatar {
  width:36px; height:36px;
  background:var(--dorado);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:var(--guinda-dk);
  margin-bottom:8px;
}
.sidebar-user-name {
  font-size:12px;
  font-weight:600;
  color:var(--txt-inv);
  line-height:1.3;
}
.sidebar-user-role {
  font-size:10px;
  color:var(--dorado-lt);
  text-transform:uppercase;
  letter-spacing:.6px;
}

.sidebar-nav { flex:1; padding:12px 0; }
.sidebar-section-label {
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:rgba(200,169,81,.5);
  padding:10px 20px 4px;
}
.sidebar-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 20px;
  color:rgba(255,255,255,.7);
  font-size:13px;
  font-weight:500;
  border-left:3px solid transparent;
  transition:var(--transition);
  position:relative;
}
.sidebar-link:hover {
  color:var(--dorado-lt);
  background:rgba(200,169,81,.1);
  border-left-color:rgba(200,169,81,.4);
}
.sidebar-link.active {
  color:var(--dorado);
  background:rgba(200,169,81,.15);
  border-left-color:var(--dorado);
  font-weight:600;
}
.sidebar-link svg,
.sidebar-link .icon { flex-shrink:0; opacity:.8; }
.sidebar-link.active svg,
.sidebar-link.active .icon { opacity:1; }

.sidebar-badge {
  margin-left:auto;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:1px 6px;
  border-radius:20px;
  min-width:18px;
  text-align:center;
}

.sidebar-footer {
  padding:12px 20px;
  border-top:1px solid rgba(200,169,81,.15);
}
.sidebar-logout {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:var(--radius);
  color:rgba(255,255,255,.6);
  font-size:13px;
  font-weight:500;
  transition:var(--transition);
  width:100%;
}
.sidebar-logout:hover {
  background:rgba(200,56,56,.2);
  color:#ff8080;
}

/* ── Contenido principal ────────────────────────────────────── */
.main {
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height:var(--header-h);
  background:var(--white);
  border-bottom:1px solid var(--card-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:var(--shadow-xs);
}
.topbar-title {
  font-size:18px;
  font-weight:700;
  color:var(--txt);
}
.topbar-sub {
  font-size:12px;
  color:var(--txt-3);
  font-weight:400;
  margin-top:1px;
}
.topbar-actions { display:flex; align-items:center; gap:12px; }

/* ── Área de contenido ──────────────────────────────────────── */
.content {
  flex:1;
  padding:28px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  transition:var(--transition);
}
.card:hover { box-shadow:var(--shadow-sm); }

.card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--card-border);
}
.card-title {
  font-size:15px;
  font-weight:700;
  color:var(--txt);
  display:flex;
  align-items:center;
  gap:8px;
}
.card-body { padding:22px; }
.card-footer {
  padding:14px 22px;
  border-top:1px solid var(--card-border);
  background:rgba(244,240,235,.5);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* Stat Cards */
.stat-card {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  box-shadow:var(--shadow-xs);
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--guinda),var(--dorado));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-icon {
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.stat-icon.guinda { background:var(--guinda-pale); color:var(--guinda); }
.stat-icon.dorado  { background:var(--dorado-pale); color:var(--dorado-dk); }
.stat-icon.success { background:var(--success-bg); color:var(--success); }
.stat-icon.warning { background:var(--warning-bg); color:var(--warning); }
.stat-icon.danger  { background:var(--danger-bg); color:var(--danger); }
.stat-icon.info    { background:var(--info-bg); color:var(--info); }
.stat-info { flex:1; }
.stat-num {
  font-size:28px;
  font-weight:800;
  color:var(--txt);
  line-height:1;
}
.stat-label {
  font-size:12px;
  color:var(--txt-2);
  font-weight:500;
  margin-top:4px;
}

/* ── Grillas ─────────────────────────────────────────────────── */
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

/* ── Tablas ──────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x:auto;
  border-radius:var(--radius);
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
thead tr {
  background:linear-gradient(135deg,var(--guinda),var(--guinda-mid));
}
thead th {
  padding:12px 16px;
  text-align:left;
  color:var(--dorado);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.7px;
  white-space:nowrap;
}
tbody tr {
  border-bottom:1px solid var(--card-border);
  transition:var(--transition);
}
tbody tr:hover { background:var(--guinda-pale); }
tbody td {
  padding:12px 16px;
  color:var(--txt);
  vertical-align:middle;
}
tbody tr:last-child { border-bottom:none; }

/* ── Formularios ─────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--txt-2);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.form-control {
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--card-border);
  border-radius:var(--radius);
  font-size:14px;
  font-family:inherit;
  color:var(--txt);
  background:var(--white);
  transition:var(--transition);
  outline:none;
}
.form-control:focus {
  border-color:var(--guinda);
  box-shadow:0 0 0 3px rgba(111,29,27,.12);
}
.form-control::placeholder { color:var(--txt-3); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:90px; }

.form-hint {
  font-size:11px;
  color:var(--txt-3);
  margin-top:4px;
}
.form-row {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 18px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  border:none;
  transition:var(--transition);
  text-decoration:none;
  white-space:nowrap;
}
.btn:active { transform:scale(.97); }

.btn-primary {
  background:linear-gradient(135deg,var(--guinda),var(--guinda-lt));
  color:var(--txt-inv);
  box-shadow:0 2px 8px rgba(111,29,27,.3);
}
.btn-primary:hover {
  background:linear-gradient(135deg,var(--guinda-dk),var(--guinda));
  box-shadow:0 4px 14px rgba(111,29,27,.4);
  transform:translateY(-1px);
}

.btn-secondary {
  background:var(--card);
  color:var(--txt-2);
  border:1.5px solid var(--card-border);
}
.btn-secondary:hover {
  border-color:var(--guinda);
  color:var(--guinda);
  background:var(--guinda-pale);
}

.btn-gold {
  background:linear-gradient(135deg,var(--dorado-dk),var(--dorado));
  color:var(--white);
  box-shadow:0 2px 8px rgba(200,169,81,.35);
}
.btn-gold:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(200,169,81,.45);
}

.btn-success {
  background:var(--success);
  color:#fff;
}
.btn-success:hover { background:#236b3e; }

.btn-danger {
  background:var(--danger);
  color:#fff;
}
.btn-danger:hover { background:#9b2d22; }

.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn-icon { width:34px; height:34px; padding:0; justify-content:center; border-radius:8px; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
}
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger);  }
.badge-info    { background:var(--info-bg);    color:var(--info);    }
.badge-guinda  { background:var(--guinda-pale); color:var(--guinda); }
.badge-dorado  { background:var(--dorado-pale); color:var(--dorado-dk); }
.badge-secondary { background:#f0eee8; color:var(--txt-2); }

/* ── Alertas ─────────────────────────────────────────────────── */
.alert {
  padding:12px 16px;
  border-radius:var(--radius);
  font-size:13.5px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:20px;
}
.alert-icon { flex-shrink:0; font-size:16px; margin-top:1px; }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(45,138,78,.25); }
.alert-warning { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(201,123,42,.25); }
.alert-danger  { background:var(--danger-bg);  color:var(--danger);  border:1px solid rgba(192,57,43,.25); }
.alert-info    { background:var(--info-bg);    color:var(--info);    border:1px solid rgba(36,112,160,.25); }

/* ── Barra de progreso ───────────────────────────────────────── */
.progress-bar-wrap {
  background:#e8e0d0;
  border-radius:20px;
  height:8px;
  overflow:hidden;
}
.progress-bar-fill {
  height:100%;
  border-radius:20px;
  background:linear-gradient(90deg,var(--guinda),var(--dorado));
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.progress-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--txt-2);
  margin-bottom:4px;
}
.progress-pct {
  font-weight:700;
  color:var(--guinda);
}

/* ── Checkbox estilizado ─────────────────────────────────────── */
.checkbox-activity {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:var(--radius);
  border:1.5px solid var(--card-border);
  transition:var(--transition);
  cursor:pointer;
  background:var(--white);
}
.checkbox-activity:hover {
  border-color:var(--guinda);
  background:var(--guinda-pale);
}
.checkbox-activity.done {
  background:var(--success-bg);
  border-color:rgba(45,138,78,.3);
}
.checkbox-activity input[type=checkbox] { display:none; }
.checkbox-activity .check-indicator {
  width:20px; height:20px;
  border-radius:6px;
  border:2px solid var(--card-border);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:var(--transition);
  background:var(--white);
}
.checkbox-activity.done .check-indicator {
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}
.checkbox-activity .check-label {
  flex:1;
  font-size:13.5px;
  color:var(--txt);
}
.checkbox-activity.done .check-label {
  text-decoration:line-through;
  color:var(--txt-3);
}
.checkbox-activity .check-date {
  font-size:11px;
  color:var(--txt-3);
}

/* ── Unidad accordion ────────────────────────────────────────── */
.unidad-card {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  margin-bottom:16px;
  overflow:hidden;
}
.unidad-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(135deg,var(--guinda-dk),var(--guinda));
  cursor:pointer;
  user-select:none;
}
.unidad-header-left { display:flex; align-items:center; gap:12px; }
.unidad-num {
  width:32px; height:32px;
  background:var(--dorado);
  color:var(--guinda-dk);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
  flex-shrink:0;
}
.unidad-title {
  color:var(--txt-inv);
  font-weight:600;
  font-size:14px;
}
.unidad-stats {
  color:var(--dorado-lt);
  font-size:12px;
  margin-top:2px;
}
.unidad-toggle {
  color:var(--dorado);
  font-size:18px;
  transition:transform .25s;
}
.unidad-toggle.open { transform:rotate(180deg); }
.unidad-body { padding:16px 20px; display:none; }
.unidad-body.open { display:block; }

/* Materia block */
.materia-block {
  margin-bottom:14px;
  background:var(--bg);
  border-radius:var(--radius);
  border:1px solid var(--card-border);
  overflow:hidden;
}
.materia-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:rgba(111,29,27,.06);
  border-bottom:1px solid var(--card-border);
}
.materia-name {
  font-size:13.5px;
  font-weight:700;
  color:var(--guinda);
}
.materia-actions { display:flex; gap:6px; }
.materia-body { padding:12px 14px; }
.actividades-list { display:flex; flex-direction:column; gap:6px; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}
.modal-overlay.open {
  opacity:1;
  pointer-events:all;
}
.modal {
  background:var(--white);
  border-radius:var(--radius-xl);
  width:100%;
  max-width:520px;
  box-shadow:var(--shadow-lg);
  transform:scale(.94) translateY(8px);
  transition:var(--transition);
}
.modal-overlay.open .modal {
  transform:scale(1) translateY(0);
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--card-border);
}
.modal-title { font-size:16px; font-weight:700; color:var(--txt); }
.modal-close {
  width:30px; height:30px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--txt-3);
  font-size:18px;
  transition:var(--transition);
  cursor:pointer;
}
.modal-close:hover { background:var(--danger-bg); color:var(--danger); }
.modal-body { padding:22px; }
.modal-footer {
  padding:14px 22px;
  border-top:1px solid var(--card-border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* ── Reporte chat / thread ───────────────────────────────────── */
.reporte-thread {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}
.mensaje-burbuja {
  display:flex;
  gap:12px;
  animation:fadeSlideIn .3s ease;
}
.mensaje-avatar {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--guinda);
  color:var(--dorado);
  font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mensaje-avatar.asesor { background:var(--info); color:#fff; }
.mensaje-avatar.alumno { background:var(--success); color:#fff; }
.mensaje-avatar.direccion { background:var(--guinda); color:var(--dorado); }
.mensaje-content {
  flex:1;
  background:var(--bg);
  border:1px solid var(--card-border);
  border-radius:0 var(--radius) var(--radius) var(--radius);
  padding:12px 14px;
}
.mensaje-meta {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.mensaje-autor {
  font-size:12px;
  font-weight:700;
  color:var(--guinda);
}
.mensaje-hora {
  font-size:11px;
  color:var(--txt-3);
}
.mensaje-texto {
  font-size:13.5px;
  color:var(--txt);
  line-height:1.55;
}

/* ── Alerta de inactividad ───────────────────────────────────── */
.alerta-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-radius:var(--radius);
  background:var(--warning-bg);
  border:1px solid rgba(201,123,42,.25);
  margin-bottom:8px;
  transition:var(--transition);
}
.alerta-item:hover { background:#fdefd8; }
.alerta-dot {
  width:10px; height:10px;
  border-radius:50%;
  background:var(--warning);
  flex-shrink:0;
  animation:pulse 2s infinite;
}
.alerta-info { flex:1; }
.alerta-nombre { font-size:13px; font-weight:600; color:var(--txt); }
.alerta-detalle { font-size:11px; color:var(--warning); }

/* ── Búsqueda ────────────────────────────────────────────────── */
.search-bar {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--white);
  border:1.5px solid var(--card-border);
  border-radius:var(--radius);
  padding:8px 14px;
  transition:var(--transition);
}
.search-bar:focus-within {
  border-color:var(--guinda);
  box-shadow:0 0 0 3px rgba(111,29,27,.1);
}
.search-bar svg { color:var(--txt-3); flex-shrink:0; }
.search-bar input {
  border:none; outline:none;
  font-size:13.5px;
  color:var(--txt);
  background:transparent;
  flex:1;
  font-family:inherit;
}
.search-bar input::placeholder { color:var(--txt-3); }

/* ── Filtros ─────────────────────────────────────────────────── */
.filters-bar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ── Contraseña generada (al crear alumno) ───────────────────── */
.password-reveal {
  background:linear-gradient(135deg,var(--guinda-pale),#fff8e8);
  border:2px solid var(--dorado);
  border-radius:var(--radius);
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  margin:16px 0;
}
.password-reveal-icon {
  font-size:28px;
}
.password-reveal-label {
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--txt-2);
  margin-bottom:4px;
}
.password-reveal-value {
  font-size:22px;
  font-weight:800;
  color:var(--guinda);
  letter-spacing:2px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align:center;
  padding:48px 24px;
  color:var(--txt-3);
}
.empty-state-icon { font-size:48px; margin-bottom:12px; opacity:.5; }
.empty-state-title { font-size:15px; font-weight:600; color:var(--txt-2); margin-bottom:6px; }
.empty-state-desc { font-size:13px; }

/* ── Utilidades ──────────────────────────────────────────────── */
.d-flex { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.gap-20 { gap:20px; }
.mb-0 { margin-bottom:0; }
.mb-8 { margin-bottom:8px; }
.mb-12 { margin-bottom:12px; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }
.mb-28 { margin-bottom:28px; }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-sm { font-size:12px; }
.text-muted { color:var(--txt-3); }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.text-guinda { color:var(--guinda); }
.text-dorado { color:var(--dorado-dk); }
.text-success { color:var(--success); }
.text-danger { color:var(--danger); }
.text-warning { color:var(--warning); }

.divider { height:1px; background:var(--card-border); margin:16px 0; }
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600;
  background:var(--bg); border:1px solid var(--card-border);
  color:var(--txt-2);
}
.avatar-sm {
  width:32px; height:32px;
  border-radius:50%;
  background:var(--guinda);
  color:var(--dorado);
  font-weight:700; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── Login ───────────────────────────────────────────────────── */
.login-page {
  min-height:100vh;
  background:linear-gradient(135deg,var(--guinda-dk) 0%,var(--guinda) 50%,var(--guinda-lt) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}
.login-page::before {
  content:'';
  position:absolute;
  top:-30%; right:-20%;
  width:500px; height:500px;
  border-radius:50%;
  background:rgba(200,169,81,.12);
  pointer-events:none;
}
.login-page::after {
  content:'';
  position:absolute;
  bottom:-20%; left:-15%;
  width:400px; height:400px;
  border-radius:50%;
  background:rgba(200,169,81,.08);
  pointer-events:none;
}
.login-card {
  background:rgba(255,255,255,.97);
  border-radius:var(--radius-xl);
  padding:44px 40px;
  width:100%;
  max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;
  z-index:1;
  animation:loginFadeIn .5s ease;
}
.login-logo {
  text-align:center;
  margin-bottom:28px;
}
.login-logo-badge {
  width:68px; height:68px;
  background:linear-gradient(135deg,var(--guinda),var(--guinda-lt));
  border-radius:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px;
  margin-bottom:12px;
  box-shadow:0 8px 24px rgba(111,29,27,.35);
}
.login-title {
  font-size:22px;
  font-weight:800;
  color:var(--txt);
  margin-bottom:4px;
}
.login-subtitle {
  font-size:13px;
  color:var(--txt-3);
}
.login-form-title {
  font-size:14px;
  font-weight:700;
  color:var(--txt-2);
  margin-bottom:20px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.login-btn {
  width:100%;
  padding:13px;
  background:linear-gradient(135deg,var(--guinda),var(--guinda-lt));
  color:var(--white);
  border:none;
  border-radius:var(--radius);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:0 4px 14px rgba(111,29,27,.3);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.login-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(111,29,27,.4);
}
.login-btn:active { transform:scale(.98); }

/* ── Página de cambio de contraseña ──────────────────────────── */
.password-page {
  min-height:100vh;
  background:linear-gradient(135deg,var(--guinda-dk),var(--guinda));
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.password-card {
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:40px;
  width:100%;
  max-width:440px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}

/* ── Animaciones ─────────────────────────────────────────────── */
@keyframes loginFadeIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateX(-10px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.6; transform:scale(1.3); }
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-in { animation:fadeSlideIn .35s ease; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tab-nav {
  display:flex;
  gap:4px;
  padding:6px;
  flex-wrap:wrap;
}
.tab-btn {
  flex:1;
  min-width:120px;
  padding:9px 14px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  color:var(--txt-2);
  background:transparent;
  border:none;
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  font-family:inherit;
}
.tab-btn:hover { background:var(--guinda-pale); color:var(--guinda); }
.tab-btn.active {
  background:linear-gradient(135deg,var(--guinda),var(--guinda-lt));
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fadeSlideIn .25s ease; }

/* ── Notas internas ──────────────────────────────────────────── */
.nota-textarea {
  width:100%;
  min-height:90px;
  padding:12px 14px;
  border:2px solid var(--card-border);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:13.5px;
  color:var(--txt);
  background:var(--white);
  resize:vertical;
  transition:var(--transition);
  outline:none;
}
.nota-textarea:focus {
  border-color:var(--guinda);
  box-shadow:0 0 0 3px rgba(111,29,27,.1);
}
.nota-item {
  display:flex;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--card-border);
  animation:fadeSlideIn .3s ease;
}
.nota-item:last-child { border-bottom:none; }
.nota-avatar {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--guinda);
  color:var(--dorado);
  font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nota-body { flex:1; }
.nota-meta {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.nota-autor { font-size:12px; font-weight:700; color:var(--guinda); }
.nota-fecha { font-size:11px; color:var(--txt-3); }
.nota-texto { font-size:13.5px; color:var(--txt); line-height:1.55; white-space:pre-wrap; }

/* ── Archivos / documentos ───────────────────────────────────── */
.drop-zone {
  border:2px dashed var(--card-border);
  border-radius:var(--radius-lg);
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:var(--transition);
  background:var(--bg);
  position:relative;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color:var(--guinda);
  background:var(--guinda-pale);
}
.drop-zone input[type=file] {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%; height:100%;
}
.drop-zone-icon { font-size:40px; margin-bottom:10px; opacity:.5; }
.drop-zone-text { font-size:14px; font-weight:600; color:var(--txt-2); }
.drop-zone-hint { font-size:12px; color:var(--txt-3); margin-top:4px; }

.archivo-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--card-border);
  transition:var(--transition);
}
.archivo-item:last-child { border-bottom:none; }
.archivo-item:hover { background:var(--guinda-pale); }
.archivo-icon {
  width:40px; height:40px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
  background:var(--bg);
  border:1px solid var(--card-border);
}
.archivo-info { flex:1; min-width:0; }
.archivo-nombre {
  font-size:13px; font-weight:600; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.archivo-meta { font-size:11px; color:var(--txt-3); margin-top:2px; }
.archivo-desc { font-size:12px; color:var(--txt-2); margin-top:2px; font-style:italic; }
.archivo-actions { display:flex; gap:6px; flex-shrink:0; }

/* Upload progress */
.upload-progress {
  background:var(--guinda-pale);
  border:1px solid rgba(111,29,27,.2);
  border-radius:var(--radius);
  padding:10px 14px;
  margin-bottom:10px;
  display:none;
}
.upload-progress.visible { display:block; }

/* ── Toast notificaciones ────────────────────────────────────── */

#toast-container {
  position:fixed;
  top:20px;
  right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.toast {
  background:var(--white);
  border-radius:var(--radius);
  padding:12px 16px;
  box-shadow:var(--shadow-md);
  border-left:4px solid var(--guinda);
  display:flex; align-items:center; gap:10px;
  font-size:13.5px;
  min-width:260px;
  animation:slideDown .3s ease;
}
.toast.success { border-left-color:var(--success); }
.toast.warning { border-left-color:var(--warning); }
.toast.error   { border-left-color:var(--danger); }

/* ── Overlay para sidebar en móvil ──────────────────────────── */
.sidebar-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:99;
  backdrop-filter:blur(2px);
}
.sidebar-overlay.open { display:block; }

/* ── Botón hamburguesa ───────────────────────────────────────── */
.hamburger-btn {
  display:none;
  width:40px; height:40px;
  background:var(--white);
  border:1.5px solid var(--card-border);
  border-radius:var(--radius);
  align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  font-size:18px;
  color:var(--guinda);
  transition:var(--transition);
  box-shadow:var(--shadow-xs);
}
.hamburger-btn:hover { background:var(--guinda-pale); border-color:var(--guinda); }

/* ── Responsive tablet (901–1100px) ─────────────────────────── */
@media (max-width:1100px) {
  :root { --sidebar-w: 220px; }
  .content { padding:20px; }
}

/* ── Responsive tablet pequeño (641–900px) ───────────────────── */
@media (max-width:900px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .content { padding:18px; }
  /* Detalle alumno: sidebar + panel en vertical */
  .grid[style*='300px'] {
    grid-template-columns: 1fr !important;
  }
  .unidad-header {
    flex-wrap:wrap;
    gap:8px;
  }
  .alerta-item { flex-wrap:wrap; }
}

/* ── Responsive móvil (<=640px) ─────────────────────────────── */
@media (max-width:640px) {
  /* Sidebar: oculto por defecto, desliza desde la izquierda */
  .sidebar {
    transform:translateX(-100%);
    z-index:200;
    width:280px;
    box-shadow:none;
  }
  .sidebar.open {
    transform:translateX(0);
    box-shadow: 4px 0 30px rgba(0,0,0,.35);
  }

  /* Contenido ocupa todo el ancho */
  .main { margin-left:0; }

  /* Mostrar botón hamburguesa */
  .hamburger-btn { display:inline-flex; }

  /* Grillas en una sola columna */
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }

  /* Ajuste de la grilla específica del chat (290px 1fr) */
  .grid[style*='290px'] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Reducir altura del chatbox en móvil para que quepa en pantalla */
  .grid[style*='290px'] .card[style*='height: 480px'] {
    height: 400px !important;
  }
  #sidebar-companeros {
    max-height: 220px !important;
  }

  /* Burbujas de chat más delgadas en celular */
  .chat-bubble {
    max-width: 90% !important;
  }

  /* Padding reducido */
  .content { padding:12px; }

  /* Topbar más compacta */
  .topbar { padding:0 14px; }
  .topbar-title { font-size:15px; }
  .topbar-sub { display:none; }

  /* Detalle alumno: columna única */
  .grid[style*='300px'] {
    grid-template-columns: 1fr !important;
  }

  /* Unidad header: apilar elementos */
  .unidad-header {
    flex-wrap:wrap;
    gap:8px;
    padding:12px 14px;
  }
  .unidad-header > div:last-child {
    width:100%;
    justify-content:space-between;
  }

  /* Materia header: apilar */
  .materia-header {
    flex-wrap:wrap;
    gap:8px;
  }
  .materia-actions { flex-wrap:wrap; }

  /* Actividades: ajustar */
  .act-row { flex-wrap:wrap; gap:6px; }
  .act-fecha { font-size:10px; }

  /* Tables: scroll horizontal */
  .table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Cards padding reducido */
  .card-header { padding:12px 16px 10px; flex-wrap:wrap; gap:8px; }
  .card-body { padding:14px; }
  .modal-body { padding:16px; }
  .modal-footer { padding:12px 16px; flex-wrap:wrap; }
  .modal .btn { flex:1; justify-content:center; }

  /* Stat cards: más compactas */
  .stat-card { padding:14px 16px; }
  .stat-num { font-size:22px; }

  /* Filtros wrap */
  .filters-bar { flex-direction:column; align-items:stretch; }
  .filters-bar .btn { justify-content:center; }

  /* Alertas inactividad */
  .alerta-item { flex-wrap:wrap; }

  /* Password reveal */
  .password-reveal { flex-direction:column; text-align:center; }

  /* Toast: ancho completo */
  #toast-container { left:12px; right:12px; top:12px; }
  .toast { min-width:unset; width:100%; }

  /* Login card */
  .login-card { padding:28px 20px; }
}