/* ─── 1280px: Laptop amplio ──────────────────────────────────── */
@media (max-width: 1280px) {
    :root {
        --sidebar-width: 286px;
    }

    .brand-logo-expanded {
        width: 180px;
    }

    .compliance-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

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

/* ─── 1060px: Laptop estándar ────────────────────────────────── */
@media (max-width: 1060px) {
    .kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .modulo-cols {
        grid-template-columns: 1fr;
    }

    .modulo-col {
        border-right: none;
        border-bottom: 1px solid var(--color-line);
    }

    .modulo-col:last-child {
        border-bottom: none;
    }
}

/* ─── 980px: Laptop pequeño / tablet horizontal ──────────────── */
@media (max-width: 980px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid > :first-child {
        grid-row: auto;
    }

    .bottom-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .compliance-bar-row {
        grid-template-columns: 100px 1fr 44px;
    }
}

/* ─── 760px: Tablet vertical — sidebar drawer ────────────────── */
@media (max-width: 760px) {
    .app-shell,
    .app-shell.is-sidebar-collapsed {
        display: block;
    }

    /* Sidebar como drawer lateral */
    .sidebar {
        position: fixed;
        z-index: 30;
        inset: 0 auto 0 0;
        width: min(86vw, 320px);
        height: 100vh;
        padding: var(--space-4);
        transform: translateX(-102%);
        box-shadow: 24px 0 48px rgba(15, 18, 25, 0.30);
    }

    .app-shell.is-sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Overlay fondo oscuro */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: block;
        border: 0;
        background: rgba(21, 25, 34, 0.52);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-base) ease;
    }

    .app-shell.is-sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Botón hamburguesa */
    .mobile-menu-toggle {
        position: fixed;
        z-index: 18;
        top: 14px;
        right: 14px;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        box-shadow: var(--shadow-md);
        cursor: pointer;
    }

    .mobile-menu-toggle::before {
        content: "";
        width: 20px;
        height: 14px;
        border-top: 2px solid var(--color-ink);
        border-bottom: 2px solid var(--color-ink);
        box-shadow: 0 6px 0 var(--color-ink);
    }

    /* Sidebar interior móvil */
    .brand-panel {
        justify-content: flex-start;
        padding-bottom: var(--space-4);
    }

    .brand-logo-expanded {
        width: 160px;
        max-height: 72px;
    }

    .client-card   { margin-top: var(--space-3); }
    .sidebar-nav   { gap: var(--space-2); margin-top: var(--space-4); }
    .support-card  { margin-top: var(--space-4); }

    .sidebar-link {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height: 42px;
        padding: 0 var(--space-3);
    }

    /* Topbar, stripe y contenido de ancho completo */
    .topbar,
    .brand-stripe,
    .page-content {
        width: min(calc(100% - var(--space-6)), var(--content-max-width));
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        padding-top: var(--space-6);
        gap: var(--space-3);
    }

    .topbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Pulso: 1 columna en tablet vertical */
    .pulso-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Sistemas: 1 columna */
    .sistemas-grid {
        grid-template-columns: 1fr;
    }

    /* Tabla en modo card apilada */
    .plan-table {
        table-layout: auto;
    }

    .plan-filters {
        grid-template-columns: 1fr;
    }

    .plan-table thead { display: none; }

    .plan-table,
    .plan-table tbody,
    .plan-table tr,
    .plan-table td {
        display: block;
    }

    .plan-table tr {
        padding: var(--space-3);
        border-bottom: 1px solid var(--color-line);
    }

    .plan-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-2) 0;
        border: 0;
        text-align: right;
    }

    .plan-table td::before {
        content: attr(data-label);
        color: var(--color-muted);
        font-weight: var(--weight-bold);
        font-size: var(--text-sm);
        text-align: left;
        flex-shrink: 0;
    }

    .activity-cell {
        justify-items: end;
        text-align: right;
    }

    .compliance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ─── 480px: Móvil ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .kpi-grid,
    .bottom-dashboard-grid,
    .pulso-grid,
    .sistemas-grid {
        grid-template-columns: 1fr;
    }

    .kpi-card,
    .dashboard-panel,
    .quick-panel,
    .pulso-card {
        padding: var(--space-4);
    }

    .alert-item {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .alert-meta {
        grid-column: 2;
        justify-items: start;
    }

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

    .compliance-bar-row {
        grid-template-columns: 80px 1fr 36px;
        gap: var(--space-2);
    }

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

    .skeleton-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modulo-col-stats {
        grid-template-columns: 1fr;
    }
}