@charset "UTF-8";
/* =============== TABS BASE STYLES =============== 
   - Estructura visual para pestañas de navegación 
   - Importado desde: cmce_nav_tabs.html
*/
.storm-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid rgba(74, 74, 255, 0.1);
  position: relative;
  overflow: visible; /* Cambiamos de auto a visible */
  scrollbar-width: none; /* Para Firefox */
  -ms-overflow-style: none; /* Para IE/Edge */
  /* Ocultar scrollbar pero mantener funcionalidad */
}
.storm-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}
.storm-tabs::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: #CF2722;
  transition: all 0.3s ease;
  flex-shrink: 0; /* Evita que los items se encojan */
}
.storm-tabs__item {
  margin-bottom: -2px;
}
.storm-tabs__link {
  display: block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(26, 26, 46, 0.7);
  border-radius: 0.5rem 0.5rem 0 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.storm-tabs__link:hover {
  color: #4A4AFF;
  background: rgba(74, 74, 255, 0.05);
}
.storm-tabs__link--active {
  color: #CF2722;
  background: rgba(207, 39, 34, 0.05);
}
.storm-tabs__link--active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #CF2722;
  z-index: 2;
}

/* =============== RESPONSIVE =============== */
@media (max-width: 768px) {
  .storm-tabs {
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .storm-tabs__link {
    padding: 0.75rem 1rem;
    white-space: nowrap;
    font-size: 0.9rem;
  }
}
@media (max-width: 490px) {
  .storm-tabs {
    flex-direction: column;
  }
}
/* =============== DARK MODE =============== 
   Compatible con html.dark activado por localStorage
*/
html.dark .storm-dashboard .storm-tabs {
  border-bottom: 2px solid rgba(74, 74, 255, 0.2);
}

html.dark .storm-dashboard .storm-tabs__link {
  color: #E0E0E0;
}
html.dark .storm-dashboard .storm-tabs__link:hover {
  background: rgba(74, 74, 255, 0.1);
  color: #4A4AFF;
}

html.dark .storm-dashboard .storm-tabs__link--active {
  background: rgba(207, 39, 34, 0.25);
  color: #CF2722;
}
html.dark .storm-dashboard .storm-tabs__link--active::after {
  background: #CF2722;
}/*# sourceMappingURL=cmce_n_t.css.map */