:root{
  --verde:#0d5c63; --verde-osc:#0a474d; --verde-cl:#14b8a6; --verde-suave:#e6f4f4;
  --tinta:#0f172a; --texto:#334155; --tenue:#64748b; --borde:#e2e8f0; --fondo:#f1f5f9;
  --ok:#15803d; --ok-bg:#f0fdf4; --alerta:#b45309; --alerta-bg:#fffbeb;
  --error:#b91c1c; --error-bg:#fef2f2; --info:#1d4ed8; --info-bg:#eff6ff;
  --sombra:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --sombra-md:0 4px 16px rgba(15,23,42,.10);
  --radio:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--texto); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--tinta); margin:0 0 .4em; line-height:1.25}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
a{color:var(--verde)}
.oculto{display:none !important}

/* ---------- Barra superior ---------- */
.barra{background:var(--verde); color:#fff; box-shadow:var(--sombra-md); position:sticky; top:0; z-index:40}
.barra-int{max-width:1220px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.marca{display:flex; flex-direction:column; line-height:1.2}
.marca b{font-size:1.02rem; letter-spacing:.3px}
.marca span{font-size:.72rem; opacity:.8; letter-spacing:1.4px; text-transform:uppercase}
.barra nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.barra nav button{
  background:transparent; border:0; color:#d7ecec; padding:8px 14px; border-radius:8px;
  font:inherit; font-size:.9rem; cursor:pointer; transition:.15s;
}
.barra nav button:hover{background:rgba(255,255,255,.12); color:#fff}
.barra nav button.activo{background:#fff; color:var(--verde); font-weight:600}
.usuario-barra{display:flex; align-items:center; gap:10px; font-size:.85rem; padding-left:14px; border-left:1px solid rgba(255,255,255,.25)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--verde-cl);display:grid;place-items:center;font-weight:700;color:#04333a;font-size:.8rem}

/* ---------- Estructura ---------- */
.envoltorio{max-width:1220px; margin:0 auto; padding:22px 20px 60px}
.tarjeta{background:#fff; border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); padding:20px; margin-bottom:18px}
.tarjeta.compacta{padding:14px 16px}
.cabecera-seccion{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.cabecera-seccion .acciones{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.sub{color:var(--tenue); font-size:.88rem; margin:2px 0 0}
.rejilla{display:grid; gap:16px}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fila{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  background:var(--verde); color:#fff; border:1px solid var(--verde); border-radius:9px;
  padding:9px 16px; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:.15s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--verde-osc); border-color:var(--verde-osc)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.sec{background:#fff; color:var(--verde); border-color:#bcd7d9}
.btn.sec:hover{background:var(--verde-suave)}
.btn.gris{background:#fff; color:var(--texto); border-color:var(--borde)}
.btn.gris:hover{background:#f8fafc}
.btn.peligro{background:var(--error); border-color:var(--error)}
.btn.peligro:hover{background:#991b1b}
.btn.chico{padding:5px 11px; font-size:.8rem; border-radius:7px}
.btn.grande{padding:13px 26px; font-size:1rem; width:100%}
.btn-icono{background:none;border:0;cursor:pointer;color:var(--tenue);font-size:1rem;padding:4px 6px;border-radius:6px}
.btn-icono:hover{background:var(--fondo); color:var(--tinta)}

/* ---------- Formularios ---------- */
label{display:block; font-size:.82rem; font-weight:600; color:var(--tinta); margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],select,textarea{
  width:100%; padding:9px 12px; border:1px solid #cbd5e1; border-radius:9px; font:inherit; font-size:.92rem;
  background:#fff; color:var(--tinta); transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--verde-cl); box-shadow:0 0 0 3px rgba(20,184,166,.18)}
textarea{resize:vertical; min-height:76px}
.campo{margin-bottom:14px}
.ayuda{font-size:.78rem; color:var(--tenue); margin-top:4px}
.check{display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500; color:var(--texto); cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--verde);margin:0}

/* ---------- Tablas ---------- */
.tabla-envoltorio{overflow-x:auto; border:1px solid var(--borde); border-radius:10px}
table{width:100%; border-collapse:collapse; font-size:.88rem; background:#fff}
th{background:#f8fafc; text-align:left; padding:11px 12px; font-size:.75rem; text-transform:uppercase;
   letter-spacing:.6px; color:var(--tenue); border-bottom:1px solid var(--borde); white-space:nowrap}
td{padding:10px 12px; border-bottom:1px solid #f1f5f9; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcfd}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Etiquetas de estado ---------- */
.etq{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.etq.ok{background:var(--ok-bg); color:var(--ok)}
.etq.alerta{background:var(--alerta-bg); color:var(--alerta)}
.etq.error{background:var(--error-bg); color:var(--error)}
.etq.info{background:var(--info-bg); color:var(--info)}
.etq.neutro{background:#f1f5f9; color:var(--tenue)}

/* ---------- Indicadores ---------- */
.kpi{background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:16px 18px; box-shadow:var(--sombra)}
.kpi .valor{font-size:1.9rem; font-weight:700; color:var(--verde); line-height:1.1}
.kpi .etiqueta{font-size:.76rem; text-transform:uppercase; letter-spacing:.7px; color:var(--tenue); margin-top:2px}
.kpi.alerta .valor{color:var(--alerta)} .kpi.error .valor{color:var(--error)} .kpi.ok .valor{color:var(--ok)}

/* ---------- Avisos ---------- */
.aviso{padding:12px 16px; border-radius:10px; font-size:.88rem; margin-bottom:14px; border:1px solid transparent}
.aviso.info{background:var(--info-bg); color:#1e40af; border-color:#bfdbfe}
.aviso.ok{background:var(--ok-bg); color:#166534; border-color:#bbf7d0}
.aviso.alerta{background:var(--alerta-bg); color:#92400e; border-color:#fde68a}
.aviso.error{background:var(--error-bg); color:#991b1b; border-color:#fecaca}

/* ---------- Mensajes flotantes ---------- */
#avisos{position:fixed; top:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:9px; max-width:380px}
.flotante{background:#fff; border-left:4px solid var(--verde); border-radius:10px; box-shadow:var(--sombra-md);
  padding:12px 16px; font-size:.88rem; animation:entrar .22s ease-out}
.flotante.ok{border-color:var(--ok)} .flotante.error{border-color:var(--error)} .flotante.alerta{border-color:var(--alerta)}
@keyframes entrar{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ---------- Ventanas modales ---------- */
.velo{position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:flex-start;
  justify-content:center; padding:32px 16px; z-index:100; overflow-y:auto}
.modal{background:#fff; border-radius:14px; width:100%; max-width:620px; box-shadow:0 20px 50px rgba(15,23,42,.3); animation:subir .2s ease-out}
.modal.ancho{max-width:920px}
.modal-cab{padding:18px 22px; border-bottom:1px solid var(--borde); display:flex; align-items:center; gap:12px}
.modal-cab h3{margin:0; flex:1}
.modal-cuerpo{padding:20px 22px; max-height:66vh; overflow-y:auto}
.modal-pie{padding:14px 22px; border-top:1px solid var(--borde); display:flex; gap:9px; justify-content:flex-end; background:#f8fafc; border-radius:0 0 14px 14px}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Ingreso ---------- */
.pantalla-ingreso{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
.panel-marca{background:linear-gradient(160deg,#0d5c63,#062f33); color:#fff; padding:56px 52px; display:flex; flex-direction:column; justify-content:center}
.panel-marca h1{color:#fff; font-size:2.1rem; margin-bottom:10px}
.panel-marca p{color:#b9dcdd; max-width:440px}
.panel-marca ul{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:14px}
.panel-marca li{display:flex; gap:12px; align-items:flex-start; color:#d7ecec; font-size:.93rem}
.panel-marca li b{display:block; color:#fff; font-size:.95rem}
.panel-marca .punto{width:9px;height:9px;border-radius:50%;background:var(--verde-cl);margin-top:7px;flex:none}
.panel-form{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:#fff}
.caja-form{width:100%; max-width:380px}
@media(max-width:860px){.pantalla-ingreso{grid-template-columns:1fr}.panel-marca{padding:36px 26px}.panel-marca ul{display:none}}

/* ---------- Evaluación ---------- */
.pregunta{border:1px solid var(--borde); border-radius:12px; padding:18px 20px; margin-bottom:14px; background:#fff}
.pregunta.respondida{border-color:#bcd7d9; background:#fbfefe}
.pregunta .numero{font-size:.74rem; font-weight:700; color:var(--verde); letter-spacing:1px; text-transform:uppercase}
.pregunta .enunciado{font-size:1rem; color:var(--tinta); font-weight:600; margin:6px 0 14px}
.alternativa{display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border:1px solid var(--borde);
  border-radius:9px; margin-bottom:8px; cursor:pointer; transition:.13s; background:#fff}
.alternativa:hover{border-color:var(--verde-cl); background:#f6fdfd}
.alternativa input{margin:3px 0 0; accent-color:var(--verde); width:17px; height:17px; flex:none}
.alternativa.marcada{border-color:var(--verde); background:var(--verde-suave)}
.alternativa .letra{font-weight:700; color:var(--verde); flex:none; min-width:18px}
.alternativa.correcta{border-color:var(--ok); background:var(--ok-bg)}
.alternativa.incorrecta{border-color:var(--error); background:var(--error-bg)}
.barra-prueba{position:sticky; top:62px; z-index:30; background:#fff; border:1px solid var(--borde);
  border-radius:12px; padding:12px 18px; margin-bottom:16px; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; box-shadow:var(--sombra)}
.cronometro{font-variant-numeric:tabular-nums; font-weight:700; font-size:1.15rem; color:var(--verde);
  background:var(--verde-suave); padding:5px 14px; border-radius:8px}
.cronometro.urgente{color:#fff; background:var(--error); animation:latido 1s infinite}
@keyframes latido{50%{opacity:.65}}
.progreso{flex:1; min-width:130px; height:8px; background:var(--fondo); border-radius:999px; overflow:hidden}
.progreso i{display:block; height:100%; background:var(--verde-cl); border-radius:999px; transition:width .25s}

/* ---------- Tarjeta de capacitación ---------- */
.cap{border:1px solid var(--borde); border-radius:var(--radio); background:#fff; box-shadow:var(--sombra); overflow:hidden}
.cap-cab{padding:16px 18px; border-bottom:1px solid var(--borde); display:flex; gap:12px; align-items:flex-start}
.cap-cab .codigo{font-size:.72rem; letter-spacing:1.2px; color:var(--tenue); text-transform:uppercase}
.cap-cab h3{margin:2px 0 0}
.cap-cuerpo{padding:16px 18px}
.cap-pie{padding:12px 18px; background:#f8fafc; border-top:1px solid var(--borde); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:12px 0 0}
.datos div{background:#f8fafc; border-radius:9px; padding:9px 11px}
.datos span{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:var(--tenue)}
.datos b{font-size:1rem; color:var(--tinta)}
.nota-grande{font-size:2.6rem; font-weight:800; line-height:1}

/* ---------- Varios ---------- */
.vacio{text-align:center; padding:44px 20px; color:var(--tenue)}
.vacio .icono{font-size:2.4rem; opacity:.4; display:block; margin-bottom:8px}
.cargando{text-align:center; padding:30px; color:var(--tenue); font-size:.9rem}
.pestanas{display:flex; gap:4px; border-bottom:2px solid var(--borde); margin-bottom:18px; overflow-x:auto}
.pestanas button{background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-2px;
  padding:9px 15px; font:inherit; font-size:.9rem; color:var(--tenue); cursor:pointer; white-space:nowrap}
.pestanas button.activo{color:var(--verde); border-color:var(--verde); font-weight:600}
.lista-scroll{max-height:280px; overflow-y:auto; border:1px solid var(--borde); border-radius:10px; padding:6px}
.lista-scroll label{display:flex; gap:9px; align-items:center; padding:6px 9px; border-radius:7px; font-weight:400; margin:0; cursor:pointer}
.lista-scroll label:hover{background:var(--fondo)}
.lista-scroll input{width:16px;height:16px;accent-color:var(--verde);margin:0}
code{background:#f1f5f9; padding:2px 6px; border-radius:5px; font-size:.85em; color:#0f766e}
.mono{font-family:Consolas,"Courier New",monospace}
@media print{.barra,.btn,.pestanas{display:none !important}body{background:#fff}}