/* Hocico Phone — Página pública de la Chapa NFC (/m/<slug>)
   Mobile-first: la abre quien encuentra a la mascota, casi siempre en el móvil.
   Diseño sobrio, legible al sol, con jerarquía clara (foto → datos → avisar). */

.mp-wrap{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:calc(20px + env(safe-area-inset-top)) 16px 28px;
  background:
    radial-gradient(120% 80% at 50% -10%, #EAF6F0 0%, #F4F8F5 42%, #F4F8F5 100%);
  font-family:Manrope, system-ui, -apple-system, sans-serif;
  color:#0B1813;
}
.mp-wrap.alerta{
  background:
    radial-gradient(120% 80% at 50% -10%, #FCEBE7 0%, #FBF3F1 44%, #F9F4F2 100%);
}

.mp-brand{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.mp-brand-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:800; letter-spacing:.02em; color:#1f7a5e;
  background:#fff; border:1px solid #d7e7df; border-radius:999px; padding:4px 9px;
}

/* Tarjeta principal */
.mp-card{
  width:100%; max-width:440px; background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 18px 50px -22px rgba(11,24,19,.34), 0 2px 8px rgba(11,24,19,.06);
  border:1px solid rgba(11,24,19,.06);
}

.mp-bar{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-weight:800; font-size:13px; letter-spacing:.03em; text-align:center;
  padding:11px 14px;
}
.mp-bar.ok{ background:#E9F7F0; color:#1f7a5e; }
.mp-bar.alert{ background:#E23B28; color:#fff; }
.mp-bar.alert .dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation:mp-pulse 1.1s infinite; }
@keyframes mp-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.7); } }

/* Foto + nombre superpuesto */
.mp-photo{
  position:relative; aspect-ratio:4/3; width:100%;
  background-size:cover; background-position:center; background-color:#2A9F84;
  display:flex; align-items:flex-end;
}
.mp-photo-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mp-photo-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(2,16,11,.74) 0%, rgba(2,16,11,.05) 55%, transparent 100%); }
.mp-photo-meta{ position:relative; padding:14px 16px; color:#fff; }
.mp-name{ font-size:30px; font-weight:900; line-height:1.05; letter-spacing:-.01em; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.mp-sub{ font-size:14px; font-weight:600; opacity:.95; margin-top:3px; text-shadow:0 1px 6px rgba(0,0,0,.3); }

.mp-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:13px; }

.mp-senas{ margin:0; font-size:14.5px; line-height:1.5; color:#243a32; }
.mp-rest{ margin:0; font-size:14.5px; line-height:1.55; color:#243a32; }

/* Bloque médico (solo Modo Alerta) */
.mp-med{ background:#FDEEEB; border:1px solid #F3C9C0; border-radius:14px; padding:12px 13px; }
.mp-med-t{ font-weight:800; font-size:13.5px; color:#B23A28; margin-bottom:5px; }
.mp-med-row{ font-size:14px; color:#3a2420; margin:2px 0; }
.mp-med-note{ font-size:12.5px; color:#8a5247; margin-top:6px; }
.mp-chip{ font-size:13px; color:#3a4a43; background:#F2F7F4; border:1px solid #dfeae5; border-radius:12px; padding:10px 12px; }

/* Botón avisar */
.mp-btn{
  appearance:none; border:none; cursor:pointer; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:800; font-size:16px;
  padding:15px 18px; border-radius:14px;
  background:linear-gradient(135deg,#37E6A4,#2A9F84); color:#04130D;
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 10px 26px -12px rgba(42,159,132,.85);
}
.mp-btn.call{ color:#fff; }
.mp-btn.call.urgent{ background:linear-gradient(135deg,#FF6B57,#E23B28); box-shadow:0 10px 26px -12px rgba(226,59,40,.9); }
.mp-btn:active{ transform:translateY(1px); }
.mp-btn[disabled]{ opacity:.7; cursor:default; box-shadow:none; }
.mp-btn.ghost{
  background:#fff; color:#0B1813; border:1px solid rgba(11,24,19,.16); text-decoration:none;
  box-shadow:none; font-size:15px;
}

.mp-geo-note{ margin:0; font-size:12px; line-height:1.45; color:#6a7a72; text-align:center; }
.mp-done{ display:flex; gap:8px; align-items:flex-start; font-size:15px; line-height:1.5; font-weight:700; color:#1f7a5e; background:#E9F7F0; border:1px solid #c7e6d8; border-radius:14px; padding:13px 14px; }
.mp-err{ font-size:13px; color:#B23A28; text-align:center; }

/* Estado vacío / no encontrada */
.mp-empty{ padding:30px 22px 26px; text-align:center; }
.mp-empty-ic{ display:flex; justify-content:center; margin-bottom:10px; }
.mp-empty-t{ font-size:21px; font-weight:900; margin:0 0 8px; }
.mp-empty-d{ font-size:14.5px; line-height:1.55; color:#5a6b63; margin:0 0 18px; }

/* Skeleton */
.mp-skel{ padding:0; }
.mp-skel-photo{ aspect-ratio:4/3; width:100%; background:#e8efeb; }
.mp-skel-line{ height:14px; border-radius:7px; background:#e8efeb; margin:16px 16px 0; }
.mp-skel-line.short{ width:55%; margin-bottom:22px; }
.mp-skel-photo, .mp-skel-line{ animation:mp-shim 1.3s infinite; }
@keyframes mp-shim{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.mp-foot{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center;
  font-size:12px; color:#5a6b63; text-align:center; max-width:440px; margin-top:2px;
}

@media (min-width:560px){
  .mp-wrap{ padding-top:34px; gap:18px; }
  .mp-name{ font-size:34px; }
}