/* --- COMPONENTE: Contenedor de Navegación Principal --- */
#main-nav-buttons {
  padding: 0;
  gap: 0;
  background-color: transparent;
  border: none;
  /* Eliminar esquinas redondeadas del contenedor */
  border-radius: 0;
}

/* --- COMPONENTE: Botón de Navegación Principal --- */
.nav-button {
  /* Estructura y Forma */
  /* Padding original: var(--btn-nav-padding-y) var(--btn-nav-padding-x) (aprox 12px). Aumentado a 1.25rem (20px) */
  padding: 0.5rem 1.25rem;
  border-radius: 0;
  /* Esquinas rectas - Diseño M1 */

  /* Borde izquierdo eliminado para que no haya separación blanca */
  border-left: none;
  /* Borde superior del mismo gris del fondo para botones inactivos */
  border-top: 6px solid #cbd5e1;
  border-right: none;
  border-bottom: 1px solid transparent;

  box-shadow: none;
  /* Diseño plano industrial */

  font-weight: 700;
  /* font-bold */
  font-size: 0.875rem;
  /* text-sm */
  flex-shrink: 0;
  /* Evita que los botones se encojan cuando no hay espacio */

  /* Tema de Color (Estado Inactivo) */
  background-color: #cbd5e1;
  /* Fondo gris slate-300 */
  color: var(--color-primary);
  /* Texto Azul Navy */

  /* Transiciones */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Estado Activo (Diseño Negativo / Troquelado) */
.nav-button.active {
  background-color: #ffffff;
  /* El interior del botón en color blanco */
  color: var(--color-title-component);
  /* Letra azul de fondo */

  /* Borde superior y derecho naranja corporativo */
  border-top: 7px solid #F97316;
  border-right: 7px solid #F97316;

  /* Borde izquierdo eliminado */
  border-left: none;
}

/* Estado Hover (solo para botones inactivos) */
.nav-button:hover:not(.active) {
  background-color: #94a3b8;
  /* Gris slate-400 */
}

/* Media query para tamaños de fuente responsivos */
@media (min-width: 640px) {
  .nav-button {
    font-size: 1rem;
    /* text-base */
  }
}