/* ==========================================================================
   bb2026 — COMPONENTES
   Recurso firma (.bb-tag), botones, enlaces y piezas reutilizables.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RECURSO FIRMA: caja-etiqueta cuadrada 120x120 (96x96 en movil).
   Se ancla a una esquina de un panel de imagen y DESBORDA su borde
   a proposito para romper la reticula.
   Uso: <span class="bb-tag bb-tag--bl">Texto</span> dentro de .bb-panel
   -------------------------------------------------------------------------- */
.bb-tag {
  position: absolute;
  z-index: 3;
  width: var(--bb-tag-size);
  height: var(--bb-tag-size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bb-s1);
  background: var(--bb-paper);
  /* Sobre papel NO puede ir --bb-label (2.19:1, no cumple AA). Iba asi y
     era la otra mitad del "no se lee bien": tamano corto y contraste
     bajo a la vez. Con --bb-body sube a 6.94:1. */
  color: var(--bb-body);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-tag);
  line-height: 1.5;
  /* El letter-spacing final deja un hueco a la derecha: lo compensamos */
  text-indent: var(--bb-track-tag);

  /* Desborde de la caja respecto al borde de su contenedor.
     El horizontal va a 0 POR DEFECTO: es la unica opcion segura, porque
     desbordar solo cabe si el contenedor esta metido hacia dentro respecto
     al viewport. Si el borde del contenedor ES el borde de la pantalla
     (panel a sangre, columna que llega al borde), desbordar sacaria la caja
     de la vista y provocaria scroll horizontal.
     Para activarlo donde SI cabe se usa el modificador .bb-tag--out.
     El vertical se mantiene: no genera scroll y es parte del recurso. */
  --bb-tag-out-x: 0%;
  --bb-tag-out-y: 25%;
}

/* Anclaje en la esquina. El desborde sale de las dos variables, nunca de
   valores escritos a mano: asi un panel nuevo hereda el comportamiento
   seguro sin tener que acordarse de nada. */
.bb-tag--bl { bottom: 0; left: 0; transform: translate(calc(var(--bb-tag-out-x) * -1), var(--bb-tag-out-y)); }
.bb-tag--br { bottom: 0; right: 0; transform: translate(var(--bb-tag-out-x), var(--bb-tag-out-y)); }
.bb-tag--tl { top: 0; left: 0; transform: translate(calc(var(--bb-tag-out-x) * -1), calc(var(--bb-tag-out-y) * -1)); }
.bb-tag--tr { top: 0; right: 0; transform: translate(var(--bb-tag-out-x), calc(var(--bb-tag-out-y) * -1)); }

/* Opt-in del desborde horizontal. SOLO en contenedores metidos hacia
   dentro (la caja de texto del manifiesto, la columna de la foto de la
   presentacion...). En un panel cuyo borde coincide con el del viewport
   no se pone: se quedaria fuera de pantalla. */
.bb-tag--out { --bb-tag-out-x: 25%; }

/* En pantallas estrechas hay menos margen: reducimos el desborde. */
@media (max-width: 767px) {
  .bb-tag--out { --bb-tag-out-x: 12%; }
}

/* Variante sobre acento */
.bb-tag--accent { background: var(--bb-accent); color: var(--bb-paper); }
.bb-tag--ink { background: var(--bb-ink); color: var(--bb-paper); }

/* --------------------------------------------------------------------------
   VARIANTE PUNTUACION de la caja-etiqueta (.bb-tag--score).

   La usa la seccion de reseñas. A diferencia del resto de cajas, aqui el
   contenido NO es una micro-etiqueta: es un DATO, y la clienta lo quiere
   grande, en negrita y con estrella. Va en dos lineas dentro de la misma
   caja de 120px (108px en movil), sin tocar --bb-tag-size.

   MEDIDO con las Jost autoalojadas (suma de advances + letter-spacing por
   caracter). Ancho util = lado - 2 x padding(8px):
     escritorio 120 - 16 = 104px   movil 108 - 16 = 92px

   Linea 1 = estrella (0,7em) + hueco (0,16em) + "4,7" (Jost 700):
     40px ->  28,00 +  6,40 + 59,04 =  93,44px  sobre 104px  holgura 10,56
     34px ->  23,80 +  5,44 + 50,18 =  79,42px  sobre  92px  holgura 12,58
   Linea 2 = "/ 5" (Jost 300, 0.06em):
     16px -> 24,64px      14px -> 21,56px        cabe de sobra

   Alto: 40 x 0,95 + 2 + 16 x 1,2 = 57,2px sobre 104px utiles de alto.
   -------------------------------------------------------------------------- */
.bb-tag--score {
  flex-direction: column;
  gap: 2px;
  /* La micro-etiqueta va en mayusculas y muy espaciada; un dato numerico
     no. Se anulan los tres ajustes heredados de .bb-tag. */
  text-transform: none;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  /* Protagonista: --bb-ink sobre papel = 15,82:1. */
  color: var(--bb-ink);
}

