/* ============================================================
   NuestraVoz — Estilos FUSIONADOS v3
   Tema oscuro (del proyecto del compañero) + estructura completa
   ============================================================ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Paleta oscura */
  --bg:           #0d1117;
  --surface:      #161b22;
  --surface2:     #1c2333;
  --surface3:     #21262d;
  --border:       #30363d;

  /* Colores funcionales */
  --blue:         #2f81f7;
  --blue-dim:     #1f4e8c;
  --green:        #3fb950;
  --green-dim:    #1a4a24;
  --yellow:       #d29922;
  --yellow-dim:   #4a3500;
  --red:          #f85149;
  --red-dim:      #4a1414;
  --purple:       #bc8cff;
  --purple-dim:   #3a1f6e;

  /* Texto */
  --text:         #e6edf3;
  --text-dim:     #8b949e;
  --text-dimmer:  #484f58;

  /* Alias legacy (para mantener compatibilidad) */
  --color-primary:    var(--blue);
  --color-success:    var(--green);
  --color-warning:    var(--yellow);
  --color-danger:     var(--red);
  --color-bg:         var(--bg);
  --color-surface:    var(--surface);
  --color-border:     var(--border);
  --color-text:       var(--text);
  --color-muted:      var(--text-dim);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --radius:    8px;
  --font:      'DM Sans', system-ui, sans-serif;
  --mono:      'DM Mono', monospace;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── NAVBAR ──────────────────────────────────────────────────── */
/* FIX (auditoría): este bloque es el navbar VIEJO, de antes de que se
   agregaran los menús desplegables (ver el bloque "Navbar rediseñada con
   dropdowns" más abajo, que es el que layout.php realmente usa hoy — esas
   reglas ganan por venir después en el archivo). Algunas clases de acá
   abajo (.nav-sub, .nav-user) siguen en uso; otras, como .nav-icon, ya no
   aparecen en ningún HTML del proyecto. No borré todo el bloque porque no
   pude confirmar visualmente en un navegador que no rompa nada más — antes
   de borrarlo del todo, probarlo con la pantalla real. */
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .65rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.nav-brand strong { font-size: .95rem; color: var(--blue); letter-spacing: .3px; }
.nav-sub   { font-size: .72rem; color: var(--text-dim); margin-left: .2rem; }

.nav-links { display: flex; gap: 2px; list-style: none; flex: 1; flex-wrap: wrap; }
.nav-links a {
  color: var(--text-dim);
  padding: .35rem .75rem;
  border-radius: var(--radius);
  font-size: .82rem;
  transition: all .15s;
  border: 1px solid transparent;
}
.nav-links a:hover { background: var(--surface3); color: var(--text); text-decoration: none; }
.nav-links a.active { background: var(--blue-dim); color: var(--blue); border-color: var(--blue-dim); }

.nav-user  { display: flex; align-items: center; gap: .65rem; font-size: .82rem; white-space: nowrap; }
.btn-logout {
  background: transparent;
  color: var(--text-dim);
  padding: .3rem .7rem;
  border-radius: var(--radius);
  font-size: .78rem;
  border: 1px solid var(--border);
  transition: all .15s;
  cursor: pointer;
}
.btn-logout:hover { color: var(--red); border-color: var(--red); text-decoration: none; }

