/* ====== variables globales y paleta de colores ====== */
:root {
    /* Psicología del color: Azul Navy (Concentración y profundidad) */
    --bg-dark: #0a0f1d;
    --nav-bg: rgba(15, 23, 42, 0.85);
    --card-bg: rgba(30, 41, 59, 0.4);
    
    /* Acentos: Esperanza, éxito y alertas */
    --accent-cyan: #00f0ff;
    --accent-emerald: #10b981;
    --accent-amber: #fbbf24;
    --danger: #ef4444;
    
    /* Textos */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    
    /* Bordes Glassmorphism */
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ====== resets y tipografía ====== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: var(--bg-dark);
    /* Sutil gradiente de fondo para dar profundidad */
    background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, var(--bg-dark) 60%);
    color: var(--text-main);
    min-height: 100vh;
    padding-bottom: 80px; /* Espacio para el nav inferior */
}

/* ====== utilidades de glassmorphism ====== */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: var(--glass-border);
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    z-index: 1000;
}

/* ====== contenedores y vistas ====== */
.app-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.view { 
    display: none; 
    animation: fadeIn 0.3s ease; 
}
.view.active { 
    display: block; 
}
/* Aseguramos que la clase hidden oculte explícitamente */
.view.hidden {
    display: none !important;
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ====== encabezados ====== */
.app-header { 
    margin-bottom: 2rem; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    flex-wrap: wrap; 
}
h1 { font-size: 1.8rem; color: var(--text-main); font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }

/* ====== resumen semestral ====== */
.semester-summary {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
}
.summary-col { display: flex; flex-direction: column; align-items: center; }
.summary-col .label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.summary-col .value { font-size: 1.8rem; font-weight: 700; }
.summary-col .value.accent { color: var(--accent-cyan); }

/* ====== inputs y botones ====== */
input {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: var(--glass-border);
    color: white;
    padding: 12px 15px;
    border-radius: 8px;
    outline: none;
    font-size: 1rem;
    transition: border-color 0.3s;
}
input:focus { border-color: var(--accent-cyan); }

.input-row { display: flex; gap: 10px; margin-top: 10px; }

button {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-primary { 
    background: var(--accent-cyan); 
    color: var(--bg-dark); 
    padding: 12px 20px; 
}
.btn-primary:active { transform: scale(0.95); }

.btn-secondary { 
    background: rgba(255, 255, 255, 0.1); 
    color: white; 
    padding: 12px; 
    width: 100%; 
    border: var(--glass-border); 
}
.btn-secondary:active { transform: scale(0.95); }

.btn-icon { background: transparent; color: white; font-size: 1.5rem; padding: 5px; }

.btn-danger { 
    background: rgba(239, 68, 68, 0.15); 
    color: var(--danger); 
    padding: 8px; 
    border-radius: 6px; 
}
.btn-danger:active { transform: scale(0.95); }

/* ====== navegación inferior ====== */
.nav-btn { background: transparent; color: var(--text-muted); flex-direction: column; font-size: 0.8rem; }
.nav-btn i { font-size: 1.5rem; margin-bottom: 4px; }
.nav-btn.active { color: var(--accent-cyan); }

/* ====== lista de materias ====== */
.courses-grid { display: grid; gap: 15px; margin-top: 2rem; }
.course-card { display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s; cursor: pointer;}
.course-card:active { transform: scale(0.98); }
.course-info h3 { color: var(--accent-cyan); margin-bottom: 5px; }
.course-info p { font-size: 0.85rem; color: var(--text-muted); }
.course-stats { text-align: right; }
.course-stats .grade { font-size: 1.2rem; font-weight: 700; display: block; }

/* ====== panel de IA predictiva ====== */
.prediction-box { margin-bottom: 2rem; border-left: 4px solid var(--accent-amber); transition: border-color 0.3s ease; }
.ai-stats { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; flex-wrap: wrap; gap: 5px;}
#ai-prediction { font-size: 1.1rem; font-weight: 600; color: var(--accent-amber); transition: color 0.3s ease; }

/* ====== filas de notas ====== */
.grades-header { display: grid; grid-template-columns: 2fr 1fr 1fr 40px; gap: 10px; padding: 0 10px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; }
.grade-row { display: grid; grid-template-columns: 2fr 1fr 1fr 40px; gap: 10px; margin-bottom: 10px; }
.grade-row input { padding: 10px; font-size: 0.95rem; }

/* ====== utilidades extra ====== */
.mt-1 { margin-top: 1rem; }
.chart-container { position: relative; height: 350px; width: 100%; }

/* Utilidades de color de texto/bordes para el JS */
.text-success { color: var(--accent-emerald) !important; }
.text-warning { color: var(--accent-amber) !important; }
.text-danger { color: var(--danger) !important; }

.border-success { border-left-color: var(--accent-emerald) !important; }
.border-danger { border-left-color: var(--danger) !important; }