/*
 * style.css — Estilos principales de mimascota.ar
 * Frontend: index.html y páginas públicas
 * Fuentes: Berlin Sans FB (BRLNSB.TTF / BRLNSDB.TTF)
 */

/* ── Fuentes Berlin Sans FB ─────────────────────────────────────────────── */
@font-face {
  font-family: 'BerlinSans';
  src: url('/fonts/BRLNSB.TTF') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'BerlinSans';
  src: url('/fonts/BRLNSDB.TTF') format('truetype');
  font-weight: 700;
  font-display: swap;
}
/* Alias para compatibilidad con referencias 'Berlin Sans FB' */
@font-face {
  font-family: 'Berlin Sans FB';
  src: url('/fonts/BRLNSB.TTF') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Berlin Sans FB';
  src: url('/fonts/BRLNSDB.TTF') format('truetype');
  font-weight: 700;
  font-display: swap;
}


/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --verde:        #3d5a4e;
  --verde-oscuro: #2c4238;
  --verde-claro:  #f0f5f3;
  --verde-medio:  #dde8e3;
  --dorado:       #c9a84c;
  --dorado-claro: #e8c97a;
  --dorado-bg:    #faf5e8;
  --texto:        #1e2d28;
  --texto-suave:  #5a7a6a;
  --blanco:       #ffffff;
  --berlin:       'BerlinSans', 'Trebuchet MS', sans-serif;
  --body:         'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

h1, h2, h3 { font-family: var(--berlin); }

body {
  font-family: var(--body);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
#header {
  background: var(--blanco);
  border-bottom: 2px solid var(--dorado);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-paw {
  height: 62px;
  width: auto;
  flex-shrink: 0;
}

.logo-textos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-nombre {
  font-family: var(--berlin);
  font-weight: 700;
  font-size: 30px;
  color: var(--verde);
  letter-spacing: -0.3px;
  line-height: 1;
  display: block;
}

.logo-tagline {
  font-family: var(--berlin);
  font-weight: 400;
  font-size: 9px;
  color: var(--dorado);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: block;
  margin-top: 3px;
  /* Alineado a la izquierda igual que el nombre */
  text-align: left;
}

/* Auth header */
#header-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-login {
  padding: 8px 22px;
  border: 1.5px solid var(--verde);
  background: transparent;
  color: var(--verde);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--body);
  transition: all 0.2s;
}
.btn-login:hover { background: var(--verde); color: var(--blanco); }

.btn-registro {
  padding: 8px 22px;
  border: 1.5px solid var(--dorado);
  background: var(--dorado);
  color: var(--blanco);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--body);
  transition: all 0.2s;
}
.btn-registro:hover { background: var(--dorado-claro); border-color: var(--dorado-claro); }

/* User menu */
.user-menu { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; }

.user-avatar {
  width: 38px; height: 38px;
  background: var(--verde);
  color: var(--blanco);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  border: 2px solid var(--dorado);
}

.user-nombre { font-size: 13px; font-weight: 600; color: var(--verde); }

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--blanco);
  border: 1px solid var(--verde-medio);
  border-radius: 10px;
  min-width: 180px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 200;
}
.user-dropdown.open { display: block; }
.user-dropdown a {
  display: block; padding: 9px 16px;
  font-size: 13px; color: var(--texto);
  text-decoration: none; transition: background 0.15s;
}
.user-dropdown a:hover { background: var(--verde-claro); color: var(--verde); }
.dropdown-sep { height: 1px; background: var(--verde-medio); margin: 4px 0; }

/* ── Menú de navegación ─────────────────────────────────────────────────── */
#nav-menu {
  background: var(--verde);
  position: relative;
  overflow: visible;
}

.nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

.nav-inner {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: visible;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }

.nav-item {
  color: rgba(255,255,255,0.72);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--berlin);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 13px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: all 0.2s;
  text-decoration: none;
  display: block;
}
.nav-item:hover, .nav-item.active {
  color: var(--dorado);
  border-bottom-color: var(--dorado);
}
.nav-item-admin {
  margin-left: auto;
  color: var(--dorado) !important;
  opacity: 0.8;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0 12px 0;
  margin-right: 16px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Responsive nav */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-inner {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--verde-oscuro);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    z-index: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  .nav-inner.open { display: flex; }
  .nav-item {
    padding: 13px 24px;
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 13px;
  }
  .nav-item:hover, .nav-item.active {
    border-bottom: none;
    border-left-color: var(--dorado);
    background: rgba(255,255,255,0.05);
  }
  .nav-item-admin { margin-left: 0; }
}

/* ── Hero / Buscador ────────────────────────────────────────────────────── */
#hero {
  background: var(--verde-claro);
  border-bottom: 1px solid var(--verde-medio);
  padding: 40px 24px 32px;
  text-align: center;
}

.hero-titulo {
  font-family: var(--berlin);
  font-size: 32px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.hero-sub {
  font-size: 15px;
  color: var(--texto-suave);
  margin-bottom: 28px;
}

.buscador {
  display: flex;
  max-width: 520px;
  margin: 0 auto 24px;
  border: 2px solid var(--verde);
  border-radius: 32px;
  overflow: hidden;
  background: var(--blanco);
}

.buscador input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: var(--body);
  color: var(--texto);
  background: transparent;
}

.buscador button {
  padding: 12px 24px;
  background: var(--verde);
  border: none;
  color: var(--blanco);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--body);
  transition: background 0.2s;
}
.buscador button:hover { background: var(--verde-oscuro); }

/* Filtros de especie */
.filtros {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filtro-btn {
  padding: 7px 18px;
  border: 1.5px solid var(--verde);
  background: var(--blanco);
  color: var(--verde);
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--body);
  transition: all 0.2s;
}
.filtro-btn:hover, .filtro-btn.active {
  background: var(--verde);
  color: var(--blanco);
}

/* ── Carrusel de razas ──────────────────────────────────────────────────── */
#seccion-razas {
  padding: 36px 0;
  background: var(--blanco);
}

.seccion-titulo {
  font-family: var(--berlin);
  font-size: 20px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.seccion-titulo::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--verde-medio);
}

.carrusel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* Cards de raza */
.raza-card {
  border: 1px solid var(--verde-medio);
  border-radius: 14px;
  overflow: hidden;
  background: var(--blanco);
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.raza-card:hover {
  border-color: var(--dorado);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(61,90,78,0.12);
}

.raza-card-img {
  height: 160px;
  background: var(--verde-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  position: relative;
  overflow: hidden;
}

.raza-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.raza-especie-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--dorado);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.raza-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.raza-nombre {
  font-family: var(--berlin);
  font-size: 16px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 2px;
}

.raza-origen {
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.raza-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  flex: 1;
}

.raza-tag {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--verde-claro);
  color: var(--verde);
  font-weight: 600;
}

.raza-acciones {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--verde-medio);
  padding-top: 10px;
}

.raza-accion {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--verde-medio);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--verde);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: var(--body);
  transition: all 0.15s;
}
.raza-accion:hover { background: var(--verde); color: var(--blanco); border-color: var(--verde); }
.raza-accion.adoptar { border-color: var(--dorado); color: var(--dorado-claro); background: var(--dorado-bg); }
.raza-accion.adoptar:hover { background: var(--dorado); color: var(--blanco); border-color: var(--dorado); }

.loading-razas {
  text-align: center;
  padding: 40px;
  color: var(--texto-suave);
  font-size: 14px;
}

.ver-todas-btn {
  display: block;
  margin: 28px auto 0;
  padding: 12px 40px;
  background: var(--verde);
  color: var(--blanco);
  border: none;
  border-radius: 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--berlin);
  letter-spacing: 0.5px;
  transition: background 0.2s;
  text-decoration: none;
}
.ver-todas-btn:hover { background: var(--verde-oscuro); }

/* ── Secciones secundarias ──────────────────────────────────────────────── */
#secciones-rapidas {
  background: var(--dorado-bg);
  border-top: 1px solid #ede0b8;
  border-bottom: 1px solid #ede0b8;
  padding: 36px 0;
}

.secciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.seccion-card {
  background: var(--blanco);
  border: 1px solid #ede0b8;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--texto);
}
.seccion-card:hover {
  border-color: var(--dorado);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201,168,76,0.15);
}

.seccion-card-icono {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
}

.seccion-card-nombre {
  font-family: var(--berlin);
  font-size: 13px;
  font-weight: 700;
  color: var(--verde);
  display: block;
}

/* ── Modal de auth ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-card {
  background: var(--blanco);
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  padding: 32px 28px 24px;
  border-top: 4px solid var(--dorado);
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
  animation: modalIn 0.2s ease;
  overflow-y: auto;
  max-height: 90vh;
  scrollbar-gutter: stable;
}

.modal-card::-webkit-scrollbar {
  width: 4px;
}
.modal-card::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 18px;   /* ← respeta el border-radius */
  margin-bottom: 18px;
}
.modal-card::-webkit-scrollbar-thumb {
  background: var(--verde-medio);
  border-radius: 4px;
}

@keyframes modalIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  font-size: 16px; color: var(--texto-suave);
  cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--verde-claro); }

.modal-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.modal-logo-img { width: 40px; height: 40px; object-fit: contain; }

.modal-logo-text { line-height: 1.2; }

.modal-logo-title {
  font-family: var(--berlin);
  font-size: 22px;
  font-weight: 700;
  color: var(--verde);
  display: block;
}

.modal-logo-sub {
  font-family: var(--berlin);
  font-size: 8px;
  color: var(--dorado);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
}

.modal-tabs {
  display: flex;
  border: 1.5px solid var(--verde-medio);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 22px;
}

.modal-tab {
  flex: 1; padding: 9px;
  font-size: 13px; font-weight: 600;
  background: var(--blanco); border: none;
  color: var(--texto-suave); cursor: pointer;
  font-family: var(--body);
  transition: all 0.2s;
}
.modal-tab.active { background: var(--verde); color: var(--blanco); }

.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 9px;
  font-size: 14px;
  color: var(--texto);
  font-family: var(--body);
  outline: none;
  transition: border 0.2s;
  background: var(--blanco);
}
.form-input:focus { border-color: var(--dorado); }

/* Aceptación de términos (registro) */
.form-acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto);
  cursor: pointer;
}
.form-acepto input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--verde);
  cursor: pointer;
}
.form-acepto a { color: var(--dorado); }
/* Visor legal (Términos / Privacidad / Cookies) sobre el formulario */
.modal-card-legal {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding-bottom: 20px;
}
.modal-card-legal .legal-tabs { margin: 0; flex-shrink: 0; }
.legal-contenido {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--texto);
}
.legal-contenido h1 { display: none; }
.legal-contenido h2 {
  font-family: var(--berlin);
  font-size: 16px;
  color: var(--verde);
  margin: 18px 0 6px;
}
.legal-contenido p { margin-bottom: 8px; }
.legal-contenido ul { padding-left: 20px; margin: 6px 0 10px; }
.legal-contenido li { margin-bottom: 4px; }
.legal-contenido a { color: var(--dorado); }
.legal-contenido .legal-meta { font-size: 12px; color: var(--texto-suave); }
.legal-contenido .legal-aviso {
  background: var(--dorado-bg);
  border-left: 4px solid var(--dorado);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}
.legal-contenido .legal-leyenda {
  background: var(--verde-claro);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
}
.legal-volver { margin-top: 0; flex-shrink: 0; }
.form-leyenda-datos {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.45;
  color: #8aaa99;
  text-align: justify;
}

.toggle-pass {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer; font-size: 14px;
  padding: 4px;
}

.btn-submit {
  width: 100%;
  padding: 12px;
  background: var(--verde);
  color: var(--blanco);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--berlin);
  letter-spacing: 0.3px;
  margin-top: 4px;
  transition: background 0.2s;
}
.btn-submit:hover { background: var(--verde-oscuro); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-social { margin-top: 18px; }

.social-sep {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--texto-suave);
  margin-bottom: 12px;
}
.social-sep::before, .social-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--verde-medio);
}

.btn-google {
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 9px;
  background: var(--blanco);
  font-size: 13px; font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  font-family: var(--body);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: border-color 0.2s;
}
.btn-google:hover { border-color: var(--verde); }

