/* estamosbienvalle.com — estilos base, mobile-first, alto contraste, ligero */
:root{
  --verde:#1a7f37; --verde-osc:#125c27;
  --azul:#0b5fa5; --azul-osc:#083f6e;
  --amarillo:#b58105; --naranja:#c2410c; --rojo:#b91c1c; --azulc:#1d4ed8;
  --tinta:#111827; --gris:#4b5563; --gris-cl:#e5e7eb; --fondo:#f4f6f8;
  --borde:#d1d5db; --blanco:#fff; --radio:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta); line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:560px; margin:0 auto; padding:16px}
header.top{background:var(--verde); color:#fff; padding:14px 16px; text-align:center}
header.top a{color:#fff; text-decoration:none}
header.top .logo{font-weight:800; font-size:1.25rem; letter-spacing:.3px}
header.top .sub{font-size:.85rem; opacity:.95}
h1{font-size:1.5rem; margin:.2em 0 .4em}
h2{font-size:1.15rem; margin:1em 0 .5em}
p.lead{color:var(--gris); margin-top:0}
a{color:var(--azul)}

.btn{
  display:block; width:100%; border:0; border-radius:var(--radio); cursor:pointer;
  font-size:1.15rem; font-weight:700; padding:18px 16px; margin:12px 0; text-align:center;
  text-decoration:none; color:#fff; background:var(--gris);
}
.btn:active{transform:translateY(1px)}
.btn-verde{background:var(--verde)} .btn-verde:hover{background:var(--verde-osc)}
.btn-azul{background:var(--azul)} .btn-azul:hover{background:var(--azul-osc)}
.btn-lg{font-size:1.35rem; padding:26px 16px}
.btn-sec{background:#fff; color:var(--tinta); border:2px solid var(--borde); font-weight:600}
.btn[disabled]{opacity:.6; cursor:not-allowed}

.card{background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:16px; margin:12px 0}
label{display:block; font-weight:600; margin:14px 0 6px}
input,select,textarea{
  width:100%; font-size:1.05rem; padding:12px; border:2px solid var(--borde);
  border-radius:10px; background:#fff; color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azul)}
textarea{min-height:70px; resize:vertical}
.hint{font-size:.85rem; color:var(--gris); margin-top:4px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.opciones{display:grid; gap:8px}
.opciones .op{display:flex; align-items:center; gap:10px; border:2px solid var(--borde); border-radius:10px; padding:12px; cursor:pointer}
.opciones .op input{width:auto}
.opciones .op.sel{border-color:var(--verde); background:#f0fdf4}

.estado-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.estado-btn{border:2px solid var(--borde); border-radius:12px; padding:16px 8px; font-weight:700; text-align:center; cursor:pointer; background:#fff}
.estado-btn.sel{color:#fff}
.e-bien.sel{background:var(--verde); border-color:var(--verde)}
.e-herido.sel{background:var(--amarillo); border-color:var(--amarillo)}
.e-ayuda.sel{background:var(--naranja); border-color:var(--naranja)}
.e-atrapado.sel{background:var(--rojo); border-color:var(--rojo)}

.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:.85rem; font-weight:700; color:#fff}
.b-bien{background:var(--verde)} .b-herido{background:var(--amarillo)}
.b-ayuda{background:var(--naranja)} .b-atrapado{background:var(--rojo)} .b-visto{background:var(--azulc)}
.origen{font-size:.8rem; color:var(--gris)}
.origen b{color:var(--tinta)}

.resultado{border:1px solid var(--borde); border-radius:12px; padding:14px; margin:10px 0; background:#fff}
.resultado .nom{font-size:1.15rem; font-weight:800}
.resultado .meta{color:var(--gris); font-size:.9rem; margin-top:4px}
.resultado .msg{margin-top:8px; background:#f9fafb; border-radius:8px; padding:8px 10px}

.msgbox{padding:12px 14px; border-radius:10px; margin:12px 0; font-weight:600}
.msg-ok{background:#f0fdf4; color:var(--verde-osc); border:1px solid #bbf7d0}
.msg-err{background:#fef2f2; color:var(--rojo); border:1px solid #fecaca}
.msg-info{background:#eff6ff; color:var(--azul-osc); border:1px solid #bfdbfe}

.codigo{font-size:2rem; font-weight:900; letter-spacing:2px; text-align:center; background:#fff; border:2px dashed var(--verde); border-radius:12px; padding:16px; margin:10px 0; color:var(--verde-osc)}
.qr{display:flex; justify-content:center; margin:10px 0}
.qr svg{width:200px; height:200px}

footer.pie{text-align:center; color:var(--gris); font-size:.85rem; padding:24px 16px 40px}
.emergencia{background:#fef2f2; border:1px solid #fecaca; color:var(--rojo); border-radius:10px; padding:10px 12px; text-align:center; font-weight:600; margin:14px 0}
.back{display:inline-block; margin:6px 0 4px; color:var(--gris); text-decoration:none; font-weight:600}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.spin{display:inline-block; width:18px; height:18px; border:3px solid #fff; border-top-color:transparent; border-radius:50%; animation:sp .8s linear infinite; vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none !important}
table.tabla{width:100%; border-collapse:collapse; font-size:.9rem}
table.tabla th,table.tabla td{border-bottom:1px solid var(--borde); padding:8px; text-align:left}
.stat{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.stat .s{background:#fff; border:1px solid var(--borde); border-radius:10px; padding:10px; text-align:center}
.stat .s b{display:block; font-size:1.4rem}