/* La cifra y la estrella, en la misma linea y alineadas por el centro. */
.bb-tag__scoreline {
  display: flex;
  align-items: center;
  gap: 0.16em;
  font-weight: 700;
  font-size: 2.125rem;   /* 34px */
  letter-spacing: 0.02em;
  line-height: 0.95;
}

/* Estrella: SVG inline, del mismo color que la cifra (currentColor) y
   dimensionada en em para que siga a la tipografia. Es decorativa: el
   texto ya dice la puntuacion, asi que va aria-hidden desde el PHP. */
.bb-tag__star {
  flex: 0 0 auto;
  width: 0.7em;
  height: 0.7em;
  fill: currentColor;
}

/* El "/ 5" queda discreto para que la cifra destaque: mas pequeño, mas
   ligero y en el gris de texto. */
.bb-tag__scale {
  font-weight: 300;
  font-size: 0.875rem;   /* 14px */
  letter-spacing: 0.06em;
  color: var(--bb-body);
}

@media (min-width: 768px) {
  /* La caja pasa de 108 a 120px: la cifra sube con ella. */
  .bb-tag--score .bb-tag__scoreline { font-size: 2.5rem; }  /* 40px */
  .bb-tag--score .bb-tag__scale { font-size: 1rem; }        /* 16px */
}

/* --------------------------------------------------------------------------
   BOTONES Y ENLACES
   -------------------------------------------------------------------------- */
.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-s1);
  padding: var(--bb-s2) var(--bb-s3);
  border: 1px solid var(--bb-ink);
  color: var(--bb-ink);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: background 0.35s var(--bb-ease), color 0.35s var(--bb-ease), border-color 0.35s var(--bb-ease);
}
.bb-btn:hover, .bb-btn:focus-visible {
  background: var(--bb-ink);
  color: var(--bb-paper);
}
.bb-btn--accent { border-color: var(--bb-accent); color: var(--bb-accent); }
.bb-btn--accent:hover, .bb-btn--accent:focus-visible { background: var(--bb-accent); color: var(--bb-paper); }
.bb-btn--light { border-color: var(--bb-paper); color: var(--bb-paper); }
.bb-btn--light:hover, .bb-btn--light:focus-visible { background: var(--bb-paper); color: var(--bb-ink); }

/* Enlace con subrayado animado */
.bb-link {
  position: relative;
  display: inline-block;
}
.bb-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--bb-ease);
}
.bb-link:hover::after, .bb-link:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   MICRO PIEZAS
   -------------------------------------------------------------------------- */

/* Regla fina con etiqueta */
.bb-rule {
  display: flex;
  align-items: center;
  gap: var(--bb-s2);
  margin-bottom: var(--bb-s3);
}
.bb-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--bb-ink-soft);
}

/* Numero de orden editorial */
.bb-index {
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--bb-label);
}

/* Iconos sociales */
.bb-social {
  display: flex;
  align-items: center;
  gap: var(--bb-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-social a {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.75;
  transition: opacity 0.3s var(--bb-ease), transform 0.3s var(--bb-ease);
}
.bb-social a:hover, .bb-social a:focus-visible { opacity: 1; transform: translateY(-2px); }
.bb-social svg { width: 16px; height: 16px; fill: currentColor; }

/* --------------------------------------------------------------------------
   CONTENIDO EDITABLE (the_content) — estilos por defecto sobrios
   -------------------------------------------------------------------------- */
.bb-prose { font-size: var(--bb-size-body); line-height: 1.76; }
.bb-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-top: var(--bb-s4); text-transform: uppercase; letter-spacing: 0.03em; }
.bb-prose h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: var(--bb-s3); }
.bb-prose a { color: var(--bb-accent); text-decoration: underline; text-underline-offset: 3px; }
.bb-prose img { margin-block: var(--bb-s4); }
.bb-prose figcaption { font-size: 0.8125rem; color: var(--bb-label); margin-top: var(--bb-s1); }

/* --------------------------------------------------------------------------
   BUSCADOR
   -------------------------------------------------------------------------- */
.bb-search { display: flex; gap: var(--bb-s1); align-items: stretch; }
.bb-search__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--bb-s2);
  background: var(--bb-white);
  border: 1px solid var(--bb-ink-soft);
  color: var(--bb-ink);
}
.bb-search__submit {
  padding: var(--bb-s2) var(--bb-s3);
  background: var(--bb-ink);
  color: var(--bb-paper);
  font-family: var(--bb-font-display);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   PAGINA 404 / ESTADOS VACIOS
   -------------------------------------------------------------------------- */
.bb-empty { padding-block: var(--bb-s6); text-align: center; }
.bb-empty .bb-lyric { margin-block: var(--bb-s3); }