/* =============================================================================
   INTELLIGENCE CORE — identidad.css
   Identidad visual común del sitio del colegio El Principito · Saint Exupéry.

   Todas las páginas la cargan AL FINAL del <head>, junto con las tipografías:
     - Literata (títulos): una letra pensada para leer libros; le da al sitio
       un tono de escuela y biblioteca en lugar del de "app de IA".
     - IBM Plex Sans (interfaz) e IBM Plex Mono (código).

   Los colores de cada página siguen en su propio :root, con esta paleta:
     papel #f6f4ef · tinta #1d1c1a (acción principal) · gris #6b665d
     línea #e2ddd2 · azul del escudo #2b4aa0 (enlaces y estados activos)
     ocre #b7791f (acento, poco)
   Estilo sobrio a lo Manus: títulos en serif de peso normal, mucho espacio,
   botones en tinta y movimiento suave (Motion + transiciones entre páginas).
   Sin degradados, brillos ni efectos de vidrio.
   ========================================================================== */

:root {
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-code: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --ep-papel: #f6f4ef;
  --ep-tinta: #1d1c1a;
  --ep-azul: #2b4aa0;
  --ep-azul-suave: #eef1f8;
  --ep-ocre: #b7791f;
  --ep-accion: #1d1c1a;          /* botones principales */
  --ep-accion-hover: #3a3732;
  --ep-curva: cubic-bezier(0.22, 1, 0.36, 1);   /* salida suave para movimiento */
}

/* Títulos con la letra de libro; el resto hereda la de interfaz de cada página. */
h1,
h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
}

::selection {
  background: #d9e0f1;
  color: var(--ep-tinta);
}

/* Foco visible y consistente para teclado (accesibilidad). Solo en enlaces y
   botones, y con :where() (especificidad 0) para que los campos de texto y
   los componentes de cada página conserven su propio estilo de foco. */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--ep-azul);
  outline-offset: 2px;
}

/* Transición suave al pasar de una página del sitio a otra (en los
   navegadores que la soportan; en el resto se navega igual que siempre). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: var(--ep-curva);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Movimiento reducido: si la persona lo pidió en su sistema
   (prefers-reduced-motion), las animaciones y transiciones son casi
   instantáneas, sin demoras ni repeticiones, y el scroll no se anima. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* Menú de las páginas de la app (Study, Biblioteca, Classroom, Mi materia):
   los mismos enlaces que el menú del sitio, en texto, con la página actual
   subrayada en azul. En el celular queda en una fila que se desliza de costado. */
.app-nav {
  align-items: center;
  display: flex;
  font-family: var(--font-ui);
  font-size: 14px;
  gap: 2px;
}

.app-nav a {
  border-radius: 6px;
  color: #6b665d;
  padding: 7px 9px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.app-nav a:hover {
  background: rgba(29, 28, 26, 0.05);
  color: var(--ep-tinta);
}

.app-nav a[aria-current="page"] {
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--ep-azul);
  color: var(--ep-tinta);
  font-weight: 600;
}

@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
  }

  .app-nav {
    margin: 2px -6px 0;
    order: 10;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }
}

/* Cita con la letra de libro (se usa en la portada). */
.cita {
  border-left: 2px solid var(--ep-ocre);
  font-family: var(--font-display);
  font-style: italic;
  margin: 0;
  padding-left: 16px;
}