/* Simulador de Legal Match. Paleta tomada del logotipo del Núcleo TIC Caribe:
   navy #03284f, teal #0686a6, naranja #f89b10, verde #4daf5f. */

:root{
  --navy:#03284f;
  --navy-osc:#021d3b;
  --teal:#0686a6;
  --teal-txt:#0a6f8c;   /* el teal del logo no llega a 4.5:1 sobre blanco */
  --naranja:#f89b10;
  --naranja-txt:#a4660b;
  --verde:#4daf5f;
  --verde-txt:#438440;
  --tinta:#062544;
  --cuerpo:#3d5570;
  --tenue:#5c748c;
  --linea:#dde7ee;
  --fondo:#f2f7fa;
  --radio:12px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--cuerpo);
  font:400 16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--tinta); line-height:1.2; margin:0}
.wrap{max-width:1180px; margin:0 auto; padding-inline:22px}

/* ------------------------------------------------------------ cabecera */
.barra{background:var(--navy); color:#fff; padding-block:14px}
.barra .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.marca{font-weight:800; font-size:19px; letter-spacing:-.01em}
.etiqueta{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#9fc6d8; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:4px 12px;
}

/* --------------------------------------------------------------- intro */
.intro{padding-block:40px 26px; max-width:76ch}
.intro h1{font-size:clamp(25px,3.4vw,34px); margin-bottom:14px}
.intro p{margin:0 0 12px}
.nota{font-size:14.5px; color:var(--tenue)}

/* ------------------------------------------------------------- paneles */
.tablero{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
@media (max-width:900px){ .tablero{grid-template-columns:1fr} }

.panel{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:22px 24px; box-shadow:0 1px 2px rgba(3,40,79,.06);
}
.panel h2{font-size:18px; margin-bottom:14px}
.ayuda{font-size:13.5px; color:var(--tenue); margin:0 0 14px}

label{display:block; margin-bottom:13px; font-size:14px; font-weight:600; color:var(--tinta)}
select{
  display:block; width:100%; margin-top:5px; font:inherit; font-weight:400; font-size:15px;
  padding:9px 11px; border:1px solid var(--linea); border-radius:9px;
  background:#fff; color:var(--tinta);
}
select:focus{outline:2px solid var(--teal); outline-offset:-1px}

fieldset{border:1px solid var(--linea); border-radius:9px; padding:12px 14px; margin:0 0 14px}
legend{font-size:13px; font-weight:700; color:var(--tinta); padding-inline:6px}
.casillas{display:flex; flex-wrap:wrap; gap:8px}
.casillas label{
  display:inline-flex; align-items:center; gap:7px; margin:0; font-weight:400; font-size:13.5px;
  border:1px solid var(--linea); border-radius:999px; padding:5px 12px; cursor:pointer;
  color:var(--cuerpo); background:#fff;
}
.casillas label:has(input:checked){
  border-color:var(--teal); background:#e8f3f8; color:var(--teal-txt); font-weight:600;
}
.casillas input{accent-color:var(--teal)}

/* --------------------------------------------------------------- pesos */
.pesos{display:grid; gap:11px}
.peso{display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center}
.peso b{font-size:14px; color:var(--tinta); font-weight:600}
.peso output{
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--teal-txt);
  font-size:14px; min-width:42px; text-align:right;
}
.peso input[type=range]{grid-column:1 / -1; width:100%; accent-color:var(--teal)}

.acciones{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px}
.pista{font-size:13px; color:var(--tenue)}
.boton-2{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  background:#fff; color:var(--teal-txt); border:1px solid var(--teal);
  border-radius:9px; padding:8px 14px;
}
.boton-2:hover{background:#e8f3f8}

/* ---------------------------------------------------------- resultados */
.resultados{padding-block:36px 50px}
.resultados h2{font-size:21px; margin-bottom:8px}
.lista{list-style:none; margin:0; padding:0; display:grid; gap:12px}

.firma{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:18px 20px; display:grid; grid-template-columns:auto 1fr auto; gap:6px 16px;
  align-items:start;
}
.firma.top{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal)}
.puesto{
  grid-row:1 / span 3; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--fondo); color:var(--tenue); font-weight:800; font-size:15px;
}
.firma.top .puesto{background:var(--teal-txt); color:#fff}
.firma h3{font-size:17px}
.explica{grid-column:2; font-size:14.5px; color:var(--cuerpo); margin:0}
.marcador{grid-row:1 / span 2; text-align:right}
.marcador b{display:block; font-size:26px; color:var(--tinta); line-height:1; font-variant-numeric:tabular-nums}
.marcador span{font-size:11.5px; color:var(--tenue); letter-spacing:.08em; text-transform:uppercase}

.barra-puntaje{grid-column:2 / -1; height:6px; border-radius:99px; background:var(--fondo); overflow:hidden; margin-top:4px}
.barra-puntaje i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--verde))}

details{grid-column:2 / -1; margin-top:10px}
summary{cursor:pointer; font-size:13.5px; color:var(--teal-txt); font-weight:600}
summary:hover{text-decoration:underline}
table{width:100%; border-collapse:collapse; margin-top:10px; font-size:13.5px}
th,td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--linea)}
th{color:var(--tenue); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.si{color:var(--verde-txt); font-weight:700}
.no{color:var(--naranja-txt); font-weight:700}

/* ----------------------------------------------------------------- pie */
.pie{background:var(--navy-osc); color:#93b3c9; padding-block:26px; font-size:13.5px}
.pie .wrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

@media (max-width:620px){
  .firma{grid-template-columns:auto 1fr}
  .marcador{grid-row:auto; grid-column:2; text-align:left; margin-top:6px}
  .explica,.barra-puntaje,details{grid-column:1 / -1}
}