/* =====================================================================
   Ruta en GitHub : frontend/css/componentes/pestanas.css
   Proyecto       : DR ORGANICS - Sistema Administrativo y Financiero
   Descripción    : Pestañas para dividir una pantalla en secciones.
   ===================================================================== */


.pestanas {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--borde);
}


.pestana {
  position: relative;
  height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-tenue);
  white-space: nowrap;
  transition: color var(--transicion);
}


.pestana:hover,
.pestana[aria-selected="true"] {
  color: var(--verde-bosque);
}


/* Línea verde bajo la pestaña elegida. */
.pestana[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--verde-hoja);
}