/* ==========================================================================
   PALETA DE COLORES OFICIAL (image_f9e481.png)
   ========================================================================== */
:root {
    /* Cuadrados Grandes (Principales) */
    --ice-navy-bg: #0f1c3f;        /* Fondo institucional profundo */
    --ice-gold: #d9a736;           /* Único color amarillo/oro corporativo */
    --ice-white: #f8fafc;          /* Off-white de contraste y texto claro */
    --ice-blue-accent: #0073b7;    /* Azul oficial para hipervínculos/bordes activos */
    
    /* Cuadrados Pequeños (Métricas y Gráficos de Nivel) */
    --lvl-1-crimson: #991b1b;      /* Nivel 1: Inicial / Silos */
    --lvl-2-coral: #ef4444;        /* Nivel 2: Repetible */
    --lvl-3-orange: #f97316;       /* Nivel 3: Definido */
    --lvl-4-mint: #10b981;         /* Nivel 4: Gestionado */
    --lvl-5-emerald: #047857;      /* Nivel 5: Optimizado */

    /* Estructuras de Canvas Blanco */
    --canvas-bg: #ffffff;
    --canvas-text: #0f172a;
    --canvas-muted: #475569;
    --canvas-border: #e2e8f0;
    --canvas-input-bg: #f8fafc;
    
    --font-stack: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--ice-navy-bg);
    color: var(--ice-white);
    font-family: var(--font-stack);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

input, select, button {
    font-family: var(--font-stack);
}

/* ==========================================================================
   ESTILOS ORIGINALES DE INDEX.HTML (Portal de Entrada)
   ========================================================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid rgba(248, 250, 252, 0.1);
    background: rgba(15, 28, 63, 0.9);
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
}

.brand-ice { color: var(--ice-white); }
.brand-index { color: var(--ice-gold); }
.portal-tag { font-weight: 300; font-size: 0.95rem; color: var(--ice-white); opacity: 0.6; }

.navbar nav { display: flex; align-items: center; gap: 24px; }
.navbar nav a { color: var(--ice-white); opacity: 0.7; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: opacity 0.2s; }
.navbar nav a:hover { opacity: 1; }

.btn-secondary {
    background: rgba(248, 250, 252, 0.05);
    border: 1px solid rgba(248, 250, 252, 0.2);
    color: var(--ice-white);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

main { flex: 1; max-width: 1100px; margin: 0 auto; padding: 50px 20px; width: 100%; }
.hero { text-align: center; margin-bottom: 50px; }
.hero h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 12px; }
.hero .slogan { color: var(--ice-gold); font-weight: 700; font-size: 1.25rem; margin-bottom: 15px; letter-spacing: 0.5px; }
.hero .subtitle { color: var(--ice-white); opacity: 0.7; font-size: 1.05rem; max-width: 750px; margin: 0 auto; line-height: 1.6; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 20px; }

.card {
    background: rgba(248, 250, 252, 0.03);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 12px;
    padding: 35px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}

.card.active:hover { transform: translateY(-4px); border-color: var(--ice-blue-accent); }
.card.locked { opacity: 0.4; }
.card h2 { font-size: 1.4rem; color: #fff; margin-bottom: 12px; }
.card p { color: var(--ice-white); opacity: 0.7; font-size: 0.95rem; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; }

.card-badge { position: absolute; top: 20px; right: 20px; background: rgba(16, 185, 129, 0.15); color: #10b981; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; }
.card-badge.premium { background: rgba(248, 250, 252, 0.1); color: var(--ice-white); }

.btn-primary {
    background: var(--ice-gold);
    color: var(--ice-navy-bg);
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.95; }
.btn-disabled { background: rgba(248, 250, 252, 0.05); color: rgba(248, 250, 252, 0.3); border: 1px solid rgba(248, 250, 252, 0.1); padding: 14px 20px; border-radius: 6px; cursor: not-allowed; }

/* ==========================================================================
   ESTILOS DE DIAGNOSTICO.HTML (Formulario Canvas Blanco)
   ========================================================================== */
