@charset "UTF-8";
/* SOLUCION PARA SUBMENUS QUE SE ABREN FUERA DE LA PANTALLA */
/* 1. FORZAR SUBMENUS A ABRIRSE HACIA LA DERECHA */
.menu-item .sub-menu, .menu-item .children, .menu li ul, .menu .dropdown-menu, .nav-menu .sub-menu, .nav-menu .children, ul.sub-menu, ul.children {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  margin-left: 0 !important;
}
/* 2. AJUSTAR POSICION PARA ITEMS CERCA DEL BORDE IZQUIERDO */
.menu-item:hover .sub-menu, .menu-item:hover .children, .menu li:hover ul, .menu-item-has-children:hover .sub-menu {
  left: 100% !important;
  right: auto !important;
}
/* 3. ESPECIFICO PARA EL PRIMER ITEM INICIO */
.menu > li:first-child .sub-menu, .menu > li:first-child .children, .nav-menu > li:first-child .sub-menu, #menu-primary > li:first-child .sub-menu {
  left: 0 !important;
  top: 100% !important;
}
/* 4. DETECTAR Y AJUSTAR SUBMENUS CERCA DEL BORDE */
@media (min-width: 768px) {
  .menu > li:nth-child(1) .sub-menu, .menu > li:nth-child(2) .sub-menu, .menu > li:nth-child(3) .sub-menu, .nav-menu > li:nth-child(1) .sub-menu, .nav-menu > li:nth-child(2) .sub-menu, .nav-menu > li:nth-child(3) .sub-menu {
    left: 0 !important;
    top: 100% !important;
    right: auto !important;
  }
  .menu > li:nth-child(1) .sub-menu .sub-menu, .menu > li:nth-child(2) .sub-menu .sub-menu, .menu > li:nth-child(3) .sub-menu .sub-menu {
    left: 100% !important;
    top: 0 !important;
  }
}
/* 5. ASEGURAR QUE LOS SUBMENUS SEAN VISIBLES */
.sub-menu, .children, .dropdown-menu {
  position: absolute !important;
  z-index: 9999 !important;
  background: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  min-width: 200px !important;
  max-width: 300px !important;
  border: 1px solid #e0e0e0 !important;
}
/* 6. PREVENIR DESBORDAMIENTO DEL VIEWPORT */
.menu-item {
  position: relative !important;
}
/* 7. ESTILOS ADICIONALES PARA MEJORAR LA VISUALIZACION */
.sub-menu li, .children li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
.sub-menu a, .children a {
  display: block !important;
  padding: 10px 20px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}
