/* Examen de Evaluación Técnica — Hidroil. Paleta e identidad visual heredadas
   de plataforma-supply (fondo oscuro, header con logo, franja roja/dorada/verde). */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#0d1117;color:#e6edf3;min-height:100vh;display:flex;flex-direction:column}

/* HEADER */
.header{background:#161b22;padding:12px 24px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #30363d}
.header-logo{height:48px;width:auto;flex-shrink:0}
.header-text h1{font-size:16px;font-weight:600;color:#e6edf3}
.header-text p{font-size:11px;color:#7d8590;margin-top:3px}
.stripe{display:flex;height:4px;flex-shrink:0}
.s1{flex:1;background:#2e7d32}.s2{flex:1;background:#cc0000}.s3{flex:1;background:#f0b429}

/* LAYOUT */
main{flex:1;display:flex;flex-direction:column;align-items:center;padding:32px 16px}
.card{background:#161b22;border:1px solid #21262d;border-radius:12px;width:100%;max-width:620px;overflow:hidden}
.card-body{padding:28px 30px}
.card h2{font-size:18px;font-weight:700;color:#e6edf3;margin-bottom:8px}
.card .lead{font-size:12px;color:#7d8590;line-height:1.5;margin-bottom:20px}

/* FORM */
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;font-weight:700;color:#7d8590;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.field input{width:100%;padding:11px 13px;background:#0d1117;border:1px solid #30363d;border-radius:8px;color:#e6edf3;font-size:14px;font-family:inherit}
.field input:focus{outline:none;border-color:#f0b429}
.field .err{font-size:11px;color:#ef4444;margin-top:5px;min-height:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;border:none;transition:filter .15s}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:#f0b429;color:#0d1117}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-secondary{background:transparent;border:1px solid #30363d;color:#c9d1d9}
.btn-secondary:hover:not(:disabled){border-color:#484f58}
.btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
.btn-full{width:100%}

/* PROGRESO DEL EXAMEN */
.exam-top{padding:16px 30px 0}
.exam-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:#7d8590;margin-bottom:8px}
.exam-meta b{color:#f0b429}
.progress-track{height:6px;border-radius:3px;background:#0d1117;border:1px solid #21262d;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#cc0000,#f0b429);transition:width .3s ease}
.bloque-tag{font-size:9px;font-weight:700;color:#5b8dee;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}

/* OPCIONES */
.opciones{display:flex;flex-direction:column;gap:10px;margin:18px 0 4px}
.opcion{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid #30363d;border-radius:9px;cursor:pointer;background:#0d1117;transition:border-color .15s,background .15s}
.opcion:hover{border-color:#484f58}
.opcion input{margin-top:2px;accent-color:#f0b429;flex-shrink:0}
.opcion.selected{border-color:#f0b429;background:#13110a}
.opcion .letra{font-weight:700;color:#7d8590;flex-shrink:0}
.opcion.selected .letra{color:#f0b429}
.opcion span.txt{font-size:13px;line-height:1.45;color:#c9d1d9}

/* RESULTADO — pantalla celebratoria al aprobar, más sobria si no se aprueba */
.celebrate-card{position:relative;overflow:hidden}
.celebrate-top{background:linear-gradient(160deg,#161b22 0%,#161b22 68%);padding:44px 30px 26px;text-align:center;border-bottom:1px solid #21262d;transition:background .3s}
body.aprobado .celebrate-top{background:linear-gradient(160deg,#122016 0%,#161b22 68%)}
.brand-logo{height:88px;width:auto;margin-bottom:20px}
.badge-ring{width:88px;height:88px;border-radius:50%;margin:0 auto 20px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(16,185,129,.22),transparent 70%)}
.badge-ring.bad{background:radial-gradient(circle at 50% 40%,rgba(239,68,68,.18),transparent 70%)}
.badge-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #10b981;opacity:.35;animation:pulse 2.2s ease-out infinite}
.badge-ring.bad::before{border-color:#ef4444}
@keyframes pulse{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.badge-check{width:64px;height:64px;border-radius:50%;background:#0a2016;border:2px solid #10b981;display:flex;align-items:center;justify-content:center;font-size:28px;color:#10b981}
.badge-ring.bad .badge-check{background:#1a0000;border-color:#ef4444;color:#ef4444}
.celebrate-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#10b981;margin-bottom:8px}
body:not(.aprobado) .celebrate-eyebrow{color:#ef4444}
.celebrate-title{font-size:22px;font-weight:700;margin:0 0 6px;text-wrap:balance}
.celebrate-sub{font-size:12.5px;color:#7d8590}

.score-block{padding:28px 30px;text-align:center;border-bottom:1px solid #21262d}
.score-num{font-size:52px;font-weight:800;color:#f0b429;line-height:1;letter-spacing:-.01em}
.score-label{font-size:11px;color:#7d8590;margin-top:8px}
.score-bar-track{height:8px;border-radius:5px;background:#0d1117;border:1px solid #21262d;overflow:hidden;margin:16px auto 0;max-width:340px}
.score-bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#cc0000,#f0b429);width:0%}
.score-threshold{font-size:10.5px;color:#5c6672;margin-top:7px}

.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:#21262d}
.stat{background:#0d1117;padding:14px 8px;text-align:center}
.stat b{display:block;font-size:17px;color:#e6edf3}
.stat span{font-size:9px;color:#7d8590;text-transform:uppercase;letter-spacing:.05em}

.celebrate-foot{padding:20px 30px 26px}
.policy-note{text-align:center;font-size:10px;line-height:1.5;color:#5c6672;margin-bottom:10px}
.close-note{text-align:center;font-size:11.5px;color:#7d8590}

/* Confeti y trompetas — solo se disparan al aprobar */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:1px;opacity:0;animation:fall 6.5s cubic-bezier(.35,0,.65,1) forwards}
@keyframes fall{0%{opacity:0;transform:translateY(0) rotate(0deg)}6%{opacity:.9}88%{opacity:.85}100%{opacity:0;transform:translateY(920px) rotate(320deg)}}
.burst{position:fixed;top:0;pointer-events:none;z-index:5;font-size:38px;opacity:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.burst.left{left:0}
.burst.right{right:0}
@keyframes burst-left{0%{opacity:0;transform:translate(-10px,-10px) rotate(-40deg) scale(.6)}12%{opacity:1}70%{opacity:1;transform:translate(220px,180px) rotate(-15deg) scale(1)}100%{opacity:0;transform:translate(260px,230px) rotate(-10deg) scale(.95)}}
@keyframes burst-right{0%{opacity:0;transform:translate(10px,-10px) rotate(40deg) scale(.6)}12%{opacity:1}70%{opacity:1;transform:translate(-220px,180px) rotate(15deg) scale(1)}100%{opacity:0;transform:translate(-260px,230px) rotate(10deg) scale(.95)}}
@media (prefers-reduced-motion: reduce){ .badge-ring::before,.confetti i,.burst{animation:none !important} }

/* ALERTAS */
.banner{padding:12px 15px;border-radius:8px;font-size:12px;line-height:1.5;margin-bottom:18px}
.banner.info{background:rgba(91,141,238,.1);border:1px solid rgba(91,141,238,.25);color:#a9c3f5}
.banner.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ff9b9b}

.spinner{width:16px;height:16px;border:2px solid rgba(13,17,23,.3);border-top-color:#0d1117;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.footer-note{text-align:center;font-size:10px;color:#484f58;padding:16px}

/* ADMIN */
.admin-wrap{width:100%;max-width:1180px}
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.admin-head h2{font-size:19px;font-weight:700}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#21262d;border:1px solid #21262d;border-radius:10px;overflow:hidden;margin-bottom:20px}
.kpi{background:#161b22;padding:14px 16px}
.kpi b{display:block;font-size:22px;color:#e6edf3}
.kpi span{font-size:10px;color:#7d8590;text-transform:uppercase;letter-spacing:.05em}
table.admin-table{width:100%;border-collapse:collapse;font-size:12px;background:#161b22;border:1px solid #21262d;border-radius:10px;overflow:hidden}
table.admin-table th{padding:9px 12px;font-size:9px;font-weight:700;color:#7d8590;text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid #30363d;background:#0d1117}
table.admin-table td{padding:9px 12px;border-bottom:1px solid #21262d;color:#c9d1d9;vertical-align:top}
table.admin-table tr:last-child td{border-bottom:none}
table.admin-table tr:hover td{background:#1c2230}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700}
.pill.ok{background:#0a2016;color:#10b981;border:1px solid #1a4a2a}
.pill.bad{background:#1a0000;color:#ef4444;border:1px solid #3a0000}
.attempt-list{display:flex;flex-direction:column;gap:4px}
.attempt-row{display:flex;align-items:center;gap:8px;font-size:11px;color:#7d8590}
.attempt-row b{color:#e6edf3}
.wrong-q{font-size:11px;color:#f0b429;margin-top:3px;cursor:pointer}
.wrong-list{display:none;margin-top:8px;padding:10px 12px;background:#0d1117;border:1px solid #21262d;border-radius:8px;font-size:11px;color:#c9d1d9;line-height:1.6}
.wrong-list.show{display:block}
.wrong-list li{margin-bottom:6px}
.wrong-list li b{color:#7d8590;font-weight:600}
.admin-search{padding:9px 13px;background:#0d1117;border:1px solid #30363d;border-radius:8px;color:#e6edf3;font-size:12px;font-family:inherit;min-width:220px}
.admin-search:focus{outline:none;border-color:#f0b429}
.empty-state{text-align:center;padding:40px;color:#7d8590;font-size:12px}

@media(max-width:640px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .card-body{padding:22px 18px}
  table.admin-table{font-size:11px}
}