/* Sistema de diseño moderno para Huellitas */
/* Inspirado en tendencias de diseño UX/UI 2025 */

:root {
  /* Paleta de colores moderna */
  --primary-orange: #FF6B35;
  --secondary-orange: #F5A623;
  --accent-orange: #FF8C42;
  --light-orange: #FFF4E6;
  
  --primary-text: #2C3E50;
  --secondary-text: #5A6C7D;
  --light-text: #8892A3;
  
  --white: #FFFFFF;
  --light-gray: #F8F9FA;
  --border-color: #E9ECEF;
  
  /* Espaciado */
  --page-max: 1200px;
  --page-gutter: 24px;
  --section-padding: 80px 0;
  --card-padding: 32px;
  
  /* Tipografía */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.15);
  
  /* Bordes redondeados */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

/* Reset y estilos base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  background: var(--white);
  color: var(--primary-text);
  line-height: 1.6;
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  overflow-x: hidden;
}
@media (min-width: 769px) {
  body {
    padding-top: 60px; /* Espacio solo en desktop */
  }
  /* Página del mapa: eliminar todo padding para ocupar toda la pantalla */
  body.mapa {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
  }
}

/* Botón de llamada a la acción (CTA) reutilizado para publicar un caso */
.cta-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #FF6B35;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cta-btn:hover {
  background: #F5A623;
}

/* Botones de inicio de sesión social en login.html */
.social-login {
  max-width: 400px;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: background 0.2s ease;
}

.social-btn i {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

.social-google {
  border-color: #db4437;
  color: #db4437;
}

.social-facebook {
  border-color: #3b5998;
  color: #3b5998;
}

.social-otros {
  border-color: #8e44ad;
  color: #8e44ad;
}

.social-btn:hover {
  background: #f9f9f9;
}

/* Encabezados para páginas internas (perdidas, encontradas, adopción, mapa, chat) */
.page-header {
  width: 100%;
  padding: 0.5rem 1rem; /* Padding ultra-mínimo */
  margin-top: 0; /* Sin margen superior para pegarse a la navbar */
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1000;
}

/* Colores de fondo por tipo de página */
.page-header.perdida {
  background: #d40000;
}
.page-header.encontrada {
  background: #007f00;
}
.page-header.adopcion {
  background: #004080;
}
.page-header.mapa {
  background: #663399;
}
.page-header.chat {
  background: #663399;
}

/* Página de Recursos: color de encabezado coherente con la paleta */
.page-header.recursos {
  background: #663399;
}

/* Encabezado para páginas de inicio de sesión y mis publicaciones */
.page-header.login,
.page-header.mis-publicaciones {
  background: #663399;
  position: relative;
  overflow: hidden;
}

/* Secciones de recursos en la página de Recursos. Se presentan como tarjetas amplias centradas. */
.resource-section {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.resource-section h2 {
  margin-top: 0;
  color: #8e44ad;
}

.resource-section ul {
  padding-left: 1.25rem;
}

/* Formulario de suscripción a alertas dentro de la sección de Recursos */
.subscription-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 500px;
  margin-top: 1rem;
}

.subscription-form label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: #333;
}

.subscription-form input,
.subscription-form select {
  margin-top: 0.25rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.subscription-form button {
  align-self: flex-start;
  padding: 0.6rem 1.2rem;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

.subscription-form button:hover {
  background: #6c3483;
}

/* Contenedor de iconos para compartir cada tarjeta */
.share-icons {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  /* Sin fondo por defecto para integrarse con el card */
  padding: 0;
  border-radius: 0;
}

.share-icons a {
  color: #8e44ad;
  font-size: 1.2rem;
  transition: color 0.2s ease;
  /* Eliminar estilo de botón heredado de .pet-card a */
  /* Pequeñas etiquetas para compartir; se diferencian del botón de WhatsApp */
  background: #f0e6f8 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  border: none !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  color: #663399 !important;
}

.share-icons a:hover {
  color: #663399 !important;
  background: #e2d4f2 !important;
}

/* Contenedor y mensajes del chat */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  padding: 0.5rem;
  border-radius: 8px;
  background: #f5f0fa;
}

.chat-message.own {
  margin-left: auto;
  background: #e9dff5;
}

.chat-message .name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.chat-message .timestamp {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
}

.chat-message .text {
  margin-top: 0.25rem;
}

/* Formulario de chat */
.chat-form {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-form input,
.chat-form textarea {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.chat-form button {
  align-self: flex-end;
  padding: 0.5rem 1rem;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-form button:hover {
  background: #6c3483;
}

/* Botón de chat en tarjetas */
.chat-btn {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s ease;
}

.chat-btn:hover {
  background: #6c3483;
}

/* Botón para eliminar publicaciones del usuario */
.delete-btn {
  margin-top: 0.5rem;
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s ease;
}

.delete-btn:hover {
  background: #c0392b;
}

/* Botón para compartir la búsqueda filtrada */
.share-search-btn {
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 4px;
  background: #e6e0f4;
  color: #663399;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.share-search-btn:hover {
  background: #d2c6e9;
}

.page-header h1 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}

.page-header p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Destacar enlace activo en la navegación */
.nav-links li a.active {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

/* Navigation bar moderna */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-text);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
}

.navbar .logo {
  position: absolute;
  left: 32px;
}

.logo {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-orange);
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  width: 28px;
  height: 28px;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2.5rem;
  margin-left: 2rem;
  align-items: center; /* Alineación vertical uniforme */
}

/* Ajuste de espaciado cuando NO hay usuario logueado (solo 3 elementos) */
body:not(.user-logged) .nav-links,
html:not(.has-logged-user) .nav-links {
  gap: 3.5rem; /* Más espaciado entre los 3 elementos principales */
}

/* Espaciado normal cuando hay usuario logueado */
body.user-logged .nav-links,
html.has-logged-user .nav-links {
  gap: 2.5rem; /* Espaciado original para más elementos */
}

/* Orden de navegación cuando NO hay usuario logueado */
body:not(.user-logged) .nav-links li:has(#nav-login),
html:not(.has-logged-user) .nav-links li:has(#nav-login) {
  order: 3 !important; /* Colocar "Iniciar sesión" después de "Publicaciones" */
}

/* Orden normal cuando hay usuario logueado */
body.user-logged .nav-links li:has(#nav-login),
html.has-logged-user .nav-links li:has(#nav-login) {
  order: 6 !important; /* Orden original al final */
}

/* Estilo base para TODOS los elementos de navegación (links y spans) */
.nav-links li a,
.nav-links li span {
  text-decoration: none;
  color: var(--primary-text);
  font-weight: var(--font-weight-medium);
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 80px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  border: none;
  border-bottom: none;
  vertical-align: middle;
}

/* Estados hover y active solo para enlaces */
.nav-links li a:hover,
.nav-links li a.active {
  background: var(--light-orange);
  color: var(--primary-orange);
}

/* Estilo específico para el nombre de usuario */
.nav-links li span.nav-username,
.nav-links li #nav-user {
  color: var(--primary-orange) !important;
  font-weight: var(--font-weight-semibold) !important;
  background: transparent !important;
}

/* Estabilizar elementos de navegación */
.nav-links li {
  min-width: 0; /* Evita que cambien de tamaño inesperadamente */
  flex-shrink: 0; /* No se encogen */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Corrección específica para alineación perfecta de todos los elementos */
.nav-links li a,
.nav-links li span,
.nav-links li #nav-publicaciones,
.nav-links li #nav-profile,
.nav-links li #nav-user,
.nav-links li #nav-logout,
.nav-links li #nav-login {
  border: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  vertical-align: baseline !important;
  line-height: 1.2 !important;
}

/* SISTEMA ANTI-PARPADEO: Ocultar elementos de navegación hasta que JS esté listo */
#nav-my-posts {
  display: none !important; /* Ocultar por defecto elementos de usuario logueado */
}

/* Elementos de login/logout - sin reglas CSS para permitir control total por JavaScript */
/* JavaScript controlará estos elementos completamente */

/* Protección extra contra titilado del elemento nav-user */
#nav-user {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

/* Solo mostrar nav-user cuando esté completamente listo */
.nav-ready #nav-user {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hacer nav-user completamente estable una vez visible */
.nav-ready #nav-user[style*="opacity: 1"] {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: static !important;
  transition: none !important;
  animation: none !important;
}

/* Alineación vertical del nav-user con otros elementos */
/* nav-user ahora usa la misma estructura que los demás ítems: <li><a> */
/* Eliminar estilos específicos que lo hacían diferente - ahora hereda de .nav-links li a */

/* Clase para mostrar elementos cuando JS esté listo */
.nav-ready #nav-my-posts,
.nav-ready #nav-user {
  display: block !important;
  transition: opacity 0.2s ease;
}

/* nav-profile solo se muestra cuando hay usuario confirmado - NO cuando solo esté nav-ready */
.nav-ready.user-logged.user-confirmed #nav-profile {
  display: block !important;
  transition: opacity 0.2s ease;
}

/* Control por clases CSS para navegación */
/* Solo ocultar inicialmente "Iniciar sesión" cuando hay usuario logueado */

/* Estados controlados por JavaScript - sin transiciones */
.nav-links li.nav-hidden,
.nav-links li a.nav-hidden,
.nav-links li span.nav-hidden,
.nav-hidden {
  display: none !important;
}

.nav-links li.nav-visible,
.nav-links li a.nav-visible,
.nav-links li span.nav-visible,
.nav-visible {
  display: inline-flex !important;
}

