/* ============================================================
   css/pages/viz_especificas.css — cartel del SuperManager de Específicas.

   1024 × 1280 = 4:5 exacto, que es la proporción vertical más alta que X enseña
   entera en el timeline.

   Todo lo que se vea DENTRO de #captureArea tiene que estar aquí: la captura
   clona la tarjeta sin rincon.css, así que no valen las clases del sitio (ni
   .btn, ni .card, ni las banderas, que son background-image y no saldrían).
   ============================================================ */

#captureArea {
  width: 1024px; height: 1280px;
  background: #F8F7F3;
  font-family: 'Inter', system-ui, sans-serif;
  color: #131C2E;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#captureArea * { box-sizing: border-box; }

/* ---------- Cabecera ---------- */
#captureArea .ve-top {
  background: linear-gradient(120deg, #131C2E 0%, #1A2740 60%, #23345A 100%);
  color: #fff; padding: 18px 40px;
  display: flex; align-items: center; gap: 14px;
}
#captureArea .ve-top img { display: block; }
#captureArea .ve-top__txt { font-size: 19px; font-weight: 700; flex: 1 1 auto; }
#captureArea .ve-top__temp { font-size: 16px; font-weight: 600; color: #98A3B8; }

/* ---------- Cuerpo ---------- */
/* Sin space-between: el sobrante se lo queda la REJILLA, y dentro de ella las
   fotos. En un cartel, el hueco que sobra vale más como cara grande que como aire
   repartido entre bloques. */
#captureArea .ve-body {
  flex: 1 1 auto; padding: 34px 40px 26px;
  display: flex; flex-direction: column; gap: 22px; justify-content: space-between;
}

/* Titular a la izquierda y chapa a la derecha: ese hueco estaba vacío y lo que
   mejor lo llena son las dos cifras que empujan a apuntarse. */
#captureArea .ve-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
#captureArea .ve-chapa {
  flex: 0 0 auto; background: #fff; border: 2px solid #E3E1D8;
  border-top: 7px solid #F0A23C; border-radius: 14px;
  padding: 18px 22px; text-align: center; min-width: 190px;
  display: flex; flex-direction: column; align-items: center;
}
#captureArea .ve-chapa__n {
  font-size: 52px; font-weight: 900; line-height: 1; color: #C07C1D; letter-spacing: -.03em;
}
#captureArea .ve-chapa__l {
  font-size: 15px; font-weight: 600; line-height: 1.25; color: #5B6577; margin-top: 6px;
}
#captureArea .ve-chapa__sep {
  width: 46px; height: 2px; background: #E3E1D8; margin: 14px 0 12px;
}
#captureArea .ve-chapa__plazo {
  font-size: 15px; font-weight: 500; line-height: 1.3; color: #5B6577;
}
#captureArea .ve-chapa__plazo b { display: block; color: #131C2E; font-weight: 700; font-size: 16px; }

#captureArea .ve-tit {
  font-size: 68px; font-weight: 900; line-height: .98;
  letter-spacing: -.035em; margin: 0 0 16px;
}
/* «de Específicas» en ámbar: es la palabra que distingue esto del juego oficial. */
#captureArea .ve-tit em { font-style: normal; color: #C07C1D; }

#captureArea .ve-sub {
  font-size: 22px; line-height: 1.42; color: #5B6577;
  max-width: 38ch; margin: 0;
}

/* ---------- Las cuatro columnas ---------- */
/* align-items: start · las tarjetas se ajustan a su contenido. Sin esto, la
   rejilla las estiraba a la altura de la caja y quedaba un vacío blanco debajo de
   los nombres. */
#captureArea .ve-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  align-items: start;
}
#captureArea .ve-cat {
  background: #fff; border: 2px solid #E3E1D8; border-top: 7px solid var(--c);
  border-radius: 14px; padding: 0 0 16px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#captureArea .ve-cat--anot { --c: #C05621; }
#captureArea .ve-cat--reb  { --c: #2563EB; }
#captureArea .ve-cat--asis { --c: #059669; }
#captureArea .ve-cat--trip { --c: #7C3AED; }

/* Alto fijo, y a propósito: con `flex: 1 1 auto` la foto se estiraba hasta una
   tira de 1:2,3 que no hay manera de recortar de una foto de acción normal. A
   400 px el hueco es 225 × 400 (1:1,78), que sí sale de cualquier vertical
   decente. Fuente ideal: 460 × 820 o más, con la cabeza en el tercio de arriba. */
#captureArea .ve-cat__foto {
  width: 100%; flex: 0 0 400px; background: #F4F4F5;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
/* Las fotos de acción ya vienen recortadas a la proporción del hueco (338 × 600
   para 225 × 400), así que entran enteras. El object-position sigue anclado arriba
   por si en alguna columna toca caer al retrato de la librería, donde la cara está
   en el tercio superior y un centrado la corta por la frente. */
#captureArea .ve-cat__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  display: block;
}
#captureArea .ve-cat__ini {
  font-size: 46px; font-weight: 800; color: #B9B5A8; align-self: center;
}

#captureArea .ve-cat__nom {
  font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--c);
  margin: 14px 0 8px; padding: 0 8px; line-height: 1.1;
}
#captureArea .ve-cat__jug {
  font-size: 19px; font-weight: 700; line-height: 1.15; padding: 0 8px;
}
#captureArea .ve-cat__dato { font-size: 16px; font-weight: 600; color: #5B6577; margin-top: 3px; }

/* La columna del día: se levanta con el color de su competición. */
#captureArea .ve-cat.is-lead { border-color: var(--c); box-shadow: 0 6px 22px rgba(19,28,46,.13); }
#captureArea .ve-cat.is-lead .ve-cat__jug { color: var(--c); }

/* ---------- Reglas ---------- */
#captureArea .ve-reglas { margin: 0; padding: 0; list-style: none; }
#captureArea .ve-reglas li {
  font-size: 18px; line-height: 1.45; color: #5B6577;
  padding-left: 26px; position: relative; margin-bottom: 7px;
}
#captureArea .ve-reglas li::before {
  content: ""; position: absolute; left: 5px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: #C07C1D;
}
#captureArea .ve-reglas b { color: #131C2E; font-weight: 700; }

/* ---------- Pie ---------- */
#captureArea .ve-foot {
  background: #131C2E; color: #fff; padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
#captureArea .ve-foot__izq { display: flex; flex-direction: column; gap: 5px; }
#captureArea .ve-foot__url { font-size: 22px; font-weight: 700; }
#captureArea .ve-foot__aviso { font-size: 13.5px; font-weight: 500; color: #8792A6; }
#captureArea .ve-foot__x { font-size: 17px; color: #98A3B8; align-self: flex-end; }

/* ---------- Fuera de la captura ---------- */
.ve-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ve-switch__i {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface);
}
.ve-switch__i:hover { background: var(--hover); text-decoration: none; }
.ve-switch__i.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.ve-nota { margin-top: 10px; font-size: 12.5px; }
.ve-nota code { font-size: 12px; background: var(--zebra); padding: 2px 5px; border-radius: 5px; }