/*
Theme Name: Astra Child
Theme URI: https://www.codigopet.cl
Description: Tema hijo de Astra
Author: Gödlike
Author URI: https://www.codigopet.cl
Template: astra
Version: 1.0.0
*/

.ocultar-en-desktop, #menu-item-3010 {
    display: none !important;
}

.ast-header-break-point .main-navigation .stack-on-mobile li {
    width: 100% !important;
    display: block !important;
}

.entry-meta{
    display: none !important;
}

.nav-previous{
    display: none !important;
}

.nav-next{
    display: none !important;
}

.navigation.post-navigation {
    display: flex;
    justify-content: space-around; /* O cualquier distribución que prefieras */
    padding: 10px;
    background-color: #f8f9fa; /* Ajusta según tu diseño */
    border-radius: 5px; /* Para un aspecto más suave */
}

.icon-phone, .icon-gmaps, .icon-whatsapp {
    font-size: 24px; /* Ajusta el tamaño según sea necesario */
    text-decoration: none;
    color: #007bff; /* Azul para los iconos */
}

.icon-phone:hover, .icon-gmaps:hover, .icon-whatsapp:hover {
    color: #0056b3; /* Cambia el color al pasar el cursor */
    cursor: pointer;
}

.main-header-bar .main-header-menu > .menu-item > .menu-link, 
.main-header-bar #astra-footer-menu > .menu-item > .menu-link {
    height: 0% !important;
}

a:focus-visible {
    outline-style: none !important;
}

.main-header-menu .menu-link, .main-header-menu>a {
    text-decoration: none;
    padding: 0 1em;
    display: inline-block;
    transition: all .2s linear;
    outline-style: none !important;
}

.icon-phone, .icon-gmaps, .icon-whatsapp {
    margin: 0 10px;
    font-size: 1.5em;
    color: #007bff;
    text-decoration: none;
}

.icon-phone:hover, .icon-gmaps:hover, .icon-whatsapp:hover {
    color: #0056b3;
}


@media (max-width: 1024px) {
    .footer-mascota-oculto {
        display: none !important;
    }
}

.ast-page-builder-template .hentry {
    margin: 0;
    padding: 0px 0px 100px 0px !important;
}

@media (max-width: 1024px){
	.ast-page-builder-template .hentry {
    margin: 0;
    padding: 0px 0px 99px 0px !important;
}
}

.ast-page-builder-template .comments-area {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0;
    margin-bottom: 2em;
    display: none !important;
}

/* Estilos de tabla moderna */
.wpuf-dashboard-container .items-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.wpuf-dashboard-container .items-table th,
.wpuf-dashboard-container .items-table td {
    padding: 15px;
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.wpuf-dashboard-container .items-table th {
    background: #f9f9f9;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
}

.wpuf-dashboard-container .items-table tr:hover {
    background: #f7f7f7;
}

/* Imagen circular */
.wpuf-dashboard-container .items-table td img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* Botones */
.wpuf-dashboard-container .wpuf-posts-options {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #1c88ff;
    border-radius: 50%;
    color: #ffffff;
    transition: background 0.3s ease;
}

.wpuf-dashboard-container .wpuf-posts-options:hover {
    background: #0a6cd8;
}

/* Flecha de despliegue */
.post-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: #e6f4ff;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
}

.post-edit-icon:hover {
    background: #cceeff;
}

.post-edit-icon svg {
    transition: transform 0.3s ease;
}

.post-edit-icon.open svg {
    transform: rotate(180deg);
}

/* Animación de despliegue */
.wpuf-dashboard-container .expandable-content {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.4s ease, opacity 0.4s ease;
}

.wpuf-dashboard-container .expandable-content.open {
    height: auto;
    opacity: 1;
}

/* Transiciones para los íconos del botón */
.menu-toggle .mobile-menu-toggle-icon svg {
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: block;
}

