/* styles.override.css - correcciones no destructivas y específicas
   Este archivo se carga AFTER de styles.css y corrige problemas visuales
   en móviles: header, hamburguesa, overflow lateral y sección "Cómo ayudar".
*/

/* Evitar overflow horizontal global */
html, body { max-width:100%; overflow-x:hidden; }

/* Header compacto y hamburguesa visible */
.topbar { padding:10px 12px !important; }
.nav { padding:6px 0 !important; }
.brand { gap:10px !important; align-items:center; }
.brand-logo { height:36px !important; }
.brand-name { font-size:16px !important; }

/* Mantener el texto "Regalando Sonrisas" visible en móvil */
.brand-text { display: block !important; }

.menu.active { display:flex !important; position:fixed !important; top:52px !important; left:0 !important; right:0 !important; z-index:1100 !important; background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px) !important; padding:20px !important; margin: 0 12px !important; border-radius: 0 0 16px 16px !important; flex-direction: column !important; gap: 16px !important; box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2) !important; }

/* Colocar toggle en la esquina (fijo) y estilizar el icono hamburguesa */
#menuToggle {
  position: fixed !important;
  right: 12px !important;
  top: 35px !important;
  z-index: 9999 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--purple) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(139,92,246,0.18) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  padding: 6px !important;
}

/* Las tres barras interiores que forman el hamburger */
.menu-toggle .hamburger,
#menuToggle .hamburger {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  margin: 2px 0 !important;
  transition: transform 180ms ease, opacity 160ms ease !important;
}

/* Animación simple al activar: convertir en 'X' */
.menu-toggle.active .hamburger:nth-child(1),
#menuToggle.active .hamburger:nth-child(1) {
  transform: translateY(5px) rotate(45deg) !important;
}
.menu-toggle.active .hamburger:nth-child(2),
#menuToggle.active .hamburger:nth-child(2) {
  opacity: 0 !important;
}
.menu-toggle.active .hamburger:nth-child(3),
#menuToggle.active .hamburger:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg) !important;
}

/* Hero: reducir tamaños en pantallas pequeñas */
.hero { padding:20px 0 30px 0 !important; }
.hero-copy h1 { font-size:32px !important; line-height:1.05 !important; }
.hero-copy p { font-size:16px !important; }

/* Carrusel y media */
.hero-carousel, .carousel-container, .carousel-image { max-width:100% !important; height:auto !important; box-sizing:border-box !important; }

/* Calendario y contacto: ocupar ancho completo en móvil */
.calendar-wrap, .calendar-grid, .calendar-aside { width:100% !important; box-sizing:border-box !important; }
.calendar-grid { padding:8px !important; }
.calendar-aside { padding:12px !important; }

.contact { grid-template-columns: 1fr !important; padding: 0 12px !important; }
.contact-info, .contact-form { width:100% !important; padding:12px !important; box-sizing:border-box !important; }

/* Sección "¿Cómo puedes ayudar?" - aislar estilos (evita conflictos con .contact-info global) */
.donation-methods-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important; gap:20px !important; align-items:start !important; }
.method-card{
  text-align:center !important;
  padding:22px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius:16px !important;
}
.method-card .method-icon{
  font-size:40px !important;
  width:84px !important;
  height:84px !important;
  margin:6px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(139,92,246,0.08)) !important;
}
.method-card h3{ font-size:20px !important; margin:6px 0 8px 0 !important; }
.method-card p{ font-size:15px !important; color:var(--muted) !important; margin:0 !important; }
.method-card .contact-info{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; display:flex !important; justify-content:center !important; gap:8px !important; margin-top:6px !important; }
.method-card .whatsapp-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  padding:12px 18px !important;
  border-radius:12px !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#fff !important;
  text-decoration:none !important;
  background:linear-gradient(135deg,#25D366 0%, #128C7E 100%) !important;
  box-shadow:0 8px 20px rgba(18,140,126,0.18) !important;
  border:0 !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.method-card .whatsapp-btn:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 30px rgba(18,140,126,0.22) !important;
}

