/* ==========================================================================
   RUMBOH · Portal — BASE: reinicio, tipografia y accesibilidad  (HU-PC-101)
   ==========================================================================
   Todo color sale de tokens.css. Aqui no se escribe un solo HEX.

   🔴 Las reglas de accesibilidad de este archivo NO son decoracion. La
   conformidad WCAG 2.1 AA es CONTRACTUAL para la app movil y el Portal
   (Carta Proyecto; HU-PC-105), y aplica POR PANTALLA: una historia de
   accesibilidad al final del proyecto es una historia que no se hace. Lo que
   esta aqui es el piso que hereda cada pantalla nueva sin tener que acordarse.
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFIA — Inter, autoalojada
   ==========================================================================
   Inter la indico el Municipio (confirmado el 26 de agosto de 2026). Se sirve
   desde wwwroot/fonts y NO desde Google Fonts: es un portal de gobierno y cada
   visita le entregaria a un tercero la IP del ciudadano. La decision completa,
   el subconjunto y como se regenera estan en wwwroot/fonts/LEEME.md.

   🔴 ES UNA FUENTE VARIABLE: este UNICO archivo cubre los pesos 100 a 900.
   No hace falta —ni se debe— agregar un archivo por peso.

   font-display: swap es deliberado: el texto se pinta de inmediato con la
   tipografia de respaldo y cambia a Inter cuando llega. La alternativa por
   omision deja el texto INVISIBLE hasta tres segundos, que en un telefono con
   mala red es una pagina en blanco — y con ella se incumpliria el propio
   sentido de un portal de consulta rapida.
   ========================================================================== */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable-latin.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

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

html {
    /* 🔴 NO se fija font-size en px. Hacerlo anula el ajuste de tamano de
       fuente del navegador y de ahi para abajo ningun rem responde, con lo que
       se incumple el criterio de que la interfaz sea usable con la fuente del
       sistema aumentada. */
    -webkit-text-size-adjust: 100%;
    /* Que el ancla de un enlace interno no quede debajo del encabezado fijo. */
    scroll-padding-top: calc(var(--alto-encabezado) + var(--e-4));
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: var(--fuente);
    font-size: var(--txt-md);
    line-height: 1.55;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e-3); line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--txt-2xl); letter-spacing: -.02em; }
h2 { font-size: var(--txt-xl); }
h3 { font-size: var(--txt-lg); }
h4 { font-size: var(--txt-md); }
p  { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

/* A partir de tableta la jerarquia puede crecer sin comerse la pantalla. */
@media (min-width: 48rem) {
    h1 { font-size: var(--txt-3xl); }
    h2 { font-size: var(--txt-2xl); }
    h3 { font-size: var(--txt-xl); }
}

a {
    color: var(--primario);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: .14em; }

/* 🔴 Los enlaces dentro de texto van SUBRAYADOS, no solo en otro color.
   WCAG 1.4.1: la informacion no puede transmitirse unicamente por color, y
   quien no distingue el teal del gris no ve donde hay un enlace. */
.prosa a { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--borde-sutil); margin: var(--e-5) 0; }

code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* ==========================================================================
   FOCO VISIBLE
   ==========================================================================
   🔴 NUNCA `outline: none` sin reponer algo equivalente. Quien navega con
   teclado —y quien no puede usar un raton no tiene otra opcion— pierde por
   completo la nocion de donde esta, y el fallo es invisible para quien prueba
   con el raton. Es WCAG 2.4.7, y es de los que se cuelan hasta produccion.

   Se usa :focus-visible y no :focus para que el anillo no aparezca al hacer
   clic con el raton, que es lo que lleva a la gente a quitarlo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ==========================================================================
   AREA TACTIL
   ==========================================================================
   44×44 CSS px minimo en todo control. En el telefono —que DT-03 obliga a
   verificar— un boton de 32px se falla al tocarlo y el ciudadano cree que la
   pagina no responde. */
:where(a[class*="boton"], button, [role="button"], input[type="checkbox"], input[type="radio"]) {
    min-height: var(--tactil-min);
}
/* Los enlaces de texto corrido quedan fuera: estirarlos partiria el parrafo. */

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ==========================================================================
   WCAG 2.3.3. Para quien tiene trastorno vestibular una transicion no es un
   detalle estetico: produce mareo. Se apaga todo, sin excepciones. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   UTILIDADES DE ACCESIBILIDAD
   ========================================================================== */

/* Visible solo para la ayuda tecnica. Se usa para el texto que da contexto a
   un control cuyo rotulo visible no basta por si solo, y para las regiones
   activas que anuncian sin pintar nada. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Salto al contenido: primer elemento enfocable de la pagina, invisible hasta
   que recibe foco. Sin el, quien navega con teclado recorre el encabezado y el
   menu entero en CADA pagina antes de llegar al contenido (WCAG 2.4.1). */
.salto-contenido {
    position: absolute;
    left: var(--e-4);
    top: calc(-1 * var(--e-8));
    z-index: 100;
    padding: var(--e-3) var(--e-4);
    background: var(--primario-superficie);
    color: var(--sobre-primario);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.salto-contenido:focus { top: 0; }

/* ==========================================================================
   DISPOSICION — MOVIL PRIMERO
   ==========================================================================
   Los anchos van en rem, no en px: si alguien amplia la fuente, los puntos de
   quiebre se mueven con ella y la maqueta no se rompe a media pantalla.

     · por omision  → telefono
     · ≥ 48rem      → tableta
     · ≥ 64rem      → escritorio
   ========================================================================== */

.contenedor {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin-inline: auto;
    padding-inline: var(--e-4);
}
@media (min-width: 48rem) { .contenedor { padding-inline: var(--e-5); } }

/* El shell ocupa el alto de la ventana y empuja el pie hacia abajo aunque la
   pagina tenga poco contenido. 100svh y no 100vh: en el navegador del telefono
   100vh incluye la barra de direcciones y deja el pie cortado. */
.shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}
.shell > main { flex: 1 0 auto; padding-block: var(--e-6) var(--e-7); }

/* ==========================================================================
   AVISO DE ERROR DE BLAZOR
   ==========================================================================
   ⚠️ Sin esta regla el aviso "Ocurrio un error no controlado" aparece en TODAS
   las pantallas todo el tiempo, sin que haya pasado nada, y no deja rastro ni
   en el log del servidor ni en la consola del navegador — que es justo lo que
   despista. Ver CLAUDE.md §8. Blazor lo muestra por JavaScript cuando de
   verdad se cae el circuito.
   ========================================================================== */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--e-4);
    background: var(--error-fondo);
    color: var(--texto);
    border-top: 3px solid var(--error);
    box-shadow: var(--sombra-2);
    text-align: center;
}
#blazor-error-ui .recargar { color: var(--texto); font-weight: 700; }