/* ── BADGES / CHIPS ──────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-director       { background: var(--purple-dim); color: var(--purple); }
.badge-preceptor      { background: #0c3a5e; color: #58a6ff; }
.badge-docente        { background: var(--green-dim); color: var(--green); }
.badge-administrativo { background: var(--yellow-dim); color: var(--yellow); }
.badge-alumno         { background: var(--blue-dim); color: var(--blue); }
.badge-success        { background: var(--green-dim);  color: var(--green); }
.badge-warning        { background: var(--yellow-dim); color: var(--yellow); }
.badge-danger         { background: var(--red-dim);    color: var(--red); }
.badge-info           { background: var(--blue-dim);   color: var(--blue); }
.badge-secondary      { background: var(--surface2);   color: var(--text-dim); }

/* Chips de estado de asistencia */
.chip {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.chip-ok   { background: var(--green-dim);  color: var(--green); }
.chip-warn { background: var(--yellow-dim); color: var(--yellow); }
.chip-bad  { background: var(--red-dim);    color: var(--red); }

/* Chips de porcentaje */
.pct-chip  { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pct-ok    { background: var(--green-dim);  color: var(--green); }
.pct-warn  { background: var(--yellow-dim); color: var(--yellow); }
.pct-bad   { background: var(--red-dim);    color: var(--red); }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  padding: 1.75rem 2rem;
  max-width: 1380px;
  margin: 0 auto;
  width: 100%;
}

/* ── LOGIN ───────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 40%, #162032 0%, var(--bg) 70%);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.login-card h1 { font-size: 1.4rem; color: var(--text); margin-bottom: .25rem; }
.login-card p.sub { color: var(--text-dim); font-size: .82rem; margin-bottom: 1.75rem; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--border);
}
.card-header h2 { font-size: .95rem; font-weight: 600; color: var(--text); }

/* ── STATS GRID ──────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.stat-card .stat-label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--blue); margin-top: .1rem; }
.stat-card .stat-sub   { font-size: .72rem; color: var(--text-dimmer); margin-top: .1rem; }

/* ── TABLAS ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
thead { background: var(--surface2); }
th {
  padding: .6rem .9rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }

/* ── FORMULARIOS ─────────────────────────────────────────────── */
.form-group { margin-bottom: .9rem; }
.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface2);
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,129,247,.15);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── BOTONES ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .8rem;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; opacity: .9; }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--blue);   color: #fff; border-color: var(--blue); }
.btn-success   { background: var(--green);  color: #000; border-color: var(--green); }
.btn-warning   { background: var(--yellow); color: #000; border-color: var(--yellow); }
.btn-danger    { background: var(--red);    color: #fff; border-color: var(--red); }
.btn-secondary { background: var(--surface3); color: var(--text); border-color: var(--border); }
.btn-outline   { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-sm        { padding: .25rem .65rem; font-size: .75rem; }
.btn.disabled  { opacity: .45; pointer-events: none; }

/* ── ALERTAS FLASH ───────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .82rem;
  border-left: 3px solid;
}
.alert-success { background: var(--green-dim);  border-color: var(--green);  color: var(--green); }
.alert-error   { background: var(--red-dim);    border-color: var(--red);    color: var(--red); }
.alert-warning { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); }
.alert-info    { background: var(--blue-dim);   border-color: var(--blue);   color: var(--blue); }

/* ── LIVE DOT ────────────────────────────────────────────────── */
.live-dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--green); border-radius: 50%;
  margin-right: .35rem;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.8); }
}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.page-header p  { color: var(--text-dim); font-size: .82rem; margin-top: .15rem; }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: 10px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-md);
}
.modal-box h3 { font-size: 1rem; margin-bottom: 1rem; }

