/* --------------------------------------------------------------------------
   Estilos del shell de EfiMuni: layout, menú, fondo, login y avisos.
   Los colores salen de los tokens de efimuni-ui.css.
   Se sirve automáticamente como _content/Efimuni_Shell/efimuni-shell.css
   -------------------------------------------------------------------------- */

/* --- Fondo según tema y modo ------------------------------------------- */

/* Los tokens (--efimuni-*) están en efimuni-ui.css, de Efimuni_UI.
   La imagen de fondo se queda acá, en la misma hoja que los SVG y que las reglas que la
   usan: con una url() relativa dentro de una variable no hay que confiar en contra qué
   hoja se resuelve. En efimuni-ui.css podría terminar apuntando a _content/Efimuni_UI/.
   Mismos selectores y misma especificidad que los tokens de efimuni-ui.css. */
:root,
:root[data-modo="oscuro"] {
    --efimuni-fondo-imagen: url('fondo-grid-oscuro.svg');
}

:root[data-modo="claro"] {
    --efimuni-fondo-imagen: url('fondo-grid-claro.svg');
}

:root[data-marca="institucional"]:not([data-modo="claro"]) {
    --efimuni-fondo-imagen: url('fondo-institucional-oscuro.svg');
}

:root[data-marca="institucional"][data-modo="claro"] {
    --efimuni-fondo-imagen: url('fondo-institucional-claro.svg');
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--efimuni-fuente);
}

/* --- Área principal --------------------------------------------------- */

.efimuni-contenido {
    height: 100vh;
    overflow: hidden;
}

.efimuni-contenido > * {
    height: calc(100vh - var(--mud-appbar-height));
}

.efimuni-solapas {
    height: 100%;
}

/* Que el contenido del programa pueda scrollear sin arrastrar toda la página. */
.efimuni-solapas .mud-tabs-panels {
    height: calc(100% - 48px);
    overflow: auto;
}

/* --- Menú lateral ------------------------------------------------------ */

/* MudDrawer dispone su contenido como flex column y al <hr> del MudDivider le toca
   flex-grow: 1, con lo que se estira y empuja el árbol hasta el fondo del panel. */
.mud-drawer-content > hr.mud-divider {
    flex: 0 0 auto;
}

/* El árbol ocupa lo que queda y scrollea solo cuando haga falta. */
.efimuni-arbol {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* --- Fondo institucional ---------------------------------------------- */

.efimuni-fondo {
    position: relative;
    height: 100%;
    background-image: var(--efimuni-fondo-imagen);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.efimuni-fondo-velo {
    position: absolute;
    inset: 0;
    background: var(--efimuni-velo);
}

.efimuni-fondo-texto {
    position: relative;
    text-align: center;
    color: var(--efimuni-texto);
    text-shadow: var(--efimuni-texto-sombra);
    padding: 0 16px;
}

/* --- Login ------------------------------------------------------------- */

.efimuni-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-image: var(--efimuni-fondo-imagen);
    background-size: cover;
    background-position: center;
    font-family: var(--efimuni-fuente);
}

.efimuni-login-caja {
    width: 100%;
    max-width: 380px;
    background: var(--efimuni-superficie);
    border: 1px solid var(--efimuni-borde);
    border-radius: var(--efimuni-radio);
    box-shadow: var(--efimuni-sombra);
    padding: 32px 28px;
}

.efimuni-login-encabezado {
    text-align: center;
    margin-bottom: 24px;
}

.efimuni-login-escudo {
    font-size: 44px;
    line-height: 1;
}

.efimuni-login-encabezado h1 {
    margin: 8px 0 2px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--efimuni-texto);
}

.efimuni-login-encabezado p {
    margin: 0;
    color: var(--efimuni-texto-tenue);
    font-size: 14px;
}

.efimuni-login label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--efimuni-texto);
}

.efimuni-login input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--efimuni-borde-campo);
    border-radius: var(--efimuni-radio-campo);
    background: var(--efimuni-superficie-alterna);
    color: var(--efimuni-texto);
    font-family: inherit;
    font-size: 15px;
}

.efimuni-login input:focus {
    outline: none;
    border-color: var(--efimuni-primario);
    box-shadow: 0 0 0 3px var(--efimuni-foco);
}

/* El primario es el color de los llamados a la acción: acá manda el botón de ingresar. */
.efimuni-login button {
    width: 100%;
    padding: 11px;
    margin-top: 6px;
    border: 0;
    border-radius: var(--efimuni-radio-campo);
    background: var(--efimuni-primario);
    color: var(--efimuni-primario-texto);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-transform: var(--efimuni-boton-mayusculas);
    letter-spacing: var(--efimuni-boton-espaciado);
    cursor: pointer;
}

.efimuni-login button:hover {
    background: var(--efimuni-primario-oscuro);
}

.efimuni-login-error {
    background: var(--efimuni-error-fondo);
    border: 1px solid var(--efimuni-error-borde);
    color: var(--efimuni-error-texto);
    border-radius: var(--efimuni-radio-campo);
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.efimuni-login .validation-message {
    display: block;
    margin: -10px 0 12px;
    color: var(--efimuni-error-texto);
    font-size: 12px;
}

.efimuni-login-ayuda {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--efimuni-texto-tenue);
}

.efimuni-login-ayuda a {
    display: block;
    margin-top: 8px;
    color: var(--efimuni-primario);
    text-decoration: none;
    font-weight: 600;
}

/* --- Avisos sin chasis (error, página no encontrada) ------------------- */

/* Estas páginas son SSR estático y no tienen MudBlazor, pero igual siguen el tema. */
.efimuni-aviso {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 48px;
    background: var(--efimuni-superficie);
    color: var(--efimuni-texto);
    font-family: var(--efimuni-fuente);
}

.efimuni-aviso h1 {
    margin: 0 0 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.efimuni-aviso a {
    color: var(--efimuni-primario);
    font-weight: 600;
}

.efimuni-aviso code {
    background: var(--efimuni-superficie-alterna);
    border: 1px solid var(--efimuni-borde);
    border-radius: 6px;
    padding: 1px 5px;
}