/* Estilos personalizados para Mi Plan Ahorros */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

/* Mostrar dropdown al hover en dispositivos con puntero (desktop) */
@media (hover: hover) and (pointer: fine) {
  .navbar .nav-item.dropdown .dropdown-menu {
    display: block;            /* lo controlamos mediante visibilidad/opacity/transform */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: transform .18s ease, opacity .18s ease, visibility .18s;
    margin-top: 0;             /* evitamos salto grande */
    border-radius: .6rem;
    box-shadow: 0 8px 26px rgba(10,10,10,0.12);
    min-width: 10rem;
    padding: .25rem 0;
  }

  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(6px);
  }

  /* Girar el caret al abrir */
  .navbar .nav-link.dropdown-toggle::after {
    transition: transform .2s ease;
  }
  .navbar .nav-item.dropdown:hover .nav-link.dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

/* Estilo de los items */
.dropdown-item {
  padding: .45rem 1rem;
  border-radius: .45rem;
  transition: background .12s, transform .08s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(0,0,0,0.05);
  transform: translateX(4px);
}

/* Alineación visual */
.navbar-nav { align-items: center; }

/* Asegura que el dropdown no interfiera con el header cuando hay mucho contenido */
.dropdown-menu { z-index: 2000; }