:root{
  --tinta:#1c1f24; --suave:#5b6470; --linea:#e3e6ea; --fondo:#fbfcfd;
  --papel:#ffffff; --verde:#2e7d32; --verdefondo:#eaf5ec;
  --rojo:#c62828; --rojofondo:#fbeaea;
  --gris:#78848f; --grisfondo:#eef1f4;
  --azul:#1565c0; --avisofondo:#fff8ec; --aviso:#b26a00;
  --ancho:min(920px, 100% - 2.4rem);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.envoltorio{width:var(--ancho); margin-inline:auto}

header.principal{background:linear-gradient(160deg,#12213a,#1f3b63); color:#fff;
  padding:2.6rem 0 2.2rem}
header.principal .expediente{font-size:3rem; letter-spacing:.16em; text-transform:uppercase;
  color:#9fc4f0; margin:0 0 .1rem}
header.principal .slogan{font-size:1rem; letter-spacing:.10em;
  color:#9fc4f0; margin:0 0 .6rem}
header.principal h1{font-size:1.7rem; line-height:1.3; margin:0 0 .5rem; font-weight:650}
header.principal .sub{color:#c9dcf3; margin:0; font-size:.98rem; max-width:70ch}

main{padding:2rem 0 4rem}
section{margin-bottom:1.6rem}

.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:12px;
  padding:1.3rem 1.4rem}
h2{font-size:1.05rem; margin:0 0 .9rem}
h3{font-size:.95rem; margin:1.1rem 0 .5rem}

/* ---- estado de carga ---- */
#estado{display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--suave)}
#estado .punto{width:.6rem; height:.6rem; border-radius:50%; background:var(--gris);
  flex:none}
#estado.cargando .punto{background:var(--azul); animation:parpadeo 1.1s infinite}
#estado.listo .punto{background:var(--verde)}
#estado.error{color:var(--rojo)}
#estado.error .punto{background:var(--rojo)}
@keyframes parpadeo{50%{opacity:.25}}
.ayuda-servidor{display:none; margin-top:.7rem; font-size:.85rem; color:var(--suave)}
.ayuda-servidor code{background:var(--grisfondo); padding:.1rem .4rem; border-radius:5px}
#estado.error + .ayuda-servidor{display:block}

/* ---- flujo en cascada ---- */
fieldset{border:none; padding:0; margin:0 0 1.1rem}
legend{font-weight:600; font-size:.92rem; margin-bottom:.5rem; padding:0}
.opciones{display:flex; flex-wrap:wrap; gap:.5rem}
.opciones label{
  border:1px solid var(--linea); border-radius:9px; padding:.55rem .9rem;
  cursor:pointer; font-size:.9rem; user-select:none; background:var(--papel);
}
.opciones input{margin-right:.4rem}
.opciones label:has(input:checked){border-color:var(--azul); background:#eef4fc; font-weight:600}
.opciones label.deshabilitada{opacity:.45; cursor:not-allowed}
.opciones label.deshabilitada input{pointer-events:none}

.mensaje-no-soportado{
  background:var(--avisofondo); border:1px solid #f0d9ae; color:var(--aviso);
  border-radius:9px; padding:.7rem .9rem; font-size:.88rem; margin-top:.4rem;
}

.campo{margin-bottom:.85rem}
.campo label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.3rem}
.campo .pista{font-size:.78rem; color:var(--suave); font-weight:400; margin-left:.3rem}
.campo input{
  width:100%; padding:.55rem .7rem; border:1px solid var(--linea); border-radius:8px;
  font-size:.92rem; background:var(--fondo); color:var(--tinta);
}
.campo input:focus{outline:2px solid var(--azul); outline-offset:1px}
.rejilla-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 1rem}

button.evaluar{
  background:var(--azul); color:#fff; border:none; border-radius:9px;
  padding:.75rem 1.4rem; font-size:.95rem; font-weight:600; cursor:pointer;
  margin-top:.4rem;
}
button.evaluar:disabled{background:var(--gris); cursor:not-allowed}
button.evaluar:not(:disabled):hover{background:#0e4a94}

/* ---- leyenda ---- */
.leyenda{display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.83rem; color:var(--suave)}
.leyenda .grupo{display:flex; flex-direction:column; gap:.35rem}
.leyenda .grupo strong{color:var(--tinta); font-size:.8rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem;
  border-radius:999px; font-size:.78rem; font-weight:700; white-space:nowrap}
.badge.PASA{background:var(--verdefondo); color:var(--verde)}
.badge.FALLA{background:var(--rojofondo); color:var(--rojo)}
.badge.DESCONOCIDA{background:var(--grisfondo); color:var(--gris)}
.badge.veredicto-excluida{background:var(--rojofondo); color:var(--rojo)}
.badge.veredicto-no-excluida{background:var(--verdefondo); color:var(--verde)}
.badge.veredicto-no-evaluable{background:var(--avisofondo); color:var(--aviso)}

.confianza{display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem;
  border-radius:999px; font-size:.72rem; font-weight:600; border:1px solid transparent}
.confianza.validada{background:#eaf2fb; color:var(--azul); border-color:#bcd7f5}
.confianza.analogia{background:var(--avisofondo); color:var(--aviso); border-color:#f0d9ae}
.confianza.sinfisica{background:var(--grisfondo); color:var(--gris); border-color:var(--linea)}

/* ---- resultados ---- */
.ruta{border:1px solid var(--linea); border-radius:11px; padding:1rem 1.1rem; margin-bottom:.9rem}
.ruta .cabeza{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem; margin-bottom:.7rem}
.ruta .cabeza h3{margin:0; font-size:.96rem}
.compuerta{border-top:1px solid var(--linea); padding:.65rem 0}
.compuerta:first-of-type{border-top:none}
.compuerta .fila-1{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.4rem .6rem}
.compuerta .nombre{font-weight:600; font-size:.9rem}
.compuerta .badges{display:flex; gap:.4rem; align-items:center}
.compuerta .datos{font-size:.82rem; color:var(--suave); margin-top:.3rem}
.compuerta .motivo{font-size:.83rem; color:var(--tinta); margin-top:.35rem; line-height:1.5}
.compuerta .advertencia{font-size:.8rem; color:var(--aviso); margin-top:.3rem; line-height:1.5}
.compuerta .fuente{font-size:.76rem; color:var(--suave); margin-top:.25rem; font-style:italic}

.disclaimer{font-size:.8rem; color:var(--suave); border-top:1px solid var(--linea);
  padding-top:.9rem; margin-top:1rem; line-height:1.55}

#resultados{scroll-margin-top:1rem}

/* ---- qué investigar ---- */
.grupo-que-investigar{margin-top:1rem}
.grupo-que-investigar h3{font-size:.9rem; margin:0 0 .5rem}
.grupo-que-investigar.abierto h3{color:var(--azul)}
.grupo-que-investigar.agotado h3{color:var(--gris)}
.item-que-investigar{border-top:1px solid var(--linea); padding:.6rem 0}
.item-que-investigar:first-of-type{border-top:none}
.item-que-investigar .nombre{font-weight:600; font-size:.88rem}
.item-que-investigar .texto{font-size:.83rem; color:var(--tinta); margin-top:.3rem; line-height:1.5}
.grupo-que-investigar.agotado .item-que-investigar .texto{color:var(--suave)}

.oculto{display:none !important}

.boton-menu{position:fixed; top:1rem; left:1rem; z-index:20; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:40px; height:40px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  border-radius:9px; cursor:pointer; padding:0}
.boton-menu span{display:block; width:18px; height:2px; background:#fff}


.barra-lateral{position:fixed; top:0; left:0; height:100%; width:260px;
  background:var(--papel); border-right:1px solid var(--linea);
  transform:translateX(-100%); transition:transform .25s ease;
  z-index:19; padding:4rem 1rem 1rem}
.barra-lateral.abierta{transform:translateX(0)}

.fondo-barra{position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:18}
.fondo-barra.visible{opacity:1; pointer-events:auto}

.enlace-barra{display:block; padding:.6rem .4rem; color:var(--tinta);
  text-decoration:none; border-radius:8px}
.enlace-barra:hover{background:var(--grisfondo)}
.enlace-barra.activo{background:var(--grisfondo); font-weight:600}