/*-----Buscador empresas----pagina inicial*/
#suggestions {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    height: auto;
    position: absolute;
    z-index: 100;
    width: 206px;
    overflow-y: scroll;
}
 
#suggestions .suggest-element {
    background-color: #EEEEEE;
    border-top: 1px solid #d6d4d4;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    float: left;
    font-size: 0.8em;
}
#suggestionsCif {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    height: auto;
    position: absolute;
    z-index: 100;
    width: 206px;
    overflow-y: scroll;
}
 
#suggestionsCif .suggest-elementCif {
    background-color: #EEEEEE;
    border-top: 1px solid #d6d4d4;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    float: left;
    font-size: 0.8em;
}

#suggestionsCentro {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    height: auto;
    position: absolute;
    z-index: 100;
    width: 206px;
    overflow-y: scroll;
    font-size: 1.1em;
}
 
#suggestionsCentro .suggest-elementCentro {
    background-color: #EEEEEE;
    border-top: 1px solid #d6d4d4;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    float: left;
}
/*-----Modal encabezado----pagina inicial*/
.modal-header{background-color: #577590; color: white;}

 /* Modal error dos modales */
 .modal { overflow: auto !important; }

/* =============================================================================
   LOGIN (Tarea 4934) — "Pestañas de acceso"
   El tipo de usuario es la estructura de la tarjeta, no un campo más.
   Colores: los de la aplicación (style.css / style_all.css), nada nuevo.
     #577590 azul hondo · #76a7cc azul de acción · #f2f2f2 gris de campo
     #f1f5f4 fondo · #e4e4e4 línea · #89939c texto suave · #e74f4f error
   No se toca .content-form: la usan tambien 2fa.tpl y restaurar_password.tpl.
   ========================================================================== */
.acceso_pagina {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 40px 20px;
    background: #f1f5f4;
    font-family: "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    color: #063c5f;
}

.acceso_logo {
    max-height: 54px;
    width: auto;
}

.acceso {
    width: 100%;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 34px 30px;   /* sin arriba: las pestañas pegan al borde de la tarjeta */
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(6, 60, 95, .08), 0 22px 48px -28px rgba(6, 60, 95, .6);
}

/* Sin pestañas (portal del empleado al entrar directo) la tarjeta necesita su aire de arriba */
.acceso:not(:has(.acceso_tipos)) { padding-top: 30px; }

/* --- Pestañas de tipo de usuario --- */
.acceso_tipos {
    margin: 0 -34px 4px;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* La leyenda existe para los lectores de pantalla, pero no se pinta:
   las propias pestañas ya dicen de qué va el grupo. */
.acceso_tipos legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.acceso_opciones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f2f2f2;
    border-bottom: 1px solid #e4e4e4;
}

/* Con menos de cuatro opciones (P_CAE / P_SPA a 0) las pestañas se reparten el ancho */
.acceso_opciones:has(> label:nth-of-type(3):last-of-type) { grid-template-columns: repeat(3, 1fr); }
.acceso_opciones:has(> label:nth-of-type(2):last-of-type) { grid-template-columns: repeat(2, 1fr); }
.acceso_opciones:has(> a:nth-of-type(3):last-of-type):not(:has(label)) { grid-template-columns: repeat(3, 1fr); }
.acceso_opciones:has(> a:nth-of-type(2):last-of-type):not(:has(label)) { grid-template-columns: repeat(2, 1fr); }

/* El radio real se oculta, no se elimina: el formulario sigue enviando tipo_usuario */
.acceso_opciones input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.acceso_opciones label,
.acceso_opciones a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 15px 6px 13px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    color: #4a6880;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    transition: color .13s, background-color .13s;
}

.acceso_opciones a { text-decoration: none; }

.acceso_opciones label i,
.acceso_opciones a i { font-size: 17px; }