/* Estilos para el botón 'Ver fechas disponibles' dentro de method-card */
.method-card .calendar-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 18px !important;
  border-radius:12px !important;
  font-weight:700 !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--purple) 0%, var(--pink) 100%) !important;
  box-shadow:0 8px 24px rgba(139,92,246,0.18) !important;
  text-decoration:none !important;
  border:0 !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.method-card .calendar-btn:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 36px rgba(139,92,246,0.22) !important;
}

@media (max-width:480px){
  .method-card .calendar-btn{ width:100% !important; padding:12px !important; }
}

/* Correcciones específicas para el calendario en móviles */
@media (max-width: 480px) {
  /* Hacer el encabezado del calendario más compacto */
  .calendar-header {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    margin: 0 4px !important;
  }

  .calendar-header .cal-title {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .calendar-header .nav-btn {
    font-size: 1.1rem !important;
    padding: 6px 8px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* Reducir espacios dentro de la cuadrícula */
  .calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* poner flechas a los lados */
    flex-direction: row !important;
    position: relative !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    /* Quitar efecto borroso y usar fondo sólido para integridad visual */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,1) !important;
    border: 3px solid rgba(139,92,246,0.10) !important;
    box-shadow: none !important;
    z-index: 20 !important;
  }

  .day {
    min-height: 64px !important;
    padding: 8px !important;
  }

  .day .dnum {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .badge {
    bottom: 6px !important;
    left: 6px !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Ajustar el aside de próximos eventos */
  .calendar-grid {
    padding: 6px 6px !important; /* reducir padding interno */
    align-items: center !important;
    justify-content: center !important;
    /* Mantener disposición en fila si hace falta para flechas, pero centrar la caja */
    flex-direction: row !important;
    position: relative !important;
    /* Eliminar los grandes paddings laterales que desplazan la caja; usar margin auto para centrar */
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 12px auto !important; /* centrar horizontalmente en móvil */
    max-width: 360px !important; /* limitar ancho para que no sobresalga en móviles */
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,1) !important;
    border: 3px solid rgba(139,92,246,0.10) !important;
    box-shadow: none !important;
  }
  }

@media (max-width: 420px) {
  .calendar-header {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    margin: 6px 6px !important;
    box-shadow: none !important;
    border-width: 2px !important;
  }

  .calendar-header::before { height: 3px !important; }

  .calendar-header .cal-title {
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    white-space: normal !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .calendar-header .nav-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
    padding: 4px !important;
  }

  /* Reducir el tamaño del contenedor del título para que no empuje la cuadrícula */
  .calendar-header .cal-title, .calendar-header .nav-btn { display: inline-block !important; vertical-align: middle !important; }

  /* Asegurar que la caja del mes no ocupe tanto alto */
  .calendar-header { min-height: auto !important; }

  /* Ajuste final de la grid para evitar recortes */
  .calendar-grid { margin: 8px auto !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; width: auto !important; max-width: 360px !important; box-sizing: border-box !important; overflow: hidden !important; padding-right: 10px !important; }

  /* Quitar el decorado de fondo que sobresale fuera del contenedor en pantallas muy pequeñas */
  .calendar-wrap::before { display: none !important; }
}

@media (max-width: 480px) {
  .method-card .whatsapp-btn{ width:100% !important; padding:12px !important; }
}

/* Botones y CTAs adaptativos */
.btn{ min-width:0 !important; padding:12px 18px !important; }
.cta-row{ justify-content:center !important; }

/* Ajustes extra para pantallas pequeñas */
@media (max-width: 480px) {
  .brand-name { font-size:14px !important; } /* mantener texto visible pero más pequeño */
  .hero-copy h1 { font-size:28px !important; }
  .donation-methods-grid { grid-template-columns:1fr !important; gap:14px !important; max-width: 520px !important; margin: 0 auto !important; }
  .method-card { padding:16px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important; }
}
/* Reglas finales FORZADAS: si el navegador cachea, estas reglas usan selectores específicos y !important */
@media (max-width: 480px) {
  /* Encabezado compacto obligatorio */
  .calendar-header,
  #calendar .calendar-header {
    padding: 6px 8px !important;
    margin: 6px 6px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    border-width: 2px !important;
    height: auto !important;
    min-height: 0 !important;
  }}

  /* Título del mes más pequeño y centrado */
  .calendar-header .cal-title,
  #calendar .calendar-header .cal-title {
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 6px !important;
    margin: 0 auto !important;
    display: inline-block !important;
    white-space: normal !important;
  }

  /* Colocar las flechas a los lados y centrar el título del mes */
  .calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding-left: 48px !important; /* espacio para la flecha izquierda */
    padding-right: 48px !important; /* espacio para la flecha derecha */
  }

  .calendar-header .calendar-arrow-box {
    position: static !important; /* dejar flujo normal para que queden a los lados */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 4px !important;
    z-index: 30 !important;
  }

  .calendar-header .calendar-arrow-box:first-of-type { order: 0 !important; }
  .calendar-header .calendar-arrow-box:last-of-type { order: 2 !important; }

  .calendar-header .cal-title { text-align: center !important; margin: 0 !important; }

  /* Botones de navegación integrados: fondo acorde a la caja, tamaño compacto */
  .calendar-header .calendar-arrow-box,
  #calendar .calendar-header .calendar-arrow-box,
  .calendar-header .nav-btn,
  #calendar .calendar-header .nav-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--purple) !important;
  }

  /* Asegurar que el título ocupe el espacio central y no sea cubierto por las flechas */
  .calendar-header .cal-title { order: 1 !important; flex: 1 1 auto !important; text-align: center !important; }