/* Navegación siempre visible - sin parpadeos */
.nav-links {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Solución CSS pura sin JavaScript */
/* Cuando hay elementos de usuario visible, ocultar "Iniciar sesión" */
.nav-links:has(#nav-user.nav-visible) #nav-login,
.nav-links:has(#nav-profile.nav-visible) #nav-login {
  display: none !important;
}

/* Cuando NO hay elementos de usuario visible, mostrar "Iniciar sesión" */
.nav-links:not(:has(#nav-user.nav-visible)):not(:has(#nav-profile.nav-visible)) #nav-login {
  display: inline-flex !important;
}

/* Anti-parpadeo AGRESIVO: Ocultar "Iniciar sesión" por defecto */
#nav-login {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Solo mostrar "Iniciar sesión" cuando está explícitamente autorizado */
body.show-login #nav-login,
.nav-ready:not(.user-logged) #nav-login.nav-visible {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Asegurar que elementos de usuario logueado sean visibles cuando corresponde */
html.has-logged-user #nav-user,
html.has-logged-user #nav-logout,
body.user-logged #nav-user,
body.user-logged #nav-logout {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* nav-profile solo se muestra cuando hay usuario confirmado */
html.has-logged-user.user-confirmed #nav-profile,
body.user-logged.user-confirmed #nav-profile {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Asegurar que nav-profile esté oculto por defecto - REGLA PRIORITARIA */
.nav-links #nav-profile,
#nav-profile {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Sobrescribir cualquier regla que lo haga visible sin usuario confirmado */
.nav-ready:not(.user-confirmed) #nav-profile,
.nav-ready #nav-profile:not(.nav-visible),
html:not(.has-logged-user) #nav-profile,
body:not(.user-logged) #nav-profile {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Elementos de navegación principales (siempre visibles) */
.nav-links li a[href*="index.html"],
.nav-links li a[href*="perdidas.html"],
.nav-links li a[href*="adopcion.html"],
.nav-links li a[href*="mapa.html"],
.nav-links li a[href*="recursos.html"] {
  display: block !important; /* Pestañas principales siempre visibles */
}

/* Estado cuando la navegación está lista */
.nav-ready .nav-links {
  opacity: 1; /* Navegación completamente inicializada */
}

/* Toggle para menú móvil (hamburguesa) */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle .hamburger {
  display: block;
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

.nav-toggle .close {
  display: none;
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

.nav-toggle.open .hamburger {
  display: none;
}

.nav-toggle.open .close {
  display: block;
}

@media (max-width: 768px) {
  /* IMPORTANTE: Ocultar navegación desktop por completo en mobile */
  .navbar .nav-links {
    display: none !important; /* FORZAR que esté oculto por defecto */
  }

  /* Drawer móvil - rediseño completo */
  .navbar .nav-links {
    position: fixed;
    top: 65px;
    right: 16px;
    width: 140px; /* ANCHO REDUCIDO - menos espacio del lado derecho */
    background: #FFF4E6 !important; /* FONDO CREMITA como botón Inicio */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(243, 156, 18, 0.3); /* Borde naranja suave */
    z-index: 100000;
    padding: 0 !important; /* SIN padding para eliminar espacios extra */
    margin: 0 !important;
    flex-direction: column !important;
    gap: 0 !important; /* Sin gap en mobile */
    margin-left: 0 !important; /* Reset margin desktop */
    overflow: hidden; /* Para mantener bordes redondeados */
  }

  .navbar .nav-links.open {
    display: flex !important; /* SOLO VISIBLE CUANDO TIENE CLASE 'open' */
  }

  /* Lista de navegación */
  .nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Divisores selectivos para el drawer móvil */

  /* Reset COMPLETO para mobile - sobrescribir reglas desktop */
  .navbar .nav-links li {
    border-bottom: none !important;
    margin: 0 !important; /* Sin márgenes */
    padding: 0 !important; /* Sin padding */
    list-style: none !important; /* Sin viñetas */
    display: block !important; /* Block en lugar de flex */
    align-items: flex-start !important; /* Alinear al inicio */
    justify-content: flex-start !important; /* Justificar al inicio */
    text-align: left !important; /* Alineación izquierda forzada */
    min-width: unset !important; /* Reset min-width */
    flex-shrink: unset !important; /* Reset flex-shrink */
    height: auto !important; /* Auto height */
    width: 100% !important; /* Ancho completo */
  }

  /* Enlaces del menú - MÁS ALTOS y perfectamente alineados */
  .navbar .nav-links li a,
  .navbar .nav-links li span {
    display: block !important;
    padding: 14px 12px !important; /* MÁS PADDING VERTICAL (14px vs 10px) y menos horizontal para ancho reducido */
    color: #f39c12 !important; /* TEXTO NARANJA */
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important; /* FORZAR alineación izquierda */
    transition: background-color 0.2s ease !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important; /* Line height cómodo para botones más altos */
    margin: 0 !important; /* Sin márgenes */
    border-bottom: 1px solid rgba(243, 156, 18, 0.3) !important; /* LÍNEA SEPARADORA VISIBLE */
    width: 100% !important; /* Ancho completo */
    height: auto !important; /* Altura automática */
    min-width: unset !important; /* Reset min-width */
    justify-content: flex-start !important; /* Justificar al inicio */
    align-items: flex-start !important; /* Alinear al inicio */
    position: relative !important; /* Posición relativa */
  }

  /* ELIMINAR TODOS LOS ESPACIOS posibles */
  .navbar .nav-links li {
    line-height: 1 !important; /* Line height mínimo */
  }

  .navbar .nav-links li * {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: left !important; /* Forzar alineación izquierda en TODO */
  }

  /* Quitar borde del último elemento */
  .navbar .nav-links li:last-child a,
  .navbar .nav-links li:last-child span {
    border-bottom: none !important;
  }

  /* Hover effect */
  .navbar .nav-links li a:hover,
  .navbar .nav-links li a.active {
    background-color: rgba(243, 156, 18, 0.1); /* Hover naranja suave */
    color: #e67e22 !important; /* Naranja más oscuro en hover */
  }

  /* Primer y último elemento con bordes redondeados */
  .navbar .nav-links li:first-child a {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .navbar .nav-links li:last-child a {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  /* OCULTAR elementos cuando usuario NO está logueado para eliminar espacio en blanco */
  body:not(.user-logged) .navbar .nav-links li:has(#nav-profile),
  body:not(.user-logged) .navbar .nav-links li:has(#nav-user),  
  body:not(.user-logged) .navbar .nav-links li:has(#nav-logout) {
    display: none !important; /* Ocultar completamente para eliminar espacio vacío */
  }

  /* FORZAR elementos COMPLETAMENTE pegaditos */
  .navbar .nav-links li + li {
    margin-top: -1px !important; /* MARGEN NEGATIVO para pegar completamente */
  }

  .navbar .nav-links li:not(:last-child) {
    margin-bottom: 0 !important; /* Sin margen inferior */
  }

  /* Eliminar CUALQUIER espacio oculto de elementos no visibles */
  .navbar .nav-links li[style*="display: none"],
  .navbar .nav-links li:not([style]):not(:visible) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Forzar que solo los elementos visibles ocupen espacio */
  .navbar .nav-links li:empty {
    display: none !important;
    height: 0 !important;
  }

  /* Hero title mobile fix - MÁS ESPACIO para evitar corte de texto */
  .hero-text h1 {
    margin-top: 50px !important; /* MÁS espacio para evitar corte */
    font-size: 1.6rem !important; /* Ligeramente más pequeño para que quepa */
    line-height: 1.3 !important;
    padding: 0 20px !important; /* Padding lateral para que no se corte */
    word-wrap: break-word !important; /* Permitir salto de línea */
  }

  /* Hero content completo más compacto */
  .hero-content {
    padding-top: 80px !important; /* Más padding superior */
  }

  /* Hero stats mobile - LAYOUT HORIZONTAL */
  .hero-stats {
    display: flex !important; /* FLEX para layout horizontal */
    justify-content: space-around !important; /* Distribuir uniformemente */
    align-items: center !important;
    gap: 0.5rem !important; /* Gap entre elementos */
    max-width: 100% !important; /* Ancho completo en mobile */
    flex-wrap: nowrap !important; /* No permitir wrap */
    padding: 0.5rem !important;
    margin: 1rem auto !important;
  }

  .hero-stats .stat-item {
    flex: 1 !important; /* Distribuir espacio equitativamente */
    text-align: center !important;
    margin: 0 !important;
  }

  .hero-stats .stat-number {
    font-size: 1.2rem !important; /* MÁS PEQUEÑO para que quepan horizontalmente */
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  .hero-stats .stat-label {
    font-size: 0.7rem !important; /* MÁS PEQUEÑO para que quepan */
    line-height: 1.1 !important;
    margin-top: 0.2rem !important;
  }

  /* 1. PUBLICACIONES PAGE - Arreglar contraste de textos */
  .modern-page-header h1,
  .page-header-text h1,
  .publicaciones-page h1 {
    color: white !important; /* Texto blanco para contraste */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important; /* Sombra más fuerte para legibilidad */
  }

  .modern-page-header .page-subtitle,
  .page-header-text p,
  .publicaciones-page .page-subtitle {
    color: white !important; /* Texto blanco */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7) !important; /* Sombra para subtítulos */
  }

  /* 2. CARDS MIS PUBLICACIONES/FAVORITOS - Centrar y reducir tamaño */
  .modern-posts-grid .post-card,
  .modern-posts-grid > div,
  #mis-publicaciones-list > div,
  #favoritos-list > div {
    width: 85% !important; /* Reducir ancho */
    max-width: 320px !important; /* Máximo ancho */
    margin: 0 auto 1rem auto !important; /* Centrar horizontalmente */
    padding: 0.8rem !important; /* Padding más pequeño */
  }

  .modern-tabs,
  .tabs-header {
    justify-content: center !important; /* Centrar botones de tabs */
    margin: 0 auto !important;
    max-width: 85% !important;
  }

  .modern-tab-btn {
    padding: 0.6rem 1rem !important; /* Botones más compactos */
    font-size: 0.9rem !important;
  }

  /* 3. PERFIL MOBILE - Ocultar header, empezar desde "Información de la cuenta" */
  .perfil-page .page-header,
  .perfil-page .hero-container,
  .perfil-page .hero-content {
    display: none !important; /* Ocultar todo el header en mobile */
  }

  .perfil-page main {
    padding-top: 80px !important; /* Espacio para navbar */
  }

  /* 4. LOGIN MOBILE - Rediseño completo prolijo y ordenado */
  .login-page .hero-container,
  .login-page .page-header {
    padding: 1rem !important; /* Padding reducido */
  }

  .login-page .hero-text h1 {
    font-size: 1.4rem !important; /* Título más pequeño */
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
  }

  .login-page .hero-subtitle {
    font-size: 0.9rem !important; /* Subtítulo más pequeño */
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
  }

  .login-page .login-section {
    margin-top: 1rem !important;
    padding: 1rem !important;
  }

  .login-page .login-section h2 {
    font-size: 1.2rem !important; /* Título de sección más pequeño */
    margin-bottom: 0.8rem !important;
  }

  .login-page .login-section p {
    font-size: 0.85rem !important; /* Texto descriptivo más pequeño */
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* Botón de Google más compacto */
  .login-page .google-login-btn {
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Navegación lista - reset completo */
  .navbar .nav-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* Block en lugar de flex */
    gap: 0 !important; /* Sin gap */
  }

  /* Animación de entrada */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-links.open {
    animation: slideDown 0.3s ease-out;
  }

  /* Botón hamburguesa */
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: 16px; /* Alineado con padding del navbar */
    padding: 0;
    border-radius: 6px;
    transition: background-color 0.2s ease;
  }

  .nav-toggle:hover {
    background-color: rgba(255,255,255,0.1);
  }

  .nav-toggle .hamburger {
    display: block !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #f39c12 !important; /* Color naranja directo */
    font-weight: bold !important;
    background: transparent !important; /* Sin fondo */
    border: none !important;
  }

  .nav-toggle .close {
    display: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #f39c12 !important; /* Color naranja directo */
    font-weight: bold !important;
    background: transparent !important; /* Sin fondo */
    border: none !important;
  }
  
  /* Asegurar que nav-toggle no tenga colores violetas */
  .nav-toggle {
    background: transparent !important;
    border: 2px solid #f39c12 !important; /* Borde naranja visible */
    border-radius: 6px !important;
    padding: 8px !important;
    color: #f39c12 !important;
  }
  
  .nav-toggle:hover {
    background: rgba(243, 156, 18, 0.1) !important; /* Hover naranja suave */
    border-color: #e67e22 !important;
  }

  .nav-toggle.open .hamburger {
    display: none;
  }

  .nav-toggle.open .close {
    display: block;
  }
  .navbar {
    flex-wrap: nowrap;
    padding: 0.75rem 1rem;
    position: fixed !important; /* Asegurar que permanezca fijo */
    top: 0 !important;
    height: 60px; /* Altura fija */
    align-items: center;
    z-index: 100000; /* Z-index muy alto */
    background: rgba(255, 255, 255, 0.98) !important; /* Más opaco en mobile */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  .logo {
    font-size: 1.2rem;
  }
  
  .logo-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Ajustar la altura del hero para que el contenido principal aparezca antes */
@media (max-width: 768px) {
  #hero {
    height: 35vh;
    min-height: 200px;
  }
  
  .page-header {
    padding: 1rem;
    text-align: center;
  }
  
  .page-header h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }
  
  .page-header p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  
  .cta-btn {
    width: 100%;
    max-width: 300px;
    padding: 0.75rem 1rem;
    font-size: 16px;
  }
}

/* Hero section and slider */
#hero {
  position: relative;
  /* Reducimos altura para que las tarjetas de categoría queden más arriba */
  height: 45vh;
  min-height: 260px;
  overflow: hidden;
  border-bottom: 4px solid #663399;
}

#hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Fallback: ensure the first slide is visible before JS initializes the slider */
.slide:first-child {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* Posición por defecto */
}



.slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 2rem 1rem;
}

.hero-overlay h1 {
  font-size: 3rem;
  margin: 0 0 0.5rem;
}

.hero-overlay p {
  font-size: 1.3rem;
  max-width: 600px;
  margin: 0;
}

main {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 100;
  box-sizing: border-box;
}

/* Estilo especial para la página del mapa - ocupar toda la pantalla hasta los bordes */
.mapa main {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 100;
  box-sizing: border-box;
  left: 0;
  right: 0;
}

/* Forzar que todos los elementos de la página del mapa ocupen el ancho completo */
body.mapa * {
  box-sizing: border-box;
}

/* Specific spacing for publicaciones page to avoid H1 being cut by fixed navbar */
.publicaciones-page {
  padding-top: 0.5rem; /* small breathing room under the navbar */
}

.publicaciones-page h1 {
  margin-top: 0.75rem; /* push the title down a bit */
}

#form-section {
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  border-top: 4px solid #ff6f61;
}

#form-section h2 {
  margin-top: 0;
}

#pet-form label {
  display: block;
  margin-bottom: 0.5rem; /* menos espaciado entre campos */
  font-size: 0.9rem; /* texto más pequeño */
}

#pet-form input[type="text"],
#pet-form input[type="tel"],
#pet-form input[type="file"],
#pet-form select,
#pet-form textarea {
  width: 100%;
  padding: 0.4rem; /* menos padding interno */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 0.15rem; /* menos margen superior */
  font-size: 0.9rem; /* texto más pequeño */
}

/* Hacer el textarea específicamente más compacto */
#pet-form textarea {
  min-height: 50px; /* altura mínima más pequeña */
  max-height: 80px; /* limitar altura máxima */
  resize: vertical; /* solo resize vertical */
}

#pet-form button {
  display: inline-block;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.2rem; /* botón más compacto */
  font-size: 0.95rem; /* texto ligeramente más pequeño */
  cursor: pointer;
  margin-top: 0.8rem; /* más espaciado arriba para separarlo del último campo */
  transition: background 0.2s ease;
  width: 100%; /* botón de ancho completo */
}

#pet-form button:hover {
  background: #6c3483;
}

/* Contenedor de dirección con botón de ubicación */
.direccion-container {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important; /* Centrar verticalmente ambos elementos */
  width: 100% !important;
  position: relative;
  box-sizing: border-box !important;
}

