/* =========================================================================
   Confirmado — estilos
   Diseño móvil-first. Sin dependencias externas (carga aunque el internet falle).
   ========================================================================= */

:root{
  --tinta:#10243e;        /* azul profundo, texto y estructura */
  --tinta-2:#33506e;
  --papel:#f7f8fa;        /* fondo */
  --tarjeta:#ffffff;
  --linea:#e3e7ec;
  --suave:#6b7c91;

  /* Semáforo de confianza (el elemento de firma) */
  --sin:#9aa6b2;          /* gris  — sin verificar */
  --ambar:#d98a00;        /* ámbar — 1-2 confirman */
  --verde:#1f9d57;        /* verde — verificado comunidad */
  --azul:#1564c0;         /* azul  — oficial */
  --disputa:#c23b3b;      /* rojo  — en disputa */

  --busca:#c23b3b;        /* estado: se busca */
  --salvo:#1f9d57;        /* estado: a salvo */
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--papel); color:var(--tinta); font-size:16px; line-height:1.5;
}
a{ color:var(--azul); text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:620px; margin:0 auto; padding:0 14px 56px; }

/* ---------- Encabezado ---------- */
.cab{ text-align:center; padding:22px 0 12px; }
.cab .marca{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.cab .marca .punto{ color:var(--verde); }
.cab .lema{ font-size:.85rem; color:var(--suave); margin-top:2px; }

/* ---------- Buscador ---------- */
.buscador{ position:relative; margin:14px 0 6px; }
.buscador input{
  width:100%; padding:15px 16px 15px 44px; font-size:1.05rem;
  border:2px solid var(--linea); border-radius:13px; background:#fff; color:var(--tinta);
}
.buscador input:focus{ outline:none; border-color:var(--azul); }
.buscador .lupa{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--suave); font-size:1.1rem; }

