/* ============================================================
   PETVIDA · diseño con color
   coral = emergencia (se perdió) · turquesa = ayudar
   sol = avisos · lila = ficha de salud
   ============================================================ */
:root{
  --coral:#ff5a3c; --coral2:#ff8a3d; --rosa:#ff4f8b;
  --turq:#12b5a5; --turq2:#0b8f83; --turq-claro:#dcf7f3;
  --sol:#ffc533; --sol-claro:#fff3cc;
  --lila:#7b61ff; --lila-claro:#efebff;
  --azul:#3b82f6; --azul-claro:#e3eeff;
  --tinta:#1f2544; --suave:#5b6280; --tenue:#9097b0;
  --fondo:#fff6ef; --tarjeta:#ffffff; --linea:#f3e1d4; --campo:#fffaf6;
  --coral-claro:#ffe6df;
  --grad-coral:linear-gradient(135deg,#ff5a3c 0%,#ff4f8b 100%);
  --grad-sol:linear-gradient(135deg,#ff8a3d 0%,#ffc533 100%);
  --grad-turq:linear-gradient(135deg,#12b5a5 0%,#2fcf8f 100%);
  --grad-lila:linear-gradient(135deg,#7b61ff 0%,#b05cff 100%);
  --sombra:0 10px 28px rgba(31,37,68,.08);
  --radio:20px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;color:var(--tinta);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body{background-color:var(--fondo);
  background-image:radial-gradient(circle at 20px 20px,rgba(255,90,60,.07) 6px,transparent 7px),radial-gradient(circle at 70px 60px,rgba(123,97,255,.06) 5px,transparent 6px);
  background-size:110px 110px}
a{color:var(--turq2);font-weight:600}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.envoltura{max-width:560px;margin:0 auto;padding:0 16px 104px}

/* ---------- barra de arriba ---------- */
.barra{position:sticky;top:0;z-index:5;background:var(--grad-coral);box-shadow:0 6px 18px rgba(255,79,139,.25)}
.barra .envoltura{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;text-decoration:none;color:#fff;letter-spacing:-.01em}
.marca .huella{width:36px;height:36px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:19px;box-shadow:0 3px 8px rgba(0,0,0,.12);transform:rotate(-8deg)}
.izq{display:flex;align-items:center;gap:10px}
.atras{border:0;background:rgba(255,255,255,.25);color:#fff;border-radius:12px;width:42px;height:42px;font-size:34px;line-height:1;font-weight:400;cursor:pointer;display:grid;place-items:center;padding:0 0 4px}
.atras:active{transform:scale(.94)}
.entrar-top{background:#fff;color:var(--coral);font-weight:800;font-size:14px;text-decoration:none;padding:9px 16px;border-radius:12px;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.campana{position:relative;border:0;background:rgba(255,255,255,.22);border-radius:12px;font-size:20px;width:42px;height:42px;cursor:pointer}
.campana .punto{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--sol);color:#5a3d00;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.prueba{background:var(--sol-claro);color:#6b4a00;font-size:13px;font-weight:600;text-align:center;padding:7px 12px;border-bottom:2px dashed #ffd666}

/* ---------- navegación de abajo ---------- */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:6;background:#fff;box-shadow:0 -8px 24px rgba(31,37,68,.08);border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.nav .envoltura{display:flex;justify-content:space-around;padding:8px 6px}
.nav a{flex:1;text-align:center;text-decoration:none;color:var(--tenue);font-size:11.5px;font-weight:700;padding:5px 0;border-radius:14px;margin:0 2px}
.nav a span{display:block;font-size:22px;line-height:1.25}
.nav a.activo{color:var(--coral);background:var(--coral-claro)}

/* ---------- títulos ---------- */
h1{font-size:30px;line-height:1.12;margin:20px 0 6px;letter-spacing:-.025em;font-weight:800;
  background:var(--grad-coral);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:20px;margin:24px 0 10px;font-weight:800;display:flex;align-items:center;gap:8px}
h2:before{content:'';width:8px;height:22px;border-radius:4px;background:var(--grad-sol);flex:none}
h3{font-size:17px;margin:0 0 4px;font-weight:800}
.sub{color:var(--suave);margin:0 0 14px}
.mini{font-size:13px;color:var(--suave)}

/* ---------- botones ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:16px;border:2px solid var(--linea);background:#fff;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;color:var(--tinta);padding:10px 14px;text-align:center;transition:transform .08s,box-shadow .15s}
.btn:hover{border-color:#ffc9b8}
.btn:active{transform:scale(.98)}
.btn.rojo{background:var(--grad-coral);border:0;color:#fff;box-shadow:0 8px 20px rgba(255,79,139,.32)}
.btn.verde{background:var(--grad-turq);border:0;color:#fff;box-shadow:0 8px 20px rgba(18,181,165,.3)}
.btn.lila{background:var(--grad-lila);border:0;color:#fff;box-shadow:0 8px 20px rgba(123,97,255,.3)}
.btn.grande{min-height:64px;font-size:19px;border-radius:20px}
.btn.chico{min-height:42px;font-size:14px;width:auto;padding:6px 14px;border-radius:12px;background:var(--lila-claro);border-color:transparent;color:#4b34d1}
.btn[disabled]{opacity:.6;cursor:wait}
.fila{display:flex;gap:10px}
.fila > *{flex:1;min-width:0}
.pila > * + *{margin-top:10px}

/* ---------- tarjetas y avisos ---------- */
.tarjeta{background:var(--tarjeta);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);border:0}
.tarjeta + .tarjeta{margin-top:14px}
.tarjeta.color-turq{background:var(--grad-turq);color:#fff}
.tarjeta.color-lila{background:var(--grad-lila);color:#fff}
.tarjeta.color-sol{background:var(--grad-sol);color:#3d2a00}
.tarjeta.color-turq .sub,.tarjeta.color-lila .sub{color:rgba(255,255,255,.92)}
.tarjeta.color-sol .sub{color:#5a3d00}
.tarjeta.color-turq .btn,.tarjeta.color-lila .btn,.tarjeta.color-sol .btn{border:0;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.heroe{position:relative;overflow:hidden;background:var(--grad-coral);color:#fff;border-radius:28px;padding:24px 20px;margin-top:16px;box-shadow:0 14px 34px rgba(255,79,139,.35)}
.heroe:after{content:'🐾';position:absolute;right:-10px;top:-14px;font-size:120px;opacity:.16;transform:rotate(18deg)}
.heroe h1{margin-top:0;color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial;font-size:32px}
.heroe p{margin:0 0 16px;opacity:.96;font-weight:500}
.heroe .btn{background:#fff;color:var(--coral);border:0;box-shadow:0 8px 18px rgba(0,0,0,.15)}
.nadie{background:var(--turq-claro);color:#0a5c55;border-radius:18px;padding:14px;font-size:14px;display:flex;gap:12px;align-items:flex-start;border:2px solid #b8eee6}
.nadie > span{font-size:22px;line-height:1}
.nadie b{display:block;font-size:15px}
.alerta-roja{background:var(--coral-claro);color:#b3261e;border-radius:16px;padding:12px 14px;font-size:14px;border:2px solid #ffc4b5}
.info{background:var(--azul-claro);color:#1e4fa3;border-radius:16px;padding:12px 14px;font-size:14px;border:2px solid #c4dafd}

/* ---------- lista de alertas ---------- */
.item{display:flex;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:10px;text-decoration:none;color:inherit;box-shadow:var(--sombra);border-left:6px solid var(--coral)}
.item.encontrado{border-left-color:var(--azul)}
.item.resuelta{border-left-color:var(--turq)}
.item + .item{margin-top:12px}
.item img,.item .sinfoto{width:78px;height:78px;border-radius:14px;object-fit:cover;flex:none;background:var(--coral-claro)}
.item .txt{flex:1;min-width:0}
.item .txt b{display:block;font-size:16px;font-weight:800}
.item .txt .mini{display:block}
.etq{display:inline-block;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;margin-right:4px}
.etq.perdido{background:var(--coral-claro);color:#c2311b}
.etq.encontrado{background:var(--azul-claro);color:#1e4fa3}
.etq.resuelta{background:var(--turq-claro);color:#0a5c55}
.etq.herido{background:var(--sol-claro);color:#7a5200}
.etq.dest{background:var(--lila-claro);color:#4b34d1}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chips button{flex:none;border:2px solid var(--linea);background:#fff;border-radius:999px;padding:7px 15px;font-weight:700;font-size:14px;cursor:pointer;color:var(--suave)}
.chips button.on{background:var(--grad-coral);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(255,79,139,.3)}
.tarjeta .chips button{background:var(--lila-claro);border-color:transparent;color:#4b34d1;font-size:12.5px;padding:4px 11px}

/* ---------- formularios ---------- */
label.campo{display:block;margin:14px 0 0;font-weight:800;font-size:15px;color:var(--tinta)}
label.campo small{font-weight:500;color:var(--suave)}
.campo input,.campo select,.campo textarea{display:block;width:100%;margin-top:6px;border:2px solid var(--linea);border-radius:14px;padding:12px 13px;background:var(--campo);font-size:16px;font-weight:500;transition:border-color .15s,box-shadow .15s}
.campo textarea{min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--turq);box-shadow:0 0 0 4px rgba(18,181,165,.15);background:#fff}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:15px;cursor:pointer;background:var(--campo);border-radius:14px;padding:10px 12px;border:2px solid var(--linea)}
.check:has(input:checked){border-color:#a6e9df;background:var(--turq-claro)}
.check input{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--turq)}
.error{color:#c2311b;font-size:14px;font-weight:700;margin-top:8px;min-height:1px}
form.tarjeta{border-top:6px solid var(--coral)}
.cuenta-en-form{margin-top:18px;border-radius:18px;padding:14px;background:var(--turq-claro);border:2px solid #b8eee6}
.cuenta-en-form h3{color:#0a5c55}
details.extra{margin-top:18px;border-radius:18px;padding:12px 14px;background:var(--lila-claro);border:2px solid #d9d0ff}
details.extra summary{font-weight:800;cursor:pointer;color:#4b34d1}
details.extra summary:before{content:'🩺 '}
.foto-sel{display:flex;align-items:center;gap:14px;margin-top:8px}
.foto-sel img,.foto-sel .hueco{width:104px;height:104px;border-radius:22px;object-fit:cover;background:var(--grad-sol);display:grid;place-items:center;font-size:34px;color:#fff;box-shadow:0 6px 16px rgba(255,138,61,.3)}
.foto-sel .btn.chico{background:var(--grad-coral);color:#fff;box-shadow:0 6px 14px rgba(255,79,139,.28)}

/* ---------- ficha ---------- */
.portada{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:26px;background:#eee;margin-top:16px;box-shadow:0 14px 30px rgba(31,37,68,.15);border:5px solid #fff}
.galeria{display:flex;gap:8px;overflow-x:auto;margin-top:10px}
.galeria img{width:86px;height:86px;object-fit:cover;border-radius:14px;flex:none;border:3px solid #fff;box-shadow:var(--sombra)}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.datos div{background:#fff;border-radius:14px;padding:9px 12px;font-weight:700;box-shadow:var(--sombra)}
.datos div:nth-child(4n+1){border-top:4px solid var(--coral)}
.datos div:nth-child(4n+2){border-top:4px solid var(--turq)}
.datos div:nth-child(4n+3){border-top:4px solid var(--sol)}
.datos div:nth-child(4n+4){border-top:4px solid var(--lila)}
.datos div span{display:block;font-size:12px;color:var(--suave);font-weight:600}
.qr{display:flex;gap:14px;align-items:center;background:var(--grad-lila);color:#fff}
.qr .mini{color:rgba(255,255,255,.92)}
.qr .btn.chico{background:#fff;color:#4b34d1;display:flex}
.qr .cuadro{width:124px;height:124px;flex:none;background:#fff;border-radius:16px;padding:6px}
.qr .cuadro svg{width:100%;height:100%}
.gran-num{font-size:72px;font-weight:800;line-height:1;margin:6px 0;background:var(--grad-coral);-webkit-background-clip:text;background-clip:text;color:transparent}
.linea-tiempo{border-left:3px dashed #ffc9b8;margin-left:8px;padding-left:18px}
.linea-tiempo .ev{position:relative;padding:4px 0 16px}
.linea-tiempo .ev:before{content:'';position:absolute;left:-27px;top:7px;width:16px;height:16px;border-radius:50%;background:var(--turq);border:3px solid #fff;box-shadow:0 0 0 2px var(--turq)}
.linea-tiempo .ev.tengo:before{background:var(--coral);box-shadow:0 0 0 2px var(--coral)}
.linea-tiempo .ev img{width:130px;border-radius:14px;margin-top:6px}
.vacio{text-align:center;color:var(--suave);padding:28px 14px;background:#fff;border-radius:18px;box-shadow:var(--sombra);font-weight:600}
.aviso-flot{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:11px 18px;border-radius:16px;font-size:14px;font-weight:700;z-index:9;max-width:90%;box-shadow:0 10px 24px rgba(0,0,0,.25)}
canvas.afiche{width:100%;border-radius:18px;margin-top:12px;background:#fff;box-shadow:0 14px 30px rgba(31,37,68,.15)}
.correo{background:#fff;border-radius:18px;overflow:hidden;margin-top:12px;box-shadow:var(--sombra)}
.correo .cab{background:#f4f2fb;padding:10px 14px;font-size:13px;color:var(--suave)}
.correo .cab b{color:var(--tinta)}
.cargando{text-align:center;color:var(--suave);padding:40px 0;font-weight:700}
.archivo{display:inline-flex}

/* ---------- comunidad: concurso, galería y corazones ---------- */
.concurso{margin-top:22px;border-radius:24px;padding:18px 16px;background:var(--grad-sol);color:#3d2a00;box-shadow:0 12px 28px rgba(255,138,61,.3)}
.concurso p{margin:10px 0 12px;font-size:14.5px}
.concurso-cab{display:flex;gap:12px;align-items:center}
.concurso-cab .trofeo{width:48px;height:48px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:26px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.concurso-cab b{display:block;font-size:18px;font-weight:800}
.concurso-cab span{display:block;font-size:14px;font-weight:700;opacity:.85}
.concurso .btn{border:0}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gal-item{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--sombra);color:var(--tinta)}
.gal-foto{display:block;position:relative;aspect-ratio:1/1;background:var(--coral-claro)}
.gal-foto img{width:100%;height:100%;object-fit:cover}
.medalla{position:absolute;top:8px;left:8px;font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.gal-pie{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px}
.gal-nombre{min-width:0}
.gal-nombre b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-nombre span{display:block;font-size:12px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corazon{flex:none;border:2px solid var(--coral-claro);background:#fff;border-radius:999px;padding:5px 10px;font-weight:800;font-size:13px;cursor:pointer;color:var(--tinta);filter:grayscale(1)}
.corazon.on{filter:none;background:var(--coral-claro);border-color:#ffb3a3;color:#c2311b}
.corazon.late,.corazon-grande.late{animation:late .45s ease}
@keyframes late{0%{transform:scale(1)}35%{transform:scale(1.25)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.corazon-grande{margin-top:14px}
.corazon-grande.on{background:#fff;color:var(--coral);border:2px solid var(--coral);box-shadow:none}
.votos{display:flex;gap:12px;margin-top:12px}
.votos div{flex:1;background:#fff;border-radius:18px;padding:12px;text-align:center;box-shadow:var(--sombra)}
.votos b{display:block;font-size:30px;font-weight:800;line-height:1.1;background:var(--grad-coral);-webkit-background-clip:text;background-clip:text;color:transparent}
.votos span{font-size:13px;font-weight:700;color:var(--suave)}

/* ---------- panel del administrador ---------- */
.admin-num{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.admin-num div{background:#fff;border-radius:14px;padding:10px 6px;text-align:center;box-shadow:var(--sombra)}
.admin-num b{display:block;font-size:20px;font-weight:800;color:var(--lila)}
.admin-num span{display:block;font-size:11px;font-weight:700;color:var(--suave);line-height:1.2}
.buscador{display:block;width:100%;border:2px solid var(--linea);border-radius:14px;padding:11px 13px;background:#fff;font-size:15px;margin-bottom:12px}
.buscador:focus{outline:none;border-color:var(--lila)}
.admin-item{border-left-color:var(--lila);align-items:flex-start}
.admin-item .txt .mini{margin-top:2px}
@media (max-width:420px){ .admin-num{grid-template-columns:repeat(2,1fr)} }

/* ---------- portada ---------- */
.sello{display:inline-block;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.45);color:#fff;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;margin-bottom:12px}
.noti{display:flex;gap:12px;align-items:center;background:#fff;color:var(--tinta);border-radius:18px;padding:12px 14px;margin-top:16px;box-shadow:0 10px 24px rgba(0,0,0,.18);transform:rotate(-1.2deg);position:relative;z-index:1}
.noti-ico{width:40px;height:40px;border-radius:12px;background:var(--grad-coral);display:grid;place-items:center;font-size:20px;flex:none}
.noti b{display:block;font-size:12px;color:var(--suave)}
.noti span{display:block;font-size:14px;font-weight:700;line-height:1.35}
.burbuja{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--grad-coral);color:#fff;font-size:12px;padding:0 6px}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.numeros div{background:#fff;border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--sombra)}
.numeros b{display:block;font-size:26px;font-weight:800;line-height:1.1;background:var(--grad-coral);-webkit-background-clip:text;background-clip:text;color:transparent}
.numeros div:nth-child(2) b{background:var(--grad-turq);-webkit-background-clip:text;background-clip:text}
.numeros div:nth-child(3) b{background:var(--grad-lila);-webkit-background-clip:text;background-clip:text}
.numeros span{font-size:12.5px;font-weight:700;color:var(--suave)}
.beneficios{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ben{background:#fff;border-radius:20px;padding:16px 14px;box-shadow:var(--sombra)}
.ben span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;margin-bottom:10px}
.ben.b1 span{background:var(--coral-claro)} .ben.b2 span{background:var(--turq-claro)} .ben.b3 span{background:var(--sol-claro)} .ben.b4 span{background:var(--lila-claro)}
.ben b{display:block;font-size:15px;font-weight:800;line-height:1.25}
.ben p{margin:4px 0 0;font-size:13.5px;color:var(--suave);line-height:1.4}
.pasos{list-style:none;padding:0;margin:0;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;background:#fff;border-radius:20px;padding:16px 16px 16px 70px;box-shadow:var(--sombra);min-height:70px}
.pasos li + li{margin-top:12px}
.pasos li:before{content:counter(paso);position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:14px;background:var(--grad-coral);color:#fff;font-weight:800;font-size:19px;display:grid;place-items:center;box-shadow:0 6px 14px rgba(255,79,139,.3)}
.pasos li:nth-child(2):before{background:var(--grad-sol)} .pasos li:nth-child(3):before{background:var(--grad-turq)}
.pasos b{display:block;font-weight:800}
.pasos span{display:block;font-size:14px;color:var(--suave)}
.tarjeta.color-coral{background:var(--grad-coral);color:#fff}
.tarjeta.color-coral .sub{color:rgba(255,255,255,.92)}
.tarjeta.color-coral .btn{border:0;color:var(--coral);box-shadow:0 6px 14px rgba(0,0,0,.12)}
.tarjeta.color-turq .btn{color:var(--turq2)} .tarjeta.color-sol .btn{color:#8a5a00}
.tarjeta .btn.verde{color:#fff}
.faq details{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--sombra)}
.faq details + details{margin-top:10px}
.faq summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:22px;line-height:1;color:var(--coral);font-weight:800}
.faq details[open] summary:after{content:'–'}
.faq p{margin:8px 0 0;color:var(--suave);font-size:15px}
@media (min-width:600px){ h1{font-size:34px} }

/* ---- bitácora clínica, recordatorios, invitar y meta del piloto ---- */
.recordatorios{margin-top:14px}
.recordatorios h3{margin:0 0 10px}
.rec{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.93);border-radius:14px;padding:9px 12px;text-decoration:none;color:var(--tinta)}
.rec + .rec{margin-top:8px}
.rec-ico{font-size:24px;flex:none}
.rec b{display:block;font-size:15px;font-weight:800}
.rec div span{display:block;font-size:13px;color:var(--suave);font-weight:600}
.rec.vencido div span{color:#c2311b}
.invitar{margin-top:16px}
.qr-vet{text-align:center;background:#fff;border:2px solid var(--lila-claro);display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-vet .cuadro{width:min(240px,70vw);aspect-ratio:1;background:#fff;border-radius:18px;padding:8px;box-shadow:var(--sombra)}
.qr-vet .cuadro svg{width:100%;height:100%;display:block}
.qr-tiempo{margin:0;font-weight:700;color:var(--suave)}
.qr-tiempo b{color:var(--lila);font-size:20px;font-variant-numeric:tabular-nums}
.codigo{font-family:ui-monospace,Consolas,monospace;font-weight:800;font-size:20px;letter-spacing:1px;background:var(--lila-claro);color:#4b34d1;border-radius:12px;padding:8px 14px;user-select:all}
.item.acceso{border-left-color:var(--lila)}
.item.acceso.inactivo{opacity:.6;border-left-color:var(--tenue)}
.atencion{background:#fff;border-radius:18px;padding:14px;box-shadow:var(--sombra);border-left:6px solid var(--turq)}
.atencion + .atencion{margin-top:12px}
.at-cab{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.at-cab span{font-size:13px;color:var(--suave);font-weight:700;text-align:right}
.at-motivo{margin:6px 0 0;font-weight:700}
.at-datos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.at-datos div{background:var(--campo);border-radius:12px;padding:7px 10px;font-weight:700;font-size:14px}
.at-datos span{display:block;font-size:11px;color:var(--suave);font-weight:600}
.at-texto{margin:8px 0 0;white-space:pre-line}
.at-firma{margin:10px 0 0}
.banner-vet{background:var(--lila-claro);color:#4b34d1;border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px;margin-bottom:10px}
.vacuna-caja{background:var(--lila-claro);border-radius:16px;padding:12px 14px 14px;margin-top:16px}
.vacuna-caja .campo input{background:#fff}
.meta{background:#fff;border-radius:18px;padding:14px;box-shadow:var(--sombra);margin-top:6px}
.meta-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.meta-top span{font-weight:800;color:var(--lila);white-space:nowrap}
.meta-barra{height:12px;background:var(--lila-claro);border-radius:999px;overflow:hidden;margin:8px 0 6px}
.meta-barra i{display:block;height:100%;background:var(--grad-lila);border-radius:999px;transition:width .6s}
.meta small{color:var(--suave);font-weight:600}

/* ---- notificaciones al celular ---- */
.push{margin-top:14px}
.push h3{margin:0 0 6px}
.push .fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.push .fila .btn:not(.chico){flex:1;min-width:180px}
.push-activo{background:var(--turq-claro);border-radius:16px;padding:12px 14px}
.push-activo b{display:block;color:#0a5c55;margin-bottom:8px}
.push-activo .fila{display:flex;gap:8px;flex-wrap:wrap}

/* aviso: PetVida abierta dentro de otra app */
.banner-ext{background:var(--sol-claro);color:#5a3d00;padding:10px 16px;font-size:14px;font-weight:600;display:flex;gap:12px;align-items:center;justify-content:space-between}
.banner-ext button{flex:none;border:0;border-radius:10px;padding:8px 12px;font-weight:800;background:#fff;color:#5a3d00;cursor:pointer}

/* mientras se escribe (teclado abierto) la barra de abajo se esconde: en iPhone se desubica */
body.escribiendo .nav{display:none}

/* ---- conversación segura ---- */
.conv-cab{display:flex;gap:12px;align-items:center;margin-top:6px}
.conv-cab img,.conv-cab .sinfoto{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.conv-cab b{display:block;font-size:17px}
.chat{background:#fff;border-radius:18px;box-shadow:var(--sombra);padding:12px;margin-top:12px;max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.msg{max-width:82%;align-self:flex-start;background:var(--campo);border:2px solid var(--linea);border-radius:16px 16px 16px 4px;padding:8px 12px;white-space:pre-line;word-wrap:break-word}
.msg.mia{align-self:flex-end;background:var(--turq-claro);border-color:#bdeee6;border-radius:16px 16px 4px 16px}
.msg small{display:block;font-size:11px;color:var(--tenue);margin-top:2px;text-align:right}
.lugares{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:4px}
.chip-lugar{flex:none;border:2px solid var(--linea);background:#fff;border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;color:var(--tinta);cursor:pointer}
.chat-form{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.chat-form textarea{flex:1;border:2px solid var(--linea);border-radius:14px;padding:10px 12px;font-size:16px;font-family:inherit;resize:none;background:#fff}
.chat-form .btn{width:auto;flex:none;min-height:46px}
.conv-item{border-left-color:var(--turq)}
.burbuja-n{flex:none;background:var(--coral);color:#fff;font-weight:800;font-size:13px;border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;padding:0 7px}
.msg{flex:none}
.conv-cab .sinfoto{background:var(--coral-claro)}

/* ---- muro del barrio ---- */
.pub{background:#fff;border-radius:20px;box-shadow:var(--sombra);padding:14px;margin-top:14px}
.pub-cab{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.pub-tema{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--lila-claro);color:#4b34d1}
.pub-tema.t-adopcion{background:var(--coral-claro);color:#c2311b}
.pub-tema.t-consejo{background:var(--turq-claro);color:#0a5c55}
.pub-tema.t-pregunta{background:var(--sol-claro);color:#7a5200}
.pub-foto{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:16px;margin-top:10px;background:var(--campo)}
.pub-texto{margin:10px 0 0;white-space:pre-line;word-wrap:break-word}
.pub-acciones{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.link-denuncia{border:0;background:none;color:var(--tenue);font-size:12px;font-weight:700;cursor:pointer;margin-left:auto;padding:6px}
.destacada{display:flex;gap:12px;align-items:center;margin-top:14px;text-decoration:none;color:inherit}
.destacada img{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:none}
.destacada b{display:block}
.aviso-encontre{display:block;margin-top:12px;text-decoration:none;color:var(--tinta);font-size:14px;border:2px dashed var(--linea);background:#fff}
.temas-pub{margin-top:6px}