/*
Theme Name: Hello Elementor Child
Theme URI: https://mne.amandach.com/
Description: Tema hijo de Hello Elementor para personalización
Author: Arian Hernandez
Template: hello-elementor
Version: 1.0
*/


/* Estilos para validación de teléfonos - SOLO BORDES */
.phone-valid {
    border-color: #27ae60 !important;
}

.phone-invalid {
    border-color: #e74c3c !important;
}

/* Animación suave para cambios de color */
input[type="tel"], 
input[name*="tel"], 
input[name*="phone"] {
    transition: border-color 0.3s ease;
}

/* Estilos específicos para Elementor - SOLO BORDES */
.elementor-field-type-tel .elementor-field.phone-invalid,
.elementor-form-fields-wrapper .elementor-field.phone-invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 1px #e74c3c !important;
}

.elementor-field-type-tel .elementor-field.phone-valid,
.elementor-form-fields-wrapper .elementor-field.phone-valid {
    border-color: #27ae60 !important;
    box-shadow: 0 0 0 1px #27ae60 !important;
}

/* ===== MENÚ DE NAVEGACIÓN (UL con id fijo) ===== */
#menu-1-dae58f5 {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

/* Primer item al 100% */
#menu-1-dae58f5 > li:nth-child(1) { flex: 0 0 100%; }
#menu-1-dae58f5 > li:nth-child(1) > a {
  background-color: #10069f;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 20px;
  padding: 15px 0;
  display: block;
}

/* Resto de items al 50% */
#menu-1-dae58f5 > li:not(:nth-child(1)) { flex: 0 0 calc(50% - 10px); }
#menu-1-dae58f5 > li:not(:nth-child(1)) > a {
  border: 1px solid #10069f;
  color: #10069f;
  text-align: center;
  padding: 15px 0;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 10px;
  font-weight: normal;
}

#menu-1-dae58f5 > li:not(:nth-child(1)):hover > a {
	color:white;
}


/* Responsive móvil: todos al 100% */
@media (max-width: 767px) {
  #menu-1-dae58f5 > li { flex: 0 0 100% !important; }
}

/* Submenús (escritorio) */
#menu-1-dae58f5 > li.menu-item-has-children { position: relative; } /* referencia para el abs */
#menu-1-dae58f5 .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 280px !important;
  background-color: #fff !important;
  border: 1px solid #10069f !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(16, 6, 159, 0.15) !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, -10px, 0) !important;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
  margin-top: 5px !important;
  padding: 10px 0 !important;
}

/* Mostrar submenú con hover en desktop */
#menu-1-dae58f5 > li:hover > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Estilos items del submenú */
#menu-1-dae58f5 .sub-menu li a {
  background-color: transparent !important;
  color: #333 !important;
  padding: 12px 20px !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  font-weight: normal !important;
  transition: background-color .2s ease, padding-left .2s ease !important;
}
#menu-1-dae58f5 .sub-menu li a:hover {
  background-color: #f8f9ff !important;
  color: #10069f !important;
  padding-left: 25px !important;
}

/* Toggle submenú en móvil con clase .submenu-open */
@media (max-width: 767px) {
  #menu-1-dae58f5 > li.menu-item-has-children.submenu-open > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    position: absolute !important;
    z-index: 9999 !important;
  }
  #menu-1-dae58f5 > li.menu-item-has-children { cursor: pointer !important; }
}