/* ================= TOKENS ================= */
:root{
  --paper:#FFFFFF;
  --page:#E7EAEE;
  --ink:#111417;
  --ink-2:#4B535C;
  --ink-3:#767F89;
  --line:#D2D7DD;
  --line-2:#111417;
  --red:#C8102E;
  --red-d:#9B0C23;
  --amber:#B26A00;
  --green:#0E7A3C;
  --blue:#0B5FA8;
  --pad:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--page);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.42;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ================= MARCO ================= */
.stage{min-height:100vh;display:flex;justify-content:center;align-items:flex-start}
.phone{width:100%;position:relative}
.screen{
  background:var(--paper);min-height:100vh;position:relative;overflow:hidden;
  padding-bottom:calc(88px + var(--safe-b));
}
.desk-note{display:none}
@media(min-width:820px){
  .stage{padding:28px 16px;align-items:center;background:#C9CFD6}
  .phone{max-width:412px}
  .screen{
    height:844px;min-height:0;overflow-y:auto;
    border:1px solid #8A929B;box-shadow:0 6px 20px rgba(0,0,0,.22);
  }
}
@media(min-width:1120px){
  .desk-note{
    display:block;position:fixed;left:34px;bottom:30px;max-width:246px;
    color:#4B535C;font-size:12.5px;line-height:1.55;border-left:3px solid var(--ink);padding-left:12px;
  }
  .desk-note b{color:var(--ink);display:block;margin-bottom:3px}
}
.screen::-webkit-scrollbar{width:0}

/* ================= BARRA SUPERIOR ================= */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:10px;
  padding:calc(9px + env(safe-area-inset-top,0px)) var(--pad) 9px;
}
.topbar .nfc{width:18px;height:18px;flex:none}
.topbar .tx{flex:1;min-width:0}
.topbar .tx b{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.topbar .tx span{display:block;font-size:11px;color:#B4BCC5;font-variant-numeric:tabular-nums}
.status{
  flex:none;background:var(--green);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;
}

/* ================= IDENTIDAD ================= */
.ident{padding:16px var(--pad);border-bottom:1px solid var(--line)}
.ident-top{display:flex;gap:13px;align-items:flex-start}
.photo{
  width:76px;height:88px;flex:none;border:1.5px solid var(--line-2);background:#EDF0F3;
  display:grid;place-items:center;position:relative;
}
.photo .ini{font-size:26px;font-weight:700;letter-spacing:.02em;color:#39414A}
.photo .cap{
  position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:#fff;
  font-size:8px;font-weight:700;letter-spacing:.08em;text-align:center;padding:2px 0;text-transform:uppercase;
}
.who{flex:1;min-width:0;padding-top:1px}
.who .lbl{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.who h1{margin:2px 0 0;font-size:21px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.who .alias{font-size:13px;font-weight:700;color:var(--red);margin-top:4px}
.who .meta{font-size:12.5px;color:var(--ink-2);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.club{margin-top:13px;border-left:4px solid var(--red);background:#F2F4F6;padding:9px 12px}
.club b{display:block;font-size:13px;font-weight:700}
.club span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:1px}

/* ================= CRÍTICO ================= */
.band{
  background:var(--red);color:#fff;padding:8px var(--pad);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.crit{padding:14px var(--pad) 2px}
.crit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.blood{background:var(--red);color:#fff;padding:12px 13px;border:1.5px solid var(--red-d)}
.blood .lbl{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.blood .val{font-size:46px;font-weight:700;line-height:.98;margin:6px 0 4px;letter-spacing:-.02em}
.blood .sub{font-size:11px;border-top:1px solid rgba(255,255,255,.45);padding-top:5px}
.donor{border:1.5px solid var(--line-2);padding:12px 13px;display:flex;flex-direction:column;justify-content:center}
.donor .lbl{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.donor .val{font-size:30px;font-weight:700;color:var(--green);line-height:1;margin:6px 0 5px}
.donor .sub{font-size:11px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:5px}

.facts{margin-top:10px;border:1px solid var(--line)}
.fact{display:flex;gap:0;border-left:5px solid var(--ink-3)}
.fact + .fact{border-top:1px solid var(--line)}
.fact.danger{border-left-color:var(--red)}
.fact.warn{border-left-color:var(--amber)}
.fact .in{padding:10px 12px}
.fact b{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.fact p{margin:3px 0 0;font-size:15px;font-weight:700;line-height:1.3}
.fact.danger p{color:var(--red-d)}

/* ================= ACCIONES ================= */
.acts{padding:16px var(--pad) 4px;display:grid;gap:9px}
.act{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:left;border:1.5px solid var(--line-2)}
.act svg{width:20px;height:20px;flex:none}
.act .tx{flex:1;min-width:0}
.act .tx b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.act .tx span{display:block;font-size:12px;margin-top:2px;color:var(--ink-2)}
.act .arw{width:14px;height:14px;flex:none;color:var(--ink-3)}
.act.red{background:var(--red);border-color:var(--red-d);color:#fff}
.act.red .tx span{color:rgba(255,255,255,.85)}
.act.red .arw{color:rgba(255,255,255,.75)}
.act.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.act.dark .tx span{color:#B4BCC5}
.act.dark .arw{color:#8C959E}
.act.plain{background:var(--paper)}
.act:active{opacity:.85}

/* ================= SECCIONES ================= */
.sec{padding:0 var(--pad)}
.sec-title{
  margin:22px 0 0;padding-bottom:6px;border-bottom:2px solid var(--ink);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.block{border:1px solid var(--line);border-top:0}

.contact{display:flex;align-items:center;gap:11px;padding:11px 12px}
.contact + .contact{border-top:1px solid var(--line)}
.contact .no{
  width:26px;height:26px;flex:none;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
.contact .no.club{background:var(--ink-3)}
.contact .info{flex:1;min-width:0}
.contact .info b{display:block;font-size:14.5px;font-weight:700}
.contact .info .rel{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.contact .info .num{display:block;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px;font-weight:600}
.ico-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1.5px solid var(--line-2)}
.ico-btn svg{width:17px;height:17px}
.ico-btn.call{background:var(--ink);color:#fff}
.ico-btn.wa{background:var(--paper);color:var(--ink)}

.rows{background:var(--paper)}
.row{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;align-items:flex-start}
.row + .row{border-top:1px solid var(--line)}
.row .k{font-size:12.5px;color:var(--ink-2);flex:none;max-width:42%}
.row .v{font-size:13.5px;font-weight:700;text-align:right;word-break:break-word}
.row .v small{display:block;font-weight:400;color:var(--ink-2);font-size:11.5px;margin-top:2px}
.v.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.copy{margin-left:6px;color:var(--ink-3);vertical-align:-2px}
.copy svg{width:13px;height:13px}

/* acordeón */
.acc{width:100%;display:flex;align-items:center;gap:10px;padding:12px;text-align:left;background:var(--paper)}
.acc + .acc-body{border-top:1px solid var(--line)}
.acc b{flex:1;font-size:14px;font-weight:700}
.acc .chev{width:14px;height:14px;color:var(--ink-2);transition:transform .18s ease}
.acc[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-body{display:none;background:#F7F8FA}
.acc-body.open{display:block}
.block .acc + .acc-body + .acc{border-top:1px solid var(--line)}
.block .acc ~ .acc{border-top:1px solid var(--line)}

/* moto */
.moto{padding:12px;background:var(--paper)}
.moto .name{font-size:15px;font-weight:700}
.moto .desc{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.plate{
  margin-top:11px;border:1.5px solid var(--line-2);display:flex;align-items:stretch;
}
.plate .l{flex:1;padding:7px 10px}
.plate .r{padding:7px 10px;border-left:1px solid var(--line);text-align:right;display:flex;flex-direction:column;justify-content:center}
.plate .st{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plate .num{font-size:21px;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums;margin-top:1px}
.plate .ins{font-size:12.5px;font-weight:700;margin-top:2px}

/* nota titular */
.quote{padding:12px;font-size:14px;line-height:1.5;font-weight:600;border-left:5px solid var(--ink);background:#F7F8FA}

/* privacidad */
.priv{margin:20px var(--pad) 0;border:1px solid var(--line);border-left:5px solid var(--blue);padding:11px 12px}
.priv p{margin:0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.priv b{color:var(--ink)}

/* footer */
.footer{padding:20px var(--pad) 10px;text-align:center;border-top:1px solid var(--line);margin-top:22px}
.footer .brand{font-size:13px;font-weight:700;letter-spacing:.04em}
.footer .sub{font-size:11px;color:var(--ink-2);margin-top:4px;line-height:1.6}
.token{
  display:inline-block;margin-top:10px;padding:5px 10px;border:1px solid var(--line);
  font-size:10.5px;color:var(--ink-2);letter-spacing:.08em;font-variant-numeric:tabular-nums;
}

/* CTA fija */
.cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;
  background:var(--paper);border-top:1.5px solid var(--line-2);
  padding:10px var(--pad) calc(10px + var(--safe-b));
}
@media(min-width:820px){.cta{position:absolute}}
.cta .c{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;font-size:15px;font-weight:700}
.cta .c svg{width:18px;height:18px}
.c-911{background:var(--red);color:#fff}
.c-ice{background:var(--paper);color:var(--ink);border:1.5px solid var(--line-2)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:calc(92px + var(--safe-b));transform:translate(-50%,10px);
  background:var(--ink);color:#fff;padding:11px 15px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:.2s ease;z-index:60;max-width:88%;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= EXTENSIONES SMARTAGS ================= */
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.status.lost{background:var(--red)}
.status.off{background:var(--ink-3)}

/* barra del dueño */
.owner{display:flex;align-items:center;gap:10px;background:#FFF6D6;border-bottom:1px solid #E8D58C;padding:9px var(--pad);font-size:12.5px}
.owner b{flex:1}
.owner a{font-weight:700;text-decoration:underline}

/* modo perdido */
.lost{background:var(--red);color:#fff;padding:16px var(--pad) 15px;text-align:left}
.lost .k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.lost h2{margin:4px 0 4px;font-size:26px;line-height:1.05;letter-spacing:-.01em}
.lost p{margin:0;font-size:13px;line-height:1.45;opacity:.95}
.lost .rw{display:inline-block;margin-top:9px;background:#fff;color:var(--red-d);font-weight:700;font-size:12.5px;padding:4px 9px}

/* hero mascota / objeto */
.pet{padding:16px var(--pad);border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:center}
.pet .photo{width:92px;height:92px;border-radius:0}
.pet h1{margin:2px 0 0;font-size:28px;line-height:1.05;letter-spacing:-.01em}
.pet .sub{font-size:13px;color:var(--ink-2);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip{font-size:11px;font-weight:700;letter-spacing:.04em;border:1.5px solid var(--line-2);padding:3px 7px;text-transform:uppercase}
.chip.ok{border-color:var(--green);color:var(--green)}
.chip.no{border-color:var(--ink-3);color:var(--ink-3)}

.msg{margin:14px var(--pad) 0;padding:12px;font-size:14.5px;line-height:1.5;font-weight:600;border-left:5px solid var(--ink);background:#F7F8FA}

/* estado de envío de ubicación */
.act[disabled]{opacity:.6}
.act.done{border-color:var(--green)}
.act.done svg:first-child{color:var(--green)}

/* página de estado (sin activar / no disponible) */
.state{padding:28px var(--pad) 24px}
.state .ico{width:56px;height:56px;border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:16px}
.state .ico svg{width:28px;height:28px}
.state .k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.state h1{margin:6px 0 8px;font-size:26px;line-height:1.1;letter-spacing:-.01em}
.state p{margin:0 0 10px;color:var(--ink-2);font-size:14.5px}
.state .acts{padding:12px 0 0}

/* Vista previa embebida en la landing: siempre layout de teléfono, sin nota lateral */
body.embed .desk-note{display:none}
body.embed .stage{padding:0;background:var(--paper)}
body.embed .phone{max-width:none}
body.embed .screen{height:auto;min-height:100vh;border:0;box-shadow:none}
body.embed .screen::-webkit-scrollbar{display:none}
body.embed{scrollbar-width:none}