.direccion-container input {
  flex: 1 !important;
  margin-top: 0 !important; /* Resetear margen del contenedor padre */
  margin-bottom: 0 !important;
  min-width: 0 !important; /* Permitir que el input se encoja si es necesario */
  width: auto !important; /* No ocupar todo el ancho */
}

.btn-mi-ubicacion,
.btn-ubicacion {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 15px; /* Mismo border-radius que el input modern-input */
  padding: 14px 18px; /* Mismo padding que el input modern-input */
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
  font-size: 0.9rem;
  min-width: 120px !important;
  max-width: 120px !important;
  flex-shrink: 0 !important; /* No permitir que se encoja */
  flex-grow: 0 !important; /* No permitir que crezca */
  width: 120px !important; /* Ancho fijo */
  height: auto !important; /* Permitir que la altura se ajuste automáticamente */
  box-sizing: border-box !important; /* Incluir padding y border en el tamaño total */
}

.btn-mi-ubicacion:hover,
.btn-ubicacion:hover {
  background: #218838;
}

.btn-mi-ubicacion i,
.btn-ubicacion i {
  margin-right: 0.4rem;
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .direccion-container {
    flex-direction: column !important;
    gap: 0.3rem !important;
  }
  
  .btn-mi-ubicacion,
  .btn-ubicacion {
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
    padding: 0.6rem;
    font-size: 16px; /* Evita zoom en iOS */
  }
}

/* Forzar layout correcto en desktop */
@media (min-width: 769px) {
  .form-group .direccion-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  .form-group .direccion-container input#direccion {
    flex: 1 !important;
    width: auto !important;
    min-width: 200px !important;
    margin: 0 !important;
  }
  
  .form-group .direccion-container .btn-ubicacion,
  .form-group .direccion-container .btn-mi-ubicacion {
    flex: 0 0 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    margin: 0 !important;
    align-self: center !important;
    height: 51px !important; /* Altura exacta para coincidir con el input */
    box-sizing: border-box !important;
  }
}

#list-section {
  margin-top: 2rem;
}

/* Barra de filtros */
#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.25rem; /* Reducido para menos espacio antes del mapa */
  position: relative;
  z-index: 200;
}

#filters select,
#filters input[type="text"] {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 150px;
  box-sizing: border-box;
  position: relative;
  z-index: 201;
}

#filters button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
  z-index: 202;
}

#filters button:hover {
  background: #6c3483;
}

#filters i.fa-filter {
  margin-right: 0.25rem;
}

/* Responsive para filtros en móvil */
@media (max-width: 768px) {
  #filters {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0 -1rem 1rem -1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
  }
  
  #filters select,
  #filters input[type="text"] {
    width: 100%;
    min-width: auto;
    font-size: 16px; /* Evita zoom en iOS */
    padding: 0.75rem;
    border-radius: 8px;
    border: 2px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  #filters button {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
    font-size: 16px;
    border-radius: 8px;
    font-weight: bold;
  }
}

/* Etiquetas de tipo */
.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
}

.badge-perdida {
  background: #ffebeb;
  color: #d40000;
}

.badge-encontrada {
  background: #e9fbe9;
  color: #007f00;
}

.badge-adopcion {
  background: #eaf2ff;
  color: #004080;
}

/* Estilo para el pie de página */
footer {
  text-align: center;
  padding: 0; /* Eliminado completamente el padding para quitar espacio en blanco */
  background: #f4f5f7;
  color: #666;
  margin-top: 0; /* Eliminado margin-top también */
  border-top: none;
}

footer .heart {
  color: #ff6f61;
}

/* Estilo para el contenedor del mapa */
/* Mapa responsive */
@media (max-width: 768px) {
  #map {
    height: 360px !important;
    width: 100%;
    margin: 0; /* Sin márgenes extra en mobile también */
  }
  
  main {
    padding: 1rem;
    overflow-x: hidden; /* Evitar scroll horizontal */
    overflow-y: auto; /* Permitir scroll vertical normal */
  }
  
  /* Ajustar contenedor del mapa en mobile */
  .map-container {
    margin: 0.25rem 0 0.75rem 0 !important; /* Consistente con regla global */
  }
  
  /* Mapa expandido en móvil - ocupar toda la pantalla hasta los bordes */
  .mapa main {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    left: 0;
    right: 0;
  }
  
  .mapa #map {
    width: 100vw !important;
    height: calc(100vh - 160px) !important;  /* Toda la altura menos navbar y filtros en móvil */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;  /* Sin bordes redondeados para tocar completamente los bordes */
    position: fixed !important;
    top: 160px !important;  /* Debajo de la navbar + header + filtros en móvil */
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
  }
}

/* Mapa */
#map {
  width: 100%;
  height: 420px;
  margin: 0; /* Sin márgenes extra, el contenedor maneja el espaciado */
  border-radius: 8px;
  overflow: hidden; /* Límites definidos */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  box-sizing: border-box; /* Asegurar cálculo correcto de dimensiones */
  transform: translateZ(0); /* Forzar aceleración hardware y evitar subpixel rendering */
  backface-visibility: hidden; /* Evitar flickering en algunos browsers */
}

/* Reducir ancho del mapa en desktop */
@media (min-width: 769px) {
  .map-container {
    width: 80% !important;
    max-width: 80% !important;
    margin: 0.25rem auto 1rem auto !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
  
  /* Centrar también los filtros para que coincidan con el mapa */
  #filters {
    width: 80% !important;
    margin: 0 auto 0.25rem auto !important;
    justify-content: center !important;
  }
  
  /* Forzar que el mapa de Google respete el contenedor */
  .map-container #map {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }
}

/* Mapa expandido para la página del mapa - posicionamiento absoluto para ignorar contenedores */
.mapa #map {
  width: 100vw !important;
  height: calc(100vh - 180px) !important;  /* Toda la altura menos navbar y filtros */
  margin: 0 !important;  /* Sin márgenes para tocar los bordes */
  padding: 0 !important;
  border-radius: 0 !important;  /* Sin bordes redondeados para tocar completamente los bordes */
  overflow: hidden;
  position: fixed !important;
  top: 180px !important;  /* Debajo de la navbar + header + filtros */
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);  /* Sombra más pronunciada */
  position: relative;
  z-index: 1;
  max-width: 100%; /* Evitar desbordamiento */
  max-height: 350px; /* Altura máxima fija */
}

#pet-list {
  display: none !important;
  /* Lista de casos oculta - solo mostrar mapa */
}

/* Chat section */
#chat-section {
  margin-top: 3rem;
}

#chat-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #8e44ad;
}

.chat-messages {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
}

.chat-message {
  margin-bottom: 0.75rem;
}

.chat-message .name {
  font-weight: 600;
  color: #ff6f61;
  margin-right: 0.3rem;
}

.chat-message .timestamp {
  font-size: 0.8rem;
  color: #999;
  margin-left: 0.4rem;
}

.chat-form {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-form input[type="text"],
.chat-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.chat-form button {
  align-self: flex-end;
  padding: 0.6rem 1.5rem;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-form button:hover {
  background: #6c3483;
}

/* Permitir que los elementos absolutos dentro de los labels se posicionen correctamente */
.modal-content label {
  position: relative;
}

/* Estilos para el autocompletado de direcciones */
.autocomplete-items {
  position: absolute;
  z-index: 200000 !important;
  background: var(--white);
  border: 3px solid var(--primary-orange);
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
  border-radius: 0 0 15px 15px;
  left: 0;
  top: 100%;
  margin-top: -3px;
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-color);
}

.autocomplete-item:hover {
  background: #f0f0f0;
  color: var(--primary-text);
}

.autocomplete-item:last-child {
  border-bottom: none;
  border-radius: 0 0 12px 12px;
}

.autocomplete-item.no-results {
  color: var(--secondary-text);
  font-style: italic;
  cursor: default;
  background: var(--light-gray);
}

.autocomplete-item.no-results:hover {
  background: var(--light-gray);
}

.autocomplete-item.error {
  color: #dc3545;
  font-style: italic;
  cursor: default;
  background: #f8d7da;
}

.autocomplete-item.error:hover {
  background: #f8d7da;
}

/* Notificación emergente simplificada */
.notification {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #007f00;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 999999;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 280px;
  max-width: 400px;
}

.notification.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.notification span {
  flex: 1;
  text-align: center;
}

.pet-card {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  border-left: 4px solid #8e44ad !important;
}

/* Placeholder para cards sin imagen */
.card-image-placeholder {
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.card-image-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.card-image-placeholder span {
    font-weight: 500;
}

.pet-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.pet-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #8e44ad !important;
}

.pet-card h3 i {
  margin-right: 0.5rem;
}

.pet-card p {
  margin: 0.25rem 0;
}

.pet-card small {
  display: block;
  margin-top: 0.5rem;
  color: #777;
}

.pet-card a {
  margin-top: 0.5rem;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
}

.pet-card a:hover {
  background: #1ba855;
}

/* Clase utilitaria para ocultar texto visualmente pero mantenerlo accesible a lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Modal para el formulario de publicación */
.modal {
  position: fixed;
  /* Offset from top so modal content is not hidden behind the fixed navbar */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110000; /* Above navbar (navbar z-index:100000) */
}

.modal.active {
  display: flex !important;
}

.modal-content {
  background: #fff;
  border-radius: 8px;
  max-width: 480px;
  width: 90%;
  /* Optimizado para que el formulario entre sin scroll */
  max-height: calc(100vh - 80px);
  margin-top: 40px; /* menos margen superior */
  margin-bottom: 20px; /* menos margen inferior */
  padding: 1rem; /* menos padding interno */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow-y: auto;
  border: none; /* Sin borde */
  outline: none; /* Sin outline */
}

/* On small screens keep modal centered vertically */
@media (max-width: 768px) {
  .modal {
    align-items: flex-start !important;
    padding-top: 40px !important; /* Más espacio arriba para ver el título */
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .modal-content {
    margin: 0 auto !important;
    max-height: calc(100vh - 10px) !important; /* Usar casi toda la pantalla */
    padding: 0.5rem !important; /* Menos padding */
    max-width: calc(100vw - 20px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    position: relative !important;
    border-radius: 6px !important;
  }
}

/* Add a small padding to the modal container so modal doesn't touch viewport edges */
.modal {
  padding-top: 8px;
  padding-bottom: 8px;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 0.8rem; /* menos espaciado */
  color: #8e44ad;
  font-size: 1.4rem; /* título más pequeño */
  text-align: center;
}

.modal-content .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(142, 68, 173, 0.1);
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #8e44ad;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-weight: bold;
}

.modal-content .close-btn:hover {
  background: rgba(142, 68, 173, 0.2);
  color: #6c3483;
}

/* Categorías para navegar por tipos rápidamente */
.categories {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

/*
 * Tarjetas de categorías en la página de inicio. Se diseñan como tarjetas con sombras suaves
 * y bordes redondeados para un aspecto más profesional. Cada tarjeta ocupa aproximadamente
 * un tercio del ancho disponible, pero se adapta en pantallas pequeñas.
 */
.category-item {
  text-align: center;
  flex: 1 1 30%;
  max-width: 240px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ícono circular dentro de la tarjeta. Se centra mediante flexbox. */
.category-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 2.2rem;
  color: #fff;
  line-height: 0;
}

.category-perdida .category-icon {
  background: #d40000;
}
.category-encontrada .category-icon {
  background: #007f00;
}
.category-adopcion .category-icon {
  background: #004080;
}

/* Títulos y descripciones dentro de cada tarjeta */
.category-item h3 {
  margin: 0.4rem 0 0.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}
.category-item p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

/* Título que precede a la sección de categorías */
.categories-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  color: #333;
}

/* Barra de búsqueda en la navegación */
.search-container {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.search-container input[type="text"] {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: none;
  border-radius: 20px;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-container .fa-search {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 1rem;
}

/* ------------------------------------------------------------------ */
/*  Diseño avanzado del chat estilo WhatsApp                           */
/* Estos estilos se aplican únicamente en chat.html, donde existe      */
/* el contenedor .chat-container. Separados al final para no          */
/* interferir con otras páginas.                                      */
/* ------------------------------------------------------------------ */

.chat-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 480px;
  /* Anular bordes y sombras predeterminados para integrarse con la página */
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

/* Columna lateral con la lista de conversaciones */
.chat-container .chat-sidebar {
  width: 28%;
  max-width: 260px;
  min-width: 200px;
  border-right: 1px solid #e0e0e0;
  background: #f9f4fc;
  overflow-y: auto;
  padding-top: 0.5rem;
}

/* Elementos de la lista de chats */
.chat-container .chat-list-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  color: #663399;
  font-weight: 500;
  transition: background 0.15s ease;
}

.chat-container .chat-list-item:hover {
  background: #f0e6f8;
}

.chat-container .chat-list-item.active {
  background: #e4d4f4;
  font-weight: 700;
}

/* Subtítulo en cada entrada de la lista de chats (muestra el título del caso) */
.chat-container .chat-list-subtitle {
  display: block;
  font-size: 0.75rem;
  color: #777;
  margin-top: 0.2rem;
  font-weight: normal;
}

/* Panel principal donde se muestran los mensajes */
.chat-container .chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

/* Lista de mensajes, se expande para ocupar el espacio */
.chat-container .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  /* Anular bordes y esquinas de definiciones anteriores */
  border: none;
  border-radius: 0;
}

/* Burbuja de mensaje por defecto */
.chat-container .chat-message {
  display: inline-block;
  max-width: 70%;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  background: #e9dff5;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
  align-self: flex-start;
}

/* Burbuja de mensaje enviado por el usuario actual */
.chat-container .chat-message.own {
  align-self: flex-end;
  background: #d8cce9;
}

.chat-container .chat-message .timestamp {
  display: inline-block;
  font-size: 0.7rem;
  color: #777;
  margin-left: 0.5rem;
}

/* Formulario de envío de mensajes */
.chat-container .chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #ddd;
  background: #f9f4fc;
  /* Anular estilos heredados de .chat-form en otras páginas */
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
}

/* Área de texto para componer mensaje */
.chat-container .chat-form textarea {
  flex: 1;
  resize: none;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 20px;
  line-height: 1.4;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}

.chat-container .chat-form textarea:focus {
  outline: none;
  border-color: #8e44ad;
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}

/* Botón de envío */
.chat-container .chat-form button {
  padding: 0.6rem 1rem;
  border-radius: 20px;
  background: #8e44ad;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s ease;
}

.chat-container .chat-form button:hover {
  background: #6c3483;
}


/* Quitar subrayado y "lineas" debajo del icono en tarjetas */
a.category-item,
a.category-item:link,
a.category-item:visited,
a.category-item * {
  text-decoration: none !important;
}

/* Sidebar chats + layout mejorado */
.chat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
  height: calc(100vh - 160px);
}

