/* Pestañas de tareas locales: botón clásico de administración.
   Markup: templates/navigation/menu-local-tasks.html.twig.

   QUÉ ES Y QUÉ NO ES. Estos controles sólo los ve el editor con sesión
   iniciada, encima de la ficha. Ni la píldora de Gin (32 px, radio 32, sin
   filete, fondo teñido en la activa) ni el `.c-button` de marca (44 px,
   MAYÚSCULAS con tracking .28em, fuente display): un rectángulo con filete de
   1 px, radio del sistema y el texto TAL CUAL VIENE. Lo que lo hace «de
   administración» y no «de marca» es precisamente la ausencia de versalitas y
   de tracking — con ellas, «GESTIONAR PRESENTACIÓN» se come media fila y una
   herramienta interna acaba pesando más que el contenido.

   Colores, filete y radio salen de los mismos tokens que el resto, así que las
   pestañas cambian de paleta con la división igual que todo lo demás. */

/* ——— La banda ———
   Copia literal de la receta de .c-breadcrumb (breadcrumb.css:3), que resuelve
   el mismo problema: el bloque cuelga de la región `highlighted`, que va FUERA
   de .l-container, así que sin esto la fila arranca en x=0 mientras las migas
   de debajo empiezan en el gutter. Con esto quedan a plomo. */
.c-tabs {
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) 0;
}

.c-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.c-tabs__list > li {
  margin: 0;
  padding: 0;
}

/* ——— El botón ———
   min-height 44px no es capricho: es el suelo táctil que este proyecto ya se
   impone en la portada ([PORTE 4] de home-limpia.css) y que mide su arnés de
   viewports (TACTIL_MIN). El relleno lateral, en cambio, es un tercio del que
   gasta .c-button: aquí caben seis pestañas en una fila y allí no. */
.c-tabs__list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--div-line);
  border-radius: var(--radius-xs);
  background: transparent;
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  line-height: 1.2;
  text-decoration: none;
  color: var(--div-ink);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

/* Mismo gesto que .c-button: el filete y el texto viran al acento. */
.c-tabs__list > li > a:hover,
.c-tabs__list > li > a:focus-visible {
  border-color: var(--div-accent-strong);
  color: var(--div-accent-strong);
  text-decoration: none;
}

.c-tabs__list > li > a:focus-visible {
  outline: 2px solid var(--div-accent-strong);
  outline-offset: 2px;
}

/* Activa: la inversión que el tema ya usa para «esto está seleccionado»
   (.c-button--primary:hover). La clase la pone Drupal en el <a>, no en el <li>
   — ver LocalTaskDefault:110 —, de ahí que se estile aquí y no en el elemento
   de lista. */
.c-tabs__list > li > a.is-active {
  border-color: var(--div-accent-strong);
  background: var(--div-accent-strong);
  color: var(--div-bg);
}

.c-tabs__list > li > a.is-active:hover,
.c-tabs__list > li > a.is-active:focus-visible {
  background: var(--div-ink);
  border-color: var(--div-ink);
  color: var(--div-bg);
}

/* ——— Acciones locales («Añadir contenido»…) ———
   Markup: templates/block/block--local-actions-block.html.twig, que además de
   dar la clase tiene que CERRAR LA LISTA: core devuelve `<li>` sueltos dentro
   de un `<nav>`, sin `<ul>` (LocalActionsBlock::build() entrega el array de
   `menu_local_action` tal cual).

   Mismo botón, pero con el contorno de acento: no son navegación, son acciones
   de «añadir», y van justo encima de las pestañas neutras. Es la misma pareja
   que el sistema ya usa en .c-button --ghost / --primary. */
.c-tabs--acciones .c-tabs__list > li > a {
  border-color: var(--div-accent-strong);
  color: var(--div-accent-strong);
}

.c-tabs--acciones .c-tabs__list > li > a:hover,
.c-tabs--acciones .c-tabs__list > li > a:focus-visible {
  background: var(--div-accent-strong);
  border-color: var(--div-accent-strong);
  color: var(--div-bg);
}

/* ——— Subpestañas ———
   Cuando hay dos niveles (p. ej. en el perfil de usuario) el segundo no puede
   pesar lo mismo que el primero: se queda sin filete, más pequeño, y sólo la
   activa se marca con el acento. */
.c-tabs--secundarias {
  padding-block-start: var(--space-2);
}

.c-tabs--secundarias .c-tabs__list > li > a {
  min-height: 36px;
  padding-inline: var(--space-3);
  border-color: transparent;
  font-size: var(--fs-label);
  color: var(--div-ink-soft);
}

.c-tabs--secundarias .c-tabs__list > li > a.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--div-accent-strong);
  text-decoration: underline;
  text-underline-offset: .35em;
}

@media (prefers-reduced-motion: reduce) {
  .c-tabs__list > li > a {
    transition: none;
  }
}