﻿/* =============================================================================
   RUTA: wwwroot/css/gaia/pages/admin.css
   -----------------------------------------------------------------------------
   GAIA VIP — Admin (Index)
   Objetivo:
   - Separación controlada y coherente:
     1) Header→contenido (gap-top)
     2) Separación entre marcos (gap-cards)
   - Neutraliza py-2 del markup para que no duplique espacios
   Última modifi.: 2026-01-19
   ============================================================================= */

#main-content > section.container {
    --admin-gap-top: 1.25rem; /* Header -> primer bloque */
    --admin-gap-cards: 1.75rem; /* separación entre marcos */

    max-width: 100%;
    /* Neutraliza el py-2 del <section class="container py-2"> */
    padding-top: var(--admin-gap-top) !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

    /* ✅ Separación entre MARCOS (fila principal del Admin) */
    #main-content > section.container > .row {
        --bs-gutter-x: var(--admin-gap-cards);
        --bs-gutter-y: var(--admin-gap-cards);
    }

    /* Aire interno de cada card (Admin solo) */
    #main-content > section.container .card-panel {
        padding-top: 1.15rem !important;
    }

    /* Cards estiradas en columnas */
    #main-content > section.container .row > [class*="col-"] > .card-panel {
        height: 100%;
    }

    /* Títulos compactos */
    #main-content > section.container .card-panel > h2.h6,
    #main-content > section.container .card-panel > h3.h6 {
        margin-bottom: .6rem;
        font-weight: 700;
    }

    /* Texto muted sin “aire” extra */
    #main-content > section.container .card-panel > p.text-muted {
        margin-bottom: .75rem;
    }

    /* Tablas más compactas */
    #main-content > section.container .table.table-sm > :not(caption) > * > * {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    #main-content > section.container .table-responsive {
        margin-bottom: 0;
    }

/* Responsive */
@media (max-width: 576px) {
    #main-content > section.container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: var(--admin-gap-top) !important;
    }

        #main-content > section.container > .row {
            --bs-gutter-x: 1rem;
            --bs-gutter-y: 1rem;
        }
}
