/* ══════════════════════════════════════════════════════════════
   mascotadesaparecida.com — estética "cartel de farola"
   ══════════════════════════════════════════════════════════════ */
:root {
  --tinta: #1e2a23;        /* verde-negro, texto */
  --papel: #fbfaf6;        /* fondo papel */
  --papel-2: #f1efe7;      /* paneles */
  --verde: #2f6b4f;        /* marca: verde parque */
  --verde-osc: #24523d;
  --ambar: #ffb100;        /* alta visibilidad: acción principal */
  --rojo: #c6402e;         /* estado: perdida */
  --azul: #3b6fa0;         /* estado: encontrada / avistada */
  --gris: #6b7570;
  --linea: #d9d6ca;
  --radio: 10px;
  --sombra: 0 2px 10px rgba(30,42,35,.10);
  --display: 'Anton', Impact, sans-serif;
  --cuerpo: 'Public Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--cuerpo); color: var(--tinta); background: var(--papel); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--verde); }
h1, h2, h3 { line-height: 1.1; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }

/* ── Cabecera ── */
header.top {
  position: sticky; top: 0; z-index: 1100; background: var(--papel);
  border-bottom: 3px solid var(--tinta);
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
}
.logo { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; color: var(--tinta); text-decoration: none; letter-spacing: .02em; }
.logo span { color: var(--verde); }
nav.principal { margin-left: auto; display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
nav.principal a { text-decoration: none; color: var(--tinta); padding: .45rem .7rem; border-radius: 8px; font-weight: 600; font-size: .95rem; }
nav.principal a:hover { background: var(--papel-2); }
nav.principal a.destaca { background: var(--ambar); color: var(--tinta); border: 2px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta); }
nav.principal a.destaca:hover { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--tinta); }
.burbuja { background: var(--rojo); color: #fff; border-radius: 99px; font-size: .7rem; padding: 0 .4rem; margin-left: .25rem; }

/* ── Botones ── */
.btn { display: inline-block; font: 600 1rem var(--cuerpo); padding: .65rem 1.2rem; border-radius: 8px;
  border: 2px solid var(--tinta); cursor: pointer; text-decoration: none; text-align: center; background: #fff; color: var(--tinta); }
.btn:hover { background: var(--papel-2); }
.btn-primario { background: var(--ambar); box-shadow: 3px 3px 0 var(--tinta); }
.btn-primario:hover { background: var(--ambar); transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--tinta); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: var(--verde-osc); color:#fff; }
.btn-peligro { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.btn-grande { font-size: 1.15rem; padding: .9rem 1.6rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Hero ── */
.hero { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 480px; border-bottom: 3px solid var(--tinta); }
.hero-texto { padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; background:
  repeating-linear-gradient(-45deg, transparent 0 26px, rgba(47,107,79,.05) 26px 28px), var(--papel); }
.hero-texto h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin: 0; }
.hero-texto h1 em { font-style: normal; color: var(--rojo); }
.hero-texto p { font-size: 1.1rem; max-width: 46ch; margin: 0; color: var(--gris); }
.hero-acciones { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-mapa { min-height: 380px; border-left: 3px solid var(--tinta); }
#mapa, #mapa-pin, #mapa-ficha { width: 100%; height: 100%; min-height: 380px; z-index: 1; }

/* ── Tarjetas de mascota (estilo cartel) ── */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.cartel-card { background: #fff; border: 2px solid var(--tinta); border-radius: var(--radio); overflow: hidden;
  text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform .15s; position: relative; }
.cartel-card:hover { transform: translateY(-3px) rotate(-.4deg); }
.cartel-card .foto { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--papel-2); }
.cartel-card .sin-foto { aspect-ratio: 4/3; display: grid; place-items: center; font-size: 3rem; background: var(--papel-2); }
.cartel-card .cuerpo-card { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.cartel-card h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }
.meta { font-size: .85rem; color: var(--gris); }
.recompensa { font-weight: 800; color: var(--verde); }

/* etiqueta de estado, como cinta pegada */
.cinta { position: absolute; top: .7rem; left: -.5rem; padding: .2rem .8rem; font: 700 .78rem var(--cuerpo);
  text-transform: uppercase; letter-spacing: .06em; color: #fff; transform: rotate(-3deg); box-shadow: 1px 2px 4px rgba(0,0,0,.25); }
.cinta.perdida { background: var(--rojo); }
.cinta.encontrada { background: var(--azul); }
.cinta.avistada { background: var(--azul); }
.cinta.resuelta { background: var(--verde); }
.cinta.destacada { left: auto; right: -.4rem; top: .6rem; transform: rotate(3deg); background: var(--ambar); color: var(--tinta); }

/* ── Secciones ── */
.seccion { max-width: 1150px; margin: 0 auto; padding: 2.5rem 1rem; }
.seccion > h2 { font-family: var(--display); font-size: 1.8rem; text-transform: uppercase; border-bottom: 3px solid var(--tinta); padding-bottom: .4rem; }

/* ── Formularios ── */
form.tarjeta, .tarjeta { background: #fff; border: 2px solid var(--tinta); border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra); }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .95rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .6rem .7rem; border: 2px solid var(--linea);
  border-radius: 8px; font: 1rem var(--cuerpo); background: var(--papel); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--ambar); border-color: var(--tinta); }
.campo .pista { font-size: .82rem; color: var(--gris); margin-top: .25rem; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
fieldset { border: 2px dashed var(--linea); border-radius: var(--radio); margin: 0 0 1.2rem; padding: 1rem; }
legend { font-family: var(--display); text-transform: uppercase; padding: 0 .5rem; font-size: 1.05rem; }

/* selector de tipo con iconos grandes */
.tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; position: relative; }
.tipos input { position: absolute; opacity: 0; }
.tipos label { border: 2px solid var(--linea); border-radius: var(--radio); padding: .8rem .4rem; text-align: center;
  cursor: pointer; font-weight: 700; background: #fff; }
.tipos label .icono { font-size: 1.8rem; display: block; }
.tipos input:checked + label { border-color: var(--tinta); background: var(--ambar); box-shadow: 2px 2px 0 var(--tinta); }
.tipos input:focus-visible + label { outline: 3px solid var(--verde); }

/* subida de fotos */
.zona-fotos { border: 3px dashed var(--verde); border-radius: var(--radio); padding: 1.4rem; text-align: center;
  cursor: pointer; background: rgba(47,107,79,.04); }
.zona-fotos.arrastrando { background: rgba(255,177,0,.15); border-color: var(--ambar); }
.previas { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.previas img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 2px solid var(--tinta); }

/* ── Avisos ── */
.aviso { padding: .8rem 1rem; border-radius: 8px; border: 2px solid; margin: 1rem 0; font-weight: 600; }
.aviso.ok { border-color: var(--verde); background: #eaf4ee; color: var(--verde-osc); }
.aviso.error { border-color: var(--rojo); background: #faeae7; color: var(--rojo); }
.oculto { display: none !important; }

/* ── Ficha ── */
.ficha { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start; }
.galeria img.principal { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 3px solid var(--tinta); border-radius: var(--radio); }
.galeria .miniaturas { display: flex; gap: .5rem; margin-top: .6rem; }
.galeria .miniaturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 2px solid var(--linea); cursor: pointer; }
.galeria .miniaturas img.activa { border-color: var(--ambar); }
.galeria img.principal { cursor: zoom-in; }
.datos-lista { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 1rem 0; }
.datos-lista dt { font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; color: var(--gris); }
.datos-lista dd { margin: 0; }
.acciones-ficha { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }


/* ── Chat ── */
.chat-caja { display: grid; grid-template-rows: 1fr auto; height: 60vh; background: #fff; border: 2px solid var(--tinta); border-radius: var(--radio); overflow: hidden; }
.chat-mensajes { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--papel-2); }
.msg { max-width: 75%; padding: .5rem .8rem; border-radius: 12px; border: 1.5px solid var(--tinta); background: #fff; }
.msg.mio { align-self: flex-end; background: var(--ambar); }
.msg .hora { display: block; font-size: .7rem; color: var(--gris); }
.msg.sistema { align-self: center; background: transparent; border: none; color: var(--gris); font-size: .82rem; }
.chat-envio { display: flex; gap: .5rem; padding: .7rem; border-top: 2px solid var(--tinta); background: #fff; }
.chat-envio input { flex: 1; padding: .6rem; border: 2px solid var(--linea); border-radius: 8px; font: 1rem var(--cuerpo); }
.conv { display: flex; gap: .8rem; padding: .8rem; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); align-items: center; justify-content: space-between; }
.conv:hover { background: var(--papel-2); }
.conv .quien { font-weight: 800; }
.conv .ultimo { color: var(--gris); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ── Panel ── */
.stats { display: flex; gap: 1.2rem; font-size: .85rem; color: var(--gris); }
.stats b { color: var(--tinta); font-size: 1.1rem; display: block; }



/* ── Pie de página ampliado ── */
footer.pie { text-align: left; padding: 2.5rem 1.2rem 1.2rem; }
.pie-grid { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.pie-grid .logo { margin-bottom: .5rem; display: inline-block; }
.pie-grid p { color: #c9cfc9; font-size: .9rem; margin: .4rem 0 0; }
.pie-grid h4 { margin: 0 0 .5rem; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; color: var(--ambar); }
.pie-grid a { display: block; color: var(--papel); text-decoration: none; margin-bottom: .35rem; font-size: .92rem; opacity: .9; }
.pie-grid a:hover { text-decoration: underline; opacity: 1; }
.pie-copy { max-width: 1150px; margin: 2rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .8rem; color: #9aa39c; }
@media (max-width: 700px) { .pie-grid { grid-template-columns: 1fr 1fr; } }

/* ── Sesión en la barra ── */
.quien-soy { font-weight: 800; color: var(--verde); padding: .45rem .3rem; font-size: .92rem; }

/* ── Aviso de cookies ── */
.aviso-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1500; max-width: 640px; margin: 0 auto;
  background: var(--tinta); color: var(--papel); padding: .9rem 1.1rem; border-radius: 10px;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: .88rem;
}
.aviso-cookies a { color: var(--ambar); }
.aviso-cookies .btn { flex-shrink: 0; background: var(--ambar); border-color: var(--ambar); color: var(--tinta); font-weight: 800; }

footer.pie { border-top: 3px solid var(--tinta); background: var(--tinta); color: var(--papel); margin-top: 3rem; padding: 2rem 1rem; text-align: center; font-size: .9rem; }
footer.pie a { color: var(--ambar); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-mapa { border-left: none; border-top: 3px solid var(--tinta); }
  .ficha { grid-template-columns: 1fr; }
  .fila { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }