/* ══════════════════════════════════════════════════════
 * VARIABLES GLOBALES — Paleta Azul Scope
 * ══════════════════════════════════════════════════════ */
:root {
    --font-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Colores principales ── */
    --primary:              #4893C6;
    --primary-hover:        #3D82B2;
    --primary-dark:         #243A5E;

    /* ── Colores secundarios ── */
    --secondary:            #64A4CE;
    --secondary-light:      #8FB6D8;

    /* ── Fondos ── */
    --background-main:      #EDF4FA;
    --background-secondary: #E5F0FA;
    --background-soft:      #E3F1FB;
    --background-card:      #FFFFFF;

    /* ── Superficies y acentos ── */
    --surface-blue:         #D1E8FC;
    --surface-blue-alt:     #CFE3F1;
    --accent-light:         #BDE0FE;
    --accent-medium:        #A2D2FF;
    --accent-strong:        #8FC9FF;

    /* ── Azules pasteles ── */
    --pastel-blue-1:        #C1E4F3;
    --pastel-blue-2:        #B7D7EA;
    --pastel-blue-3:        #A8D0EF;
    --pastel-blue-4:        #99C3E4;
    --pastel-blue-5:        #8DBEDC;

    /* ── Complementario ── */
    --cream:                #FFF9E6;

    /* ── Textos ── */
    --text-primary:         #243A5E;
    --text-secondary:       #5F86A6;
    --text-muted:           #7894AB;
    --text-on-primary:      #FFFFFF;

    /* ── Bordes ── */
    --border-light:         #D1E8FC;
    --border-medium:        #B7D7EA;

    /* ── Estados funcionales ── */
    --success:              #4CA786;
    --success-bg:           #D6F0E8;
    --success-text:         #1E6B52;
    --warning:              #E4A84A;
    --warning-bg:           #FEF3DC;
    --warning-text:         #8B5E1A;
    --danger:               #D96363;
    --danger-bg:            #FDE8E8;
    --danger-text:          #8B2020;
    --info:                 #4893C6;
    --info-bg:              #D8ECFA;
    --info-text:            #1A4D7A;

    /* ── Sombras ── */
    --shadow-sm:            0 2px 8px rgba(36, 58, 94, 0.08);
    --shadow-md:            0 8px 24px rgba(36, 58, 94, 0.12);

    /* ── Compatibilidad: alias que mantienen referencias existentes ── */
    --color-bg:             var(--background-main);
    --color-text:           var(--text-primary);
    --color-sidebar-bg:     var(--primary-dark);
    --color-sidebar-text:   #b8cfe5;
    --color-sidebar-active: #ffffff;
    --color-sidebar-hover:  rgba(255, 255, 255, 0.09);
    --color-sidebar-border: rgba(255, 255, 255, 0.08);
    --color-topbar-bg:      var(--background-card);
    --color-topbar-border:  var(--border-light);
    --color-accent:         var(--primary);

    /* ── Dimensiones y transiciones ── */
    --sidebar-width:        240px;
    --topbar-height:        56px;
    --radius:               8px;
    --transition-speed:     0.2s;
}

/* Reset base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--font-primary);
    background-color: var(--background-main);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    font-family: var(--font-primary);
    cursor: pointer;
}

/* Estructura raíz del layout */
#app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

#content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Mensajes de módulo no encontrado / acceso denegado ── */
.error-msg {
    padding: 2.5rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ── Override responsive: stats grids de 4 col en módulos scoped ── */
@media (max-width: 767px) {
    .mod-proyectos .stats-grid,
    .mod-preguntas .stats-grid,
    .mod-criterios .stats-grid,
    .mod-reqs      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Pantalla de carga inicial ── */
#app.app-loading {
    background: var(--primary-dark);
}

#app.app-loading #sidebar,
#app.app-loading #main-wrapper {
    display: none;
}