.chat-sidebar {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-sidebar header {
  padding: 0.9rem 1rem;
  font-weight: 700;
  background: #f6f0fb;
  color: #7b2cbf;
  border-bottom: 1px solid #ece2f8;
}

.chat-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  overflow: auto;
  flex: 1;
}

.chat-list li {
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
}

.chat-list li:hover,
.chat-list li.active {
  background: #f3f3f3;
}

.new-chat {
  padding: 0.7rem;
  border-top: 1px solid #eee;
}

.new-chat input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.chat-panel {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}

.messages {
  padding: 1rem;
  overflow: auto;
  flex: 1;
  background: #fafafa;
}

.message.me { text-align: right; }
.message .bubble {
  display: inline-block;
  margin: 0.25rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
}
.message.me .bubble {
  background: #e9d5ff;
  border-color: #e3c8ff;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid #eee;
  background: #fff;
}
.chat-form input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.chat-form button {
  padding: 0.6rem 1rem;
  background: #7b2cbf;
  border: none;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

/* Mejoras generales para móviles */
@media (max-width: 768px) {
  /* Asegurar que el body no tenga scroll horizontal */
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  
  /* Prevenir scroll horizontal en todos los elementos */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Mejorar botones para touch */
  button, .btn, .cta-btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 16px !important;
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  /* Inputs más grandes para móvil */
  input, select, textarea {
    font-size: 16px !important; /* Evita zoom en iOS */
    min-height: 44px;
    padding: 12px;
    border-radius: 8px;
  }
  
  /* Headers de página más compactos */
  .page-header {
    padding: 1.5rem 1rem;
  }
  
  .page-header h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }
  
  /* Tarjetas de categorías mejor espaciadas */
  .categories {
    margin: 1rem 0;
    padding: 0 1rem;
  }
  
  .category-item {
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Chat layout responsivo */
  .chat-layout {
    grid-template-columns: 1fr;
    height: auto;
    gap: 0;
  }
  
  .chat-sidebar {
    order: 2;
    max-height: 200px;
  }
  
  .chat-panel {
    order: 1;
    min-height: 400px;
  }
  
  /* Mejorar filtros en móvil */
  #filters {
    position: sticky;
    top: 70px;
    z-index: 100;
  }
  
  /* Cards de mascotas mejor espaciadas */
  .pet-card {
    margin-bottom: 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .pet-card img {
    width: 100%;
    height: 200px;
    max-height: 200px;
  }
  
  .pet-card h3 {
    font-size: 1.1rem;
  }
  
  .pet-card p {
    margin: 0.5rem 0;
  }
  
  .pet-card a {
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Footer más compacto */
  footer {
    padding: 0.5rem 0.5rem;
    margin-top: 0.5rem;
  }
  
  /* Prevenir zoom accidental en inputs */
  input, select, textarea {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Mejorar usabilidad de enlaces */
  a {
    -webkit-tap-highlight-color: rgba(142, 68, 173, 0.3);
  }
  
  /* Asegurar que el contenido no se salga de la pantalla */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Mejorar scroll suave */
  html {
    scroll-behavior: smooth;
  }
  
  /* Modal específico para móviles - ULTRA COMPACTO */
  .modal-content {
    margin: 20px auto !important; /* Más margen superior para bajar el formulario */
    width: calc(100vw - 20px) !important; /* Volver al ancho original */
    max-width: calc(100vw - 20px) !important; /* Volver al ancho original */
    max-height: calc(100vh - 80px) !important; /* Compensar el espacio extra arriba */
    padding: 0.5rem !important; /* Padding mínimo */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-radius: 6px !important;
    border: none !important; /* Eliminar cualquier borde */
    outline: none !important; /* Eliminar outline también */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; /* Solo sombra sutil */
    transform: scale(0.95) !important; /* Reducir todo proporcionalmente 5% */
    transform-origin: center !important; /* Escalar desde el centro */
  }
  
  /* Optimizaciones específicas del formulario para mobile */
  .modal-content .modern-form {
    gap: 0.25rem !important; /* Gap super mínimo entre elementos */
  }
  
  /* Form rows sin espacios extra */
  .modal-content .form-row {
    margin-bottom: 0.15rem !important;
    gap: 0.3rem !important;
  }
  
  /* Form groups ultra compactos */
  .modal-content .form-group {
    margin-bottom: 0.2rem !important;
  }
  
  /* Labels más pequeños y sin espacios extra */
  .modal-content .form-group label {
    font-size: 0.7rem !important;
    margin-bottom: 0.1rem !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #666 !important;
  }
  
  /* Inputs y selects más compactos */
  .modal-content .modern-input {
    height: 36px !important;
    padding: 0.4rem !important;
    font-size: 14px !important;
    margin-bottom: 0.05rem !important;
    border-radius: 4px !important;
  }
  
  /* Textarea específico más pequeño */
  .modal-content textarea.modern-input {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    resize: none !important;
    padding: 0.4rem !important;
  }
  
  /* Container de dirección más compacto */
  .modal-content .direccion-container {
    display: flex !important;
    gap: 0.3rem !important;
    align-items: center !important;
  }
  
  /* Input de dirección en el container */
  .modal-content .direccion-container input {
    flex: 1 !important;
    margin-bottom: 0 !important;
  }
  
  /* Botón de ubicación más pequeño */
  .modal-content .btn-ubicacion {
    height: 36px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }
  
  /* Botón de foto más compacto y alineado */
  .modal-content .photo-upload-btn {
    height: 36px !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.1rem !important;
  }
  
  /* Container de upload alineado */
  .modal-content .photo-upload-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    align-self: flex-start !important; /* Alinear el container desde arriba */
    margin-top: -11px !important; /* Subir 1px más (de -10px a -11px) */
  }
  
  /* Contenedor de header del modal más compacto */
  .modal-content .modal-header {
    padding: 0.5rem 0.5rem !important;
    margin-bottom: 0.3rem !important;
    background: #ffffff !important; /* Fondo blanco sólido */
    border-radius: 6px 6px 0 0 !important; /* Redondear solo arriba */
    position: relative !important;
    min-height: 35px !important; /* Altura mínima para que se vea bien */
  }
  
  .modal-content .modal-header h2 {
    font-size: 1rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    padding-right: 35px !important; /* Espacio para el botón X */
  }
  
  /* Botones de acción del formulario optimizados */
  .modal-content .form-actions {
    display: flex !important;
    gap: 0.4rem !important;
    margin-top: 0.5rem !important;
    padding-top: 0.3rem !important;
    border-top: 1px solid #eee !important;
  }
  
  .modal-content .form-actions button {
    height: 42px !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    flex: 1 !important;
  }
  
  /* Botón de submit principal */
  .modal-content .form-actions .btn-primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F5A623 100%) !important;
    border: none !important;
    color: white !important;
  }
  
  /* Botón cancelar */
  .modal-content .form-actions .btn-secondary {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
  }
  
  /* Header del modal más compacto */
  .modal-header {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .modal-header h2 {
    font-size: 1.3rem !important;
    margin: 0 !important;
  }
  
  /* Formulario SÚPER COMPACTO */
  .modal-content form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important; /* Gap ultra mínimo */
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }
  
  /* Form rows compactas */
  .form-row {
    margin-bottom: 0.1rem !important;
    display: flex !important;
    gap: 0.4rem !important;
    width: 100% !important;
    align-items: flex-start !important; /* Volver a flex-start para control fino */
  }
  
  /* Asegurar que los form-groups en las rows ocupen el mismo espacio */
  .form-row .form-group {
    flex: 1 !important;
    margin-bottom: 0.1rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Campos de formulario ULTRA MINI */
  .modal-content input,
  .modal-content select,
  .modal-content textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.3rem !important; /* Padding súper mínimo */
    margin-bottom: 0.1rem !important; /* Casi sin margen */
    font-size: 14px !important; /* Más pequeño */
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    height: 32px !important; /* Más pequeño aún */
  }
  
  /* Textarea MINI */
  .modal-content textarea {
    height: 50px !important; /* Aún más pequeño */
    min-height: 50px !important;
    max-height: 50px !important;
    resize: none !important;
  }
  
  /* Labels MICRO */
  .modal-content label {
    font-size: 0.75rem !important;
    margin-bottom: 0.05rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }
  
  /* Form groups sin espacio */
  .form-group {
    margin-bottom: 0.3rem !important;
  }
  
  /* Botón de submit MICRO */
  .modal-content button[type="submit"],
  .modal-content .cta-btn {
    margin-top: 0.3rem !important;
    padding: 0.5rem !important;
    font-size: 14px !important;
    height: 36px !important; /* Muy pequeño */
    border-radius: 4px !important;
    background: #25D366 !important;
    color: white !important;
    border: none !important;
    font-weight: bold !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  
  /* Photo preview grid más compacto */
  .modal-content .photo-preview-grid {
    display: flex !important;
    gap: 0.3rem !important;
    margin-top: 0.2rem !important;
  }
  
  /* Autocomplete list optimizado para mobile */
  .modal-content .autocomplete-items {
    max-height: 120px !important;
    font-size: 0.75rem !important;
  }
  
  /* Botón de cerrar modal mejorado para móviles */
  .modal-content .close-btn {
    position: fixed !important;
    top: calc(40px + -35px - 15px) !important;
    right: calc(2.5% + 20px - 15px) !important;
    background: rgba(255, 107, 53, 0.95) !important;
    border: 2px solid white !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    color: white !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  }
  
  .modal-content .close-btn:hover {
    background: rgba(255, 107, 53, 0.2) !important;
    transform: scale(1.1) !important;
  }
  
  /* Campos de formulario más compactos */
  .modal-content input,
  .modal-content select,
  .modal-content textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 16px !important; /* Evita zoom en iOS */
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
  }
  
  /* Botón de submit siempre visible */
  .modal-content button[type="submit"],
  .modal-content .cta-btn {
    margin-top: 1rem !important;
    padding: 1rem !important;
    font-size: 16px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    background: #25D366 !important;
    color: white !important;
    border: none !important;
    font-weight: bold !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Mejor espaciado para elementos de formulario */
  form label {
    margin-bottom: 1rem;
    display: block;
    position: relative; /* Para posicionar autocompletado */
  }
  
  /* Hero section más compacto */
  #hero {
    height: 40vh;
    min-height: 250px;
  }
  
  .hero-overlay {
    padding: 1rem;
  }
  
  .hero-overlay h1 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  
  .hero-overlay p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* CSS del mapa se maneja en la sección principal - evitar duplicados */
  
  /* Estilos específicos para autocompletado en móviles */
  .autocomplete-items {
    z-index: 200000 !important;
    max-height: 150px;
    font-size: 16px; /* Evita zoom en iOS */
    border-radius: 8px;
    margin-top: 2px;
  }
  
  .autocomplete-item {
    padding: 12px 16px;
    font-size: 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Label debe tener posición relativa para autocompletado */
  label {
    position: relative !important;
  }
}

/* Estilos globales para popups de Google Maps */
.gm-style-iw-c,
.gm-style-iw-d,
.gm-style-iw {
  max-width: 300px !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 10000 !important;
}

.gm-style-iw-c {
  padding: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Responsive para InfoWindow de Google Maps en mobile */
@media (max-width: 768px) {
  .gm-style-iw-c,
  .gm-style-iw-d,
  .gm-style-iw {
    max-width: 350px !important; /* Más ancho en mobile */
    max-height: 80vh !important; /* Limitar altura a viewport */
    overflow-y: auto !important; /* Scroll si es necesario */
  }
  
  .gm-style-iw-c {
    padding: 16px !important; /* Más padding en mobile */
  }
}

/* Botón de WhatsApp en popups */
.gm-style-iw a[href*="wa.me"],
.gm-style-iw a[href*="whatsapp"] {
  background: #25D366 !important;
  color: white !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  display: inline-block !important;
  margin-top: 8px !important;
}

/* ==========================================
   NUEVOS ESTILOS PARA LA RENOVACIÓN
   ========================================== */

/* Contador de estadísticas en inicio */
.stats-counter {
  text-align: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 1rem auto;
  max-width: 600px;
  font-weight: 600;
  color: #555;
}

.stats-counter span {
  display: inline-block;
  margin: 0 0.5rem;
}

/* Sección de publicar */
.publish-section {
  text-align: center;
  margin: 1rem 0 0.5rem 0;
}

.publish-btn {
  background: #FF6B35;
  color: white;
  border: none;
  padding: 0.65rem 1.6rem; /* reduce horizontal padding so icon is closer to text */
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.18);
  display: inline-flex; /* align icon and text */
  align-items: center;
  justify-content: center;
  text-decoration: none; /* remove underline when used as <a> */
  line-height: 1; /* ensure consistent vertical metrics */
}

.publish-btn:hover {
  background: #E55A2B;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 107, 53, 0.22);
}

.publish-btn i {
  margin-right: 0.45rem;
  font-size: 1.15rem; /* slightly larger plus but not oversized */
  line-height: 1; /* normal line height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(7px); /* moved 7px down as requested */
}

/* Make icon a centered square so the + is perfectly aligned with the text */
/* Use a compact icon without a colored square so it matches the homepage button */
.publish-btn i, .publish-btn .fa-plus {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem; /* compact, consistent with CTA */
  margin-right: 0.55rem;
}

/* Reset any optical lift; let natural line-height handle alignment */
.publish-btn span {
  transform: none;
}

/* If publish button is an anchor inside empty state, remove underline and center icon/text */
.empty-state .publish-btn,
.publish-btn.publish-link {
  text-decoration: none !important;
  color: #fff !important;
}

/* Forzar que el botón de la sección principal tenga exactamente la misma apariencia
   que el botón dentro de .empty-state (misma anchura visual, padding y sombra) */
.publish-section .publish-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Aumentamos significativamente el padding vertical para que la caja sea mucho más alta */
  padding: 1.4rem 1.8rem; /* vertical increased significantly: 0.65rem -> 1.4rem */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.25);
  background: #FF6B35;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem; /* slightly larger text */
  line-height: 1.2; /* better line height for taller button */
}

