/* =====================================================
   PORTAL DOCENTE — estilos complementarios
   Rediseño UX: mobile-first, texto grande, todo guiado.
   Este archivo se carga DESPUÉS de ../css/style.css y SOLO
   en páginas del portal docente, así que puede sobre-escribir
   con seguridad clases genéricas (.btn, .card, inputs, etc.)
   sin afectar el panel de administración.
   ===================================================== */

/* ── 0. Variables locales de apoyo (con respaldo por si style.css
        no las define) — no tocan las del admin ──────────────── */
:root{
  --dc-radius: var(--radius, 12px);
  --dc-radius-lg: 18px;
  --dc-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,.08));
  --dc-gap: 14px;
}

/* ── 1. Base: texto más grande y cómodo en todo el portal ──────── */
.app-shell, .auth-shell{
  font-size: 16px;
}
.app-shell .content-body, .auth-card{
  font-size: 1rem;
  line-height: 1.55;
}
.app-shell h2, .card-header h2{
  font-size: 1.15rem;
}
.hint{
  font-size: .92rem !important;
  line-height: 1.5;
}
.page-title{
  font-size: 1.25rem !important;
}

/* ── 2. REGLA CRÍTICA: nada de zoom/desfase al tocar un campo ──
   En celulares, si un input tiene letra chica (<16px) el navegador
   hace zoom automático al tocarlo, "desfasando" la pantalla.
   Con 16px como mínimo, eso ya no pasa — en NINGÚN campo. ────── */
input, select, textarea, button,
.btn, input[type="file"]{
  font-size: 16px !important;
}

