/* ============================================================
   ClickmePro / NOVRIVA NFC — Estilos (Fase 0)
   Lenguaje visual del prototipo unificado:
   fondo blanco cálido #FFF9F2, negro sólido, naranja flama #FF5A1F.
   Premium tipo Dot: limpio, vivo, nunca gris apagado. Móvil primero.
   ============================================================ */
:root{
  --bg:#FFF9F2;
  --ink:#111110;
  --ink-soft:#3d3a36;
  --flame:#FF5A1F;
  --flame-dark:#D63A10;
  --flame-soft:#FFE7DE;
  --card:#FFFFFF;
  --line:#F0E4D8;
  --green:#1FAA55;
  --green-soft:#E3F6EA;
  --red:#C22E24;
  --red-soft:#FBE7E4;
  --amber:#9A6206;
  --amber-soft:#FDF0D3;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(61,30,16,.10);
  --shadow-sm:0 4px 14px rgba(61,30,16,.08);
  --font-head:"Sora",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.01em}
a{color:var(--flame-dark)}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:1rem}

/* ---------- Header ---------- */
.app-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;
  background:rgba(255,249,242,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{
  width:38px;height:38px;border-radius:12px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.15rem;
  box-shadow:inset 0 0 0 2px var(--flame);
}
.brand-name{font-family:var(--font-head);font-weight:800;font-size:1.15rem}
.brand-name em{font-style:normal;color:var(--flame)}
.app-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app-nav a,.app-nav button{
  text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
}
.app-nav a.nav-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
.app-nav a:hover,.app-nav button:hover{border-color:var(--flame);color:var(--flame-dark)}
.app-nav a.nav-cta:hover{background:var(--flame);border-color:var(--flame);color:#fff}

/* ---------- Layout ---------- */
.app-main{flex:1;width:100%;max-width:1060px;margin:0 auto;padding:22px 16px 48px}
.app-footer{
  text-align:center;padding:26px 16px 34px;color:var(--ink-soft);font-size:.9rem;
  border-top:1px solid var(--line);
}
.footer-small{color:var(--flame-dark);font-weight:700;margin-top:2px}
.wrap-narrow{max-width:560px;margin:0 auto}
.section{margin:34px 0}
.section h2{font-size:1.5rem;margin-bottom:8px}
.section-sub{color:var(--ink-soft);margin-bottom:16px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:none;cursor:pointer;
  font-weight:800;font-size:1rem;text-decoration:none;
  background:var(--ink);color:#fff;transition:transform .08s ease,background .15s ease;
}
.btn:active{transform:scale(.98)}
.btn-flame{background:var(--flame);color:#fff}
.btn-flame:hover{background:var(--flame-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2a2926}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--flame);color:var(--flame-dark)}
.btn-danger{background:#fff;color:var(--red);border:1.5px solid #F2C4BE}
.btn-danger:hover{background:var(--red-soft)}
.btn-small{padding:8px 14px;font-size:.88rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- Landing ---------- */
.hero{padding:26px 0 8px;text-align:center}
.hero-badge{
  display:inline-block;background:var(--flame-soft);color:var(--flame-dark);
  font-weight:800;font-size:.82rem;padding:6px 14px;border-radius:999px;letter-spacing:.04em;
  text-transform:uppercase;
}
.hero h1{font-size:2.35rem;margin:16px 0 10px}
.hero h1 .hl{color:var(--flame)}
.hero p{color:var(--ink-soft);font-size:1.08rem;max-width:520px;margin:0 auto}
.hero .btn-row{justify-content:center;margin-top:22px}
.how-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.how-grid{grid-template-columns:repeat(3,1fr)}}
.how-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);
}
.how-num{
  width:34px;height:34px;border-radius:50%;background:var(--flame);color:#fff;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;margin-bottom:10px;
}
.how-card h3{font-size:1.05rem;margin-bottom:4px}
.how-card p{color:var(--ink-soft);font-size:.95rem}
.price-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.price-grid{grid-template-columns:repeat(3,1fr)}}
.price-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;
}
.price-card .p-icon{font-size:1.7rem}
.price-card h3{font-size:1.05rem}
.price-card p{color:var(--ink-soft);font-size:.92rem;flex:1}
.price-tag{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--ink)}
.price-tag small{font-size:.8rem;color:var(--ink-soft);font-weight:600}

