/* Estilos de la pantalla de acceso. Desde la migracion del frente B de
   S01-25 (spec_sistema-visual.md §7.1) NO decide ningun valor: todo sale de
   wwwroot/tokens.css. Un color literal aqui es un defecto que caza R1.

   La anatomia de esta pantalla es la EXCEPCION declarada del §4 del spec --
   tarjeta partida en dos mitades, a pantalla completa y sin navegacion --,
   pero sus campos, botones y avisos son piezas del catalogo como en
   cualquier otra pantalla. */

html, body {
    margin: 0;
    font-family: var(--tipo-cuerpo);
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* MudBlazor genera sus variables al renderizar el proveedor. Este selector,
   más específico, enlaza ese cromo al mismo data-theme que usa el resto del
   documento y permite cambiarlo sin una segunda preferencia en C#. */
:root[data-theme] {
    --mud-palette-primary: var(--color-accion);
    --mud-palette-primary-text: var(--color-sobre-accion);
    --mud-palette-secondary: var(--color-acento);
    --mud-palette-background: var(--color-fondo);
    --mud-palette-surface: var(--color-superficie);
    --mud-palette-text-primary: var(--color-texto);
    --mud-palette-text-secondary: var(--color-texto-tenue);
    --mud-palette-text-disabled: var(--color-texto-inhabilitado);
    --mud-palette-error: var(--color-error);
    --mud-palette-success: var(--color-exito);
    --mud-palette-warning: var(--color-aviso);
    --mud-palette-info: var(--color-informacion);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-sobre-estado);
}

    .blazor-error-boundary::after {
        content: "Ocurrió un error."
    }

/* --- Pantalla de acceso (spec_interfaz-panel.md §2.1) ---
   Global (no aislado por componente) a propósito: la pantalla de "Actualice
   su contraseña" vive en una RUTA separada de la de login
   (Components/Pages/CompletarAcceso.razor) -- Blazor Server exige que un
   formulario con nombre exista incondicionalmente en el render inicial de
   su propia ruta (no puede aparecer sólo como rama condicional resultado de
   un POST anterior en la MISMA ruta), así que "pantalla distinta" del §2.2
   del spec se implementó literalmente como una página distinta, no como una
   rama oculta del mismo componente. Las dos páginas comparten esta misma
   hoja de estilos para no duplicar la maqueta aprobada dos veces.

   La identidad NO es reactiva a prefers-color-scheme (spec_interfaz-panel.md
   §2.1): es membrete institucional. Eso lo garantiza tokens.css, que declara
   un solo juego de valores -- este archivo ya no decide ninguno. */

.acceso-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo) url('/marca/fondo_acceso_edificio.jpg') center / cover no-repeat;
    padding: 2.5rem 1rem;
    font-family: var(--tipo-cuerpo);
    color: var(--color-texto);
    box-sizing: border-box;
}

.acceso-tarjeta {
    display: flex;
    /* Proporción fijada por el usuario el 2026-08-22: con 149px de fondo
       visible arriba, la tarjeta mide 475 de alto. Como el centrado parte
       el espacio sobrante en dos, eso es 475/(149+475+149) = 61.45vh, y la
       relación se conserva en cualquier ventana: min-height pone ese piso
       y el ancho es esa altura por 940/540, la forma de la maqueta, así
       que la tarjeta escala entera (logo, tipos y marca de agua viven en
       cqw) y devuelve el fondo del edificio que el esquema anterior
       (width 92% + max-width 1320px + max-height 88vh) tapaba al dejarla
       en 1320x758. SIN aspect-ratio a propósito: con ancho definido fijaría
       la altura por la relación y no dejaría crecer al contenido.

       La proporción es un MÍNIMO (min-height, no height): la pantalla de
       CompletarAcceso trae tres campos y a ventanas bajas su formulario
       necesita más de 475 -- la tarjeta crece lo justo para no recortar
       título ni pie. El min() interior es la guardia de ventanas
       angostas: recorta justo donde un max-width partiría la relación. */
    width: calc(min(61.45vh, 92vw * 540 / 940) * 940 / 540);
    min-height: min(61.45vh, 92vw * 540 / 940);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
    background: var(--color-superficie);
    /* Container query en vez de media query: el logo, la etiqueta, el
       título del formulario y la marca de agua se dimensionan con `cqw`
       (porcentaje del ancho REAL de la tarjeta, que ya crece con la
       ventana por el aspect-ratio de arriba) -- así escalan junto con la
       tarjeta en vez de quedarse al tamaño fijo pensado para los 940px
       originales. Los porcentajes vienen de esa base: 300px/940px≈32%,
       380px/940px≈40%, etc. */
    container-type: inline-size;
    container-name: tarjeta;
}

