/* ARH Laboratorios(R) - estilos compartidos de la evaluacion */
:root{
  --naranja:#FF671F; --amarillo:#FF9E1B; --azul:#407EC9; --rosa:#CE0F69;
  --tinta:#1B1B1F; --gris:#6B7280; --linea:#E7E7EA; --fondo:#FAFAFB;
  --ok:#2E8B57; --alerta:#D9822B; --mal:#C0392B;
  --r:16px; --sombra:0 2px 4px rgba(27,27,31,.04),0 12px 32px rgba(27,27,31,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Kanit',system-ui,sans-serif;background:var(--fondo);color:var(--tinta);
     font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:24px 20px 80px}
.wrap-xl{max-width:1240px;margin:0 auto;padding:24px 20px 80px}

/* ── textura de marca (formas orgánicas tipo microscopía) ── */
.textura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5}
.textura i{position:absolute;border-radius:50%;filter:blur(1px)}

/* ── encabezado ── */
header.arh{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 20px;background:#fff;border-bottom:1px solid var(--linea)}
header.arh .logo{width:150px;color:var(--naranja);display:block}
header.arh .logo svg{width:100%;height:auto;display:block}
header.arh .et{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:500;text-align:right}

/* ── tarjetas ── */
.card{position:relative;z-index:1;background:#fff;border:1px solid var(--linea);border-radius:var(--r);
      padding:28px;box-shadow:var(--sombra);margin-bottom:18px}
.card.tight{padding:20px}
h1{font-weight:700;font-size:clamp(24px,4.4vw,34px);line-height:1.15;letter-spacing:-.02em}
h2{font-weight:600;font-size:20px;margin-bottom:6px;letter-spacing:-.01em}
h3{font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin-bottom:12px}
p.lead{color:var(--gris);font-size:16px}
.mini{font-size:13px;color:var(--gris)}

/* ── botones ── */
.btn{font-family:inherit;font-weight:500;font-size:16px;border:0;border-radius:12px;padding:14px 26px;
     background:var(--naranja);color:#fff;cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(255,103,31,.28)}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(255,103,31,.36)}
.btn:disabled{background:#D8D8DC;color:#fff;box-shadow:none;cursor:not-allowed;transform:none}
.btn.ghost{background:#fff;color:var(--tinta);border:1px solid var(--linea);box-shadow:none}
.btn.ghost:hover{border-color:var(--naranja);color:var(--naranja)}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:10px}

/* ── formularios ── */
label.f{display:block;font-size:13px;font-weight:500;color:var(--gris);margin:14px 0 6px}
input.f,select.f,textarea.f{width:100%;font-family:inherit;font-size:16px;font-weight:300;padding:12px 14px;
  border:1px solid var(--linea);border-radius:11px;background:#fff;color:var(--tinta);outline:none;transition:.15s}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,103,31,.12)}
textarea.f{min-height:110px;resize:vertical;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* ── opciones de respuesta ── */
.op{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border:1.5px solid var(--linea);
    border-radius:13px;margin-bottom:10px;cursor:pointer;background:#fff;transition:.15s;font-size:15.5px}
.op:hover{border-color:var(--naranja);background:#FFF9F5}
.op.sel{border-color:var(--naranja);background:#FFF3EC;box-shadow:0 0 0 3px rgba(255,103,31,.1)}
.op .k{flex:0 0 26px;height:26px;border-radius:8px;background:#F2F2F5;color:var(--gris);
       display:grid;place-items:center;font-weight:600;font-size:13px;transition:.15s}
.op.sel .k{background:var(--naranja);color:#fff}

/* ── barra de progreso ── */
.prog{position:sticky;top:0;z-index:5;background:rgba(250,250,251,.92);backdrop-filter:blur(8px);
      padding:12px 0 14px;margin:-24px -20px 18px;padding-left:20px;padding-right:20px;border-bottom:1px solid var(--linea)}
.bar{height:7px;background:#EDEDF0;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amarillo),var(--naranja));
       border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.progtxt{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--gris);margin-bottom:7px}

/* ── chips ── */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
      font-size:12.5px;font-weight:500;background:#F2F2F5;color:var(--gris)}
.chip.n1{background:#EAF6EE;color:#2E8B57}
.chip.n2{background:#FFF4E5;color:#B26A00}
.chip.n3{background:#FDECEC;color:#B02A20}

/* ── imagen de pregunta ── */
.figura{margin:16px 0 18px;border-radius:14px;overflow:hidden;border:1px solid var(--linea);background:#0E0E12}
.figura img{width:100%;display:block;max-height:420px;object-fit:contain;background:#0E0E12}
.figura svg{width:100%;height:auto;max-height:340px;display:block}
.figura .cap{font-size:11.5px;color:#9A9AA5;padding:8px 12px;background:#15151A}

/* ── temporizador ── */
.timer{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.timer .dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.timer.warn{color:var(--alerta)} .timer.warn .dot{background:var(--alerta);animation:pulse 1s infinite}
.timer.crit{color:var(--mal)} .timer.crit .dot{background:var(--mal);animation:pulse .55s infinite}
@keyframes pulse{50%{opacity:.25}}

/* ── ranking ── */
.rk{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--linea);
    border-radius:13px;margin-bottom:9px;background:#fff;cursor:grab;transition:.15s}
.rk:hover{border-color:var(--naranja)}
.rk.drag{opacity:.35}
.rk .pos{flex:0 0 28px;height:28px;border-radius:9px;background:var(--naranja);color:#fff;
         display:grid;place-items:center;font-weight:600;font-size:13px}
.rk .nom{flex:1;font-weight:400}
.rk .ar{display:flex;flex-direction:column;gap:2px}
.rk .ar button{border:0;background:#F2F2F5;border-radius:6px;width:26px;height:15px;cursor:pointer;
               color:var(--gris);font-size:9px;line-height:1;padding:0}
.rk .ar button:hover{background:var(--naranja);color:#fff}

/* ── escala 1-5 ── */
.esc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea)}
.esc:last-child{border-bottom:0}
.esc .nm{flex:1;font-size:15px}
.esc .bs{display:flex;gap:6px}
.esc .bs button{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--linea);background:#fff;
                font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;color:var(--gris);transition:.14s}
.esc .bs button:hover{border-color:var(--naranja)}
.esc .bs button.on{background:var(--naranja);border-color:var(--naranja);color:#fff}

/* ── varios ── */
.aviso{display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:#FFF4E5;
       border:1px solid #FFE0B2;font-size:14px;color:#8A5A00;margin:14px 0}
.ok-box{text-align:center;padding:48px 28px}
.ok-box .big{font-size:56px;margin-bottom:10px}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.hidden{display:none!important}
.spin{width:22px;height:22px;border:2.5px solid var(--linea);border-top-color:var(--naranja);
      border-radius:50%;animation:sp .7s linear infinite;margin:26px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.pill{padding:4px 11px;border-radius:99px;font-size:12px;font-weight:500}
.pill.v{background:#EAF6EE;color:#2E8B57}.pill.a{background:#FFF4E5;color:#B26A00}
.pill.r{background:#FDECEC;color:#B02A20}.pill.g{background:#F2F2F5;color:#6B7280}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
           color:var(--gris);padding:10px 12px;border-bottom:1.5px solid var(--linea);white-space:nowrap}
table.t td{padding:12px;border-bottom:1px solid var(--linea);vertical-align:middle}
table.t tr:hover td{background:#FFF9F5}