/* ============================================================
   HME84 Tabs & Components — sistema de navegación y filtros
   Draft 01 · hme84_co_v2
   ============================================================ */

/* ── A. Navegación Principal ── */
/* Tabs con underline naranja para nav horizontal */
.nav-tabs {
  display: flex;
  gap: var(--space-lg);
  border-bottom: 0.5px solid var(--border);
}

.nav-tab {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.nav-tab:hover {
  color: var(--text-primary);
  border-bottom-color: rgba(232, 112, 45, 0.35);
}

.nav-tab.active,
.nav-tab[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* ── B. Tabs Internas (pills/capsule) ── */
/* Filtros de sección: Assessment, Stack Review, Build ligero */
.inner-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inner-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  text-decoration: none;
  white-space: nowrap;
}

.inner-tab:hover {
  border-color: rgba(232, 112, 45, 0.45);
  color: var(--text-primary);
}

.inner-tab.active,
.inner-tab[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: #0C0E15;
  font-weight: 500;
}

/* ── C. Filter Chips ── */
/* Filtros de contenido: Todos, AI/Data, Brand, Web, Lab */
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-chip {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: rgba(232, 112, 45, 0.4);
  color: var(--text-primary);
}

.filter-chip.active,
.filter-chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── D. Process Tabs — nodos numerados ── */
/* Complemento de hme84-path.css: estilo de nodo como círculo numerado */
/* Se aplica a .hme84-method-node cuando contiene texto */
.hme84-method-node {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(232, 112, 45, 0.45);
  background: rgba(232, 112, 45, 0.06);
  color: rgba(232, 112, 45, 0.9);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
  box-shadow: 0 0 0 0 rgba(232, 112, 45, 0);
  transition: box-shadow 0.2s;
}

/* Nodo activo (hover del step padre) */
.hme84-method-step:hover .hme84-method-node {
  border-color: rgba(232, 112, 45, 0.75);
  box-shadow: 0 0 12px rgba(232, 112, 45, 0.14);
}

/* ── E. Status Tabs ── */
/* Indicador de estado de proyecto: Discovery → Delivered */
.status-tabs {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.status-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.3));
  cursor: default;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, box-shadow 0.2s;
}

.status-tab.active .status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 112, 45, 0.18);
}

.status-tab.active {
  color: var(--text-secondary);
}

.status-tab.done .status-dot {
  background: rgba(232, 112, 45, 0.35);
}

/* ── F. CTA Chips / Intención ── */
/* Acciones rápidas de intención: Revisar mi stack, Lanzar una web */
.cta-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cta-chip {
  padding: 7px 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  text-decoration: none;
  white-space: nowrap;
}

.cta-chip:hover {
  border-color: rgba(232, 112, 45, 0.5);
  color: var(--text-primary);
}

.cta-chip.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── G. Content Switcher ── */
/* Toggle Simple / Técnico */
.content-switcher {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.switcher-btn {
  padding: 6px 18px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  position: relative;
}

.switcher-btn + .switcher-btn {
  border-left: 1px solid var(--border);
}

.switcher-btn.active {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.switcher-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--accent);
}

/* ── H. Product Mode Tabs ── */
/* Selector de modo de producto (The Little True, A Slap of Miranda, etc.) */
.product-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.product-tab {
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}

.product-tab:hover {
  border-color: rgba(232, 112, 45, 0.4);
  color: var(--text-primary);
}

.product-tab.active {
  background: rgba(232, 112, 45, 0.1);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ── Colores de estado ── */
:root {
  --state-ok:      #4CAF50;           /* Activo / confirmación */
  --state-brand:   rgba(232,112,45,1);/* Path / identidad HME84 */
  --state-neutral: rgba(160,160,160,1);/* Pendiente / neutro / inactivo */
  --state-risk:    var(--red, #AA2E36);/* Alerta / error */
}

/* ── States transversales ── */
[class*="-tab"]:focus-visible,
[class*="-chip"]:focus-visible,
.switcher-btn:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
}

[class*="-tab"][disabled],
[class*="-chip"][disabled],
[class*="-tab"].disabled,
[class*="-chip"].disabled,
.switcher-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Pattern de fondo (path como textura) ── */
/* Uso: añadir clase .hme84-bg-pattern a cualquier sección */
.hme84-bg-pattern {
  position: relative;
}

.hme84-bg-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 28px,
      rgba(232, 112, 45, 0.025) 28px,
      rgba(232, 112, 45, 0.025) 29px
    );
  pointer-events: none;
  z-index: 0;
}

.hme84-bg-pattern > * {
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .status-tabs {
    gap: var(--space-md);
  }

  .inner-tabs,
  .filter-chips,
  .cta-chips,
  .product-tabs {
    gap: 6px;
  }

  .inner-tab,
  .filter-chip,
  .cta-chip {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [class*="-tab"],
  [class*="-chip"],
  .switcher-btn,
  .status-dot {
    transition: none;
  }
}