/* ============================================
   NOMINA - MOBILE (<768px)
   Sistema de Administracion de Condominios
   ============================================ */

@media screen and (max-width: 768px) {

    /* ============================================
       HEADER MOVIL: contenedor con barra + tabs
       ============================================ */

    /* Mostrar mobile header (override inline display:none) */
    .nomina-mobile-header {
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* Ocultar module-header desktop entero en movil */
    .nomina-module > .module-header[data-section="header"] {
        display: none !important;
    }

    /* ============================================
       FORMULARIO EMPLEADO: grids reorganizados
       ============================================ */

    /* Info Personal grid 1: flex wrap */
    .nomina-personal-grid1 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Fila 1: Nombres 100% | Fila 2: Apellidos 100% */
    .nomina-personal-grid1 > div:nth-child(1),
    .nomina-personal-grid1 > div:nth-child(2) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Fila 2: Sexo 20% | F.Nac 44% | Edad 20% */
    .nomina-field-sexo {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        min-width: 0 !important;
    }
    .nomina-field-fnac {
        flex: 0 0 44% !important;
        max-width: 44% !important;
        min-width: 0 !important;
    }
    .nomina-field-edad {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        min-width: 0 !important;
    }

    .nomina-field-sexo select,
    .nomina-field-fnac input,
    .nomina-field-edad input {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Fila 3: Tipo Doc 35% | Nro Doc 60% */
    .nomina-field-tipodoc {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        min-width: 0 !important;
    }
    .nomina-field-nrodoc {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        min-width: 0 !important;
    }

    /* Grid 2 personal: flex wrap */
    .nomina-personal-grid2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Laboral grid 1: flex wrap */
    .nomina-laboral-grid1 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Cargo 100% solo */
    .nomina-laboral-grid1 > div:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* F. Ingreso 48% | Contrato 48% */
    .nomina-field-fingreso,
    .nomina-field-contrato {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        min-width: 0 !important;
    }

    /* Empleado 48% | Pago 48% */
    .nomina-field-empleado,
    .nomina-field-pago {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        min-width: 0 !important;
    }
    .nomina-field-salario,
    .nomina-field-metodopago {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        min-width: 0 !important;
    }

    /* Laboral grid 2: flex wrap */
    .nomina-laboral-grid2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Horario 48% | Horas 48% */
    .nomina-field-horario,
    .nomina-field-horas {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        min-width: 0 !important;
    }

    /* Ocultar input file (el CSS global lo muestra con display:block !important) */
    #empleadoForm input[type="file"] {
        display: none !important;
    }

    /* Ocultar labels de botones en móvil (solo iconos) */
    .nomina-btn-label {
        display: none !important;
    }

    /* Banco y Cuenta Bancaria 100% cada uno */
    #campoBancoContainer,
    #camposBancariosContainer {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Tel. Móvil 48% | Tel. Casa 48% */
    .nomina-field-telmovil,
    .nomina-field-telcasa {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        min-width: 0 !important;
    }

    /* Correo y Dirección 100% */
    .nomina-field-correo,
    .nomina-field-direccion {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ============================================
       FORMULARIO EMPLEADO: inputs compactos
       ============================================ */

    #empleadoForm input:not([type="checkbox"]):not([type="radio"]),
    #empleadoForm select,
    #empleadoForm textarea {
        min-height: 0 !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        border: 1px solid #d1d5db !important;
        background: white !important;
    }

    #empleadoForm label {
        margin-bottom: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    /* ============================================
       GENERAR NOMINA: tabs → select en móvil
       ============================================ */

    .nomina-periodo-tabs {
        display: none !important;
    }

    .nomina-periodo-select {
        display: block !important;
        width: auto !important;
        flex-shrink: 0 !important;
        max-width: 120px !important;
    }

    /* Resumen financiero: 3 tarjetas en fila, valor arriba + label abajo */
    .nomina-resumen-financiero {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .nomina-resumen-item {
        flex: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 4px 2px !important;
        border-right: none !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 4px !important;
    }

    .nomina-resumen-item:first-child {
        flex: 0.6 !important;
    }

    .nomina-resumen-valor {
        font-size: 12px !important;
        display: block !important;
    }

    .nomina-resumen-label {
        font-size: 8px !important;
        display: block !important;
    }

    /* ============================================
       LISTA DE EMPLEADOS Y GENERACION
       ============================================ */

    .employee-list {
        gap: 12px !important;
    }

    .employee-card {
        padding: 14px !important;
    }

    .nomina-generation-form {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ============================================
       CALCULADORA MOVIL: mas pequena y centrada
       ============================================ */

    .calculadora-content {
        width: 260px !important;
        max-width: 80vw !important;
        padding: 10px !important;
        font-size: 12px !important;
    }

    .calculadora-content #calcResult {
        font-size: 20px !important;
    }

    /* Botones: repeat(5,1fr) -> 3 columnas */
    div[style*="grid-template-columns: repeat(5, 1fr)"],
    div[style*="grid-template-columns:repeat(5, 1fr)"],
    div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}