/* Icon alignment identical to empty-state version */
.publish-section .publish-btn i {
  /* Icono perfectamente centrado para caja mucho más alta */
  transform: translateY(0px); /* sin desplazamiento vertical */
  margin-right: 0.6rem;
  font-size: 1.15rem; /* icono ligeramente más grande */
}

/* REGLAS FORZADAS: aplicar !important para garantizar match exacto con botón de publicaciones */
.publish-section .publish-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 1.6rem !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.18) !important;
  background: #FF6B35 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: none !important;
}

.publish-section .publish-btn:hover {
  background: #E55A2B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(255, 107, 53, 0.22) !important;
}

.publish-section .publish-btn i {
  transform: translateY(7px) !important;
  margin-right: 0.55rem !important;
  font-size: 1.05rem !important;
  color: #fff !important;
}

/* También asegurar que el enlace no muestre subrayado ni estilo por defecto en mobile */
.publish-section .publish-btn[role="button"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Filtros */
.filters-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 1rem 0;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  align-items: end;
}

.filters-row label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: #555;
}

.filters-row select,
.filters-row input {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.filters-row select:focus,
.filters-row input:focus {
  outline: none;
  border-color: #8e44ad;
}

/* Contenedor del mapa */
.map-container {
  width: 100%; /* Asegurar que ocupe todo el ancho disponible */
  margin: 0.25rem 0 1rem 0; /* Reducido margin-top para ≈16-20px desde Filtrar */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  box-sizing: border-box; /* Asegurar cálculo correcto de dimensiones */
}

#map {
  background-color: transparent !important;
}

#map > div:first-child {
  background-color: transparent !important;
}

/* Asegurar que el canvas de Google Maps no tenga transform que cause corrimiento */
#map canvas {
  transform: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================
   PÁGINA DE PUBLICACIONES
   ========================================== */

.publicaciones-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}

.publicaciones-page h1 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
}

/* Mensaje de login requerido */
.login-required {
  text-align: center;
  padding: 3rem 1rem;
}

.login-card {
  background: white;
  padding: 3rem 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  max-width: 400px;
  margin: 0 auto;
}

.login-card i {
  font-size: 4rem;
  color: #8e44ad;
  margin-bottom: 1rem;
}

.login-card h2 {
  color: #333;
  margin-bottom: 1rem;
}

.login-card p {
  color: #666;
  margin-bottom: 2rem;
}

.login-btn {
  background: #8e44ad;
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.login-btn:hover {
  background: #6c3483;
}

/* Pestañas */
.tabs-container {
  display: flex;
  background: white;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 0;
}

.tab-btn {
  flex: 1;
  padding: 1rem 2rem;
  background: #f8f9fa;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-btn.active {
  background: white;
  color: #8e44ad;
  border-bottom-color: #8e44ad;
}

.tab-btn:hover:not(.active) {
  background: #e9ecef;
  color: #555;
}

/* Contenido de pestañas */
.tab-content {
  display: none;
  background: white;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  min-height: 400px;
  padding: 2rem;
}

.tab-content.active {
  display: block;
}

/* Grid de publicaciones */
.publicaciones-grid {
  display: grid;
  gap: 24px;
  /* Mobile: una sola columna limitada y centrada */
  grid-template-columns: min(680px, 100%);
  justify-content: center;
  margin-inline: auto;
}

/* Desktop: múltiples columnas, igualmente centradas */
@media (min-width: 960px) {
  .publicaciones-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    justify-content: center;
  }
}

/* Tarjeta de publicación */
.publicacion-card {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.publicacion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
}

.tipo-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
}

.favorite-btn,
.delete-pub-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.favorite-btn {
  background: #f8f9fa;
  color: #ccc;
}

.favorite-btn.active {
  background: #e74c3c;
  color: white;
}

.favorite-btn:hover {
  background: #e74c3c;
  color: white;
}

.delete-pub-btn {
  background: #f8f9fa;
  color: #666;
}

.delete-pub-btn:hover {
  background: #e74c3c;
  color: white;
}

/* Botón de eliminar favorito */
.delete-fav-btn {
  background: #f8f9fa;
  color: #e74c3c;
  border: 1px solid #e74c3c;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.delete-fav-btn:hover {
  background: #e74c3c;
  color: white;
  transform: scale(1.05);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Estilos para imágenes clickeables */
.card-image.clickable-image {
  transition: all 0.3s ease;
  position: relative;
}

.card-image.clickable-image:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

.card-image.clickable-image:hover::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0.9;
}

/* Sistema de múltiples fotos */
.photo-upload-container {
  margin-top: 0px;
}

.photo-upload-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 18px !important; /* Volver a valores originales para mobile */
  background: #FF6B35 !important;
  border: 3px solid #FF6B35 !important;
  border-radius: 15px !important; /* Volver a valor original para mobile */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: 100% !important; /* Volver a 100% para mobile */
  font-size: 1rem !important; /* Volver a tamaño original para mobile */
  color: white !important;
  font-weight: 600 !important;
  font-family: var(--font-family) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Volver a sombra original */
  text-align: center !important;
}

/* Estilos específicos para desktop */
@media (min-width: 769px) {
  .photo-upload-btn {
    padding: 8px 12px !important; /* Reducido para desktop */
    border-radius: 8px !important; /* Más pequeño para desktop */
    width: auto !important; /* Auto para desktop */
    font-size: 0.85rem !important; /* Más pequeño para desktop */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; /* Sombra sutil para desktop */
    white-space: nowrap !important;
    margin-top: 1px !important; /* Ajuste de posición solo para desktop */
  }
}

.photo-upload-btn:hover {
  background: #F5A623 !important;
  border-color: #F5A623 !important;
  color: white !important;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.2), 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.photo-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--light-gray);
  border: 2px solid var(--border-color);
}