/* -------------------------------------------------------------------------
   Estilos para la sección Contacto y Footer (override, responsive)
   ------------------------------------------------------------------------- */
.contact {
  display: grid !important;
  grid-template-columns: 1fr 380px !important; /* formulario + info lateral (desktop) */
  gap: 28px !important;
  align-items: start !important;
  padding: 8px 0 !important;
}

.contact-form {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96)) !important;
  border: 2px solid rgba(139,92,246,0.06) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 12px 40px rgba(139,92,246,0.06) !important;
}

.contact-form h3 {
  margin: 0 0 8px 0 !important;
  font-size: 20px !important;
  color: var(--ink) !important;
}

.contact-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 10px 0 6px 0 !important;
  font-size: 14px !important;
  color: var(--muted) !important;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(139,92,246,0.09) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
}

.contact-form textarea { min-height: 120px !important; resize: vertical !important; }

.contact-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  box-shadow: 0 12px 30px rgba(139,92,246,0.12) !important;
}

.contact-submit:active { transform: translateY(1px) !important; }

.contact-msg {
  margin-top: 12px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
}

.contact .contact-info {
  padding: 18px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(250,245,255,0.95), rgba(255,255,255,0.98)) !important;
  border: 1px solid rgba(139,92,246,0.04) !important;
  box-shadow: 0 8px 24px rgba(139,92,246,0.04) !important;
}

.contact .contact-info h4{ margin-top:0 !important; }
.contact .contact-info p{ color:var(--muted) !important; font-size:14px !important; margin:6px 0 0 0 !important; }

/* Footer */
.footer {
  background: linear-gradient(180deg, rgba(245,243,255,1), rgba(255,250,253,1)) !important;
  border-top: 1px solid rgba(139,92,246,0.04) !important;
  padding: 28px 0 !important;
}

.footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.footer .brand { gap: 8px !important; }
.footer small { color: var(--muted) !important; }
.footer a { color: var(--purple) !important; text-decoration: none !important; font-weight:700 !important; }

/* Responsive: apilar contacto y footer en móvil */
@media (max-width: 768px) {
  .contact { grid-template-columns: 1fr !important; }
  .contact .contact-info { order: 2 !important; }
  .contact-form { order: 1 !important; }
  .footer-inner { flex-direction: column; align-items: center !important; gap:12px; text-align: center !important; }
  /* Centrar la marca y enlaces en footer en móvil */
  .footer-inner .brand { justify-content: center !important; }
  .footer small { display: block; width:100%; text-align: center !important; }
}

/* Ajustes estéticos finales */
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none !important; box-shadow: 0 8px 22px rgba(139,92,246,0.06) !important; border-color: rgba(139,92,246,0.18) !important; }

/* Estilos para los enlaces de eventos (WhatsApp e Instagram) */
.event-link {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.event-link:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.whatsapp-link:hover {
  background: #128C7E !important;
}

.instagram-link:hover {
  filter: brightness(1.1) !important;
}

@media (max-width: 480px) {
  .event-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  .event-link {
    width: 100% !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}