/* --- Panel de identidad (mitad izquierda) --- */

/* Valores tomados literalmente de la maqueta Artifact aprobada el
   2026-08-20 (id d3eaa2e5-5f7b-41e6-9304-ce60e4c6df0a), recuperada el
   2026-08-21 -- ver nota en PanelIdentidad.razor. */

.acceso-identidad {
    position: relative;
    flex: 1 1 55%;
    background: linear-gradient(160deg, var(--marca-navy) 0%, var(--marca-navy-profundo) 100%);
    color: var(--color-sobre-navy-fuerte);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 44px 36px;
    box-sizing: border-box;
}

.acceso-identidad__marca-agua {
    position: absolute;
    right: -70px;
    bottom: -50px;
    width: clamp(280px, 40cqw, 560px);
    height: clamp(280px, 40cqw, 560px);
    filter: invert(1);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.acceso-identidad__marca {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.acceso-identidad__logo {
    max-width: clamp(220px, 32cqw, 460px);
    width: 100%;
    height: auto;
}

.acceso-identidad__etiqueta {
    margin: 0;
    font-size: clamp(11px, 1.3cqw, 17px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--marca-azul-claro);
    font-weight: 600;
    opacity: 0.8;
}

.acceso-identidad__entes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acceso-identidad__rotulo-entes {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marca-azul-claro);
    opacity: 0.75;
}

.acceso-identidad__etiqueta-ente {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--color-sobre-navy);
    padding: 7px 12px;
    border: 1px solid var(--borde-sobre-navy);
    background: var(--fondo-sobre-navy);
    border-radius: 8px;
    width: fit-content;
}

.acceso-identidad__punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marca-azul-medio);
    flex: none;
}

/* --- Panel de formulario (mitad derecha) --- */

.acceso-formulario {
    flex: 1 1 45%;
    background: var(--color-superficie);
    color: var(--color-texto);
    padding: clamp(3rem, 5.2cqw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    box-sizing: border-box;
}

.acceso-formulario__titulo {
    font-family: var(--tipo-titulo);
    font-size: clamp(1.7rem, 3cqw, 2.6rem);
    font-weight: 600;
    margin: 0 0 0.15rem 0;
    color: var(--color-titulo);
}

.acceso-formulario__subtitulo {
    margin: 0 0 0.4rem 0;
    color: var(--color-texto-tenue);
    font-size: clamp(0.92rem, 1.6cqw, 1.25rem);
}

.acceso-formulario__alerta {
    margin-bottom: 0.4rem;
}

/* Los campos ya no se maquetan aqui: son CampoTexto y CampoContrasena del
   catalogo (§3.2). Sus reglas vivian en este archivo cuando la pantalla
   escribia sus propios <input>. */

.acceso-formulario__boton {
    margin-top: 0.4rem;
}

.acceso-formulario__pie {
    /* 0.5rem y no 1rem: el gap de la columna ya separa; con 1rem el
       formulario mide 478 natural y empuja la tarjeta 3px encima del
       mínimo proporcional de 475 (medido 2026-08-22). */
    margin-top: 0.5rem;
    font-size: clamp(0.78rem, 1.3cqw, 1.05rem);
    color: var(--color-texto-tenue);
}

/* Punto de corte a 900px, no a 720.
   Medido el 2026-08-21 (esquema de entonces, tarjeta dimensionada por el
   ancho): a 768px de ventana la tarjeta medía 707x406 por su
   `aspect-ratio` -- pero el panel de identidad necesitaba 439px y el
   formulario 396. El titulo se salia por arriba y el pie quedaba cortado
   por abajo. Desde la proporción mínima de 61.45vh (2026-08-22) el
   problema de fondo es el mismo: los campos del catalogo tienen escala
   fija y no caben en una tarjeta que se empequeñece con la ventana.
   Por debajo de 900px la tarjeta deja de forzar su forma y apila, que es la
   maqueta movil ya disenada y no puede recortar nada. */
@media (max-width: 900px) {
    .acceso-tarjeta {
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }

    .acceso-identidad {
        padding: 30px 28px;
        gap: 18px;
    }

    .acceso-identidad__logo {
        max-width: 240px;
    }

    .acceso-identidad__entes {
        display: none;
    }

    .acceso-formulario {
        padding: 2rem;
    }
}