.premium-header { background: #091126; border-bottom: 1px solid rgba(248, 250, 252, 0.1); padding: 18px 40px; }
.header-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.brand-zone { display: flex; align-items: center; }
.brand-logo { font-size: 1.4rem; font-weight: 800; color: #fff; }
.brand-logo span { color: var(--ice-gold); }
.brand-divider { color: rgba(248, 250, 252, 0.2); margin: 0 15px; font-size: 1.2rem; }
.brand-tagline { color: var(--ice-white); opacity: 0.6; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.btn-back-nav { color: var(--ice-gold); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.btn-back-nav:hover { color: var(--ice-white); }

.assessment-wizard { display: flex; flex-direction: column; align-items: center; padding: 0 20px; width: 100%; }
.intro-section { text-align: center; margin-top: 35px; }
.intro-section h1 { font-size: 1.8rem; color: #fff; font-weight: 700; }

.wizard-progress { width: 100%; max-width: 850px; margin: 30px auto; display: flex; justify-content: center; align-items: center; gap: 12px; background: #091126; padding: 14px; border-radius: 10px; border: 1px solid rgba(248, 250, 252, 0.1); flex-wrap: wrap; }
.progress-step { flex: 0 1 auto; min-width: 80px; display: flex; flex-direction: column; align-items: center; opacity: 0.35; transition: opacity 0.3s; }
.progress-step.active { opacity: 1; }
.step-num { background: rgba(248, 250, 252, 0.1); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
.progress-step.active .step-num { background: var(--ice-gold); color: var(--ice-navy-bg); }
.progress-step .step-text { font-size: 0.7rem; margin-top: 5px; color: var(--ice-white); opacity: 0.8; display: block; max-width: 90px; text-align: center; }

.white-canvas-form { background: var(--canvas-bg); color: var(--canvas-text); width: 100%; max-width: 850px; margin: 0 auto; border-radius: 14px; padding: 35px 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: 1px solid var(--canvas-border); }
.tab-header { margin-bottom: 28px; border-bottom: 2px solid #f1f5f9; padding-bottom: 16px; }
.tab-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--canvas-text); margin-bottom: 10px; }
.tab-header p { color: var(--canvas-muted); font-size: 0.95rem; line-height: 1.5; }

.enterprise-identity-card { background: var(--canvas-input-bg); padding: 20px; border-radius: 8px; border: 1px solid var(--canvas-border); margin-bottom: 25px; }
.enterprise-identity-card label { display: block; color: var(--canvas-muted); margin-bottom: 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.enterprise-identity-card input { width: 100%; padding: 12px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; color: var(--canvas-text); font-size: 1rem; outline: none; }
.enterprise-identity-card input:focus { border-color: var(--ice-blue-accent); }

.question-card { background-color: #ffffff; padding: 24px; border-radius: 10px; border: 1px solid var(--canvas-border); margin-bottom: 20px; }
.question-card label { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: var(--canvas-text); line-height: 1.4; }
.question-desc { color: var(--canvas-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; border-left: 3px solid #cbd5e1; padding-left: 12px; }

.pulse-select { width: 100%; padding: 12px 16px; border-radius: 6px; border: 1px solid #cbd5e1; background-color: var(--canvas-input-bg); color: var(--canvas-text); font-size: 0.95rem; outline: none; }
.pulse-select:focus { border-color: var(--ice-blue-accent); background-color: #fff; }

.wizard-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; border-top: 1px solid var(--canvas-border); padding-top: 20px; }
.btn-nav { padding: 12px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 6px; cursor: pointer; border: none; transition: background 0.2s; }
.btn-nav.primary { background: var(--ice-blue-accent); color: white; margin-left: auto; }
.btn-nav.secondary { background: #f1f5f9; color: #475569; }
.btn-nav.secondary:hover { background: #e2e8f0; }
.btn-nav.success { background: #10b981; color: white; margin-left: auto; }

/* ==========================================================================
   RESULTADOS DE MADUREZ OFICIAL (DINÁMICOS POR NIVEL)
   ========================================================================== */
.result-card-premium { width: 100%; max-width: 850px; margin: 45px auto 60px auto; background: #091126; border-radius: 12px; padding: 40px; text-align: center; border: 2px solid rgba(248, 250, 252, 0.1); }
.metrics-output-row { display: flex; justify-content: center; gap: 40px; margin: 25px 0; }
.metric-block { background: rgba(248, 250, 252, 0.03); border: 1px solid rgba(248, 250, 252, 0.1); border-radius: 8px; padding: 16px 30px; min-width: 180px; }
.metric-label { font-size: 0.8rem; color: var(--ice-white); opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.metric-value { font-size: 2.2rem; font-weight: 800; font-family: var(--font-stack); }

.gauge-display p { line-height: 1.6; font-size: 1rem; color: var(--ice-white); opacity: 0.9; }
.back-link { color: var(--ice-gold); text-decoration: none; font-weight: 500; }

/* Asignación Estricta de Paleta por Nivel */
.result-card-premium.level-1 { border-color: var(--lvl-1-crimson); }
.result-card-premium.level-1 .lvl-color { color: var(--lvl-1-crimson); }
.result-card-premium.level-2 { border-color: var(--lvl-2-coral); }
.result-card-premium.level-2 .lvl-color { color: var(--lvl-2-coral); }
.result-card-premium.level-3 { border-color: var(--lvl-3-orange); }
.result-card-premium.level-3 .lvl-color { color: var(--lvl-3-orange); }
.result-card-premium.level-4 { border-color: var(--lvl-4-mint); }
.result-card-premium.level-4 .lvl-color { color: var(--lvl-4-mint); }
.result-card-premium.level-5 { border-color: var(--lvl-5-emerald); }
.result-card-premium.level-5 .lvl-color { color: var(--lvl-5-emerald); }

/* Ventanas Modales */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 28, 63, 0.8); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 9999; }
.modal-overlay.modal-open { opacity: 1; pointer-events: auto; }
.modal-box { background: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; color: var(--canvas-text); transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.modal-open .modal-box { transform: scale(1); }
.modal-icon { font-size: 2.5rem; margin-bottom: 12px; }
.btn-modal-close { background: var(--ice-navy-bg); color: white; border: none; padding: 10px 20px; font-weight: 600; border-radius: 6px; cursor: pointer; width: 100%; }

footer { text-align: center; padding: 30px; color: var(--ice-white); opacity: 0.3; font-size: 13px; margin-top: auto; width: 100%; border-top: 1px solid rgba(248, 250, 252, 0.05); }