/* ── REGLAMENTO: tabla con colores de estado ─────────────────── */
tr.estado-presente   td { border-left: 3px solid var(--green); }
tr.estado-media_falta td { border-left: 3px solid var(--yellow); }
tr.estado-ausente    td { border-left: 3px solid var(--red); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  text-align: center;
  font-size: .72rem;
  color: var(--text-dimmer);
  padding: .85rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main-content { padding: 1rem; }
  .navbar { flex-wrap: wrap; padding: .65rem 1rem; }
  .nav-links { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Navbar rediseñada con dropdowns ─────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.25rem;
  background: var(--color-surface, #1e293b);
  border-bottom: 2px solid var(--color-primary, #2563eb);
  position: sticky;
  top: 0;
  z-index: 1000;
  flex-wrap: nowrap;
}

/* Logo */
.nav-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-brand-text strong { color: #fff; font-size: .95rem; }
.nav-sub { color: #94a3b8; font-size: .7rem; }

/* Lista principal */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .15rem;
  flex: 1;
  flex-wrap: nowrap;
  overflow: visible;
}
.nav-inicio {
  padding: .45rem .7rem;
  border-radius: 6px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: .82rem;
  white-space: nowrap;
  transition: background .15s;
}
.nav-inicio:hover, .nav-inicio.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Grupo con dropdown */
.nav-group { position: relative; }
.nav-group-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .7rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-group-btn:hover,
.nav-group.active .nav-group-btn {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.nav-group.open .nav-group-btn {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.nav-arrow { font-size: .65rem; transition: transform .2s; }
.nav-group.open .nav-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  list-style: none;
  margin: 0;
  padding: .4rem;
  z-index: 1001;
}
.nav-group.open .nav-dropdown { display: block; }
.nav-dropdown li a {
  display: block;
  padding: .45rem .8rem;
  color: #cbd5e1;
  text-decoration: none;
  font-size: .84rem;
  border-radius: 6px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav-dropdown li a:hover,
.nav-dropdown li a.active {
  background: rgba(37,99,235,.35);
  color: #fff;
}

/* Usuario y botón salir */
.nav-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-username {
  color: #94a3b8;
  font-size: .8rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-logout {
  padding: .35rem .75rem;
  background: rgba(239,68,68,.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  text-decoration: none;
  font-size: .8rem;
  transition: background .15s;
}
.btn-logout:hover { background: rgba(239,68,68,.3); color: #fff; }

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .4rem;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Badge roles */
.badge-director      { background: #7c3aed; color: #fff; }
.badge-preceptor     { background: #0284c7; color: #fff; }
.badge-docente       { background: #059669; color: #fff; }
.badge-administrativo{ background: #d97706; color: #fff; }
.badge-alumno        { background: #2563eb; color: #fff; }

/* Mobile */
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: #1e293b;
    border-top: 1px solid rgba(255,255,255,.1);
    padding: .5rem;
    gap: .25rem;
    align-items: stretch;
    max-height: 80vh;
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,.05);
    border-radius: 6px;
    margin-top: .25rem;
  }
  .nav-group.open .nav-dropdown { display: block; }
  .nav-username { display: none; }
}

/* Texto oscuro sobre las tarjetas claras de aulas. */
.aula-card { color:#111; --color-muted:#374151; --text-dim:#374151; }
.aula-card .card-header h2, .aula-card strong, .aula-card label { color:#111; }
.aula-card input, .aula-card select, .aula-card textarea { color:#111; background:#fff; border:1px solid #64748b; color-scheme:light; }
tr:target { outline:2px solid var(--blue); outline-offset:-2px; scroll-margin-top:110px; }
.huella-pasos { padding-left:1.4rem; margin:1rem 0; }
.huella-estado { margin:1rem 0; font-weight:600; white-space:pre-line; }

.aula-edicion { margin:.75rem 0; font-size:.85rem; }
.aula-edicion summary { cursor:pointer; color:#1856a1; font-weight:600; }
.aula-form { display:grid; gap:.65rem; margin-top:.75rem; }
.aula-form label { display:grid; gap:.3rem; }
.aula-eliminar { margin:.65rem 0 1rem; }

.aula-form input, .aula-form textarea { box-sizing:border-box; width:100%; padding:.5rem; border-radius:6px; font:inherit; }

.sensor-materia-form{display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap;margin:1rem 0}.sensor-materia-form .form-group{margin:0;flex:1;min-width:240px;max-width:560px}.sensor-materia-form select{width:100%;padding:.7rem 1rem;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;font:inherit}.sensor-materia-form button{min-height:42px}#sensor-permanente{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}#sensor-permanente a{margin-left:auto}#sensor-detalle{font-size:.85rem;flex:1}


/* ── Ajustes móviles / Android ───────────────────────────────── */
.search-row { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; }
.row-actions, .modal-actions { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.fecha-es { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .main-content { padding:.75rem; }
  .navbar { padding:.45rem .65rem; gap:.45rem; }
  .nav-logo { width:36px; height:36px; }
  .nav-brand-text strong { font-size:.85rem; }
  .nav-sub { font-size:.62rem; }
  .nav-user { margin-left:auto; gap:.35rem; }
  .nav-user .badge { font-size:.6rem; padding:.18rem .42rem; }
  .btn-logout { padding:.3rem .5rem; font-size:.72rem; }
  .card { padding:1rem; }
  .login-wrap { padding:1rem; align-items:flex-start; padding-top:8vh; }
  .login-card { padding:1.35rem 1rem; max-width:100%; }
  .stats-grid { grid-template-columns:1fr; }
  .page-header h1 { font-size:1.12rem; }
  .page-header .btn { width:100%; justify-content:center; }
  .form-row { grid-template-columns:1fr !important; gap:.65rem; }
  [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:620px; }
  th, td { padding:.5rem .6rem; }
  .modal-overlay { padding:.75rem; }
  .modal-box { width:100%; max-width:100%; max-height:92vh; overflow-y:auto; padding:1.2rem; }
  #modal-reset > div { width:calc(100vw - 1.5rem) !important; max-width:420px; padding:1.2rem !important; }
  .search-row > .btn { flex:1; justify-content:center; }
  .sensor-materia-form .form-group { min-width:100%; }
  #sensor-permanente a { margin-left:0; width:100%; justify-content:center; }
}

@media (max-width: 420px) {
  .nav-brand-text .nav-sub { display:none; }
  .navbar { gap:.3rem; }
  .card { padding:.8rem; }
  .btn { white-space:normal; text-align:center; }
  table { min-width:560px; font-size:.78rem; }
}


/* ── Responsive móvil reforzado (Android / teléfonos) ───────── */
/* Inputs con tamaño táctil cómodo y sin zoom accidental del navegador. */
input, select, textarea, button { max-width:100%; }
input.fecha-es { font-variant-numeric: tabular-nums; letter-spacing:.02em; }

@media (max-width: 768px) {
  body { min-width:0; }
  .main-content { width:100%; max-width:100%; padding:.7rem; }
  .page-header { gap:.65rem; margin-bottom:1rem; }
  .page-header > *, .card, .form-group { min-width:0; max-width:100%; }
  .card { border-radius:10px; }

  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea, button, .btn {
    min-height:44px;
    font-size:16px;
  }
  input[type="checkbox"], input[type="radio"] { min-height:auto; }
  .form-group input:not([type="checkbox"]):not([type="radio"]),
  .form-group select, .form-group textarea { width:100%; }

  form[style*="display:flex"] { max-width:100%; }
  .card > form[style*="display:flex"] > .form-group,
  .card > div > form[style*="display:flex"] > .form-group {
    flex:1 1 100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .search-row { align-items:stretch; }
  .search-row > .form-group { flex:1 1 100% !important; min-width:0 !important; }
  .row-actions, .modal-actions { width:100%; }
  .row-actions .btn, .modal-actions .btn { flex:1 1 140px; justify-content:center; }

  /* Evita anchos fijos heredados de vistas de escritorio. */
  select[style*="width:12rem"],
  form[style*="min-width:220px"] { width:100% !important; min-width:0 !important; }

  .footer { padding:.8rem .6rem; line-height:1.5; }
}

@media (max-width: 640px) {
  /* Navegación */
  .navbar { min-height:54px; }
  .nav-brand { min-width:0; }
  .nav-brand-text { min-width:0; }
  .nav-brand-text strong { white-space:nowrap; }
  .nav-user .badge { display:none; }

  /* Las tablas pasan a tarjetas verticales en vez de quedar como una tabla
     de escritorio encogida. Esto afecta solo a tablas dentro de .table-wrap. */
  .table-wrap { overflow:visible; width:100%; }
  .mobile-card-table {
    display:block;
    width:100%;
    min-width:0 !important;
    border:0;
    background:transparent;
  }
  .mobile-card-table thead {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .mobile-card-table tbody { display:block; width:100%; }
  .mobile-card-table tbody tr {
    display:block;
    width:100%;
    margin:0 0 .8rem;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    background:var(--surface);
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  .mobile-card-table tbody td {
    display:flex !important;
    width:100%;
    min-height:42px;
    align-items:flex-start;
    justify-content:space-between;
    gap:.75rem;
    padding:.65rem .75rem !important;
    border:0;
    border-bottom:1px solid var(--border);
    text-align:right !important;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .mobile-card-table tbody td:last-child { border-bottom:0; }
  .mobile-card-table tbody td[data-label]::before {
    content:attr(data-label);
    flex:0 0 38%;
    color:var(--text-dim);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    text-align:left;
  }
  .mobile-card-table tbody td[colspan] {
    display:block !important;
    text-align:left !important;
  }
  .mobile-card-table tbody td[colspan]::before { display:none; }
  .mobile-card-table tbody td > form { max-width:62%; margin-left:auto; }
  .mobile-card-table tbody td > form .btn,
  .mobile-card-table tbody td > .btn,
  .mobile-card-table tbody td > a.btn { min-height:40px; }

  /* Los botones/acciones no se salen de la tarjeta. */
  .mobile-card-table .btn { white-space:normal; }
  .mobile-card-table input,
  .mobile-card-table select,
  .mobile-card-table textarea { max-width:100%; }

  /* Filtros y cabeceras que traían flex inline desde escritorio. */
  .page-header > div[style*="display:flex"] { width:100%; }
  .page-header > div[style*="display:flex"] > form {
    width:100%;
    display:grid !important;
    grid-template-columns:1fr;
    gap:.55rem !important;
  }
  .page-header > div[style*="display:flex"] > form > select,
  .page-header > div[style*="display:flex"] > form > input { width:100%; }

  /* Modales */
  #modal-reset { padding:.65rem; }
  #modal-reset > div { width:100% !important; max-width:100% !important; padding:1rem !important; }
}

@media (max-width: 390px) {
  .nav-logo { width:32px; height:32px; }
  .nav-brand-text strong { font-size:.8rem; }
  .btn-logout { padding:.28rem .45rem; }
  .main-content { padding:.55rem; }
  .card { padding:.75rem; }
  .mobile-card-table tbody td[data-label]::before { flex-basis:42%; }
}

/* ── Avisos / cambios de horario ────────────────────────────── */
.dashboard-grid,
.schedule-changes-grid {
  display: grid;
  gap: 1.25rem;
}
.dashboard-grid { grid-template-columns: 1fr 1fr; }
.schedule-changes-grid { grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }

.schedule-change-card,
.schedule-notice {
  --change-fg: #111827;
  --change-muted: #4b5563;
  display: block;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  color: var(--change-fg);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.schedule-change-card:hover,
a.schedule-notice:hover { text-decoration: none; filter: brightness(.985); }
.schedule-change-cancelacion  { background: #fee2e2; border-color: #fca5a5; }
.schedule-change-adelanto     { background: #fef9c3; border-color: #fde047; }
.schedule-change-postergacion { background: #dbeafe; border-color: #93c5fd; }
.schedule-change-cambio_aula  { background: #dcfce7; border-color: #86efac; }
.schedule-change-card.is-past { opacity: .68; }
.schedule-change-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.schedule-change-head strong,
.schedule-change-head h2,
.schedule-change-type,
.schedule-change-reason,
.schedule-change-detail,
.schedule-notice-short,
.schedule-notice-details,
.schedule-notice-details strong { color: var(--change-fg); }
.schedule-change-head h2 { font-size: 1rem; margin-top: .15rem; }
.schedule-change-type { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.schedule-change-date,
.schedule-change-meta { color: var(--change-muted); }
.schedule-change-date { font-size: .76rem; white-space: nowrap; }
.schedule-change-reason { margin: .35rem 0; font-size: .86rem; }
.schedule-change-detail { margin: 0; font-size: .82rem; }
.schedule-change-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .55rem;
  font-size: .75rem;
}
.schedule-notices-list { display: grid; gap: .65rem; }
.schedule-notices-list .schedule-notice { margin: 0; padding: .7rem .85rem; }
.schedule-notices-page { max-width: 900px; }
.schedule-notices-page .schedule-notice { padding: 1rem 1.1rem; }
.schedule-notice-details { margin-top: .55rem; }
.schedule-notice-details p { margin: .22rem 0; font-size: .86rem; }

/* ── Sensor / huellas en celular ────────────────────────────── */
.sensor-slots-wrap { width: 100%; }
.sensor-slots-table .sensor-action-cell { white-space: nowrap; }

@media (max-width: 768px) {
  .dashboard-grid,
  .schedule-changes-grid { grid-template-columns: 1fr; }

  .schedule-change-head,
  .schedule-change-meta { flex-direction: column; gap: .25rem; }
  .schedule-change-date { white-space: normal; }
  .schedule-notices-summary .card-header { align-items: flex-start; gap: .7rem; }

  .sensor-materia-form .form-group { min-width: 0; width: 100%; }
  .sensor-materia-form button { width: 100%; justify-content: center; }

  .sensor-slots-wrap { overflow: visible; }
  .sensor-slots-table,
  .sensor-slots-table tbody,
  .sensor-slots-table tr,
  .sensor-slots-table td { display: block; width: 100%; }
  .sensor-slots-table thead { display: none; }
  .sensor-slots-table tr {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .65rem .8rem;
    margin-bottom: .75rem;
  }
  .sensor-slots-table tr:hover td { background: transparent; }
  .sensor-slots-table td {
    display: grid;
    grid-template-columns: minmax(95px, .8fr) 1.4fr;
    gap: .7rem;
    padding: .45rem 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .sensor-slots-table td::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .sensor-slots-table .sensor-action-cell button {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}