:root{
  --tinta:#16302f; --tinta-suave:#4a6663; --linea:#dbe6e4; --fondo:#f4f8f7;
  --papel:#ffffff; --acento:#0f7a70; --acento-claro:#e3f3f0; --acento-oscuro:#0a5b53;
  --alerta:#a14a12; --alerta-claro:#fdf0e6; --error:#a6212b; --sombra:0 1px 2px rgba(22,48,47,.06),0 6px 20px rgba(22,48,47,.06);
  --radio:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--acento-oscuro)}
.envoltura{max-width:1080px;margin:0 auto;padding:0 18px}
.estrecho{max-width:720px}

/* cabecera */
.cabecera{background:var(--papel);border-bottom:1px solid var(--linea)}
.cabecera .envoltura{padding-top:22px;padding-bottom:22px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.marca .icono{width:42px;height:42px;border-radius:12px;background:var(--acento);color:#fff;
  display:grid;place-items:center;font-size:21px;flex:none}
.marca h1{margin:0;font-size:1.22rem;line-height:1.25}
.marca p{margin:2px 0 0;font-size:.85rem;color:var(--tinta-suave)}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.nav a{font-size:.88rem;text-decoration:none;color:var(--tinta-suave);background:var(--fondo);
  border:1px solid var(--linea);border-radius:999px;padding:7px 14px}
.nav a:hover{border-color:var(--acento);color:var(--acento-oscuro)}
.nav a.activo{background:var(--acento);border-color:var(--acento);color:#fff}

/* bloques */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:20px;box-shadow:var(--sombra);margin-bottom:16px}
.tarjeta h2{margin:0 0 4px;font-size:1.05rem}
.tarjeta h2+p.pista{margin-top:0}
.pista{color:var(--tinta-suave);font-size:.88rem;margin:6px 0 0}
/* Solo vertical: si usáramos "padding:26px 0" pisaríamos el margen lateral de .envoltura
   y en celular las tarjetas quedarían pegadas al borde de la pantalla. */
.seccion{padding-top:26px;padding-bottom:26px}

/* filtros */
.buscador{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.buscador input[type=search]{flex:1;min-width:240px}
label{display:block;font-weight:600;font-size:.85rem;margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;
  font:inherit;color:inherit;background:var(--papel)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)}
textarea{min-height:88px;resize:vertical}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.campo{margin-bottom:14px}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linea);background:var(--papel);
  border-radius:999px;padding:7px 14px;cursor:pointer;font-size:.88rem;user-select:none}
.opcion input{width:auto;margin:0;accent-color:var(--acento)}
.opcion:has(input:checked){background:var(--acento-claro);border-color:var(--acento);color:var(--acento-oscuro);font-weight:600}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acento);color:#fff;
  border:1px solid var(--acento);border-radius:10px;padding:12px 20px;font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.boton:hover{background:var(--acento-oscuro);border-color:var(--acento-oscuro)}