.form-olvidaste {
  text-align: center;
  font-size: 12px;
  color: var(--dorado);
  margin-top: 12px;
  cursor: pointer;
}
.form-olvidaste:hover { text-decoration: underline; }

.modal-error {
  background: #fff0f0;
  border: 1px solid #f8c0c0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #c0392b;
  margin-top: 12px;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.mm-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--verde);
  color: var(--blanco);
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px; font-weight: 600;
  opacity: 0;
  transition: all 0.3s;
  z-index: 9999;
  font-family: var(--body);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.mm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ── Carrusel de razas ──────────────────────────────────────────────────── */
.carrusel-seccion {
  padding: 40px 0 24px;
}

.carrusel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  margin-bottom: 20px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.carrusel-titulo {
  font-family: var(--berlin);
  font-size: clamp(18px, 2.5vw, 26px);
  color: var(--verde);
  font-weight: 700;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.carrusel-titulo-icono { font-size: 1.2em; }

.carrusel-controles {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carrusel-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--verde-medio);
  background: white;
  color: var(--verde);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}
.carrusel-btn:hover { background: var(--verde); color: white; border-color: var(--verde); }
.carrusel-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ver-mas-link {
  font-size: 13px;
  color: var(--dorado);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ver-mas-link:hover { text-decoration: underline; }

.carrusel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 8px 0 20px;
}

/* Fade derecho — indica que hay más */
.carrusel-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255,255,255,1) 0%, transparent 100%);
}

.carrusel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 40px 8px;
  cursor: grab;
  user-select: none;
  /* Centrar cuando hay pocas cards */
  justify-content: safe center;
}
.carrusel-track.is-dragging { cursor: grabbing; }
.carrusel-track::-webkit-scrollbar { display: none; }

/* ── Raza card ───────────────────────────────────────────────────────────── */
.raza-card {
  /* Desktop: 4 cards visibles */
  flex: 0 0 360px;
  max-width: 360px;
  min-width: 200px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(61,90,78,0.08);
  border: 1px solid rgba(61,90,78,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  user-select: none;
}
.raza-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(61,90,78,0.14);
}

.raza-card-img {
  height: 180px;
  background: linear-gradient(135deg, #f0f5f3, #e0ede8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.raza-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.raza-card:hover .raza-card-img img { transform: scale(1.04); }

/* .raza-especie-badge, .raza-card-body, .raza-nombre, .raza-origen,
   .raza-tags y .raza-tag NO se repiten acá: eran una copia duplicada
   que competía con la definición de arriba (línea ~490) y hacía que el
   estilo de las etiquetas variara según qué card cargara el navegador
   primero. Con una sola definición, el look es siempre el mismo,
   tanto en la grilla de razas.html como en el carrusel del home. */

/* .raza-acciones y .raza-accion tampoco se repiten acá — misma razón
   que arriba: era una segunda definición compitiendo con la de la
   línea ~503, y hacía que el botón "Adoptar" se viera con o sin
   relleno dorado según qué card ganara la carrera de estilos. */

/* Separador entre secciones */
.seccion-sep {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  border: none;
  border-top: 1px solid rgba(61,90,78,0.1);
}

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.raza-card-skeleton {
  flex: 0 0 360px;
  max-width: 360px;
  min-width: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: #f0f5f3;
}
.skeleton-img {
  height: 180px;
  background: linear-gradient(90deg, #e0ede8 25%, #f0f5f3 50%, #e0ede8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-body { padding: 14px 16px; }
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e0ede8 25%, #f0f5f3 50%, #e0ede8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 8px;
}
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tablet: 2 cards */
@media (max-width: 768px) {
  .raza-card, .raza-card-skeleton {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
  }
  .carrusel-header { padding: 0 16px; }
  .carrusel-track { padding: 4px 16px 8px; }
  .carrusel-wrapper::after { width: 40px; }
}

/* Móvil: 1 card + borde siguiente */
@media (max-width: 480px) {
  .raza-card, .raza-card-skeleton {
    flex: 0 0 75vw !important;
    width: 75vw !important;
    max-width: 75vw !important;
  }
  .carrusel-track { padding: 4px 20px 8px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#footer {
  background: var(--verde);
  color: rgba(255,255,255,0.75);
  padding: 36px 0 20px;
  margin-top: 48px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

.footer-logo-nombre {
  font-family: var(--berlin);
  font-size: 22px;
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 6px;
}

.footer-tagline {
  font-family: var(--berlin);
  font-size: 9px;
  color: var(--dorado);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-desc {
  font-size: 13px;
  line-height: 1.7;
}

.footer-col h4 {
  font-family: var(--berlin);
  font-size: 13px;
  color: var(--dorado);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  margin-bottom: 7px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--dorado); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .logo-tagline { display: none; }
  .logo-nombre { font-size: 22px; }
  .logo-paw { width: 48px; height: 48px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .hero-titulo { font-size: 24px; }
  .carrusel-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .header-inner { height: 60px; }
}

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .buscador { flex-direction: column; border-radius: 12px; }
  .buscador input, .buscador button { border-radius: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   razas.html — Catálogo de razas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.catalogo-hero {
  background: var(--verde);
  padding: 40px 0 32px;
  color: white;
}
.catalogo-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.catalogo-titulo {
  font-family: var(--berlin);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.catalogo-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
}

/* ── Buscador ────────────────────────────────────────────────────────────── */
.catalogo-buscador {
  display: flex;
  gap: 10px;
  max-width: 540px;
}
.catalogo-buscador input {
  flex: 1;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  outline: none;
  background: rgba(255,255,255,0.15);
  color: white;
  backdrop-filter: blur(4px);
}
.catalogo-buscador input::placeholder { color: rgba(255,255,255,0.55); }
.catalogo-buscador input:focus { background: rgba(255,255,255,0.25); }
.catalogo-buscador button {
  padding: 12px 22px;
  background: var(--dorado);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.catalogo-buscador button:hover { background: #b8933e; }

/* ── Filtros de especie ──────────────────────────────────────────────────── */
.catalogo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.catalogo-toolbar {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.catalogo-resultado {
  font-size: 14px;
  color: var(--texto-suave);
}
.catalogo-resultado strong { color: var(--verde); }

.vista-toggle {
  display: flex;
  border: 1.5px solid var(--verde-medio);
  border-radius: 8px;
  overflow: hidden;
}
.vista-btn {
  padding: 7px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--texto-suave);
  transition: all 0.15s;
}
.vista-btn.active {
  background: var(--verde);
  color: white;
}

/* ── Vista Grid ──────────────────────────────────────────────────────────── */
.catalogo-grid {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.grid-card {
  border-radius: 14px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 12px rgba(61,90,78,0.07);
  border: 1px solid rgba(61,90,78,0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
}
.grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(61,90,78,0.14);
}
.grid-card-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--verde-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.grid-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.grid-card:hover .grid-card-img img { transform: scale(1.06); }
.grid-card-especie {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--dorado);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 12px;
}
.grid-card-body {
  padding: 12px 14px 14px;
}
.grid-card-nombre {
  font-family: var(--berlin);
  font-size: 15px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 3px;
  line-height: 1.2;
}
.grid-card-origen {
  font-size: 11px;
  color: var(--texto-suave);
}

/* ── Vista Lista ─────────────────────────────────────────────────────────── */
.catalogo-lista {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lista-card {
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(61,90,78,0.1);
  box-shadow: 0 2px 10px rgba(61,90,78,0.06);
  display: flex;
  gap: 0;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
}
.lista-card:hover {
  box-shadow: 0 6px 24px rgba(61,90,78,0.12);
  transform: translateX(3px);
}

/* Imagen rectangular 4:3 — muestra el animal sin recortar */
.lista-card-img {
  width: 220px;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--verde-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lista-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s;
}
.lista-card:hover .lista-card-img img { transform: scale(1.06); }
.lista-card-especie {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--dorado);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 12px;
}

.lista-card-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lista-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.lista-card-nombre {
  font-family: var(--berlin);
  font-size: 19px;
  font-weight: 700;
  color: var(--verde);
  line-height: 1.2;
}
.lista-card-ingles {
  font-size: 12px;
  color: var(--texto-suave);
  font-style: italic;
  margin-top: 2px;
}
.lista-card-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--texto-suave);
}
.lista-card-desc {
  font-size: 13px;
  color: #3a5446;
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lista-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.lista-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lista-card-ver {
  font-size: 13px;
  font-weight: 700;
  color: var(--dorado);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Paginado ────────────────────────────────────────────────────────────── */
.paginado {
  max-width: 1200px;
  margin: 36px auto 48px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pag-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--verde-medio);
  background: white;
  color: var(--verde);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pag-btn:hover, .pag-btn.active {
  background: var(--verde);
  color: white;
  border-color: var(--verde);
}
.pag-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pag-btn.active { font-weight: 700; }

/* ── Sin resultados ──────────────────────────────────────────────────────── */
.sin-resultados {
  text-align: center;
  padding: 80px 24px;
  color: var(--texto-suave);
  max-width: 1200px;
  margin: 0 auto;
}
.sin-resultados-icono { font-size: 64px; margin-bottom: 16px; }
.sin-resultados h3 {
  font-family: var(--berlin);
  font-size: 22px;
  color: var(--verde);
  margin-bottom: 8px;
}

/* ── Responsive razas ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lista-card-img { width: 110px; }
  .lista-card-nombre { font-size: 15px; }
  .lista-card-desc { display: none; }
  .catalogo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   mis-mascotas.html — Book de mascotas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout principal ────────────────────────────────────────────────────── */
.book-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 130px);
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  gap: 24px;
  align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.book-sidebar {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.book-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--verde-medio);
}

.book-sidebar-titulo {
  font-family: var(--berlin);
  font-size: 14px;
  font-weight: 700;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.book-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--verde-claro);
}
.book-sidebar-item:last-child { border-bottom: none; }
.book-sidebar-item:hover { background: var(--verde-claro); }
.book-sidebar-item.active { background: var(--verde-claro); border-left: 3px solid var(--verde); }

.book-sidebar-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde-claro);
  border: 2px solid var(--verde-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.book-sidebar-foto img { width: 100%; height: 100%; object-fit: cover; }

.book-sidebar-nombre {
  font-weight: 700;
  font-size: 14px;
  color: var(--texto);
}
.book-sidebar-especie {
  font-size: 12px;
  color: var(--texto-suave);
  text-transform: capitalize;
}
.book-sidebar-vacio {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--texto-suave);
  text-align: center;
}

/* ── Panel principal ─────────────────────────────────────────────────────── */
.book-main {
  min-width: 0;
}

.book-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  background: white;
  border-radius: 16px;
  border: 2px dashed var(--verde-medio);
}
.book-vacio-icono { font-size: 64px; margin-bottom: 16px; }
.book-vacio h2 {
  font-family: var(--berlin);
  font-size: 24px;
  color: var(--verde);
  margin-bottom: 10px;
}
.book-vacio p { font-size: 15px; color: var(--texto-suave); margin-bottom: 24px; max-width: 400px; }

/* ── Header de mascota ───────────────────────────────────────────────────── */
.book-mascota-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--verde-medio);
  margin-bottom: 20px;
}

.book-mascota-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde-claro);
  border: 3px solid var(--verde-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  overflow: hidden;
}

.book-mascota-info { flex: 1; }
.book-mascota-nombre {
  font-family: var(--berlin);
  font-size: 24px;
  color: var(--verde);
  font-weight: 700;
  line-height: 1.2;
}
.book-mascota-meta { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }

.book-mascota-acciones { display: flex; gap: 8px; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.book-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--verde-medio);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Sombra en los bordes que solo aparece si hay más tabs para el costado:
     background-attachment:local hace que las sombras se "peguen" al contenido
     y se tapen con el fade blanco cuando ya no queda nada por scrollear. */
  background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to left, white 30%, rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right, rgba(61,90,78,.18), rgba(61,90,78,0)) 0 0,
    linear-gradient(to left, rgba(61,90,78,.18), rgba(61,90,78,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.book-tabs::-webkit-scrollbar { display: none; }

.book-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--body);
}
.book-tab:hover { color: var(--verde); background: var(--verde-claro); }
.book-tab.active { color: var(--verde); border-bottom-color: var(--verde); background: var(--verde-claro); }

.book-tab-panel { display: none; }
.book-tab-panel.active { display: block; }

