/* ================================================================
   categorias.css — variantes de la barra de categorías
   ----------------------------------------------------------------
   Se carga solo si TemaCarta.nav_* no está en los defaults (píldoras,
   emoji + texto, mediano, brillo, una fila): el look clásico sale
   entero de styles.css. El wrapper lleva las clases de
   TemaVista.nav_clases y scripts.js (renderCategoryTabs) arma cada
   botón con .cat-tab-media (foto / emoji / inicial) + .cat-tab-label.
   ================================================================ */

.category-tabs-wrapper { --nav-k: 1; }
.category-tabs-wrapper.nav-chico  { --nav-k: .85; }
.category-tabs-wrapper.nav-grande { --nav-k: 1.2; }

/* Color de la categoría elegida según su acento (CategoriaCarta.acento). */
.cat-tab.active-pink   { --tab-c: var(--c-primary-hi); --tab-solido: var(--c-primary); --tab-sobre: var(--c-on-primary); }
.cat-tab.active-yellow,
.cat-tab.active-cyan   { --tab-c: var(--c-accent);     --tab-solido: var(--c-accent);  --tab-sobre: var(--c-on-accent); }

/* ── Base común ────────────────────────────────────────────────── */
.category-tabs-wrapper .cat-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--nav-k));
  padding: calc(8px * var(--nav-k)) calc(18px * var(--nav-k));
  font-size: calc(13px * var(--fs) * var(--nav-k));
  line-height: 1.2;
}
.category-tabs-wrapper .cat-tab.solo-icono { padding-inline: calc(12px * var(--nav-k)); }
.cat-tab-media { display: inline-grid; place-items: center; flex-shrink: 0; line-height: 1; }
.cat-tab-emoji { font-size: 1.15em; }
.cat-tab-foto {
  width: calc(22px * var(--nav-k));
  height: calc(22px * var(--nav-k));
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-fg) 8%, transparent);
}
.cat-tab-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-tab-inicial { font-weight: 700; }

/* Solo emoji / solo foto en los estilos de una línea: el ícono más grande. */
.nav-contenido-emoji:not(.nav-circulos):not(.nav-tarjetas) .cat-tab-emoji { font-size: 1.5em; }
.nav-contenido-foto:not(.nav-circulos):not(.nav-tarjetas) .cat-tab-foto {
  width: calc(30px * var(--nav-k));
  height: calc(30px * var(--nav-k));
}

/* Foto de fondo con velo (el velo sigue al esquema: oscuro u claro). */
.category-tabs-wrapper .cat-tab.con-fondo {
  --cat-velo: color-mix(in srgb, var(--c-shade) 55%, transparent);
  background-image: linear-gradient(var(--cat-velo), var(--cat-velo)), var(--cat-foto);
  background-size: cover;
  background-position: center;
  color: var(--c-fg);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--c-shade) 70%, transparent);
  min-height: calc(40px * var(--nav-k));
}

/* ── Categoría elegida (no aplica a círculos: tienen la suya abajo) ── */
/* brillo = el clásico de styles.css, no necesita nada. */
.nav-activa-relleno:not(.nav-circulos) .cat-tab.is-active {
  background-color: var(--tab-solido);
  border-color: var(--tab-solido);
  color: var(--tab-sobre);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--tab-solido) calc(80% * var(--glow)), transparent);
  text-shadow: none;
}
.nav-activa-relleno:not(.nav-circulos) .cat-tab.is-active.con-fondo {
  --cat-velo: color-mix(in srgb, var(--tab-solido) 72%, transparent);
}
.nav-activa-borde:not(.nav-circulos) .cat-tab.is-active {
  background-color: transparent;
  border-color: var(--tab-c);
  color: var(--tab-c);
  box-shadow: inset 0 0 0 1px var(--tab-c);
}
.nav-activa-subrayado:not(.nav-circulos) .cat-tab.is-active {
  background-color: transparent;
  border-color: transparent;
  color: var(--tab-c);
  box-shadow: none;
}
.nav-activa-subrayado:not(.nav-circulos) .cat-tab.is-active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--tab-c);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tab-c) calc(60% * var(--glow)), transparent);
}
.nav-activa-borde .cat-tab.is-active.con-fondo,
.nav-activa-subrayado .cat-tab.is-active.con-fondo { color: var(--c-fg); }

