/* ════════════════════════════════════════════════════════════════
   SGC — Lumina Culture Design System
   components.css — estilos de componente compartidos entre módulos
   Cargado en todos los módulos justo después de theme.css.
   No incluir aquí estilos específicos de un solo módulo.
   ════════════════════════════════════════════════════════════════ */

/* ── Reset universal ── */
*{box-sizing:border-box;margin:0;padding:0}

/* ── Grillas de layout ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
/* min-width:0 — sin esto los hijos de la grilla no pueden encoger por debajo del
   ancho intrínseco de sus inputs (~170px) y se desbordan del modal */
.grid2>*,.grid3>*,.grid4>*{min-width:0}

/* ── Grillas de formulario (alias de grid* usado por los módulos con .fg) ── */
.fg{display:grid;gap:12px 14px}
.fg-1{grid-template-columns:1fr}
.fg-2{grid-template-columns:1fr 1fr}
.fg-3{grid-template-columns:1fr 1fr 1fr}
.fg-4{grid-template-columns:1fr 1fr 1fr 1fr}
.fg-2>*,.fg-3>*,.fg-4>*{min-width:0}
.span2{grid-column:span 2}

/* ── Colapso a una columna en móvil (grid* y fg* comparten el mismo breakpoint) ── */
@media(max-width:480px){
  .grid2,.grid3,.grid4,.fg-2,.fg-3,.fg-4{grid-template-columns:1fr}
  .span2{grid-column:1}
}

/* ── Campo de formulario ── */
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.fld label .req,.req{color:var(--rojo);margin-left:2px}
.fld input,.fld select,.fld textarea{padding:9px 11px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:13px;color:var(--text);background:#FAFBFD;outline:none;transition:border-color .18s,box-shadow .18s}
.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld textarea{width:100%;min-width:0}
.fld textarea{resize:vertical;min-height:70px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--azul);background:#fff;box-shadow:0 0 0 3px var(--azul-glow)}

/* ── Panel ── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:16px;overflow:hidden;transition:box-shadow .18s}
.panel:hover{box-shadow:var(--shadow)}
.panel-head{padding:12px 18px;border-bottom:1px solid var(--border);background:#FAFBFD;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head h2{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14px;color:#0F1726;flex:1}
.panel-body{padding:18px}

/* ── Encabezado de módulo ── */
.page-header{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative}
.header-inner{display:flex;align-items:center;gap:14px;padding:12px 22px}
.header-stripe{height:4px;background:linear-gradient(90deg,var(--rojo) 0 33%,#fff 33% 66%,var(--azul) 66%)}

/* ── Overlay de modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,38,.45);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:16px}
.modal-overlay.open{display:flex}

/* ── Buscador ── */
.search-inp{width:100%;padding:8px 12px;font-size:13px;font-family:inherit;border:1.5px solid var(--border);border-radius:9px;background:#FAFBFD;outline:none;transition:border-color .15s}
.search-inp:focus{border-color:var(--azul)}

/* ── Banner de alerta ── */
.alert-banner{background:#FFF8F8;border:1px solid #F5BEBE;border-radius:10px;padding:12px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.alert-banner.ok{background:#F0FDF8;border-color:#A7F0D4}
.alert-banner.warn{background:#FFFBF0;border-color:#F5E0A7}

/* ── Botón base (compacto) ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}

/* ── Tarjeta ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .18s}

/* ── Badge / chip (sin mayúsculas) ── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}

/* ── Modal: marco compartido; cada módulo fija el ancho ──
   OJO: ".modal" se deja mínimo a propósito — varias páginas (mod_docentes,
   asistencia_alumnos/docentes) ya usan la clase ".modal" ellas mismas como
   contenedor con su propio toggle .open/display:none, y como sus <style>
   locales cargan ANTES que components.css, cualquier display/animación que
   se agregue aquí les gana en la cascada y les rompe el modal (abierto
   siempre). Para un modal completo (cabecera/cuerpo/pie con scroll interno)
   usar ".modal-box", que es un nombre nuevo sin ese choque. */
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg)}
.modal-box{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:500px;
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:modalBoxPop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes modalBoxPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{padding:14px 20px;border-bottom:1px solid var(--border);background:#FAFBFD;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.modal-head h3{font-size:15px;font-weight:700;color:var(--text)}
.modal-close{background:transparent;border:1.5px solid var(--border);color:var(--muted);width:30px;height:30px;
  border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;transition:all .15s;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.modal-close:hover{border-color:var(--rojo);background:#FFF0F2;color:var(--rojo)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}

/* ── Toast: burbuja compartida (plan 3.5). Cada módulo puede seguir agregando su
   propio ajuste de oscuro/glass encima (usan !important y ganan igual). Páginas
   con API de toast distinta (mod_docentes usa .toast con type=''; mod_horario usa
   showToast()/.warn por defecto; mod_formulario usa nombres de color como clase)
   no se tocaron — solo estas 5 compartían ya el mismo bloque casi al byte. ── */
#toast,.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#16203A;color:#fff;padding:11px 22px;border-radius:10px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:all .3s;z-index:9999;box-shadow:var(--shadow-lg);
  max-width:90vw;text-align:center}
#toast.show,.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok,.toast.ok{background:var(--verde-light)}
#toast.err,.toast.err{background:var(--rojo)}
#toast.warn,.toast.warn{background:var(--oro)}

/* ── Botón: variantes de color compartidas. Cada módulo con su propia copia local
   (que carga antes que components.css) sigue ganando por cascada — esto solo rellena
   el hueco donde falte una variante, y es el punto de partida para converger. ── */
.btn.primary,.btn-primary{background:linear-gradient(135deg,var(--azul),var(--azul-dark));color:#fff;border:none}
.btn.primary:hover,.btn-primary:hover{filter:brightness(1.08)}
.btn.danger,.btn-danger{background:var(--rojo);color:#fff;border:none}
.btn.danger:hover,.btn-danger:hover{filter:brightness(1.08)}
.btn.success,.btn-success{background:var(--verde-light);color:#fff;border:none}
.btn.success:hover,.btn-success:hover{filter:brightness(1.08)}
.btn.warning,.btn-warning{background:var(--oro);color:#fff;border:none}
.btn.warning:hover,.btn-warning:hover{filter:brightness(1.08)}
.btn.sm,.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}

/* ════════════════════════════════════════════════════════════════
   ACCESIBILIDAD (plan 3.4) — reglas globales, cargadas en todos los módulos
   ════════════════════════════════════════════════════════════════ */

/* ── Foco visible: anillo consistente en toda la app, solo por teclado ──
   :focus-visible no se activa con click de mouse, así que no aparece un
   anillo en cada clic — solo cuando se navega con Tab. */
:focus-visible{
  outline:2.5px solid var(--azul);
  outline-offset:2px;
  border-radius:4px;
}
/* Los inputs de .fld ya muestran su propio anillo (box-shadow) al enfocar —
   evita duplicar el efecto con un outline extra. */
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none}

/* ── Reduce movimiento: respeta la preferencia del sistema operativo ──
   Aplica a animaciones/transiciones de todo el sistema (spinners, modales,
   hover de tarjetas, shimmer de skeletons, etc.) sin tener que tocarlas una
   por una en cada módulo. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── Área táctil mínima (44×44px, WCAG 2.5.5) en botones de acción en móvil ── */
@media(max-width:768px){
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
}