/* =====================================================================
   RESPONSIVE OVERRIDES — Para inline styles generados por módulos JS.
   Carga DESPUÉS de todos los demás CSS.
   Usa clases añadidas al HTML + selectores amplios con !important.
   ===================================================================== */


/* ===========================================
   1. TABLET / SPLIT SCREEN (≤991px)
   =========================================== */
@media (max-width: 991px) {

    /* --- Contenedor principal --- */
    .scrum-container {
        padding: 12px !important;
        max-width: 100% !important;
    }

    /* --- Header del módulo --- */
    .scrum-header {
        padding: 16px !important;
        border-radius: 12px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .scrum-header h2 {
        font-size: 20px !important;
    }
    .scrum-header-actions {
        gap: 8px !important;
    }
    .scrum-stat-box {
        padding: 8px 14px !important;
    }
    .scrum-stat-box div:first-child {
        font-size: 22px !important;
    }

    /* --- Tabs --- */
    .scrum-tabs {
        gap: 6px !important;
    }
    .scrum-tab {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    /* --- Grids de cards: bajar minmax --- */
    .scrum-etapas-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 14px !important;
    }
    .scrum-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 12px !important;
    }
    .scrum-urgentes-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
    .scrum-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 8px !important;
    }

    /* --- Section gradients --- */
    .scrum-section-gradient {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    .scrum-section-gradient h3 {
        font-size: 18px !important;
    }

    /* --- Section headers flex --- */
    .scrum-section-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* --- Filtros --- */
    .scrum-filters {
        padding: 12px !important;
        gap: 8px !important;
    }

    /* --- Flujo de etapas --- */
    .scrum-flujo {
        padding: 14px !important;
    }
    .scrum-flujo-track {
        gap: 3px !important;
    }
    .scrum-flujo-track > div > div:first-child {
        padding: 10px 14px !important;
        min-width: 80px !important;
    }

    /* --- Columnas de etapa --- */
    .etapa-columna {
        max-height: 400px !important;
    }

    /* --- Lego --- */
    .lego-header {
        padding: 16px 18px !important;
    }
    .lego-filters {
        padding: 12px !important;
        gap: 8px !important;
    }
    .lego-filters select {
        min-width: 0 !important;
    }
    .lego-summary {
        padding: 8px 12px !important;
    }
    .lego-table th,
    .lego-table td {
        padding: 5px 3px !important;
        font-size: 10px !important;
    }
}


/* ===========================================
   2. TABLET PORTRAIT / SPLIT PEQUEÑO (≤767px)
   =========================================== */