/* Estado inicial: la hamburguesa visible, la X oculta y girada */
.menu-toggle .ast-menu2-svg {
  opacity: 1;
  transform: rotate(0deg);
}

.menu-toggle .ast-close-svg {
  opacity: 0;
  transform: rotate(-90deg);
}

/* Estado activo: la hamburguesa se desvanece y rota; la X aparece con giro */
.menu-toggle.active .ast-menu2-svg {
  opacity: 0;
  transform: rotate(90deg);
}

.menu-toggle.active .ast-close-svg {
  opacity: 1;
  transform: rotate(0deg);
}

/* --- Animaciones keyframes --- */

/* Efecto fade-down: desde opacidad 0 y 10px arriba, hasta visible y en posición */
@keyframes fadeDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Efecto zoom ligero al presionar */
@keyframes zoomPress {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.97);
  }
}

/* --- Estilos aplicados solo en móvil --- */
@media only screen and (max-width: 768px) {

  /* 1. Animación fade-down al desplegar el menú principal */
  /* Astra añade la clase "toggled" al desplegar el menú móvil */
  .main-header-bar-navigation.toggled,
  #ast-mobile-site-navigation.toggled {
    animation: fadeDown 0.5s ease forwards;
  }

  /* 2. Animación fade-down para los submenús */
  #ast-hf-mobile-menu .sub-menu {
    animation: fadeDown 0.5s ease forwards;
  }

  /* 3. Registro en bold y animación zoom ligero */
  /* Se asume que "Registro" tiene la clase "menu-item-3336" */
  #ast-hf-mobile-menu .menu-item-3336 .menu-link {
    font-weight: bold;
  }

  /* 4. Transiciones y efectos de hover y touch en los enlaces del menú */
  #ast-hf-mobile-menu .menu-link {
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
    /* Agrega un poco de padding y border-radius para un look más moderno */
    padding: 12px 16px;
    border-radius: 6px;
  }
  
  /* Hover: cambio sutil en color de fondo y efecto de zoom (ligero) */
  #ast-hf-mobile-menu .menu-link:hover {
    background-color: #f5f5f5;
    transform: scale(1.02);
  }
  
  /* Al tocar (active): efecto de "presionado" mediante zoom ligero */
  #ast-hf-mobile-menu .menu-link:active {
    animation: zoomPress 0.15s ease forwards;
  }
  
  /* Quitar outlines en los enlaces y submenús para que no aparezca el borde de puntos */
  #ast-hf-mobile-menu a:focus,
  #ast-hf-mobile-menu a:active {
    outline: none !important;
    box-shadow: none !important;
  }
  #ast-hf-mobile-menu a {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Opcional: para los toggle de submenús (flechas) */
  #ast-hf-mobile-menu .dropdown-menu-toggle {
    transition: transform 0.3s ease;
  }
  
  /* Si la opción desplegada cambia el atributo aria-expanded a "true", rota la flecha */
  #ast-hf-mobile-menu .menu-item-has-children > a[aria-expanded="true"] .dropdown-menu-toggle {
    transform: rotate(180deg);
  }
}

 .menu-toggle:focus,
  .menu-toggle:hover,
  .mobile-menu .menu-item.ast-menu-toggle:focus,
  .mobile-menu .menu-item.ast-menu-toggle:hover {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
  }

.ast-menu-toggle{
     outline: none !important;
}

.menu-toggle .main-header-menu-toggle .ast-mobile-menu-trigger-minimal .active .toggled{
    outline: none !important;
}

#qr-canvas{
	display: flex !important;
    justify-content:center !important;
	padding-top: 25px !important;
}

#qr-pet-name{
	background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06b6d4, #10b981, #f59e0b, #ef4444, #ff006e);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
    color: white;
    padding: 25px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
}

/* ==============================================
   SOLO NAVEGACIÓN ESTILO TETHER
   Agregar al FINAL de tu CSS actual
   ============================================== */

