/* Simulador ECOEMS 2026 - Styles */
:root {
    --primary: #0f3460; --primary-light: #1a4a7a; --accent: #e94560;
    --bg: #f5f5f7; --card: #ffffff; --text: #1a1a2e; --text-light: #666;
    --success: #28a745; --warning: #ffc107; --danger: #dc3545;
    --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--primary); text-decoration:none; }

/* Navbar */
.navbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--text); color:white; }
.logo { color:white; font-size:1.2rem; font-weight:700; }
.logo span { color:var(--accent); }
.nav-links { display:flex; gap:16px; align-items:center; }
.nav-links a { color:rgba(255,255,255,0.8); }
.btn-link { background:none; border:none; color:rgba(255,255,255,0.8); cursor:pointer; font-size:0.9rem; }
.user-info { color:rgba(255,255,255,0.6); font-size:0.85rem; }

/* Buttons */
.btn { display:inline-block; padding:10px 20px; border:none; border-radius:var(--radius); cursor:pointer; font-size:0.95rem; font-weight:600; text-align:center; transition:all 0.2s; }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-light); }
.btn-secondary { background:#e0e0e0; color:var(--text); }
.btn-success { background:var(--success); color:white; }
.btn-danger { background:var(--danger); color:white; }
.btn-sm { padding:6px 14px; font-size:0.85rem; }
.btn-lg { padding:14px 32px; font-size:1.1rem; }
.btn-google { display:inline-flex; align-items:center; padding:12px 24px; background:white; color:#333; border:1px solid #ddd; border-radius:var(--radius); font-size:1rem; font-weight:500; }
.btn-google:hover { background:#f8f8f8; box-shadow:var(--shadow); }

/* Container */
.container { max-width:1100px; margin:0 auto; padding:24px; }

/* Hero */
.hero { min-height:calc(100vh - 56px); display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 24px; }
.hero h1 { font-size:2.5rem; margin-bottom:12px; }
.accent { color:var(--accent); }
.subtitle { font-size:1.15rem; color:var(--text-light); max-width:600px; margin:0 auto 40px; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; max-width:900px; margin:0 auto 40px; }
.feature-card { background:var(--card); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); }
.feature-icon { font-size:2rem; margin-bottom:8px; }
.feature-card h3 { font-size:1.1rem; margin-bottom:4px; }
.feature-card p { font-size:0.85rem; color:var(--text-light); }
.cta-section { margin-top:20px; }
.cta-note { font-size:0.85rem; color:var(--text-light); margin-top:8px; }

/* Login */
.login-container { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { background:var(--card); padding:40px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; max-width:420px; width:100%; }
.login-card h1 { font-size:1.8rem; margin-bottom:8px; }
.login-card p { color:var(--text-light); margin-bottom:24px; }
.status-icon { font-size:3rem; margin-bottom:16px; }

/* Dashboard */
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.history h2 { margin-bottom:16px; }
.history-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.history-card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.history-card-header { display:flex; justify-content:space-between; padding:12px 16px; background:#f8f9fa; font-size:0.85rem; }
.exam-status { padding:2px 8px; border-radius:4px; font-size:0.75rem; font-weight:600; }
.status-completed { background:#d4edda; color:#155724; }
.status-progress { background:#fff3cd; color:#856404; }
.history-card-body { padding:20px; text-align:center; }
.score-circle { display:inline-block; }
.score-number { font-size:2.5rem; font-weight:800; }
.score-total { font-size:1rem; color:var(--text-light); }
.score-high .score-number { color:var(--success); }
.score-mid .score-number { color:var(--warning); }
.score-low .score-number { color:var(--danger); }
.history-card-footer { padding:12px 16px; border-top:1px solid #eee; text-align:center; }
.empty-state { text-align:center; padding:60px 24px; }
.empty-icon { font-size:3rem; margin-bottom:16px; }

/* Exam */
.exam-body { background:#f0f0f3; }
.exam-header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:var(--text); color:white; position:sticky; top:0; z-index:100; }
.exam-title { font-weight:700; }
.exam-progress { font-size:0.85rem; opacity:0.8; margin-left:16px; }
.timer { font-size:1.4rem; font-weight:800; font-family:monospace; padding:6px 16px; background:rgba(255,255,255,0.1); border-radius:6px; }
.timer-warning { color:var(--warning); }
.timer-critical { color:var(--danger); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.5} }

.exam-layout { display:grid; grid-template-columns:220px 1fr; gap:20px; padding:20px; max-width:1200px; margin:0 auto; }
.question-nav { background:var(--card); padding:16px; border-radius:var(--radius); box-shadow:var(--shadow); height:fit-content; position:sticky; top:70px; }
.question-nav h4 { margin-bottom:12px; font-size:0.9rem; }
.question-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.q-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; font-size:0.8rem; font-weight:600; background:#f0f0f0; color:var(--text); }
.q-btn.answered { background:#d4edda; color:#155724; }
.q-btn.flagged { border:2px solid var(--warning); }
.q-btn.active { background:var(--primary); color:white; }
.nav-legend { margin-top:12px; font-size:0.75rem; display:flex; flex-direction:column; gap:4px; }
.legend-item { display:flex; align-items:center; gap:6px; }
.dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.dot.answered { background:#d4edda; }
.dot.flagged { background:var(--warning); }
.dot.active { background:var(--primary); }

.question-panel { background:var(--card); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); }
.question-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.subject-badge { background:var(--primary); color:white; padding:4px 12px; border-radius:20px; font-size:0.8rem; font-weight:600; }
.flag-btn { background:none; border:1px solid #ddd; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:0.85rem; }
.flag-btn.is-flagged { background:#fff3cd; border-color:var(--warning); }
.question-text { font-size:1.05rem; line-height:1.7; margin-bottom:20px; white-space:pre-wrap; }
.question-svg { margin:16px 0; text-align:center; }
.question-svg svg { max-width:100%; height:auto; }

.options { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.option { display:flex; align-items:flex-start; padding:14px; border:2px solid #e0e0e0; border-radius:var(--radius); cursor:pointer; transition:all 0.2s; }
.option:hover { border-color:var(--primary); background:#f0f4ff; }
.option.selected { border-color:var(--primary); background:#e8edf5; }
.option input[type=radio] { display:none; }
.option-letter { min-width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--primary); color:white; border-radius:50%; font-weight:700; font-size:0.85rem; margin-right:12px; flex-shrink:0; }
.option.selected .option-letter { background:var(--accent); }
.option-text { padding-top:4px; }

.question-actions { display:flex; justify-content:space-between; }

/* Results */
.results-header { text-align:center; margin-bottom:24px; }
.score-summary { text-align:center; background:var(--card); padding:32px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:32px; }
.big-score { margin-bottom:16px; }
.big-number { font-size:4rem; font-weight:800; }
.big-total { font-size:1.5rem; color:var(--text-light); }
.big-percent { display:block; font-size:1.5rem; font-weight:700; margin-top:4px; }
.big-score.score-high .big-number,.big-score.score-high .big-percent { color:var(--success); }
.big-score.score-mid .big-number,.big-score.score-mid .big-percent { color:#e67e22; }
.big-score.score-low .big-number,.big-score.score-low .big-percent { color:var(--danger); }

.subject-breakdown { margin-bottom:32px; }
.subject-grid { display:flex; flex-direction:column; gap:10px; }
.subject-card { background:var(--card); padding:14px 20px; border-radius:var(--radius); box-shadow:var(--shadow); display:grid; grid-template-columns:200px 1fr 100px; align-items:center; gap:16px; }
.subject-name { font-weight:600; font-size:0.9rem; }
.subject-bar-container { height:12px; background:#e0e0e0; border-radius:6px; overflow:hidden; }
.subject-bar { height:100%; border-radius:6px; transition:width 0.5s; }
.bar-high { background:var(--success); }
.bar-mid { background:var(--warning); }
.bar-low { background:var(--danger); }
.subject-score { text-align:right; font-size:0.85rem; }
.subject-percent { font-weight:700; margin-left:8px; }

/* Review */
.review-filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-btn { padding:6px 16px; border:1px solid #ddd; background:white; border-radius:20px; cursor:pointer; font-size:0.85rem; }
.filter-btn.active { background:var(--primary); color:white; border-color:var(--primary); }
.review-list { display:flex; flex-direction:column; gap:12px; }
.review-item { background:var(--card); padding:16px; border-radius:var(--radius); box-shadow:var(--shadow); border-left:4px solid #ddd; }
.item-correct { border-left-color:var(--success); }
.item-wrong { border-left-color:var(--danger); }
.item-unanswered { border-left-color:#aaa; }
.review-q-header { display:flex; gap:12px; align-items:center; margin-bottom:8px; font-size:0.85rem; }
.review-number { font-weight:700; }
.review-subject { background:#f0f0f0; padding:2px 8px; border-radius:4px; }
.review-q-text { margin-bottom:12px; white-space:pre-wrap; }
.review-options { display:flex; flex-direction:column; gap:6px; }
.review-opt { padding:8px 12px; border-radius:6px; display:flex; gap:8px; font-size:0.9rem; }
.review-opt .opt-letter { font-weight:700; min-width:20px; }
.correct-answer { background:#d4edda; font-weight:600; }
.wrong-answer { background:#f8d7da; text-decoration:line-through; }
.review-explanation { margin-top:12px; padding:12px; background:#f8f9fa; border-radius:6px; font-size:0.9rem; color:var(--text-light); }
.results-actions { text-align:center; margin-top:32px; display:flex; gap:16px; justify-content:center; }

/* Admin */
.user-list { display:flex; flex-direction:column; gap:10px; }
.user-card { display:flex; align-items:center; gap:16px; background:var(--card); padding:14px 20px; border-radius:var(--radius); box-shadow:var(--shadow); }
.pending-card { border-left:4px solid var(--warning); }
.user-avatar { width:40px; height:40px; border-radius:50%; }
.user-info-card { flex:1; display:flex; flex-direction:column; }
.user-info-card strong { font-size:0.95rem; }
.user-info-card span { font-size:0.8rem; color:var(--text-light); }
.user-actions { display:flex; gap:8px; }
.alert { padding:12px 20px; border-radius:var(--radius); margin-bottom:16px; }
.alert-success { background:#d4edda; color:#155724; }
.empty-text { color:var(--text-light); font-style:italic; }

/* Footer */
.footer { text-align:center; padding:24px; color:var(--text-light); font-size:0.85rem; margin-top:40px; }
.disclaimer { font-size:0.75rem; margin-top:4px; }

/* Responsive */
@media(max-width:768px) {
    .hero h1 { font-size:1.8rem; }
    .exam-layout { grid-template-columns:1fr; }
    .question-nav { position:static; }
    .question-grid { grid-template-columns:repeat(8,1fr); }
    .subject-card { grid-template-columns:1fr; gap:8px; }
    .exam-header { flex-wrap:wrap; gap:8px; }
}