/* * ==========================================
 * Estilo de Menú "Opciones Flotantes" (TEMA CLARO)
 * ==========================================
 */

/* * 1. El Contenedor Principal (Panel)
 * Sigue siendo transparente.
 */
.modern-menu-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 0 !important;
}

/* * 2. CADA FILA (TR) - ¡Esta es la clave!
 * Convertimos cada fila en su propia "píldora" flotante.
 */
.modern-menu-panel tr {
  display: flex !important;
  align-items: center;
  min-width: 220px;
  
  /* El estilo de la píldora (AHORA CLARO) */
  background-color: rgba(255, 255, 255, 0.85); /* Fondo blanco semi-transparente */
  backdrop-filter: blur(15px); /* Efecto "vidrio esmerilado" */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Borde oscuro sutil */
  border-radius: 10px;
  
  /* Sombra más suave para el fondo claro */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  margin-bottom: 5px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* * 3. Efecto HOVER (al pasar el ratón)
 * Un resaltado sutil, puede ser gris claro o un azul muy pálido.
 */
.modern-menu-panel tr:hover {
  background-color: rgba(0, 120, 212, 0.1); /* Azul muy claro y transparente */
  border-color: rgba(0, 120, 212, 0.3);
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra un poco más pronunciada */
}

/* * 4. Celdas (Icon, Text, Arrow)
 */
.modern-menu-panel tr td {
  padding: 0;
  height: 36px;
  line-height: 36px;
  background: transparent !important;
}

/* Celda del Ícono */
.modern-menu-panel tr td:nth-child(1) {
  padding-left: 12px;
  flex-basis: 34px;
}

/* Celda del Texto (AHORA OSCURO) */
.modern-menu-panel tr td:nth-child(2) {
  flex-grow: 1;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222 !important; /* Color de texto oscuro */
}

/* Celda de la Flecha (Submenú) */
.modern-menu-panel tr td:nth-child(3) {
  padding-right: 12px;
  flex-basis: 20px;
}

/* * 5. Limpieza de Estilos Antiguos
 */
.modern-menu-panel tr td div {
  background-image: none !important;
  background: transparent !important;
  height: 36px !important;
  line-height: 36px !important;
}

/* * 6. Opciones Deshabilitadas (TEMA CLARO)
 */
.modern-menu-panel tr[style*="color: gray"] {
  background-color: rgba(245, 245, 245, 0.8) !important; /* Fondo grisáceo */
  color: #999 !important; /* Texto gris claro */
  opacity: 0.7;
}

/* Deshabilitamos el hover en las opciones grises */
.modern-menu-panel tr[style*="color: gray"]:hover {
  transform: none;
  background-color: rgba(245, 245, 245, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.1);
}

.modern-menu-panel tr[style*="color: gray"] td:nth-child(2) {
  color: #999 !important;
}