/* Variables para el nav */
:root {
    --nav-primary: #3498db;
    --nav-hover: #2980b9;
    --nav-text: #2c3e50;
    --nav-glass: rgba(255, 255, 255, 0.95);
    --nav-transition: all 0.3s ease;
}

/* Contenedor principal del header - Glassmorphism */
.main-header-bar,
.ast-primary-header {
    background: var(--nav-glass) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    padding-top: 12px !important;
    margin: 8px 16px 0 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Efecto sutil de brillo */
.main-header-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    pointer-events: none;
}

/* CORRIGIENDO tu height: 0% */
.main-header-menu > .menu-item > .menu-link,
#astra-footer-menu > .menu-item > .menu-link {
    height: auto !important; /* Corrige el 0% */
    padding: 20px 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--nav-text) !important;
    transition: var(--nav-transition) !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
}

/* Mejorando tus enlaces existentes */
.main-header-menu .menu-link,
.main-header-menu > a {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--nav-text) !important;
    border-radius: 6px !important;
    transition: var(--nav-transition) !important;
}

/* Hover effects elegantes */
.main-header-menu .menu-link:hover,
.main-header-menu > a:hover,
.main-header-menu > .menu-item > .menu-link:hover {
    color: var(--nav-primary) !important;
    background: rgba(52, 152, 219, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Item activo con línea inferior */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-item > a {
    color: var(--nav-primary) !important;
    position: relative !important;
}

.main-header-menu .current-menu-item > .menu-link::after,
.main-header-menu .current-menu-item > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--nav-primary) !important;
    border-radius: 1px !important;
}

/* Submenús dropdown modernos */
.main-header-menu .sub-menu {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    backdrop-filter: blur(10px) !important;
}

.main-header-menu .sub-menu .menu-link {
    padding: 12px 20px !important;
    margin: 0 8px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

.main-header-menu .sub-menu .menu-link:hover {
    background: rgba(52, 152, 219, 0.1) !important;
    transform: none !important;
}

/* Mejorando tus iconos sociales existentes */
.icon-phone, 
.icon-gmaps, 
.icon-whatsapp {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(52, 152, 219, 0.1) !important;
    transition: var(--nav-transition) !important;
    margin: 0 6px !important;
}

.icon-phone:hover, 
.icon-gmaps:hover, 
.icon-whatsapp:hover {
    background: var(--nav-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

/* Botón hamburguesa mejorado */
.ast-mobile-menu-trigger,
.menu-toggle {
    border-radius: 6px !important;
    padding: 8px !important;
    transition: var(--nav-transition) !important;
}

.menu-toggle:hover,
.ast-mobile-menu-trigger:hover {
    background: rgba(52, 152, 219, 0.1) !important;
}

/* Solo para desktop - mejora visual */
@media (min-width: 769px) {
    .main-header-menu {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }
    
    /* Espaciado entre items */
    .main-header-menu > .menu-item {
        margin: 0 2px !important;
    }
    
    /* Efecto de transición suave en todo el menú */
    .main-header-menu,
    .main-header-menu * {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* Mantener tus animaciones móviles intactas */
@media (max-width: 768px) {
    /* QUITAR rounded en móvil */
    .main-header-bar,
    .ast-primary-header {
        margin: 0 !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    
    /* NO tocar nada de tus animaciones móviles */
    /* Solo mejorar el glassmorphism en mobile */
    .main-header-bar-navigation.toggled {
        background: white !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Indicador a la izquierda en móvil */
    #ast-hf-mobile-menu .menu-link {
        position: relative !important;
        border-left: 3px solid transparent !important;
        transition: all 0.3s ease !important;
    }
    
    #ast-hf-mobile-menu .menu-link:hover,
    #ast-hf-mobile-menu .current-menu-item .menu-link {
        border-left-color: var(--nav-primary) !important;
        background: rgba(52, 152, 219, 0.05) !important;
        padding-left: 24px !important;
    }
}