/* ==========================================================================
   RESPONSIVE — Adaptaciones para Móvil, Tablet, Laptop y Escritorio Amplio
   Breakpoints: 320px, 375px, 768px, 1024px, 1440px, 1920px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MÓVIL (< 768px / 47.99em)
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
    /* Login Split Screen en Móvil */
    .acceso {
        grid-template-columns: 1fr;
    }

    .acceso__branding {
        padding: var(--espacio-5) var(--espacio-4);
    }

    .branding__contenido {
        margin-block: var(--espacio-4);
    }

    .branding__titulo {
        font-size: var(--texto-2xl);
    }

    .branding__tarjeta-previa {
        display: none; /* Se simplifica en pantallas pequeñas para agilizar el acceso */
    }

    .acceso__formulario-panel {
        padding: var(--espacio-5) var(--espacio-4);
    }

    /* Tablas apilables en tarjetas para evitar scroll accidental */
    .tabla--apilable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabla--apilable tbody tr {
        display: block;
        margin-bottom: var(--espacio-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radio-lg);
        background-color: var(--color-surface);
        padding: var(--espacio-3);
        box-shadow: var(--sombra-xs);
    }

    .tabla--apilable tbody td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-2);
        padding: var(--espacio-2) 0;
        border-bottom: 1px dashed var(--color-border);
        text-align: left;
    }

    .tabla--apilable tbody tr td:last-child {
        border-bottom: none;
    }

    .tabla--apilable tbody td::before {
        content: attr(data-etiqueta);
        font-size: var(--texto-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-muted);
    }

    .tabla--apilable .celda--acciones {
        justify-content: flex-end;
        padding-top: var(--espacio-2);
    }

    .cabecera-superior {
        padding-inline: var(--espacio-4);
    }

    .badge-moneda {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   1b. SIDEBAR COMO CAJÓN (< 1024px / 63.99em)

   La barra lateral es `position: fixed` y solo deja hueco al contenido a
   partir de 64em, donde `.area-trabajo` recibe su margen izquierdo. Por eso
   el comportamiento de cajón debe cubrir TODO el rango inferior a 64em y no
   únicamente el móvil: entre 768px y 1023px la barra quedaba visible y fija
   sobre un contenido sin margen, tapándolo, y sin botón para cerrarla.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99em) {
    .barra-lateral {
        transform: translateX(-100%);
        box-shadow: var(--sombra-xl);
    }

    .barra-lateral.abierta {
        transform: translateX(0);
    }

    .boton-cerrar-sidebar {
        display: flex;
    }

    .area-trabajo {
        margin-left: 0;
    }

    .boton-menu-movil {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   2. >= 480px (Móviles Grandes / Phablets)
   -------------------------------------------------------------------------- */
@media (min-width: 30em) {
    .formulario__campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

/* --------------------------------------------------------------------------
   3. >= 768px (Tablets)
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
    .acceso {
        grid-template-columns: 1fr 1fr;
    }

    .acceso__branding {
        padding: var(--espacio-7) var(--espacio-6);
    }

    .branding__tarjeta-previa {
        display: flex;
    }

    .acceso__formulario-panel {
        padding: var(--espacio-7) var(--espacio-6);
    }

    .cabecera-superior {
        padding-inline: var(--espacio-6);
    }

    .contenido {
        padding: var(--espacio-6);
    }

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

/* --------------------------------------------------------------------------
   4. >= 1024px (Laptops / Escritorio)
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
    .acceso {
        grid-template-columns: 1.1fr 1fr;
    }

    /* Sidebar estática a la izquierda */
    .barra-lateral {
        transform: translateX(0);
    }

    .boton-cerrar-sidebar {
        display: none;
    }

    .boton-menu-movil {
        display: none;
    }

    .area-trabajo {
        margin-left: var(--ancho-sidebar);
    }

    .rejilla-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

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

/* --------------------------------------------------------------------------
   5. >= 1440px y 1920px (Escritorio Amplio)
   -------------------------------------------------------------------------- */
@media (min-width: 90em) {
    .contenido {
        padding-block: var(--espacio-7);
    }

    .grafico-contenedor {
        height: 20rem;
    }

    .notificaciones {
        right: var(--espacio-7);
        bottom: var(--espacio-7);
        max-width: 28rem;
    }
}