/* ===== MOBILE BUTTONS OPTIMIZATION ===== */
/* Este archivo contiene optimizaciones específicas para botones en mobile */
/* Se aplica después de los estilos base para asegurar prioridad */

/* ===== ESTILO UNIFICADO PARA TODOS LOS BOTONES EN MOBILE ===== */
@media (max-width: 768px) {
  /* Botones principales - Estilo base unificado (como en las imágenes) */
  .hero-btn,
  .elementor-button,
  .wp-block-button__link,
  button:not(.share-btn):not(.page-numbers),
  input[type="submit"],
  input[type="button"],
  .btn:not(.share-btn):not(.page-numbers),
  .congero-card-btn,
  .success-stories-card-btn,
  .news-card-btn,
  .read-more-btn,
  .back-to-news,
  .back-to-success-stories {
    /* Dimensiones más compactas como en las imágenes */
    padding: 0.6rem 1.2rem !important;
    min-height: 44px !important;
    min-width: 100px !important;
    
    /* Tipografía más compacta */
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    
    /* Layout unificado */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4em !important;
    
    /* Bordes y transiciones */
    border-radius: 1.2rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }
  
  /* Iconos de botones - Tamaño unificado (más compacto) */
  .hero-btn .hero-btn-icon,
  .btn-icon,
  .elementor-button .elementor-button-icon,
  .wp-block-button__link .wp-block-button__icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  
  /* Texto de botones - Consistencia */
  .hero-btn .hero-btn-text,
  .btn-text {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
}

/* ===== BOTONES ESPECÍFICOS CON TAMAÑOS DIFERENTES ===== */
@media (max-width: 768px) {
  /* Botones de navegación entre posts - Más grandes */
  .nav-link {
    min-height: 56px !important;
    padding: 1rem 1.2rem !important;
  }
  
  .nav-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
  
  .nav-link h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
  }
  
  .nav-date {
    font-size: 0.85rem !important;
  }
  
  /* Botones de compartir - Más pequeños pero accesibles */
  .share-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
  }
  
  .share-btn i {
    font-size: 1rem !important;
  }
  
  .share-label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
  
  /* Botones de paginación - Tamaño medio */
  .page-numbers {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
  
  /* Botones del footer de cards - Más prominentes */
  .congero-cards-footer .hero-btn,
  .congero-cards-footer .secondary-btn,
  .congero-cards-footer .tertiary-btn {
    padding: 1rem 2rem !important;
    min-height: 52px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
  }
  
  .congero-cards-footer .hero-btn .hero-btn-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ===== BOTONES READ MORE ESPECÍFICOS PARA MORE STORIES/NEWS ===== */
/* Estos mantienen su estilo especial como solicitaste */
@media (max-width: 768px) {
  .related-posts .read-more-btn.read-more-mobile-fix,
  .related-success-stories .read-more-btn.read-more-mobile-fix,
  .news-navigation .read-more-btn.read-more-mobile-fix,
  .success-stories-navigation .read-more-btn.read-more-mobile-fix {
    padding: 1.2rem 0 !important; /* Padding vertical aumentado, horizontal reducido */
    font-size: 1rem !important; /* Tamaño de fuente consistente */
    min-height: 48px !important; /* Touch target mínimo */
    min-width: 120px !important; /* Ancho mínimo */
    gap: 0.6em !important; /* Gap reducido para el layout especial */
    font-weight: 600 !important; /* Peso de fuente consistente */
    display: inline-flex !important; /* Asegurar flexbox */
    align-items: center !important; /* Centrado vertical */
    justify-content: center !important; /* Centrado horizontal */
    text-decoration: none !important; /* Sin subrayado */
    transition: all 0.3s ease !important; /* Transición suave */
  }
  
  .related-posts .read-more-btn.read-more-mobile-fix .btn-icon,
  .related-success-stories .read-more-btn.read-more-mobile-fix .btn-icon,
  .news-navigation .read-more-btn.read-more-mobile-fix .btn-icon,
  .success-stories-navigation .read-more-btn.read-more-mobile-fix .btn-icon {
    width: 18px !important; /* Tamaño reducido para el layout especial */
    height: 18px !important; /* Tamaño reducido para el layout especial */
    flex-shrink: 0 !important; /* Evitar compresión */
  }
}

/* ===== BOTONES DE SHORTCODE CONGERO_CARDS EN MOBILE ===== */
/* Estos son los botones de Latest News y Success Stories en el Home */
/* Ahora usan el mismo estilo base que todos los demás botones */

/* ===== OPTIMIZACIONES ADICIONALES PARA MÓVILES MUY PEQUEÑOS ===== */
@media (max-width: 480px) {
  /* Asegurar que todos los botones mantengan el touch target mínimo */
  .hero-btn,
  .elementor-button,
  .wp-block-button__link,
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .congero-card-btn,
  .success-stories-card-btn,
  .news-card-btn,
  .read-more-btn {
    min-height: 44px !important; /* Touch target mínimo absoluto */
  }
  
  /* Ajustar padding en móviles muy pequeños */
  .hero-btn,
  .elementor-button,
  .wp-block-button__link,
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .congero-card-btn {
    padding: 0.7rem 1.2rem !important;
  }
}

/* ===== ACCESIBILIDAD Y FOCUS ===== */
@media (max-width: 768px) {
  .hero-btn:focus,
  .elementor-button:focus,
  .wp-block-button__link:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="button"]:focus,
  .btn:focus,
  .page-numbers:focus,
  .share-btn:focus {
    outline: 3px solid var(--color-blue-main, #0073C2) !important;
    outline-offset: 2px !important;
  }
}

/* ===== SOBRESCRIBIR ESTILOS ESPECÍFICOS DE CARDS ===== */
/* Estos estilos tienen la máxima especificidad para sobrescribir todos los estilos existentes */
@media (max-width: 768px) {
  /* Botones de cards - MÁXIMA ESPECIFICIDAD */
  body .congero-cards .congero-card-btn,
  body .congero-cards .hero-btn.congero-card-btn,
  body .congero-cards .secondary-btn.congero-card-btn,
  body .congero-cards .tertiary-btn.congero-card-btn,
  body .news-card-btn,
  body .back-to-success-stories-btn,
  body .congero-success-story-btn,
  body .congero-card-btn,
  body .hero-btn.congero-card-btn,
  body .secondary-btn.congero-card-btn,
  body .tertiary-btn.congero-card-btn {
    /* Forzar el estilo unificado compacto - MÁXIMA PRIORIDAD */
    padding: 0.5rem 1rem !important;
    min-height: 40px !important;
    min-width: 90px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    gap: 0.3em !important;
    border-radius: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    max-width: none !important;
    min-width: 90px !important;
    height: auto !important;
    margin-top: auto !important;
    margin: 0 !important;
  }
  
  
  /* Iconos de cards - MÁXIMA ESPECIFICIDAD */
  body .congero-cards .congero-card-btn .hero-btn-icon,
  body .congero-cards .hero-btn.congero-card-btn .hero-btn-icon,
  body .news-card-btn .hero-btn-icon,
  body .back-to-success-stories-btn .hero-btn-icon,
  body .congero-success-story-btn .hero-btn-icon,
  body .congero-card-btn .hero-btn-icon,
  body .hero-btn.congero-card-btn .hero-btn-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  
  /* Texto de cards - MÁXIMA ESPECIFICIDAD */
  body .congero-cards .congero-card-btn .hero-btn-text,
  body .congero-cards .hero-btn.congero-card-btn .hero-btn-text,
  body .news-card-btn .hero-btn-text,
  body .back-to-success-stories-btn .hero-btn-text,
  body .congero-success-story-btn .hero-btn-text,
  body .congero-card-btn .hero-btn-text,
  body .hero-btn.congero-card-btn .hero-btn-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
}

/* ===== REGLA ADICIONAL CON MÁXIMA ESPECIFICIDAD ===== */
/* Esta regla tiene la máxima especificidad posible para forzar el estilo */
@media (max-width: 768px) {
  html body .congero-cards .congero-card-btn,
  html body .congero-cards .hero-btn.congero-card-btn,
  html body .congero-cards .secondary-btn.congero-card-btn,
  html body .congero-cards .tertiary-btn.congero-card-btn,
  html body .news-card-btn,
  html body .back-to-success-stories-btn,
  html body .congero-success-story-btn,
  html body .congero-card-btn,
  html body .hero-btn.congero-card-btn,
  html body .secondary-btn.congero-card-btn,
  html body .tertiary-btn.congero-card-btn {
    padding: 0.5rem 1rem !important;
    min-height: 40px !important;
    min-width: 90px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    gap: 0.3em !important;
    border-radius: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    max-width: none !important;
    min-width: 90px !important;
    height: auto !important;
    margin-top: auto !important;
    margin: 0 !important;
  }
  
  
  html body .congero-cards .congero-card-btn .hero-btn-icon,
  html body .congero-cards .hero-btn.congero-card-btn .hero-btn-icon,
  html body .news-card-btn .hero-btn-icon,
  html body .back-to-success-stories-btn .hero-btn-icon,
  html body .congero-success-story-btn .hero-btn-icon,
  html body .congero-card-btn .hero-btn-icon,
  html body .hero-btn.congero-card-btn .hero-btn-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  
  html body .congero-cards .congero-card-btn .hero-btn-text,
  html body .congero-cards .hero-btn.congero-card-btn .hero-btn-text,
  html body .news-card-btn .hero-btn-text,
  html body .back-to-success-stories-btn .hero-btn-text,
  html body .congero-success-story-btn .hero-btn-text,
  html body .congero-card-btn .hero-btn-text,
  html body .hero-btn.congero-card-btn .hero-btn-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
}

/* ===== SOPORTE PARA REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-btn,
  .elementor-button,
  .wp-block-button__link,
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .page-numbers,
  .share-btn {
    transition: none !important;
  }
  
  .hero-btn:hover,
  .elementor-button:hover,
  .wp-block-button__link:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  .btn:hover {
    transform: none !important;
  }
}