.sub-menu a:hover, .children a:hover {
  background-color: #f5f5f5 !important;
}
/* 8. FIX ESPECIFICO PARA FLAT RESPONSIVE PRO */
.flat-responsive .menu-item .sub-menu, .flat-responsive .menu-item .children {
  left: 100% !important;
  right: auto !important;
}
/* 9. INDICADOR VISUAL PARA ITEMS CON SUBMENU */
.menu-item-has-children > a::after, .page_item_has_children > a::after {
  content: " >" !important;
  font-size: 10px !important;
  vertical-align: middle !important;
}
.menu > li:nth-child(1).menu-item-has-children > a::after, .menu > li:nth-child(2).menu-item-has-children > a::after, .menu > li:nth-child(3).menu-item-has-children > a::after {
  content: " v" !important;
}
/* 10. RESPONSIVE EN MOVILES TODO VERTICAL */
@media (max-width: 767px) {
  .sub-menu, .children {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.05) !important;
    margin-left: 20px !important;
  }
}
/* 11. TRANSICIONES SUAVES */
.sub-menu, .children {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-item:hover > .sub-menu, .menu-item:hover > .children, .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}
/* 12. PREVENIR QUE EL MENU PRINCIPAL SE MUEVA */
.menu, .nav-menu {
  position: relative !important;
  z-index: 100 !important;
}
/* 13. ASEGURAR VISIBILIDAD EN CONTENEDOR */
header, .site-header, .main-navigation, .site-navigation {
  overflow: visible !important;
}
/* RESTAURAR COLORES Y ESTILOS DEL MENU */
/* 1. ESTILO DEL MENU PRINCIPAL */
.main-navigation, .site-navigation, #site-navigation {
  background-color: #f8f9fa !important;
}
/* 2. ENLACES DEL MENU PRINCIPAL */
.main-navigation a, .site-navigation a, .menu > li > a {
  color: #333333 !important;
  padding: 15px 20px !important;
  text-decoration: none !important;
  display: block !important;
  transition: all 0.3s ease !important;
}
/* 3. HOVER DEL MENU PRINCIPAL */
.main-navigation a:hover, .site-navigation a:hover, .menu > li > a:hover, .menu > li:hover > a {
  background-color: #5cb8e7 !important;
  color: #5cb8e7 !important;
}
/* 4. ITEM ACTIVO */
.current-menu-item > a, .current_page_item > a {
  background-color: #5cb8e7 !important;
  color: #ffffff !important;
}
/* 5. ESTILOS PARA SUBMENUS */
.sub-menu, .children {
  background-color: #5cb8e7 !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  padding: 5px 0 !important;
  min-width: 220px !important;
}
/* 6. ENLACES DE SUBMENU */
.sub-menu a, .children a {
  color: #333333 !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}
/* 7. HOVER DE SUBMENU */
.sub-menu a:hover, .children a:hover {
  background-color: #f0f7ff !important;
  color: #0066cc !important;
  padding-left: 25px !important;
}
/* 8. SEPARADORES EN SUBMENU */
.sub-menu li:not(:last-child), .children li:not(:last-child) {
  border-bottom: 1px solid #f0f0f0 !important;
}
/* 9. INDICADOR DE SUBMENU */
.menu-item-has-children > a::after, .page_item_has_children > a::after {
  content: " ▼" !important;
  font-size: 10px !important;
  color: #666666 !important;
  margin-left: 5px !important;
}
/* 10. INDICADOR LATERAL PARA SUBMENUS */
.sub-menu .menu-item-has-children > a::after, .children .page_item_has_children > a::after {
  content: " ►" !important;
  float: right !important;
}
/* 11. ANIMACIONES SUAVES */
.sub-menu, .children {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease !important;
}
.menu-item:hover > .sub-menu, .menu-item:hover > .children {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 12. BORDE SUPERIOR DEL MENU */
.main-navigation, .site-navigation {
  border-top: 3px solid #0066cc !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
/* 13. SOMBRA DEL MENU PRINCIPAL */
.main-navigation, .site-navigation {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}
/* 14. AJUSTES PARA MOVILES */
@media (max-width: 768px) {
  .main-navigation a, .site-navigation a {
    padding: 12px 15px !important;
  }
  .sub-menu, .children {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    margin-left: 20px !important;
  }
}
/* 15. COLORES ESPECIFICOS PARROQUIA */
.main-navigation {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%) !important;
}
/* 16. HOVER CON EFECTO AZUL MARIANO */
.menu > li:hover > a {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
/* 17. SUBMENU ACTIVO */
.sub-menu .current-menu-item > a, .children .current_page_item > a {
  background-color: #e6f3ff !important;
  color: #0066cc !important;
  font-weight: bold !important;
}
/* 18. EFECTO DE PROFUNDIDAD */
.menu-item:hover > .sub-menu {
  box-shadow: 0 5px 20px rgba(0, 102, 204, 0.2) !important;
}
/* 19. FUENTE Y TIPOGRAFIA */
.main-navigation, .site-navigation, .menu a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
}
/* 20. AJUSTE FINAL PARA INICIO */
.menu > li:first-child > a {
  border-left: 3px solid transparent !important;
}
.menu > li:first-child:hover > a {
  border-left-color: #ffffff !important;
}