/* ── Panel toolbar ───────────────────────────────────────────────────────── */
.book-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.book-panel-titulo {
  font-family: var(--berlin);
  font-size: 20px;
  color: var(--verde);
  font-weight: 700;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.book-btn-primary {
  padding: 10px 20px;
  background: var(--verde);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--body);
  transition: background 0.15s;
  white-space: nowrap;
}
.book-btn-primary:hover { background: var(--verde-oscuro); }
.book-btn-primary.book-btn-lg { padding: 14px 32px; font-size: 15px; }

.book-btn-outline {
  padding: 8px 16px;
  background: white;
  color: var(--verde);
  border: 1.5px solid var(--verde-medio);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--body);
  transition: all 0.15s;
  white-space: nowrap;
}
.book-btn-outline:hover { border-color: var(--verde); background: var(--verde-claro); }

.book-btn-nueva {
  padding: 6px 12px;
  background: var(--dorado);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--body);
  transition: background 0.15s;
}
.book-btn-nueva:hover { background: #b8933e; }

.book-btn-sm {
  padding: 5px 10px;
  background: white;
  color: var(--verde);
  border: 1px solid var(--verde-medio);
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--body);
  transition: all 0.15s;
}
.book-btn-sm:hover { background: var(--verde-claro); }
.book-btn-danger { color: #e53e3e; border-color: #fed7d7; }
.book-btn-danger:hover { background: #fff5f5; border-color: #fc8181; }

/* ── Relatos ─────────────────────────────────────────────────────────────── */
.book-relato-card {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
  position: relative;
}
.book-relato-card.destacado { border-color: var(--dorado); background: var(--dorado-bg); }

.book-relato-badge {
  display: inline-block;
  background: var(--dorado);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.book-relato-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.book-relato-titulo {
  font-family: var(--berlin);
  font-size: 18px;
  color: var(--verde);
  font-weight: 700;
  line-height: 1.3;
}
.book-relato-fecha { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.book-relato-texto {
  font-size: 14px;
  line-height: 1.75;
  color: var(--texto);
  margin-bottom: 16px;
  white-space: pre-line;
}

.book-relato-media {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.book-relato-foto {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  border: 1px solid var(--verde-medio);
  transition: transform 0.2s;
}
.book-relato-foto:hover { transform: scale(1.03); }
.book-relato-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--verde-claro);
  color: var(--verde);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--verde-medio);
}

.book-relato-acciones { display: flex; gap: 8px; }

/* ── Vacunas ─────────────────────────────────────────────────────────────── */
.book-vacunas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.book-vacuna-card {
  background: white;
  border: 1.5px solid var(--verde-medio);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.book-vacuna-card.vencida   { border-color: #fc8181; background: #fff5f5; }
.book-vacuna-card.proxima   { border-color: var(--dorado); background: var(--dorado-bg); }

.book-vacuna-icono { font-size: 24px; flex-shrink: 0; }
.book-vacuna-info  { flex: 1; }
.book-vacuna-nombre {
  font-weight: 700;
  font-size: 14px;
  color: var(--verde);
  margin-bottom: 4px;
}
.book-vacuna-fecha, .book-vacuna-proxima, .book-vacuna-lote {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 2px;
}
.book-vacuna-proxima.text-red    { color: #e53e3e; font-weight: 600; }
.book-vacuna-proxima.text-yellow { color: #c9a84c; font-weight: 600; }

/* ── Veterinario ─────────────────────────────────────────────────────────── */
.book-vet-card {
  background: white;
  border: 1.5px solid var(--verde-medio);
  border-radius: 14px;
  padding: 24px;
  max-width: 500px;
}
.book-vet-badge {
  display: inline-block;
  background: #e6f4ed;
  color: #276749;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.book-vet-nombre {
  font-family: var(--berlin);
  font-size: 20px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 8px;
}
.book-vet-clinica, .book-vet-dato {
  font-size: 14px;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.book-vet-notas {
  margin-top: 12px;
  font-size: 13px;
  color: var(--texto-suave);
  background: var(--verde-claro);
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.6;
}
.book-vet-form { max-width: 640px; }

/* ── Historial clínico ───────────────────────────────────────────────────── */
.book-historial-lista { display: flex; flex-direction: column; gap: 12px; }

.book-historial-card {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.book-historial-icono { font-size: 24px; flex-shrink: 0; }
.book-historial-info  { flex: 1; }
.book-historial-titulo { font-weight: 700; font-size: 14px; color: var(--verde); margin-bottom: 4px; }
.book-historial-meta   { font-size: 12px; color: var(--texto-suave); text-transform: capitalize; margin-bottom: 6px; }
.book-historial-desc   { font-size: 13px; color: var(--texto); line-height: 1.6; }
.book-historial-card-click { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.book-historial-card-click:hover { border-color: var(--verde); box-shadow: 0 2px 10px rgba(61,90,78,.12); }
.book-historial-meta-linea { font-size: 12px; color: var(--texto-suave); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.book-historial-diag { font-size: 13px; color: var(--texto); line-height: 1.5; margin-bottom: 6px; }
.book-historial-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.book-chip { background: var(--verde-claro, #e9f0ec); color: var(--verde); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.book-origen { border-radius: 20px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; }
.book-origen-dueno { background: #fdf6e3; color: #8a6d1d; }
.book-origen-negocio { background: #e9f0ec; color: var(--verde); }

/* Mi veterinario: vincular con un veterinario que ya está en mimascota.ar */
.vinc-cta { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background: var(--dorado-bg); border:1.5px solid #ede0b8; border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.vinc-cta-texto { font-size:14px; color: var(--verde); line-height:1.45; }
.vinc-cta-texto span { display:block; font-size:12.5px; color: var(--texto-suave); }
.vinc-sugerida { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background: var(--verde-claro); border:1.5px solid var(--verde-medio); border-radius:12px; padding:12px 16px; margin-bottom:12px; font-size:14px; }
.vinc-sugerida small { display:block; color: var(--texto-suave); font-size:12px; }
.vinc-tabs { display:flex; gap:6px; margin-bottom:16px; background: var(--verde-claro); border-radius:10px; padding:4px; }
.vinc-tab { flex:1; border:none; background:transparent; border-radius:8px; padding:9px 8px; font:inherit; font-size:13px; font-weight:600; color: var(--texto-suave); cursor:pointer; }
.vinc-tab.active { background: var(--verde); color:#fff; }
.vinc-panel { text-align:center; }
.vinc-ayuda { font-size:13px; color: var(--texto-suave); line-height:1.5; margin-bottom:14px; }
.vinc-codigo { font-family: var(--berlin); font-size:30px; letter-spacing:3px; color: var(--verde); margin:4px 0 10px; user-select:all; }
.vinc-qr { display:flex; justify-content:center; min-height:200px; align-items:center; margin-bottom:14px; }
.vinc-qr canvas, .vinc-qr img { max-width:100%; height:auto; border-radius:8px; }
.vinc-qr { background:#fff; border-radius:12px; padding:14px; }   /* el QR necesita su borde blanco para leerse bien desde otra pantalla */
.vinc-input { text-transform:uppercase; text-align:center; letter-spacing:2px; font-weight:600; }
.vinc-preview { background: var(--verde-claro); border:1.5px solid var(--verde-medio); border-radius:12px; padding:14px; margin-top:14px; text-align:left; }
.vinc-preview strong { display:block; font-size:15px; color: var(--verde); }
.vinc-preview span { font-size:12.5px; color: var(--texto-suave); }
.vinc-error { margin-top:12px; font-size:13px; color:#9b2c2c; background:#fff5f5; border-radius:8px; padding:8px 12px; text-align:left; }
.vinc-acciones { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.vinc-acciones > * { flex:1; }
.book-historial-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.book-modal-sub { font-size: 12.5px; color: var(--texto-suave); margin: -6px 0 16px; line-height: 1.5; }
.book-detalle-fila { margin-bottom: 14px; }
.book-detalle-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 3px; }
.book-detalle-valor { font-size: 14px; color: var(--texto); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.book-detalle-aviso { background: #fff8e6; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #8a6d1d; margin-bottom: 14px; }
@media (max-width: 600px) {
  .book-historial-card { padding: 14px; gap: 10px; }
  .book-historial-acciones { flex-direction: column; align-items: flex-end; }
}

/* ── Premium lock ────────────────────────────────────────────────────────── */
.book-premium-lock {
  text-align: center;
  padding: 60px 40px;
  background: white;
  border: 2px solid var(--dorado);
  border-radius: 16px;
  background: var(--dorado-bg);
}
.book-premium-lock-icono { font-size: 56px; margin-bottom: 16px; }
.book-premium-lock h3 {
  font-family: var(--berlin);
  font-size: 24px;
  color: var(--verde);
  margin-bottom: 10px;
}
.book-premium-lock p {
  font-size: 14px;
  color: var(--texto-suave);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.book-premium-features {
  list-style: none;
  text-align: left;
  display: inline-block;
  margin-bottom: 28px;
}
.book-premium-features li { font-size: 14px; padding: 4px 0; color: var(--texto); }

/* ── Modales ─────────────────────────────────────────────────────────────── */
.book-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.book-modal {
  background: white;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  padding: 32px 28px 24px;
  border-top: 4px solid var(--dorado);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--verde-medio) transparent;
}
.book-modal-wide { max-width: 640px; }

.book-modal-titulo {
  font-family: var(--berlin);
  font-size: 20px;
  color: var(--verde);
  margin-bottom: 20px;
}
.book-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: var(--verde);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.book-modal-close:hover { background: var(--dorado); }
.book-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--verde-medio);
  margin-top: 20px;
}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.book-form-group { margin-bottom: 14px; }
.book-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.book-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 5px;
}
.book-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 9px;
  font-size: 14px;
  color: var(--texto);
  font-family: var(--body);
  outline: none;
  transition: border 0.2s;
  background: white;
  box-sizing: border-box;
}
.book-input:focus { border-color: var(--dorado); }
.book-textarea { min-height: 90px; resize: vertical; }
.book-textarea-lg { min-height: 150px; }

/* ── Media inputs ────────────────────────────────────────────────────────── */
.book-media-agregar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.book-media-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* ── Premium modal ───────────────────────────────────────────────────────── */
.book-premium-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.book-premium-opcion {
  border: 2px solid var(--verde-medio);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.book-premium-opcion:hover  { border-color: var(--verde); background: var(--verde-claro); }
.book-premium-opcion.selected { border-color: var(--dorado); background: var(--dorado-bg); }
.book-premium-icono  { font-size: 32px; margin-bottom: 8px; }
.book-premium-label  { font-weight: 700; font-size: 14px; color: var(--verde); margin-bottom: 4px; }
.book-premium-desc   { font-size: 12px; color: var(--texto-suave); }

.book-premium-instrucciones {
  background: var(--verde-claro);
  border: 1px solid var(--verde-medio);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--texto);
  line-height: 1.8;
}

/* ── Estados ─────────────────────────────────────────────────────────────── */
.book-loading { text-align: center; padding: 40px; color: var(--texto-suave); font-size: 14px; }
.book-error   { text-align: center; padding: 24px; color: #e53e3e; font-size: 14px; }
.book-empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--texto-suave);
  background: white;
  border-radius: 14px;
  border: 1px dashed var(--verde-medio);
}
.book-empty-icono { font-size: 48px; margin-bottom: 12px; }
.book-empty-state p { font-size: 14px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .book-layout { grid-template-columns: 1fr; padding: 12px 16px 40px; gap: 16px; }
  .book-sidebar { position: static; }
  .book-form-row { grid-template-columns: 1fr; }
  .book-premium-opciones { grid-template-columns: 1fr; }
  .book-mascota-header { flex-wrap: wrap; }
  .book-tabs { border-radius: 10px; }
  .book-tab { padding: 10px 12px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Nav dropdown — submenús dinámicos
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s;
  opacity: 0.7;
}

.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--verde);
  border-radius: 12px;
  padding: 14px 6px 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 200;
  border: 1px solid rgba(255,255,255,0.1);
  /* Puente invisible para que el hover no se corte */
  margin-top: 0;
}

/* Puente invisible entre trigger y menú */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
  animation: dropdownIn 0.15s ease;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-dropdown-item {
  display: block;
  padding: 9px 14px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: all 0.15s;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: rgba(255,255,255,0.15);
  color: white;
}

/* Mobile: dropdown como lista expandible */
@media (max-width: 768px) {
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 10px 16px; }
  .nav-dropdown-menu {
    display: none;
    position: static;
    transform: none;
    background: rgba(255,255,255,0.08);
    box-shadow: none;
    border-radius: 8px;
    margin: 4px 8px;
    min-width: unset;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }
  .nav-dropdown-trigger { cursor: pointer; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Admin — Moderación de experiencias
   ═══════════════════════════════════════════════════════════════════════════ */

.exp-card {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

.exp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.exp-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.exp-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.exp-badge-pendiente_revision { background: #fef3c7; color: #92400e; }
.exp-badge-publicada           { background: #d1fae5; color: #065f46; }
.exp-badge-rechazada           { background: #fee2e2; color: #991b1b; }

.exp-raza  { font-size: 13px; color: var(--verde); font-weight: 600; }
.exp-fecha { font-size: 12px; color: var(--texto-suave); }

.exp-card-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.exp-foto {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--verde-medio);
}

.exp-mascota { font-size: 13px; color: var(--texto-suave); margin-bottom: 6px; }

.exp-titulo {
  font-family: var(--berlin);
  font-size: 17px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 8px;
}

.exp-contenido {
  font-size: 14px;
  color: var(--texto);
  line-height: 1.7;
  margin-bottom: 12px;
  white-space: pre-line;
}

.exp-footer {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--texto-suave);
  padding-top: 10px;
  border-top: 1px solid var(--verde-claro);
}


/* ═══════════════════════════════════════════════════════════════════════════
   perfil.html — Perfil de usuario
   ═══════════════════════════════════════════════════════════════════════════ */

.perfil-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  max-width: 1100px;
  width: 100%;
  margin: 32px auto 60px;
  padding: 0 24px;
  gap: 28px;
  align-items: start;
  box-sizing: border-box;
}

/* ── Aside ───────────────────────────────────────────────────────────────── */
.perfil-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: sticky;
  top: 80px;
  min-width: 0;
}

.perfil-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.perfil-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--verde-claro);
  border: 4px solid var(--verde-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  overflow: hidden;
  margin-bottom: 10px;
}

.perfil-avatar-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--verde);
  cursor: pointer;
  padding: 6px 14px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 8px;
  background: white;
  transition: all 0.15s;
}
.perfil-avatar-btn:hover { background: var(--verde-claro); }

.perfil-nombre-aside {
  font-family: var(--berlin);
  font-size: 18px;
  font-weight: 700;
  color: var(--verde);
  text-align: center;
  margin-bottom: 4px;
}

.perfil-email-aside {
  font-size: 13px;
  color: var(--texto-suave);
  text-align: center;
  margin-bottom: 20px;
}

/* ── Credencial ──────────────────────────────────────────────────────────── */
.perfil-credencial-card {
  background: white;
  border: 1.5px solid var(--dorado);
  border-radius: 16px;
  padding: 20px 16px;
  width: 100%;
  background: var(--dorado-bg);
}

.perfil-credencial-titulo {
  font-family: var(--berlin);
  font-size: 15px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 4px;
}

.perfil-credencial-sub {
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 14px;
  line-height: 1.5;
}

.perfil-codigo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.perfil-codigo {
  font-family: monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--verde);
  letter-spacing: 2px;
  background: white;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--verde-medio);
}

/* ── Main ────────────────────────────────────────────────────────────────── */
.perfil-main {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--verde-medio);
  padding: 28px 28px 32px;
  box-sizing: border-box;
  min-width: 0;
}

.perfil-section-titulo {
  font-family: var(--berlin);
  font-size: 18px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 20px;
}

/* ── Preferencias ────────────────────────────────────────────────────────── */
.perfil-prefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.perfil-pref-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--texto);
  transition: all 0.15s;
  background: white;
}
.perfil-pref-item:hover { border-color: var(--verde); background: var(--verde-claro); }
.perfil-pref-item input { accent-color: var(--verde); }

/* ═══════════════════════════════════════════════════════════════════════════
   credencial.html — Vista pública del veterinario
   ═══════════════════════════════════════════════════════════════════════════ */

.cred-layout {
  max-width: 500px;
  margin: 32px auto 60px;
  padding: 0 20px;
}

.cred-card {
  background: white;
  border-radius: 20px;
  border: 2px solid var(--verde-medio);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(61,90,78,0.10);
}

.cred-header {
  background: var(--verde);
  padding: 20px 24px;
  text-align: center;
  color: white;
}

.cred-mm-logo {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.cred-titulo {
  font-family: var(--berlin);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cred-codigo {
  display: inline-block;
  font-family: monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  background: rgba(255,255,255,0.15);
  padding: 6px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3);
}

.cred-duenio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--verde-claro);
}

.cred-duenio-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-claro);
  border: 2px solid var(--verde-medio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.cred-duenio-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cred-duenio-nombre {
  font-family: var(--berlin);
  font-size: 18px;
  color: var(--verde);
  font-weight: 700;
}

.cred-duenio-loc {
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.cred-mascotas-titulo {
  font-family: var(--berlin);
  font-size: 15px;
  color: var(--verde);
  font-weight: 700;
  padding: 16px 24px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cred-mascotas-grid {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cred-mascota-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: white;
}
.cred-mascota-card:hover {
  border-color: var(--verde);
  background: var(--verde-claro);
  transform: translateX(4px);
}

.cred-mascota-foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--verde-claro);
  border: 2px solid var(--verde-medio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.cred-mascota-foto img { width: 100%; height: 100%; object-fit: cover; }

.cred-mascota-info { flex: 1; }
.cred-mascota-nombre { font-weight: 700; font-size: 15px; color: var(--verde); }
.cred-mascota-meta   { font-size: 12px; color: var(--texto-suave); text-transform: capitalize; }
.cred-mascota-edad   { font-size: 12px; color: var(--texto-suave); }
.cred-mascota-arrow  { font-size: 18px; color: var(--texto-suave); }

.cred-vet-banner {
  margin: 16px;
  padding: 16px;
  background: var(--verde-claro);
  border-radius: 12px;
  border: 1px solid var(--verde-medio);
  text-align: center;
}

.cred-vet-banner-texto {
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .perfil-layout {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 16px;
    margin: 16px auto 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .perfil-aside {
    position: static;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
  }
  .perfil-credencial-card {
    width: 100%;
    box-sizing: border-box;
  }
  .perfil-main {
    padding: 20px 14px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
  }
  .perfil-section-titulo {
    font-size: 16px;
  }
  .book-form-row {
    flex-direction: column;
    gap: 0;
  }
  .book-form-grid {
    grid-template-columns: 1fr;
  }
  .book-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)) 0 0,
      linear-gradient(to left, white 30%, rgba(255,255,255,0)) 100% 0,
      linear-gradient(to right, rgba(61,90,78,.18), rgba(61,90,78,0)) 0 0,
      linear-gradient(to left, rgba(61,90,78,.18), rgba(61,90,78,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 8px 100%, 8px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .book-tabs::-webkit-scrollbar { display: none; }
  .book-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 8px 12px;
  }
  .perfil-codigo {
    font-size: 16px;
    letter-spacing: 1px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   negocio.html — Zona de trabajo del negocio
   ═══════════════════════════════════════════════════════════════════════════ */

.negocio-body { background: var(--verde-claro); }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.neg-topbar {
  background: var(--verde);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.neg-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.neg-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: white;
  font-family: var(--berlin);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.neg-topbar-titulo {
  flex: 1;
  font-family: var(--berlin);
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  text-align: center;
}

.neg-topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.neg-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dorado);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.neg-topbar-user span {
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.neg-logout {
  padding: 5px 12px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--body);
  transition: background 0.15s;
}
.neg-logout:hover { background: rgba(255,255,255,0.25); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.neg-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 56px);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.neg-sidebar {
  background: white;
  border-right: 1px solid var(--verde-medio);
  padding: 16px 10px;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.neg-nav { display: flex; flex-direction: column; gap: 2px; }

.neg-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  font-family: var(--body);
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}
.neg-nav-btn:hover  { background: var(--verde-claro); color: var(--verde); }
.neg-nav-btn.active { background: var(--verde-claro); color: var(--verde); border-left: 3px solid var(--verde); }

.neg-nav-icon { font-size: 16px; flex-shrink: 0; }

.neg-nav-sep {
  font-size: 10px;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 12px 4px;
  opacity: 0.6;
}

/* ── Main ────────────────────────────────────────────────────────────────── */
.neg-main { padding: 28px 32px 60px; min-width: 0; }

.neg-panel { display: none; }
.neg-panel.active { display: block; }

.neg-panel-titulo {
  font-family: var(--berlin);
  font-size: 22px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 20px;
}

.neg-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.neg-seccion-titulo {
  font-family: var(--berlin);
  font-size: 16px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.neg-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.neg-stat-card {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
}

.neg-stat-icono { font-size: 28px; margin-bottom: 8px; }
.neg-stat-num {
  font-family: var(--berlin);
  font-size: 28px;
  font-weight: 700;
  color: var(--verde);
  line-height: 1;
  margin-bottom: 6px;
}
.neg-stat-label { font-size: 12px; color: var(--texto-suave); }

/* ── Vincular card ───────────────────────────────────────────────────────── */
.neg-vincular-card {
  background: white;
  border: 1.5px solid var(--dorado);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--dorado-bg);
}

.neg-vincular-titulo {
  font-family: var(--berlin);
  font-size: 16px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 6px;
}

/* ── Pacientes ───────────────────────────────────────────────────────────── */
.neg-pacientes-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.neg-paciente-card {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.15s;
}
.neg-paciente-card:hover { border-color: var(--verde); background: var(--verde-claro); }

.neg-paciente-foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--verde-claro);
  border: 2px solid var(--verde-medio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.neg-paciente-foto img { width: 100%; height: 100%; object-fit: cover; }

.neg-paciente-info { flex: 1; }
.neg-paciente-nombre { font-weight: 700; font-size: 15px; color: var(--verde); }
.neg-paciente-meta   { font-size: 12px; color: var(--texto-suave); text-transform: capitalize; }
.neg-paciente-duenio { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }

/* ── Form card ───────────────────────────────────────────────────────────── */
.neg-form-card {
  background: white;
  border: 1px solid var(--verde-medio);
  border-radius: 14px;
  padding: 24px;
  max-width: 720px;
}

/* ── Próximamente ────────────────────────────────────────────────────────── */
.neg-proximamente {
  text-align: center;
  padding: 80px 40px;
  background: white;
  border: 2px dashed var(--verde-medio);
  border-radius: 16px;
  color: var(--texto-suave);
}
.neg-proximamente h3 {
  font-family: var(--berlin);
  font-size: 20px;
  color: var(--verde);
  margin-bottom: 8px;
}
.neg-proximamente p { font-size: 14px; line-height: 1.6; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* .neg-sidebar { display: none; } ← eliminado 04/07/2026: chocaba con el
     drawer mobile nuevo de negocio.css, que reusa este mismo nombre de clase.
     El resto de las reglas responsive del panel vive ahora en negocio.css. */
  .neg-layout            { grid-template-columns: 1fr; }
  .neg-main              { padding: 16px 16px 40px; }
  .neg-topbar-titulo     { display: none; }
}

/* ── Sidebar dinámico por tipos ──────────────────────────────────────────── */
.neg-nav-tipo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  border-radius: 9px;
  margin-top: 8px;
  background: var(--verde-claro);
  border: 1px solid var(--verde-medio);
  transition: background 0.15s;
  user-select: none;
}
.neg-nav-tipo-header:hover { background: var(--verde-medio); }

.neg-nav-tipo-arrow {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.2s;
}

.neg-nav-tipo-items {
  display: block;
  padding-left: 8px;
  margin-top: 2px;
}

.neg-nav-sub {
  padding-left: 20px;
  font-size: 12px;
  color: var(--texto-suave);
}


/* ═══════════════════════════════════════════════════════════════════════════
   home — Sección mascotas perdidas y encontradas
   ═══════════════════════════════════════════════════════════════════════════ */

.home-perdidas {
  background: #f0ede6;
  padding: 64px 24px;
  border-top: 1px solid var(--verde-medio);
  border-bottom: 1px solid var(--verde-medio);
}

.home-perdidas-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Encabezado */
.hp-head {
  text-align: center;
  margin-bottom: 40px;
}

.hp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blanco);
  border: 1px solid var(--verde-medio);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

.hp-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.hp-dot-perdida    { background: #d94f3b; }
.hp-dot-encontrada { background: var(--dorado); }

.hp-titulo {
  font-family: var(--berlin);
  font-size: clamp(26px, 4vw, 38px);
  color: var(--verde);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}

.hp-titulo em {
  font-style: normal;
  color: var(--dorado);
}

.hp-subtitulo {
  font-size: 16px;
  color: var(--texto-suave);
  max-width: 480px;
  margin: 0 auto;
}

/* Grid de cards */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

/* Card */
.hp-card {
  background: var(--blanco);
  border-radius: 12px;
  border: 1px solid var(--verde-medio);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}

.hp-card:hover {
  box-shadow: 0 8px 28px rgba(61,90,78,.1);
  transform: translateY(-2px);
}

.hp-card-foto {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--verde-claro);
}

.hp-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-card-nofoto {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--verde-claro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--verde-medio);
}

.hp-card-nofoto svg { width: 44px; height: 44px; }
.hp-card-nofoto span { font-size: 12px; color: var(--texto-suave); }

.hp-card-body {
  padding: 14px 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hp-tipo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.hp-tipo.perdida    { background: #fde8e5; color: #c0392b; }
.hp-tipo.encontrada { background: #fef3d8; color: #9a6e10; }

.hp-card-nombre {
  font-family: var(--berlin);
  font-size: 17px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 4px;
}

.hp-card-meta {
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.hp-card-zona {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.hp-card-zona svg { color: var(--dorado); flex-shrink: 0; }

.hp-card-btn {
  margin-top: auto;
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  background: var(--verde);
  color: var(--blanco);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--berlin);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
}

.hp-card-btn:hover       { background: var(--verde-oscuro); }
.hp-card-btn.encontrada  { background: var(--dorado); }
.hp-card-btn.encontrada:hover { background: var(--dorado-claro); }

/* Carrusel de publicaciones recientes (home) — mismo concepto que el de especies */
.hp-controles { justify-content: flex-end; margin-bottom: 4px; }
.hp-wrapper { margin-bottom: 20px; }
.hp-wrapper::after { display: none; }              /* sin fade: el fondo de la sección no es blanco */
.hp-track { padding: 4px 4px 12px; }
.hp-track .hp-card {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  scroll-snap-align: start;
}
.hp-track .hp-vacio { flex: 1; }
.hp-card-foto { position: relative; }
.hp-card-foto img { object-position: 50% 25%; }
.hp-card-foto.mp-card-foto-ampliable { cursor: zoom-in; }
@media (max-width: 480px) {
  .hp-track .hp-card { flex-basis: 78vw; width: 78vw; max-width: 78vw; }
}

/* Skeleton */
.hp-skeleton {
  background: var(--verde-claro);
  border: 1px solid var(--verde-medio);
  animation: hp-pulse 1.4s ease-in-out infinite;
  min-height: 240px;
  border-radius: 12px;
}

@keyframes hp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* Estado vacío */
.hp-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px;
  color: var(--texto-suave);
  font-size: 14px;
}

/* CTAs inferiores */
.hp-ctas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hp-btn-ver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--verde);
  font-family: var(--berlin);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--dorado);
  padding-bottom: 2px;
  transition: color .2s;
}

.hp-btn-ver:hover { color: var(--dorado); }

.hp-cta-pubs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hp-btn-perdi,
.hp-btn-encontre {
  padding: 11px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-family: var(--berlin);
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.hp-btn-perdi          { background: #d94f3b; color: var(--blanco); }
.hp-btn-perdi:hover    { background: #bf3e2e; }
.hp-btn-encontre       { background: var(--dorado); color: var(--blanco); }
.hp-btn-encontre:hover { background: var(--dorado-claro); }

/* Responsive */
@media (max-width: 768px) {
  .hp-grid { grid-template-columns: 1fr 1fr; }
  .hp-ctas { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 500px) {
  .hp-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   mascotas-perdidas.html — Página de mascotas perdidas y encontradas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.mp-header {
  background: var(--verde);
  padding: 52px 24px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mp-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.15) 0%, transparent 60%);
  pointer-events: none;
}
.mp-header-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,168,76,.18); border: 1px solid rgba(201,168,76,.4);
  color: var(--dorado-claro); border-radius: 20px;
  padding: 5px 16px; font-size: 13px; margin-bottom: 20px;
}
.mp-header h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-family: var(--berlin);
  color: #fff; font-weight: 700; line-height: 1.15; margin-bottom: 12px;
}
.mp-header h1 span { color: var(--dorado); }
.mp-header p {
  color: rgba(255,255,255,.7); font-size: 16px; max-width: 520px; margin: 0 auto 28px;
}
.mp-header-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.btn-pub {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px; font-size: 15px;
  font-family: inherit; font-weight: 600; cursor: pointer;
  border: none; transition: all .2s; text-decoration: none;
}
.btn-pub.perdida   { background: #d94f3b; color: #fff; }
.btn-pub.perdida:hover { background: #bf3e2e; }
.btn-pub.encontrada { background: var(--dorado); color: #fff; }
.btn-pub.encontrada:hover { background: #b8922e; }

/* ── Filtros ── */
.mp-filtros-wrap {
  background: #fff; border-bottom: 1px solid var(--verde-medio);
  position: sticky; top: 0; z-index: 80;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mp-filtros {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; flex-wrap: wrap;
}
.filtro-search {
  flex: 1; min-width: 200px; position: relative;
}
.filtro-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--texto-suave); pointer-events: none;
}
.filtro-search input {
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--verde-medio); border-radius: 8px;
  font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.filtro-search input:focus { border-color: var(--verde); }
.filtro-select {
  padding: 10px 14px; border: 1.5px solid var(--verde-medio); border-radius: 8px;
  font-size: 14px; font-family: inherit; outline: none; background: #fff;
  cursor: pointer; color: var(--texto); transition: border-color .2s;
}
.filtro-select:focus { border-color: var(--verde); }
.btn-filtrar {
  padding: 10px 22px; background: var(--verde); color: #fff;
  border: none; border-radius: 8px; font-size: 14px; font-family: inherit;
  cursor: pointer; font-weight: 600; transition: background .2s; white-space: nowrap;
}
.btn-filtrar:hover { background: var(--verde-oscuro); }
.btn-limpiar {
  padding: 10px 16px; background: none; border: 1.5px solid var(--verde-medio);
  border-radius: 8px; font-size: 13px; font-family: inherit; cursor: pointer;
  color: var(--texto-suave); transition: all .2s; white-space: nowrap;
}
.btn-limpiar:hover { border-color: var(--verde); color: var(--verde); }

/* ── Tabs tipo / resumen ── */
.mp-tabs-wrap {
  max-width: 1100px; margin: 28px auto 0; padding: 0 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mp-tab {
  padding: 8px 20px; border-radius: 20px; font-size: 14px;
  border: 1.5px solid var(--verde-medio); background: #fff; cursor: pointer;
  font-family: inherit; transition: all .2s; color: var(--texto-suave);
}
.mp-tab:hover { border-color: var(--verde); color: var(--verde); }
.mp-tab.activo.perdida    { background: #d94f3b; border-color: #d94f3b; color: #fff; }
.mp-tab.activo.encontrada { background: var(--dorado); border-color: var(--dorado); color: #fff; }
.mp-tab.activo.todas      { background: var(--verde); border-color: var(--verde); color: #fff; }
.mp-total { margin-left: auto; font-size: 13px; color: var(--texto-suave); }

/* ── Grilla de cards ── */
.mp-grid-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 24px 60px; }
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* ── Card mascota ── */
.mp-card {
  background: var(--blanco); border-radius: 12px;
  border: 1px solid var(--verde-medio);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.mp-card:hover { box-shadow: 0 8px 28px rgba(61,90,78,.12); transform: translateY(-2px); }

.mp-card-foto {
  position: relative; width: 100%; aspect-ratio: 4/3; min-height: 0; overflow: hidden;
  background: #ece9e0;
  display: flex; align-items: center; justify-content: center;
}
/* La imagen llena el marco 4:3 sin estirar la card; en fotos verticales prioriza la parte de arriba (cara) */
.mp-card-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 25%;
}
.mp-card-foto-ampliable { cursor: zoom-in; }
.mp-card-foto-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.mp-card-foto-ampliable:hover .mp-card-foto-zoom,
.mp-card-foto-ampliable:focus-visible .mp-card-foto-zoom { opacity: 1; }
@media (hover: none) {
  .mp-card-foto-zoom { opacity: 1; }   /* en celular no hay hover: se deja visible */
}

/* Visor */
.visor-foto {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  cursor: zoom-out;
}
.visor-foto[hidden] { display: none; }
.visor-foto-card {
  position: relative;
  background: var(--blanco);
  border-radius: 18px;
  border-top: 4px solid var(--dorado);
  padding: 28px 20px 20px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  animation: modalIn 0.2s ease;
  cursor: default;
}
.visor-foto-nombre {
  margin: 0;
  padding-right: 36px;
  font-family: var(--berlin);
  font-size: 20px;
  font-weight: 700;
  color: var(--verde);
  line-height: 1.2;
}
.visor-foto-card img {
  width: 100%;
  min-height: 0;
  max-height: calc(92vh - 130px);
  object-fit: contain;
  border-radius: 10px;
  background: var(--verde-claro);
}
.visor-foto-cerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.visor-foto-cerrar:hover { background: var(--verde-oscuro); }
body.visor-abierto { overflow: hidden; }
.mp-card-foto-placeholder {
  width: 100%; aspect-ratio: 4/3; background: #ece9e0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; color: #bbb;
}
.mp-card-foto-placeholder svg { width: 48px; height: 48px; opacity: .5; }
.mp-card-foto-placeholder span { font-size: 13px; }

.mp-badge {
  display: inline-block; padding: 4px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.mp-badge.perdida   { background: #fde8e5; color: #c0392b; }
.mp-badge.encontrada { background: #fef3d8; color: #9a6e10; }

.mp-card-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.mp-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.mp-card-nombre { font-size: 18px; font-weight: 700; color: var(--verde); }
.mp-card-especie { font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.mp-card-desc {
  font-size: 14px; color: var(--texto-suave); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1; margin-bottom: 14px;
}
.mp-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.mp-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--texto-suave);
}
.mp-meta-item svg { flex-shrink: 0; color: var(--dorado); }
.btn-contactar {
  display: block; width: 100%; padding: 11px; text-align: center;
  background: var(--verde); color: #fff; border: none; border-radius: 8px;
  font-size: 14px; font-family: inherit; font-weight: 600; cursor: pointer;
  transition: background .2s; text-decoration: none; margin-top: auto;
}
.btn-contactar:hover { background: var(--verde-oscuro); }
.btn-contactar.encontrada { background: var(--dorado); }
.btn-contactar.encontrada:hover { background: #b8922e; }

/* ── Estados vacío / cargando ── */
.mp-vacio {
  text-align: center; padding: 80px 24px; color: var(--texto-suave);
}
.mp-vacio svg { width: 80px; height: 80px; opacity: .2; margin-bottom: 20px; }
.mp-vacio h3 { font-size: 20px; color: var(--verde); margin-bottom: 8px; }
.mp-vacio p  { font-size: 15px; }
.mp-spinner  {
  display: flex; justify-content: center; align-items: center; padding: 80px;
}
.spinner {
  width: 40px; height: 40px; border: 3px solid var(--verde-medio);
  border-top-color: var(--verde); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Paginación ── */
.mp-paginacion {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  padding: 32px 24px 0; flex-wrap: wrap;
}
.btn-pag {
  width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid var(--verde-medio);
  background: #fff; font-size: 14px; cursor: pointer; font-family: inherit;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.btn-pag:hover   { border-color: var(--verde); color: var(--verde); }
.btn-pag.activo  { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-pag:disabled { opacity: .4; cursor: not-allowed; }

/* ── Modal publicar ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.abierto { display: flex; }
.modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.2);
}
.modal-head {
  padding: 24px 28px 20px; border-bottom: 1px solid var(--verde-medio);
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0;
  background: #fff; border-radius: 16px 16px 0 0; z-index: 2;
}
.modal-head h2 { font-size: 20px; color: var(--verde); }
.btn-cerrar {
  background: none; border: none; cursor: pointer; color: var(--texto-suave);
  padding: 4px; border-radius: 6px; transition: background .2s;
}
.btn-cerrar:hover { background: #f0f0ec; }
.modal-body { padding: 28px; }

.tipo-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px;
}
.tipo-btn {
  padding: 14px; border-radius: 10px; border: 2px solid var(--verde-medio);
  background: #fff; cursor: pointer; font-family: inherit; font-size: 15px;
  font-weight: 600; text-align: center; transition: all .2s; color: var(--texto-suave);
}
.tipo-btn.sel.perdida    { border-color: #d94f3b; background: #fde8e5; color: #c0392b; }
.tipo-btn.sel.encontrada { border-color: var(--dorado); background: #fef3d8; color: #9a6e10; }

.form-grupo { margin-bottom: 18px; }
.form-grupo label {
  display: block; font-size: 13px; font-weight: 600; color: var(--texto);
  margin-bottom: 6px;
}
.form-grupo label .req { color: #d94f3b; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--verde-medio);
  border-radius: 8px; font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .2s; background: #fff; color: var(--texto);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--verde); }
.form-textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-seccion {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--verde); margin: 24px 0 16px; padding-top: 20px;
  border-top: 1px solid var(--verde-medio);
}
.form-foto-preview {
  width: 100%; aspect-ratio: 16/9; border: 2px dashed var(--verde-medio);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; color: var(--texto-suave); cursor: pointer;
  transition: border-color .2s; overflow: hidden;
}
.form-foto-preview:hover { border-color: var(--verde); }
.form-foto-preview img { width: 100%; height: 100%; object-fit: cover; display: none; }
.form-help { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }
.btn-submit {
  width: 100%; padding: 14px; background: var(--verde); color: #fff;
  border: none; border-radius: 10px; font-size: 16px; font-family: inherit;
  font-weight: 700; cursor: pointer; transition: background .2s; margin-top: 8px;
}
.btn-submit:hover { background: var(--verde-oscuro); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.form-error { color: #d94f3b; font-size: 13px; margin-top: 12px; text-align: center; }
.form-ok {
  text-align: center; padding: 32px 20px;
}
.form-ok svg { width: 56px; height: 56px; color: var(--verde); margin-bottom: 16px; }
.form-ok h3 { font-size: 22px; color: var(--verde); margin-bottom: 10px; }
.form-ok p  { color: var(--texto-suave); font-size: 15px; line-height: 1.6; }

/* ── Modal contactar ── */
#modal-contactar .modal { max-width: 480px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .mp-filtros { flex-direction: column; align-items: stretch; }
  .filtro-search { min-width: unset; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Modal Auth global por encima de los modales locales ── */
#mm-modal-overlay {
  z-index: 9999 !important;
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.55) !important;
}
#mm-modal-overlay .modal-card {
  position: relative !important;
  z-index: 10000 !important;
}

/* Visor legal: se abre ENCIMA del modal de auth (mismo esquema, un escalón más arriba) */
#mm-legal-overlay {
  z-index: 100000 !important;
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.55) !important;
}
#mm-legal-overlay .modal-card {
  position: relative !important;
  z-index: 10002 !important;
}
  

.btn-resolver {
  display: block; width: 100%; padding: 10px;
  text-align: center; background: #f0faf0;
  color: #2d6a2d; border: 1.5px solid #4caf50;
  border-radius: 8px; font-size: 13px;
  font-family: var(--berlin); font-weight: 700;
  cursor: pointer; transition: all .2s; margin-top: 8px;
}
.btn-resolver:hover { background: #4caf50; color: #fff; }


/* ── Perfil: Tab Mis publicaciones ──────────────────────────────────────── */

/* Estado vacío */
.pub-vacio {
  text-align: center;
  padding: 40px;
  color: var(--texto-suave);
}
.pub-vacio-icon { font-size: 40px; margin-bottom: 12px; }

/* Card de publicación */
.pub-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--blanco);
  border: 1px solid var(--verde-medio);
  border-radius: 10px;
  margin-bottom: 12px;
}
.pub-card.vencida { border-color: #f0c04d; }

/* Foto miniatura */
.pub-foto {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.pub-foto-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #f0ede6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

/* Info */
.pub-info { flex: 1; min-width: 0; }
.pub-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pub-nombre { font-size: 17px; font-weight: 700; color: var(--verde); }
.pub-detalle { font-size: 13px; color: var(--texto-suave); }

/* Badges */
.pub-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.pub-badge.perdida   { background: #fde8e5; color: #c0392b; }
.pub-badge.encontrada{ background: #fef3d8; color: #9a6e10; }
.pub-badge.vencida   { background: #fef3d8; color: #9a6e10; }

/* Aviso días restantes */
.pub-vence { font-size: 12px; margin-top: 4px; }
.pub-vence.urgente  { color: #d94f3b; }
.pub-vence.pronto   { color: #e67e22; }
.pub-vence.vencida  { color: #e67e22; }

/* Botones acción */
.pub-btn {
  background: #f0faf0;
  color: #2d6a2d;
  border: 1.5px solid #4caf50;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0;
}
.pub-btn:hover { background: #4caf50; color: #fff; }


/* ── Sin resultados: solicitud de especie ───────────────────────────────── */
.sin-resultados-solicitud {
  margin-top: 20px;
  padding: 16px 20px;
  background: #f8f5ee;
  border: 1px solid var(--dorado);
  border-radius: 10px;
  font-size: 14px;
  color: var(--texto-suave);
}
.sin-resultados-solicitud p { margin: 0 0 12px; }
.btn-solicitar-especie {
  background: var(--dorado);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.btn-solicitar-especie:hover { opacity: .85; }


/* ── Finales felices ─────────────────────────────────────────────────────── */
.finales-felices-wrap {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 24px 20px 48px;
  border-top: 2px solid #d94f3b;
}
.finales-felices-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--verde-medio);
}
.finales-felices-icon { font-size: 40px; }
.finales-felices-titulo {
  font-family: var(--berlin);
  color: var(--verde);
  font-size: 26px;
  margin: 0 0 4px;
}
.finales-felices-sub {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0;
}
.finales-felices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.ff-card {
  background: var(--blanco);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border: 1px solid var(--verde-medio);
  transition: transform .2s, box-shadow .2s;
}
.ff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.ff-foto {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.ff-foto-placeholder {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0ede6;
  font-size: 48px;
}
.ff-info { padding: 16px; }
.ff-badge {
  display: inline-block;
  background: #e8f5e9;
  color: #2d6a2d;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.ff-nombre {
  font-size: 18px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 4px;
}
.ff-detalle, .ff-zona {
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 4px;
}
.ff-historia {
  font-size: 13px;
  color: var(--texto);
  font-style: italic;
  margin: 10px 0 6px;
  padding: 8px 10px;
  background: #f8f5ee;
  border-left: 3px solid var(--dorado);
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}
.ff-fecha {
  font-size: 11px;
  color: #bbb;
  margin-top: 8px;
  text-align: right;
}



/* ══════════════════════════════════════════════════════════
   RAZAS.HTML
   ══════════════════════════════════════════════════════════ */
/* ── Más Buscadas ── */
/* ── Banner Más Buscadas ── */
.mas-buscadas-chip-blanco {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--verde);
  border-radius: 20px;
  padding: 6px 8px 6px 14px;
  font-family: 'Berlin Sans FB', sans-serif;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  border: 1.5px solid var(--verde);
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.mas-buscadas-chip-blanco:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(61,90,78,0.2); }
.mas-buscadas-chip-blanco-btn {
  background: var(--dorado);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-family: 'Berlin Sans FB', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .mas-buscadas-chip-blanco { font-size: 12px; padding: 5px 6px 5px 12px; }
  .mas-buscadas-chip-blanco-btn { font-size: 11px; padding: 3px 8px; }
}
.mas-buscadas-banner {
  text-align: center;
  padding: 20px 20px;
  margin: 24px 0 32px;
  background: linear-gradient(135deg, var(--verde) 0%, #2a3f36 100%);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.mas-buscadas-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(61,90,78,0.3); }
.mas-buscadas-banner-titulo {
  font-family: var(--berlin);
  font-size: 28px;
  color: #fff;
  margin-bottom: 8px;
}
.mas-buscadas-banner-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 18px;
}
.mas-buscadas-banner-btn {
  display: inline-block;
  padding: 10px 24px;
  background: var(--dorado);
  color: #fff;
  border-radius: 20px;
  font-family: var(--berlin);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}
.mas-buscadas-banner:hover .mas-buscadas-banner-btn { background: #b8933e; }

/* ── Modal Más Buscadas ── */
#modal-mas-buscadas {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-mb-inner {
  background: var(--blanco);
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
}
.modal-mb-titulo {
  font-family: var(--berlin);
  font-size: 24px;
  color: var(--verde);
  margin-bottom: 6px;
}
.modal-mb-sub {
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 24px;
}
.modal-mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.modal-mb-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borde);
  text-decoration: none;
  color: inherit;
  background: var(--blanco);
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.modal-mb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.modal-mb-img {
  width: 100%;
  height: 150px;
  background: var(--verde-claro);
  overflow: hidden;
  position: relative;
}
.modal-mb-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--dorado);
  color: #fff;
  font-family: var(--berlin);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.modal-mb-info { padding: 14px; }
.modal-mb-especie {
  font-size: 11px;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.modal-mb-nombre {
  font-family: var(--berlin);
  font-size: 16px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 6px;
}
.modal-mb-desc {
  font-size: 12px;
  color: var(--texto-suave);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modal-mb-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--texto-suave);
}
.modal-mb-cerrar {
  float: right;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--texto-suave);
  margin-top: -8px;
}


/* ══════════════════════════════════════════════════════════
   BLOG.HTML
   ══════════════════════════════════════════════════════════ */
/* ── Layout ── */
.comunidad-hero {
  background: linear-gradient(135deg, var(--verde) 0%, #2a3f36 100%);
  color: #fff;
  padding: 52px 0 40px;
  text-align: center;
}
.comunidad-hero h1 {
  font-family: 'Berlin Sans FB', sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
}
.comunidad-hero p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  line-height: 1.6;
}
.comunidad-hero .hero-breadcrumb {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 10px;
  font-family: 'Berlin Sans FB', sans-serif;
}

.tabs-bar {
  background: var(--blanco);
  border-bottom: 2px solid var(--verde-claro);
  display: flex;
  justify-content: center;
  gap: 0;
  position: sticky;
  top: 60px;
  z-index: 90;
}
.tab-btn {
  padding: 14px 32px;
  border: none;
  background: none;
  font-size: 1rem;
  font-family: 'Berlin Sans FB', sans-serif;
  color: var(--texto-suave);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .2s;
}
.tab-btn.active { color: var(--verde); border-bottom-color: var(--verde); }
.tab-btn:hover  { color: var(--verde); }

.comunidad-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}

/* ── Filtros ── */
.filtros-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  align-items: center;
}
.filtros-bar input, .filtros-bar select {
  padding: 8px 14px;
  border: 1.5px solid var(--verde-medio);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  background: var(--blanco);
  max-width: 100%;
  box-sizing: border-box;
}
.filtros-bar input { flex: 1; min-width: 140px; }
.filtros-bar select { max-width: 160px; }

/* ── Cards artículos ── */
.articulos-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.articulo-card {
  background: var(--blanco);
  border: 1px solid var(--verde-medio);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.articulo-card:hover {
  border-color: var(--dorado);
  box-shadow: 0 6px 20px rgba(61,90,78,.12);
}
.articulo-card-img {
  width: 180px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--verde-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}
.articulo-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.articulo-card-body {
  padding: 14px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.articulo-card-especie {
  font-size: 10px;
  color: var(--dorado);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.articulo-card-titulo {
  font-family: var(--berlin);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--verde);
  line-height: 1.3;
}
.articulo-card-resumen {
  font-size: 12px;
  color: var(--texto-suave);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.articulo-card-meta {
  font-size: 11px;
  color: var(--texto-suave);
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--verde-claro);
}

/* Acordeón */
.articulo-card-main {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  width: 100%;
  min-height: 140px;
  max-height: 200px;
}
.articulo-card-main .articulo-card-img {
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  height: auto;
}
.articulo-card-main .articulo-card-body {
  flex: 1;
  min-width: 0;
}
.articulo-card.card-abierta {
  border-color: var(--dorado);
  box-shadow: 0 6px 20px rgba(61,90,78,.12);
}
.articulo-card-expandido {
  border-top: 2px solid var(--verde-claro);
}
.articulo-expandido-contenido {
  padding: 20px 24px;
}
@media(max-width: 600px) {
  .articulo-card-main { flex-direction: column; max-height: none; }
  .articulo-card-main .articulo-card-img { width: 100%; min-width: unset; height: auto; max-height: none; }
  .articulo-card-main .articulo-card-img img { object-fit: contain; width: 100%; height: auto; max-height: none; }
}

/* Mobile: foto arriba, texto abajo */
@media(max-width: 600px) {
  .articulo-card { flex-direction: column; max-height: none; }
  .articulo-card-img { width: 100%; height: 160px; }
}

/* ── Vista artículo individual ── */
.articulo-full { display: none; }
.articulo-full-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--verde);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 600;
}
.articulo-full-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 32px;
}
@media(max-width: 700px) {
  .articulo-full-layout { grid-template-columns: 1fr; }
}
.articulo-full-izq { position: sticky; top: 80px; }
.articulo-full-img {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  display: block;
  cursor: zoom-in;
  border: 1px solid var(--verde-medio);
}
.articulo-full-titulo { font-size: 2rem; font-family: 'Berlin Sans FB', sans-serif; color: var(--texto); margin: 0 0 8px; }
.articulo-full-meta { font-size: 13px; color: var(--texto-suave); margin-bottom: 24px; }
.articulo-full-contenido { font-size: 15px; line-height: 1.75; color: var(--texto); }
.articulo-full-contenido p { margin-bottom: 16px; }

/* ── Comentarios ── */
.comentarios-section { margin-top: 40px; border-top: 2px solid var(--verde-claro); padding-top: 28px; }
.comentarios-titulo { font-size: 1.1rem; font-weight: 700; color: var(--texto); margin-bottom: 16px; }
.comentario-item {
  background: var(--fondo);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.comentario-autor { font-weight: 700; font-size: 13px; color: var(--verde); }
.comentario-fecha { font-size: 11px; color: var(--texto-suave); margin-left: 8px; }
.comentario-texto { font-size: 14px; color: var(--texto); margin-top: 6px; line-height: 1.5; }
.comentario-reportar { font-size: 11px; color: var(--texto-suave); cursor: pointer; margin-top: 6px; display: inline-block; }
.comentario-reportar:hover { color: var(--rojo); }

.form-comentario { margin-top: 20px; }
.form-comentario textarea,
#comentario-form-wrap textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 16px;
  border: 2px solid var(--dorado);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-comentario textarea:focus,
#comentario-form-wrap textarea:focus {
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}

/* ── Foro ── */
.btn-nuevo-hilo {
  background: var(--dorado);
  color: var(--texto);
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: 'Berlin Sans FB', sans-serif;
  font-size: 14px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.btn-nuevo-hilo:hover { background: #b8942e; }

.hilo-item {
  background: var(--blanco);
  border: 1.5px solid var(--verde-claro);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hilo-item:hover { box-shadow: 0 4px 16px rgba(61,90,78,.1); border-color: var(--verde-medio); }
.hilo-categoria-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-debate      { background: #e8f4fd; color: #2980b9; }
.cat-consulta    { background: #eafaf1; color: #27ae60; }
.cat-experiencia { background: #fef9e7; color: #d4ac0d; }
.cat-sugerencia  { background: #fdf2f8; color: #8e44ad; }

.hilo-body { flex: 1; min-width: 0; }
.hilo-titulo { font-size: 1rem; font-weight: 700; color: var(--texto); margin-bottom: 4px; }
.hilo-meta { font-size: 12px; color: var(--texto-suave); display: flex; gap: 12px; flex-wrap: wrap; }
.hilo-especie { font-size: 12px; color: var(--verde); }

/* ── Vista hilo individual ── */
.hilo-full { display: none; }
.hilo-full-contenido {
  background: var(--verde-claro);
  border-radius: var(--radio);
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
  margin-bottom: 28px;
}
.hilo-full-autor { font-weight: 700; color: var(--verde); margin-bottom: 6px; font-size: 14px; }

.respuesta-item {
  background: var(--fondo);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.respuesta-autor { font-weight: 700; font-size: 13px; color: var(--verde); }
.respuesta-fecha { font-size: 11px; color: var(--texto-suave); margin-left: 8px; }
.respuesta-texto { font-size: 14px; color: var(--texto); margin: 6px 0; line-height: 1.5; }
.respuesta-votos { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.voto-btn {
  border: 1.5px solid var(--verde-claro);
  background: none;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.voto-btn:hover { background: var(--verde-claro); border-color: var(--verde); }
.voto-pos { color: #27ae60; }
.voto-neg { color: var(--rojo); }

/* ── Modal nuevo hilo ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--blanco);
  border-radius: 16px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-titulo { font-size: 1.3rem; font-family: 'Berlin Sans FB', sans-serif; color: var(--texto); margin: 0 0 20px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--verde); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ccd8d0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  background: var(--blanco);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--verde); }
.form-textarea {
  min-height: 100px;
  resize: vertical;
  border: 2px solid var(--dorado) !important;
  border-radius: 12px !important;
  outline: none;
  transition: box-shadow .2s;
}
.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-primary { background: var(--verde); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: 14px; font-family: inherit; cursor: pointer; font-weight: 600; }
.btn-primary:hover { background: var(--verde-medio); }
.btn-outline { background: none; border: 1.5px solid var(--verde); color: var(--verde); padding: 10px 22px; border-radius: 8px; font-size: 14px; font-family: inherit; cursor: pointer; }

/* ── Paginación ── */
.paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.pag-btn { padding: 7px 16px; border: 1.5px solid var(--verde-claro); border-radius: 8px; background: var(--blanco); color: var(--verde); cursor: pointer; font-size: 13px; }
.pag-btn.active, .pag-btn:hover { background: var(--verde); color: #fff; border-color: var(--verde); }

/* ── Vacío ── */
.vacio { text-align: center; padding: 48px 16px; color: var(--texto-suave); }
.vacio-icono { font-size: 48px; margin-bottom: 12px; }
.vacio-txt { font-size: 15px; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--verde); color: #fff; padding: 12px 24px; border-radius: 10px;
  font-size: 14px; z-index: 99999; display: none; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.toast.error { background: var(--rojo); }
.toast.show { display: block; }


/* ══════════════════════════════════════════════════════════
   RAZA.HTML
   ══════════════════════════════════════════════════════════ */
/* ── Ficha de raza ──────────────────────────────────────────────────────── */

.raza-ficha-hero {
  background: var(--verde);
  color: white;
  padding: 32px 0 0;
}

.raza-ficha-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,0.65); text-decoration: none; }
.breadcrumb a:hover { color: var(--dorado); }
.breadcrumb-sep { color: rgba(255,255,255,0.35); }
.breadcrumb-actual { color: white; font-weight: 600; }

/* Layout hero */
.raza-ficha-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
  padding-bottom: 40px;
}

/* Info izquierda */
.raza-ficha-info { }

.raza-ficha-especie-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.raza-ficha-nombre {
  font-family: var(--berlin);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.raza-ficha-nombre-ingles {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin-bottom: 20px;
}

/* Stats rápidas */
.raza-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.raza-stat {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
  min-width: 90px;
}

.raza-stat-valor {
  font-family: var(--berlin);
  font-size: 18px;
  font-weight: 700;
  color: var(--dorado);
  line-height: 1.1;
}

.raza-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}

/* Badges de características */
.raza-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.raza-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}
.raza-badge.ok { background: rgba(201,168,76,0.25); border-color: var(--dorado); color: var(--dorado); }

/* Botones de acción */
.raza-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.raza-cta {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.raza-cta-primary {
  background: var(--dorado);
  color: white;
  border-color: var(--dorado);
}
.raza-cta-primary:hover { background: #b8933e; border-color: #b8933e; }
.raza-cta-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.4);
}
.raza-cta-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }
.raza-cta-like {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: all .2s;
}
.raza-cta-like:hover { background: rgba(255,100,100,0.2); border-color: #ff6b6b; color: #ff6b6b; }
.raza-cta-like.liked { background: rgba(255,100,100,0.25); border-color: #ff6b6b; color: #ff6b6b; }
.raza-cta-like:disabled { opacity: 0.6; cursor: default; }

/* Galería derecha */
.raza-galeria { }

.galeria-principal {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: rgba(255,255,255,0.1);
  cursor: zoom-in;
  margin-bottom: 10px;
}

.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.galeria-principal:hover img { transform: scale(1.03); }

.galeria-principal-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}

.galeria-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.galeria-nav-btn:hover { background: rgba(0,0,0,0.7); }
.galeria-nav-btn.prev { left: 10px; }
.galeria-nav-btn.next { right: 10px; }

.galeria-contador {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
}

.galeria-miniaturas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.galeria-miniaturas::-webkit-scrollbar { display: none; }

.galeria-miniatura {
  flex: 0 0 72px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  background: rgba(255,255,255,0.1);
}
.galeria-miniatura.active { border-color: var(--dorado); }
.galeria-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── TABS ──────────────────────────────────────────────────────────────── */
.raza-tabs-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.raza-tabs-nav {
  display: flex;
  border-bottom: 2px solid #e8f0ec;
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
}
.raza-tabs-nav::-webkit-scrollbar { display: none; }

.raza-tab-btn {
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.raza-tab-btn:hover { color: var(--verde); }
.raza-tab-btn.active {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

.raza-tab-panel { display: none; }
.raza-tab-panel.active { display: block; }

/* ── Tab Info ─────────────────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.info-seccion {
  margin-bottom: 32px;
}

.info-seccion-titulo {
  font-family: var(--berlin);
  font-size: 18px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-seccion-texto {
  font-size: 15px;
  line-height: 1.75;
  color: #2d4a3e;
}

/* Mapa */
#mapa-origen {
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dde8e3;
  margin-top: 12px;
}

/* ── Tab ¿Es para vos? ────────────────────────────────────────────────── */
.aptitud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.aptitud-card {
  background: white;
  border: 1.5px solid #dde8e3;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.aptitud-card.si { border-color: #276749; background: #f0f9f4; }
.aptitud-card.no { border-color: #e53e3e; background: #fff5f5; }

.aptitud-icono {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.aptitud-titulo {
  font-weight: 700;
  font-size: 14px;
  color: var(--verde);
  margin-bottom: 4px;
}

.aptitud-desc {
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.5;
}

/* Barra de actividad */
.actividad-barra {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.actividad-dot {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: #dde8e3;
}
.actividad-dot.on { background: var(--verde); }
.actividad-dot.on.gold { background: var(--dorado); }

/* ── Tab Fotos ────────────────────────────────────────────────────────── */
.fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.foto-item {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: #f0f5f3;
}
.foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.foto-item:hover img { transform: scale(1.05); }

/* ── Tab Adopción ─────────────────────────────────────────────────────── */
.adopcion-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}

.adopcion-card {
  background: white;
  border: 2px solid #dde8e3;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.adopcion-card:hover {
  border-color: var(--verde);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(61,90,78,0.12);
}

.adopcion-card-icono { font-size: 48px; margin-bottom: 12px; }
.adopcion-card-titulo {
  font-family: var(--berlin);
  font-size: 18px;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 8px;
}
.adopcion-card-desc { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }

.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  animation: lbIn 0.2s ease;
}
@keyframes lbIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  font-size: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .raza-ficha-layout { grid-template-columns: 1fr; }
  .raza-galeria { order: -1; }
  .info-grid { grid-template-columns: 1fr; }
  .adopcion-opciones { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .raza-ficha-nombre { font-size: 28px; }
  .raza-stat { min-width: 72px; padding: 8px 10px; }
  .raza-stat-valor { font-size: 15px; }
  .raza-tab-btn { padding: 12px 14px; font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════
   MIS-MASCOTAS.HTML
   ══════════════════════════════════════════════════════════ */
.book-video-embed {
  width: 100%;
  margin: 8px 0;
}
.book-video-embed iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  display: block;
}
.book-relato-media {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.book-video-embed {
  flex: 0 0 100%;
}
.book-relato-videos {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.book-relato-videos .book-video-embed video {
  max-height: 400px;
  max-width: 100%;
  width: auto;
  border-radius: 10px;
  display: block;
}

/* ── Razas: tags warn/danger (residual) ── */
.raza-tag-warn   { background: #e8f5e9; color: #2e7d32; }
.raza-tag-danger { background: #fce4ec; color: #c62828; }


/* ══════════════════════════════════════════════════════════
   INDEX-DEV.HTML — estilos del home público (chip más buscadas, modal, carrusel)
   ══════════════════════════════════════════════════════════ */
.mas-buscadas-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--verde) 0%, #2a3f36 100%);
  color: #fff;
  border-radius: 20px;
  padding: 6px 8px 6px 14px;
  font-family: 'Berlin Sans FB', sans-serif;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.mas-buscadas-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(61,90,78,0.3); }
.carrusel-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.carrusel-header-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.carrusel-header-chip { margin-top: 8px; }
@media (max-width: 600px) {
  .carrusel-header-top-left { gap: 8px; }
  .mas-buscadas-chip { font-size: 11px; padding: 4px 6px 4px 10px; }
  .mas-buscadas-chip-btn { font-size: 10px; padding: 3px 8px; }
  .chip-desktop { display: none; }
  .carrusel-header-chip { display: block; }
}
@media (min-width: 601px) {
  .chip-mobile { display: none; }
  .carrusel-header-chip { display: none; }
}
@media (max-width: 600px) {
  .mas-buscadas-chip { font-size: 11px; padding: 4px 6px 4px 10px; }
  .mas-buscadas-chip-btn { font-size: 10px; padding: 3px 8px; }
}
.mas-buscadas-chip-btn {
  background: var(--dorado);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-family: 'Berlin Sans FB', sans-serif;
  font-size: 12px;
  font-weight: 700;
}
#modal-mas-buscadas {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 9000; align-items: center; justify-content: center; padding: 20px;
}
.modal-mb-inner {
  background: var(--blanco); border-radius: 20px; width: 100%;
  max-width: 860px; max-height: 90vh; overflow-y: auto; padding: 32px;
}
.modal-mb-titulo { font-family: var(--berlin); font-size: 24px; color: var(--verde); margin-bottom: 6px; }
.modal-mb-sub { font-size: 13px; color: var(--texto-suave); margin-bottom: 24px; }
.modal-mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.modal-mb-card {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--borde);
  text-decoration: none; color: inherit; background: var(--blanco);
  transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column;
}
.modal-mb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.modal-mb-img { width: 100%; height: 150px; background: var(--verde-claro); overflow: hidden; position: relative; }
.modal-mb-rank {
  position: absolute; top: 10px; left: 10px; background: var(--dorado); color: #fff;
  font-family: var(--berlin); font-size: 13px; padding: 3px 10px; border-radius: 20px;
}
.modal-mb-info { padding: 14px; }
.modal-mb-especie { font-size: 11px; color: var(--verde); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.modal-mb-nombre { font-family: var(--berlin); font-size: 16px; color: var(--verde); font-weight: 700; margin-bottom: 6px; }
.modal-mb-desc { font-size: 12px; color: var(--texto-suave); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal-mb-stats { display: flex; gap: 12px; font-size: 12px; color: var(--texto-suave); }
.modal-mb-cerrar { float: right; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--texto-suave); margin-top: -8px; }

/* ── Mobile fixes: Foro / Comunidad ── */
@media (max-width: 600px) {
  /* Evitar overflow horizontal general */
  .comunidad-body {
    padding: 20px 12px 48px;
    overflow-x: hidden;
  }

  /* Filtros en columna en mobile */
  .filtros-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filtros-bar input,
  .filtros-bar select {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }
  .filtros-bar select { max-width: 100%; }
  .btn-nuevo-hilo {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Hilo item: badge arriba, texto abajo */
  .hilo-item {
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
  }
  .hilo-categoria-badge {
    align-self: flex-start;
  }
  .hilo-meta {
    gap: 8px;
  }

  /* Vista hilo individual */
  .hilo-full-contenido {
    padding: 14px 12px;
  }
  #hilo-header h2 {
    font-size: 1.2rem !important;
    word-break: break-word;
  }
  #hilo-header > div {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Respuestas */
  .respuesta-item {
    padding: 12px 10px;
    word-break: break-word;
  }
  .respuesta-votos {
    flex-wrap: wrap;
  }

  /* Tabs */
  .tab-btn {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}

.voto-btn.voto-activo {
  background: #3d5a4e;
  color: #fff;
  border-color: #3d5a4e;
}

/* ------------------------------------------------------------------ */
/* Suscripcion a novedades (footer) - agregar al final de style.css   */
/* ------------------------------------------------------------------ */

.footer-susc {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 28px 24px;
}

.footer-susc-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.footer-susc-texto h4 {
  color: #c9a84c;
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.footer-susc-texto p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.footer-susc-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-susc-form input {
  flex: 1;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.95rem;
  outline: none;
}

.footer-susc-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-susc-form input:focus {
  border-color: #c9a84c;
  background: rgba(255, 255, 255, 0.12);
}

.footer-susc-form button {
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: #c9a84c;
  color: #2b3f36;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

.footer-susc-form button:hover {
  background: #d8bb62;
}

.footer-susc-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.footer-susc-msg {
  min-height: 20px;
  margin-top: 10px;
  font-size: 0.88rem;
}

.footer-susc-msg.ok {
  color: #9fd8b8;
}

.footer-susc-msg.error {
  color: #f0997b;
}

@media (max-width: 480px) {
  .footer-susc-form input {
    min-width: 100%;
  }
}

/* ── Slots de horario (mini-calendarios: pedir turno / próximo turno) ────── */
.pt-slot-btn {
  border: 1.5px solid var(--verde-claro, #d7e4dd);
  background: #fff;
  color: var(--verde, #3d5a4e);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.pt-slot-btn:hover {
  border-color: var(--dorado, #c9a84c);
  background: #fdf8ec;
}
.pt-slot-btn.pt-slot-activo {
  background: var(--verde, #3d5a4e);
  border-color: var(--verde, #3d5a4e);
  color: #fff;
}

/* ── Adopciones ──────────────────────────────────────────────────────────── */
/* Migrado de <style> inline en adopciones.html (05/09/2026) — header alineado
   a los mismos valores que .mp-header para que no queden tipografías distintas
   entre páginas parecidas. */
.ado-header {
  background: linear-gradient(135deg, var(--verde) 0%, #2c453a 100%);
  color: #fff;
  padding: 52px 24px 40px;
  text-align: center;
}
.ado-header h1 {
  font-family: var(--berlin);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
}
.ado-header h1 span { color: var(--dorado); }
.ado-header p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  line-height: 1.6;
}

.ado-wrap { max-width: 900px; margin: -28px auto 60px; padding: 0 20px; }

.ado-mensaje {
  background: #fff; border-radius: 16px; padding: 36px 32px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08); margin-bottom: 24px;
}
.ado-mensaje h2 { font-family: var(--berlin); color: var(--verde); font-size: 1.35rem; margin-bottom: 14px; }
.ado-mensaje h2 span { color: var(--dorado); }
.ado-mensaje p { color: #555; font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
.ado-mensaje p:last-child { margin-bottom: 0; }

.ado-motivos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.ado-motivo {
  background: #fff; border-radius: 14px; padding: 22px 20px;
  border: 1px solid var(--verde-claro); box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.ado-motivo .icono { font-size: 30px; margin-bottom: 10px; }
.ado-motivo h3 { font-family: var(--berlin); color: var(--verde); font-size: 1rem; margin-bottom: 6px; }
.ado-motivo p { color: var(--texto-suave); font-size: 13px; line-height: 1.55; }

.ado-cta {
  background: linear-gradient(135deg, var(--verde) 0%, #2c453a 100%);
  border-radius: 16px; padding: 36px 28px; text-align: center; color: #fff;
  margin-bottom: 24px;
}
.ado-cta h2 { font-family: var(--berlin); font-size: 1.3rem; margin-bottom: 8px; }
.ado-cta h2 span { color: var(--dorado); }
.ado-cta p { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.6; max-width: 520px; margin: 0 auto 20px; }
.ado-cta-btn {
  display: inline-block; padding: 13px 32px; border-radius: 10px; background: var(--dorado);
  color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; font-family: inherit;
  transition: opacity .2s;
}
.ado-cta-btn:hover { opacity: .9; }

/* Placeholder versión grande: cuando exista el tablón de animales en
   adopción, se agrega acá la sección #ado-listado con las publicaciones
   de cada refugio (patrón Mascotas Perdidas). */
.ado-proximamente {
  text-align: center; padding: 26px 20px; border: 1.5px dashed var(--verde-medio);
  border-radius: 14px; color: var(--texto-suave); font-size: 13.5px;
}
.ado-proximamente strong { color: var(--verde); }

@media (max-width: 600px) {
  .ado-header { padding: 40px 20px 36px; }
  .ado-wrap { margin-top: -20px; }
  .ado-mensaje { padding: 28px 22px; }
}

/* ── Refugios ────────────────────────────────────────────────────────────── */
/* Migrado de <style> inline en refugios.html (05/09/2026) — header alineado
   a los mismos valores que .mp-header. */
.ref-header {
  background: linear-gradient(135deg, var(--verde) 0%, #2c453a 100%);
  color: #fff;
  padding: 52px 24px 40px;
  text-align: center;
}
.ref-header h1 {
  font-family: var(--berlin);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
}
.ref-header h1 span { color: var(--dorado); }
.ref-header p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  line-height: 1.6;
}

.ref-wrap { max-width: 1100px; margin: -28px auto 60px; padding: 0 20px; }

.ref-gate {
  background: #fff; border-radius: 16px; padding: 48px 32px; text-align: center;
  max-width: 460px; margin: 60px auto; box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.ref-gate .icono { font-size: 52px; margin-bottom: 14px; }
.ref-gate h2 { color: var(--verde); font-size: 1.3rem; margin-bottom: 10px; font-family: var(--berlin); }
.ref-gate p { color: var(--texto-suave); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.ref-gate-btns { display: flex; flex-direction: column; gap: 10px; }
.ref-btn-primario {
  padding: 13px; border: none; border-radius: 10px; background: var(--verde); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ref-btn-secundario {
  padding: 13px; border: 1.5px solid var(--verde); border-radius: 10px; background: none;
  color: var(--verde); font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s;
}
.ref-btn-secundario:hover { background: var(--verde); color: #fff; }

.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ref-card {
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid var(--verde-claro); display: flex; flex-direction: column;
}
.ref-card.destacado { border: 2px solid var(--dorado); }
.ref-card-top { display: flex; gap: 14px; padding: 20px 20px 14px; align-items: flex-start; }
.ref-logo {
  width: 60px; height: 60px; border-radius: 12px; background: var(--verde-claro); flex-shrink: 0;
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.ref-nombre { font-family: var(--berlin); color: var(--verde); font-size: 1.05rem; margin-bottom: 2px; }
.ref-nombre .estrella { color: var(--dorado); font-size: 13px; }
.ref-ubicacion { font-size: 12.5px; color: var(--texto-suave); }
.ref-desc { padding: 0 20px 14px; font-size: 13.5px; color: #555; line-height: 1.55; flex: 1; }
.ref-links { padding: 0 20px 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.ref-link-btn {
  font-size: 12.5px; padding: 7px 12px; border-radius: 8px; text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--verde-medio); color: var(--verde); background: #fff;
  text-transform: capitalize;
}
.ref-link-btn:hover { background: var(--verde-claro); }
.ref-link-btn.donar { background: var(--dorado); border-color: var(--dorado); color: #fff; }
.ref-link-btn.donar:hover { opacity: .9; background: var(--dorado); }

.ref-vacio { text-align: center; padding: 60px 20px; color: var(--texto-suave); }
.ref-vacio .icono { font-size: 44px; margin-bottom: 12px; }

@media (max-width: 600px) {
  .ref-header { padding: 40px 20px 36px; }
  .ref-wrap { margin-top: -20px; }
}