.photo-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-preview-item .remove-photo {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(231, 76, 60, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.photo-preview-item .remove-photo:hover {
  background: #e74c3c;
  transform: scale(1.1);
}

.photo-help-text {
  display: block;
  margin-top: 8px;
  color: var(--light-text);
  font-size: 12px;
}

/* Carrusel en las cards */
.card-image-carousel {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.card-image-carousel .carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-image-carousel .carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.card-image-carousel .carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.card-image-carousel .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.card-image-carousel .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.card-image-carousel .carousel-nav:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.card-image-carousel .carousel-nav.prev {
  left: 8px;
}

.card-image-carousel .carousel-nav.next {
  right: 8px;
}

.card-image-carousel .carousel-indicators {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.card-image-carousel .carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-image-carousel .carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  margin: 0 0 1rem 0;
  color: #333;
  font-size: 1.3rem;
}

.card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.card-details span {
  background: #f8f9fa;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  color: #666;
}

.card-details i {
  margin-right: 0.25rem;
  color: #8e44ad;
}

.card-description {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.card-location,
.card-date {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.card-location i,
.card-date i {
  margin-right: 0.5rem;
  color: #8e44ad;
  width: 16px;
}

/* Botón Ver ubicación */
.ver-ubicacion-btn {
  background: linear-gradient(135deg, #FF6B35 0%, #F5A623 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
}

.ver-ubicacion-btn:hover {
  background: linear-gradient(135deg, #FF5722 0%, #FF8A65 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.ver-ubicacion-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

.card-actions-bottom {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

.whatsapp-btn {
  background: #25D366;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.whatsapp-btn:hover {
  background: #1da851;
}

/* Estados vacíos */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #666;
}

.empty-state i {
  font-size: 4rem;
  color: #ddd;
  margin-bottom: 1rem;
}

.empty-state h3 {
  color: #555;
  margin-bottom: 1rem;
}

.empty-state p {
  margin-bottom: 2rem;
  color: #888;
}

/* Modal de eliminación */
.modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.cancel-btn {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cancel-btn:hover {
  background: #e9ecef;
}

.delete-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.delete-btn:hover {
  background: #c0392b;
}

/* Ajustar el botón de inicio para que coincida con publicaciones */
.publish-section .publish-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.4rem 1.8rem !important; /* vertical padding significantly increased */
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(142, 68, 173, 0.25) !important;
  background: #8e44ad !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}

.publish-section .publish-btn i {
  transform: translateY(0px) !important; /* icono perfectamente centrado */
  margin-right: 0.6rem !important;
  font-size: 1.2rem !important;
}

/* Ocultar opciones de "encontrada" en filtros y formularios */
#filter-tipo option[value="encontrada"],
#tipo option[value="encontrada"] {
  display: none !important;
}

/* Ocultar contador de encontrados en estadísticas */
#encontrados-count {
  display: none !important;
}

/* === ESTILOS PARA EL FOOTER === */

/* Footer base */
footer {
  max-width: 1000px; /* Mismo max-width que main para consistencia */
  margin: 4px auto 0 auto; /* Centrado como main */
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 8px 16px;
  text-align: center;
  font-size: 11px;
  color: #6c757d;
  margin-bottom: 0;
}

footer p {
  margin: 0;
  line-height: 1.3;
}

/* Separador visual entre mapa y footer */
.map-footer-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e9ecef 20%, #e9ecef 80%, transparent 100%);
  margin: 12px 0 8px 0; /* Espacio moderado entre mapa y footer */
}

/* Icono de huella en el footer */
.footer-icon {
  display: inline-block;
  margin-right: 6px;
  color: #8e44ad;
  font-size: 12px;
}

/* === ESTILOS RESPONSIVOS PARA MOBILE === */

@media (max-width: 768px) {
  /* Reducir espacio entre mapa y footer */
  main {
    margin-bottom: 0 !important;
  }
  
  /* Compactar footer en mobile */
  footer {
    padding: 6px 12px;
    font-size: 10px;
    margin-top: 2px;
  }
  
  .footer-icon {
    font-size: 11px;
    margin-right: 4px;
  }
  
  /* Separador más sutil en mobile */
  .map-footer-separator {
    margin: 8px 0 6px 0; /* Espacio moderado en mobile */
  }
}

/* ==========================================
   NUEVO SISTEMA DE DISEÑO MODERNO
   ========================================== */

/* Utilities */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.highlight {
  color: var(--primary-orange);
  font-weight: var(--font-weight-bold);
}

.highlight-orange {
  color: var(--primary-orange);
}

/* Typography */
.section-title {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--secondary-text);
  margin-bottom: 48px;
}

/* Modern Buttons */
.modern-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.modern-btn.primary {
  background: var(--primary-orange);
  color: var(--white);
}

.modern-btn.primary:hover {
  background: var(--secondary-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.modern-btn.secondary {
  background: transparent;
  color: var(--primary-text);
  border: 2px solid var(--border-color);
}

.modern-btn.secondary:hover {
  border-color: var(--primary-orange);
  color: var(--primary-orange);
  transform: translateY(-2px);
}

/* Hero Section */
.modern-hero {
  padding: 30px 0 20px;
  background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.modern-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--light-orange);
  transform: skewX(-15deg);
  transform-origin: top;
  z-index: 1;
}

.hero-container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  position: relative;
  z-index: 2;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 8rem; /* Restaurar padding original de desktop */
  position: relative;
  z-index: 4;
}

.hero-text h1 {
  font-size: 2.4rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 12px;
  line-height: 1.1;
}

/* Título en línea por defecto (desktop) */
.hero-text h1 .line-1,
.hero-text h1 .line-2,
.hero-text h1 .line-3 {
  display: inline;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--secondary-text);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Mostrar solo texto desktop por defecto */
.mobile-short {
  display: none;
}

.desktop-full {
  display: inline;
}

.hero-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--primary-orange);
  color: var(--white);
}

.stat-item.accent {
  background: var(--primary-orange);
  color: var(--white);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  opacity: 0.8;
  line-height: 1.1;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Imágenes decorativas grandes junto al subtítulo */
.hero-decoration {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero-decoration.left {
  left: 5%;
  top: 70%;
  transform: translateY(-50%) rotate(-5deg);
  animation: float-left 6s ease-in-out infinite;
}

.hero-decoration.right {
  right: 17%;
  top: 60%;
  transform: translateY(-50%) rotate(5deg);
  animation: float-right 6s ease-in-out infinite 3s;
}

.hero-decoration img {
  width: 780px;
  height: 780px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
  object-position: center center; /* Posición por defecto */
}

/* Posicionamiento específico para cada imagen del hero */
.hero-decoration img[src*="hero-dog-cool"] {
  object-position: 85% 0% !important; /* Perro MUY cerca del texto central y en la parte superior */
}

.hero-decoration img[src*="hero-cat-cool"] {
  object-position: 15% center !important; /* Gato MUY cerca del texto central */
  width: 390px !important; /* 50% del tamaño original (780px / 2) */
  height: 390px !important; /* 50% del tamaño original (780px / 2) */
}

/* Posición específica para el gato - muy cerca del texto del lado derecho */
.hero-decoration.right img[src*="hero-cat-cool"] {
  right: 35% !important; /* Muy cerca del texto, similar al perro del lado izquierdo */
}

/* Animaciones flotantes */
@keyframes float-left {
  0%, 100% { transform: translateY(-50%) rotate(-5deg) translateY(0px); }
  50% { transform: translateY(-50%) rotate(-5deg) translateY(-10px); }
}

@keyframes float-right {
  0%, 100% { transform: translateY(-50%) rotate(5deg) translateY(0px); }
  50% { transform: translateY(-50%) rotate(5deg) translateY(-10px); }
}

/* Decoraciones específicas para page-header mis-publicaciones - ALTA PRIORIDAD */
.page-header.mis-publicaciones .hero-decoration {
  position: absolute !important;
  z-index: 5 !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.page-header.mis-publicaciones .hero-decoration.left {
  left: 5% !important;
  top: 30% !important;
  transform: translateY(-50%) rotate(-5deg) !important;
  animation: float-left 6s ease-in-out infinite !important;
}

.page-header.mis-publicaciones .hero-decoration.right {
  right: 5% !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(5deg) !important;
  animation: float-right 6s ease-in-out infinite 3s !important;
}

.page-header.mis-publicaciones .hero-decoration img {
  width: 300px !important;
  height: 300px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) !important;
}

/* Posicionamiento específico para salchichapc.webp */
.page-header.mis-publicaciones .hero-decoration img[src*="salchichapc"] {
  object-position: center center !important;
}

/* Responsividad para las decoraciones grandes */
@media (max-width: 1400px) {
  .hero-decoration img {
    width: 650px;
    height: 650px;
  }
  
  .hero-decoration img[src*="hero-dog-cool"] {
    object-position: 85% 0% !important;
  }

  .hero-decoration img[src*="hero-cat-cool"] {
    object-position: 15% center !important;
  }
}

@media (max-width: 1200px) {
  .hero-decoration img {
    width: 520px;
    height: 520px;
  }
  
  .hero-decoration img[src*="hero-dog-cool"] {
    object-position: 85% 0% !important;
  }

  .hero-decoration img[src*="hero-cat-cool"] {
    object-position: 15% center !important;
  }
  
  .hero-decoration.left {
    left: 3%;
  }
  
  .hero-decoration.right {
    right: 3%;
  }
}

@media (max-width: 900px) {
  .hero-decoration {
    opacity: 0.8;
  }
  
  .hero-decoration img {
    width: 390px;
    height: 390px;
  }
  
  .hero-decoration img[src*="hero-dog-cool"] {
    object-position: 85% 0% !important;
  }

  .hero-decoration img[src*="hero-cat-cool"] {
    object-position: 15% center !important;
  }
  
  .hero-decoration.left {
    left: 2%;
  }
  
  .hero-decoration.right {
    right: 2%;
  }
}

@media (max-width: 768px) {
  .hero-decoration img {
    width: 150px !important;
    height: 150px !important;
  }
  
  .hero-decoration img[src*="hero-dog-cool"] {
    object-position: 85% 0% !important;
  }

  .hero-decoration img[src*="hero-cat-cool"] {
    object-position: 15% center !important;
  }
  
  .hero-decoration.left {
    left: -5% !important;
    top: 60% !important;
  }
  
  .hero-decoration.right {
    right: -5% !important;
    top: 50% !important;
  }
}

/* OCULTAR COMPLETAMENTE imágenes de animales en móvil */
@media (max-width: 768px) {
  /* Ocultar todas las imágenes decorativas de animales */
  .hero-decoration,
  img[src*="hero-dog-cool"],
  img[src*="hero-cat-cool"],
  img[src*="hero-pets-modern"],
  img[src*="salchichapc"],
  img[src*="gato"],
  img[alt*="Perro"],
  img[alt*="Gato"],
  img[alt*="Mascota"],
  img[alt*="mascota"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Mantener solo logos y elementos esenciales */
  .logo-icon,
  img[src*="logo"],
  img[alt*="logo"],
  img[alt*="Logo"] {
    display: block !important;
    visibility: visible !important;
  }
}

/* Para pantallas muy pequeñas (móviles), hacer las imágenes aún más pequeñas */
@media (max-width: 480px) {
  .hero-decoration {
    opacity: 0.6 !important;
  }
  
  .hero-decoration img {
    width: 100px !important;
    height: 100px !important;
  }
  
  .hero-decoration.left {
    left: -10% !important;
    top: 65% !important;
  }
  
  .hero-decoration.right {
    right: -10% !important;
    top: 55% !important;
  }
  
  /* EXTRA PEQUEÑO: salchichapc en móviles muy pequeños */
  .page-header-image img[src*="salchichapc"],
  img[src*="salchichapc"] {
    transform: translateY(-50%) scale(0.1) !important; /* Aún más pequeño */
    width: 50px !important;
    height: 50px !important;
    right: 5% !important; /* Dentro de pantalla */
    opacity: 0.3 !important;
    left: auto !important;
  }
}

/* Para las imágenes específicas como salchichapc en móviles */
@media (max-width: 768px) {
  .page-header.mis-publicaciones .hero-decoration img[src*="salchichapc"] {
    width: 120px !important;
    height: 120px !important;
    opacity: 0.7 !important;
  }
  
  .page-header.perfil .hero-decoration img[src*="gato"] {
    width: 120px !important;
    height: 120px !important;
    opacity: 0.7 !important;
  }
  
  /* CRÍTICO: Sobreescribir estilos inline de salchichapc en publicaciones.html */
  .page-header-image img[src*="salchichapc"],
  img[src*="salchichapc"] {
    transform: translateY(-50%) scale(0.2) !important; /* MUCHO más pequeño */
    width: 80px !important;
    height: 80px !important;
    right: -30% !important; /* Más hacia afuera para que no moleste */
    opacity: 0.5 !important;
    object-fit: cover !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
}

@media (max-width: 600px) {
  .hero-decoration {
    opacity: 0.6;
  }
  
  .hero-decoration img {
    width: 195px;
    height: 195px;
  }
  
  .hero-decoration img[src*="hero-dog-cool"] {
    object-position: 85% 0% !important;
  }

  .hero-decoration img[src*="hero-cat-cool"] {
    object-position: 15% center !important;
  }
}

@media (max-width: 768px) {
  .page-header.mis-publicaciones .hero-decoration img {
    width: 200px !important;
    height: 200px !important;
  }
}

@media (max-width: 600px) {
  .page-header.mis-publicaciones .hero-decoration {
    opacity: 0.6 !important;
  }
  
  .page-header.mis-publicaciones .hero-decoration img {
    width: 120px !important;
    height: 120px !important;
  }
}

@media (max-width: 480px) {
  .hero-decoration {
    display: none; /* Ocultar en móviles muy pequeños */
  }
}

/* Media queries para el contenido del hero */
@media (max-width: 1200px) {
  .hero-content {
    padding: 0 6rem;
  }
}

@media (max-width: 900px) {
  .hero-content {
    padding: 0 4rem;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 0 3rem;
  }
  
  .hero-text h1 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .hero-content {
    padding: 0 2rem;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding: 0 1rem;
  }
  
  .hero-text h1 {
    font-size: 1.8rem;
  }
}

.hero-image {
  display: none;
}

.hero-pet-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-pet-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* Publish Section */
.publish-section {
  padding: 1.5rem 0;
  background: var(--white);
  text-align: center;
}

.publish-content {
  max-width: 600px;
  margin: 0 auto;
}

.publish-action {
  margin-top: 48px;
}

.main-publish-btn {
  display: inline-flex;
  align-items: center;
  padding: 24px 48px;
  background: var(--primary-orange);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.main-publish-btn:hover {
  background: var(--secondary-orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-content i {
  font-size: 1.5rem;
}

.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  position: relative;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.service-card.featured {
  background: var(--primary-orange);
  color: var(--white);
  border: none;
}

.service-card.featured .service-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.service-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--light-orange);
  color: var(--primary-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}

.service-card h3 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 16px;
}

.service-card p {
  color: var(--secondary-text);
  margin-bottom: 24px;
  line-height: 1.6;
}

.service-card.featured p {
  color: rgba(255, 255, 255, 0.9);
}

.service-price {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-orange);
  margin-bottom: 24px;
}

.service-card.featured .service-price {
  color: var(--white);
}

.service-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-card.featured .service-btn {
  background: var(--white);
  color: var(--primary-orange);
}

.service-btn:hover {
  transform: scale(1.1);
}

/* Trust Section */
.trust-section {
  padding: var(--section-padding);
  background: var(--primary-orange);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.trust-content {
  position: relative;
  z-index: 2;
}

.trust-content h2 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 48px;
  max-width: 600px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-bottom: 48px;
}

.trust-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 32px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.trust-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.trust-item h4 {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 12px;
}

.trust-item p {
  opacity: 0.9;
  line-height: 1.5;
}

.trust-image {
  text-align: center;
  margin-top: 48px;
}

.trust-image img {
  max-width: 400px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Navigation Links Update - Applied to existing nav-links */

/* Modern Page Headers */
.modern-page-header {
  padding: 80px 0 80px;
  background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.modern-page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background: var(--primary-orange);
  transform: skewX(-10deg);
  transform-origin: top;
  z-index: 1;
}

.page-header-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 3;
  text-align: left;
}

.page-header-text h1 {
  font-size: 2.4rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 20px;
  line-height: 1.1;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--secondary-text);
  margin-bottom: 32px;
  line-height: 1.6;
}

.page-header-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header-image {
  position: relative;
  z-index: 1;
}

.page-header-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  transform: scale(2);
  transform-origin: center;
  position: absolute;
  top: 15%;
  right: -10%;
  transform: translateY(-50%) scale(2);
  z-index: 2;
  opacity: 1;
}

/* Estilos específicos para la página de perfil */
.profile-page .page-header-image img {
  right: -5% !important;
  transform: translateY(-50%) scale(1.8) !important;
}

/* Posicionamiento específico para gato perfil.webp */
.page-header-image img[src*="gato perfil"] {
  object-position: center center !important;
  transform: translateY(-50%) scale(1.8) !important;
  right: -5% !important;
}

/* Posicionamiento específico para salchichapc.webp en publicaciones */
.page-header-image img[src*="salchichapc"] {
  object-position: center center !important;
  transform: translateY(-50%) scale(2) !important;
  right: -10% !important;
  top: 5% !important;
}

/* Selector alternativo más específico para publicaciones */
.publicaciones-page .page-header-image img,
.modern-page-header .page-header-image img[src$="salchichapc.webp"] {
  top: 5% !important;
  transform: translateY(-50%) scale(2) !important;
}

/* Modern Cards for Lists */
.modern-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 8px;
}

.card-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--light-orange);
  color: var(--primary-orange);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.card-description {
  color: var(--secondary-text);
  line-height: 1.5;
  margin-bottom: 16px;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-date {
  font-size: 0.875rem;
  color: var(--light-text);
}

.card-contact {
  background: var(--primary-orange);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all 0.3s ease;
}

.card-contact:hover {
  background: var(--secondary-orange);
  transform: translateY(-1px);
}

/* Modern Filters */
.modern-filters {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 40px 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.modern-filters h3 {
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--primary-text);
  margin-bottom: 16px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.filter-select {
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--primary-text);
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-orange);
}

.filter-button {
  background: var(--primary-orange);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-button:hover {
  background: var(--secondary-orange);
  transform: translateY(-1px);
}

/* Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

/* Map Filters Redesigned */
.map-filters {
  padding: 15px 0 10px;
  background: var(--light-gray);
  margin-top: 0;
}

.filters-header {
  text-align: center;
  margin-bottom: 24px;
}

.filters-header h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.filters-header p {
  color: var(--secondary-text);
  font-size: 1rem;
}

.filters-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.filter-group label {
  font-weight: var(--font-weight-semibold);
  color: var(--primary-text);
  font-size: 0.9rem;
  text-align: center;
}

.modern-select {
  padding: 12px 14px;
  border: 2px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);
  color: var(--primary-text);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 35px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.modern-select:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.filter-actions {
  display: flex;
  gap: 12px;
  flex-direction: row;
  align-items: center;
}

.apply-filters-btn {
  background: var(--primary-orange);
  color: var(--white);
  border: none;
  padding: 12px 20px;
  border-radius: 20px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
  font-size: 0.85rem;
  white-space: nowrap;
  height: 46px; /* Misma altura que los selects */
  margin-top: -20px;
}

.apply-filters-btn:hover {
  background: var(--secondary-orange);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(255, 107, 53, 0.4);
}

.clear-filters-btn {
  background: var(--primary-text);
  color: var(--white);
  border: 2px solid var(--primary-text);
  padding: 12px 20px;
  border-radius: 20px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  height: 46px; /* Misma altura que los selects */
  margin-top: -20px;
}

.clear-filters-btn:hover {
  background: var(--white);
  color: var(--primary-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Scroll Indicator */
.scroll-indicator {
  padding: 60px 0;
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--secondary-orange) 50%, #ff8c42 100%);
  text-align: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(255, 111, 97, 0.3);
}

.scroll-content {
  max-width: 400px;
  margin: 0 auto;
}

.scroll-content i.fa-map-location-dot {
  font-size: 3rem;
  color: var(--white);
  margin-bottom: 16px;
  animation: pulse 2s infinite;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.scroll-content h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--white);
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.scroll-content p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.scroll-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
}

.scroll-arrow i {
  font-size: 1.2rem;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* Map Container with Orange Border */
.map-container {
  margin: 40px 0;
  padding: 0;
}

#map {
  border: 3px solid var(--primary-orange) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Modern Login Required */
.modern-login-required {
  padding: 50px 0;
  background: var(--light-gray);
}

.login-card-modern {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  padding: 48px 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.login-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--light-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.login-icon i {
  font-size: 2rem;
  color: var(--primary-orange);
}

.login-card-modern h2 {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 16px;
}

.login-card-modern p {
  color: var(--secondary-text);
  margin-bottom: 32px;
  line-height: 1.6;
}

.login-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signup-text {
  font-size: 0.875rem;
  color: var(--secondary-text);
}

.signup-text a {
  color: var(--primary-orange);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.signup-text a:hover {
  text-decoration: underline;
}

/* Modern Tabs */
.modern-tabs {
  margin-bottom: 20px;
}

.tabs-header {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 32px;
}

.modern-tab-btn {
  background: transparent;
  border: none;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--secondary-text);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
}

.modern-tab-btn.active {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-orange);
}

.modern-tab-btn:hover {
  color: var(--primary-orange);
}

.modern-tab-content {
  display: none;
}

.modern-tab-content.active {
  display: block;
}

/* Hide tab-header completely - we use mobile-page-header for mobile instead */
.tab-header,
.tab-header h3,
.tab-header p {
  display: none !important;
  visibility: hidden !important;
}

/* Modern Posts Grid */
.modern-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* Modern Empty State */
.modern-empty-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-content {
  max-width: 400px;
  margin: 0 auto;
}

.empty-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--light-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.empty-icon i {
  font-size: 2.5rem;
  color: var(--primary-orange);
}

.modern-empty-state h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 16px;
}

.modern-empty-state p {
  color: var(--secondary-text);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Profile Page Styles */
.profile-page {
  padding: 15px 0 80px;
}

.profile-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
}

.profile-header {
  background: var(--light-orange);
  padding: 40px 32px;
  text-align: center;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.profile-avatar i {
  font-size: 2rem;
  color: var(--white);
}

.profile-info h2 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 8px;
}

.profile-info p {
  color: var(--secondary-text);
}

.profile-details {
  padding: 32px;
}

.detail-item {
  margin-bottom: 24px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item label {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--secondary-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-value {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--light-gray);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--primary-text);
}

.detail-value i {
  color: var(--primary-orange);
  width: 20px;
}

.profile-actions {
  padding: 24px 32px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 16px;
  justify-content: center;
}

.profile-actions.centered {
  justify-content: center;
}

.danger-btn {
  background: #dc3545;
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.danger-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.profile-warning {
  padding: 0 32px 32px;
  border-top: 1px solid var(--border-color);
}

.profile-warning p {
  margin: 16px 0 0 0 !important;
  padding: 20px !important;
  background: #fff8f5;
  border-left: 4px solid #dc3545;
  border-radius: 8px;
  color: #555 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Desktop improvements for profile warning */
@media (min-width: 768px) {
  .profile-warning {
    padding: 0 40px 40px;
  }
  
  .profile-warning p {
    padding: 24px !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
  }
}

/* Modern Login Page */
.login-container {
  min-height: 100vh;
  padding-top: 80px;
}

.login-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
}

.login-info {
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--secondary-orange) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.login-info::before {
  display: none;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.login-info-content {
  text-align: center;
  color: var(--white);
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
}

.login-illustration {
  display: none;
}

.login-info h2 {
  font-size: 2.34rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.login-info p {
  font-size: 1.482rem;
  margin-bottom: 32px;
  opacity: 0.9;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.login-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.404rem;
  opacity: 0.9;
  text-align: center;
  padding: 4px 0;
  line-height: 1.3;
}

.feature-item i {
  width: 20px;
  font-size: 1.2rem;
}

.login-form {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-form-content {
  width: 100%;
  max-width: 400px;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-header h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 12px;
}

.form-header p {
  color: var(--secondary-text);
  font-size: 1.125rem;
}

.social-login-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modern-social-btn {
  width: 100%;
  padding: 16px 24px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--primary-text);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.google-btn {
  border-color: #4285f4;
  color: #4285f4;
}

.google-btn:hover {
  background: #4285f4;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.google-btn i {
  font-size: 1.2rem;
}

/* Modern Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Forzar que todo el modal mantenga sus colores originales pero sin bordes */
.modal-content.modern-modal,
#publish-modal .modal-content,
#publish-modal .modern-modal {
  border: none !important;
  outline: none !important;
}

.modern-modal {
  background: #ffffff; /* Fondo blanco completo - sin gradiente naranja */
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  max-width: 510px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
  border: none; /* Sin borde pero con gradiente */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: none; /* Sin borde */
  background: var(--white); /* Fondo blanco */
  color: var(--primary-orange); /* Texto naranja */
  border-radius: 20px 20px 0 0;
}

.modal-header h2 {
  font-size: 1.6rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--primary-orange); /* Texto naranja sobre fondo blanco */
}

.modal-header .close-btn {
  background: var(--primary-orange); /* Botón naranja sobre fondo blanco */
  border: none;
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-weight: bold;
}

.modal-header .close-btn:hover {
  background: var(--secondary-orange); /* Naranja más claro al hover */
  transform: scale(1.1);
}

.modal-body {
  padding: 0; /* Eliminar padding que causa el 'borde' */
  background: var(--white); /* Restaurar variable original */
  border-radius: 0 0 20px 20px;
}

.modern-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px; /* Mover el padding aquí para que esté dentro del área blanca */
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  align-items: stretch;
}

/* Alineación específica para el botón de fotos */
.form-group:has(.photo-upload-container) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.form-group:has(.photo-upload-container) label {
  margin-bottom: 4px;
}

.form-group label {
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  font-size: 1rem;
  margin-bottom: 4px;
}

.modern-input {
  padding: 14px 18px;
  border: 3px solid var(--primary-text);
  border-radius: 15px;
  font-size: 1rem;
  font-family: var(--font-family);
  transition: all 0.3s ease;
  background: var(--white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modern-input:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2), 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.modern-input:hover {
  border-color: var(--secondary-orange);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

select.modern-input {
  cursor: pointer;
}

textarea.modern-input {
  resize: vertical;
  min-height: 100px;
}

.file-input {
  padding: 8px 12px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-color);
}

.btn-secondary {
  padding: 14px 28px;
  border: 3px solid var(--primary-text);
  border-radius: 25px;
  background: var(--white);
  color: var(--primary-text);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  border-color: var(--primary-text);
  background: var(--primary-text);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-primary {
  padding: 14px 28px;
  border: 3px solid var(--primary-orange);
  border-radius: 25px;
  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--secondary-orange) 100%);
  color: var(--white);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-orange) 0%, var(--primary-orange) 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
  border-color: var(--secondary-orange);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .login-container {
    grid-template-columns: 1fr;
    padding-top: 60px;
  }
  
  .login-info {
    padding: 32px 20px;
  }
  
  .login-illustration {
    width: 150px;
    height: 150px;
    margin-bottom: 24px;
  }
  
  .login-info h2 {
    font-size: 1.75rem;
  }
  
  .login-info p {
    font-size: 1rem;
  }
  
  .form-header h1 {
    font-size: 2rem;
  }
  
  .modern-modal {
    margin: 20px auto !important; /* Centrar con margen automático */
    width: 95% !important; /* Ancho normal */
    max-width: 95% !important; /* Ancho normal */
    max-height: calc(100vh - 80px) !important; /* Compensar el espacio extra */
    border: none !important; /* Forzar sin borde en mobile también */
    outline: none !important;
    background: #ffffff !important; /* Fondo blanco también en mobile */
    transform: scale(0.95) !important; /* Reducir todo proporcionalmente 5% */
    transform-origin: center !important; /* Escalar desde el centro */
  }
  
  .modal-header {
    padding: 10px 14px; /* Reducir padding para minimizar el 'borde' naranja */
  }
  
  .modal-body {
    padding: 0; /* Sin padding en mobile tampoco */
    background: var(--white); /* Restaurar variable original */
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    padding: 0 0.5rem; /* Reducir aún más el margen lateral */
  }
  
  .hero-text h1 {
    font-size: 1.8rem; /* Aumentar ligeramente para mejor visibilidad */
    line-height: 1.2; /* Ajustar line-height para mejor espaciado */
    margin-bottom: 12px;
  }
  
  /* Título en 3 líneas específicas para móvil */
  .hero-text h1 .line-1,
  .hero-text h1 .line-2,
  .hero-text h1 .line-3 {
    display: block;
  }
  
  .hero-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 16px;
  }
  
  /* Intercambiar textos en móvil */
  .mobile-short {
    display: inline;
  }
  
  .desktop-full {
    display: none;
  }
  
  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .stat-item {
    width: 80px;
    height: 80px;
    padding: 12px;
  }
  
  .stat-number {
    font-size: 1.4rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
  
  .stat-item {
    min-width: 100px;
    padding: 16px;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .trust-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-cta {
    justify-content: center;
  }
  
  .nav-links {
    display: none;
  }
  
  .page-header-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .page-header-text h1 {
    font-size: 1.8rem;
  }
  
  .page-header-actions {
    justify-content: center;
  }
  
  .modern-filters {
    margin: 20px 0;
    padding: 16px;
  }
  
  .filter-grid {
    grid-template-columns: 1fr;
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .modern-page-header {
    padding: 100px 0 40px;
  }
  
  .modern-page-header::before {
    width: 50%;
    transform: skewX(-5deg);
  }
  
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .filter-actions {
    flex-direction: row;
  }
  
  .apply-filters-btn,
  .clear-filters-btn {
    flex: 1;
  }
}

/* POSICIONAMIENTO FORZADO DE IMÁGENES HERO - MÁXIMA PRIORIDAD */
.hero-section .hero-decoration img[src*="hero-dog-cool"] {
  object-position: 85% 0% !important;
}

.hero-section .hero-decoration img[src*="hero-cat-cool"] {
  object-position: 15% center !important;
}

/* Backup con selectores aún más específicos */
body .hero-section .hero-decoration.left img[src*="hero-dog-cool"] {
  object-position: 85% 0% !important;
}

body .hero-section .hero-decoration.right img[src*="hero-cat-cool"] {
  object-position: 15% center !important;
}

/* Triple backup con ID si existe */
#main .hero-section .hero-decoration img[src*="hero-dog-cool"] {
  object-position: 85% 0% !important;
}

#main .hero-section .hero-decoration img[src*="hero-cat-cool"] {
  object-position: 15% center !important;
}

/* === MEJORAS FINALES PARA MÓVILES === */

/* Evitar scroll horizontal en móviles */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Espaciado adicional para contenido bajo navbar fijo */
  .page-content {
    padding-top: 60px !important;
  }
  
  /* CRÍTICO: Control total de salchichapc en móviles */
  img[src*="salchichapc"],
  .salchicha-mobile-fix {
    transform: translateY(-50%) scale(0.15) !important;
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    right: 10% !important; /* Dentro de pantalla pero a la derecha */
    opacity: 0.4 !important;
    position: absolute !important;
    object-fit: cover !important;
    left: auto !important; /* Resetear left si existe */
  }
}

/* Selector aún más específico con viewport */
@media screen and (max-width: 500px) {
  .page-header-image .salchicha-mobile-fix,
  .page-header-image img[src*="salchichapc"] {
    transform: translateY(-50%) scale(0.08) !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    right: 20px !important; /* Posición fija desde el borde derecho */
    top: 60% !important;
    opacity: 0.3 !important;
    position: absolute !important;
    left: auto !important;
    margin: 0 !important;
  }
  
  /* Mejorar legibilidad de texto en móviles */
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  h3 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  p, .hero-text, .text-content {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  /* Hero section específico para móviles */
  .hero-title, .modern-hero h1 {
    font-size: 1.8rem !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
  
  .hero-subtitle, .modern-hero p {
    font-size: 1.1rem !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
  
  /* Botones más grandes y fáciles de tocar */
  .cta-btn, button[type="submit"], .btn {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
  
  /* Mejorar contraste del menú hamburguesa */
  .nav-toggle .hamburger,
  .nav-toggle .close {
    color: #f39c12 !important; /* Naranja directo */
    font-weight: bold !important;
    font-size: 26px !important; /* Más grande para mejor visibilidad */
  }
  
  /* Asegurar que las cards no se desborden */
  .post-card, .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Hide large profile header on mobile but show minimal content */
  .profile-page-header,
  .modern-page-header {
    display: none !important;
  }
  
  /* Mobile header for publicaciones - hidden by default, only show on mobile */
  .mobile-page-header,
  #mobile-publicaciones-header {
    display: none !important; /* Hidden by default */
  }
  
  /* Show mobile-page-header only on mobile devices */
  @media screen and (max-width: 768px) {
    .mobile-page-header,
    #mobile-publicaciones-header {
      display: block !important;
      background: #faf9f7 !important;
      padding: 25px 15px !important;
      text-align: center !important;
      border-bottom: 1px solid #e0e0e0 !important;
      margin: 0 !important;
      margin-top: 60px !important; /* Space for fixed navbar */
      position: relative !important;
      z-index: 50 !important;
    }
  }
  
  .mobile-page-header h1 {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 0 0 8px 0 !important;
  }
  
  .mobile-page-header p {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
  }
  
  /* FORCE hide mobile-page-header on desktop - CRITICAL RULE */
  @media screen and (min-width: 769px) {
    .mobile-page-header,
    #mobile-publicaciones-header,
    div.mobile-page-header,
    div#mobile-publicaciones-header {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
  }
  
  /* Ensure publicaciones page starts from the top */
  .publicaciones-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Ensure parent containers don't collapse on mobile */
  #publicaciones-content {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 200px !important;
  }
  
  .publicaciones-content .container {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 150px !important;
  }
  
  /* Fix tabs positioning on mobile */
  .modern-tabs {
    padding: 0 2px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 50px !important;
  }
  
  .tabs-header {
    justify-content: space-around !important; /* Distribute buttons evenly */
    gap: 1px !important;
    margin-bottom: 20px !important;
    overflow-x: visible !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    height: auto !important;
    min-height: 40px !important;
  }
  
  .modern-tab-btn {
    padding: 12px 8px !important; /* More padding for better touch target */
    font-size: 0.75rem !important; /* Slightly larger font */
    white-space: nowrap !important;
    flex: 1 !important; /* Equal width for both buttons */
    text-align: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 44px !important; /* Taller for better appearance */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important; /* Stack icon and text vertically */
    
    /* Beautiful box design */
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid #e9ecef !important;
    border-radius: 12px !important; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    margin: 0 4px !important; /* Small gap between buttons */
    position: relative !important;
  }
  
  .modern-tab-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-color: #ff6b35 !important;
  }
  
  .modern-tab-btn.active {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8a65 100%) !important;
    border-color: #ff6b35 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3) !important;
  }
  
  .modern-tab-btn.active:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
  }
  
  .modern-tab-btn i {
    font-size: 0.9rem !important; /* Larger icon */
    margin-right: 0px !important; /* No margin since we're stacking vertically */
    margin-bottom: 4px !important; /* Space between icon and text */
    display: block !important; /* Block display for vertical stacking */
    opacity: 0.8 !important;
  }
  
  .modern-tab-btn.active i {
    opacity: 1 !important; /* Full opacity when active */
  }
  
  /* Ensure text fits in mobile tabs */
  .modern-tab-btn span {
    font-size: 0.7rem !important;
  }
  
  /* Fix scroll and centering issues in publications */
  body {
    overflow-y: auto !important; /* Ensure vertical scrolling works */
  }
  
  .modern-posts-grid {
    grid-template-columns: 1fr !important; /* Single column on mobile */
    gap: 8px !important;
    padding: 0 !important; /* NO PADDING AT ALL */
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .modern-posts-grid .post-card,
  .modern-posts-grid > div,
  .modern-posts-grid .card {
    width: 100vw !important; /* FULL VIEWPORT WIDTH */
    max-width: 100vw !important; /* FULL VIEWPORT WIDTH */
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important; /* NO BORDER RADIUS FOR FULL WIDTH */
  }
  
  /* Ensure cards in publicaciones are MAXIMUM WIDTH - EDGE TO EDGE */
  .publicaciones-page .post-card,
  .publicaciones-page .card,
  .modern-posts-grid .post-card,
  .modern-posts-grid .card {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
  
  /* Remove container constraints on mobile */
  .publicaciones-page .container,
  .publicaciones-content .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .modern-tab-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Mobile card layout - 2 columns to reduce height */
  .post-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
    padding: 12px !important;
    align-items: start !important;
  }
  
  /* Left column: image and status */
  .post-card .pet-image,
  .post-card .status-badge {
    grid-column: 1 !important;
  }
  
  /* Right column: info */
  .post-card .pet-info,
  .post-card .pet-details,
  .post-card .pet-meta {
    grid-column: 2 !important;
  }
  
  /* Image sizing for mobile 2-column layout */
  .post-card .pet-image {
    width: 80px !important;
    height: 80px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
  }
  
  /* Compact info layout */
  .post-card .pet-info {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .post-card .pet-details {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin-top: 5px !important;
  }
  
  .post-card .pet-meta {
    font-size: 0.75rem !important;
    margin-top: 8px !important;
  }
  
  /* Hide redundant titles in mobile cards */
  .post-card h2,
  .post-card h3,
  .post-card .card-title,
  .post-card .pet-title {
    display: none !important;
  }
  
  /* Keep only essential info visible */
  .post-card .pet-name,
  .post-card .pet-breed,
  .post-card .pet-location,
  .post-card .pet-date {
    display: block !important;
  }
  
  /* Fix profile content positioning - add more space at top */
  .profile-page {
    padding-top: 20px !important; /* Add space at the top of the page */
  }
  
  .profile-card {
    margin-top: 20px !important; /* Additional margin for the card */
  }
  
  .profile-header {
    padding-top: 60px !important; /* More space from navbar */
    margin-top: 0 !important;
  }
  
  .profile-avatar {
    margin-bottom: 25px !important; /* More space between avatar and text */
  }
  
  /* Fix delete account text spacing on mobile */
  .profile-actions + p {
    padding: 0 15px !important; /* Add horizontal padding */
    font-size: 0.85rem !important; /* Slightly smaller font */
    line-height: 1.4 !important; /* Better line spacing */
    margin-top: 15px !important;
  }
  
  /* Login page mobile optimization */
  .login-container {
    flex-direction: column !important;
    min-height: calc(100vh - 80px) !important;
    padding: 10px !important; /* Minimal padding for maximum width */
    background: #faf9f7 !important;
    justify-content: center !important;
  }
  
  .login-info {
    display: none !important; /* Hide info section on mobile */
  }
  
  .login-form {
    width: calc(100vw - 20px) !important; /* Almost full viewport width */
    max-width: none !important; /* Remove max-width restriction */
    margin: 0 !important; /* Remove auto centering to use full width */
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    padding: 0 !important;
  }
  
  .login-form-content {
    padding: 35px 25px !important; /* Generous padding but not too much */
  }
  
  .form-header h1 {
    font-size: 28px !important; /* Larger title since we have more space */
    margin-bottom: 12px !important;
    color: #2c3e50 !important;
    text-align: center !important;
  }
  
  .form-header p {
    font-size: 16px !important; /* Larger subtitle */
    color: #666 !important;
    margin-bottom: 35px !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }
  
  .modern-social-btn {
    width: 100% !important;
    padding: 20px 25px !important; /* More generous padding for wider form */
    font-size: 19px !important; /* Larger font for better readability */
    border-radius: 10px !important;
    margin-bottom: 20px !important;
    background: #4285f4 !important;
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    min-height: 60px !important; /* Taller button for better touch target */
  }
  
  .modern-social-btn:hover {
    background: #3367d6 !important;
    transform: translateY(-1px) !important;
  }
  
  .modern-social-btn i {
    font-size: 20px !important; /* Larger icon to match button size */
  }
}

/* ===========================================
   SECCIÓN DE DONACIONES / APOYO
   =========================================== */

.support-section {
  background: linear-gradient(135deg, #FF6B35 0%, #F5A623 100%);
  padding: 50px 0;
  border-top: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.support-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><path d="M30 30c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12 12-5.373 12-12zm12 0c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12 12-5.373 12-12z"/></g></g></svg>');
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.support-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  text-align: center;
  position: relative;
  z-index: 1;
}

.support-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.support-content h3 {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  color: var(--primary-text);
  margin-bottom: 16px;
  font-family: var(--font-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.support-content p {
  font-size: 16px;
  color: var(--secondary-text);
  line-height: 1.5;
  margin-bottom: 30px;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
}

.donate-button {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donate-button a {
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.donate-button a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.donate-button a:hover::before {
  opacity: 1;
}

.donate-button a:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.donate-button img {
  max-width: 180px;
  height: auto;
  display: block;
  transition: all 0.3s ease;
}

.support-note {
  font-size: 14px !important;
  color: var(--primary-text) !important;
  font-style: italic;
  margin-top: 20px !important;
  font-weight: var(--font-weight-regular) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .support-section {
    padding: 30px 0;
  }
  
  .support-content {
    padding: 25px 15px;
    margin: 0 10px;
  }
  
  .support-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .support-text-full {
    display: none !important;
  }
  
  .support-text-mobile {
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  
  .donate-button {
    margin: 20px 0;
  }
  
  .donate-button img {
    max-width: 160px;
  }
  
  .donate-button a:hover {
    transform: translateY(-2px) scale(1.02);
  }
  
  .support-note {
    font-size: 12px !important;
    margin-top: 15px !important;
  }
}

/* Para desktop ocultar texto móvil */
@media (min-width: 769px) {
  .support-text-mobile {
    display: none !important;
  }
  
  .support-text-full {
    display: block !important;
  }
}

/* FIX CRÍTICO: Alineación del botón Mi ubicación - MÁXIMA PRIORIDAD */
div.form-group div.direccion-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

div.form-group div.direccion-container input#direccion {
  flex: 1 !important;
  margin: 0 !important;
  height: auto !important;
}

div.form-group div.direccion-container button#btn-mi-ubicacion,
div.form-group div.direccion-container button.btn-ubicacion {
  flex: none !important;
  width: 120px !important;
  height: 35px !important; /* Altura ajustada a 35px */
  margin: 0 !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #FF6B35 0%, #F5A623 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 15px !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

div.form-group div.direccion-container button#btn-mi-ubicacion:hover,
div.form-group div.direccion-container button.btn-ubicacion:hover {
  background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}