/* ================================================
   Boot CSS — minimal styles for the auth gate.
   No depende de main.css. Se carga estático en index.html.
   main.css y todo el styling del app-shell se cargan
   dinámicamente cuando el usuario está autorizado.
   ================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg, #f8fafc);
  color: var(--text, #1e293b);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

/* Tokens base — replicados de main.css para que el gate tenga consistencia.
   Cuando carga main.css después del login, redefine y enriquece. */
:root {
  --primary: #3b82f6;
  --primary-dark: #1e40af;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --surface-elevated: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e5e7eb;
  --danger: #ef4444;
  --warn: #f59e0b;
  --success: #22c55e;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #334155;
  --surface-3: #475569;
  --surface-elevated: #1c3050;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
}

/* Toggling crítico: oculta CUALQUIER cosa fuera del gate hasta autenticarse.
   El app-layout sigue en el HTML pero invisible. Cuando carguen los CSS
   reales (main.css), el gate desaparece y el app-layout aparece. */
body:not(.is-authenticated) .app-layout { display: none !important; }
body:not(.is-authenticated) .modal-backdrop { display: none !important; }
body.is-authenticated #auth-gate { display: none !important; }

/* v175: skip-link de a11y ya posicionado fuera de pantalla en boot.css
   para que NO aparezca como texto crudo arriba durante el FOUC inicial.
   main.css agrega luego el resto del estilo visual cuando se enfoca con Tab. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
}
.skip-link:focus { top: 0; }

/* v175: el app-footer (texto del MINEDUC + responsabilidad pedagógica)
   también vive fuera del app-layout, así que también lo oculto antes
   de auth para evitar el FOUC. Solo se ve cuando el docente ya está
   adentro de la app. */
body:not(.is-authenticated) .app-footer { display: none !important; }

/* Defensa contra FOUC: si el app-layout llegara a aparecer antes que
   main.css cargue (no debería pasar gracias al refactor en boot.js que
   retrasa body.is-authenticated hasta que el shell completo cargue,
   pero por las dudas), limitamos el tamaño natural del logo SVG para
   que no se vea gigantesco si los estilos del sidebar no están aún. */
.sidebar-logo,
.sidebar img,
.app-layout img {
  max-width: 64px;
  max-height: 64px;
}

/* Hidden util para el gate antes de que JS se ejecute — evita flash de
   contenido sin estilizar (FOUC) */
[hidden] { display: none !important; }