.acceso_opciones label:hover,
.acceso_opciones a:hover { color: #577590; background: #eeeeee; text-decoration: none; }

/* Pestaña activa: por el radio marcado en el login principal, por aria-current en el portal */
.acceso_opciones input[type="radio"]:checked + label,
.acceso_opciones [aria-current="page"] {
    background: #fff;
    color: #577590;
    font-weight: 600;
    border-bottom-color: #76a7cc;
}

.acceso_opciones input[type="radio"]:focus-visible + label {
    outline: 2px solid #577590;
    outline-offset: -2px;
}

/* --- Campos --- */
.acceso_campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acceso_campo > label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #4a6880;
}

.acceso input[type="text"],
.acceso input[type="password"] {
    width: 100%;
    margin: 0;
    padding: 12px 13px;
    background: #f2f2f2;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14.5px;
    color: #063c5f;
}

.acceso input::placeholder { color: #89939c; }

.acceso input[type="text"]:focus,
.acceso input[type="password"]:focus {
    outline: 0;
    background: #fff;
    border-color: #76a7cc;
    box-shadow: 0 0 0 3px rgba(118, 167, 204, .25);
}

.acceso_secreto {
    position: relative;
    display: flex;
}

.acceso_ojo {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: #89939c;
    cursor: pointer;
    line-height: 1;
}

.acceso_ojo:hover { color: #577590; }

/* --- Acciones --- */
.acceso_entrar {
    margin-top: 4px;
    padding: 13px;
    background: #76a7cc;
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .13s;
}

.acceso_entrar:hover { background: #577590; }

.acceso_aviso {
    padding: 10px 12px;
    background: #ffd0d0;
    border-radius: 8px;
    color: #9d0c15;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

/* El mensaje llega desde PHP envuelto en <p style="color:red">; se normaliza aquí */
.acceso_aviso p { margin: 0; color: #9d0c15 !important; }

.acceso_separa {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #89939c;
    font-size: 12px;
}

.acceso_separa::before,
.acceso_separa::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e4e4;
}

/* display:contents para que el separador y el botón sigan siendo hijos directos de .acceso y
   conserven su gap; así, al ocultar el bloque, desaparecen también los huecos de alrededor. */
.acceso_alternativa { display: contents; }
.acceso_alternativa[hidden] { display: none; }

/* Sin min-height: si Google no pinta su botón, este contenedor no ocupa nada */
.acceso_google {
    display: flex;
    justify-content: center;
}

.acceso_olvido {
    text-align: center;
    font-size: 12.5px;
    color: #577590;
    text-decoration: none;
}

.acceso_olvido:hover { text-decoration: underline; }

.acceso_pie {
    margin: 0;
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 11.5px;
    color: #7b8d8a;
}

.acceso_pie a { color: #7b8d8a; }

@media (max-width: 460px) {
    .acceso { padding: 0 22px 26px; border-radius: 12px; }
    .acceso_tipos { margin: 0 -22px 4px; }
    .acceso_opciones label,
    .acceso_opciones a { font-size: 10.5px; padding: 13px 4px 11px; }
}

/* --- Portal del empleado: piezas que solo existen allí (Tarea 4934) --- */
/* El portal es multiidioma y su selector vivía en la barra superior, que este diseño no tiene */
.acceso_idiomas {
    position: absolute;
    top: 18px;
    right: 20px;
}

.acceso_idioma_boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e4e4e4;
    color: #4a6880;
    font-size: 12.5px;
    text-decoration: none;
}

.acceso_idioma_boton:hover { color: #577590; border-color: #c9c9c9; text-decoration: none; }

/* El aviso de error del portal es una banda superior que anima con slideDown: se deja como está,
   solo se le da el color de error de la aplicación. */
.acceso_pagina ~ .error { background-color: #e74f4f; }

@media (max-width: 460px) {
    .acceso_idiomas { top: 10px; right: 10px; }
    .acceso_idioma_boton span { display: none; }
}