/* ---------- Tarjetas / paneles ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);margin-bottom:16px;
}
.card h2,.card h3{margin-bottom:10px}
.card h2{font-size:1.3rem}
.card h3{font-size:1.08rem}
.muted{color:var(--ink-soft)}
.small{font-size:.88rem}
.hr{border:none;border-top:1px solid var(--line);margin:18px 0}

/* ---------- Formularios ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.92rem}
.field .hint{font-size:.83rem;color:var(--ink-soft);font-weight:500}
.field input,.field select,.field textarea{
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);width:100%;
}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--flame);box-shadow:0 0 0 3px var(--flame-soft);
}
.field-row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:flex-start;gap:10px;font-weight:600;font-size:.95rem;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--flame)}

/* ---------- Avisos ---------- */
.alert{border-radius:var(--radius-sm);padding:14px 16px;font-weight:600;margin-bottom:14px}
.alert-error{background:var(--red-soft);color:var(--red);border:1px solid #F2C4BE}
.alert-ok{background:var(--green-soft);color:#0E6B34;border:1px solid #BEE7CC}
.alert-info{background:var(--flame-soft);color:var(--flame-dark);border:1px solid #FFD3C2}
.alert-warn{background:var(--amber-soft);color:var(--amber);border:1px solid #F2DFAE}
.hidden{display:none !important}

/* ---------- Página pública ---------- */
.pub-wrap{max-width:560px;margin:0 auto}
.pub-banner{
  height:150px;border-radius:var(--radius);background:linear-gradient(120deg,var(--flame),#FF8A3D);
  background-size:cover;background-position:center;box-shadow:var(--shadow-sm);
}
.pub-photo{
  width:118px;height:118px;border-radius:50%;object-fit:cover;background:#fff;
  border:4px solid #fff;box-shadow:var(--shadow);margin:-59px auto 0;position:relative;
  display:block;
}
.pub-photo-fallback{
  width:118px;height:118px;border-radius:50%;background:var(--ink);color:#fff;
  border:4px solid #fff;box-shadow:var(--shadow);margin:-59px auto 0;position:relative;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:2rem;
}
.pub-head{text-align:center;padding:14px 8px 4px}
.pub-head h1{font-size:1.7rem}
.pub-titular{color:var(--flame-dark);font-weight:800;margin-top:2px}
.pub-desc{color:var(--ink-soft);margin-top:8px;white-space:pre-wrap}
.pub-city{color:var(--ink-soft);font-weight:700;margin-top:8px;font-size:.92rem}
.pub-links{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.link-btn{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  background:#fff;border:1.5px solid var(--line);border-radius:16px;
  padding:15px 18px;color:var(--ink);font-weight:800;font-size:1.02rem;
  box-shadow:var(--shadow-sm);transition:border-color .15s ease,transform .08s ease;
}
.link-btn:active{transform:scale(.99)}
.link-btn:hover{border-color:var(--flame)}
.link-btn .l-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--flame-soft);
  display:grid;place-items:center;font-size:1.25rem;
}
.link-btn .l-pay{margin-left:auto;font-size:.72rem;background:var(--amber-soft);color:var(--amber);
  padding:3px 9px;border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.lost-banner{
  background:var(--red);color:#fff;border-radius:var(--radius);padding:18px;
  text-align:center;margin-bottom:16px;box-shadow:var(--shadow);
}
.lost-banner h2{font-size:1.45rem;letter-spacing:.02em}
.lost-banner p{font-weight:600;opacity:.95}
.pet-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.pet-fact{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px}
.pet-fact .f-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:800}
.pet-fact .f-value{font-weight:700;margin-top:1px;overflow-wrap:anywhere}
.pet-fact.full{grid-column:1 / -1}
.pet-fact.alert-fact{background:var(--amber-soft);border-color:#F2DFAE}
.found-box{margin-top:20px}
.state-box{
  max-width:520px;margin:34px auto;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 24px;box-shadow:var(--shadow-sm);
}
.state-box .s-icon{font-size:2.6rem;margin-bottom:10px}
.state-box h1{font-size:1.45rem;margin-bottom:8px}
.state-box p{color:var(--ink-soft)}
.state-box .btn-row{justify-content:center}
.pub-foot{text-align:center;color:var(--ink-soft);font-size:.82rem;margin-top:26px}
.pub-foot strong{color:var(--ink)}

/* ---------- Esqueleto de carga ---------- */
.skeleton-wrap{max-width:560px;margin:0 auto}
.skeleton{background:linear-gradient(100deg,#F3E7DA 40%,#FBF0E4 50%,#F3E7DA 60%);background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:var(--radius-sm)}
@keyframes sk{to{background-position:-200% 0}}
.sk-banner{height:150px;border-radius:var(--radius)}
.sk-line{height:20px;margin-top:16px}
.sk-line.w60{width:60%;margin-left:auto;margin-right:auto}
.sk-line.w40{width:40%;margin-left:auto;margin-right:auto}
.sk-card{height:64px;margin-top:22px}

/* ---------- Panel del dueño ---------- */
.perfil-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.perfil-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:13px 16px;
}
.perfil-item.sel{border-color:var(--flame);box-shadow:0 0 0 3px var(--flame-soft)}
.perfil-item img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--flame-soft)}
.perfil-item .pi-fallback{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;flex:0 0 52px}
.perfil-item .pi-name{font-family:var(--font-head);font-weight:700}
.perfil-item .pi-meta{font-size:.85rem;color:var(--ink-soft)}
.perfil-item .pi-arrow{margin-left:auto;color:var(--flame-dark);font-weight:800}
.thumb-preview{width:92px;height:92px;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:#fff}
.thumb-banner{width:100%;height:90px;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:#fff}
.enlace-row{
  display:flex;gap:8px;align-items:center;background:#FFFCF8;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px;margin-bottom:9px;flex-wrap:wrap;
}
.enlace-row .e-main{flex:1 1 180px;min-width:160px}
.enlace-row .e-type{font-weight:800;font-size:.9rem}
.enlace-row .e-val{font-size:.85rem;color:var(--ink-soft);overflow-wrap:anywhere}
.icon-btn{
  border:1.5px solid var(--line);background:#fff;border-radius:10px;width:38px;height:38px;
  cursor:pointer;font-size:1rem;display:grid;place-items:center;flex:0 0 38px;
}
.icon-btn:hover{border-color:var(--flame)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.gallery figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.gallery img{width:100%;height:104px;object-fit:cover}
.gallery figcaption{font-size:.74rem;padding:6px 8px;color:var(--ink-soft);font-weight:700}
.gallery .g-actions{display:flex;gap:6px;padding:0 8px 8px}
.gallery .g-principal{position:absolute;top:8px;left:8px;background:var(--flame);color:#fff;
  font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:999px;text-transform:uppercase}
.scan-list{list-style:none}
.scan-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:.93rem}
.scan-list li:last-child{border-bottom:none}
.scan-via{font-weight:800;color:var(--flame-dark);text-transform:uppercase;font-size:.78rem}

/* ---------- Admin ---------- */
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.admin-tabs button{
  padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font-weight:800;cursor:pointer;font-size:.92rem;
}
.admin-tabs button.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-head);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;background:#FFFCF8}
tr:last-child td{border-bottom:none}
td code{font-size:.85rem;background:var(--flame-soft);padding:2px 7px;border-radius:6px;font-weight:700}
.secret-cell{font-family:ui-monospace,Menlo,monospace;font-weight:800;color:var(--flame-dark)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.76rem;font-weight:800;background:#EFE9E1;color:var(--ink-soft)}
.badge.b-activado{background:var(--green-soft);color:#0E6B34}
.badge.b-vendido,.badge.b-verificado{background:#E1F0FE;color:#175B9E}
.badge.b-desactivado,.badge.b-reemplazado{background:var(--red-soft);color:var(--red)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.filter-row{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(min-width:640px){.filter-row{grid-template-columns:1fr 1fr auto;align-items:end}}
.mono{font-family:ui-monospace,Menlo,monospace}