/* =========================================================
   EL ARCHIVO DE LAS HISTORIAS INFINITAS
   Archivo: layout.css
   Función: estructura general de páginas
   ========================================================= */


/* =========================
   FONDO GENERAL
   ========================= */

    body {
        position: relative;
        background:
            linear-gradient(
                rgba(15, 17, 22, 0.88),
                rgba(15, 17, 22, 0.96)
            ),
            var(--bg-main);
    }


/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */

    .app {
        width: min(100% - 2rem, var(--max-width));
        min-height: 100vh;

        margin: 0 auto;
        padding: var(--space-xl) 0;
    }


/* =========================
   CABECERA DE PÁGINA
   ========================= */

    .page-header {
        margin-bottom: var(--space-xxl);
    }

    .page-kicker {
        margin-bottom: var(--space-sm);

        color: var(--accent-main);

        font-family: var(--font-title);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .page-title {
        max-width: 820px;

        font-family: var(--font-logo);
        font-size: clamp(2.4rem, 6vw, 5rem);
        font-weight: 700;
        line-height: 1.05;

        color: var(--accent-soft);
        text-shadow: 0 0 22px rgba(184, 155, 94, 0.18);
    }

    .page-subtitle {
        max-width: 620px;
        margin-top: var(--space-md);

        color: var(--text-secondary);

        font-size: 1.05rem;
        font-style: italic;
    }


/* =========================
   SECCIONES
   ========================= */

    .section {
        margin-bottom: var(--space-xxl);
    }

    .section-header {
        margin-bottom: var(--space-lg);
    }

    .section-title {
        font-size: 1.45rem;
        color: var(--accent-soft);
    }

    .section-description {
        max-width: 720px;
        margin-top: var(--space-xs);

        color: var(--text-muted);
    }


/* =========================
   GRIDS
   ========================= */

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

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

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

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


/* =========================
   DISTRIBUCIÓN DASHBOARD
   ========================= */

    .dashboard-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--space-xl);
        align-items: start;
    }

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

    .dashboard-sidebar {
        display: grid;
        gap: var(--space-lg);
    }


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

    @media (max-width: 1100px) {
        .dashboard-layout {
            grid-template-columns: 1fr;
        }

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

    @media (max-width: 820px) {
        .grid-3,
        .grid-4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .app {
            width: min(100% - 1.25rem, var(--max-width));
            padding: var(--space-lg) 0;
        }
    }

    @media (max-width: 560px) {
        .grid-2,
        .grid-3,
        .grid-4,
        .dashboard-sidebar {
            grid-template-columns: 1fr;
        }

        .page-header {
            margin-bottom: var(--space-xl);
        }
    }