/**
 * SITE LAYOUT - Sistema nativo standalone
 * 
 * Propósito: Sistema de layout nativo del tema standalone (Phase E completada)
 * Reemplaza las clases legacy de Hello Elementor (.site, .container, etc)
 * 
 * Estado: Phase E - Tema standalone activo, sin dependencia de Hello Elementor
 */

/* ============================================================
   ESTRUCTURA PRINCIPAL DEL SITIO
============================================================ */

/**
 * Wrapper principal del sitio
 * Sistema nativo standalone (reemplaza clases legacy de Hello Elementor)
 */
.informe-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary, #ffffff);
}

/**
 * Header del sitio
 * Sistema nativo standalone (reemplaza clases legacy de Hello Elementor)
 */
.informe-site-header {
    width: 100%;
    background: var(--color-white, #ffffff);
    border-bottom: 1px solid var(--color-border-light, #e0e0e0);
}

/**
 * Contenido principal del sitio
 * Sistema nativo standalone (reemplaza clases legacy de Hello Elementor)
 */
.informe-site-content {
    flex: 1;
    width: 100%;
    background: var(--color-white, #ffffff);
}

/**
 * Footer del sitio
 * Sistema nativo standalone (reemplaza clases legacy de Hello Elementor)
 */
.informe-site-footer {
    width: 100%;
    background: var(--color-bg-dark, #1a1a1a);
    color: var(--color-white, #ffffff);
    padding: var(--space-10, 2.5rem) 0;
}

/* ============================================================
   CONTAINERS - Sistema nativo
============================================================ */

/**
 * Container genérico
 * Sistema nativo standalone (reemplaza clases legacy de Hello Elementor)
 */
.informe-site-container {
    max-width: var(--container-max-width, 1320px);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop, 20px);
    box-sizing: border-box;
}

/**
 * Content area - área de contenido
 * Sistema nativo standalone (reemplaza clases legacy de Hello Elementor)
 */
.informe-content-area {
    max-width: var(--max-width-content, 800px);
    margin: 0 auto;
    padding: var(--space-8, 2rem) var(--container-padding-desktop, 20px);
}

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

@media (max-width: 1024px) {
    .informe-site-container,
    .informe-content-area {
        padding-left: var(--container-padding-tablet, 16px);
        padding-right: var(--container-padding-tablet, 16px);
    }
}

@media (max-width: 768px) {
    .informe-site-container,
    .informe-content-area {
        padding-left: var(--container-padding-mobile, 12px);
        padding-right: var(--container-padding-mobile, 12px);
    }
}

/* ============================================================
   COMPATIBILITY - Aliases mantenidos para compatibilidad PHP
============================================================ */

/**
 * PHASE E: Standalone Theme - Aliases mantenidos
 * 
 * Estos aliases se mantienen porque el código PHP puede usar clases legacy
 * (.site, .container, .content-area, .site-content) y necesitamos compatibilidad.
 * 
 * NOTA: Los aliases se mantienen porque no hay breaking changes necesarios.
 * Si en el futuro queremos migrar a clases .informe-*, podemos hacerlo gradualmente.
 */

/* Alias: .site → .informe-site */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary, #ffffff);
}

/* Alias: .container → .informe-site-container */
.container {
    max-width: var(--container-max-width, 1320px);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop, 20px);
    box-sizing: border-box;
}

/* Alias: .content-area → .informe-content-area */
.content-area {
    max-width: var(--max-width-content, 800px);
    margin: 0 auto;
    padding: var(--space-8, 2rem) var(--container-padding-desktop, 20px);
}

/* Alias: .site-content → .informe-site-content */
.site-content {
    flex: 1;
    width: 100%;
    background: var(--color-white, #ffffff);
}