/* ── Estilo: pestañas planas ───────────────────────────────────── */
.nav-pestanas .category-tabs { gap: 0; padding-block: 0; }
.nav-pestanas .cat-tab {
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  padding: calc(13px * var(--nav-k)) calc(14px * var(--nav-k));
}
.nav-pestanas .cat-tab:hover { border-color: transparent; }
.nav-pestanas.nav-activa-subrayado .cat-tab.is-active::after { left: 12%; right: 12%; bottom: 0; border-radius: 3px 3px 0 0; }

/* ── Estilo: chips cuadrados ───────────────────────────────────── */
.nav-chips .cat-tab {
  border-radius: calc(8px * var(--r));
  background: color-mix(in srgb, var(--c-fg) 7%, transparent);
  padding: calc(8px * var(--nav-k)) calc(14px * var(--nav-k));
}

/* ── Estilo: tarjetas con foto ─────────────────────────────────── */
.nav-tarjetas .category-tabs { gap: calc(8px * var(--nav-k)); }
.nav-tarjetas .cat-tab {
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(5px * var(--nav-k));
  width: calc(84px * var(--nav-k));
  padding: calc(5px * var(--nav-k)) calc(5px * var(--nav-k)) calc(7px * var(--nav-k));
  border-radius: calc(14px * var(--r));
  font-size: calc(11px * var(--fs) * var(--nav-k));
  white-space: normal;
  text-align: center;
}
.nav-tarjetas .cat-tab-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: calc(10px * var(--r));
  overflow: hidden;
  background: color-mix(in srgb, var(--c-fg) 7%, transparent);
  font-size: calc(26px * var(--nav-k));
}
.nav-tarjetas .cat-tab-label,
.nav-circulos .cat-tab-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.nav-tarjetas .cat-tab.con-fondo {
  --cat-velo: transparent;
  justify-content: flex-end;
  min-height: calc(78px * var(--nav-k));
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--c-shade) 80%, transparent), transparent 70%),
    var(--cat-foto);
}
.nav-tarjetas.nav-activa-relleno .cat-tab.is-active.con-fondo {
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--tab-solido) 92%, transparent), transparent 75%),
    var(--cat-foto);
}

/* ── Estilo: círculos tipo historias ───────────────────────────── */
.nav-circulos .category-tabs { gap: calc(10px * var(--nav-k)); padding-block: calc(10px * var(--nav-k)) calc(8px * var(--nav-k)); }
.category-tabs-wrapper.nav-circulos .cat-tab,
.category-tabs-wrapper.nav-circulos .cat-tab:hover {
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(6px * var(--nav-k));
  width: calc(72px * var(--nav-k));
  padding: 4px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: calc(11px * var(--fs) * var(--nav-k));
  white-space: normal;
  text-align: center;
  color: color-mix(in srgb, var(--c-fg) 75%, transparent);
}
.nav-circulos .cat-tab-media {
  width: calc(58px * var(--nav-k));
  height: calc(58px * var(--nav-k));
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-fg) 8%, transparent);
  font-size: calc(26px * var(--nav-k));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-fg) 16%, transparent);
  transition: box-shadow .2s, transform .2s;
}
.nav-circulos .cat-tab-inicial { font-family: var(--font-display); font-size: calc(22px * var(--nav-k)); color: var(--c-fg); }
.category-tabs-wrapper.nav-circulos .cat-tab.is-active { color: var(--tab-c); }
.nav-circulos .cat-tab.is-active .cat-tab-media {
  box-shadow: 0 0 0 2px var(--c-bg-deep), 0 0 0 4px var(--tab-c),
              0 0 18px -2px color-mix(in srgb, var(--tab-c) calc(70% * var(--glow)), transparent);
  transform: scale(1.04);
}
.nav-circulos.nav-activa-borde .cat-tab.is-active .cat-tab-media {
  box-shadow: 0 0 0 2px var(--c-bg-deep), 0 0 0 4px var(--tab-c);
}
.nav-circulos.nav-activa-relleno .cat-tab.is-active .cat-tab-label {
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--tab-solido);
  color: var(--tab-sobre);
}
.nav-circulos.nav-activa-subrayado .cat-tab.is-active .cat-tab-label {
  text-decoration: underline 2px var(--tab-c);
  text-underline-offset: 4px;
}

/* ── Distribución: dos filas que se deslizan juntas ────────────── */
.nav-dos-filas .category-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  justify-content: start;
}