.boton.secundario{background:var(--papel);color:var(--acento-oscuro);border-color:var(--linea);box-shadow:none}
.boton.secundario:hover{border-color:var(--acento);background:var(--acento-claro)}
.boton.peligro{background:var(--papel);color:var(--error);border-color:#eccfd2;box-shadow:none}
.boton.peligro:hover{background:#fdf1f2}
.boton.chico{padding:8px 14px;font-size:.85rem}
.boton[disabled]{opacity:.55;cursor:progress}
.botonera{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* fichas */
.lista{display:grid;gap:14px}
.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;box-shadow:var(--sombra)}
.ficha h3{margin:0 0 2px;font-size:1.08rem}
.ficha .quien{color:var(--tinta-suave);font-size:.92rem;margin:0 0 8px}
.ficha .donde{margin:0 0 10px;font-size:.94rem}
.ficha .donde .distrito{font-weight:600}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.eti{font-size:.78rem;background:var(--fondo);border:1px solid var(--linea);border-radius:999px;padding:3px 10px;color:var(--tinta-suave)}
.eti.fuerte{background:var(--acento-claro);border-color:#bfe0da;color:var(--acento-oscuro);font-weight:600}
.sello{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 10px;vertical-align:middle}
.sello.ok{background:var(--acento-claro);color:var(--acento-oscuro)}
.sello.pend{background:var(--alerta-claro);color:var(--alerta)}
.contactos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pie-ficha{margin-top:12px;padding-top:10px;border-top:1px dashed var(--linea);display:flex;
  justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--tinta-suave)}
.pie-ficha a{color:var(--tinta-suave)}

/* avisos */
.aviso{border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:.93rem;border:1px solid}
.aviso.info{background:var(--acento-claro);border-color:#bfe0da;color:var(--acento-oscuro)}
.aviso.ojo{background:var(--alerta-claro);border-color:#f0d5bc;color:var(--alerta)}
.aviso.mal{background:#fdf1f2;border-color:#eccfd2;color:var(--error)}
.aviso strong{display:block;margin-bottom:2px}

/* código */
.codigo-grande{font-family:"Consolas",ui-monospace,monospace;font-size:2rem;font-weight:700;letter-spacing:.12em;
  background:var(--acento-claro);color:var(--acento-oscuro);border:2px dashed var(--acento);
  border-radius:12px;padding:16px 22px;text-align:center;margin:14px 0}

/* asistente paso a paso */
.pasos-barra{height:6px;background:var(--linea);border-radius:999px;overflow:hidden}
.pasos-barra>div{height:100%;background:var(--acento);border-radius:999px;transition:width .25s ease}
#tarjeta_paso h2{font-size:1.3rem;line-height:1.3;margin-bottom:6px}
.opciones.grandes{gap:10px}
.opcion.grande{padding:13px 18px;font-size:.98rem;border-width:2px}
.opcion.grande .cuenta{font-size:.75rem;color:var(--tinta-suave);background:var(--fondo);
  border-radius:999px;padding:1px 8px;margin-left:2px}
.opcion.grande:has(input:checked) .cuenta{background:#fff}
.opcion.sin{border-style:dashed;color:var(--tinta-suave)}
/* La barra de acción va pegada abajo de la pantalla. Con listas largas (los 40 distritos
   de Lima) el botón "Continuar" quedaba fuera de la vista y la gente creía que se había
   trabado. Así siempre se ve la salida, sin importar cuánto haya que desplazarse. */
.pie-asistente{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:4px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:var(--fondo);border-top:1px solid var(--linea)}
.pie-asistente .boton{flex:none}
.pie-asistente .pista{flex:1;text-align:center;min-width:140px}
.boton.resaltado{box-shadow:0 0 0 4px var(--acento-claro);}
@media(max-width:560px){
  .pie-asistente{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .pie-asistente .boton{width:100%}
  .pie-asistente .pista{order:3;margin-bottom:2px}
  /* En celular apretamos lo de arriba para que entren todas las opciones sin desplazarse. */
  .cabecera .envoltura{padding-top:12px;padding-bottom:12px}
  .cabecera .marca p{display:none}
  .cabecera .marca h1{font-size:1.02rem}
  .cabecera .marca .icono{width:34px;height:34px;font-size:17px;border-radius:10px}
  .cabecera .nav{margin-top:9px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cabecera .nav::-webkit-scrollbar{display:none}
  .cabecera .nav a{padding:5px 11px;font-size:.8rem;white-space:nowrap}
  .seccion{padding-top:14px}
  #tarjeta_paso{padding:15px}
  #tarjeta_paso h2{font-size:1.12rem}
  /* Dos por fila: con una sola columna las listas de 7 opciones no cabían en pantalla. */
  .opciones.grandes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .opcion.grande{padding:11px 12px;font-size:.9rem;gap:5px}
  .opcion.grande>span:first-of-type{flex:1}
}
/* Qué de lo pedido sí tiene el centro y qué no. Va explícito para que nadie
   suponga que todos ofrecen todo lo que marcó. */
.cotejo{margin:10px 0 0;font-size:.85rem;display:flex;flex-direction:column;gap:2px}
.cotejo .si{color:var(--acento-oscuro);font-weight:600}
.cotejo .no{color:var(--alerta)}

.eti.quitar{cursor:pointer;font-family:inherit;font-size:.8rem}
.eti.quitar:hover{background:#fff;border-color:var(--acento)}

.vacio{text-align:center;padding:48px 20px;color:var(--tinta-suave)}
.pie{border-top:1px solid var(--linea);background:var(--papel);margin-top:36px;padding:26px 0;font-size:.86rem;color:var(--tinta-suave)}
.oculto{display:none!important}
.cargando{text-align:center;padding:40px;color:var(--tinta-suave)}
.contador{background:var(--error);color:#fff;border-radius:999px;padding:1px 8px;font-size:.78rem;font-weight:700;margin-left:6px}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th,.tabla td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-suave)}
.comparar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.comparar{grid-template-columns:1fr}}