:root {
    --sva-azul-oscuro: #003b5c;
    --sva-celeste: #55b8e6;
    --blanco: #fff;
    --fondo: #eef3f6;
    --texto: #17212b;
    --borde: #d5e0e6;
    --radio: 16px;
    --cabecera-alto: 56px
}
* {
    box-sizing: border-box
}
html, body {
    min-height: 100%;
    margin: 0
}
body {
    background: var(--fondo);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif
}
button, input {
    font: inherit
}
button {
    cursor: pointer
}
[hidden] {
    display: none!important
}
.pantalla-acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    padding: var(--cabecera-alto) 5% 0;
    background: #e8edf1
}
.pantalla-acceso::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--cabecera-alto);
    background: var(--sva-azul-oscuro)
}
.tarjeta-acceso {
    width: 100%;
    min-height: calc(100vh - var(--cabecera-alto));
    display: grid;
    grid-template-columns: minmax(24px,1fr) minmax(300px,360px) minmax(24px,1fr);
    align-content: center;
    position: relative;
    padding: 28px 0;
    border-radius: 0;
    background: #f7f9fa;
    border: 1px solid #dbe3e8;
    box-shadow: 0 8px 24px #00263d12
}
.logo-acceso {
    display: block;
    position: absolute;
    top: calc(-1 * var(--cabecera-alto));
    left: 0;
    width: min(330px,50vw);
    height: 56px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: left center;
    transform: scale(1.8);
    transform-origin: left center
}
.tarjeta-acceso h1 {
    grid-column: 2;
    width: 100%;
    margin: 0;
    padding: 22px 24px 10px;
    border-radius: 14px 14px 0 0;
    background: #fff;
    text-align: center;
    font-size: 1.4rem
}
.formulario-acceso {
    grid-column: 2;
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 6px 24px 22px;
    border-radius: 0 0 14px 14px;
    background: #fff;
    box-shadow: 0 12px 32px #00263d1a
}
.formulario-acceso label {
    margin-top: 6px;
    font-weight: 700
}
.formulario-acceso input {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--borde);
    border-radius: 9px;
    outline: none
}
.formulario-acceso input:focus {
    border-color: var(--sva-celeste);
    box-shadow: 0 0 0 3px #55b8e633
}
.mensaje-acceso {
    min-height: 20px;
    margin: 2px 0;
    color: #a62929;
    font-size: .9rem
}
.boton {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    font-weight: 700
}
.boton-primario {
    background: var(--sva-azul-oscuro);
    color: #fff
}
.boton-primario:hover {
    background: #00527f
}
.enlace-boton {
    border: 0;
    background: transparent;
    color: var(--sva-azul-oscuro);
    text-decoration: underline
}
.cabecera-principal {
    min-height: var(--cabecera-alto);
    display: grid;
    grid-template-columns: minmax(250px,1fr) auto minmax(250px,1fr);
    align-items: center;
    gap: 24px;
    padding: 0 5%;
    overflow: hidden;
    background: var(--sva-azul-oscuro)
}
.logo-principal {
    display: block;
    width: min(440px,100%);
    max-height: 56px;
    object-fit: contain;
    object-position: left center;
    transform: scale(1.8);
    transform-origin: left center
}
.navegacion-principal {
    display: flex;
    justify-content: center;
    gap: 10px
}
.boton-navegacion {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid #ffffff6b;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-weight: 700
}
.boton-navegacion:hover,
.boton-navegacion.activo {
    border-color: var(--sva-celeste);
    background: var(--sva-celeste);
    color: #002b45
}
.sesion-usuario {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    color: #fff
}
.nombre-usuario {
    max-width: 180px;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap
}
.boton-salir {
    border: 1px solid #ffffff99;
    background: transparent;
    color: #fff
}
.boton-salir:hover {
    background: #fff;
    color: var(--sva-azul-oscuro)
}
.contenido-principal {
    width: 90%;
    min-height: calc(100vh - var(--cabecera-alto));
    margin: 0 auto;
    background: #f7f9fa
}
.cabecera-seccion {
    margin-bottom: 18px
}
.cabecera-seccion h2 {
    margin: 3px 0 0;
    font-size: clamp(1.65rem,3vw,2.3rem)
}
.etiqueta-seccion {
    margin: 0;
    color: var(--sva-azul-oscuro);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}
.visor-aplicacion {
    min-height: 60vh;
    display: grid;
    place-items: center;
    padding: 30px;
    border: 1px dashed #9db2bf;
    border-radius: var(--radio);
    background: #fff;
    color: #65727d;
    text-align: center
}
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}
@media(max-width:980px) {
    .cabecera-principal {
        grid-template-columns: 1fr auto
    }
    .navegacion-principal {
        grid-column: 1/-1;
        grid-row: 2
    }
}
@media(max-width:640px) {
    :root {
        --cabecera-alto: 180px
    }
    .pantalla-acceso {
        --cabecera-alto: 56px;
        padding: var(--cabecera-alto) 5% 0
    }
    .tarjeta-acceso {
        min-height: calc(100vh - var(--cabecera-alto));
        grid-template-columns: 16px minmax(0,1fr) 16px;
        padding: 28px 0
    }
    .logo-acceso {
        top: calc(-1 * var(--cabecera-alto) + 8px);
        width: min(300px,72vw);
        height: 50px;
        transform: scale(1.5)
    }
    .tarjeta-acceso h1 {
        padding: 20px 20px 10px
    }
    .formulario-acceso {
        padding: 6px 20px 20px
    }
    .cabecera-principal {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 5%
    }
    .logo-principal {
        width: min(370px,80vw);
        margin: 0 auto;
        object-position: center;
        transform: scale(1.5);
        transform-origin: center
    }
    .navegacion-principal {
        grid-column: 1;
        grid-row: auto;
        order: 3
    }
    .sesion-usuario {
        justify-content: center
    }
    .boton-navegacion {
        padding: 0 16px
    }
    .contenido-principal {
        margin-top: 0
    }
}

.rejilla-administracion {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(240px,1fr);
    gap: 22px
}
.tarjeta-herramienta {
    padding: 22px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    box-shadow: 0 9px 26px #00263d14
}
.tarjeta-herramienta h3 {
    margin: 0 0 18px
}
.chat-equipo {
    min-height: 58vh;
    display: grid;
    grid-template-rows: auto 1fr auto
}
.mensajes-chat {
    min-height: 300px;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: #f8fafb
}
.mensaje-chat {
    width: fit-content;
    max-width: 82%;
    margin: 0 0 10px;
    padding: 10px 13px;
    border-radius: 12px 12px 12px 3px;
    background: #e3edf2
}
.mensaje-chat strong {
    display: block;
    margin-bottom: 3px;
    color: var(--sva-azul-oscuro);
    font-size: .82rem
}
.formulario-chat {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 14px
}
.formulario-chat input {
    min-width: 0;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--borde);
    border-radius: 9px
}
.herramientas-equipo {
    align-self: start
}
.boton-herramienta {
    width: 100%;
    min-height: 48px;
    margin-bottom: 10px;
    padding: 0 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: #f8fafb;
    color: var(--sva-azul-oscuro);
    font-weight: 700;
    text-align: left
}
.boton-herramienta:hover {
    border-color: var(--sva-celeste);
    background: #eaf7fc
}
@media(max-width:820px) {
    .rejilla-administracion {
        grid-template-columns: 1fr
    }
    .chat-equipo {
        min-height: 480px
    }
}