/* La marca completa de Evalia: índigo eléctrico (elegida el 13-nov-2026; marca.py).
   Se carga en la organización con `tema_bloques`, después de todas las demás
   hojas, junto a `marca_indigo.css` (tokens, tipografía y lo propio).

   Qué hace:
   - Barra superior BLANCA con el logo (pedido del dueño). Dentro de un módulo
     el color del proceso NO pinta la barra: va en la banda del encabezado de la
     pantalla, en el grupo activo del menú y en un filete de 3 px bajo la barra.
     Así la barra es siempre la misma (el logo se lee igual en todas partes) y el
     «dónde estoy» se sigue viendo.
   - El primario sólo en botones, foco y enlaces. Fuera de un módulo el
     encabezado es una tarjeta blanca, no una banda del primario.
   - Neutros sin tinte, bordes más redondeados, más aire y sombras suaves. */

body { font-family: var(--fuente-cuerpo); background: var(--fondo); }
h1, h2, h3, .fam-h1, .logo-texto, .ui-modulo-texto strong, .colegio-nombre {
  font-family: var(--fuente-titulo); }
h1, .fam-h1 { font-weight: 800; letter-spacing: -0.01em; }
h2, h3 { font-weight: 700; letter-spacing: 0; }
main { margin-top: var(--e6); }
.tarjeta { border-radius: var(--radio); box-shadow: var(--sombra); border-color: var(--borde); }
input, select, textarea { border-radius: var(--radio-chico); }
button, .boton { border-radius: var(--radio-boton); }
:focus-visible { outline-color: var(--marca-vivo); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--marca-vivo); outline-offset: 1px; }
.logo-ia, .topbar .logo-ia, .fam-top .logo-ia, .est-top .logo-ia,
.portada .logo-ia { color: inherit; } /* «Evalia» de un solo color */
/* Propuesta B pintaba el fondo con un gris azulado (#f1f4f8): neutro de la marca. */
body.ui-tema-b { --fondo: var(--fondo-marca, #f5f5f5); }

/* — Barra superior blanca ———————————————————————————————————————————— */
.topbar, body.ui-tema-b .topbar, .fam-top, .est-top {
  background: var(--barra); color: var(--barra-texto);
  box-shadow: none; border-bottom: 1px solid var(--borde); position: relative;
}
.topbar a, .topbar nav > a, .topbar details.menu > summary,
.fam-top .logo, .est-top .logo, .topbar .logo, .fam-salir, .est-top a { color: var(--barra-texto); }
.topbar :focus-visible { outline-color: var(--marca-vivo); }
.topbar .logo-ia, .fam-top .logo-ia, .est-top .logo-ia, .topbar .logo-ia, .fam-top .logo-ia, .est-top .logo-ia,
.portada .logo-ia { color: inherit; } /* «Evalia» de un solo color */
.topbar details.menu > summary:hover, .topbar details.menu[open] > summary,
.topbar nav a:hover { background: var(--marca-tenue); text-decoration: none; }
.topbar nav > a.activo, .topbar details.menu.activo > summary { background: var(--marca-tenue); }
body.ui-tema .topbar nav.ui-nav details.menu.activo > summary,
body.ui-tema-b .topbar nav.ui-nav details.menu.activo > summary { background: var(--mod); color: #fff; }
.topbar .menu-lista a:hover, .topbar .menu-lista a.activo { background: var(--marca-tenue); color: var(--tinta); }
body[class*="mod-"] .topbar { border-bottom: 3px solid var(--mod); }
.topbar nav.ui-nav .ui-buscador input {
  background: var(--marca-tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") no-repeat .55rem center / 1rem;
  border: 1px solid transparent; color: var(--tinta); }
.ui-buscador input:focus { outline-color: var(--marca-vivo); }
.topbar-boton:not([hidden]) { border-color: var(--borde-fuerte); color: var(--barra-texto); }
.topbar-boton:hover, .topbar.abierta .topbar-boton { background: var(--marca-tenue); }
.topbar-boton:focus-visible { outline-color: var(--marca-vivo); }
.fam-salir, .fam-top a { color: var(--barra-texto); }
.fam-top .fam-avisos, .fam-top [class*="campana"] { color: var(--barra-texto); border-color: var(--borde-fuerte); }

/* — Fuera de un módulo: tarjeta blanca, no banda del primario ————————————— */
:root { --mod: var(--tinta); --mod-tenue: var(--marca-tenue); }
body:not([class*="mod-"]) .ui-encabezado,
body.ui-tema-b:not([class*="mod-"]) .ui-encabezado {
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
  border-radius: var(--radio); }
body.ui-tema-b:not([class*="mod-"]) .ui-encabezado h1,
body.ui-tema-b:not([class*="mod-"]) .ui-encabezado .ui-ayuda,
body.ui-tema-b:not([class*="mod-"]) .ui-encabezado .ui-ruta a,
body.ui-tema-b:not([class*="mod-"]) .ui-encabezado .ui-ruta span { color: var(--tinta); }
body.ui-tema-b:not([class*="mod-"]) .ui-encabezado::after { background: var(--acento-claro); opacity: .22; }
body:not([class*="mod-"]) main .boton:not(.secundario):not(.peligro):not(.discreto),
body:not([class*="mod-"]) main button[type=submit]:not(.secundario):not(.peligro):not(.chico):not(.discreto) {
  background: var(--marca); border-color: var(--marca); color: #fff; }
.ui-tema-b main .tarjeta, .ui-tema-b .ui-curso, .ui-tema-b .ui-hoy { border-radius: var(--radio); }
.ui-tema-b main table tbody tr:nth-child(even) { background: #fafafa; }

/* — Portada (login) ——————————————————————————————————————————————————— */
.portada-marca { color: var(--tinta); }
.tarjeta-acceso { border-top: 0; box-shadow: var(--sombra-alta); }
.portada .logo { --logo-tam: 44px !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* — Barra en dos filas (escritorio) —————————————————————————————————————
   🩸 14-nov-2026, hoja de contacto: con Inter, los once grupos + la lupa + la
   cuenta medían 1.408 px sobre 1.334 disponibles: 58 px de scroll horizontal en
   TODAS las pantallas de UTP, dirección y docentes a 1366 px, y la cuenta fuera
   de la pantalla. La barra blanca ya iba en dos filas (logo arriba, módulos
   abajo): la lupa y la cuenta suben a la fila del logo, la fila de módulos queda
   sólo para los módulos, y si aun así no caben (una tableta), envuelven en vez de
   desbordar. Bajo 820 px manda el menú plegado de plataforma.css. */
@media (min-width: 821px) {
  .topbar { position: relative; }
  .topbar nav.ui-nav { flex: 1 1 100%; flex-wrap: wrap; row-gap: .25rem; }
  .topbar nav.ui-nav .menu-empuje { display: none; }
  .topbar nav.ui-nav > details.menu.cuenta,
  .topbar nav.ui-nav > .ui-buscador { position: absolute; top: .55rem; z-index: 6; }
  .topbar nav.ui-nav > details.menu.cuenta { right: var(--e4); }
  .topbar nav.ui-nav > details.menu.cuenta > summary { max-width: 11rem; }
  .topbar nav.ui-nav > .ui-buscador { right: calc(var(--e4) + 11.5rem); margin: 0; }
}