/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
:root {
  --primary: #1a73e8;
  --primary-dark: #1557b0;
  --primary-light: #e8f0fe;
  --secondary: #34a853;
  --secondary-light: #e6f4ea;
  --danger: #ea4335;
  --warning: #fbbc04;
  --bg: #f0f4f8;
  --surface: #ffffff;
  --text: #202124;
  --text-secondary: #5f6368;
  --text-hint: #9aa0a6;
  --border: #dadce0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ─── Dark Mode ─── */
[data-theme="dark"] {
  --bg: #111418;
  --surface: #1e2124;
  --text: #e3e5e8;
  --text-secondary: #b0b8c1;
  --text-hint: #72777e;
  --border: #2e3136;
  --primary-light: #1a2f5a;
  --secondary-light: #1a2e22;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
}
[data-theme="dark"] .header { background: var(--surface); box-shadow: 0 1px 0 var(--border); }
[data-theme="dark"] .user-menu { background: #2a2d31; }
[data-theme="dark"] .user-menu-item:hover,
[data-theme="dark"] .drawer-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .drawer-content { background: var(--surface); }
[data-theme="dark"] .tab:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .course-header { filter: brightness(0.9); }
[data-theme="dark"] .stream-announce-btn { background: var(--surface); color: var(--text-secondary); }
[data-theme="dark"] .stream-announce-btn:hover { background: #2a2d31; }
[data-theme="dark"] .stream-item:hover { box-shadow: var(--shadow-md); background: #25282c; }
[data-theme="dark"] .activity-row:hover { background: #25282c; }
[data-theme="dark"] #activitiesList,
[data-theme="dark"] .people-card,
[data-theme="dark"] .gradebook-wrap,
[data-theme="dark"] .stream-aside-card,
[data-theme="dark"] .announcement-card { background: var(--surface); }
[data-theme="dark"] .person-item:hover { background: #25282c; }
[data-theme="dark"] .upcoming-item:hover { background: #25282c; }
[data-theme="dark"] .gb-student-col { background: var(--surface); }
[data-theme="dark"] .gb-avg-row { background: #25282c; }
[data-theme="dark"] .gb-student-row:hover,
[data-theme="dark"] .gb-student-row:hover .gb-student-col { background: #2a2d31; }
[data-theme="dark"] .gb-grade-input:focus { background: #2a2d31; color: var(--text); }
[data-theme="dark"] .act-dropdown { background: #2a2d31; }
[data-theme="dark"] .act-dropdown button:hover { background: #333; }
[data-theme="dark"] .modal { background: var(--surface); }
[data-theme="dark"] .modal-header { border-bottom-color: var(--border); }
[data-theme="dark"] input:not([type="file"]):not([type="checkbox"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #25282c; color: var(--text); border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-hint); }
[data-theme="dark"] .stream-textarea { background: #25282c; color: var(--text); }
[data-theme="dark"] .ann-comment-input { background: #25282c; }
[data-theme="dark"] .ann-expanded { border-top-color: var(--border); }
[data-theme="dark"] .ann-comments { border-left-color: var(--border); }
[data-theme="dark"] .sidebar-card { background: #25282c; }
[data-theme="dark"] .sidebar-input { background: #1e2124; color: var(--text); }
[data-theme="dark"] .card-banner { filter: brightness(0.88); }
[data-theme="dark"] .course-card:hover { filter: brightness(0.93); }
[data-theme="dark"] .empty-state { color: var(--text-secondary); }
[data-theme="dark"] .form-error { background: #3a1e1e; }
[data-theme="dark"] .form-success { background: #1e3a26; color: #81c995; }
[data-theme="dark"] .impersonation-bar { background: #2e2000; border-color: #5a3e00; }
[data-theme="dark"] .auth-body {
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16162a 100%);
}
[data-theme="dark"] .auth-card {
  background: rgba(30,33,36,0.97);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .input-group { background: #25282c; border-color: #2e3136; }
[data-theme="dark"] .input-group:focus-within {
  background: #1e2124;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.15);
}

body {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
input, textarea, button { font-family: inherit; font-size: inherit; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; line-height: 1;
}
.icon-btn {
  background: none; border: none; cursor: pointer; width: 40px; height: 40px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: var(--transition);
}
.icon-btn:hover { background: rgba(0,0,0,0.06); }
.icon-btn .material-symbols-outlined { font-size: 24px; }
/* ─── Sobre de sugerencias (bandeja de respuestas) ─── */
.inbox-btn-wrap { position: relative; display: inline-flex; }
.inbox-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface);
}
[data-theme="dark"] .inbox-badge { box-shadow: 0 0 0 2px var(--surface); }
/* ─── Header ─── */
.header {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  background: var(--surface);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 20px;
  box-shadow: var(--shadow-sm); z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 8px; }
.header-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 0 12px; }
/* Reloj de la escuela. tabular-nums evita que el ancho baile con cada minuto y empuje al
   resto del header. El separador se oculta en movil junto con la fecha. */
.header-clock {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-hint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header-clock-time { font-weight: 500; }
.header-school-name {
  font-size: 16px; font-weight: 500; color: var(--text); opacity: 0.75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 35vw;
}
.header-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: var(--radius-xs); transition: var(--transition); }
.header-logo:hover { background: rgba(0,0,0,0.04); }
.header-title { font-size: 22px; font-weight: 500; color: var(--text); letter-spacing: -0.3px; }
.header-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; position: relative; }

/* ─── Avatar ─── */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #5f6368; color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 16px; flex-shrink: 0; user-select: none;
}
.avatar-huge {
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 28px; flex-shrink: 0;
}

/* ─── User Menu ─── */
.user-menu {
  position: absolute; top: 52px; right: 0; background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 300px;
  display: none; z-index: 300; overflow: hidden; animation: menuSlide 0.2s ease;
}
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.user-menu.show { display: block; }
.user-menu-header { display: flex; align-items: center; gap: 16px; padding: 24px; }
.user-menu-info { min-width: 0; }
.user-menu-name { font-weight: 500; font-size: 16px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-email { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-divider { height: 1px; background: var(--border); }
.user-menu-item {
  width: 100%; padding: 14px 24px; background: none; border: none; text-align: left;
  font-size: 14px; cursor: pointer; color: var(--text);
  display: flex; align-items: center; gap: 12px; transition: var(--transition);
}
.user-menu-item:hover { background: #f5f5f5; }
.user-menu-item .material-symbols-outlined { font-size: 20px; color: var(--text-secondary); }
/* ─── Drawer ─── */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; pointer-events: none;
}
.drawer.open { pointer-events: all; }
.drawer-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s;
}
.drawer.open .drawer-overlay { opacity: 1; }
.drawer-content {
  position: absolute; top: 0; left: 0; bottom: 0; width: 300px;
  background: var(--surface); transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer.open .drawer-content { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; gap: 12px; padding: 16px 12px; border-bottom: 1px solid var(--border); }
.drawer-title { font-size: 20px; font-weight: 500; color: var(--text); }
.drawer-body { padding: 8px; flex: 1; }
.drawer-item {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  font-size: 14px; font-weight: 500; color: var(--text);
  border-radius: 0 24px 24px 0; margin-right: 16px; transition: var(--transition);
}
.drawer-item.active { background: var(--primary-light); color: var(--primary); }
.drawer-item:hover { background: rgba(0,0,0,0.04); }
.drawer-item .material-symbols-outlined { font-size: 22px; }
/* "Cerrar sesión" es un <button>, no un <a>: sin esto hereda el look de botón del
   navegador (fondo gris, borde, fuente distinta) y desentona con el resto del menú. */
.drawer-item-btn {
  width: calc(100% - 16px); background: none; border: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
.drawer-divider { height: 1px; background: var(--border); margin: 8px 16px 8px 0; }

/* ─── Main Content ─── */
.main-content { margin-top: 80px; padding: 24px 32px; max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ─── Dashboard ─── */
.dashboard-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.dashboard-topbar h2 { font-size: 28px; font-weight: 500; color: var(--text); letter-spacing: -0.5px; }
.dashboard-actions { display: flex; gap: 12px; }
.pending-band { display: flex; align-items: center; gap: 12px; background: #e8f0fe; color: #174ea6; border-radius: 10px; padding: 13px 20px; margin-bottom: 24px; font-size: 14px; }
.pending-band .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.pending-band-urgent { color: #c5221f; }
[data-theme="dark"] .pending-band { background: rgba(26,115,232,.14); color: #8ab4f8; }
[data-theme="dark"] .pending-band-urgent { color: #f28b82; }

/* ─── Buscador de actividades ─── */
.act-search-wrap { padding: 0 0 12px; }
.act-search-wrap .input-group { margin: 0; }

/* ─── Section ─── */
.section { margin-bottom: 48px; }
.section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.section-icon { font-size: 22px !important; color: var(--primary); }
.section-header h3 { font-size: 15px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; }

/* ─── Empty State ─── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-hint); }
.empty-state.small { padding: 32px 24px; }
.empty-icon { margin-bottom: 12px; }
.empty-icon .material-symbols-outlined { font-size: 48px !important; color: var(--border); }
.empty-state p { font-size: 15px; }

/* ─── Course Grid ─── */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
/* ─── Course Card ─── */
.course-card {
  display: flex; flex-direction: column; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-banner {
  background: linear-gradient(135deg, var(--card-color, #1a73e8), color-mix(in srgb, var(--card-color, #1a73e8) 75%, black));
  padding: 18px 20px 16px; min-height: 140px;
  display: flex; align-items: flex-start; justify-content: space-between;
  position: relative; overflow: hidden;
}
.card-banner-content { position: relative; z-index: 1; flex: 1; min-width: 0; padding-right: 12px; }
.card-banner h4 {
  color: white; font-size: 22px; font-weight: 600;
  margin-bottom: 5px; line-height: 1.25; word-wrap: break-word;
}
.card-banner p { color: rgba(255,255,255,0.82); font-size: 13px; }
.card-banner-deco {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,0.12); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  margin-top: 4px;
}
.card-banner-deco .material-symbols-outlined {
  font-size: 40px !important; color: rgba(255,255,255,0.75);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}
.card-body {
  padding: 14px 20px; flex: 1; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.card-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.card-stat .material-symbols-outlined { font-size: 18px !important; color: var(--text-hint); }
.card-footer {
  padding: 4px 8px; display: flex; justify-content: space-between; align-items: center;
}
.card-footer-icons { display: flex; }
.card-icon-btn { color: var(--text-secondary); width: 36px; height: 36px; }
.card-icon-btn .material-symbols-outlined { font-size: 20px; }
.card-icon-btn:hover { color: var(--text); background: rgba(0,0,0,0.05); }
.card-owner-badge { font-size: 11px; font-weight: 600; color: white; background: rgba(26,115,232,0.15); padding: 3px 10px; border-radius: 100px; }
.card-copied-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #323232; color: white; padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: 14px; z-index: 999; animation: toastIn 0.2s ease;
  pointer-events: none;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ─── Buttons ─── */
.btn {
  padding: 10px 24px; border-radius: 100px; font-size: 14px; font-weight: 500;
  cursor: pointer; border: none; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.2px;
}
.btn .material-symbols-outlined { font-size: 20px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 2px 8px rgba(26,115,232,0.3); }
.btn-outline { background: var(--surface); color: var(--primary); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--primary-light); border-color: var(--primary); }
.btn-full { width: 100%; justify-content: center; }
/* ─── Auth Pages ─── */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  position: relative; overflow: hidden;
}
.auth-body::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(102,126,234,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(118,75,162,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(26,115,232,0.15) 0%, transparent 50%);
  animation: authBgShift 12s ease-in-out infinite alternate;
}
@keyframes authBgShift {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.15) rotate(3deg); }
}
.auth-body::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102,126,234,0.12) 0%, transparent 70%);
  top: -150px; right: -150px;
  animation: authFloat 18s ease-in-out infinite alternate;
}
@keyframes authFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-80px, 80px) scale(1.2); }
}
.auth-container {
  width: 100%; max-width: 420px; padding: 16px;
  position: relative; z-index: 1;
}
.auth-card {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.03),
    0 12px 30px rgba(0,0,0,0.08),
    0 30px 60px rgba(0,0,0,0.12);
  animation: cardFade 0.5s ease;
  border: 1px solid rgba(255,255,255,0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.auth-card:hover {
  box-shadow:
    0 4px 6px rgba(0,0,0,0.03),
    0 12px 30px rgba(0,0,0,0.08),
    0 40px 80px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}
@keyframes cardFade { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo h1 { font-size: 26px; font-weight: 500; margin-top: 12px; color: var(--text); }
.auth-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-link { text-align: center; font-size: 14px; color: var(--text-secondary); margin-top: 24px; }
.auth-link a { color: var(--primary); font-weight: 500; }
.auth-link a:hover { text-decoration: underline; }

/* ─── Auth Button ─── */
.auth-form .btn-full {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.auth-form .btn-full::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.auth-form .btn-full:hover::before { opacity: 1; }
.auth-form .btn-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26,115,232,0.4);
}
.auth-form .btn-full:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}
.auth-form .btn-full .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Input Group ─── */
.input-group {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--border); border-radius: 12px;
  padding: 0 14px; transition: all 0.25s ease; background: #f8f9fa;
}
.input-group:focus-within {
  border-color: var(--primary); background: white;
  box-shadow: 0 0 0 4px rgba(26,115,232,0.12);
}
.input-icon {
  font-size: 22px !important; color: var(--text-hint);
  transition: color 0.25s ease;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.input-group:focus-within .input-icon {
  color: var(--primary);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.input-group input {
  flex: 1; padding: 14px 0; border: none; background: transparent;
  font-size: 15px; outline: none; color: var(--text);
}
.input-group input::placeholder {
  color: var(--text-hint);
  font-weight: 400;
}

/* ─── Form Error ─── */
.form-error { color: var(--danger); font-size: 13px; display: none; padding: 8px 12px; background: #fce8e6; border-radius: var(--radius-xs); }
.form-error.show { display: block; }

/* ─── Form Success ─── */
/* Contraparte de .form-error para confirmaciones dentro de un formulario (ej. el modal
   "Enviar solicitud para unirme"). Mismo alto y radio, para que mostrar uno u otro no
   sacuda el layout del modal. */
.form-success { color: var(--success, #137333); font-size: 13px; display: none; padding: 8px 12px; background: #e6f4ea; border-radius: var(--radius-xs); }
.form-success.show { display: block; }

/* ─── Modal ─── */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: none;
  align-items: center; justify-content: center; z-index: 500;
  padding: 16px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: modalSlide 0.25s ease;
}
@keyframes modalSlide { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Upload overlay (avatar y portada de curso) ─── */
.profile-avatar-wrap { position: relative; display: inline-block; }
.upload-overlay {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.upload-overlay.show { opacity: 1; }
.upload-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: spin 0.75s linear infinite;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-header-left { display: flex; align-items: center; gap: 12px; }
.modal-header-icon { font-size: 24px !important; color: var(--primary); }
.modal-header h3 { font-size: 22px; font-weight: 500; color: var(--text); }
.modal-body { padding: 24px; }
.modal-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.warning-banner {
  display: flex; align-items: center; gap: 10px;
  background: #fef7e0; border: 1px solid #fde293; padding: 12px 16px;
  border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 20px;
}
.warning-icon { font-size: 20px !important; color: #ea8600; }
/* ─── Course Header ─── */
.course-header {
  background: linear-gradient(135deg, var(--card-color, #1a73e8), color-mix(in srgb, var(--card-color, #1a73e8) 70%, black));
  color: white; padding: 40px; border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; position: relative; overflow: hidden;
}
.course-header::after {
  content: ''; position: absolute; top: -30%; right: -10%;
  width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.06);
}
.course-header-info { position: relative; z-index: 1; }
.course-header h2 { font-size: 36px; font-weight: 500; margin-bottom: 4px; }
.course-section { font-size: 15px; opacity: 0.9; margin-bottom: 12px; }
.course-meta { display: flex; gap: 12px; }
.course-code-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.2); padding: 6px 14px;
  border-radius: 100px; font-size: 14px; font-weight: 500; backdrop-filter: blur(4px);
}
.course-code-badge .material-symbols-outlined { font-size: 18px !important; }
.course-owner { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.course-owner-name { font-size: 15px; font-weight: 500; }
.header-customize-btn {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.18); color: white;
  border: 1px solid rgba(255,255,255,0.38); border-radius: 20px;
  padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
  backdrop-filter: blur(6px); transition: background 0.2s;
}
.header-customize-btn:hover { background: rgba(255,255,255,0.32); }
.header-customize-btn .material-symbols-outlined { font-size: 17px !important; }

/* ─── Tabs ─── */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.tab {
  padding: 14px 24px; background: none; border: none; font-size: 14px;
  font-weight: 500; color: var(--text-secondary); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: var(--transition); display: flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--text); background: rgba(0,0,0,0.02); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab .material-symbols-outlined { font-size: 20px; }
.tab-content.hidden { display: none; }

/* ─── FAB (Floating Action Button) ─── */
.fab {
  position: fixed; bottom: 32px; right: 32px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(26,115,232,0.45);
  font-size: 24px; z-index: 90;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.fab:hover {
  background: var(--primary-dark);
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(26,115,232,0.55);
}
.fab .material-symbols-outlined { font-size: 28px; }

/* FAB de sugerencias: queda en la posición base (`.fab` → bottom:32px). Cuando aparece
   el FAB de acción primaria (`#fabBtn`, ej: el "+" para crear actividad en /courses/:id
   para el docente), ese se posiciona ARRIBA y el de sugerencias queda debajo. Preferencia
   explícita del dueño: sugerencias siempre debajo del "+", incluso cuando conviven.
   Color ámbar/anaranjado (Material amber-800) para diferenciarlo visualmente del FAB
   azul (var(--primary)) y por asociación cromática con el ícono "lightbulb". */
#fabSuggest {
  background: #f9a825;
  box-shadow: 0 4px 16px rgba(249,168,37,0.45);
}
#fabSuggest:hover {
  background: #e17f00;
  box-shadow: 0 6px 24px rgba(225,127,0,0.55);
}
#fabBtn { bottom: 100px; }

/* ─── Activity Tab Cards ─── */
.activities-list { display: flex; flex-direction: column; }
.activity-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px; transition: box-shadow 0.2s;
}
.activity-card:hover { box-shadow: var(--shadow-md); }
.activity-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}
.activity-icon .material-symbols-outlined { font-size: 20px; }
.activity-info { flex: 1; min-width: 0; }
.activity-title { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.activity-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.activity-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-hint); align-items: center; }
.activity-due { color: #ea8600; }
.activity-points-badge { color: var(--primary); font-weight: 500; }

/* ─── Stream Activity Cards (Novedades) ─── */
.stream-activity-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; transition: box-shadow 0.2s;
}
.stream-activity-card:hover { box-shadow: var(--shadow-md); }
.stream-activity-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.stream-activity-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--secondary); display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}
.stream-activity-icon .material-symbols-outlined { font-size: 20px; }
.stream-activity-info { flex: 1; min-width: 0; }
.stream-activity-title { font-weight: 600; font-size: 15px; color: var(--text); }
.stream-activity-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.stream-activity-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.stream-activity-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-secondary); }
.stream-act-meta-item { display: flex; align-items: center; gap: 4px; }
.stream-act-btn { font-size: 13px; padding: 6px 16px; flex-shrink: 0; }
.stream-grade-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--secondary-light); color: var(--secondary); font-weight: 600;
  padding: 3px 10px; border-radius: 100px; font-size: 12px;
}

/* ─── Activity Detail Modal ─── */
.detail-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--text-secondary);
  padding: 12px 16px; background: var(--bg); border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.student-grade-box {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; background: var(--bg); border-radius: var(--radius-sm);
  margin-top: 20px;
}

/* ─── Grade Table ─── */
.grade-table-wrap { overflow-x: auto; }
.grade-table { width: 100%; border-collapse: collapse; }
.grade-table th {
  text-align: left; padding: 10px 14px;
  font-size: 12px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase;
  border-bottom: 2px solid var(--border); white-space: nowrap;
}
.grade-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grade-table tbody tr:last-child td { border-bottom: none; }
.grade-table tbody tr:hover td { background: #fafafa; }
.grade-input {
  width: 80px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; transition: border-color 0.2s;
}
.grade-input:focus { border-color: var(--primary); }
.grade-saved { font-size: 12px; color: var(--secondary); display: none; font-weight: 600; }
.grade-saved.show { display: inline; }

/* ─── Grade chip (alumno) ─── */
.grade-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.grade-chip.graded  { background: #e6f4ea; color: #1e8e3e; }
.grade-chip.pending { background: var(--bg); color: var(--text-hint); border: 1px solid var(--border); }

/* ─── Attachments — Modal de creación ─── */
.att-section { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 8px; }
.att-buttons { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.att-btn { font-size: 13px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.att-btn .material-symbols-outlined { font-size: 18px; }
.link-input-area { margin-bottom: 12px; }

.att-preview-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.att-preview-card {
  width: 110px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; position: relative; background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.att-preview-thumb {
  height: 72px; display: flex; align-items: center; justify-content: center;
}
.att-preview-ext { font-size: 18px; font-weight: 700; color: white; letter-spacing: 1px; }
.link-thumb { background: var(--bg); }
.att-preview-name {
  padding: 6px 8px; font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--border);
}
.att-preview-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.45); border: none; color: white;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.att-preview-remove .material-symbols-outlined { font-size: 14px; }
.att-preview-remove:hover { background: rgba(0,0,0,0.7); }

/* Modal de error de subida de archivos */
.upl-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
}
.upl-modal {
  background: var(--surface); border-radius: var(--radius);
  padding: 36px 28px 28px; max-width: 400px; width: 90%;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.upl-modal-icon .material-symbols-outlined {
  font-size: 52px; color: #d93025;
}
.upl-modal-title {
  font-size: 17px; font-weight: 600; color: var(--text);
  margin: 14px 0 8px;
}
.upl-modal-msg {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.6; margin-bottom: 24px;
  white-space: pre-line;
}

/* Barra de progreso de subida */
.att-upload-progress-wrap {
  height: 4px; background: var(--border); overflow: hidden;
}
.att-upload-bar {
  height: 100%; background: var(--primary, #1a73e8);
  transition: width 0.2s ease;
}
.att-upload-status {
  padding: 4px 8px; font-size: 10px; color: var(--text-hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--border); text-align: center;
}
.att-preview-card.att-error .att-preview-thumb { background: #d93025 !important; }
.att-preview-card.att-error .att-upload-status { color: #d93025; }

/* ─── Attachments — Lista en detalle y cards ─── */
.att-list { display: flex; flex-direction: column; gap: 6px; }
.att-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); transition: background 0.15s;
}
.att-item:hover { background: var(--bg); }
.att-item-icon {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white; letter-spacing: 0.5px;
}
.link-icon { background: var(--bg); border: 1px solid var(--border); }
.att-item-name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-item-open { font-size: 18px !important; color: var(--text-hint); flex-shrink: 0; }
/* Miniatura de un adjunto que es imagen, en la lista del detalle de la actividad.
   Reemplaza al cuadradito de color con la extensión: "WEBP" no le dice nada a nadie. */
.att-item-thumb {
  background: var(--bg); border: 1px solid var(--border); overflow: hidden; padding: 0;
}
.att-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ídem en la tarjeta del formulario de creación, mientras se arma la actividad. */
.att-thumb-img { background: var(--bg); overflow: hidden; }
.att-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* `var(--bg)` y no el `#f0f4f8` que estaba: en claro es EL MISMO color (--bg vale eso), pero
   el hex fijo con `color: var(--text-secondary)` dejaba el chip en gris claro sobre gris
   claro en modo oscuro (~1,9:1, ilegible). Es la regla de la sala: un fondo en hex obliga a
   declarar su color de texto en hex; si el texto viene de una variable, el fondo también. */
.att-count-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg); color: var(--text-secondary);
  padding: 2px 8px; border-radius: 100px; font-size: 12px;
}

/* ─── Announcement Card ─── */
.announcement-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 24px; padding: 20px; transition: box-shadow 0.2s;
}
.announcement-card:focus-within { box-shadow: var(--shadow-md); }
.announcement-form-header { display: flex; align-items: center; gap: 12px; }
.announcement-form-header input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: 100px; font-size: 14px; outline: none; cursor: pointer; transition: var(--transition);
  background: #fafafa;
}
.announcement-form-header input:focus { border-color: var(--primary); background: white; }
.announcement-form-expanded { display: none; margin-top: 16px; }
.announcement-form-expanded.show { display: block; }
.announcement-form-expanded textarea {
  width: 100%; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 14px; outline: none;
  resize: vertical; transition: var(--transition);
}
.announcement-form-expanded textarea:focus { border-color: var(--primary); }
.announcement-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.image-name { font-size: 12px; color: var(--text-secondary); flex: 1; }
.image-preview-wrap { position: relative; display: inline-block; margin: 12px 0 4px; }
.image-preview-thumb {
  max-width: 280px; max-height: 180px; border-radius: var(--radius-sm);
  object-fit: cover; display: block; box-shadow: var(--shadow-sm);
}
.image-preview-remove {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.65); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: white;
}
.image-preview-remove .material-symbols-outlined { font-size: 14px !important; }
.announcement-form-btns { margin-left: auto; display: flex; gap: 8px; }
.announcements { display: flex; flex-direction: column; gap: 16px; }
/* ─── Announcement Post ─── */
.announcement {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px;
  transition: box-shadow 0.2s; animation: annFade 0.3s ease;
}
@keyframes annFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.announcement:hover { box-shadow: var(--shadow-md); }
.announcement-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.announcement-author { font-weight: 500; font-size: 14px; color: var(--text); }
.announcement-date { font-size: 12px; color: var(--text-hint); margin-left: auto; }
.announcement-text { font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: var(--text); }
.announcement-image { margin-top: 14px; max-width: 100%; max-height: 400px; border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); }
.announcement-image:hover { opacity: 0.95; box-shadow: var(--shadow-md); }

/* ─── Announcement Expandable Card ─── */
.ann-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 0.2s;
  animation: annFade 0.3s ease;
}
.ann-card:hover { box-shadow: var(--shadow-md); }
.ann-stream-item { box-shadow: none !important; border-radius: 0 !important; cursor: pointer; animation: none !important; }
.ann-expand-arrow {
  font-size: 20px !important; color: var(--text-hint); flex-shrink: 0;
  transition: transform 0.22s; user-select: none;
}
.ann-card.expanded .ann-expand-arrow { transform: rotate(180deg); }
.ann-expanded { padding: 4px 20px 20px 20px; border-top: 1px solid var(--border); }
.ann-full-text { font-size: 14px; line-height: 1.75; color: var(--text); white-space: pre-wrap; padding: 14px 0 12px; overflow-wrap: anywhere; word-break: break-word; }
.ann-full-img { max-width: 100%; max-height: 360px; border-radius: var(--radius-sm); display: block; margin-bottom: 16px; }

/* Editar / eliminar la propia novedad (el docente y el alumno sobre lo que publicaron;
   además el docente y el admin pueden eliminar novedades ajenas, como moderación). */
.ann-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 12px; }
.ann-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  padding: 5px 10px; border-radius: var(--radius-sm); transition: background 0.18s, color 0.18s;
}
.ann-action-btn:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.ann-action-btn .material-symbols-outlined { font-size: 17px; }
.ann-action-danger:hover { background: rgba(234,67,53,0.1); color: #ea4335; }
.ann-edited-tag { font-size: 11px; color: var(--text-hint); font-style: italic; margin-left: 4px; }
.ann-edit-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px;
  font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none;
}
.ann-edit-input:focus { border-color: var(--primary); }
.ann-edit-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.ann-edit-btns .btn { padding: 6px 14px; font-size: 13px; }
[data-theme="dark"] .ann-action-btn:hover { background: rgba(255,255,255,0.08); }
.ann-comments { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; padding-left: 8px; border-left: 3px solid var(--border); }
.ann-comment { display: flex; gap: 10px; align-items: flex-start; }
.ann-comment-body { flex: 1; }
.ann-comment-author { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.ann-comment-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.ann-comment-date { font-size: 11px; color: var(--text-hint); margin-top: 3px; }
.ann-comment-form {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.ann-comment-input {
  flex: 1; padding: 8px 16px; border: 1px solid var(--border);
  border-radius: 100px; font-size: 13px; outline: none;
  background: var(--bg); color: var(--text); transition: border-color 0.2s;
}
.ann-comment-input:focus { border-color: var(--primary); }

/* ─── Stream Layout (two-column) ─── */
.stream-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 820px) {
  .stream-layout { grid-template-columns: 1fr; }
  .stream-aside { display: none; }
}
.stream-aside { display: flex; flex-direction: column; gap: 16px; }
.stream-aside-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.stream-code-header {
  display: flex; align-items: center; padding: 14px 16px 4px;
}
.stream-code-label {
  font-size: 13px; font-weight: 600; color: var(--text); flex: 1;
}
.stream-code-value {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 12px 14px;
  font-size: 22px; font-weight: 500; color: var(--primary); letter-spacing: 1px;
}
.stream-upcoming-title {
  font-size: 13px; font-weight: 600; color: var(--text); padding: 14px 16px 8px;
}
.stream-no-upcoming {
  font-size: 13px; color: var(--text-secondary); padding: 0 16px 8px; line-height: 1.5;
}
.stream-ver-todo {
  display: block; width: 100%; text-align: right; padding: 8px 16px 12px;
  font-size: 13px; font-weight: 500; color: var(--primary);
  background: none; border: none; cursor: pointer;
}
.stream-ver-todo:hover { text-decoration: underline; }
.upcoming-item {
  padding: 8px 16px; cursor: pointer; transition: background 0.15s;
  border-top: 1px solid #f5f5f5;
}
.upcoming-item:hover { background: #f8f9fa; }
.upcoming-item-title {
  font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upcoming-item-due { font-size: 12px; color: var(--text-secondary); }

/* min-width:0 obligatorio en columna 1fr de un CSS Grid: sin esto, contenido con líneas
   largas sin wrap (URLs, palabras extensas) fuerza al grid a asignar más ancho del `1fr`,
   haciendo que la columna sobresalga del contenedor `.stream-layout` (250px + 1fr + gap).
   Ver también overflow-wrap:anywhere en .ann-full-text y .ann-comment-text. */
.stream-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#streamList { display: flex; flex-direction: column; gap: 20px; }
.stream-action-row { display: flex; gap: 12px; }
.stream-announce-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 24px; border: 1px solid var(--border);
  border-radius: 100px; background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm);
}
.stream-announce-btn:hover { background: #f8f9fa; border-color: var(--text-secondary); }
.stream-announce-btn .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); }
.stream-form-username { font-size: 14px; font-weight: 500; color: var(--text); }
.stream-textarea {
  display: block; width: 100%; padding: 12px; margin-top: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; outline: none; resize: vertical; transition: var(--transition);
}
.stream-textarea:focus { border-color: var(--primary); }

/* ─── Stream Items ─── */
.stream-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 20px;
  transition: box-shadow 0.2s; animation: annFade 0.3s ease;
}
.stream-item:hover { box-shadow: var(--shadow-md); }
.stream-item-icon {
  width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: white;
}
.stream-item-icon .material-symbols-outlined { font-size: 22px !important; }
.ann-icon { background: var(--primary); }
.act-icon { background: #00897b; }
.stream-item-body { flex: 1; min-width: 0; }
.stream-item-text {
  font-size: 14px; color: var(--text); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stream-item-date { font-size: 12px; color: var(--text-hint); margin-top: 3px; }

/* ─── People ─── */
.people-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 24px; overflow: hidden;
}
.people-card-header {
  display: flex; align-items: center; gap: 8px; padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}
.people-card-header .material-symbols-outlined { font-size: 22px !important; color: var(--primary); }
.people-card-header h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.people-count {
  margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  background: #f0f0f0; padding: 2px 10px; border-radius: 100px;
}
.add-person-btn {
  margin-left: 8px; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--primary); transition: background 0.18s;
}
.add-person-btn:hover { background: rgba(26,115,232,0.1); }
.add-person-btn .material-symbols-outlined { font-size: 22px !important; }
.person-item { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid #f5f5f5; transition: var(--transition); }
.person-item:last-child { border-bottom: none; }
.person-item:hover { background: #fafafa; }
.person-info { min-width: 0; }
.person-name { font-size: 14px; font-weight: 500; color: var(--text); }
.person-email { font-size: 13px; color: var(--text-secondary); }

/* ─── Activity Flat Rows ─── */
#activitiesList { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.activity-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s;
}
.activity-row:last-child { border-bottom: none; }
.activity-row:hover { background: #f8f9fa; }
.activity-row-icon .material-symbols-outlined {
  font-size: 22px; color: var(--text-secondary);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.activity-row-title { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.activity-row-date { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

/* ─── Student Activity Cards ─── */
.act-student-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--transition);
}
.act-student-item:last-child { border-bottom: none; }
.act-student-item:hover { background: var(--bg); }
.act-thumb {
  width: 52px; height: 52px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.act-thumb .material-symbols-outlined { color: white; font-size: 26px !important; }
.act-content { flex: 1; min-width: 0; }
.act-type-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-hint); margin-bottom: 3px;
}
.act-item-title {
  font-size: 15px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-item-date { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.act-item-date.date-overdue { color: #b91c1c; font-weight: 500; }
[data-theme="dark"] .act-item-date.date-overdue { color: #fca5a5; }
.act-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.act-status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: 20px; white-space: nowrap;
}
.act-status-chip.status-pending   { background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border); }
.act-status-chip.status-graded    { background: #e6f4ea; color: #1e8e3e; }
/* Entregada: verde azulado, para que no se confunda con Calificada (verde) ni con Tardía
   (celeste). Fondo Y color en hex, en los dos temas: una pastilla con fondo fijo que deja el
   texto al tema hereda var(--text) y en oscuro queda ilegible — es el bug de 1,10:1 del chat
   de la sala, y el test de contraste lo mide para que no vuelva. */
.act-status-chip.status-submitted { background: #e0f2f1; color: #00695c; }
.act-status-chip.status-overdue   { background: #fce8e6; color: #d93025; }
.act-status-chip.status-late-open { background: #e8f0fe; color: #1a73e8; }
.act-grade-text { font-size: 14px; font-weight: 700; color: var(--text); }
[data-theme="dark"] .act-student-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .act-status-chip.status-submitted { background: #193434; color: #7fd8cd; }
[data-theme="dark"] .act-status-chip.status-graded    { background: rgba(52,168,83,.18);  color: #81c995; }
[data-theme="dark"] .act-status-chip.status-overdue   { background: rgba(217,48,37,.18);  color: #f28b82; }
[data-theme="dark"] .act-status-chip.status-late-open { background: rgba(26,115,232,.18); color: #8ab4f8; }
[data-theme="dark"] .act-status-chip.status-pending   { background: rgba(255,255,255,0.06); }

/* ─── Activity Dropdown ─── */
.act-dropdown {
  position: absolute; background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 500; min-width: 168px;
  overflow: hidden; animation: menuSlide 0.15s ease;
}
.act-dropdown button {
  width: 100%; padding: 11px 16px; background: none; border: none;
  text-align: left; font-size: 14px; cursor: pointer; color: var(--text);
  display: flex; align-items: center; gap: 10px; transition: background 0.12s;
}
.act-dropdown button:hover { background: #f5f5f5; }
.act-dropdown button .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); }

/* ─── Gradebook ─── */
.gradebook-wrap {
  width: 100%; overflow-x: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--surface);
}
.gradebook { border-collapse: collapse; min-width: 100%; }
.gb-student-col {
  width: 200px; min-width: 180px; position: sticky; left: 0; z-index: 2;
  background: var(--surface); border-right: 1px solid var(--border);
}
.gb-act-col {
  min-width: 150px; width: 160px; padding: 14px 16px 10px;
  border-bottom: 2px solid var(--border); border-right: 1px solid #efefef;
  vertical-align: top; text-align: left;
}
.gb-act-date { font-size: 12px; color: var(--text-hint); margin-bottom: 4px; }
.gb-act-title {
  font-size: 13px; font-weight: 500; color: var(--primary); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; margin-bottom: 4px;
}
.gb-act-title:hover { text-decoration: underline; }
.gb-act-pts { font-size: 12px; color: var(--text-secondary); }
.gb-header-row th { background: var(--surface); }
.gb-avg-row { background: #f8f9fa; border-bottom: 1px solid var(--border); }
.gb-avg-label {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  font-size: 13px; color: var(--text-secondary); font-weight: 500;
}
.gb-avg-cell {
  text-align: center; font-size: 13px; color: var(--text-secondary);
  padding: 10px 16px; border-right: 1px solid #efefef;
}
.gb-student-row { border-bottom: 1px solid var(--border); transition: background 0.12s; }
.gb-student-row:hover { background: #f8f9fa; }
.gb-student-row:hover .gb-student-col { background: #f8f9fa; }
.gb-student-name {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  font-size: 14px; font-weight: 500; color: var(--text);
}
.gb-cell {
  padding: 6px 10px; border-right: 1px solid #efefef;
  vertical-align: middle; text-align: center;
}
.gb-grade-wrap { display: flex; align-items: center; gap: 3px; justify-content: center; }
.gb-grade-input {
  width: 52px; text-align: center; padding: 5px 6px;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  font-size: 14px; font-weight: 500; color: var(--text); background: transparent;
  outline: none; transition: border-color 0.15s, background 0.15s;
}
.gb-grade-input:focus { border-color: var(--primary); background: white; }
.gb-grade-input.gb-saved { border-color: var(--secondary); }
.gb-grade-max { font-size: 12px; color: var(--text-hint); }
.gb-grade-display { font-size: 14px; font-weight: 500; color: var(--text); }
.gb-empty-row { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 14px; }

/* ─── Activity Creator Page ─── */
.creator-page { background: #f0f4f8; min-height: 100vh; }

.creator-header {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  background: var(--surface); display: flex; align-items: center;
  justify-content: space-between; padding: 0 20px;
  box-shadow: var(--shadow-sm); z-index: 100;
}
.creator-header-left { display: flex; align-items: center; gap: 12px; }
.creator-header-icon {
  font-size: 28px !important; color: #ea8600;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.creator-header-title { font-size: 20px; font-weight: 500; color: var(--text); }
.creator-header-right { display: flex; align-items: center; gap: 16px; }
.creator-error-inline { font-size: 13px; color: var(--danger); background: #fce8e6; padding: 6px 14px; border-radius: var(--radius-sm); }

.creator-body {
  display: flex; gap: 24px; align-items: flex-start;
  max-width: 1100px; margin: 0 auto;
  padding: 80px 24px 48px;
}
.creator-main { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.creator-sidebar { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

.creator-card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
}

/* Title field */
.creator-title-field { padding: 20px 24px 10px; }
.creator-title-input {
  width: 100%; border: none; border-bottom: 2px solid var(--primary);
  outline: none; font-size: 22px; font-weight: 400; color: var(--text);
  padding-bottom: 6px; background: transparent; font-family: inherit;
}
.creator-title-input::placeholder { color: var(--text-hint); }
.creator-required { font-size: 12px; color: var(--text-hint); display: block; margin-top: 5px; }
.creator-divider { height: 1px; background: var(--border); }

/* Rich editor */
.creator-editor-wrap { padding: 0 24px; }
.creator-editor {
  min-height: 130px; outline: none; font-size: 15px; line-height: 1.6;
  color: var(--text); padding: 14px 0; word-break: break-word;
}
.creator-editor:empty::before {
  content: attr(data-placeholder); color: var(--text-hint); pointer-events: none;
}
.creator-toolbar {
  display: flex; gap: 2px; padding: 8px 0 14px;
  border-top: 1px solid var(--border); margin-top: 8px;
}
.toolbar-btn {
  width: 34px; height: 34px; border: none; background: none;
  border-radius: 6px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: var(--text-secondary);
  transition: background 0.15s; font-family: inherit;
}
.toolbar-btn:hover { background: var(--bg); color: var(--text); }
.toolbar-btn .material-symbols-outlined { font-size: 18px; }

/* Attach section */
.creator-card-section-title {
  padding: 16px 24px; font-weight: 500; font-size: 15px;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.creator-att-row { display: flex; gap: 24px; padding: 20px 24px 4px; flex-wrap: wrap; }
.creator-att-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; min-width: 60px;
}
.creator-att-circle {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.creator-att-circle .material-symbols-outlined { font-size: 26px; color: var(--text-secondary); }
.creator-att-btn:hover .creator-att-circle { background: var(--bg); border-color: #bbb; }
.creator-att-btn > span:last-child { font-size: 12px; color: var(--text-secondary); }

.creator-link-dialog {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 24px; border-top: 1px solid var(--border); margin-top: 8px;
}

/* Sidebar cards */
.sidebar-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
}
.sidebar-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.sidebar-course-name { font-size: 15px; font-weight: 500; color: var(--text); }
.sidebar-course-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.sidebar-chip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 100px;
  padding: 8px 16px; font-size: 14px; color: var(--primary); font-weight: 500;
}
.sidebar-chip .material-symbols-outlined { font-size: 18px; }
.sidebar-input-wrap { position: relative; }
.sidebar-input {
  width: 100%; border: none; border-bottom: 1px solid var(--border);
  padding: 6px 0; font-size: 14px; outline: none; background: transparent;
  color: var(--text); transition: border-color 0.2s; font-family: inherit;
}
.sidebar-input:focus { border-bottom-color: var(--primary); }
.sidebar-hint { font-size: 11px; color: var(--text-hint); margin-top: 5px; }

@media (max-width: 768px) {
  .creator-body { flex-direction: column; padding: 72px 16px 40px; }
  .creator-sidebar { width: 100%; }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .main-content { padding: 16px; }
  .course-grid { grid-template-columns: 1fr; }
  .dashboard-topbar h2 { font-size: 22px; }
  .dashboard-actions .btn span:first-child { display: none; }
  .course-header h2 { font-size: 26px; }
  .course-header { flex-direction: column; gap: 16px; padding: 24px; }
  .auth-card { padding: 32px 24px; }
  .drawer-content { width: 280px; }
}
@media (max-width: 480px) {
  .dashboard-actions { flex-direction: column; width: 100%; }
  .dashboard-actions .btn { justify-content: center; }
  .dashboard-topbar { flex-direction: column; align-items: flex-start; }
  .course-grid { grid-template-columns: 1fr; }
}
select, .select-input {
  flex: 1; padding: 14px 0; border: none; background: transparent;
  font-size: 14px; outline: none; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.input-group:has(select) { position: relative; }
.input-group:has(select)::after {
  content: '▼'; font-size: 10px; color: var(--text-hint);
  position: absolute; right: 14px; pointer-events: none;
}
/* ─── Admin Stats ─── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
  background: var(--surface); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 20px;
  border-left: 4px solid var(--stat-color);
}
.stat-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--stat-color) 12%, white); display: flex; align-items: center; justify-content: center; }
.stat-icon .material-symbols-outlined { font-size: 28px !important; color: var(--stat-color); }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 32px; font-weight: 600; color: var(--text); line-height: 1.2; }
.stat-label { font-size: 13px; color: var(--text-secondary); }

/* ─── Filter Bar ─── */
.filter-bar { margin-bottom: 24px; }
.filter-form { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Users Table ─── */
.users-table-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.users-table { width: 100%; border-collapse: collapse; }
/* Padding lateral acotado (era 20 px): con 8 columnas se iban 320 px solo en aire, y eso
   era lo que empujaba la columna Acciones fuera de pantalla en /admin/users. */
.users-table th { text-align: left; padding: 14px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; background: #f8f9fa; border-bottom: 1px solid var(--border); }
.users-table td { padding: 14px 12px; font-size: 14px; color: var(--text); border-bottom: 1px solid #f0f0f0; }
.users-table th:first-child, .users-table td:first-child { padding-left: 20px; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: #fafafa; }

.td-email { color: var(--text-secondary); }
.td-date { color: var(--text-hint); font-size: 13px; }
/* Columna "Curso" de /admin/users: nombres cortos y fijos ("1° 1°"), que partidos en dos
   líneas se leerían como dos cursos distintos. La tabla ya scrollea dentro de su tarjeta
   (ver .users-table-card), así que el nowrap no puede desbordar la página. */
.td-curso { white-space: nowrap; font-size: 13.5px; }

/* Vistas con tablas anchas que no entran en los 1100 px del contenedor normal — el
   listado de usuarios suma 8 columnas más dos selects editables y necesita ~1265 px. Con
   el ancho de siempre la columna Acciones quedaba fuera de la pantalla y no había forma
   de llegar al botón sin scrollear la tabla a ciegas.
   El `100%` del min() la deja igual de contenida que antes en pantallas chicas: solo usa
   el espacio que sobra cuando de verdad sobra.

   2026-08-03 — la lleva TODO el panel de admin, no solo las dos vistas con tabla.
   Antes la tenían Usuarios y Materias nada más, y al saltar entre solapas el contenido
   pasaba de 1100 centrado a ancho completo: se corrían de lugar el listado, el título y
   las propias solapas (~90 px a 1280). Que dos pestañas de diez tengan otro ancho es la
   causa del salto, no un detalle de esas dos.

   2026-08-11 — misma corrección en SUPERADMIN y JEFATURA, que se habían quedado afuera.
   En superadmin la tenían solo Usuarios y Roles contra 14 vistas sin ella: cada vez que se
   entraba o salía de esas dos, las 13 solapas se corrían 150 px a la izquierda (medido a
   1440: el nav arrancaba en x=194 y pasaba a x=44). En jefatura pasaba lo mismo entre el
   listado de docentes y el detalle. La regla vale para los cuatro paneles: si una vista
   muestra el nav de sección, va con `.main-content-ancho` — la única forma de que las
   solapas no se muevan es que TODAS las pantallas del panel midan lo mismo.
   Los formularios sueltos (alta/edición) siguen angostos a propósito: no muestran el nav,
   así que no hay solapas que se corran. */
.main-content-ancho { max-width: min(1400px, 100%); }

/* Código de clase en el encabezado de la materia (solo lo ve el docente).
   Va sobre la portada, que puede ser un color, un degradado o una foto: de ahí el fondo
   semitransparente oscuro en vez de un color fijo — legible sobre cualquiera de los tres. */
.course-code {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 5px 10px 5px 12px; border-radius: 20px;
  background: rgba(0,0,0,.28); color: #fff; font-size: 13px;
  backdrop-filter: blur(2px);
}
.course-code .material-symbols-outlined { font-size: 17px; opacity: .9; }
.course-code strong { font-family: monospace; font-size: 15px; letter-spacing: 2px; }
.course-code-copy {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); border: none; border-radius: 50%;
  width: 26px; height: 26px; cursor: pointer; color: #fff; padding: 0;
  transition: var(--transition);
}
.course-code-copy:hover { background: rgba(255,255,255,.34); }
.course-code-copy .material-symbols-outlined { font-size: 15px; opacity: 1; }
/* Los dos selects se dimensionaban por su opción más larga ("Superadministrador",
   "Escuela 4118 San José") y entre los dos se comían 300 px. Recortarlos no esconde nada:
   el valor elegido se sigue leyendo, y el desplegable se abre a su ancho natural. */
.users-table .select-input { max-width: 140px; }
.cb-cell { width: 44px; padding: 14px 8px 14px 16px !important; }
.row-cb, #selectAll { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.users-table tr.selected td { background: var(--primary-light); }

/* ─── Pagination ─── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 18px 20px; border-top: 1px solid #f0f0f0; flex-wrap: wrap; }
.page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-secondary); border: 1px solid var(--border); background: var(--surface); text-decoration: none; transition: var(--transition); }
.page-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; pointer-events: none; }
.page-ellipsis { color: var(--text-hint); padding: 0 6px; font-size: 16px; }

/* ─── Bulk Action Bar ─── */
.bulk-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1c2e; color: #fff; padding: 13px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; z-index: 300; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 -4px 24px rgba(0,0,0,0.25); }
.bulk-bar.visible { transform: translateY(0); }
.bulk-bar-count { font-weight: 600; font-size: 14px; white-space: nowrap; background: rgba(255,255,255,0.12); padding: 5px 12px; border-radius: 20px; }
.bulk-bar-group { display: flex; align-items: center; gap: 8px; }
.bulk-bar-group label { font-size: 13px; color: rgba(255,255,255,0.65); white-space: nowrap; }
.bulk-bar-group select { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.bulk-bar-group select option { background: #1a1c2e; color: #fff; }
.bulk-bar-apply { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 6px 16px; font-size: 13px; cursor: pointer; font-weight: 500; transition: background 0.2s; white-space: nowrap; }
.bulk-bar-apply:hover { background: var(--primary-dark); }
.bulk-bar-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.bulk-bar-clear { margin-left: auto; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background 0.2s; white-space: nowrap; }
.bulk-bar-clear:hover { background: rgba(255,255,255,0.18); }
.badge-disabled { display: inline-block; font-size: 10px; font-weight: 600; color: var(--danger); background: #fce8e6; border-radius: 4px; padding: 1px 5px; margin-left: 6px; text-transform: uppercase; vertical-align: middle; }
[data-theme="dark"] .badge-disabled { background: rgba(234,67,53,0.18); }
.badge-unmatriculated { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 2px 7px; vertical-align: middle; white-space: nowrap; }
[data-theme="dark"] .badge-unmatriculated { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* ─── Actividades: plazo vencido ─── */
.overdue-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 8px; white-space: nowrap; vertical-align: middle; margin-left: 8px; }
.overdue-chip.overdue-closed { color: #b91c1c; background: #fee2e2; }
.overdue-chip.overdue-open  { color: #166534; background: #dcfce7; }
[data-theme="dark"] .overdue-chip.overdue-closed { background: rgba(185,28,28,.2); color: #fca5a5; }
[data-theme="dark"] .overdue-chip.overdue-open  { background: rgba(22,101,52,.2); color: #86efac; }
.submitted-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
[data-theme="dark"] .submitted-chip { color: var(--text-hint); }
.person-disabled { opacity: .55; }
.badge-disabled { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #b91c1c; background: #fee2e2; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
[data-theme="dark"] .badge-disabled { background: rgba(185,28,28,.2); color: #fca5a5; }
.activity-row.is-overdue .activity-row-date { color: #b91c1c; }
[data-theme="dark"] .activity-row.is-overdue .activity-row-date { color: #fca5a5; }

.overdue-control-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); margin: 12px 0; }
.overdue-control-bar.is-closed { background: #fef2f2; border: 1px solid #fecaca; }
.overdue-control-bar.is-open   { background: #f0fdf4; border: 1px solid #bbf7d0; }
[data-theme="dark"] .overdue-control-bar.is-closed { background: rgba(185,28,28,.12); border-color: rgba(185,28,28,.3); }
[data-theme="dark"] .overdue-control-bar.is-open   { background: rgba(22,101,52,.12);  border-color: rgba(22,101,52,.3); }
.overdue-control-left { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.overdue-control-left.closed { color: #b91c1c; }
.overdue-control-left.open   { color: #166534; }
[data-theme="dark"] .overdue-control-left.closed { color: #fca5a5; }
[data-theme="dark"] .overdue-control-left.open   { color: #86efac; }
.overdue-control-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }

/* ─── Actividades: visibilidad para el alumno (programada / oculta) ───
   Ver specs/visibilidad-actividades.spec.md. Todo esto es SOLO de la vista del docente:
   al alumno la actividad no visible directamente no le llega del servidor. */

/* Tarjeta atenuada: se distingue de un vistazo lo que el alumno ya tiene de lo que no.
   Se atenúa el contenido y no la fila entera para que el ojo y el ⋮ sigan legibles —
   son justamente los controles que el docente necesita para publicarla. */
.act-no-visible .act-thumb,
.act-no-visible .act-content { opacity: .55; }
.act-no-visible .vis-chip    { opacity: 1; }

/* Chip de estado, al lado del título. Ámbar = programada (se abre sola), gris = bajada a mano. */
.vis-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 8px; white-space: nowrap; vertical-align: middle; margin-left: 8px; }
.vis-chip.vis-programada { color: #b45309; background: #fef3c7; }
.vis-chip.vis-oculta     { color: #4b5563; background: #e5e7eb; }
[data-theme="dark"] .vis-chip.vis-programada { background: rgba(251,191,36,.15); color: #fbbf24; }
[data-theme="dark"] .vis-chip.vis-oculta     { background: rgba(255,255,255,.08); color: var(--text-hint); }

/* Columna de acciones de la tarjeta: el ojo y el ⋮ van uno al lado del otro, no apilados
   con los chips de la columna de estado. */
.act-actions-col { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.act-eye-btn.is-off { color: #b45309; }
[data-theme="dark"] .act-eye-btn.is-off { color: #fbbf24; }
.act-eye-btn:disabled { opacity: .5; cursor: default; }

/* Barra del modal de detalle, con la misma forma que la de entregas tardías. */
.vis-control-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); margin: 12px 0; }
.vis-control-bar.is-on  { background: var(--bg); border: 1px solid var(--border); }
.vis-control-bar.is-off { background: #fffbeb; border: 1px solid #fde68a; }
[data-theme="dark"] .vis-control-bar.is-off { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.28); }
.vis-control-left { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.vis-control-bar.is-off .vis-control-left { color: #b45309; }
[data-theme="dark"] .vis-control-bar.is-off .vis-control-left { color: #fbbf24; }

.deadline-warning { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: #b91c1c; margin: 16px 0 0; }
.deadline-info    { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: #166534; margin: 16px 0 0; }
[data-theme="dark"] .deadline-warning { background: rgba(185,28,28,.12); border-color: rgba(185,28,28,.3); color: #fca5a5; }
[data-theme="dark"] .deadline-info    { background: rgba(22,101,52,.12);  border-color: rgba(22,101,52,.3); color: #86efac; }
[data-theme="dark"] .pagination { border-top-color: var(--border); }
[data-theme="dark"] .page-btn { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .page-btn:hover { background: var(--primary-light); }
[data-theme="dark"] .users-table tr.selected td { background: var(--primary-light); }

/* ─── Role Badges ─── */
.role-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.role-admin { background: #fce8e6; color: #c5221f; }
.role-directivo { background: #f3e8fd; color: #9334e6; }
.role-teacher { background: #e8f0fe; color: #1a73e8; }
.role-preceptor { background: #fef7e0; color: #ea8600; }
.role-jefe { background: #e0e7ff; color: #3f51b5; }
.role-soe { background: #e0f7fa; color: #0d7377; }
.role-student { background: #e6f4ea; color: #137333; }
/* El superadmin no se muestra como badge en las tablas de usuarios (nadie lo administra
   desde ahí); lo usa la grilla de /superadmin/roles, donde sí aparece como columna. */
.role-superadmin { background: #e8eaed; color: #3c4043; }

/* ─── Suggestions ─── */
.suggestion-card { background: var(--surface); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.suggestion-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.suggestion-text { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0; white-space: pre-wrap; }

/* ─── Toggle switch ─── */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #ccc; border-radius: 24px; cursor: pointer; transition: .3s; }
.toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .3s; }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* ─── Profile ─── */
.profile-header { display: flex; align-items: center; gap: 32px; background: var(--surface); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-sm); }
.profile-avatar { flex-shrink: 0; }
.profile-actions { margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-self: flex-start; flex-shrink: 0; }
.profile-info h2 { font-size: 28px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.profile-email { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; }
.profile-date { font-size: 13px; color: var(--text-hint); margin-top: 12px; }
.profile-actions { margin-top: 24px; }
.profile-action-card { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.profile-action-card h4 { font-size: 16px; font-weight: 500; color: var(--text); }
.user-role { font-size: 12px; }

/* ─── Impersonation Bar ─── */
.impersonation-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 150;
  background: #ea8600; color: white;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 13px; font-weight: 500; padding: 0 20px;
}
.impersonation-bar .material-symbols-outlined { font-size: 18px !important; }
.impersonation-exit {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.2); padding: 5px 14px;
  border-radius: 100px; color: white; font-weight: 600;
  transition: var(--transition); margin-left: 8px;
}
.impersonation-exit:hover { background: rgba(255,255,255,0.35); }
.impersonation-exit .material-symbols-outlined { font-size: 16px !important; }

/* ─── Danger Button ─── */
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #c5221f; box-shadow: 0 2px 8px rgba(234,67,53,0.3); }

/* ─── Admin Nav ─── */
.admin-nav {
  display: flex; gap: 4px; margin-bottom: 28px;
  border-bottom: 2px solid var(--border); padding-bottom: 0;
}
.admin-nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; font-size: 14px; font-weight: 500;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: var(--transition); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.admin-nav-item:hover { color: var(--text); background: rgba(0,0,0,0.03); }
.admin-nav-item.active { color: var(--primary); border-bottom-color: var(--primary); }
.admin-nav-item .material-symbols-outlined { font-size: 20px; }

/* Nav de dos filas — lo usan el de superadmin (12 solapas) y el de admin (10): en una sola
   fila no entraban ni en escritorio y había que scrollear horizontalmente para llegar a las
   últimas. Con esto envuelven solas: se llena la primera fila y lo que no entra baja.

   Dónde cae el corte se decide distinto en cada panel:
   - ADMIN: reparto natural, sin separador. Es lo que pidió el usuario y además es lo único
     que se banca que las solapas se puedan deshabilitar por rol (/superadmin/roles): con un
     corte fijo, apagar tres solapas dejaba la primera fila a medio llenar.
   - SUPERADMIN: corte fijo con .admin-nav-break (abajo), porque ahí el agrupamiento tiene
     sentido semántico y las solapas se buscan siempre en el mismo lugar.

   row-gap 2px compensa el margin-bottom:-2px de las solapas, que si no encimaría la
   segunda fila contra la primera. Las de la fila de abajo conservan ese -2px y siguen
   apoyando sobre el borde del nav, así que la subrayada azul de la solapa activa se ve
   igual que en un nav de una sola fila. */
.admin-nav-2filas { flex-wrap: wrap; row-gap: 2px; }
/* Solo lo usa el nav de superadmin. El corte fijo se aplica solo cuando las 8 primeras
   solapas entran en una fila. Debajo de ese ancho la primera fila ya envuelve sola, y
   forzar el corte igual dejaba una solapa suelta en una fila del medio: tres filas donde
   alcanzaban dos. Sin el corte, el reparto natural la manda junto al resto y quedan dos.

   El umbral sale de una medición, no a ojo: la fila de 8 mide 1000 px, y el ancho útil es
   `min(viewport, 1100) - 64` por el padding de .main-content — o sea que entra a partir de
   un viewport de 1064 px. 1090 deja margen para la barra de scroll. */
.admin-nav-break { display: none; }
@media (min-width: 1090px) {
  .admin-nav-break { display: block; flex-basis: 100%; height: 0; margin: 0; padding: 0; }
}

/* ─── Admin Section Cards ─── */
.admin-section-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 32px; }
.admin-section-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow-sm);
  transition: var(--transition); border: 1px solid transparent;
}
.admin-section-card:hover { box-shadow: var(--shadow-md); border-color: var(--border); transform: translateY(-1px); }
.admin-section-card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-section-card-icon .material-symbols-outlined { font-size: 26px !important; }
.admin-section-card-info h3 { font-size: 16px; font-weight: 500; color: var(--text); }
.admin-section-card-info p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.admin-section-card-arrow { margin-left: auto; font-size: 22px !important; color: var(--text-hint); }

/* ─── Subjects Grid ─── */
.subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.subject-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.subject-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.subject-card-banner {
  height: 100px; display: flex; align-items: center; justify-content: center;
}
.subject-card-banner .material-symbols-outlined { font-size: 44px !important; color: rgba(255,255,255,0.9); }
.subject-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.subject-card-name { font-size: 17px; font-weight: 500; color: var(--text); }
.subject-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.subject-card-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-hint); margin-top: 4px; }
.subject-card-meta .material-symbols-outlined { font-size: 16px !important; }

/* ─── Subject Profile ─── */
.subject-profile-header {
  display: flex; align-items: center; gap: 24px;
  background: var(--surface); border-radius: var(--radius);
  padding: 32px 36px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.subject-profile-icon {
  width: 72px; height: 72px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.subject-profile-icon .material-symbols-outlined { font-size: 36px !important; color: white; }
.subject-profile-info { flex: 1; min-width: 0; }
.subject-profile-info h2 { font-size: 26px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.subject-profile-desc { font-size: 14px; color: var(--text-secondary); }
.subject-profile-date { font-size: 13px; color: var(--text-hint); margin-top: 8px; }
.subject-profile-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ─── Upload Zone ─── */
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 64px 40px; text-align: center; cursor: pointer; background: var(--surface);
  transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--primary); background: var(--primary-light);
}
.upload-zone .material-symbols-outlined { font-size: 56px !important; color: var(--text-hint); }
.upload-zone h3 { font-size: 20px; font-weight: 500; color: var(--text); }
.upload-zone p { font-size: 14px; color: var(--text-secondary); }

/* ─── Import File Info ─── */
.import-file-info {
  display: flex; align-items: center; gap: 10px; background: var(--primary-light);
  border: 1px solid var(--primary); border-radius: var(--radius-sm);
  padding: 12px 18px; font-size: 14px; color: var(--primary); margin-bottom: 20px;
}
.import-file-info .material-symbols-outlined { font-size: 20px !important; }

/* ─── Import Card ─── */
.import-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 16px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.2s;
}
.import-card.active { border-color: var(--primary); }
.import-card-header {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer;
}
.import-card-header input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; accent-color: var(--primary); }
.import-card-header .material-symbols-outlined:not(:last-child) { font-size: 28px !important; flex-shrink: 0; }
.import-card-header h3 { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.import-card-header p { font-size: 13px; color: var(--text-secondary); }
.import-card-body { border-top: 1px solid var(--border); padding: 20px 24px; }

/* ─── Import Results ─── */
.import-results-banner {
  display: flex; align-items: center; gap: 12px; background: #e6f4ea;
  border: 1px solid #34a853; border-radius: var(--radius-sm); padding: 16px 20px;
  font-size: 15px; color: #137333; margin-bottom: 20px; font-weight: 500;
}
.import-results-banner .material-symbols-outlined { font-size: 24px !important; color: #34a853; }
.import-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.import-result-card {
  background: var(--surface); border-radius: var(--radius); padding: 20px 24px;
  box-shadow: var(--shadow-sm); text-align: center; border-top: 4px solid var(--stat-color);
}
.import-result-number { font-size: 40px; font-weight: 700; color: var(--text); line-height: 1.1; }
.import-result-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-top: 6px; }
.import-result-detail { font-size: 12px; color: var(--text-hint); margin-top: 4px; }

/* ─── Color Picker ─── */
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-option {
  width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; transition: var(--transition); position: relative;
}
.color-option:hover { transform: scale(1.15); }
.color-option.selected { border-color: var(--text); box-shadow: 0 0 0 2px white inset; }
.color-option.selected::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px; font-weight: 700;
}

/* ─── Avatar imagen ─── */
.avatar-img { overflow: hidden; padding: 0 !important; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-huge.avatar-img { border-radius: 50%; }

/* ─── Profile: avatar upload ─── */
.profile-avatar-wrap { position: relative; display: inline-block; }
.avatar-upload-btn {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition);
}
.avatar-upload-btn:hover { background: var(--primary-dark); transform: scale(1.1); }
.avatar-upload-btn .material-symbols-outlined { font-size: 16px !important; }
.avatar-remove-btn {
  display: block; margin-top: 8px; font-size: 12px;
  color: var(--danger); background: none; border: none;
  cursor: pointer; text-decoration: underline; text-align: center;
}
.avatar-remove-btn:hover { opacity: 0.8; }

/* ─── Pending band (dashboard) ─── */
.pending-band {
  display: flex; align-items: center; gap: 10px;
  background: #fff8e1; border: 1px solid #f9ab00;
  border-radius: var(--radius-sm); padding: 12px 18px;
  margin-bottom: 20px; font-size: 14px; color: #5f4c00;
}
[data-theme="dark"] .pending-band { background: #2a2200; border-color: #7a5c00; color: #f9d97d; }
.pending-band .material-symbols-outlined { font-size: 20px !important; color: #f9ab00; flex-shrink: 0; }
.pending-band-urgent { color: var(--danger); }
.pending-band-link {
  margin-left: auto; font-size: 13px; font-weight: 500;
  color: var(--primary); text-decoration: none; flex-shrink: 0;
}
.pending-band-link:hover { text-decoration: underline; }

/* ─── Aviso para completar el perfil (dashboard) ───
   Azul informativo, deliberadamente distinto del ámbar de .pending-band: una tarea que
   vence es urgente, completar el perfil es opcional. Si compartieran color, el alumno
   aprendería a ignorar los dos. */
.profile-band {
  display: flex; align-items: center; gap: 10px;
  background: #e8f0fe; border: 1px solid #c2d7fb;
  border-radius: var(--radius-sm); padding: 12px 18px;
  margin-bottom: 20px; font-size: 14px; color: #174ea6;
}
[data-theme="dark"] .profile-band {
  background: rgba(26,115,232,.12); border-color: rgba(138,180,248,.35); color: #8ab4f8;
}
.profile-band > .material-symbols-outlined { font-size: 20px !important; color: #1a73e8; flex-shrink: 0; }
[data-theme="dark"] .profile-band > .material-symbols-outlined { color: #8ab4f8; }
.profile-band-link {
  margin-left: auto; font-size: 13px; font-weight: 500;
  color: var(--primary); text-decoration: none; flex-shrink: 0; white-space: nowrap;
}
.profile-band-link:hover { text-decoration: underline; }
.profile-band-close {
  background: none; border: none; cursor: pointer; padding: 2px;
  display: flex; align-items: center; color: inherit; opacity: .55; flex-shrink: 0;
  border-radius: 50%;
}
.profile-band-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.profile-band-close .material-symbols-outlined { font-size: 18px !important; }
/* En pantallas chicas el texto pasa a ocupar toda la fila y el link baja debajo */
@media (max-width: 620px) {
  .profile-band { flex-wrap: wrap; }
  .profile-band-link { margin-left: 30px; }
}

/* ─── Submitted chip (docente: X/Y entregaron) ─── */
.submitted-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 500; padding: 3px 8px;
  border-radius: 12px; white-space: nowrap;
}

/* ─── Viewed chip (docente: X/Y abrieron la actividad) ─── */
/* Mismo shape que el de entregas pero en gris: van uno al lado del otro en la tarjeta y
   la entrega es el dato importante — el de vistas acompaña, no compite. */
.viewed-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg); color: var(--text-secondary);
  font-size: 12px; font-weight: 500; padding: 3px 8px;
  border-radius: 12px; white-space: nowrap;
}
[data-theme="dark"] .viewed-chip { background: rgba(255,255,255,.06); color: var(--text-hint); }

/* ─── Aviso de acuse de lectura (alumno) ─── */
/* Solo aparece si el admin lo habilitó en /admin/tasks. Deliberadamente discreto:
   es una aclaración, no una advertencia. */
.view-receipt-note {
  display: flex; align-items: center; gap: 6px;
  margin: 18px 0 0; font-size: 11.5px; color: var(--text-hint);
}
.view-receipt-note .material-symbols-outlined { font-size: 14px !important; }

/* ─── Person disabled ─── */
.person-disabled { opacity: 0.65; }
.badge-disabled {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: #fce8e6; color: var(--danger); padding: 2px 8px;
  border-radius: 4px; text-transform: uppercase;
}

/* ─── Activity search wrap ─── */
.act-search-wrap { padding: 12px 0 4px; max-width: 400px; }

/* ─── Pending activities page ─── */
.pending-list { display: flex; flex-direction: column; gap: 0; }
.pending-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: background .15s;
}
.pending-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.pending-item:last-child { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); }
.pending-item:only-child { border-radius: var(--radius); }
.pending-list { border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.pending-item:hover { background: var(--bg); }
.pending-item-overdue { border-left: 3px solid var(--danger); }
.pending-item-today { border-left: 3px solid var(--warning); }
.pending-item-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pending-item-overdue .pending-item-icon { background: #fce8e6; color: var(--danger); }
.pending-item-today .pending-item-icon { background: #fff8e1; color: var(--warning); }
.pending-item-icon .material-symbols-outlined { font-size: 20px !important; }
.pending-item-body { flex: 1; min-width: 0; }
.pending-item-course { font-size: 12px; color: var(--text-hint); margin-bottom: 2px; }
.pending-item-title { font-size: 15px; font-weight: 500; color: var(--text); }
.pending-item-desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-item-right { text-align: right; flex-shrink: 0; }
.pending-due-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; margin-bottom: 4px;
}
.due-today { background: #fff8e1; color: #5f4c00; }
.due-overdue { background: #fce8e6; color: var(--danger); }
.pending-due-date { font-size: 13px; color: var(--text-secondary); }

/* ─── Activity stats / histogram ─── */
.act-stats { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.act-stats-summary {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.stat-pill {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px; min-width: 80px;
}
[data-theme="dark"] .stat-pill { background: #25282c; }
.stat-pill-val { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.stat-pill-lbl { font-size: 11px; color: var(--text-hint); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.act-histogram {
  display: flex; align-items: flex-end; gap: 12px; height: 100px;
}
.hist-bar-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; }
.hist-bar-container { width: 100%; flex: 1; display: flex; align-items: flex-end; padding-bottom: 2px; }
.hist-bar {
  width: 100%; min-height: 4px;
  background: var(--primary); border-radius: 4px 4px 0 0;
  transition: height .3s ease;
}
.hist-bar-count { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 4px; }
.hist-bar-label { font-size: 11px; color: var(--text-hint); margin-top: 2px; }

/* ─── Attachment Preview Overlay (pantalla completa) ─── */
.att-preview-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.96);
  display: flex; flex-direction: column;
  animation: fadeIn .12s ease;
}
.att-preview-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; gap: 12px; flex-shrink: 0;
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(4px);
}
.att-preview-fname {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.att-preview-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85);
  text-decoration: none; font-size: 13px; background: transparent;
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.att-preview-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.att-preview-btn .material-symbols-outlined { font-size: 16px !important; }
.att-preview-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); flex-shrink: 0; transition: background .15s;
}
.att-preview-close:hover { background: rgba(255,255,255,0.18); color: white; }
.att-preview-close .material-symbols-outlined { font-size: 20px !important; }
.att-preview-body { flex: 1; overflow: hidden; display: flex; }
.att-preview-frame { width: 100%; height: 100%; border: none; display: block; background: white; }

/* ─── Attachment preview: loading + no-support states ─── */
.att-preview-body { position: relative; }
.att-preview-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: rgba(255,255,255,0.55); font-size: 14px;
  background: rgba(0,0,0,0.85);
  pointer-events: none;
}
.att-preview-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.75);
  animation: att-spin .75s linear infinite;
}
@keyframes att-spin { to { transform: rotate(360deg); } }
.att-preview-no-support {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: rgba(255,255,255,0.55); text-align: center;
  padding: 40px; width: 100%; height: 100%;
}
.att-preview-no-support .material-symbols-outlined { font-size: 52px !important; color: rgba(255,255,255,0.2); }
.att-preview-no-support p { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.65); }
.att-preview-no-support-sub {
  font-size: 13px; color: rgba(255,255,255,0.35); max-width: 380px; line-height: 1.5;
}

/* ─── Teacher activity detail modal (wide) ─── */
.modal.modal-detail {
  max-width: min(1100px, 95vw);
  width: 95vw;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}
.modal.modal-detail .modal-header { flex-shrink: 0; }
.modal.modal-detail .modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 24px;
}

/* ─── Grade table ─── */
.grade-table-wrap { overflow-x: auto; margin-top: 12px; }
.grade-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 13px;
}
.grade-table thead th {
  text-align: left; padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  color: var(--text-secondary); font-weight: 600;
  white-space: nowrap; position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}
.grade-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.grade-table tbody tr:last-child td { border-bottom: none; }
.grade-table tbody tr:hover td { background: var(--hover-bg); }

/* 5 columnas desde que se sumó "Visto". Feedback y Entrega cedieron el ancho: son las
   dos que mejor toleran achicarse (la primera es un textarea que crece a lo alto, la
   segunda ya recorta con ellipsis). "Visto" solo tiene que entrar un badge y una fecha. */
.gt-col-student  { width: 24%; }
.gt-col-grade    { width: 10%; }
.gt-col-feedback { width: 30%; }
.gt-col-view     { width: 13%; }
.gt-col-sub      { width: 23%; }

/* Student cell */
.gt-student-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gt-student-name {
  font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gt-student-email {
  font-size: 11.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

/* Grade cell */
.gt-grade-wrap { display: flex; align-items: center; gap: 4px; }
.gt-pts-max { font-size: 11px; color: var(--text-secondary); }
.grade-table .grade-input {
  width: 64px; text-align: center;
  padding: 4px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); font-size: 14px;
}
.grade-table .grade-input:focus { outline: none; border-color: var(--primary); }

/* Feedback cell */
.grade-table .feedback-input {
  width: 100%; resize: vertical;
  padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); font-size: 12.5px;
  font-family: inherit; line-height: 1.45;
}
.grade-table .feedback-input:focus { outline: none; border-color: var(--primary); }

/* Submission cell */
.gt-sub-delivered { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gt-sub-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; border-radius: 20px;
  padding: 2px 9px; width: fit-content;
}
.gt-sub-badge .material-symbols-outlined { font-size: 13px !important; }
.gt-sub-ok   { background: #e6f4ea; color: #1e7e34; }
.gt-sub-pending { background: #fef3cd; color: #856404; }

/* Acuse de lectura (reusa .gt-sub-badge como base). Azul y no verde para que no se
   confunda con "Entregado" leyendo la fila de reojo, y gris neutro para "Sin abrir":
   todavía no haber abierto no es una falta. */
.gt-view-ok   { background: #e8f0fe; color: #1967d2; }
.gt-view-none { background: #f1f3f4; color: #5f6368; }
.gt-sub-date {
  font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 2px;
}
.gt-sub-text {
  font-size: 11.5px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.gt-sub-file {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; text-decoration: none;
}
.gt-sub-file:hover { text-decoration: underline; }
.gt-sub-file .material-symbols-outlined { font-size: 13px !important; flex-shrink: 0; }

/* Summary line above table */
.gt-summary {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-secondary);
  margin-top: 16px; flex-wrap: wrap;
}
.gt-summary-val { font-weight: 700; }
.gt-summary-sep { color: var(--border); }

/* Dark mode overrides.
   Van con [data-theme="dark"] y NO con @media (prefers-color-scheme: dark), que es lo
   que usaba esta tabla antes. partials/header.ejs setea data-theme SIEMPRE (default
   'light') y es lo que mueve el botón de tema, así que el media query respondía al SO
   e ignoraba la elección del usuario: con el sistema en oscuro y la app en claro, los
   badges salían oscuros en una tabla blanca. Verificado en el navegador. */
[data-theme="dark"] .gt-sub-ok      { background: #1a3a22; color: #6fcf7a; }
[data-theme="dark"] .gt-sub-pending { background: #3a2e0a; color: #f5c842; }
[data-theme="dark"] .gt-view-ok     { background: #1c2f4a; color: #8ab4f8; }
[data-theme="dark"] .gt-view-none   { background: #2a2c2e; color: #9aa0a6; }

/* ─── Task Builder / Runner ─────────────────────────────────────────────── */

/* Index del gestor: lista de plantillas */
.template-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.template-row {
  display: flex; gap: 20px; align-items: center; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  transition: box-shadow .15s;
}
.template-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.template-row-main { flex: 1; min-width: 0; }
.template-row-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.template-row-title h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.template-row-desc { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.template-row-meta {
  display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-hint);
}
.template-row-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.template-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
}

/* Builder: campo descripción bajo el título */
.task-desc-field {
  display: block; width: calc(100% - 48px); margin: 4px 24px 20px;
  padding: 8px 0; border: none; border-bottom: 1px solid var(--border);
  font-size: 14px; font-family: inherit; color: var(--text-secondary);
  background: transparent; resize: none; outline: none;
}
.task-desc-field:focus { border-bottom-color: var(--primary); }
.questions-container { display: flex; flex-direction: column; gap: 16px; }
.add-question-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; color: var(--text-hint); font-size: 13px; font-style: italic;
}

/* Question type picker (sidebar) */
.qtype-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.qtype-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 500;
  color: var(--text); text-align: center; transition: all .15s;
}
.qtype-card:hover { background: var(--primary-light, #e8f0fe); border-color: var(--primary); color: var(--primary); }
.qtype-card .material-symbols-outlined { font-size: 24px; }

/* Question card (builder) */
.question-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.question-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.question-card-type {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--primary);
}
.question-card-type .material-symbols-outlined { font-size: 18px; }
.question-card-idx { color: var(--text-hint); font-size: 12px; margin-left: 8px; }
.question-card-actions { margin-left: auto; display: flex; gap: 4px; }
.question-card-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.q-row { display: flex; flex-direction: column; gap: 6px; }
.q-row-inline { flex-direction: row; align-items: center; gap: 12px; }
.q-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; }
.q-prompt, .q-common-instr, .fill-template, .mc-option-text {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit; font-size: 14px;
  background: var(--surface); color: var(--text); outline: none; box-sizing: border-box;
}
.q-prompt:focus, .q-common-instr:focus, .fill-template:focus, .mc-option-text:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,115,232,.15);
}
.q-points { width: 90px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.q-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.q-hint { margin: 0; font-size: 12px; color: var(--text-hint); font-style: italic; }
.btn-add-small {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px;
  background: transparent; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--primary); font-size: 12px; cursor: pointer; align-self: flex-start;
}
.btn-add-small:hover { background: var(--primary-light, #e8f0fe); border-color: var(--primary); }
.btn-add-small .material-symbols-outlined { font-size: 16px; }

/* Múltiple choice — editor */
.mc-options-list { display: flex; flex-direction: column; gap: 6px; }
.mc-option-editor { display: flex; align-items: center; gap: 8px; }
.mc-option-editor input[type="text"] { flex: 1; }

/* Verdadero/Falso — editor */
.tf-choice-editor { display: flex; gap: 20px; }
.tf-choice-editor label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }

/* Unir con flechas — editor */
.match-columns { flex-direction: row; gap: 16px; }
.match-column { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.match-item-editor { display: flex; align-items: center; gap: 6px; }
.match-item-editor input[type="text"] {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
.match-pairs-list { display: flex; flex-direction: column; gap: 6px; }
.match-pair-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg); border-radius: 6px; }
.match-pair-left { flex: 1; font-size: 13px; color: var(--text); }
.match-pair-row select {
  flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 12px;
}

/* Completar palabra — editor */
.fill-answer-editor { display: flex; gap: 6px; }
.fill-answer-editor input[type="text"] {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}

/* ─── Runner (preview y entrega alumno) ─────────────────────────────────── */

.preview-topbar {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px;
}
.preview-topbar-title { flex: 1; }
.preview-topbar-title h2 { margin: 0; font-size: 22px; color: var(--text); }
.preview-topbar-title p { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
.preview-description { margin: 0 0 20px; padding: 12px 16px; background: var(--bg); border-radius: 8px; font-size: 14px; color: var(--text-secondary); }

.runner-container { display: flex; flex-direction: column; gap: 16px; }
.run-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.run-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.run-card-type { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .3px; }
.run-card-type .material-symbols-outlined { font-size: 16px; }
.run-card-idx { font-size: 12px; color: var(--text-hint); }
.run-card-prompt { margin: 0 0 12px; font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.5; }
.run-card-body { display: flex; flex-direction: column; gap: 8px; }

.run-mc-list { display: flex; flex-direction: column; gap: 6px; }
.run-mc-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all .15s;
}
.run-mc-option:hover { border-color: var(--primary); background: var(--primary-light, #e8f0fe); }
.run-mc-option input { flex-shrink: 0; }
.run-mc-option span { flex: 1; }

.run-tf-choice { display: flex; gap: 16px; margin-top: 4px; }
.run-tf-choice label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500;
}
.run-tf-choice label:hover { border-color: var(--primary); }

.run-match { display: flex; flex-direction: column; gap: 8px; }
.run-match-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--bg); border-radius: 8px;
}
.run-match-left { flex: 1; font-size: 14px; color: var(--text); font-weight: 500; }
.run-match-select {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
}

.run-fill-line { margin: 0; font-size: 15px; line-height: 2; color: var(--text); }
.run-fill-input {
  display: inline-block; min-width: 140px; padding: 4px 10px;
  border: none; border-bottom: 2px solid var(--primary); background: transparent;
  font-family: inherit; font-size: 15px; color: var(--text); outline: none;
  vertical-align: baseline;
}
.run-fill-input:focus { border-bottom-color: var(--primary); background: var(--primary-light, #e8f0fe); }

.run-common-text {
  width: 100%; min-height: 100px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-family: inherit; font-size: 14px;
  background: var(--surface); color: var(--text); resize: vertical; outline: none;
  box-sizing: border-box;
}
.run-common-instr { margin: 0 0 10px; padding: 10px 14px; background: var(--bg); border-radius: 6px; font-size: 13px; color: var(--text-secondary); }

.runner-footer { margin-top: 20px; }

/* Resultado autocalificado */
.runner-result {
  margin-top: 24px; padding: 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.result-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.result-score { display: flex; align-items: baseline; gap: 4px; }
.result-score-value { font-size: 32px; font-weight: 700; color: var(--primary); }
.result-score-max { font-size: 18px; color: var(--text-hint); }
.result-score-pct { font-size: 24px; font-weight: 600; color: var(--text-secondary); }
.result-list { display: flex; flex-direction: column; gap: 10px; }
.result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg); border-radius: 8px;
}
.result-row .material-symbols-outlined { font-size: 22px; }
.result-row-info { flex: 1; min-width: 0; }
.result-row-prompt { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-row-meta { font-size: 11px; color: var(--text-hint); margin-top: 2px; }

/* Dark mode overrides — task builder / runner */
@media (prefers-color-scheme: dark) {
  .qtype-card:hover, .run-mc-option:hover, .run-fill-input:focus { background: rgba(26,115,232,.15); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE UNIFICADO (2026-07-30)
   ═══════════════════════════════════════════════════════════════════════════
   Corrige cuatro problemas medidos en viewport de 375 px:

   1. DESFASAJE DE ANCHO — `.admin-nav` es un flex sin wrap con hasta 11 solapas.
      Medía 1356 px y estiraba el <body> a 1372 px, provocando scroll horizontal en
      TODAS las páginas del panel. Ahora colapsa en un botón (ver js/nav-responsive.js).
   2. SOLAPAS INTERMINABLES — mismo origen.
   3. ESPACIO VACÍO AL SCROLLEAR — /preceptor medía 8356 px de alto: 39 tarjetas de
      ~214 px en una sola columna, por el min-height:140px del banner.
   4. LETRAS QUE NO SE ACHICAN — solo `.dashboard-topbar h2` tenía media query.

   Va al final del archivo a propósito: estas reglas tienen que ganarle a las de arriba
   sin subir la especificidad a mano ni ensuciar los bloques originales.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Contención de ancho ───────────────────────────────────────────────────
   Red de seguridad: ningún hijo debería poder estirar la página. Es lo que evita
   que un elemento ancho nuevo (una tabla, un nav, un <pre>) reintroduzca el
   scroll horizontal sin que nadie se dé cuenta. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Reserva el canal de la barra vertical SIEMPRE, haya o no scroll. Sin esto, pasar de
   una pantalla corta (Tema) a una larga (Usuarios) hace aparecer la barra, el viewport
   se angosta 15 px y todo el contenido se corre. Era el segundo corrimiento del panel de
   admin, encima del salto de ancho de contenedor (ver .main-content-ancho). El costo es
   un canal vacío en las pantallas cortas; la alternativa es que la página salte. */
html { scrollbar-gutter: stable; }

.main-content { width: 100%; box-sizing: border-box; }
/* Las tablas anchas scrollean DENTRO de su contenedor, nunca empujando la página.
   Varias vistas ya envuelven la tabla en un div con overflow-x:auto; esto cubre a
   las que no (p. ej. la de /admin/users, cuyo contenedor tenía overflow:hidden y
   directamente recortaba las columnas de la derecha). */
.table-wrap, .table-container, .simple-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }
/* `.users-table-card` usa overflow:hidden para recortar las esquinas al radio de la
   tarjeta, pero eso RECORTABA la tabla: en /admin/users medía 1050 px y las columnas de
   la derecha quedaban inaccesibles, sin scroll posible. overflow-x:auto conserva el
   clipping vertical (el radio se sigue viendo) y devuelve el scroll horizontal. */
.users-table-card { overflow-x: auto; }

/* ─── Columnas fijas en los listados anchos (2026-08-02) ────────────────────
   Cuando una tabla no entra y hay que correrla en horizontal, lo primero que se pierde
   es justo lo que más se usa: el botón de la derecha (Ver perfil, Editar, Gestionar) o,
   scrolleando al revés, el nombre de la fila que estás leyendo. Dos clases opcionales,
   que se ponen en la <table>:

     .acciones-fijas  → ancla la ÚLTIMA columna a la derecha (columna de acciones)
     .nombre-fijo     → ancla la PRIMERA columna a la izquierda (nombre de la fila)

   Son opt-in a propósito: en las tablas donde la última columna es un dato más
   (las previsualizaciones de importación, por ejemplo) anclarla no aportaría nada.

   Las celdas ancladas necesitan fondo propio: son transparentes y, al quedar flotando
   sobre las demás, se leerían encimadas. Los tres colores salen de variables con el
   default de la mayoría de las tablas del panel, y cada tabla puede pisarlos. */
/* El default es el fondo de la tarjeta, que es el de la celda común de casi todas las
   tablas. Las tablas cuyo encabezado o hover tienen color propio pisan estas variables —
   ver `.users-table` acá abajo, `.sp-table` en views/superadmin/school-profile.ejs y las
   tablas de directivo/preceptor, que van en `var(--bg)` — y por eso el selector se queda
   en una clase: con `table.` de más, ningún override de una sola clase podría ganarle. */
.acciones-fijas, .nombre-fijo {
  --celda-fija-bg:       var(--surface);
  --celda-fija-bg-head:  var(--surface);
  --celda-fija-bg-hover: var(--surface);
}
/* Esto sí va con `table.`: varias vistas definen su tabla en un <style> propio del <head>,
   que por orden de aparición le gana a este archivo, y hay que pisarles el `overflow`.
   Traen overflow:hidden para recortarse al border-radius, y eso las convierte a ELLAS en
   el contenedor de scroll de referencia: la columna anclada se ancla al borde de la tabla,
   o sea, no hace nada. `clip` recorta igual (el radio se sigue viendo) pero NO es un
   contenedor de scroll, así que el sticky pasa a anclarse al div que scrollea. */
table.acciones-fijas, table.nombre-fijo { overflow: clip; }
.acciones-fijas th:last-child,
.acciones-fijas td:last-child,
.nombre-fijo th:first-child,
.nombre-fijo td:first-child { position: sticky; background: var(--celda-fija-bg); z-index: 1; }
.acciones-fijas th:last-child,  .acciones-fijas td:last-child  { right: 0; }
.nombre-fijo    th:first-child, .nombre-fijo    td:first-child { left: 0; }
.acciones-fijas th:last-child,
.nombre-fijo th:first-child { background: var(--celda-fija-bg-head); z-index: 2; }
.acciones-fijas tr:hover td:last-child,
.nombre-fijo tr:hover td:first-child { background: var(--celda-fija-bg-hover); }
.acciones-fijas tr.selected td:last-child,
.nombre-fijo tr.selected td:first-child { background: var(--primary-light); }
/* El botón de la columna anclada, en una sola línea: la columna es angosta y "Ver perfil"
   se partía en dos renglones. */
.acciones-fijas td:last-child .btn { white-space: nowrap; }

/* La sombra que avisa que hay contenido tapado aparece SOLO si la tabla no entra: con la
   tabla completa, una línea gris al costado de una columna sería ruido. La clase la pone
   el script de `partials/header.ejs` sobre el contenedor que scrollea (al cargar y al
   redimensionar). */
.has-overflow .acciones-fijas th:last-child::before,
.has-overflow .acciones-fijas td:last-child::before,
.has-overflow .nombre-fijo th:first-child::after,
.has-overflow .nombre-fijo td:first-child::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 8px; pointer-events: none;
}
.has-overflow .acciones-fijas th:last-child::before,
.has-overflow .acciones-fijas td:last-child::before {
  left: 0; transform: translateX(-100%);
  background: linear-gradient(to left, rgba(0,0,0,.09), transparent);
}
.has-overflow .nombre-fijo th:first-child::after,
.has-overflow .nombre-fijo td:first-child::after {
  right: 0; transform: translateX(100%);
  background: linear-gradient(to right, rgba(0,0,0,.09), transparent);
}
/* La tabla de usuarios tiene sus propios grises (heredados del diseño original). */
.users-table { --celda-fija-bg-head: #f8f9fa; --celda-fija-bg-hover: #fafafa; }

/* ─── Botón que reemplaza a las solapas en pantallas chicas ───────────────── */
.nav-toggle {
  display: none; /* solo aparece bajo el breakpoint; ver media query */
  width: 100%; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text);
  font-family: inherit; text-align: left;
}
.nav-toggle:hover { background: var(--bg); }
.nav-toggle .nav-toggle-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-toggle .material-symbols-outlined { font-size: 20px; color: var(--text-secondary); flex-shrink: 0; }
.nav-toggle-chevron { transition: transform .18s ease; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* Las solapas pasan a ser un panel desplegable. Sin `display:none` el nav seguiría
     ocupando ancho aunque no se viera, que era el problema original.
     
     El selector exige [data-responsive-listo], que lo pone js/nav-responsive.js DESPUÉS
     de inyectar el botón: si el JS no corre (error, script bloqueado, caché viejo), el nav
     NO se oculta y el panel sigue siendo navegable. Sin esta guarda, un fallo del JS
     dejaría al usuario sin ninguna forma de cambiar de sección. */
  .admin-nav[data-responsive-listo] {
    display: none;
    flex-direction: column; gap: 2px;
    border-bottom: none; margin-bottom: 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 6px;
    max-height: 60vh; overflow-y: auto;
  }
  .admin-nav[data-responsive-listo].nav-abierto { display: flex; }

  /* Degradación sin JS: el nav se queda en fila pero scrollea solo, en vez de estirar
     el body. Peor que el botón, pero usable y sin romper el ancho de la página. */
  .admin-nav:not([data-responsive-listo]) {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; flex-wrap: nowrap;
  }
  .admin-nav:not([data-responsive-listo]) .admin-nav-item { flex-shrink: 0; }
  .admin-nav-item {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; border-bottom: none; margin-bottom: 0;
    border-radius: var(--radius-xs);
  }
  .admin-nav-item.active { background: rgba(26,115,232,.1); border-bottom-color: transparent; }
}

/* ─── Tipografía fluida ─────────────────────────────────────────────────────
   clamp() en vez de saltos por breakpoint: el tamaño acompaña al ancho de forma
   continua, sin el escalón feo justo en el límite del media query. */
@media (max-width: 900px) {
  .main-content h2, .dashboard-topbar h2 { font-size: clamp(18px, 4.6vw, 24px); line-height: 1.25; }
  .main-content h3 { font-size: clamp(15px, 3.9vw, 18px); }
  .main-content h4 { font-size: clamp(14px, 3.4vw, 16px); }
  .section-h { font-size: clamp(14px, 3.6vw, 16px); }
  .stat-value, .mini-stat-value { font-size: clamp(19px, 5.2vw, 26px); }
  .fix-count-num { font-size: clamp(22px, 6vw, 30px); }
}

/* ─── Densidad en pantallas chicas ──────────────────────────────────────────
   El objetivo es que entre más contenido por pantallazo: menos scroll muerto y
   menos aire entre bloques. */
@media (max-width: 900px) {
  .main-content { padding: 14px 14px 32px; }

  /* Tarjetas de curso: el banner de 140px era casi todo el alto de la tarjeta.
     A 92px siguen leyéndose bien y la grilla entra en dos columnas. */
  .card-banner { min-height: 92px; padding: 14px 16px 12px; }
  .card-banner h4 { font-size: 16px; }
  .card-body   { padding: 12px 16px; }
  .card-footer { padding: 8px 16px; }

  /* Métricas: de una tira que ocupa 253px de alto a una grilla compacta. */
  .mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin: 12px 0 18px; }
  .mini-stat  { min-width: 0; padding: 10px 12px; }
  .mini-stat-label { font-size: 10px; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .stat-card  { padding: 14px; gap: 12px; }

  .section { margin-bottom: 20px; }
  .dashboard-topbar { margin-bottom: 16px; gap: 10px; }
  .admin-section-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .admin-section-card  { padding: 14px 16px; gap: 12px; }
}

/* Dos columnas de tarjetas ya desde un teléfono común: una sola columna desperdicia la
   mitad del ancho y duplica el scroll. Medido en /preceptor con 39 cursos: en una columna
   la página daba 6582 px; en dos, la mitad.
   El umbral son 360 px porque a ese ancho todavía entran dos tarjetas de ~150 px con el
   padding lateral y el gap. Por debajo (teléfonos muy angostos) se apilan, que es lo
   correcto: dos columnas ahí cortarían los nombres de las materias. */
@media (min-width: 360px) and (max-width: 900px) {
  .course-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .card-banner h4 { font-size: 15px; }
  .card-banner p  { font-size: 11.5px; }
  .card-stat      { font-size: 12px; }
}

@media (max-width: 359px) {
  .course-grid { grid-template-columns: 1fr; gap: 10px; }
  .main-content { padding: 12px 12px 28px; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Tablas en móvil ───────────────────────────────────────────────────────
   Se mantienen como tabla (convertirlas en tarjetas rompería la comparación entre
   filas, que es justamente para lo que se usan), pero más compactas y con el scroll
   contenido. */
@media (max-width: 900px) {
  .simple-table th, .simple-table td { padding: 8px 10px; font-size: 12.5px; }
  .simple-table th { font-size: 10px; }
  .data-table th, .data-table td { padding: 8px 10px; font-size: 12.5px; }
}

/* ─── Filtros y barras de acción ────────────────────────────────────────────
   En móvil los filtros en fila obligan a scroll horizontal; apilados ocupan el
   ancho completo y se usan con el pulgar. */
@media (max-width: 900px) {
  .filters-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters-bar > * { width: 100%; }
  .dashboard-actions { flex-wrap: wrap; gap: 8px; }
  .dashboard-actions .btn { flex: 1 1 auto; justify-content: center; }
  .pagination { flex-wrap: wrap; gap: 6px; }
}

/* La barra de suplantación es fija y en móvil tapaba el encabezado. */
@media (max-width: 900px) {
  .impersonation-bar { font-size: 12px; padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
}

/* ─── Encabezado en móvil ───────────────────────────────────────────────────
   Medido a 375 px: el contenido del header sumaba 562 px sobre 375 disponibles.
   El badge de rol quedaba cortado (x 330→397) y el botón del avatar caía ENTERO
   fuera de pantalla (x 405→445). Como `body` tiene `overflow-x: hidden`, no se
   recortaba con scroll sino que directamente desaparecía — y ese avatar es el
   único acceso al menú con "Cerrar sesión", así que en un teléfono no había
   forma de salir de la sesión. El ítem del drawer (ver header.ejs) cubre eso;
   acá se recupera el ancho sacando lo que en un teléfono es redundante. */
@media (max-width: 900px) {
  .header { padding: 0 12px; }
  /* El ícono del logo ya identifica el inicio, y el título de la sección se
     repite en el h2 justo debajo. */
  .header-title { display: none; }
  /* El rol propio sigue estando en el menú de usuario, junto al nombre y correo. */
  .user-role { display: none; }
  .header-logo { padding: 4px; gap: 0; }
  .header-center { padding: 0 8px; }
  /* A 375 px el centro comparte ~130 px con el nombre de la escuela: entra la hora, no la
     fecha. La fecha completa sigue disponible en el title del reloj. */
  .header-clock { font-size: 11px; }
  .header-clock-date, .header-clock-sep { display: none; }
  .header-school-name { max-width: none; font-size: 14px; }
}

/* ─── Solapas de la materia en móvil ────────────────────────────────────────
   Las 5 solapas suman 642 px contra 347 de ancho útil: "Mis notas", "Personas"
   y "En vivo" quedaban fuera de pantalla, y sin manera de llegar (`.tabs` no
   scrollea —overflow visible— y el body recorta). Un alumno no podía ver sus
   notas desde el teléfono.

   Se resuelve con pastillas que envuelven en dos filas en vez de scroll
   horizontal: así las cinco están a la vista de una, sin que el alumno tenga
   que adivinar que hay contenido corrido al costado. El subrayado se cambia por
   relleno porque la línea inferior no funciona cuando hay más de una fila. */
@media (max-width: 900px) {
  .tabs {
    flex-wrap: wrap; gap: 6px;
    border-bottom: none; margin-bottom: 18px;
  }
  .tab {
    flex: 1 1 auto; justify-content: center;
    padding: 9px 12px; font-size: 13px; gap: 6px;
    margin-bottom: 0;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface);
  }
  .tab .material-symbols-outlined { font-size: 17px; }
  .tab.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
  }
  .tab.active:hover { color: #fff; background: var(--primary); }
}

/* ─── Mi perfil en móvil ────────────────────────────────────────────────────
   `.profile-header` es una fila avatar + datos + acciones. A 375 px los datos se
   cortaban (x 166→401, con el nombre y el correo tapados) y los botones
   "Cambiar correo" / "Cambiar contraseña" caían enteros fuera de pantalla
   (x 433→639): el alumno no podía cambiar su contraseña desde el teléfono. */
@media (max-width: 900px) {
  .profile-header {
    flex-direction: column; align-items: center; text-align: center;
    gap: 16px; padding: 24px 16px;
  }
  .profile-info { min-width: 0; width: 100%; }
  /* Los nombres vienen en APELLIDO, NOMBRE completo y son largos: sin esto
     desbordan la tarjeta en vez de cortar. */
  .profile-info h2 { font-size: clamp(19px, 5vw, 26px); overflow-wrap: anywhere; }
  .profile-email { overflow-wrap: anywhere; }
  .profile-actions {
    margin-left: 0; margin-top: 0; width: 100%; align-self: stretch;
  }
  .profile-actions .btn { width: 100%; justify-content: center; }
}

/* ─── Área táctil de los enlaces de aviso ───────────────────────────────────
   Las bandas de "Mis pendientes" y "Completar perfil" tenían enlaces de 21 px de
   alto: la mitad del mínimo cómodo para un pulgar. Se agranda el área sin
   cambiar cómo se ven. */
@media (max-width: 900px) {
  .pending-band-link, .profile-band-link { display: inline-block; padding: 7px 2px; }
  .profile-band-close { width: 32px; height: 32px; }
}

/* ─── Calificar entregas en móvil ───────────────────────────────────────────
   Rol docente. `.grade-table` reparte 5 columnas por porcentaje (24/10/30/13/23).
   A 375 px eso deja la tabla en 286 px y cada columna en nada: el nombre del
   alumno en 69 px, la nota en 29 px y —lo peor— el textarea de la devolución en
   67 px de ancho. No desborda: se comprime hasta ser inservible, que en la
   práctica es lo mismo. Es la pantalla donde el docente pasa más tiempo.

   Cada alumno pasa a ser una tarjeta apilada. Es solo CSS: el marcado lo genera
   `loadTeacherDetail()` en public/js/course.js y no hace falta tocarlo. */
@media (max-width: 900px) {
  .grade-table,
  .grade-table tbody,
  .grade-table tr,
  .grade-table td { display: block; width: auto; }

  /* Sin cabecera, cada campo se rotula abajo con ::before. El "/ N" que vivía en
     el <th> de Nota no se pierde: el modal ya dice "N pts máx." más arriba. */
  .grade-table thead { display: none; }

  .grade-table tbody tr {
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    padding: 12px; margin-bottom: 10px;
  }
  .grade-table tbody tr:last-child { margin-bottom: 0; }
  .grade-table tbody tr:hover td { background: none; }
  .grade-table tbody td { border-bottom: none; padding: 0; }
  .grade-table tbody td + td { margin-top: 10px; }

  .gt-col-grade::before,
  .gt-col-feedback::before {
    display: block; margin-bottom: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .3px; color: var(--text-hint);
  }
  .gt-col-grade::before    { content: 'Nota'; }
  .gt-col-feedback::before { content: 'Devolución al alumno'; }

  /* "Visto" y "Entrega" son dos badges cortos: en la misma línea se leen de una,
     y apilados desperdiciarían media tarjeta. Necesitan ganarle en especificidad
     al `display: block` de `.grade-table td` de arriba. */
  .grade-table .gt-col-view,
  .grade-table .gt-col-sub { display: inline-block; margin-right: 14px; }

  .grade-table .grade-input { width: 88px; padding: 8px; font-size: 15px; }
  .grade-table .feedback-input { font-size: 14px; min-height: 62px; }
  /* Con el ancho completo de la tarjeta, el nombre ya no necesita recortarse. */
  .gt-student-name { white-space: normal; }
}

/* ─── Libro de calificaciones en móvil ──────────────────────────────────────
   Este sí scrollea al costado y mantiene la columna de alumnos anclada, así que
   funciona. El problema es el reparto: 200 px de nombre sobre 347 disponibles
   dejaban 147 px para las notas, menos de una columna de actividad (150 px). Se
   achica el nombre para que entre nombre + una actividad completa. */
@media (max-width: 900px) {
  .gb-student-col { width: 132px; min-width: 132px; }
  .gb-act-col     { min-width: 128px; width: 128px; padding: 12px 12px 8px; }
}

/* ─── Controles chicos del docente ──────────────────────────────────────────
   Medidos por debajo del mínimo cómodo para un pulgar. */
@media (max-width: 900px) {
  /* Copiar el código de clase: 26 px. */
  .course-code-copy { width: 32px; height: 32px; }
  /* "Personalizar" la portada de la materia: 31 px de alto. */
  .header-customize-btn { min-height: 34px; }
  /* Los checkbox nativos miden 13 px. La etiqueta que los envuelve sí es
     tocable, así que esto es legibilidad, no alcance. */
  .main-content input[type="checkbox"] { width: 18px; height: 18px; }
}

/* ─── Panel directivo en móvil ──────────────────────────────────────────────
   Recorrido rol por rol a 375 px (2026-08-17). A diferencia del alumno, acá NADA
   quedaba fuera de alcance: las siete tablas del panel ya viven en contenedores
   con scroll horizontal y columna anclada, que es el patrón correcto para datos.
   Lo que fallaba era el tamaño de lo que hay que tocar. */
@media (max-width: 900px) {
  /* Las barras de filtro de Docentes y Divisiones dejaban el buscador en 25 px de
     alto: es un <input> sin estilos propios, contra los 37 px del de Materias, que
     sí los tiene. Se empareja para arriba, en la barra entera y no vista por vista. */
  .filters-bar input,
  .filters-bar select,
  .filters-bar button { min-height: 40px; }

  /* El nombre de la fila es el ÚNICO acceso a la ficha de un alumno, un docente,
     una división o una materia, y medía 17 px de alto: la celda que lo rodea es
     tres veces más grande pero no es clickeable. El padding lo estira hasta la
     celda entera y el margen negativo lo devuelve, así que la tabla no cambia de
     alto ni una fila. */
  .main-content td > a.name-link,
  .main-content td > a.course-name-link,
  /* Jefatura llama `fila-link` a lo mismo: el nombre del docente en su listado. */
  .main-content td > a.fila-link,
  /* En Promedios el enlace a la materia no tiene clase; `:not([class])` lo agarra sin
     tocar los enlaces que SÍ son botones dentro de una celda. */
  .grades-table td > a:not([class]) {
    display: block;
    padding: 9px 0;
    margin: -9px 0;
  }

  /* "Volver" de las fichas de detalle: 21 px. Se estira hacia la izquierda con un
     margen negativo para no correr el texto de su lugar. */
  .back-link {
    display: inline-block;
    padding: 6px 8px;
    margin: -6px 0 -6px -8px;
  }
}

/* ─── Panel de administración en móvil ──────────────────────────────────────
   Cuarta pasada del recorrido rol por rol (2026-08-17), 19 pantallas a 375 px. */
@media (max-width: 900px) {
  /* Las tres tarjetas que explican los tipos de importación son un grid de 3 columnas
     fijas: la tercera arrancaba en x=347 y se perdía contra el borde. Apiladas se leen
     igual y son texto, no datos que convenga comparar al costado. */
  .import-intro { grid-template-columns: 1fr !important; }

  /* La auditoría imprime los parámetros crudos de cada evento, que suelen ser un JSON con
     ids: un token de 400 px sin espacios no corta por más `white-space:normal` que tenga, y
     el resto del renglón se iba de pantalla. */
  .audit-meta { overflow-wrap: anywhere; }

  /* Dentro de `.input-group`, un <input> mide 48 px y un <select> 15: el select viene con
     `padding:0` en el atributo style, así que su caja quedaba en 25 px contra los 51 del
     campo de al lado. Tocar el borde de la caja no abre nada. (En escritorio se ven igual
     de despareja, pero eso es otra pasada.) */
  .input-group select { min-height: 38px; }

  /* Reasignar docente desde el listado de materias: 19 px. Es el único acceso al modal que
     arregla una materia sin titular. */
  .btn-assign-teacher { min-height: 32px; min-width: 32px; }

  /* Los botones de acción de cada fila llevan `padding:4px 10px` en el atributo style para no
     engordar la tabla, y quedan en 29 px. `min-height` no compite con ese inline —es otra
     propiedad— así que los levanta sin tocar el padding ni el alto de la fila. */
  .main-content td .btn { min-height: 32px; }
  /* "Quitar suplente" del formulario de materia: 26 px. */
  .btn-remove-coteacher { min-height: 32px; min-width: 32px; }
}

/* ─── Panel del superadministrador en móvil ─────────────────────────────────
   Última pasada del recorrido rol por rol (2026-08-17), 17 pantallas a 375 px. */
@media (max-width: 900px) {
  /* Filas de acciones con `flex-shrink: 0`: no encogen, así que su propio `flex-wrap` nunca
     llega a actuar y la fila se acomoda a su ancho natural —489 px en la ficha de la escuela—
     empujando los botones fuera de pantalla. Eliminar la escuela quedaba en x=537. Dándoles el
     renglón completo, el wrap que ya tenían hace el resto. */
  .sp-actions,
  .sug-acciones { flex-shrink: 1; flex-wrap: wrap; width: 100%; }

  /* Muchos botones del panel traen `padding:4px 12px` y `font-size:12px` en el atributo style
     para entrar en una fila apretada, y quedan entre 21 y 29 px. `min-height` los levanta sin
     pelearse con ese inline (es otra propiedad) ni cambiar su ancho. */
  .main-content .btn { min-height: 32px; }
  .main-content select { min-height: 34px; }

  /* Botones propios de estas pantallas, con su tamaño en su propio CSS. `.am-mini` ("Todos" /
     "Ninguno" del alta masiva de materias) medía 15 px. */
  .am-mini,
  .am-quitar,
  .rl-rango,
  .bulk-bar-apply { min-height: 32px; }

  /* La barra de acciones masivas es `position: fixed` y vive FUERA de .main-content, así que
     la regla de arriba no la alcanza. Sus desplegables median 28 px. */
  .bulk-bar-group select { min-height: 32px; }

  /* La fila de cada usuario en la ficha de la escuela: el correo y la pastilla del rol van en
     una fila con `margin-left:auto` y sin wrap, así que con un correo largo la pastilla —que
     es el dato— terminaba fuera de pantalla. Que baje de renglón cuando no entre. */
  /* Y la fila entera tiene que poder envolver: si no, el bloque del correo y el rol se va
     empujado hacia afuera por el nombre, y su propio wrap no llega a actuar nunca. */
  .sp-user-row  { flex-wrap: wrap; }
  .sp-user-meta { flex-wrap: wrap; justify-content: flex-end; }

  /* El nombre de la escuela en su tarjeta es el enlace para entrar y medía 19 px. */
  .subject-card-name a { display: inline-block; padding: 6px 0; margin: -6px 0; }
}