/* ===== Confido Tabs ===== */

/* Contenedor de pestañas (pills) */
.confido-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* Pestaña por defecto (usa clases internas .tab y .tab--selected de dcc.Tabs) */
.confido-tabs .tab,
.confido-tab {
  background: #f7f9fc;
  color: #2c3e50;
  border: 1px solid #e9ecef !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  cursor: pointer;
}

/* Hover */
.confido-tabs .tab:hover,
.confido-tab:hover {
  background: #eef3f8;
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
}

/* Pestaña seleccionada */
.confido-tabs .tab--selected,
.confido-tab--selected {
  background: #eaf2fb !important;     /* azul muy claro */
  color: #2c3e50 !important;          /* texto legible */
  border-color: #cfe0f5 !important;
  box-shadow: 0 3px 10px rgba(16,24,40,.10);
  transform: translateY(-1px);
}

/* Quita borde inferior por defecto de dcc.Tabs */
.confido-tabs .tab {
  border-bottom: 1px solid #e9ecef !important;
}

/* Contenedor del contenido de pestañas */
.confido-tab-content {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* Responsivo: más compacto en pantallas pequeñas */
@media (max-width: 576px) {
  .confido-tabs {
    gap: 6px;
    padding: 6px;
  }
  .confido-tabs .tab,
  .confido-tab {
    padding: 8px 12px !important;
    font-size: 0.9rem;
  }
}

/* ===== Forzar 1 sola fila y que se ajusten ===== */

/* El contenedor interno de tabs de dcc.Tabs a flex, una sola línea */
.confido-tabs .tab-container,
.confido-tabs .tab-parent {
  display: flex;
  flex-wrap: nowrap;     /* NO envolver a segunda línea */
  gap: 8px;
  align-items: stretch;
  overflow-x: hidden;    /* evita scroll horizontal; ver alternativa abajo */
}

/* Cada pestaña ocupa espacio proporcional y puede encogerse */
.confido-tabs .tab,
.confido-tab {
  flex: 1 1 0;           /* repartir ancho entre todas */
  min-width: 0;          /* permitir que se encojan */
  text-align: center;
  white-space: nowrap;   /* no cortar en varias líneas */
  overflow: hidden;      /* ocultar exceso */
  text-overflow: ellipsis; /* "…" si el texto no cabe */
}