/**
 * P-08 · Barra de pestañas del módulo — .scm-ui-tabs
 *
 * Sustituye a .srv-tabs/.srv-tab, .scm-evt-cal-tab, .scm-tab-btn,
 * .kids-nav__tab, .src-tab, .srv-public-tab.
 *
 * Opción C (tarjetas con dato) es la elegida y el comportamiento por defecto,
 * válida con 3 a 5 pestañas.
 * Opción A (píldoras en contenedor) queda autorizada como excepción única para
 * módulos con 6 o más pestañas: se pide con .scm-ui-tabs--pills.
 *
 * Regla común: prohibido el scroll horizontal en móvil. Todas visibles, todas
 * clicables, todas del mismo ancho.
 *
 * La pestaña activa nunca usa relleno azul sólido: relleno sólido de marca es
 * acción, relleno suave es estado. Las clases de estado que conmuta el
 * JavaScript se estilan con selector compuesto (.scm-ui-tab.is-active).
 */

/* ══ Opción C · tarjetas con dato (por defecto) ═══════════════════ */
.scm-ui-tabs {
  display: grid;
  grid-template-columns: repeat(var(--scm-ui-tabs-n, 4), 1fr);
  gap: 10px;
  margin-bottom: var(--scm-ui-sp-6);
}

.scm-ui-tab {
  display: flex;
  align-items: center;
  gap: var(--scm-ui-sp-3);
  height: 76px;
  padding: 0 15px;
  border: 1px solid var(--scm-ui-line);
  border-radius: var(--scm-ui-r-md);
  background: var(--scm-ui-surface);
  color: var(--scm-ui-text);
  font-family: var(--scm-ui-font);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.scm-ui-tab__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--scm-ui-blue-50);
  color: var(--scm-ui-blue-600);
}

.scm-ui-tab__ic :where(svg) { width: 17px; height: 17px; }
.scm-ui-tab__ic :where(.material-icons-round) { font-size: 19px; line-height: 1; }

.scm-ui-tab__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scm-ui-tab__name {
  font-size: var(--scm-ui-fs-body);
  font-weight: var(--scm-ui-fw-strong);
  letter-spacing: var(--scm-ui-lsp-body);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scm-ui-tab__data {
  font-size: 12.5px;
  font-weight: var(--scm-ui-fw-med);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--scm-ui-text-3);
}

.scm-ui-tab:hover {
  border-color: var(--scm-ui-line-strong);
}

.scm-ui-tab.is-active {
  border-color: var(--scm-ui-blue-500);
  box-shadow: 0 0 0 3px rgba(0,123,238,.10);
}

.scm-ui-tab.is-active .scm-ui-tab__ic {
  background: var(--scm-ui-grad-control);
  color: #FFFFFF;
}

.scm-ui-tab:focus-visible {
  outline: 2px solid var(--scm-ui-blue-500);
  outline-offset: 2px;
}

/* ══ Opción A · píldoras en contenedor ════════════════════════════
   Excepción autorizada únicamente para módulos con 6 o más pestañas. */
.scm-ui-tabs--pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scm-ui-sp-1);
  padding: 4px;
  border: 1px solid var(--scm-ui-line);
  border-radius: var(--scm-ui-r-md);
  background: var(--scm-ui-surface);
}

.scm-ui-tabs--pills .scm-ui-tab {
  flex: 1 1 auto;
  justify-content: center;
  gap: 9px;
  height: var(--scm-ui-h-control);
  padding: 0 16px;
  border: 0;
  border-radius: var(--scm-ui-r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--scm-ui-text-2);
  font-size: var(--scm-ui-fs-body);
  font-weight: var(--scm-ui-fw-med);
  letter-spacing: var(--scm-ui-lsp-body);
}

.scm-ui-tabs--pills .scm-ui-tab :where(svg) { width: 17px; height: 17px; }
.scm-ui-tabs--pills .scm-ui-tab :where(.material-icons-round) { font-size: 18px; line-height: 1; }

.scm-ui-tabs--pills .scm-ui-tab:hover {
  background: var(--scm-ui-surface-2);
  color: var(--scm-ui-text);
}

.scm-ui-tabs--pills .scm-ui-tab.is-active {
  background: var(--scm-ui-blue-50);
  box-shadow: none;
  color: var(--scm-ui-blue-600);
}

/* ══ Móvil — regla común a las dos opciones ═══════════════════════
   Todas del mismo ancho, sin scroll. Ícono arriba, etiqueta debajo. */
@media (max-width: 768px) {
  .scm-ui-tabs,
  .scm-ui-tabs--pills {
    display: grid;
    grid-template-columns: repeat(var(--scm-ui-tabs-n-sm, var(--scm-ui-tabs-n, 4)), 1fr);
    gap: var(--scm-ui-sp-1);
  }

  .scm-ui-tabs .scm-ui-tab,
  .scm-ui-tabs--pills .scm-ui-tab {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    height: auto;
    padding: var(--scm-ui-sp-2) var(--scm-ui-sp-1);
    text-align: center;
  }

  .scm-ui-tabs .scm-ui-tab__ic {
    width: auto;
    height: auto;
    background: transparent;
    color: inherit;
  }

  .scm-ui-tabs .scm-ui-tab.is-active .scm-ui-tab__ic {
    background: transparent;
    color: var(--scm-ui-blue-600);
  }

  .scm-ui-tab__ic :where(svg) { width: 19px; height: 19px; stroke-width: 1.8; }
  .scm-ui-tab__ic :where(.material-icons-round) { font-size: 21px; }

  /* Etiqueta de pestaña móvil bajo el ícono: 11px, una de las dos únicas
     excepciones al mínimo de 12px del sistema. */
  .scm-ui-tab__name {
    font-size: 11px;
    font-weight: var(--scm-ui-fw-med);
    white-space: normal;
    overflow: visible;
  }

  .scm-ui-tab__data {
    font-size: var(--scm-ui-fs-row);
    font-weight: var(--scm-ui-fw-title);
    color: var(--scm-ui-text);
  }

  /* Variante C en móvil: el número reemplaza al ícono. */
  .scm-ui-tabs:not(.scm-ui-tabs--pills) .scm-ui-tab {
    min-height: 66px;
  }
  .scm-ui-tabs:not(.scm-ui-tabs--pills) .scm-ui-tab--hasdata .scm-ui-tab__ic {
    display: none;
  }
}