/* Lo propio de las pantallas de este portal.
   La identidad —colores, medidas, componentes— vive en marca.css. */

/* ---------------------------------------------------------------------------------------------------
   EL LOGOTIPO SOBRE FONDO OSCURO
   --------------------------------------------------------------------------------------------------- */

.gl-logo-claro { color: var(--gl-texto-claro); }

.gl-logo-claro .gl-logo-sello {
    color: var(--gl-realce-vivo);
    /* El filete doble: el borde exterior más una línea interior del color del fondo, que separa las dos.
       Es lo que lo convierte en sello y no en un cuadradito con letras adentro. */
    box-shadow: inset 0 0 0 1px var(--gl-tinta), inset 0 0 0 2px currentColor;
}

/* ---------------------------------------------------------------------------------------------------
   LA BARRA SUPERIOR
   --------------------------------------------------------------------------------------------------- */

.gl-top-acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.gl-top-quien {
    font-size: .84rem;
    color: var(--gl-sobre-oscuro);
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-btn-claro { color: var(--gl-sobre-oscuro-2); }
.gl-btn-claro:hover:not(:disabled) { color: var(--gl-texto-claro); }

@media (max-width: 560px) {
    /* En una pantalla angosta el nombre compite con el logotipo por el poco ancho que hay. Se va el
       nombre y queda Salir, que es la acción. */
    .gl-top-quien { display: none; }
}

/* ---------------------------------------------------------------------------------------------------
   EL PIE DEL PANEL DE MARCA EN LAS PANTALLAS DE INGRESO
   --------------------------------------------------------------------------------------------------- */

.gl-ingreso-pie {
    margin: 0;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gl-sobre-oscuro-3);
}

/* La pantalla del equipo se distingue de la del asegurado por un detalle, no por otro diseño: quien la
   usa todos los días tiene que reconocer de un vistazo en cuál de las dos está. */
.gl-ingreso-panel .gl-ingreso-marca { background: var(--gl-panel-marca); }
.gl-ingreso-panel .gl-logo-claro .gl-logo-sello { box-shadow: inset 0 0 0 1px var(--gl-panel-marca), inset 0 0 0 2px currentColor; }

/* ---------------------------------------------------------------------------------------------------
   EL MENÚ DEL PANEL
   Una tira de enlaces bajo la barra, no un cajón lateral: son pocas pantallas, y un menú que hay que
   abrir para ver cuatro opciones es una capa de por medio que no resuelve nada.
   --------------------------------------------------------------------------------------------------- */

.gl-menu {
    background: var(--gl-tinta-2);
    overflow-x: auto;                 /* con más pantallas, la tira se desplaza sola en el celular */
}

.gl-menu-tira { display: flex; gap: 4px; }

.gl-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    color: var(--gl-sobre-oscuro-2);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.gl-menu a:hover { color: var(--gl-texto-claro); text-decoration: none; }

/* La pantalla en la que se está: el filete de cobre, el mismo recurso que en el resto del sistema. */
.gl-menu a.active {
    color: var(--gl-texto-claro);
    border-bottom-color: var(--gl-realce-vivo);
}

/* Una ficha que además es un enlace. */
.gl-ficha-enlace { text-decoration: none; display: block; transition: border-color .14s ease; }
.gl-ficha-enlace:hover { text-decoration: none; border-color: var(--gl-realce); }
.gl-ficha-enlace h3 { color: var(--gl-acento); }