@media (max-width: 767px) {

    /* --- Contenedor --- */
    .scrum-container {
        padding: 8px !important;
    }

    /* --- Header: apilar vertical --- */
    .scrum-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 14px !important;
        gap: 10px !important;
    }
    .scrum-header h2 {
        font-size: 18px !important;
        justify-content: center !important;
    }
    .scrum-header p {
        font-size: 12px !important;
    }
    .scrum-header-actions {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .scrum-stat-box {
        padding: 6px 12px !important;
    }
    .scrum-stat-box div:first-child {
        font-size: 20px !important;
    }
    .scrum-header-actions button {
        flex: 1 !important;
        padding: 10px !important;
        font-size: 13px !important;
    }

    /* --- Tabs: scroll horizontal --- */
    .scrum-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        gap: 6px !important;
        scrollbar-width: thin !important;
    }
    .scrum-tab {
        padding: 9px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    /* --- Grids → 1 columna --- */
    .scrum-etapas-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .scrum-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .scrum-urgentes-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .scrum-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* --- Section gradients --- */
    .scrum-section-gradient {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    .scrum-section-gradient h3 {
        font-size: 16px !important;
        gap: 8px !important;
    }
    .scrum-section-gradient p {
        font-size: 11px !important;
    }

    /* --- Section headers: apilar --- */
    .scrum-section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* --- Sections blancas --- */
    .scrum-section {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .scrum-section h3 {
        font-size: 15px !important;
        flex-wrap: wrap !important;
    }

    /* --- Filtros: apilar --- */
    .scrum-filters {
        flex-direction: column !important;
        padding: 10px !important;
        gap: 8px !important;
    }
    .scrum-filters > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .scrum-filters input,
    .scrum-filters select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Filter buttons: wrap --- */
    .scrum-filter-btns {
        gap: 5px !important;
    }
    .scrum-filter-btns button {
        padding: 7px 10px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }
    .scrum-filter-btns button span {
        padding: 1px 5px !important;
        font-size: 9px !important;
    }

    /* --- Flujo: compactar --- */
    .scrum-flujo {
        padding: 12px !important;
    }
    .scrum-flujo h3 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    .scrum-flujo-track > div > div:first-child {
        padding: 8px 10px !important;
        min-width: 65px !important;
        border-radius: 8px !important;
    }
    .scrum-flujo-track i.fa-chevron-right {
        font-size: 14px !important;
    }

    /* --- Stats dentro de gradients --- */
    .scrum-stats-grid > div {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    .scrum-stats-grid > div > div:first-child {
        font-size: 20px !important;
    }
    .scrum-stats-grid > div > div:last-child {
        font-size: 9px !important;
    }

    /* --- Etapa columnas --- */
    .etapa-columna {
        max-height: 350px !important;
    }

    /* --- Urgentes --- */
    .scrum-urgentes {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .scrum-urgentes h3 {
        font-size: 14px !important;
        flex-wrap: wrap !important;
    }

    /* --- Empty states --- */
    .scrum-empty-state {
        padding: 30px 16px !important;
    }

    /* --- Cards generales (empl/oficio) --- */
    .empl-card,
    .oficio-card {
        padding: 12px !important;
    }

    /* --- Búsquedas en secciones --- */
    #buscar-emplazamiento,
    .scrum-section input[type="text"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ===================
       LEGO TAB
       =================== */
    .lego-wrapper {
        border-radius: 12px !important;
    }
    .lego-header {
        padding: 14px 16px !important;
    }
    .lego-header h3 {
        font-size: 15px !important;
        gap: 8px !important;
    }
    .lego-header p {
        font-size: 11px !important;
    }

    /* Filtros lego: apilar */
    .lego-filters {
        flex-direction: column !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .lego-filters select {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .lego-filters > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .lego-filters input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .lego-filters > div:last-child {
        margin-left: 0 !important;
    }

    /* Summary: wrap */
    .lego-summary {
        white-space: normal !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 8px 10px !important;
    }
    .lego-summary > span {
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    /* Table: scroll + compacta */
    .lego-table-wrap {
        -webkit-overflow-scrolling: touch !important;
    }
    .lego-table {
        font-size: 10px !important;
    }
    .lego-table th {
        padding: 4px 2px !important;
        font-size: 8px !important;
        min-width: 22px !important;
    }
    .lego-table td {
        padding: 4px 2px !important;
        font-size: 9px !important;
    }
    .lego-table th:first-child {
        min-width: 28px !important;
    }
    .lego-table th:nth-child(2) {
        min-width: 60px !important;
    }
    .lego-table th:last-child {
        min-width: 50px !important;
    }

    /* Tooltip: abajo del row */
    .lego-table [id^="lego-tooltip-"] {
        left: 0 !important;
        top: 100% !important;
        min-width: 200px !important;
        max-width: 260px !important;
        font-size: 11px !important;
    }
    /* Ocultar flecha lateral */
    .lego-table [id^="lego-tooltip-"] > div:last-child {
        display: none !important;
    }
}


/* ===========================================
   3. MÓVIL (≤575px)
   =========================================== */
@media (max-width: 575px) {

    /* --- Contenedor --- */
    .scrum-container {
        padding: 6px !important;
    }

    #scrum-content {
        margin-top: 10px !important;
    }

    /* --- Header --- */
    .scrum-header {
        padding: 12px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }
    .scrum-header h2 {
        font-size: 15px !important;
        gap: 8px !important;
    }
    .scrum-header h2 i {
        font-size: 16px !important;
    }
    .scrum-header p {
        font-size: 10px !important;
        margin-top: 4px !important;
    }
    .scrum-header-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    .scrum-stat-box {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        text-align: left !important;
    }
    .scrum-stat-box div:first-child {
        font-size: 18px !important;
    }
    .scrum-stat-box div:last-child {
        font-size: 10px !important;
    }
    .scrum-header-actions button {
        width: 100% !important;
        padding: 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* --- Tabs --- */
    .scrum-tab {
        padding: 7px 10px !important;
        font-size: 10px !important;
        border-radius: 7px !important;
        gap: 5px !important;
    }
    .scrum-tab i {
        font-size: 11px !important;
    }
    .scrum-tab span {
        padding: 1px 5px !important;
        font-size: 9px !important;
    }

    /* --- Section gradients --- */
    .scrum-section-gradient {
        padding: 14px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }
    .scrum-section-gradient h3 {
        font-size: 14px !important;
        gap: 6px !important;
    }
    .scrum-section-gradient h3 i {
        font-size: 14px !important;
    }
    .scrum-section-gradient p {
        font-size: 10px !important;
    }

    /* --- Stats grid: 2col con fuentes pequeñas --- */
    .scrum-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }
    .scrum-stats-grid > div {
        padding: 8px !important;
        border-radius: 8px !important;
    }
    .scrum-stats-grid > div > div:first-child {
        font-size: 18px !important;
    }
    .scrum-stats-grid > div > div:last-child {
        font-size: 8px !important;
    }

    /* --- Filter buttons --- */
    .scrum-filter-btns {
        gap: 4px !important;
    }
    .scrum-filter-btns button {
        padding: 6px 8px !important;
        font-size: 9px !important;
        border-radius: 15px !important;
        gap: 3px !important;
    }
    .scrum-filter-btns button i {
        font-size: 9px !important;
    }
    .scrum-filter-btns button span {
        padding: 0 4px !important;
        font-size: 8px !important;
    }

    /* --- Filtros secundarios --- */
    .scrum-filters {
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }
    .scrum-filters input,
    .scrum-filters select,
    .scrum-filters button {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* --- Sections blancas --- */
    .scrum-section {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .scrum-section h3 {
        font-size: 14px !important;
    }

    /* --- Flujo: ultra compacto --- */
    .scrum-flujo {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .scrum-flujo h3 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    .scrum-flujo-track {
        gap: 2px !important;
    }
    .scrum-flujo-track > div > div:first-child {
        padding: 6px 8px !important;
        min-width: 55px !important;
        border-radius: 6px !important;
    }
    .scrum-flujo-track > div > div:first-child > i {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }
    .scrum-flujo-track > div > div:first-child > div:first-of-type {
        font-size: 16px !important;
    }
    .scrum-flujo-track > div > div:first-child > div:last-of-type {
        font-size: 8px !important;
    }
    .scrum-flujo-track > div > div:last-child {
        font-size: 12px !important;
        margin: 0 2px !important;
    }

    /* --- Columnas de etapa --- */
    .etapa-columna {
        max-height: 300px !important;
        border-radius: 12px !important;
    }

    /* --- Urgentes --- */
    .scrum-urgentes {
        padding: 12px !important;
        border-radius: 10px !important;
        margin-top: 12px !important;
    }
    .scrum-urgentes h3 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    /* --- Cards --- */
    .empl-card,
    .oficio-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    /* --- Empty states --- */
    .scrum-empty-state {
        padding: 20px 12px !important;
    }

    /* --- Búsqueda emplazamientos --- */
    #buscar-emplazamiento {
        width: 100% !important;
        font-size: 12px !important;
    }

    /* ===================
       LEGO TAB — MÓVIL
       =================== */
    .lego-wrapper {
        border-radius: 10px !important;
    }
    .lego-header {
        padding: 12px !important;
    }
    .lego-header h3 {
        font-size: 14px !important;
        gap: 6px !important;
    }
    .lego-header h3 i {
        font-size: 16px !important;
    }
    .lego-header p {
        font-size: 10px !important;
    }

    .lego-filters {
        padding: 8px !important;
        gap: 6px !important;
    }
    .lego-filters select,
    .lego-filters input {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }
    .lego-filters input {
        padding-left: 28px !important;
    }

    .lego-summary {
        padding: 6px 8px !important;
        gap: 3px !important;
    }
    .lego-summary > span {
        font-size: 9px !important;
    }
    .lego-summary > div {
        padding: 3px 5px !important;
        font-size: 9px !important;
        margin-right: 3px !important;
    }

    /* Tabla Lego: ultra compacta */
    .lego-table {
        font-size: 8px !important;
    }
    .lego-table th {
        padding: 3px 1px !important;
        font-size: 7px !important;
        min-width: 18px !important;
    }
    .lego-table td {
        padding: 3px 1px !important;
        font-size: 8px !important;
    }
    .lego-table th:first-child {
        min-width: 22px !important;
    }
    .lego-table th:nth-child(2) {
        min-width: 50px !important;
    }
    .lego-table th:last-child {
        min-width: 40px !important;
    }
    .lego-table tfoot td {
        font-size: 7px !important;
        padding: 2px 1px !important;
    }

    /* Tooltip lego */
    .lego-table [id^="lego-tooltip-"] {
        left: -10px !important;
        top: 100% !important;
        min-width: 170px !important;
        max-width: 220px !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
    }
}


/* ===========================================
   4. MÓVIL MUY PEQUEÑO (≤400px)
   =========================================== */
@media (max-width: 400px) {

    .scrum-container {
        padding: 4px !important;
    }

    .scrum-header h2 {
        font-size: 13px !important;
    }
    .scrum-header p {
        font-size: 9px !important;
    }

    .scrum-tab {
        padding: 6px 8px !important;
        font-size: 9px !important;
    }

    .scrum-section-gradient h3 {
        font-size: 12px !important;
    }
    .scrum-section-gradient p {
        font-size: 9px !important;
    }
    .scrum-stats-grid > div > div:first-child {
        font-size: 16px !important;
    }

    .scrum-filter-btns button {
        padding: 5px 6px !important;
        font-size: 8px !important;
    }

    .scrum-flujo-track > div > div:first-child {
        padding: 5px 6px !important;
        min-width: 45px !important;
    }
    .scrum-flujo-track > div > div:first-child > div:first-of-type {
        font-size: 14px !important;
    }
    .scrum-flujo-track > div > div:first-child > i {
        font-size: 12px !important;
    }

    /* Lego: ocultar "Etapa Act." para ganar espacio */
    .lego-table th:last-child,
    .lego-table td:last-child,
    .lego-table tfoot td:last-child {
        display: none !important;
    }
    .lego-table th {
        font-size: 6px !important;
        min-width: 15px !important;
        padding: 2px 0 !important;
    }
    .lego-table td {
        font-size: 7px !important;
        padding: 2px 0 !important;
    }

    .lego-header h3 {
        font-size: 12px !important;
    }
}


/* ===========================================
   5. TOUCH — Dispositivos táctiles
   =========================================== */
@media (hover: none) and (pointer: coarse) {

    /* Tabs: touch targets grandes */
    .scrum-tab {
        min-height: 44px !important;
    }

    /* Ocultar tooltips que solo funcionan con hover */
    .lego-table [id^="lego-tooltip-"] {
        display: none !important;
    }

    /* Filter buttons: touch friendly */
    .scrum-filter-btns button {
        min-height: 36px !important;
    }

    /* Lego summary buttons: touch friendly */
    .lego-summary > div {
        min-height: 32px !important;
        padding: 6px 10px !important;
    }

    /* Filas tabla: más altas */
    .lego-table td {
        min-height: 32px !important;
        vertical-align: middle !important;
    }
}


/* ===========================================
   6. LANDSCAPE MÓVIL (altura limitada)
   =========================================== */
@media (max-height: 500px) and (orientation: landscape) {

    .scrum-header {
        padding: 8px 12px !important;
    }
    .scrum-header h2 {
        font-size: 14px !important;
    }
    .scrum-header p {
        display: none !important;
    }
    .scrum-tab {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
    .scrum-section-gradient {
        padding: 10px !important;
    }
    .etapa-columna {
        max-height: 250px !important;
    }
}


/* ===========================================
   7. OVERRIDES GLOBALES para TODOS los módulos
   Estos capturan inline styles de otros módulos
   (Dashboard, Civil, Penal, etc.)
   =========================================== */

@media (max-width: 767px) {

    /* Cualquier módulo: grids inline → 1 col */
    .main-content .module > div > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Tablas dentro de módulos: font compacto */
    .main-content .module table {
        font-size: 11px !important;
    }
    .main-content .module table th,
    .main-content .module table td {
        padding: 5px 4px !important;
    }

    /* Modales dinámicos: nunca exceder pantalla */
    .modal-content,
    #dynamicModal > div > div {
        max-width: 95vw !important;
        margin: 8px !important;
    }
}

@media (max-width: 575px) {

    /* Módulos: padding reducido */
    .main-content .module > div {
        max-width: 100% !important;
    }

    /* Tablas: aún más compactas */
    .main-content .module table {
        font-size: 10px !important;
    }
    .main-content .module table th,
    .main-content .module table td {
        padding: 4px 3px !important;
    }
}

/* ===========================================
   EMPLAZAMIENTOS — MODAL & CARDS RESPONSIVE
   =========================================== */

/* Tablet */
@media (max-width: 991px) {
    .empl-modal-container {
        max-width: 100% !important;
    }
    .empl-modal-header {
        padding: 16px 18px !important;
    }
    .empl-form-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .empl-timeline {
        gap: 0 !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .empl-modal-header {
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }
    .empl-modal-header span[style*="font-size: 22px"] {
        font-size: 17px !important;
    }
    .empl-parte-card {
        border-radius: 12px !important;
    }
    .empl-parte-card > div:first-child {
        padding: 12px 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .empl-parte-card > div:nth-child(2) {
        padding: 14px !important;
    }
    .empl-form-grid {
        grid-template-columns: 1fr !important;
    }
    .empl-form-grid > div[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }
    .empl-timeline {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
    }
    .empl-timeline > div {
        min-width: 65px !important;
    }
    .empl-parte-chip {
        flex-wrap: wrap !important;
    }
}

/* Small mobile */
@media (max-width: 575px) {
    .empl-modal-header {
        padding: 12px 14px !important;
        margin-bottom: 14px !important;
    }
    .empl-parte-card > div:nth-child(2) {
        padding: 12px !important;
    }
    .empl-form-grid {
        gap: 8px !important;
    }
    .empl-timeline > div {
        min-width: 58px !important;
    }
}