/* =========================================================
   PANARIA - NÓMINAS Y CONTRATOS
========================================================= */

.pagina-nominas {
    min-height: 100vh;
}

.contenedor-nominas {
    max-width: 1120px;
}

.encabezado-nominas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.etiqueta-nominas {
    display: inline-block;
    margin-bottom: 5px;
    color: #8b6a45;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
}

.boton-volver-nominas {
    padding: 10px 15px;
    border: 1px solid rgba(74, 58, 49, .16);
    border-radius: 10px;
    background: #f7f2eb;
    color: #4a3a31;
    font-weight: 850;
    text-decoration: none;
}

.panel-gestor-nominas {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 20px 0 16px;
}

.panel-gestor-nominas h2 {
    margin: 0;
}

.selector-empleado-nominas {
    display: grid;
    gap: 6px;
    min-width: min(360px, 100%);
    color: #4a3a31;
    font-size: 12px;
    font-weight: 850;
}

.selector-empleado-nominas select,
.selector-anio-nominas,
.selector-archivo-modal input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(74,58,49,.16);
    border-radius: 10px;
    background: #fff;
    color: #4a3a31;
    font: inherit;
}

.contenido-nominas {
    display: grid;
    gap: 18px;
    margin: 20px 0 40px;
}

.bloque-documento-laboral,
.bloque-nominas-mensuales {
    overflow: visible;
}

.cabecera-bloque-documento,
.cabecera-nominas-mensuales {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cabecera-bloque-documento h2,
.cabecera-nominas-mensuales h2 {
    margin: 0;
}

.cabecera-bloque-documento p,
.cabecera-nominas-mensuales p {
    margin: 5px 0 0;
    color: #7e7168;
    font-size: 13px;
}

.estado-documento {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.estado-con-documento {
    background: #e4f4e7;
    color: #286238;
}

.estado-sin-documento {
    background: #ece9e6;
    color: #71665e;
}

.detalle-documento {
    margin-top: 15px;
}

.documento-disponible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(74,58,49,.09);
    border-radius: 12px;
    background: #faf7f3;
}

.documento-disponible strong,
.documento-disponible small {
    display: block;
}

.documento-disponible small {
    margin-top: 3px;
    color: #81746b;
}

.acciones-documento {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.boton-ver-documento,
.boton-descargar-documento,
.boton-eliminar-documento,
.boton-subir-documento,
.boton-subir-mes,
.boton-principal-nominas {
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 900;
}


.boton-ver-documento {
    padding: 9px 12px;
    background: #efe7df;
    color: #5d493c;
}

.boton-descargar-documento {
    padding: 9px 12px;
    background: #4a3a31;
    color: #fff;
}

.boton-eliminar-documento {
    padding: 9px 11px;
    background: #f6e8e8;
    color: #913b3b;
}

.acciones-gestor-documento {
    margin-top: 12px;
}

.boton-subir-documento {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    background: #efe7df;
    color: #5d493c;
}

.selector-anio-nominas {
    min-width: 108px;
}

.grid-nominas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.tarjeta-nomina-mes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 140px;
    padding: 13px;
    border: 1px solid rgba(74,58,49,.09);
    border-radius: 13px;
    background: #fff;
}

.cabecera-mes-nomina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cabecera-mes-nomina h3 {
    margin: 0;
    color: #4a3a31;
    font-size: 15px;
}

.insignia-nomina {
    padding: 3px 7px;
    border-radius: 999px;
    background: #ece9e6;
    color: #756a62;
    font-size: 9px;
    font-weight: 900;
}

.insignia-nomina-disponible {
    background: #e4f4e7;
    color: #286238;
}

.info-nomina-mes {
    flex: 1;
    color: #81746b;
    font-size: 11px;
}

.acciones-nomina-mes {
    display: grid;
    gap: 6px;
}

.boton-subir-mes {
    width: 100%;
    min-height: 38px;
    background: #f2ece6;
    color: #59463a;
}

.boton-descargar-mes {
    width: 100%;
    min-height: 38px;
}

.fondo-modal-nominas {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(35,27,23,.48);
}

.modal-nominas {
    width: min(460px, 100%);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 70px rgba(0,0,0,.20);
}

.cabecera-modal-nominas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cabecera-modal-nominas h2 {
    margin: 0;
}

.cabecera-modal-nominas > button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eee8e2;
    font-size: 22px;
    cursor: pointer;
}

.selector-archivo-modal {
    display: grid;
    gap: 7px;
    margin: 18px 0;
    color: #4a3a31;
    font-size: 12px;
    font-weight: 850;
}