/* ---------- Filtros ---------- */
.filtros{ display:flex; gap:7px; overflow-x:auto; padding:8px 0 4px; -ms-overflow-style:none; scrollbar-width:none; }
.filtros::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; padding:7px 13px; border-radius:20px; border:1px solid var(--linea);
  background:#fff; color:var(--tinta-2); font-size:.82rem; cursor:pointer; white-space:nowrap;
}
.chip.on{ background:var(--tinta); color:#fff; border-color:var(--tinta); }

/* ---------- Sello de confianza (FIRMA) ---------- */
.sello{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700;
  padding:3px 9px 3px 7px; border-radius:20px; line-height:1; white-space:nowrap;
}
.sello .pip{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.sello.sin{ background:#eef1f4; color:#5d6b79; } .sello.sin .pip{ background:var(--sin); }
.sello.ambar{ background:#fdf2dd; color:#8a5a00; } .sello.ambar .pip{ background:var(--ambar); }
.sello.verde{ background:#e3f5ea; color:#137a41; } .sello.verde .pip{ background:var(--verde); }
.sello.oficial{ background:#e3eefb; color:#0f4d99; } .sello.oficial .pip{ background:var(--azul); }
.sello.disputa{ background:#fbe6e6; color:#9c2a2a; } .sello.disputa .pip{ background:var(--disputa); }

/* ---------- Tarjeta de persona ---------- */
.lista{ margin-top:8px; }
.persona{
  display:flex; gap:12px; background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:14px; padding:12px; margin-bottom:9px; align-items:flex-start;
}
.persona .foto{
  width:62px; height:62px; border-radius:11px; object-fit:cover; flex:0 0 auto;
  background:#eef1f4 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="%23b4bec9" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z"/></svg>') center/30px no-repeat;
}
.persona .cuerpo{ flex:1; min-width:0; }
.persona .top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.persona .nom{ font-weight:700; font-size:1.02rem; }
.persona .meta{ font-size:.82rem; color:var(--suave); margin-top:2px; }
.persona .estado{ font-size:.74rem; font-weight:700; margin-top:6px; display:inline-block; }
.estado.buscando{ color:var(--busca); }
.estado.a_salvo{ color:var(--salvo); }
.estado.visto{ color:var(--ambar); }
.estado.fallecido{ color:var(--suave); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 16px; border-radius:11px; font-size:.95rem; font-weight:600;
  border:1px solid var(--linea); background:#fff; color:var(--tinta); cursor:pointer; width:100%;
}
.btn.primario{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
.btn.verde{ background:var(--verde); color:#fff; border-color:var(--verde); }
.btn.rojo{ background:#fff; color:var(--disputa); border-color:#e7bcbc; }
.btn-fila{ display:flex; gap:9px; margin-top:10px; }

/* ---------- Botón flotante "Reportar" ---------- */
.flotante{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:30;
  background:var(--tinta); color:#fff; padding:13px 22px; border-radius:30px; font-weight:700;
  box-shadow:0 6px 22px rgba(16,36,62,.28); border:none; font-size:.95rem;
}

/* ---------- Ficha individual ---------- */
.volver{ display:inline-block; color:var(--suave); font-size:.85rem; padding:14px 0 6px; }
.ficha-cab{ background:#fff; border:1px solid var(--linea); border-radius:16px; padding:16px; margin-bottom:14px; }
.ficha-cab .fila{ display:flex; gap:14px; }
.ficha-cab .foto-g{ width:92px; height:92px; border-radius:13px; object-fit:cover; flex:0 0 auto; background:#eef1f4; }
.ficha-cab h1{ font-size:1.3rem; line-height:1.2; }
.ficha-cab .meta{ color:var(--suave); font-size:.88rem; margin-top:4px; }
.dato{ font-size:.9rem; margin-top:5px; }
.dato b{ color:var(--tinta-2); }

.bloque{ background:#fff; border:1px solid var(--linea); border-radius:16px; padding:16px; margin-bottom:14px; }
.bloque h2{ font-size:1.02rem; margin-bottom:4px; }
.bloque .sub{ font-size:.82rem; color:var(--suave); margin-bottom:12px; }

/* ---------- Línea de tiempo de avistamientos ---------- */
.timeline{ list-style:none; }
.timeline li{ position:relative; padding:0 0 16px 22px; border-left:2px solid var(--linea); }
.timeline li:last-child{ border-left-color:transparent; padding-bottom:0; }
.timeline li:before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--sin); }
.timeline li.confirma:before{ border-color:var(--verde); }
.timeline li.contradice:before{ border-color:var(--disputa); }
.timeline li.dato:before{ border-color:var(--azul); }
.timeline li.oficial:before{ background:var(--azul); border-color:var(--azul); }
.tl-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tl-tipo{ font-size:.74rem; font-weight:700; padding:2px 8px; border-radius:6px; }
.tl-tipo.confirma{ background:#e3f5ea; color:#137a41; }
.tl-tipo.contradice{ background:#fbe6e6; color:#9c2a2a; }
.tl-tipo.dato{ background:#e3eefb; color:#0f4d99; }
.tl-fecha{ font-size:.74rem; color:var(--suave); }
.tl-msg{ font-size:.92rem; margin-top:4px; }
.tl-quien{ font-size:.78rem; color:var(--suave); margin-top:3px; }
.tl-oficial{ font-size:.7rem; font-weight:700; color:var(--azul); }

/* ---------- Formularios ---------- */
label{ display:block; font-size:.85rem; font-weight:600; color:var(--tinta-2); margin:12px 0 5px; }
input[type=text], input[type=tel], input[type=number], input[type=datetime-local], input[type=password], select, textarea{
  width:100%; padding:12px 13px; border:1px solid var(--linea); border-radius:10px;
  font-size:1rem; background:#fff; color:var(--tinta); font-family:inherit;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--azul); }
textarea{ min-height:84px; resize:vertical; }
.radios{ display:flex; gap:8px; margin-top:4px; }
.radios label{ flex:1; margin:0; text-align:center; padding:11px; border:1px solid var(--linea); border-radius:10px; cursor:pointer; font-weight:600; }
.radios input{ display:none; }
.radios input:checked + span{ display:block; }
.radios label:has(input:checked){ border-color:var(--tinta); background:var(--tinta); color:#fff; }

/* ---------- Avisos ---------- */
.aviso{ font-size:.82rem; padding:11px 13px; border-radius:10px; margin:10px 0; }
.aviso.info{ background:#eef4fc; color:#284b73; }
.aviso.ok{ background:#e3f5ea; color:#137a41; }
.aviso.alerta{ background:#fdf2dd; color:#8a5a00; }
.aviso.error{ background:#fbe6e6; color:#9c2a2a; }

/* ---------- "Buscar también en" ---------- */
.tambien{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.tambien a{ font-size:.8rem; padding:8px 12px; border:1px solid var(--linea); border-radius:9px; background:#fff; color:var(--tinta-2); }

/* ---------- Vacío ---------- */
.vacio{ text-align:center; color:var(--suave); padding:40px 16px; font-size:.92rem; }

/* ---------- Pie ---------- */
.pie{ text-align:center; color:#9aa6b2; font-size:.74rem; padding:24px 16px 0; line-height:1.6; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }