:root {
    --cnp-blue: #0A1D3A;
    --cnp-light-blue: #1A365D;
    --cnp-gold: #D4AF37;
    --cnp-bg: #F7FAFC;
    --cnp-text: #1A202C;
    --cnp-gray: #4A5568;
    --cnp-border: #E2E8F0;
    
    /* Nuevos colores para los 4 escenarios */
    --color-esc1: #C6F6D5; /* Verde suave (Optimista) */
    --color-esc2: #BEE3F8; /* Azul suave (Intermedio bajo) */
    --color-esc3: #FEEBC8; /* Amarillo/Naranja suave (Intermedio alto - Promo 41) */
    --color-esc4: #FED7D7; /* Rojo suave (Duro) */
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--cnp-bg);
    color: var(--cnp-text);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    width: 100%;
    box-sizing: border-box;
}

.header {
    background: linear-gradient(135deg, var(--cnp-blue), var(--cnp-light-blue));
    color: #fff;
    padding: 20px 24px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(10, 29, 58, 0.15);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    flex-wrap: wrap;
}

.header img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 5px;
}

.header-info {
    flex: 1;
    min-width: 200px;
}

.header h1 { margin: 0; font-size: 22px; }
.badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--cnp-gold);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    margin-top: 8px;
}

.logout-container {
    display: flex;
    align-items: center;
}

.card {
    background: #fff;
    border: 1px solid var(--cnp-border);
    border-radius: 14px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.admin-card {
    background: #FFF5F5;
    border: 2px solid #E53E3E;
}

.hidden { display: none !important; }

/* Estilo de Cajas de Corte Originales (Tu Sumatorio, Plazas, etc) */
.statgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 15px;
}

/* NUEVA CUADRÍCULA PARA LOS 4 ESCENARIOS */
.statgrid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 15px;
}

@media (max-width: 600px) {
    .statgrid {
        grid-template-columns: 1fr;
    }
    /* En móvil, los 4 escenarios se ponen en un bloque de 2x2 para que quepan bien */
    .statgrid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .header {
        flex-direction: column;
        text-align: center;
    }
    .logout-container {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

.stat {
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Clases de colores para los 4 escenarios */
.stat.esc1 { background-color: var(--color-esc1); color: #22543D; }
.stat.esc2 { background-color: var(--color-esc2); color: #2A4365; }
.stat.esc3 { background-color: var(--color-esc3); color: #7B341E; }
.stat.esc4 { background-color: var(--color-esc4); color: #742A2A; }

.stat .k { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.stat .v { font-size: 22px; font-weight: 800; }

.btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: 0.2s;
    text-transform: uppercase;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-primary { background: var(--cnp-blue); color: white; }
.btn-danger { background: #E53E3E; color: white; }
.btn-outline { background: transparent; border: 1px solid #fff; color: #fff; }
.btn-secondary { background: #EDF2F7; color: var(--cnp-gray); border: 1px solid var(--cnp-border); }
.btn-secondary:hover { background: #E2E8F0; }

.feedback {
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    text-align: center;
    font-weight: 800;
}
.feedback.in { background: #C6F6D5; color: #22543D; border: 1px solid #9AE6B4; }
.feedback.warning { background: #FEEBC8; color: #7B341E; border: 1px solid #FBD38D; }
.feedback.out { background: #FED7D7; color: #742A2A; border: 1px solid #FEB2B2; }
.feedback.neutral { background: #E2E8F0; color: #4A5568; border: 1px solid #CBD5E0; }

.explanation {
    font-size: 13px;
    color: var(--cnp-gray);
    line-height: 1.5;
    background: #EDF2F7;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    border: 1px solid #E2E8F0;
}

input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--cnp-border);
    margin-top: 5px;
    box-sizing: border-box;
}

#chart {
    min-height: 350px;
    margin-top: 30px;
}

/* Estilos del Ranking */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}
.ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #F7FAFC;
    border-radius: 8px;
    border: 1px solid var(--cnp-border);
    font-size: 14px;
}
.ranking-item.top-1 { border-left: 5px solid #D4AF37; background: #FFFAF0; } 
.ranking-item.top-2 { border-left: 5px solid #A0AEC0; background: #F7FAFC; } 
.ranking-item.top-3 { border-left: 5px solid #B7791F; background: #FFFAF0; } 

.ranking-alias { font-weight: 600; color: var(--cnp-light-blue); }
.ranking-nota { font-weight: 800; color: var(--cnp-text); }
.ranking-pos { color: var(--cnp-gray); width: 30px; display: inline-block; font-weight: bold; }

.footer {
    text-align: center;
    padding: 20px;
    color: var(--cnp-gray);
    font-size: 13px;
    border-top: 1px solid var(--cnp-border);
    background: #fff;
}

.buttons-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-top: 20px;
}

@media (max-width: 600px) {
    .buttons-grid { grid-template-columns: 1fr; }
}

/* Botones Redes Sociales */
.btn-whatsapp { 
    background: #25D366; 
    color: white; 
}
.btn-whatsapp:hover {
    background: #1DA851;
}

.btn-instagram { 
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    color: white; 
}
.btn-instagram:hover {
    opacity: 0.85;
}

.hide-for-observer {
    display: none !important;
}