.boton-principal-nominas {
    width: 100%;
    min-height: 48px;
    background: #4a3a31;
    color: #fff;
}

.sin-documento-texto {
    padding: 12px 14px;
    border: 1px dashed rgba(74,58,49,.18);
    border-radius: 11px;
    color: #81746b;
    font-size: 12px;
}

@media (max-width: 760px) {

    .panel-gestor-nominas,
    .cabecera-nominas-mensuales {
        align-items: stretch;
        flex-direction: column;
    }

    .selector-empleado-nominas,
    .selector-anio-nominas {
        width: 100%;
        box-sizing: border-box;
    }

    .grid-nominas {
        grid-template-columns: repeat(2, 1fr);
    }

    .documento-disponible {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-documento {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 460px) {

    .grid-nominas {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   FICHAS DE EMPLEADOS
========================================================= */

.panel-gestor-nominas {
    display: block;
    margin: 22px 0 30px;
}

.cabecera-fichas-empleados {
    margin-bottom: 14px;
}

.cabecera-fichas-empleados h2 {
    margin: 0;
}

.cabecera-fichas-empleados p {
    margin: 5px 0 0;
    color: #7e7168;
    font-size: 13px;
}

.fichas-empleados-nominas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 11px;
}

.ficha-empleado-nominas {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(74,58,49,.10);
    border-radius: 13px;
    background: #fff;
    color: #4a3a31;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(74,58,49,.04);
}

.ficha-empleado-nominas:hover,
.ficha-empleado-nominas:focus {
    background: #faf7f3;
    border-color: rgba(74,58,49,.20);
}

.avatar-empleado-nominas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #efe7df;
    color: #604b3e;
    font-size: 18px;
    font-weight: 900;
}

.datos-ficha-empleado {
    min-width: 0;
}

.datos-ficha-empleado strong,
.datos-ficha-empleado small {
    display: block;
}

.datos-ficha-empleado strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-ficha-empleado small {
    margin-top: 3px;
    color: #85776e;
    font-size: 11px;
}

.flecha-ficha-empleado {
    color: #9b8b80;
    font-size: 24px;
    line-height: 1;
}

.cabecera-empleado-seleccionado {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0 2px;
}

.cabecera-empleado-seleccionado h2 {
    margin: 0;
    color: #4a3a31;
}

.boton-volver-fichas {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(74,58,49,.14);
    border-radius: 9px;
    background: #f7f2eb;
    color: #4a3a31;
    font-weight: 850;
    cursor: pointer;
}

@media (max-width: 600px) {

    .fichas-empleados-nominas {
        grid-template-columns: 1fr;
    }

    .cabecera-empleado-seleccionado {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   SUBIDAS MÁS VISIBLES PARA ADMIN / JEFAS
========================================================= */

.boton-subir-contrato-destacado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 15px;
    background: #4a3a31;
    color: #fff;
}

.ayuda-subida-documento {
    margin: 7px 0 0;
    color: #85776e;
    font-size: 11px;
}

.ayuda-subida-nominas {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f7f2eb;
    color: #6c5b50;
    font-size: 12px;
}


/* =========================================================
   NAVEGACIÓN NÓMINAS
========================================================= */

.navegacion-nominas-superior {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.navegacion-nominas-inferior {
    display: flex;
    justify-content: flex-start;
    margin: 8px 0 28px;
}

.boton-volver-nominas-unificado {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(74,58,49,.14);
    border-radius: 12px;
    background: #f7f2eb;
    color: #4a3a31;
    font-weight: 850;
    cursor: pointer;
}

.encabezado-nominas {
    display: block;
}

.boton-volver-nominas,
.boton-volver-fichas {
    display: none !important;
}


/* =========================================================
   AJUSTES FINALES NÓMINAS
========================================================= */

/* El botón superior lo aporta la navegación general de la app. */
.navegacion-nominas-superior {
    display: none !important;
}

.acciones-gestor-documento:not([hidden]) {
    display: block !important;
}

.boton-subir-contrato-destacado {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    min-height: 46px;
}

.acciones-nomina-mes .boton-subir-mes {
    min-height: 42px;
    padding: 9px 10px;
}

@media (max-width: 600px) {
    .grid-nominas {
        grid-template-columns: 1fr;
    }

    .boton-subir-contrato-destacado,
    .acciones-nomina-mes button {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .acciones-documento {
        grid-template-columns: 1fr;
    }

    .acciones-nomina-mes {
        grid-template-columns: 1fr;
    }

}