/* ── 3. Campos de formulario: grandes, claros, fáciles de tocar ── */
.form-group label{
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
  color: var(--text, #222);
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select,
.form-group textarea{
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: var(--dc-radius);
  border: 1.5px solid var(--border, #dcdcdc);
  box-sizing: border-box;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group textarea{ min-height: 90px; padding-top: 12px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--accent, #2b6cb0);
  box-shadow: 0 0 0 3px var(--accent-light, rgba(43,108,176,.15));
}
.form-group .hint{ margin-top: 6px; color: var(--text-muted); }

/* Campo de ayuda con ícono, para instrucciones cortas dentro de un campo */
.campo-ayuda{
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .88rem; color: var(--text-muted);
  background: var(--surface-2, #f5f6f8);
  border-radius: var(--dc-radius);
  padding: 10px 12px;
  margin-top: 6px;
}
.campo-ayuda svg{ width: 18px; height: 18px; flex-shrink: 0; stroke: var(--accent, #2b6cb0); margin-top: 1px; }

/* ── 4. Botones grandes y fáciles de presionar ──────────────────── */
.btn{
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
}
.btn-sm{ min-height: 42px; padding: 9px 18px; font-size: .92rem !important; }
.btn-primary{ box-shadow: 0 3px 10px rgba(0,0,0,.12); }

/* En celular, los botones de acción ocupan todo el ancho: se ven,
   se entienden y no hay que "adivinar" dónde tocar. */
@media (max-width: 600px){
  .form-actions .btn{ width: 100%; }
  .card-header .btn{ width: auto; }
}

/* ── 5. Tarjetas: más aire, esquinas más suaves ─────────────────── */
.card{
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow);
  border: 1px solid var(--border, #eee);
  overflow: hidden;
}
.card-header{ padding: 16px 20px; }
.card-body{ padding: 20px; }

/* Subtítulo/explicación de cada pantalla, debajo del título ─────── */
.page-intro{
  font-size: .95rem;
  color: var(--text-muted);
  background: var(--surface-2, #f5f6f8);
  border-left: 4px solid var(--accent, #2b6cb0);
  border-radius: 0 var(--dc-radius) var(--dc-radius) 0;
  padding: 12px 16px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.page-intro strong{ color: var(--text); }

/* ── 6. Barra de navegación (celular) más clara ─────────────────── */
.sidebar{ display: flex; flex-direction: column; }
.sidebar-footer-docente{ margin-top: auto; }

.topbar-inicio{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  color: var(--accent-dark, #1a4d80);
  background: var(--accent-light, #e7f0fb);
  border-radius: 20px; padding: 7px 14px;
  margin-bottom: 8px;
}
.topbar-inicio svg{ width: 16px; height: 16px; stroke: currentColor; }

.topbar-logout{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger-bg, #fbe4e1); color: var(--danger, #c0392b);
  text-decoration: none;
}
.topbar-logout svg{ width: 20px; height: 20px; stroke: currentColor; }

.brand-sub {
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 0 0;
}

.sidebar-footer-docente { padding: 12px; display: flex; flex-direction: column; gap: 6px; }

.docente-mini {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  text-decoration: none; color: #fff;
}
.docente-mini:hover { background: rgba(255,255,255,.06); }
.docente-mini-foto {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.docente-mini-nombre {
  font-size: .85rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-logout { color: rgba(255,120,120,.9) !important; font-weight: 700; }
.nav-logout:hover { background: rgba(192,57,43,.15) !important; }

.nav-item{ font-weight: 600; }

.nav-proximamente { position: relative; opacity: .8; }
.tag-proximamente {
  margin-left: auto;
  background: var(--warning-bg); color: var(--warning);
  border-radius: 20px; padding: 1px 7px; font-size: .65rem;
  font-weight: 700; text-transform: uppercase;
}

/* ── Pantallas standalone (login / confirmar datos) ─────────── */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 20px;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface); border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow); padding: 32px 26px;
}
.auth-card.wide { max-width: 600px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-logo img { width: 130px; }
.auth-title {
  font-family: var(--font-display); font-size: 1.4rem;
  text-align: center; margin-bottom: 4px; font-weight: 700;
}
.auth-sub { text-align: center; color: var(--text-muted); font-size: .92rem; margin-bottom: 22px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-example {
  font-size: .85rem; color: var(--text-light);
  background: var(--surface-2); border: 1px dashed var(--border-dark);
  border-radius: var(--dc-radius); padding: 10px 12px; margin-top: -4px;
}
.auth-example code { color: var(--accent-dark); font-weight: 700; }

/* Pasos numerados dentro de una pantalla de onboarding ──────────── */
.paso-lista{ list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.paso-lista li{
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--text-muted); font-weight: 600;
}
.paso-num{
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; flex-shrink: 0;
}
.paso-lista li.paso-activo{ color: var(--text); }
.paso-lista li.paso-activo .paso-num{ background: var(--accent, #2b6cb0); color: #fff; }
.paso-lista li.paso-hecho .paso-num{ background: var(--success, #2f9e44); color: #fff; }

/* ── Tarjetas de inicio ──────────────────────────────────────── */
.home-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.bienvenida-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.bienvenida-foto {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2); border: 2px solid var(--accent-light);
}
.bienvenida-foto-vacia {
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.bienvenida-nombre { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.bienvenida-turno { color: var(--text-muted); font-size: .88rem; }

/* ── 7. Menú principal de inicio: botones grandes con TODAS
        las opciones, para que nadie tenga que "buscarle" ────────── */
.menu-opciones{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.menu-opcion{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #eee);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow);
  padding: 22px 12px;
  text-decoration: none;
  color: var(--text, #222);
  transition: transform .12s ease, box-shadow .12s ease;
  min-height: 120px;
  justify-content: center;
  position: relative;
}
.menu-opcion:active{ transform: scale(.97); }
.menu-opcion.menu-opcion-destacada{
  background: var(--accent-light, #e7f0fb);
  border-color: var(--accent, #2b6cb0);
}
.menu-opcion-icono{
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light, #e7f0fb);
  flex-shrink: 0;
}
.menu-opcion-icono svg{ width: 24px; height: 24px; stroke: var(--accent-dark, #1a4d80); }
.menu-opcion-texto{ font-weight: 700; font-size: .92rem; line-height: 1.25; }

/* Burbuja/aviso de pendientes sobre un botón del menú ────────────── */
.menu-opcion-burbuja{
  position: absolute; top: 10px; right: 10px;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 20px;
  background: var(--danger, #c0392b); color: #fff;
  font-size: .74rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  animation: dc-pulse 1.8s ease-in-out infinite;
}
@keyframes dc-pulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Línea divisoria entre grupos de botones del menú principal ────── */
.menu-divisor{
  height: 4px;
  width: 64px;
  max-width: 30%;
  margin: 4px auto 22px;
  border-radius: 20px;
  background: var(--border-dark, #d8d8d8);
  opacity: .7;
}

/* ── Avisos ──────────────────────────────────────────────────── */
.avisos-list { display: flex; flex-direction: column; gap: 12px; }
.aviso-card { display: flex; gap: 14px; padding: 16px 18px; }
.aviso-card img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.aviso-titulo { font-weight: 700; margin-bottom: 4px; }
.aviso-contenido { color: var(--text-muted); font-size: .9rem; white-space: pre-line; }
.aviso-fecha { color: var(--text-light); font-size: .76rem; margin-top: 6px; }
.aviso-archivo-link { display: inline-block; margin-top: 6px; font-size: .85rem; }

/* ── Perfil / expediente ─────────────────────────────────────── */
.perfil-foto-actual {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.campo-readonly {
  padding: 10px 14px; border-radius: var(--dc-radius);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .95rem;
}

/* ── 8. Bloque para subir la foto de perfil, con vista previa
        e instrucciones claras (fondo blanco, rostro descubierto) ── */
.foto-uploader{
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.foto-preview-wrap{ position: relative; flex-shrink: 0; }
.foto-preview{
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent-light, #e7f0fb);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}
.foto-preview-editar{
  position: absolute; bottom: -2px; right: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent, #2b6cb0); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--surface, #fff);
  pointer-events: none;
}
.foto-preview-editar svg{ width: 16px; height: 16px; stroke: #fff; }
.foto-campos{ flex: 1; min-width: 220px; }
.foto-instrucciones{
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.foto-instrucciones li{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .87rem; color: var(--text-muted);
}
.foto-instrucciones svg{
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  stroke: var(--success, #2f9e44);
}
.foto-instrucciones li.foto-evitar svg{ stroke: var(--danger, #c0392b); }

/* ── 9. Subir archivos (documentos): botón grande estilo "zona
        para subir", con nombre del archivo elegido visible ────────── */
input[type="file"]{
  width: 100%;
  border: 1.5px dashed var(--border-dark, #c7c7c7);
  border-radius: var(--dc-radius);
  background: var(--surface-2, #f7f8fa);
  padding: 12px;
  cursor: pointer;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  margin-right: 12px;
  border-radius: 20px;
  border: none;
  background: var(--accent, #2b6cb0);
  color: #fff;
  cursor: pointer;
}

.doc-fila {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.doc-fila:last-child { border-bottom: none; }
.doc-info { flex: 1; min-width: 220px; }
.doc-nombre { font-weight: 700; margin-bottom: 3px; font-size: 1rem; }
.doc-descripcion{ font-size: .85rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.45; }
.doc-estado { font-size: .8rem; font-weight: 600; }
.doc-estado.ok { color: var(--success); }
.doc-estado.pendiente { color: var(--warning); }
.doc-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: wrap; width: 100%; max-width: 320px; }
.doc-acciones input[type=file] { max-width: 100%; font-size: .85rem !important; }
.doc-archivo-elegido{ font-size: .82rem; color: var(--accent-dark); font-weight: 600; display: none; }

.pill {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.pill-pendiente { background: var(--warning-bg); color: var(--warning); }
.pill-enviada   { background: var(--success-bg); color: var(--success); }
.pill-ok        { background: var(--accent-light); color: var(--accent-dark); }
.pill-rechazada { background: var(--danger-bg); color: var(--danger); }

.radio-group { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-opt {
  display: flex; align-items: center; gap: 8px; font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: .96rem; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: 30px; padding: 10px 18px; cursor: pointer;
}
.radio-opt input{ width: 18px; height: 18px; accent-color: var(--accent, #2b6cb0); }
.radio-opt:has(input:checked){ border-color: var(--accent, #2b6cb0); background: var(--accent-light); }

.bbva-datos-compartir {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--dc-radius); padding: 14px 16px; margin: 10px 0;
  font-size: .9rem;
}
.bbva-datos-compartir dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 10px; margin-top: 8px; }
.bbva-datos-compartir dt { color: var(--text-muted); font-weight: 700; }

.proximamente-box {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.proximamente-box svg { width: 52px; height: 52px; stroke: var(--text-light); margin-bottom: 14px; }

/* ── Alerta warning (falta en style.css base) ─────────────────── */
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.alert{ border-radius: var(--dc-radius); font-size: .92rem; line-height: 1.5; padding: 14px 16px; }

/* ── Avance de perfil ─────────────────────────────────────────── */
.avance-bar-wrap { display: flex; align-items: center; gap: 12px; }
.avance-bar {
  flex: 1; height: 16px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.avance-bar-fill {
  height: 100%; background: var(--accent);
  border-radius: 20px; transition: width .3s ease;
}
.avance-pct { font-weight: 800; color: var(--accent-dark); min-width: 46px; text-align: right; font-size: 1.05rem; }
.avance-pendientes { margin: 10px 0 0; padding: 0; list-style: none; font-size: .88rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.avance-pendientes li { display: flex; align-items: center; gap: 8px; }
.avance-pendientes li::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning, #d4a017); flex-shrink: 0;
}

/* ── Política / texto institucional ──────────────────────────── */
.politica-box {
  font-size: .9rem; line-height: 1.65; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--dc-radius); padding: 18px 20px; margin-bottom: 18px;
}
.politica-box h3 { font-size: .95rem; margin: 14px 0 6px; color: var(--accent-dark); }
.politica-box h3:first-child { margin-top: 0; }
.politica-box ul { margin: 4px 0 4px 20px; }
.politica-box p { margin: 6px 0; }
.politica-box strong.aviso-importante { color: var(--danger); }

/* ── Textarea con contador ───────────────────────────────────── */
.contador-caracteres { text-align: right; font-size: .78rem; color: var(--text-light); margin-top: 3px; }
.contador-caracteres.limite { color: var(--danger); font-weight: 700; }

/* ── Aclaraciones enviadas ───────────────────────────────────── */
.aclaracion-card { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.aclaracion-card:last-child { border-bottom: none; }
.aclaracion-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.aclaracion-motivo {
  display: inline-block; padding: 5px 14px; border-radius: 20px;
  font-size: .87rem; font-weight: 700; background: var(--warning-bg); color: var(--warning);
}
.aclaracion-meta { font-size: .8rem; color: var(--text-light); margin-top: 4px; }
.aclaracion-detalle { font-size: .9rem; color: var(--text-muted); margin-top: 8px; white-space: pre-line; }
.aclaracion-links { margin-top: 8px; display: flex; gap: 14px; font-size: .82rem; flex-wrap: wrap; }
.aclaracion-respuesta {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--dc-radius);
  background: var(--accent-light); color: var(--accent-dark); font-size: .87rem;
}

/* =====================================================
   RESPONSIVE — Portal Docente (solo docente, no afecta admin)
   ===================================================== */

/* ── Tablet / sidebar pasa a barra superior horizontal ─────────── */
@media (max-width: 880px) {
  .app-shell { flex-direction: column; min-height: auto; }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
  }

  .sidebar-brand { padding: 10px 16px; border-bottom: none; }
  .logo-img { max-width: 110px; }
  .brand-sub { padding-top: 2px; font-size: .66rem; }

  .sidebar-footer-docente {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .docente-mini { flex: 1; min-width: 0; }
  .docente-mini-nombre { max-width: none; }
  .nav-logout { flex: 0 0 auto; padding: 10px 12px; }
  .nav-logout span { display: none; }

  .main-content { margin-left: 0; min-height: auto; }
  .topbar {
    height: auto; min-height: 56px;
    padding: 12px 18px;
    position: static;
  }
  .page-title { font-size: 1.1rem !important; }
  .content-body { padding: 16px; }
}

/* ── Teléfono: apilar tarjetas, formularios y tablas ─────────────── */
@media (max-width: 600px) {
  .content-body { padding: 14px; }

  .card-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 18px;
  }
  .card-header h2 { font-size: 1rem; }
  .card-body { padding: 18px; }

  .home-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .horas-row { grid-template-columns: 1fr; }

  .menu-opciones{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .menu-opcion{ padding: 18px 10px; min-height: 110px; }

  .bienvenida-card { flex-direction: column; text-align: center; padding: 20px 16px; }

  .auth-shell { padding: 14px; }
  .auth-card, .auth-card.wide { padding: 24px 18px; max-width: 100%; }
  .auth-logo img { width: 100px; }

  .foto-uploader{ flex-direction: column; align-items: center; text-align: center; }
  .foto-instrucciones{ text-align: left; }

  .doc-fila { flex-direction: column; align-items: stretch; gap: 10px; }
  .doc-acciones { width: 100%; max-width: 100%; }
  .doc-acciones input[type=file] { max-width: 100%; width: 100%; }

  .radio-group { flex-wrap: wrap; gap: 10px; }
  .radio-opt{ flex: 1 1 auto; justify-content: center; }

  .aclaracion-top, .aclaracion-admin-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .aclaracion-links, .aclaracion-admin-links { flex-direction: column; gap: 8px; }

  .bbva-datos-compartir dl { grid-template-columns: 100px 1fr; gap: 4px 8px; font-size: .82rem; }

  .aviso-card { flex-direction: column; }
  .aviso-card img { width: 100%; height: 160px; }

  .perfil-foto-actual { width: 80px; height: 80px; }

  .table-wrap table { font-size: .82rem; }
  .table-wrap th, .table-wrap td { padding: 10px 10px; }

  /* Vista previa del horario/documento imprimible en pantalla chica */
  .doc-print { padding: 18px 14px; max-width: 100%; }
  .letterhead { flex-direction: column; gap: 6px; text-align: center; }
  .letterhead-logo { height: 40pt; }
  .letterhead-nombre { text-align: center; }
  .perfil-nombre { font-size: 15pt; }
  .doc-ciclo { font-size: 11pt; }

  .form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .form-actions .btn { width: 100%; justify-content: center; }

  .page-intro{ font-size: .9rem; padding: 12px 14px; }
}

@media (max-width: 380px) {
  .nav-item span { font-size: .62rem; }
  .bienvenida-nombre { font-size: 1.05rem; }
  .menu-opciones{ grid-template-columns: 1fr; }
}