/* ============================================
   RESPONSIVE PARÁMETROS — MOBILE
   Breakpoint: max-width 767px

   Estilos responsive móviles exclusivos del
   módulo Parámetros: nómina, empleados,
   calculadora, prestaciones.
   ============================================ */

/* --------------------------------------------
   LISTA DE EMPLEADOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .employee-list {
        gap: 12px !important;
    }

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

/* --------------------------------------------
   GENERACIÓN DE NÓMINA
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .nomina-generation-form {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Grids complejos de nómina → 1 columna */
    div[style*="grid-template-columns: 1.5fr 1.5fr 55px"],
    div[style*="grid-template-columns:1.5fr 1.5fr 55px"],
    div[style*="grid-template-columns: 0.8fr 0.7fr 0.7fr"],
    div[style*="grid-template-columns:0.8fr 0.7fr 0.7fr"],
    div[style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1.2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 1.2fr 1fr 1fr 0.8fr"],
    div[style*="grid-template-columns:1.2fr 1fr 1fr 0.8fr"],
    div[style*="grid-template-columns: 0.8fr 1fr 1.2fr 1.2fr 1fr"],
    div[style*="grid-template-columns:0.8fr 1fr 1.2fr 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------
   CALCULADORA DE NÓMINA — BOTONES
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Calculadora con 5 columnas → 3 columnas en móvil */
    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;
    }
}