:root{--icep-navy:#003366;--icep-blue:#0057B8;--icep-cyan:#00A3E0;--icep-green:#28A745;--icep-gray:#F4F6F8;--icep-dark:#1F2937}
*{box-sizing:border-box}body{margin:0;font-family:'Segoe UI',Tahoma,sans-serif;background:var(--icep-gray);color:var(--icep-dark)}
[hidden]{display:none!important}
header.top{background:var(--icep-navy);color:#fff;padding:14px 28px;display:flex;justify-content:space-between;align-items:center}
header.top b{font-size:20px;letter-spacing:.5px}header.top a{color:#cfe6ff;text-decoration:none;font-size:14px}
main{max-width:1100px;margin:28px auto;padding:0 16px}
.card{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(0,51,102,.08);padding:24px;margin-bottom:20px}
h1,h2,h3{color:var(--icep-navy);margin-top:0}
.hero{background:linear-gradient(135deg,var(--icep-navy),var(--icep-blue) 60%,var(--icep-cyan));color:#fff;text-align:center;padding:56px 16px}
.hero h1{color:#fff;font-size:34px;margin:0 0 8px}.hero p{opacity:.9;margin:0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
a.role{display:block;text-decoration:none;color:inherit;text-align:center;padding:36px 20px;transition:.2s}
a.role:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,87,184,.18)}a.role .ic{font-size:44px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
input{width:100%;padding:11px 12px;border:1px solid #cdd5df;border-radius:8px;font:inherit}
input:focus{outline:2px solid var(--icep-cyan);border-color:var(--icep-cyan)}
.btn{background:var(--icep-blue);color:#fff;border:0;padding:11px 20px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--icep-navy)}.btn.g{background:var(--icep-green)}.btn.r{background:#c0392b}.btn.o{background:#fff;color:var(--icep-blue);border:1px solid var(--icep-blue)}
.btn:disabled{opacity:.4;cursor:not-allowed}.btn.s{padding:6px 10px;font-size:12px;margin:2px}
.form{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
.kpi{border-left:5px solid var(--icep-blue)}.kpi b{font-size:32px;color:var(--icep-navy);display:block}
.tbl{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--icep-gray);text-align:left;padding:10px;color:var(--icep-navy)}td{padding:10px;border-bottom:1px solid #e5e9ee}
.badge{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;background:#8a94a3}
.badge.Completado{background:var(--icep-green)}.badge.En\ progreso{background:var(--icep-cyan)}.badge.Pendiente{background:#e0a100}
.opts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0}
.opt{width:64px;height:64px;border-radius:50%;border:2px solid var(--icep-blue);background:#fff;font-size:22px;font-weight:700;color:var(--icep-blue);cursor:pointer}
.opt.on,.opt:hover{background:var(--icep-blue);color:#fff}
.bar{height:10px;background:#dde4ec;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--icep-blue),var(--icep-cyan));transition:.3s}
.q{font-size:24px;text-align:center;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--icep-navy)}
.nav{display:flex;justify-content:space-between}
.wrap{overflow-x:auto;padding:10px}
.page{width:794px;height:1123px;margin:0 auto 24px;background:#fff;padding:56px;box-shadow:0 4px 18px rgba(0,0,0,.12);position:relative;overflow:hidden}
.page h2{border-bottom:3px solid var(--icep-cyan);padding-bottom:8px}
.cover{background:linear-gradient(160deg,var(--icep-navy),var(--icep-blue));color:#fff;display:flex;flex-direction:column;justify-content:center}
.cover h1{color:#fff;font-size:40px}.cover .pf{font-size:34px;color:var(--icep-cyan);font-weight:700;margin:24px 0}
.dim{margin:18px 0}.dim .bar{height:16px}.pill{display:inline-block;background:var(--icep-gray);border-radius:8px;padding:8px 14px;margin:4px 6px 4px 0}
.pg li{margin:10px 0;line-height:1.5}
@media(max-width:700px){.q{font-size:19px}.opt{width:52px;height:52px}header.top{padding:12px}}
/* Diseño centrado */
body{min-height:100vh}
header.top{flex-direction:column;gap:6px;text-align:center;padding:18px 16px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
header.top b{font-size:24px}
main{display:flex;flex-direction:column;align-items:stretch}
main.wide{max-width:1400px}
.card{text-align:center}.card h2{font-size:22px;margin-bottom:16px}
.card ul{display:inline-block;text-align:left}
.kpi{border-left:0;border-top:5px solid var(--icep-blue)}.kpi b{font-size:38px;margin-bottom:4px}
.grid{justify-items:stretch}
.form label{text-align:center}.form input{text-align:center}
#search{max-width:520px;display:block;margin:0 auto 18px;text-align:center}
th,td{text-align:center;vertical-align:middle}
tbody tr:hover{background:#f7fafd}
.btn{border-radius:10px;transition:.15s}.btn:hover{transform:translateY(-1px)}
.sc{display:inline-block;background:var(--icep-gray);border-radius:6px;padding:2px 7px;margin:1px;font-size:12px;font-weight:600;color:var(--icep-navy)}
.prog{min-width:90px}.prog .bar{height:8px;margin-top:4px}
.page{text-align:left}
.hero{padding:72px 16px}.hero h1{font-size:40px}
a.role{padding:44px 20px}a.role h2{margin-bottom:8px}
@media(max-width:700px){.hero h1{font-size:28px}}
.modal{position:fixed;inset:0;background:rgba(0,30,60,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal .box{max-width:460px;width:100%;margin:0}
.bigcode{font-size:34px;font-weight:700;letter-spacing:3px;color:var(--icep-navy);background:var(--icep-gray);border:2px dashed var(--icep-cyan);border-radius:12px;padding:14px;margin-bottom:18px}
.tests{text-align:left;display:inline-block}.tests label{font-weight:400;margin:2px 0;white-space:nowrap}.tests input{width:auto;margin-right:6px}
.tt{display:block;text-align:left;font-weight:400;white-space:nowrap;margin:2px 0;font-size:12px}.tt input{width:auto;margin-right:4px}
/* Versión móvil */
@media(max-width:800px){
 body{font-size:16px}main{padding:0 10px;margin:14px auto}
 input,button{font-size:16px}.btn{min-height:44px}.btn.s{min-height:40px;padding:8px 12px}
 .card{padding:16px}.hero{padding:44px 14px}
 main.wide .grid{grid-template-columns:repeat(2,1fr);gap:12px}.kpi b{font-size:30px}
 .tbl table,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl thead{display:none}
 .tbl tr{background:#fff;border:1px solid #e1e7ee;border-radius:12px;margin-bottom:12px;padding:6px 12px;box-shadow:0 2px 8px rgba(0,51,102,.06)}
 .tbl td{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;border:0;border-bottom:1px solid #f0f3f6;padding:9px 0;word-break:break-word}
 .tbl td:before{font-weight:700;color:var(--icep-navy);text-align:left;flex:0 0 36%}
 .tbl td:nth-child(1):before{content:'Nombre'}.tbl td:nth-child(2):before{content:'Correo'}.tbl td:nth-child(3):before{content:'Empresa'}.tbl td:nth-child(4):before{content:'Vacante'}.tbl td:nth-child(5):before{content:'Fecha'}.tbl td:nth-child(6):before{content:'Código'}.tbl td:nth-child(7):before{content:'Pruebas'}.tbl td:nth-child(8):before{content:'Estado'}.tbl td:nth-child(9):before{content:'Avance'}.tbl td:nth-child(10):before{content:'Puntuaciones'}.tbl td:nth-child(11):before{content:'Perfil'}.tbl td:nth-child(12):before{content:none}
 .tbl td.empty:before{content:none}.tbl td:last-child{flex-wrap:wrap;justify-content:center;border:0}
 .prog{min-width:0}.prog .bar{width:90px}
 .opts{gap:8px}.opt{width:56px;height:56px}.q{font-size:20px;min-height:110px}
 .nav .btn{flex:1;margin:0 4px}.bigcode{font-size:26px}
 #search{max-width:100%}
}