/* =========================================================
   EL ARCHIVO
   ========================================================= */

    .archivo-page {
        min-height: 100vh;

        background:
            linear-gradient(
                rgba(15, 17, 22, 0.45),
                rgba(15, 17, 22, 0.70)
            ),
            url("../../assets/fondos/archivo.png");

        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .archivo-hero {
        margin-bottom: var(--space-xl);
    }


/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

    .archivo-layout {
        display: grid;
        grid-template-columns: 2fr 320px;
        gap: var(--space-xl);
        align-items: start;
    }

    .archivo-main {
        min-width: 0;
    }

    .archivo-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }


/* =========================================================
   LISTADO
   ========================================================= */

    #listaArchivo {
        display: grid;
        gap: var(--space-lg);
    }


/* =========================================================
   RESUMEN
   ========================================================= */

    .archivo-resumen {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

    @media (max-width: 1100px) {

        .archivo-layout {
            grid-template-columns: 1fr;
        }
    }

    .archivo-card-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-sm);

        margin-top: var(--space-md);
    }

    .archivo-restore,
    .archivo-delete {
        width: 34px;
        height: 34px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        color: var(--accent-soft);
        background: rgba(184, 155, 94, 0.08);

        border: 1px solid rgba(184, 155, 94, 0.24);
        border-radius: var(--radius-full);

        font-size: 1.05rem;
        cursor: pointer;

        transition:
            transform var(--transition-fast),
            background var(--transition-base),
            border-color var(--transition-base),
            box-shadow var(--transition-base);
    }

    .archivo-restore:hover,
    .archivo-delete:hover {
        transform: translateY(-2px);
        background: rgba(184, 155, 94, 0.16);
        border-color: var(--border-gold);
        box-shadow: var(--shadow-gold);
    }