/* =============================================================
   Oráculo PE — hoja de la web pública.
   Los colores NO se inventan aquí: son los mismos tokens que la
   app ya usa en ApplicationIos/oraculo_myl/Components/AppTokens.swift
   (y su espejo Flutter en lib/core/theme/app_tokens.dart).
   Si cambias un valor acá, cámbialo en los tres.

   Dirección visual: "el grimorio". El sitio es el tomo que dibuja
   el logo — manda la tipografía, no las tarjetas: índice con puntos
   guía, capitular, filete doble de oro, notas al margen.
   ============================================================= */

:root {
  /* Fondo: la noche sobre la que se construye todo. */
  --ora-noche: #0D1224;
  --ora-noche-elevada: #1A213D;
  --ora-mistico-inicio: #142966;
  --ora-mistico-fin: #2E0F4C;

  /* Marca: el oro del logo. */
  --ora-oro: #FFBF33;
  --ora-oro-brillo: #FFDB59;
  --ora-oro-ambar: #D98C1F;

  /* Superficies: blanco translúcido sobre el fondo, nunca gris opaco. */
  --ora-superficie: rgba(255, 255, 255, 0.08);
  --ora-superficie-elevada: rgba(255, 255, 255, 0.12);

  /* Contornos. */
  --ora-borde-sutil: rgba(255, 255, 255, 0.15);
  --ora-borde: rgba(255, 255, 255, 0.25);
  --ora-borde-oro: rgba(255, 191, 51, 0.35);

  /* Texto sobre fondo oscuro. */
  --ora-texto: #FFFFFF;
  --ora-texto-fuerte: rgba(255, 255, 255, 0.90);
  --ora-texto-secundario: rgba(255, 255, 255, 0.70);
  --ora-texto-terciario: rgba(255, 255, 255, 0.50);
  --ora-texto-tenue: rgba(255, 255, 255, 0.30);

  /* Color por tipo de carta. Son los tonos que la app pinta en el marco,
     subidos de luminosidad para que se lean SOBRE LA NOCHE: en la web estos
     tokens no pintan marcos, solo puntos de leyenda y marcas de gráfico, y
     medidos contra la superficie oscura los originales no llegaban al piso
     de 3:1 — Talismán #7333A6 daba 2,02:1 y Arma #8C4026 daba 2,11:1, o sea
     manchas que había que adivinar. Se conserva el matiz (mismo ángulo OKLCH,
     ±0) y se sube L; ahora van de 3,8:1 a 5,5:1.

     ⚠️ Separar bien uno de OTRO es un segundo problema, y depende del
     ORDEN en que se toquen. Los cinco pasan las pruebas de daltonismo
     (protan/deutan/tritan) puestos en el orden canónico de tipos de carta
     —Aliado, Arma, Talismán, Tótem, Oro—, que es el que usan la barra de
     .ora-composicion y la leyenda. El par flojo es Tótem contra Oro: si
     alguna vez se reordenan y quedan pegados a otra cosa, hay que volver a
     medirlos. Y el Oro es #AD8604 y no un ocre más verdoso justamente por
     ese par: a menos ámbar, se confunde con el verde del Tótem.

     Aun así, el color nunca va solo: cada tramo lleva su NOMBRE escrito y la
     leyenda repite nombre y cifra. Los gráficos que miden cantidad y no
     identidad (la curva de oros, las funciones) van todos en oro de marca,
     de un solo color. */
  --ora-aliado: #4482DB;
  --ora-arma: #C56341;
  --ora-talisman: #A45FD6;
  --ora-totem: #2DA06B;
  --ora-oro-carta: #AD8604;

  /* Familias. La sans queda para las herramientas densas; el libro no la usa. */
  --ora-display: Marcellus, "Times New Roman", serif;
  --ora-interfaz: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ora-lectura: "EB Garamond", Georgia, "Times New Roman", serif;
  --ora-cifra: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ora-margen: 96px;
}

/* ---------- base ---------- */

.ora *,
.ora *::before,
.ora *::after { box-sizing: border-box; }

.ora {
  margin: 0;
  background: var(--ora-noche);
  color: var(--ora-texto);
  font-family: var(--ora-lectura);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.ora h1,
.ora h2,
.ora h3 {
  font-family: var(--ora-display);
  font-weight: 400;
  margin: 0;
  color: var(--ora-texto);
}

.ora p { margin: 0; }

.ora a { color: var(--ora-oro); text-decoration: none; }
.ora a:hover { color: var(--ora-oro-brillo); }

.ora img { max-width: 100%; }

/* Ningun texto largo empuja el ancho de la pagina. */
.ora h1,
.ora h2,
.ora p,
.ora span { overflow-wrap: break-word; }

/* El ancho del pliego. */
.ora-pliego {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--ora-margen);
  padding-right: var(--ora-margen);
}

/* Rótulo versalita de sección: "II · LAS ACLARACIONES". */
.ora-rotulo {
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--ora-texto-terciario);
  text-transform: uppercase;
}

/* Rótulo + filete que corre hasta el margen. */
.ora-cintillo {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 26px;
}

.ora-cintillo::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--ora-borde-sutil);
}

/* El filete doble del tomo. */
.ora-filete-doble {
  height: 3px;
  border-top: 1px solid var(--ora-oro);
  border-bottom: 1px solid var(--ora-borde-oro);
}

.ora-filete-doble--invertido {
  border-top: 1px solid var(--ora-borde-oro);
  border-bottom: 1px solid var(--ora-oro);
}

/* ---------- cabecera / folio ---------- */

/* La barra va al MISMO ancho que el texto de la página. Antes se ensanchaba
   en pantalla grande (1360 px y 64 px de margen) para que cupieran todos los
   enlaces, y quedaba sobresaliendo del pliego por los dos lados. Ya no hace
   falta: lo que no quepa lo recoge el menú "Más".

   El z-index alto NO es por la barra, es por sus desplegables. Al estar
   posicionada, la cabecera abre un contexto de apilado propio: el z-index: 30
   del panel solo lo ordena DENTRO de la cabecera, y contra el contenido de
   <main> compite este número. Con el 2 que tenía, las fichas de la portada de
   una baraja (.ora-mazo-acciones, z-index: 3) se dibujaban encima del menú
   abierto. Cualquier valor por encima del contenido sirve; 100 deja sitio a lo
   que SÍ debe tapar la barra: los modales de Bootstrap (1055) y el visor de
   ilustraciones (1200). */
.ora-cabecera {
  position: relative;
  z-index: 100;
  padding-top: 18px;
}

.ora-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

/* La marca de la barra: el nombre y el bloque apilados. */
.ora-marca--apilada { align-items: center; gap: 12px; }

.ora-marca__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ora-marca--apilada .ora-marca__logo { width: 34px; height: 34px; }

.ora-marca--apilada .ora-marca__nombre {
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--ora-texto);
}

.ora-marca--apilada .ora-marca__bloque {
  font-size: 9px;
  letter-spacing: 0.30em;
}

/* Enlaces de la barra: interfaz, no versalitas de tomo. */
/* El gap se aprieta cuando falta sitio en vez de tirar un enlace a una
   segunda línea: con Documentos y Administración puestos son siete, y a
   26 px fijos el último se caía. */
.ora-tabbar {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.4vw, 26px);
  flex-wrap: wrap;
  /* Crece antes de envolver: sin esto el flex le da su ancho justo y el
     último enlace se va a otra línea aunque al buscador le sobre sitio. */
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ora-interfaz);
  font-size: 14px;
}

.ora-tabbar a { color: var(--ora-texto-secundario); }
.ora-tabbar a:hover { color: var(--ora-texto); }

/* El buscador cede primero: perder 60 px de caja de texto se nota mucho
   menos que un enlace de la barra bajando de línea. */
.ora-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 1;
  min-width: 0;
}

/* El buscador es un formulario de verdad: cae en el catálogo filtrado. */
.ora-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 210px;
  min-width: 148px;
  padding: 8px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
}

.ora-buscador:focus-within { border-color: var(--ora-oro); }

.ora-buscador svg { flex-shrink: 0; }

.ora .ora-buscador input {
  width: 100%;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 13px;
}

.ora-buscador input::placeholder { color: var(--ora-texto-terciario); }

.ora a.ora-entrar {
  font-family: var(--ora-interfaz);
  font-size: 14px;
  color: var(--ora-texto-secundario);
  white-space: nowrap;
}

.ora a.ora-entrar:hover { color: var(--ora-texto); }

.ora-boton,
.ora a.ora-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 9px 16px;
  background: var(--ora-oro);
  border-radius: 8px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  font-weight: 600;
  color: var(--ora-noche);
  white-space: nowrap;
}

.ora-boton:hover,
.ora a.ora-boton:hover { background: var(--ora-oro-brillo); color: var(--ora-noche); }

.ora-marca {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
}

.ora-marca__logo { width: 28px; height: 28px; object-fit: contain; }

.ora-marca__nombre {
  font-family: var(--ora-display);
  font-size: 14px;
  letter-spacing: 0.30em;
  color: var(--ora-texto-fuerte);
}

.ora-marca__bloque {
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--ora-oro);
}

.ora-nav {
  display: flex;
  align-items: baseline;
  gap: 30px;
  flex-wrap: wrap;
}

.ora-nav a {
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  color: var(--ora-texto-secundario);
}

.ora-nav a:hover { color: var(--ora-texto); }

.ora-folio {
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  color: var(--ora-texto-tenue);
  flex-shrink: 0;
}

/* ---------- apertura ---------- */

.ora-apertura {
  position: relative;
  padding-top: 72px;
}

.ora-apertura__texto { max-width: 620px; }

.ora-apertura h1 {
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin-bottom: 34px;
  text-wrap: balance;
}

.ora-apertura h1 em {
  font-family: var(--ora-lectura);
  font-style: italic;
  color: var(--ora-oro);
}

/* La capitular. Sin ella el párrafo sigue siendo legible: es adorno, no estructura. */
.ora-capitular {
  font-size: 20px;
  line-height: 1.66;
  color: var(--ora-texto-fuerte);
  margin-bottom: 26px;
}

.ora-capitular::first-letter {
  font-family: var(--ora-display);
  font-size: 76px;
  line-height: 0.82;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--ora-oro);
}

.ora-glosa {
  font-size: 17px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ora-texto-secundario);
}

/* El emblema: el mismo tomo, ojo y cartas rúnicas del logo de la app.
   Va sin marco ni sombra de carta — es una marca sobre el fondo, no un
   objeto: solo un halo de oro muy tenue para que no flote en el vacío. */
.ora-apertura__emblema {
  position: absolute;
  right: var(--ora-margen);
  top: 24px;
  z-index: 1;
  width: 340px;
  filter: drop-shadow(0 0 46px rgba(255, 191, 51, 0.28));
  pointer-events: none;
}

/* ---------- llamados: enlaces con filete, no botones ---------- */

.ora-llamados {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.ora-llamado {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 24px 12px 0;
  border-bottom: 1px solid var(--ora-oro);
  font-family: var(--ora-cifra);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ora-llamado--tenue {
  padding-right: 0;
  border-bottom-color: var(--ora-borde-sutil);
  color: var(--ora-texto-secundario);
}

.ora-llamado--tenue:hover { color: var(--ora-texto); }

/* ---------- índice con puntos guía ---------- */

.ora-seccion { padding-top: 92px; }

.ora-entrada {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--ora-borde-sutil);
  color: inherit;
}

.ora-entrada__num {
  font-family: var(--ora-cifra);
  font-size: 12px;
  color: var(--ora-oro);
  width: 34px;
  flex-shrink: 0;
}

.ora-entrada__titulo {
  font-family: var(--ora-display);
  font-size: 25px;
  color: var(--ora-texto-fuerte);
  flex-shrink: 0;
}

.ora-entrada:hover .ora-entrada__titulo { color: var(--ora-texto); }

.ora-entrada__glosa {
  font-size: 16px;
  font-style: italic;
  color: var(--ora-texto-terciario);
  flex-shrink: 0;
}

/* Los puntos guía. Puramente decorativos: se ocultan si no caben. */
.ora-entrada__guia {
  flex-grow: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--ora-texto-tenue);
  transform: translateY(-5px);
}

.ora-entrada:hover .ora-entrada__guia { border-bottom-color: var(--ora-borde-oro); }

.ora-entrada__cifra {
  font-family: var(--ora-cifra);
  font-size: 20px;
  color: var(--ora-texto-fuerte);
  flex-shrink: 0;
}

.ora-entrada__unidad {
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ora-texto-terciario);
  width: 92px;
  flex-shrink: 0;
}

/* ---------- el pliego a dos columnas: impreso vs. aclaración ---------- */

.ora-columnas {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.ora-columnas__izq {
  width: 460px;
  flex-shrink: 0;
  padding-right: 44px;
}

/* El filete de oro que separa el texto impreso de lo que significa. */
.ora-columnas__filete {
  width: 1px;
  background: var(--ora-borde-oro);
  flex-shrink: 0;
}

.ora-columnas__der {
  flex-grow: 1;
  padding-left: 44px;
}

.ora-impreso {
  font-family: var(--ora-display);
  font-size: 21px;
  line-height: 1.62;
  max-width: 62ch;
  color: var(--ora-texto-secundario);
  white-space: pre-line;
}

.ora-aclaracion {
  font-size: 19px;
  line-height: 1.72;
  color: var(--ora-texto-fuerte);
  text-wrap: pretty;
}

/* La leyenda es el texto de ambientación impreso en la carta: no dice reglas,
   así que se lee en cursiva y en un tono más apagado que el texto de juego. */
.ora-leyenda {
  font-size: 17px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ora-texto-terciario);
  text-wrap: pretty;
  white-space: pre-line;
}

.ora-nota-pie {
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  color: var(--ora-texto-terciario);
  margin-top: 20px;
}

.ora-titular {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.16;
  margin-bottom: 12px;
  max-width: 700px;
}

.ora-bajada {
  font-size: 17px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ora-texto-secundario);
  max-width: 620px;
}

/* ---------- el motor: versos numerados ---------- */

.ora-dos-bloques {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}

.ora-dos-bloques__principal { width: 560px; flex-shrink: 0; }
.ora-dos-bloques__lateral { flex-grow: 1; min-width: 0; }

.ora-verso {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ora-borde-sutil);
}

.ora-verso__num {
  font-family: var(--ora-cifra);
  font-size: 10px;
  color: var(--ora-texto-tenue);
  flex-shrink: 0;
}

.ora-verso__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ora-verso__texto {
  font-size: 16px;
  line-height: 1.58;
  color: var(--ora-texto-secundario);
}

/* ---------- ediciones ---------- */

.ora-entrada--corta { padding: 13px 0; }
.ora-entrada--corta .ora-entrada__titulo { font-size: 20px; }
.ora-entrada--corta .ora-entrada__glosa { font-size: 15px; }
.ora-entrada--corta .ora-entrada__cifra { font-size: 15px; color: var(--ora-texto-secundario); }

.ora-abanico {
  display: flex;
  gap: 10px;
  padding-top: 6px;
  width: 316px;
  flex-shrink: 0;
}

.ora-abanico img {
  width: 98px;
  border-radius: 5px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}

.ora-abanico img:nth-child(1) { transform: rotate(-3deg); }
.ora-abanico img:nth-child(2) { transform: translateY(16px); }
.ora-abanico img:nth-child(3) { transform: rotate(3deg) translateY(4px); }

/* ---------- la app ---------- */

.ora-tienda {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ora-borde);
  color: var(--ora-texto-fuerte);
}

.ora-tienda:hover { color: var(--ora-texto); border-bottom-color: var(--ora-oro); }

.ora-tienda svg { fill: currentColor; flex-shrink: 0; }

.ora-tienda span {
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.20em;
}

.ora-telefono {
  width: 232px;
  height: 358px;
  flex-shrink: 0;
  padding: 9px;
  background: var(--ora-noche);
  border: 1px solid var(--ora-borde);
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

/* Sin barra de estado falsa: en un teléfono real la dibuja el sistema encima. */
.ora-telefono__pantalla {
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  padding: 42px 13px 13px;
  background: linear-gradient(165deg, var(--ora-mistico-inicio) 0%, var(--ora-noche) 72%);
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.ora-telefono__grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ora-telefono__grilla img { width: 100%; border-radius: 4px; display: block; }

/* ---------- colofón ---------- */

.ora-colofon { padding-top: 88px; padding-bottom: 44px; }

.ora-colofon__cuerpo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.ora-colofon__nota {
  max-width: 380px;
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
  color: var(--ora-texto-terciario);
}

.ora-colofon__columnas { display: flex; gap: 56px; flex-wrap: wrap; }

.ora-colofon__columna { display: flex; flex-direction: column; gap: 10px; }

.ora-colofon__columna a { font-size: 15px; color: var(--ora-texto-secundario); }
.ora-colofon__columna a:hover { color: var(--ora-texto); }

.ora-colofon__titulo {
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ora-texto-tenue);
}

/* =============================================================
   Adaptación. El tomo se lee igual en un teléfono: se estrecha el
   margen, cae a una columna y el arte deja de flotar.
   ============================================================= */

@media (max-width: 1100px) {
  :root { --ora-margen: 56px; }

  .ora-apertura__emblema { width: 250px; top: 30px; }
  .ora-apertura__texto { max-width: 58%; }

  .ora-dos-bloques { gap: 44px; }
  .ora-dos-bloques__principal { width: 46%; }
  .ora-columnas__izq { width: 42%; padding-right: 32px; }
  .ora-columnas__der { padding-left: 32px; }
}

@media (max-width: 860px) {
  :root { --ora-margen: 28px; }

  /* El emblema flotante estorba en pantalla angosta: vuelve al flujo. */
  .ora-apertura__emblema {
    position: static;
    display: block;
    width: 168px;
    margin: 0 0 30px;
  }

  .ora-apertura { padding-top: 44px; }
  .ora-apertura__texto { max-width: none; }
  .ora-capitular { font-size: 18px; }
  .ora-capitular::first-letter { font-size: 62px; }

  .ora-seccion { padding-top: 64px; }

  .ora-columnas { flex-direction: column; gap: 28px; }
  .ora-columnas__izq { width: auto; padding-right: 0; }
  .ora-columnas__der { padding-left: 0; }

  /* El filete de oro pasa de vertical a horizontal sin dejar de separar. */
  .ora-columnas__filete { width: auto; height: 1px; }

  .ora-dos-bloques { flex-direction: column; gap: 40px; }
  .ora-dos-bloques__principal { width: auto; }

  .ora-abanico { display: none; }

  /* En angosto los puntos guía y la glosa sobran: manda el dato. */
  .ora-entrada { flex-wrap: wrap; gap: 10px 14px; }
  .ora-entrada__glosa { display: none; }
  .ora-entrada__titulo {
    font-size: 21px;
    flex-shrink: 1;
    min-width: 0;
    flex-grow: 1;
  }
  .ora-entrada__cifra { flex-shrink: 0; margin-left: auto; }
  .ora-entrada__unidad { width: auto; }

  .ora-verso { flex-wrap: wrap; }
  .ora-verso__texto { flex-shrink: 1; min-width: 0; }

  .ora-nav { gap: 18px; }
  .ora-folio { display: none; }
  /* El buscador ya no se esconde en compacto: baja a su propia fila, con la
     hamburguesa al lado. Buscar una carta es a lo que se viene. */

  .ora-colofon__cuerpo { gap: 36px; }
  .ora-colofon__columnas { gap: 32px; }
}

@media (max-width: 560px) {
  .ora-cabecera__fila { flex-wrap: wrap; gap: 14px; }
  .ora-tabbar { gap: 16px; font-size: 13px; }
  /* "Entrar" ya no se esconde: con el buscador en su propia fila hay sitio, y
     sin él quien ya tiene cuenta solo veía "Crear cuenta". */
  .ora-llamados { gap: 16px; }
  .ora-llamado { padding-right: 16px; }
  .ora-telefono { display: none; }
}

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .ora * { transition: none !important; animation: none !important; }
}

/* Visible solo para lectores de pantalla. */
.ora-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   Menú "Más": lo que antes vivía solo en el sidebar de Gymove.
   Es un <details>, así que abre sin JavaScript.
   ============================================================= */

.ora-menu { position: relative; }

.ora-menu summary {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
  color: var(--ora-texto-secundario);
  font-family: var(--ora-interfaz);
  font-size: 14px;
}

.ora-menu summary::-webkit-details-marker { display: none; }
.ora-menu summary:hover { color: var(--ora-texto); }
.ora-menu[open] summary { color: var(--ora-oro); }

.ora-menu__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 228px;
  padding: 14px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

.ora-menu__titulo {
  padding: 8px 8px 6px;
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ora-texto-tenue);
}

.ora .ora-menu__panel a {
  padding: 8px;
  border-radius: 6px;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-secundario);
  white-space: nowrap;
}

.ora .ora-menu__panel a:hover {
  background: var(--ora-superficie);
  color: var(--ora-texto);
}

/* =============================================================
   La barra en compacto.

   Hasta 860 px no caben siete enlaces, la marca y el buscador en
   una línea: la nav pasa a ser el contenido de una hamburguesa y
   el buscador baja a su propia fila, donde por fin se ve (antes
   se ocultaba, siendo la acción principal del sitio).

   Es la MISMA nav, no una copia: el <details> que la envuelve
   está abierto en pantalla ancha y el script lo cierra al entrar
   en compacto.
   ============================================================= */

/* En pantalla ancha el envoltorio no debe existir como caja. */
.ora-nav-compacta { display: contents; }
.ora-nav-compacta__boton { display: none; }

@media (max-width: 1200px) {
  .ora-cabecera__fila { flex-wrap: wrap; gap: 12px 16px; }

  /* La marca se queda con su fila junto a la hamburguesa. */
  .ora-nav-compacta { display: block; position: relative; margin-left: auto; }

  .ora-nav-compacta__boton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    list-style: none;
    cursor: pointer;
    background: var(--ora-superficie);
    border: 1px solid var(--ora-borde-sutil);
    border-radius: 8px;
    color: var(--ora-texto-secundario);
    font-family: var(--ora-interfaz);
    font-size: 13.5px;
  }

  .ora-nav-compacta__boton::-webkit-details-marker { display: none; }
  .ora-nav-compacta[open] .ora-nav-compacta__boton {
    border-color: var(--ora-borde-oro);
    color: var(--ora-oro);
  }

  /* La tira de enlaces se vuelve una lista vertical colgada del botón. */
  .ora-nav-compacta[open] .ora-tabbar {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    /* La tira ancha va con flex-wrap: wrap. En columna, eso no baja de línea:
       arma una SEGUNDA COLUMNA a la derecha, y los enlaces que no cabían a lo
       alto terminaban fuera del panel. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: min(310px, calc(100vw - 2 * var(--ora-margen)));
    max-height: min(74vh, 620px);
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ora-noche-elevada);
    border: 1px solid var(--ora-borde-oro);
    border-radius: 10px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  }

  .ora .ora-nav-compacta[open] .ora-tabbar > a {
    padding: 11px 10px;
    border-radius: 7px;
    color: var(--ora-texto-fuerte);
    font-size: 14.5px;
  }

  .ora .ora-nav-compacta[open] .ora-tabbar > a:hover { background: var(--ora-superficie); }

  /* Productos y Documentos, ya dentro del panel, dejan de flotar: se abren
     hacia abajo empujando al resto, que es lo que se espera de una lista. */
  .ora-nav-compacta[open] .ora-menu { width: 100%; }

  .ora-nav-compacta[open] .ora-menu > summary {
    padding: 11px 10px;
    border-radius: 7px;
    color: var(--ora-texto-fuerte);
    font-size: 14.5px;
  }

  .ora-nav-compacta[open] .ora-menu > summary:hover { background: var(--ora-superficie); }

  .ora-nav-compacta[open] .ora-menu[open] > summary { color: var(--ora-oro); }

  .ora-nav-compacta[open] .ora-menu__panel,
  .ora-nav-compacta[open] .ora-menu__panel--productos {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 10px;
    padding: 8px;
    border-color: var(--ora-borde-sutil);
    box-shadow: none;
  }

  /* Dentro de la hamburguesa manda UN solo scroll, el del panel grande:
     con el suyo propio, el submenú se abría ya desplazado, porque al
     abrirlo el navegador desplaza su caja para enseñar el contenido. */
  .ora-nav-compacta[open] .ora-menu__panel,
  .ora-nav-compacta[open] .ora-menu__panel--productos,
  .ora-nav-compacta[open] .ora-menu__lista {
    max-height: none;
    overflow: visible;
  }

  .ora-nav-compacta[open] .ora-menu__lista {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* El buscador vuelve a verse, en su propia fila y a lo ancho. */
  .ora-buscador { display: flex; width: auto; flex: 1 1 190px; }
  .ora-acciones { flex-basis: 100%; order: 3; gap: 10px; }
  .ora-acciones .ora-boton { white-space: nowrap; }

  /* Un nombre largo no puede empujar al buscador fuera de la fila. */
  .ora-menu--usuario { min-width: 0; flex-shrink: 1; }
  .ora-menu--usuario summary { min-width: 0; }
  .ora-menu--usuario summary svg { flex-shrink: 0; }

  .ora-menu--usuario__nombre {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Entre 1201 y 1400 la marca cedía su texto para que la tira entera cupiera.
   Ya no hace falta: el menú "Más" mide el sitio real y recoge los enlaces que
   sobran, así que sacrificar el nombre del sitio ya no compra nada — y era lo
   único de la cabecera que no se podía recuperar desplegando algo. */

/* Con la hamburguesa puesta, la marca ya no compite por el sitio. */
@media (max-width: 520px) {
  .ora-marca__texto { display: none; }
  .ora-nav-compacta[open] .ora-tabbar { width: calc(100vw - 2 * var(--ora-margen)); }
}

/* =============================================================
   Chrome de las páginas de herramienta.
   ============================================================= */

.ora-app main { padding-top: 32px; padding-bottom: 56px; }
.ora-pie-app { padding-top: 40px; padding-bottom: 40px; }

/* -------------------------------------------------------------
   Gymove pintado de noche.

   Las vistas migradas todavía traen las clases de la plantilla
   comprada (.card, .form-control, .table), que vienen con fondos
   claros. En vez de reescribir 57 vistas de golpe, se redefinen
   AQUÍ dentro de .ora-app: cada vista que se mude al layout nuevo
   hereda el estilo correcto sin tocarle el marcado.
   ------------------------------------------------------------- */

.ora-app .card {
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
  box-shadow: none;
}

.ora-app .card-header {
  padding: 16px 20px;
  background: none;
  border-bottom: 1px solid var(--ora-borde-sutil);
}

.ora-app .card-title {
  margin: 0;
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
  font-weight: 500;
}

.ora-app .card-body { padding: 20px; }

.ora-app label {
  margin-bottom: 7px;
  font-family: var(--ora-interfaz);
  font-size: 12px;
  font-weight: 500;
  color: var(--ora-texto-secundario);
}

.ora-app .form-control,
.ora-app select.form-control,
.ora-app input.form-control {
  /* Sin esto el sistema pinta en claro lo que dibuja él: el desplegable
     abierto, el calendario, los pasos del number. */
  color-scheme: dark;
  height: auto;
  padding: 9px 12px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
}

/* background-color y no el atajo: 'background' borraría la flecha del select. */
.ora-app .form-control:focus {
  background-color: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
  box-shadow: none;
  color: var(--ora-texto);
}

.ora-app .form-control::placeholder { color: var(--ora-texto-terciario); }

/* El desplegable nativo se pinta en claro en la mayoría de los sistemas:
   las opciones necesitan su propio color o quedan blanco sobre blanco. */
.ora-app select.form-control option,
.ora-app select.form-select option,
.ora-campo select option {
  background: var(--ora-noche-elevada);
  color: var(--ora-texto);
}

.ora-app .table {
  margin: 0;
  color: var(--ora-texto-secundario);
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
}

.ora-app .table > thead > tr > th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-cifra);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
  font-weight: 500;
}

.ora-app .table > tbody > tr > td {
  padding: 11px 14px;
  border-top: 1px solid var(--ora-borde-sutil);
  vertical-align: top;
}

.ora-app .table-hover > tbody > tr:hover > td {
  background: var(--ora-superficie);
  color: var(--ora-texto-fuerte);
}

.ora-app .modal-content {
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 12px;
  color: var(--ora-texto);
}

.ora-app .modal-header,
.ora-app .modal-footer { border-color: var(--ora-borde-sutil); }

.ora-app .btn-primary {
  background: var(--ora-oro);
  border-color: var(--ora-oro);
  color: var(--ora-noche);
  font-weight: 600;
}

.ora-app .btn-primary:hover {
  background: var(--ora-oro-brillo);
  border-color: var(--ora-oro-brillo);
  color: var(--ora-noche);
}

/* =============================================================
   El catálogo.
   ============================================================= */

.ora-catalogo__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.ora-catalogo h1 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  margin-bottom: 8px;
}

.ora p.ora-catalogo__cuenta {
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-terciario);
}

.ora-catalogo__cuenta strong {
  font-family: var(--ora-cifra);
  font-weight: 400;
  color: var(--ora-texto-fuerte);
}

/* La grilla de cartas. El tamaño lo pone la grilla, no cada celda:
   así el ancho de columna se adapta solo y no hay que tocar clases
   de Bootstrap por breakpoint. */
.ora-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 18px;
}

.ora-carta {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ora-carta__lamina {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ora-borde-sutil);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.ora-carta__lamina:hover {
  transform: translateY(-3px);
  border-color: var(--ora-oro);
}

.ora-carta__lamina img {
  display: block;
  width: 100%;
  height: auto;
}

.ora-carta__pie {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 2px;
}

.ora-carta__nombre {
  flex-grow: 1;
  min-width: 0;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ora-texto-secundario);
}

.ora .ora-carta__ojo {
  flex-shrink: 0;
  color: var(--ora-texto-tenue);
  font-size: 12px;
}

.ora .ora-carta__ojo:hover { color: var(--ora-oro); }

/* El vacío: cuando el filtro no deja ninguna carta en pie. */
.ora-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 20px;
  text-align: center;
}

.ora-vacio__titulo {
  font-family: var(--ora-display);
  font-size: 21px;
  color: var(--ora-texto-secundario);
}

.ora-vacio__nota {
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-terciario);
}

@media (max-width: 860px) {
  .ora-galeria { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
  .ora-app main { padding-top: 22px; }
}

/* Los campos del panel de filtros: se acomodan solos, sin clases por breakpoint. */
.ora-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.ora-filtros__campo { display: flex; flex-direction: column; min-width: 0; }

/* Las reglas del menú y del catálogo se declaran más abajo que los @media
   generales, así que sus adaptaciones tienen que ir aquí, al final: si no,
   la regla base gana por orden y el override no se aplica nunca. */
@media (max-width: 860px) {
  /* Colgando desde la izquierda el panel se salía de la pantalla. */
  .ora-menu__panel {
    left: auto;
    right: 0;
    min-width: 0;
    width: min(280px, calc(100vw - 2 * var(--ora-margen)));
  }
}

/* =============================================================
   El modal de carta.

   Se estiliza fuera de .ora-app a propósito: Bootstrap monta el
   modal colgando de <body>, así que las reglas tienen que valer
   aunque el contenedor de la página no sea antecesor.
   ============================================================= */

.ora-cartamodal .modal-content {
  background: var(--ora-noche);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 14px;
  color: var(--ora-texto);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.ora-cartamodal .modal-header {
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ora-borde-sutil);
}

.ora-cartamodal__titulo {
  flex-grow: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--ora-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ora-texto);
}

.ora-cartamodal__acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ora-cartamodal__acciones a,
.ora-cartamodal__cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ora-texto-terciario);
  font-size: 14px;
  cursor: pointer;
}

.ora-cartamodal__acciones a:hover,
.ora-cartamodal__cerrar:hover {
  background: var(--ora-superficie);
  border-color: var(--ora-borde-sutil);
  color: var(--ora-oro);
}

.ora-cartamodal__cerrar { margin-left: 8px; }

.ora-cartamodal .modal-body { padding: 24px; }

/* Dos columnas: la lámina manda el ancho, la ficha ocupa el resto. */
.ora-cartamodal__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  /* Arriba, NO centrada: el alto de la derecha cambia con el largo de la
     aclaración, y centrada la carta saltaría en cada Siguiente. Alineada
     arriba comparte eje con la fila de fichas y se queda quieta. */
  align-items: start;
}

.ora-cartamodal__lamina {
  position: sticky;
  top: 0;
  min-width: 0;
}

.ora-cartamodal__lamina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--ora-borde-sutil);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
}

.ora-cartamodal__puntos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.ora-cartamodal__ficha {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* --- fichas de identidad --- */

.ora-cartamodal__fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ora-ficha {
  padding: 6px 12px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 7px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
}

/* El color de la ficha de tipo es el mismo que la app pinta en el marco
   de la carta. El atributo lo escribe el JS al cargar la carta. */
.ora-ficha--tipo[data-tipo="aliado"]   { background: rgba(51,115,204,0.20);  border-color: rgba(51,115,204,0.55);  color: #7FA8E8; }
.ora-ficha--tipo[data-tipo="arma"]     { background: rgba(140,64,38,0.25);   border-color: rgba(140,64,38,0.65);   color: #D98C6B; }
.ora-ficha--tipo[data-tipo="talisman"],
.ora-ficha--tipo[data-tipo="talismán"] { background: rgba(115,51,166,0.25);  border-color: rgba(115,51,166,0.60);  color: #B98CE8; }
.ora-ficha--tipo[data-tipo="totem"],
.ora-ficha--tipo[data-tipo="tótem"]    { background: rgba(51,128,89,0.25);   border-color: rgba(51,128,89,0.60);   color: #6BCC96; }
.ora-ficha--tipo[data-tipo="oro"]      { background: rgba(140,115,26,0.28);  border-color: rgba(140,115,26,0.65);  color: #E8C24D; }

/* --- coste y fuerza --- */

.ora-cartamodal__cifras { display: flex; gap: 10px; }

.ora-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 11px;
}

.ora-cifra--oro     { background: rgba(255,191,51,0.12); border: 1px solid var(--ora-borde-oro); }
.ora-cifra--fuerza  { background: rgba(51,115,204,0.15); border: 1px solid rgba(51,115,204,0.55); }

.ora-cifra__valor {
  font-family: var(--ora-cifra);
  font-size: 27px;
  line-height: 1;
}

.ora-cifra--oro .ora-cifra__valor    { color: var(--ora-oro); }
.ora-cifra--fuerza .ora-cifra__valor { color: #7FA8E8; }

.ora-cifra__rotulo {
  margin-top: 5px;
  font-family: var(--ora-interfaz);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--ora-texto-terciario);
}

/* --- bloques de texto --- */

.ora-bloque { display: flex; flex-direction: column; gap: 11px; }

.ora-bloque__rotulo {
  font-family: var(--ora-cifra);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--ora-texto-terciario);
}

.ora-bloque__rotulo--oro { color: var(--ora-oro); }

.ora-bloque--aclaracion {
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(20,41,102,0.55) 0%, rgba(46,15,76,0.55) 100%);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 11px;
}

.ora-cartamodal .ora-impreso {
  font-family: var(--ora-display);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
  white-space: pre-line;
}

.ora-cartamodal .ora-aclaracion {
  max-width: 62ch;
  font-family: var(--ora-lectura);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ora-texto-fuerte);
  text-wrap: pretty;
}

.ora-cartamodal .ora-leyenda {
  max-width: 62ch;
  font-family: var(--ora-lectura);
  font-size: 16px;
  line-height: 1.65;
}

.ora-funciones { display: flex; flex-wrap: wrap; gap: 7px; }

.ora-funcion {
  padding: 5px 11px;
  background: rgba(255,191,51,0.12);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 999px;
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-oro-brillo);
}

/* --- copias por formato: el color dice cuánto aprieta la ban list,
   como el indicador del detalle de carta en iOS --- */

.ora-copias { display: flex; flex-wrap: wrap; gap: 7px; }

.ora-copia {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 7px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
}

.ora-copia__max { font-weight: 600; }

.ora-copia[data-max="0"] { background: rgba(220,60,60,0.14);  border-color: rgba(220,60,60,0.55); }
.ora-copia[data-max="0"] .ora-copia__max { color: #F07A7A; }
.ora-copia[data-max="1"] { background: rgba(230,130,40,0.14); border-color: rgba(230,130,40,0.55); }
.ora-copia[data-max="1"] .ora-copia__max { color: #F2A45C; }
.ora-copia[data-max="2"] { background: rgba(255,191,51,0.12); border-color: var(--ora-borde-oro); }
.ora-copia[data-max="2"] .ora-copia__max { color: var(--ora-oro); }
.ora-copia[data-max="3"] { background: rgba(51,128,89,0.18);  border-color: rgba(51,128,89,0.55); }
.ora-copia[data-max="3"] .ora-copia__max,
.ora-copia[data-max="sin"] .ora-copia__max { color: #6BCC96; }

/* --- precios: filas con filete, no una tabla con bordes --- */

.ora-precios { width: 100%; border-collapse: collapse; }

.ora-precios td {
  padding: 10px 0;
  border-bottom: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-secundario);
}

.ora-precios td:last-child {
  text-align: right;
  font-family: var(--ora-cifra);
  color: var(--ora-oro);
}

/* --- pie --- */

.ora-cartamodal .modal-footer {
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora-paso {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-secundario);
  cursor: pointer;
}

.ora-paso:hover {
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
  color: var(--ora-texto);
}

/* Las flechas del carrusel son de Bootstrap y vienen en blanco sobre nada:
   se les da un fondo para que se despeguen del arte de la carta. */
.ora-cartamodal .carousel-control-prev,
.ora-cartamodal .carousel-control-next {
  width: 44px;
  opacity: 1;
}

.ora-cartamodal .carousel-control-prev-icon,
.ora-cartamodal .carousel-control-next-icon {
  width: 32px;
  height: 32px;
  padding: 8px;
  background-color: rgba(13, 18, 36, 0.8);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 50%;
  background-size: 14px;
}

@media (max-width: 860px) {
  .ora-cartamodal__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ora-cartamodal__lamina { position: static; max-width: 320px; margin: 0 auto; }
  .ora-cartamodal .modal-body { padding: 18px; }
  .ora-cartamodal__titulo { font-size: 21px; }
}

/* =============================================================
   Detalle de carta. Comparte vocabulario con el modal (fichas,
   cifras, bloques) a propósito: es la misma información, en
   grande.
   ============================================================= */

.ora-volver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

.ora-volver:hover { color: var(--ora-oro); }

.ora-detalle__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.ora-detalle__carta {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--ora-borde-sutil);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.55);
}

.ora-impresiones {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.ora-app .ora-impresion {
  display: block;
  padding: 6px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
}

.ora-app .ora-impresion.active,
.ora-app .ora-impresion:hover {
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
}

.ora-impresion img { display: block; width: 68px; border-radius: 4px; }

.ora-detalle__ficha {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.ora-detalle__encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ora-detalle h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.ora-detalle__acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ora .ora-detalle__acciones a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  color: var(--ora-texto-terciario);
  font-size: 15px;
}

.ora .ora-detalle__acciones a:hover {
  background: var(--ora-superficie);
  color: var(--ora-oro);
}

/* Ya la tienes en tu lista: el estado se ve sin tener que pasar el cursor. */
.ora .ora-detalle__acciones a.es-activa {
  background: rgba(255,191,51,0.15);
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro);
}

.ora-detalle .ora-impreso,
.ora-detalle .ora-leyenda,
.ora-detalle .ora-aclaracion { max-width: 66ch; }

.ora-detalle .ora-impreso {
  font-family: var(--ora-display);
  font-size: 20px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
  white-space: pre-line;
}

.ora-detalle .ora-aclaracion {
  font-family: var(--ora-lectura);
  font-size: 19px;
  line-height: 1.72;
  color: var(--ora-texto-fuerte);
  text-wrap: pretty;
}

.ora-detalle .ora-leyenda {
  font-family: var(--ora-lectura);
  font-size: 17px;
  line-height: 1.7;
}

.ora-detalle__gente { display: flex; flex-wrap: wrap; gap: 32px; }

.ora .ora-persona {
  padding: 5px 11px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 999px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
}

.ora .ora-persona:hover { border-color: var(--ora-oro); color: var(--ora-texto); }

.ora-detalle__firma {
  padding-top: 20px;
  border-top: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-lectura);
  font-size: 15px;
  font-style: italic;
  color: var(--ora-texto-terciario);
}

/* =============================================================
   Listado de barajas.
   ============================================================= */

.ora-barajas__nuevas { display: flex; gap: 10px; flex-wrap: wrap; }

.ora-boton--tenue,
.ora a.ora-boton--tenue {
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde);
  color: var(--ora-texto-fuerte);
}

.ora-boton--tenue:hover,
.ora a.ora-boton--tenue:hover {
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
  color: var(--ora-texto);
}

.ora-filtros--sueltos { margin-top: 8px; }

.ora-barajas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.ora-baraja {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.ora-baraja:hover { border-color: var(--ora-borde-oro); transform: translateY(-2px); }

/* La mano: los cinco Aliados más caros, superpuestos como cartas en mano.
   Al pasar el cursor se abren para poder verlas. */
.ora-baraja__mano {
  display: flex;
  padding: 4px 0;
  min-height: 92px;
}

/* La ilustración de la baraja, de fondo de la mano: cubre el ancho entero de
   la tarjeta (se posiciona contra ELLA, no contra la mano) y se desvanece
   hacia abajo, así los Aliados quedan encima y el texto sigue sobre la
   superficie lisa. La mano baja para dejarla ver. */
.ora-baraja { position: relative; overflow: hidden; }

.ora-baraja.con-ilustracion .ora-baraja__mano { padding-top: 64px; }

.ora-baraja__ilustracion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 196px;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 45%, transparent 100%);
  transition: transform 0.4s ease;
}

.ora-baraja:hover .ora-baraja__ilustracion { transform: scale(1.04); }

/* Con la ilustración detrás, los Aliados van por encima. */
.ora-baraja__carta { position: relative; }

.ora-baraja__carta {
  width: 64px;
  border-radius: 5px;
  border: 1px solid var(--ora-borde-sutil);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  transition: margin 0.18s ease;
}

.ora-baraja__carta + .ora-baraja__carta { margin-left: -34px; }
.ora-baraja:hover .ora-baraja__carta + .ora-baraja__carta { margin-left: -22px; }

.ora-baraja__texto { display: flex; flex-direction: column; gap: 10px; }

.ora a.ora-baraja__titulo {
  font-family: var(--ora-display);
  font-size: 20px;
  line-height: 1.22;
  color: var(--ora-texto);
}

.ora a.ora-baraja__titulo:hover { color: var(--ora-oro); }

.ora-baraja__meta { display: flex; flex-wrap: wrap; gap: 6px; }

.ora-baraja__meta .ora-ficha { padding: 4px 9px; font-size: 11.5px; }

.ora-baraja__pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-interfaz);
  font-size: 12px;
}

.ora-baraja__autor { flex-grow: 1; min-width: 0; color: var(--ora-texto-terciario); }

.ora-baraja__likes { color: var(--ora-texto-terciario); white-space: nowrap; }

.ora-legal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ora-legal__punto { width: 7px; height: 7px; border-radius: 50%; }

.ora-legal--si { color: #6BCC96; }
.ora-legal--si .ora-legal__punto { background: #33CC66; }
.ora-legal--no { color: #FF4C4C; }
.ora-legal--no .ora-legal__punto { background: #FF4C4C; }

.ora-baraja__acciones,
.ora-lista__acciones {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora .ora-baraja__acciones a,
.ora .ora-lista__acciones a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ora-texto-terciario);
  font-size: 12.5px;
}

.ora .ora-baraja__acciones a:hover,
.ora .ora-lista__acciones a:hover {
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-borde-sutil);
  color: var(--ora-oro);
}

/* Pública y anónima son ESTADOS, no acciones: se ven sin pasar el cursor. */
.ora .ora-baraja__acciones a.es-activa,
.ora .ora-lista__acciones a.es-activa {
  background: rgba(255,191,51,0.14);
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro);
}

.ora .ora-baraja__acciones a.es-peligro:hover,
.ora .ora-lista__acciones a.es-peligro:hover {
  background: rgba(191,13,13,0.20);
  border-color: rgba(217,26,26,0.55);
  color: #FF4C4C;
}

@media (max-width: 1100px) {
  .ora-detalle__cuerpo { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 860px) {
  .ora-detalle__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ora-detalle__lamina { max-width: 340px; }
  .ora-barajas { grid-template-columns: minmax(0, 1fr); }
  .ora-barajas__nuevas { width: 100%; }
}

/* -------------------------------------------------------------
   Restos de Bootstrap en las vistas que todavía no se reescriben
   (listado y detalle de baraja). Sus utilidades asumen tema claro
   y sobre el fondo de noche quedaban ilegibles.
   ------------------------------------------------------------- */

.ora-app .badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  font-weight: 500;
}

.ora-app .badge.bg-light,
.ora-app .badge.text-bg-light,
.ora-app .badge.text-bg-dark {
  background: var(--ora-superficie-elevada) !important;
  color: var(--ora-texto-secundario) !important;
}

.ora-app .badge.text-bg-success,
.ora-app .badge.badge-success {
  background: rgba(51,204,102,0.15) !important;
  color: #6BCC96 !important;
}

.ora-app .badge.text-bg-info,
.ora-app .badge.badge-info {
  background: rgba(51,115,204,0.20) !important;
  color: #7FA8E8 !important;
}

/* bg-light en cabeceras de tarjeta dejaba texto blanco sobre blanco */
.ora-app .card-header.bg-light,
.ora-app .bg-light { background: var(--ora-superficie-elevada) !important; }

.ora-app .btn {
  border-radius: 8px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
}

.ora-app .btn-secondary,
.ora-app .btn-outline-primary,
.ora-app .btn-outline-info,
.ora-app .btn-outline-success,
.ora-app .btn-outline-warning,
.ora-app .btn-outline-danger,
.ora-app .btn-outline-secondary {
  background: var(--ora-superficie);
  border-color: var(--ora-borde-sutil);
  color: var(--ora-texto-secundario);
}

.ora-app .btn-secondary:hover,
.ora-app .btn-outline-primary:hover,
.ora-app .btn-outline-info:hover,
.ora-app .btn-outline-success:hover,
.ora-app .btn-outline-warning:hover,
.ora-app .btn-outline-danger:hover,
.ora-app .btn-outline-secondary:hover {
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
  color: var(--ora-texto);
}

/* Los iconos de acción de las tablas: heredaban el azul de enlace. */
.ora-app .table a { color: var(--ora-texto-terciario); }
.ora-app .table a:hover { color: var(--ora-oro); }

.ora-app .nav-tabs { border-bottom-color: var(--ora-borde-sutil); }

.ora-app .nav-tabs .nav-link {
  background: none;
  border-color: transparent;
  color: var(--ora-texto-secundario);
}

.ora-app .nav-tabs .nav-link.active {
  background: var(--ora-superficie);
  border-color: var(--ora-borde-sutil) var(--ora-borde-sutil) transparent;
  color: var(--ora-texto);
}

.ora-app .text-black { color: var(--ora-texto-secundario) !important; }

/* Gymove le da a .content-body un margen izquierdo del ancho del sidebar.
   En el layout nuevo no hay sidebar, así que el contenido quedaba corrido. */
.ora-app .content-body {
  margin-left: 0;
  margin-top: 0;
  padding: 0;
}

.ora-app .container-fluid { padding-left: 0; padding-right: 0; }

/* Bootstrap 5 pinta la tabla con variables propias: sin redefinirlas, el
   fondo queda BLANCO por mucho que se cambie el color del texto. */
.ora-app .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ora-texto-secundario);
  --bs-table-border-color: var(--ora-borde-sutil);
  --bs-table-striped-bg: var(--ora-superficie);
  --bs-table-striped-color: var(--ora-texto-secundario);
  --bs-table-hover-bg: var(--ora-superficie);
  --bs-table-hover-color: var(--ora-texto-fuerte);
  --bs-table-accent-bg: transparent;
  background-color: transparent;
}

.ora-app .table-responsive { background: transparent; }

/* Paginador y acciones del filtro. */
.ora-filtros__acciones {
  flex-direction: row;
  align-items: flex-end;
  gap: 14px;
}

.ora-app .ora-filtros__acciones .ora-boton {
  border: 0;
  cursor: pointer;
  height: 40px;
}

.ora-paginador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora .ora-paginador .ora-paso { text-decoration: none; }

.ora-paso.es-inerte {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.ora-paginador__cuenta {
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

.ora-paginador__cuenta strong {
  font-family: var(--ora-cifra);
  font-weight: 400;
  color: var(--ora-texto-fuerte);
}

/* =============================================================
   Detalle de baraja.
   ============================================================= */

.ora-resumen {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 8px 0 34px;
  padding: 22px 26px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
}

.ora-resumen__destacado {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 40px;
  border-right: 1px solid var(--ora-borde-sutil);
}

.ora-resumen__cifra {
  font-family: var(--ora-cifra);
  font-size: 34px;
  line-height: 1;
  color: var(--ora-oro);
}

.ora-resumen__rotulo {
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ora-texto-terciario);
}

/* El winrate cuando la baraja no se jugó desde su última edición: el guion no
   es un cero, así que no se pinta con el oro de una cifra de verdad. */
.ora-resumen__cifra--vacia {
  color: var(--ora-texto-terciario);
}

.ora-resumen__nota {
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
}

.ora-resumen__reparto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 8px 32px;
  flex-grow: 1;
}

.ora-resumen__linea {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-secundario);
}

.ora-resumen__punto {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ora-resumen__linea b {
  margin-left: auto;
  font-family: var(--ora-cifra);
  font-weight: 400;
  color: var(--ora-texto-fuerte);
}

/* --- los grupos de cartas --- */

.ora-grupo { margin-bottom: 38px; }

.ora-grupo__cuenta {
  font-family: var(--ora-cifra);
  font-size: 13px;
  color: var(--ora-texto-fuerte);
  order: 3;
}

/* El cintillo trae un ::after que estira el filete; con la cuenta al final
   hay que reordenar para que el número quede después de la línea. */
.ora-grupo .ora-cintillo::after { order: 2; }

.ora-galeria--baraja { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

.ora-carta__lamina { position: relative; }

.ora-carta__copias {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 8px;
  background: rgba(13, 18, 36, 0.9);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 999px;
  font-family: var(--ora-cifra);
  font-size: 12px;
  color: var(--ora-oro);
}

/* --- los gráficos --- */

.ora-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.ora-grafico { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.ora-grafico__lienzo { position: relative; height: 260px; }

/* --- la tabla de DataTables --- */

.ora-app table.dataTable,
.ora-app #tablaCartas {
  width: 100% !important;
  border-collapse: collapse;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-secundario);
}

.ora-app #tablaCartas thead th {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-cifra);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
  font-weight: 500;
}

.ora-app #tablaCartas tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--ora-borde-sutil);
  vertical-align: top;
}

.ora-app #tablaCartas tbody tr:hover td { background: var(--ora-superficie); }

/* Los controles que inyecta DataTables (buscador, paginador, "mostrando N"). */
.ora-app .dataTables_wrapper { color: var(--ora-texto-terciario); }

.ora-app .dataTables_filter input,
.ora-app .dataTables_length select {
  padding: 7px 11px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
  color: var(--ora-texto);
}

.ora-app .dataTables_paginate .paginate_button {
  padding: 6px 12px;
  border-radius: 7px;
  color: var(--ora-texto-secundario) !important;
}

.ora-app .dataTables_paginate .paginate_button.current,
.ora-app .dataTables_paginate .paginate_button:hover {
  background: var(--ora-superficie-elevada) !important;
  border-color: var(--ora-borde-oro) !important;
  color: var(--ora-oro) !important;
}

@media (max-width: 860px) {
  .ora-resumen { gap: 22px; padding: 18px; }
  .ora-resumen__destacado { padding-right: 0; border-right: 0; }
  .ora-galeria--baraja { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .ora-grafico__lienzo { height: 220px; }
}

.ora-grafico__lienzo--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px dashed var(--ora-borde-sutil);
  border-radius: 10px;
  text-align: center;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

/* =============================================================
   Modal de exportación.
   ============================================================= */

.ora-exportar .modal-content {
  background: var(--ora-noche);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 14px;
  color: var(--ora-texto);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.ora-exportar .modal-header,
.ora-exportar .modal-footer {
  align-items: center;
  padding: 18px 24px;
  border-color: var(--ora-borde-sutil);
}

.ora-exportar .modal-footer { justify-content: space-between; }
.ora-exportar__acciones { display: flex; align-items: center; gap: 10px; }

.ora-exportar .modal-body { padding: 24px; }

/* Las opciones a un lado y la vista previa al otro: antes la previa quedaba
   al final de una lista larga, así que había que bajar para ver el efecto
   de lo que acababas de elegir. */
.ora-exportar__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.ora-exportar__opciones {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.ora-opciones { display: flex; flex-direction: column; gap: 7px; }

.ora-opcion { display: block; cursor: pointer; margin: 0; }

/* El radio nativo se oculta pero sigue ahí: el JS lo lee por name/value y
   el teclado lo sigue enfocando. */
.ora-opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ora-opcion__cara {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-secundario);
}

.ora-opcion:hover .ora-opcion__cara { border-color: var(--ora-borde); }

.ora-opcion input:checked + .ora-opcion__cara {
  background: rgba(255, 191, 51, 0.14);
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro-brillo);
}

.ora-opcion input:focus-visible + .ora-opcion__cara { outline: 2px solid var(--ora-oro); outline-offset: 2px; }

/* Un marquito con la proporción real: se entiende antes que el texto. */
.ora-opcion__marco {
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.75;
}

.ora-opcion__marco--16x9 { width: 24px; height: 14px; }
.ora-opcion__marco--9x16 { width: 12px; height: 21px; }
.ora-opcion__marco--4x5  { width: 16px; height: 20px; }
.ora-opcion__marco--1x1  { width: 18px; height: 18px; }

.ora-exportar__fondo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

.ora-exportar__fondo input[type="color"] {
  width: 46px;
  height: 34px;
  padding: 3px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
  cursor: pointer;
}

.ora-exportar__fondo #previewImage {
  max-height: 90px;
  border-radius: 6px;
  border: 1px solid var(--ora-borde-sutil);
}

.ora-exportar__previa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ora-exportar #exportPreviewContainer {
  padding: 14px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 11px;
}

.ora-exportar__pie {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

@media (max-width: 860px) {
  .ora-exportar__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ora-exportar .modal-body { padding: 18px; }
  .ora-exportar .modal-footer { flex-wrap: wrap; gap: 10px; }
}

/* =============================================================
   Las restricciones de formato.

   Era una caja entera arriba de la página, con su marca redonda y su
   titular. Hoy el ESTADO lo dice una ficha en la portada (válida / N
   restricciones / sin ban list que aplicar) y acá queda solo el detalle,
   que vive dentro del panel de cifras. Por eso ya no hay .ora-validador,
   .ora-validador__cabecera, __marca, __titulo, __nota ni los .es-* que
   los pintaban: se borraron con el rediseño del detalle de baraja.
   ============================================================= */

/* Sin margen ni filete propios: el filete lo pone ahora
   .ora-mazo-panel__restricciones, que es quien la contiene. */
.ora-validador__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ora-validador__lista li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding-left: 16px;
  position: relative;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ora-texto-secundario);
}

.ora-validador__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.ora-validador__lista b { color: var(--ora-texto-fuerte); font-weight: 600; }

/* Lo que además IMPIDE guardar, no solo marca la baraja inválida. */
.ora-validador__grave {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(191, 13, 13, 0.20);
  border: 1px solid rgba(217, 26, 26, 0.55);
  font-size: 11px;
  color: #FF4C4C;
  white-space: nowrap;
}

/* =============================================================
   Pantallas de cuenta: entrar, crear cuenta, recuperar.
   Una sola tarea por pantalla y nada de navegación alrededor.
   ============================================================= */

.ora-cuenta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 24px;
  /* El mismo degradado de noche que abre la portada. */
  background: linear-gradient(165deg, var(--ora-mistico-inicio) 0%, var(--ora-noche) 62%);
}

.ora-cuenta__caja {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ora .ora-cuenta__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 30px;
  color: inherit;
}

.ora-cuenta__marca img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 26px rgba(255, 191, 51, 0.25));
}

.ora-cuenta__marca .ora-marca__nombre { font-size: 16px; letter-spacing: 0.30em; }

.ora-cuenta__tarjeta {
  width: 100%;
  padding: 32px;
  background: rgba(13, 18, 36, 0.72);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.ora-cuenta__titulo {
  font-size: 27px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.ora p.ora-cuenta__bajada {
  font-family: var(--ora-lectura);
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ora-texto-terciario);
  margin-bottom: 26px;
}

.ora-form { display: flex; flex-direction: column; gap: 18px; }

.ora-campo { display: flex; flex-direction: column; gap: 7px; }

.ora-campo label {
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ora-texto-secundario);
}

.ora-campo input {
  width: 100%;
  padding: 12px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 14.5px;
}

.ora-campo input::placeholder { color: var(--ora-texto-tenue); }

.ora-campo input:focus {
  outline: none;
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
}

/* El error va bajo su campo, no todo junto arriba: así se sabe cuál falló. */
.ora-campo__error {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: #FF4C4C;
}

.ora-campo__error:empty { display: none; }

.ora-aviso {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 9px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  line-height: 1.5;
}

/* Sin contenido no debe dejar un hueco: el resumen de validación de ASP.NET
   se renderiza siempre, con o sin errores dentro. */
.ora-aviso:empty { display: none; }

.ora-aviso--error {
  background: rgba(191, 13, 13, 0.18);
  border: 1px solid rgba(217, 26, 26, 0.5);
  color: #FF7A7A;
}

.ora-aviso--error ul { margin: 0; padding-left: 18px; }

.ora-aviso--ok {
  background: rgba(51, 204, 102, 0.14);
  border: 1px solid rgba(51, 204, 102, 0.45);
  color: #8FE0B0;
}

.ora-boton--ancho {
  width: 100%;
  padding: 13px 16px;
  margin-top: 4px;
  font-size: 14px;
  text-align: center;
}

.ora-cuenta__enlaces {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-terciario);
}

.ora p.ora-cuenta__pie {
  margin-top: 28px;
  font-family: var(--ora-lectura);
  font-size: 13px;
  font-style: italic;
  color: var(--ora-texto-tenue);
  text-align: center;
}

@media (max-width: 560px) {
  .ora-cuenta { padding: 28px 18px; align-items: flex-start; }
  .ora-cuenta__tarjeta { padding: 24px 20px; }
}

/* =============================================================
   Nueva baraja: selección por fichas.
   ============================================================= */

.ora-nueva .modal-content {
  background: var(--ora-noche);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 14px;
  color: var(--ora-texto);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.ora-nueva .modal-header,
.ora-nueva .modal-footer {
  align-items: center;
  padding: 18px 24px;
  border-color: var(--ora-borde-sutil);
}

.ora-nueva .modal-footer { justify-content: space-between; }
.ora-nueva .modal-body { padding: 24px; display: flex; flex-direction: column; gap: 26px; }

.ora-bloque__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ora-fichas { display: flex; flex-wrap: wrap; gap: 8px; }

.ora-ficha-sel {
  padding: 9px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-secundario);
  cursor: pointer;
}

.ora-ficha-sel:hover { border-color: var(--ora-borde); color: var(--ora-texto); }

.ora-ficha-sel.es-activa {
  background: rgba(255, 191, 51, 0.15);
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro-brillo);
}

.ora-ficha-sel:focus-visible { outline: 2px solid var(--ora-oro); outline-offset: 2px; }

.ora-buscador-fichas {
  width: 190px;
  padding: 8px 12px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 13px;
}

.ora-buscador-fichas::placeholder { color: var(--ora-texto-tenue); }
.ora-buscador-fichas:focus { outline: none; border-color: var(--ora-oro); }

.ora-fichas__cargando,
.ora-fichas__vacio {
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
  margin: 0;
}

@media (max-width: 560px) {
  .ora-buscador-fichas { width: 100%; }
}

/* Un botón deshabilitado tiene que VERSE deshabilitado: sin esto, el de
   "Crear baraja" se veía igual antes y después de elegir. */
.ora-boton:disabled,
.ora a.ora-boton[aria-disabled="true"] {
  background: var(--ora-superficie-elevada);
  color: var(--ora-texto-tenue);
  cursor: not-allowed;
}

.ora-boton:disabled:hover { background: var(--ora-superficie-elevada); color: var(--ora-texto-tenue); }

/* =============================================================
   Vista de creación / edición de baraja.
   ============================================================= */

.ora-crear__ajustes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}

.ora-campo__obliga {
  margin-left: 6px;
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ora-oro-ambar);
}

.ora-crear__ilustracion {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

.ora-crear__ilustracion #previewImage {
  max-height: 74px;
  border-radius: 7px;
  border: 1px solid var(--ora-borde-sutil);
}

/* El resumen de esta vista lleva el contador en una sola línea de texto que
   el JS reescribe entera ("Total: 12 / 50"), así que no se puede partir en
   cifra y rótulo como en el detalle. */
.ora-app #resumen-baraja .ora-resumen__destacado { padding-right: 32px; }

.ora-app #resumen-baraja .ora-resumen__cifra {
  font-size: 20px;
  white-space: nowrap;
}

.ora-app #resumen-baraja .ora-resumen__reparto {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Pegajoso al bajar. El JS pone la geometría (la calcula) y pone esta clase;
   el aspecto vive acá. Se opaca el fondo porque encima pasan las cartas. */
.ora-app .resumen-baraja.sticky-resumen {
  background: rgba(20, 26, 48, 0.96);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 12px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
}

/* --- el pozo de cartas --- */

.ora-app .filtroCartas { max-width: 420px; }

.ora-app .tablaCartas .carta-imagen {
  border-radius: 5px;
  border: 1px solid var(--ora-borde-sutil);
}

.ora-app .cantidad-display,
.ora-app .cantidad-display-mobile {
  background: var(--ora-superficie-elevada) !important;
  border-color: var(--ora-borde-sutil) !important;
  color: var(--ora-oro) !important;
  font-family: var(--ora-cifra);
}

.ora-app .btn-decrease,
.ora-app .btn-increase,
.ora-app .btn-decrease-mobile,
.ora-app .btn-increase-mobile {
  background: var(--ora-superficie);
  border-color: var(--ora-borde-sutil);
  color: var(--ora-texto-secundario);
}

.ora-app .btn-increase:hover:not(:disabled),
.ora-app .btn-increase-mobile:hover:not(:disabled) {
  background: rgba(51, 204, 102, 0.18);
  border-color: rgba(51, 204, 102, 0.55);
  color: #6BCC96;
}

.ora-app .btn-decrease:hover:not(:disabled),
.ora-app .btn-decrease-mobile:hover:not(:disabled) {
  background: rgba(191, 13, 13, 0.18);
  border-color: rgba(217, 26, 26, 0.55);
  color: #FF7A7A;
}

.ora-app .btn-decrease:disabled,
.ora-app .btn-increase:disabled,
.ora-app .btn-decrease-mobile:disabled,
.ora-app .btn-increase-mobile:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Barra del pozo de cartas: buscador + "solo las elegidas". */
.ora-pozo__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0 4px;
}

.ora-app .ora-pozo__barra .filtroCartas { flex-grow: 1; max-width: 420px; }

.ora-pozo__barra .soloElegidas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ora-pozo__cuenta {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ora-superficie-elevada);
  font-family: var(--ora-cifra);
  font-size: 11.5px;
  color: var(--ora-texto-secundario);
}

.soloElegidas.es-activa .ora-pozo__cuenta {
  background: rgba(255, 191, 51, 0.22);
  color: var(--ora-oro-brillo);
}

/* El pozo de cartas es una tabla de FILAS, no de bloques de texto: todo en
   la misma línea. El `vertical-align: top` general dejaba nombre, versión y
   funciones arriba y el stepper centrado, o sea a media pantalla de
   distancia; y la miniatura sin tope de alto estiraba la fila. */
.ora-app .tablaCartas > tbody > tr > td,
.ora-app .tablaCartas > thead > tr > th { vertical-align: middle; }

.ora-app .tablaCartas .carta-imagen {
  width: 64px;
  height: auto;
  display: block;
}

.ora-app .tablaCartas > tbody > tr > td { padding: 8px 12px; }

/* La versión no necesita 500 px: con el nombre del producto basta. */
.ora-app .tablaCartas .version-selector,
.ora-app .tablaCartas .bootstrap-select { max-width: 260px; }

/* Las funciones, en una sola línea que envuelve si hace falta. */
.ora-app .tablaCartas td .badge { margin: 2px 3px 2px 0; }

/* =============================================================
   Constructor: el pozo a la izquierda y el panel a la derecha.
   ============================================================= */

.ora-crear__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.ora-crear__pozo { min-width: 0; }

/* Sticky de CSS. Antes esto lo hacía el JS midiendo alturas, insertando un
   placeholder y escribiendo estilos en línea; se fue todo. */
.ora-crear__panel { position: sticky; top: 16px; }

.ora-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
}

.ora-panel__estado { display: flex; align-items: center; gap: 14px; }

.ora-panel__titulo {
  display: block;
  font-family: var(--ora-interfaz);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ora-texto);
}

.ora-panel__nota {
  display: block;
  margin-top: 3px;
  font-family: var(--ora-interfaz);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ora-texto-terciario);
}

.ora-panel__reparto {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 18px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora-panel__reparto .ora-resumen__linea { font-size: 13px; }

.ora-panel__curva,
.ora-panel__funciones,
.ora-panel__lista {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 18px;
  border-top: 1px solid var(--ora-borde-sutil);
}

/* La curva: barras dibujadas con divs, sin traer una librería para ocho
   barras que caben en 90 px de alto. */
.ora-curva { display: flex; align-items: flex-end; gap: 3px; height: 92px; }

.ora-curva__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  flex: 1;
  height: 100%;
}

.ora-curva__barra {
  width: 100%;
  min-height: 2px;
  background: var(--ora-oro);
  border-radius: 3px 3px 0 0;
}

.ora-curva__eje {
  font-family: var(--ora-cifra);
  font-size: 10px;
  color: var(--ora-texto-terciario);
}

/* Funciones de la baraja en vivo. Cada fila es un botón que filtra el pozo
   por esa función; la activa se marca en oro. */
#funcionesVivas {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 30vh;
  overflow-y: auto;
}

.ora-panel__funcion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
  text-align: left;
  cursor: pointer;
}

.ora-panel__funcion:hover { border-color: var(--ora-borde-sutil); color: var(--ora-texto); }
.ora-panel__funcion:focus-visible { outline: 2px solid var(--ora-oro); outline-offset: 1px; }

.ora-panel__funcion.es-activa {
  background: rgba(255, 191, 51, 0.15);
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro-brillo);
}

.ora-panel__funcionNombre {
  width: 112px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ora-panel__funcionPista {
  flex-grow: 1;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.ora-panel__funcionPista > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ora-oro);
}

.ora-panel__funcion b {
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--ora-cifra);
  font-weight: 400;
  color: var(--ora-texto-fuerte);
}

/* El filtro por función es un bootstrap-select con buscador: el ancho lo da
   data-width en el <select>; acá solo que no se encoja ni se salga en móvil. */
.ora-app .ora-pozo__barra .bootstrap-select { flex-shrink: 0; max-width: 100%; }

/* La lámina del pozo abre el detalle de la carta. */
.ora-app .carta-imagen.open-modal { cursor: zoom-in; }

/* La lista de la baraja puede crecer: se le da su propio scroll para que el
   panel no empuje la página. */
.ora-panel__lista #listaBaraja {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 40vh;
  overflow-y: auto;
}

.ora-panel__grupo { display: flex; flex-direction: column; gap: 4px; }

.ora-panel__grupoTit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-interfaz);
  font-size: 12px;
  font-weight: 600;
  color: var(--ora-texto-secundario);
}

.ora-panel__grupoTit b {
  margin-left: auto;
  font-family: var(--ora-cifra);
  font-weight: 400;
  color: var(--ora-texto-fuerte);
}

.ora-panel__carta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
}

.ora-panel__carta > span:first-child {
  font-family: var(--ora-cifra);
  color: var(--ora-oro);
  width: 22px;
  flex-shrink: 0;
}

.ora-panel__nombre {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ora-panel__coste {
  font-family: var(--ora-cifra);
  font-size: 11.5px;
  color: var(--ora-texto-tenue);
}

.ora-panel__vacio {
  margin: 0;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

@media (max-width: 1100px) {
  /* En angosto el panel deja de flotar y se pone arriba: leerlo importa más
     que tenerlo al lado. */
  .ora-crear__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ora-crear__panel { position: static; order: -1; }
  .ora-panel { flex-direction: row; flex-wrap: wrap; gap: 18px 32px; }
  .ora-panel__reparto,
  .ora-panel__curva { border-top: 0; padding-top: 0; }
  .ora-panel__curva { flex-grow: 1; min-width: 220px; }
  .ora-panel__funciones { width: 100%; border-top: 0; padding-top: 0; }
  .ora-panel__lista { width: 100%; }
  .ora-panel__lista #listaBaraja { max-height: none; }
}

/* La cuenta en cada pestaña del pozo. */
.ora-pest__cuenta {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ora-superficie-elevada);
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-secundario);
}

.ora-app .nav-tabs .nav-link.active .ora-pest__cuenta {
  background: rgba(255, 191, 51, 0.20);
  color: var(--ora-oro-brillo);
}

/* Con el panel al lado, el pozo tiene menos ancho: se acotan las columnas
   anchas para que el stepper no quede fuera y haya que hacer scroll lateral. */
.ora-app .tablaCartas .version-selector,
.ora-app .tablaCartas .bootstrap-select { max-width: 200px; }

.ora-app .tablaCartas th:last-child,
.ora-app .tablaCartas td:last-child { width: 1%; white-space: nowrap; }

.ora-app .tablaCartas td .badge { font-size: 10.5px; padding: 3px 8px; }



/* Pestaña Datos. */
.ora-datos { display: flex; flex-direction: column; gap: 26px; padding-top: 20px; }

.ora-datos__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.ora-datos__cifra {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
}

.ora-datos__cifra span {
  font-family: var(--ora-cifra);
  font-size: 25px;
  line-height: 1;
  color: var(--ora-oro);
}

.ora-datos__cifra small {
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ora-texto-terciario);
}

.ora-datos__graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.ora-datos .ora-paso { align-self: flex-start; }

/* =============================================================
   bootstrap-select en oscuro.

   El selector de versión de cada carta usa este plugin, que trae su
   propio panel con fondo blanco: al desplegarlo aparecía una caja
   blanca sobre el fondo de noche. El plugin lo monta fuera del
   contenedor de la página, así que estas reglas NO pueden colgar
   de .ora-app.
   ============================================================= */

.bootstrap-select > .dropdown-toggle {
  background: var(--ora-superficie) !important;
  border: 1px solid var(--ora-borde-sutil) !important;
  border-radius: 8px !important;
  color: var(--ora-texto-secundario) !important;
  font-family: var(--ora-interfaz);
  font-size: 13px;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: var(--ora-oro) !important;
  box-shadow: none !important;
}

.bootstrap-select > .dropdown-toggle::after { color: var(--ora-texto-terciario); }

.bootstrap-select .dropdown-menu {
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  padding: 6px;
}

/* El plugin reserva alto para 'data-size' aunque haya una sola opción:
   sin esto quedaba un panel casi vacío de 500 px.
   ⚠️ Con `>`: la clase .inner la llevan DOS elementos, el <div> que hace
   scroll y la <ul> de adentro. Sin el `>` la <ul> también quedaba en 320 px
   con overflow hidden y las opciones de más se cortaban sin scroll (se notó
   con las ~50 funciones del filtro del editor). */
.bootstrap-select .dropdown-menu > .inner { max-height: 320px !important; height: auto !important; }

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .dropdown-item {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ora-texto-secundario);
  font-family: var(--ora-interfaz);
  font-size: 13px;
  white-space: normal;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus {
  background: var(--ora-superficie);
  color: var(--ora-texto);
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected {
  background: rgba(255, 191, 51, 0.16);
  color: var(--ora-oro-brillo);
}

.bootstrap-select .bs-searchbox input {
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 7px;
  color: var(--ora-texto);
}

.bootstrap-select .no-results {
  background: none;
  color: var(--ora-texto-terciario);
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
}

/* El plugin y Gymove ganan en especificidad con sus propios selectores:
   el borde seguía gris claro y el texto de cada opción, azul de enlace. */
.bootstrap-select .dropdown-menu.show,
.bootstrap-select .dropdown-menu {
  border-color: var(--ora-borde-oro) !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a span.text,
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu .dropdown-item span.text {
  color: var(--ora-texto-secundario) !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.selected a span.text,
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.active span.text {
  color: var(--ora-oro-brillo) !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:hover span.text,
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:hover span.text {
  color: var(--ora-texto) !important;
}

/* La ilustración elegida: la miniatura estiraba la fila y descuadraba los
   otros dos campos. Va del alto del control, no del alto de la imagen. */
.ora-crear__ilustracion {
  align-items: center;
  min-height: 42px;
}

.ora-crear__ilustracion #selectedIllustrationPreview {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ora-crear__ilustracion #previewImage {
  width: 42px;
  height: 42px;
  max-height: none;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--ora-borde-oro);
}

.ora-crear__ilustracion #selectedIllustrationName {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Los tres ajustes se alinean por arriba: si uno crece, no arrastra a los otros. */
.ora-crear__ajustes { align-items: start; }

/* Las funciones dejan de ser una columna y viven bajo el nombre: la columna
   se comía el ancho que necesitaba el stepper, y a esa escala las insignias
   eran ruido. Recortadas, con el texto completo en el title. */
.ora-pozo__nombre {
  display: block;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-fuerte);
  line-height: 1.3;
}

/* Marca de ancho FIJO: da igual si la carta tiene una función o cinco. Los
   nombres van en el title, que es donde no descuadran nada. */
.ora-pozo__funciones {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 8px;
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 999px;
  font-family: var(--ora-interfaz);
  font-size: 11px;
  color: var(--ora-texto-terciario);
  white-space: nowrap;
  cursor: help;
}

.ora-pozo__funciones:hover { border-color: var(--ora-borde-oro); color: var(--ora-oro-ambar); }

/* Aclaración dentro de un rótulo: dice POR QUÉ los números no suman 50. */
.ora-bloque__rotulo em {
  font-family: var(--ora-lectura);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ora-texto-tenue);
}

/* Panel de Productos: son ~45, así que va con buscador y su propio scroll,
   en dos columnas para no convertirse en una tira infinita. */
.ora-menu--ancho .ora-menu__panel--productos {
  min-width: 420px;
  max-width: 92vw;
  gap: 10px;
}

.ora-menu__buscador { width: 100%; }

.ora-menu__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 30px;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}

.ora-menu__panel--productos { max-height: none; }

.ora .ora-menu__lista a {
  display: flex;
  align-items: center;
  padding: 0 8px;
  line-height: 30px;
  border-radius: 6px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ora .ora-menu__lista a:hover {
  background: var(--ora-superficie);
  color: var(--ora-texto);
}

.ora-menu__lista--vacia::after {
  content: "Ningún producto con ese nombre.";
  grid-column: 1 / -1;
  padding: 10px 8px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

@media (max-width: 700px) {
  .ora-menu--ancho .ora-menu__panel--productos { min-width: 0; width: min(340px, calc(100vw - 2 * var(--ora-margen))); }
  .ora-menu__lista { grid-template-columns: minmax(0, 1fr); }
}

/* La grilla se acomoda sola: nada de columnas por breakpoint. */
.ora-ilustra__grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.illustration-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--ora-superficie);
    border: 1px solid var(--ora-borde-sutil);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.illustration-item:hover {
    border-color: var(--ora-borde-oro);
    transform: translateY(-2px);
}

.illustration-item.selected {
    border-color: var(--ora-oro);
    box-shadow: 0 0 0 1px var(--ora-oro);
}

.illustration-item img {
    display: block;
    width: 100%;
    height: 128px;
    object-fit: cover;
}

/* La ficha se lee SIEMPRE. Antes solo aparecía al pasar el cursor, así que
   en un teléfono no había forma de saber de quién era cada ilustración. */
.illustration-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
}

.illustration-info__titulo {
    font-family: var(--ora-interfaz);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ora-texto-fuerte);
    line-height: 1.3;
}

.illustration-info__pie {
    font-family: var(--ora-interfaz);
    font-size: 11.5px;
    color: var(--ora-texto-terciario);
    line-height: 1.3;
}

/* Galería de ilustraciones (página completa) y su visor. */
.ora-ilustra__grilla--pagina {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 22px;
}

.ora-ilustra__grilla--pagina .illustration-item img { height: 150px; }

.ora-visor {
  --ora-visor-margen: 32px;
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ora-visor-margen);
}

.ora-visor[hidden] { display: none; }

/* El fondo es un <button> para que cerrar con clic afuera funcione también
   con teclado, no solo con el ratón. */
.ora-visor__fondo {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(6, 9, 20, 0.88);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}

.ora-visor__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Centrados y no estirados: si el pie es más ancho que la ilustración
     —un nombre de ilustrador largo—, estirar la imagen a ese ancho la dejaría
     con marco de sobra a los lados. */
  align-items: center;
  gap: 14px;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
}

/* Los topes se miden contra la VENTANA, no contra la caja. La caja es un
   ítem flex de ancho automático: su ancho sale de lo que tiene dentro. Con un
   `max-width: 100%` acá, ese porcentaje apuntaba a un ancho que a su vez
   dependía de la imagen — una dependencia circular que cada motor resuelve
   distinto. Chrome le pasa el ancho natural de la imagen y sale bien; WebKit
   da su aporte por indefinido, así que la caja terminaba midiendo lo que mide
   el PIE y la imagen se encogía a eso: en Safari una ilustración de 864 px se
   veía a 253 —el ancho justo de "Mauricio Herrera IA · Ragnarok · Ragnarok"—,
   y el tamaño cambiaba según lo largo que fuera el nombre del ilustrador. */
.ora-visor__caja img {
  max-width: min(1100px, calc(100vw - 2 * var(--ora-visor-margen)));
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--ora-borde-oro);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.7);
}

.ora-visor__caja figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.ora-visor__titulo {
  font-family: var(--ora-display);
  font-size: 20px;
  color: var(--ora-texto);
}

.ora-visor__pie {
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

/* Interruptor de texto para los filtros booleanos. */
.ora-interruptor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  font-weight: 400;
  color: var(--ora-texto-secundario);
  cursor: pointer;
}

.ora-interruptor input { width: 16px; height: 16px; accent-color: var(--ora-oro); cursor: pointer; }

/* Tabla de administración de versiones. */
.ora-admin__tabla {
  margin-top: 22px;
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
  overflow: auto;
}

/* El marco es block y llena el ancho; la tabla de dentro se encogía a su
   contenido y dejaba el marco medio vacío a la derecha. */
.ora-app .ora-admin__tabla .table { margin: 0; width: 100%; }
.ora-app .ora-admin__tabla th { padding: 12px 14px; }
.ora-app .ora-admin__tabla td { padding: 9px 14px; vertical-align: middle; }

.ora-admin__num {
  font-family: var(--ora-cifra);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

.ora-admin__lamina img {
  display: block;
  width: 46px;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--ora-borde-sutil);
}

.ora-admin__cuenta {
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
  white-space: nowrap;
}

.ora-app .carta-nombre {
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-fuerte);
}

/* El JS marca así los campos tocados; el amarillo de Bootstrap no se leía. */
.ora-app .changed-input {
  background: rgba(255, 191, 51, 0.14) !important;
  border-color: var(--ora-oro) !important;
  color: var(--ora-texto) !important;
}

.ora-app .producto-row.removing {
  background: rgba(191, 13, 13, 0.18);
  opacity: 0.7;
}

/* =============================================================
   select2 en oscuro.

   Tercer plugin de desplegables del proyecto (van bootstrap-select,
   el <select> nativo y este). Todos montan su panel FUERA del
   contenedor de la página, así que ninguna de estas reglas puede
   colgar de .ora-app: van al nivel raíz, como las de
   bootstrap-select más arriba.
   ============================================================= */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height: auto;
  min-height: 40px;
  padding: 4px 6px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 6px;
  color: var(--ora-texto-secundario);
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  line-height: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ora-texto-tenue);
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ora-texto-terciario); }

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ora-oro);
}

/* El panel.

   Ojo con la especificidad: no alcanza con ganarle a select2. La plantilla
   comprada (gymove/css/style.css) reestiliza el panel ABIERTO con
   `.select2-container--open .select2-dropdown{background-color:#fff}`, que es
   (0,2,0); una regla de sola clase pierde contra eso y el panel salía blanco
   aunque el borde y el resto sí tomaran el tema. */
.select2-dropdown,
.select2-container--open .select2-dropdown,
.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below {
  background: var(--ora-noche-elevada);
  background-color: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown { padding: 8px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 8px 10px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 7px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 13px;
  outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--ora-oro); }

.select2-container--default .select2-results > .select2-results__options {
  max-height: 320px;
  padding: 0 6px 6px;
}

.select2-container--default .select2-results__option {
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  color: var(--ora-texto-secundario);
  font-family: var(--ora-interfaz);
  font-size: 13px;
}

/* El azul de select2 para la opción resaltada no pinta nada acá. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--ora-superficie);
  color: var(--ora-texto);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background: rgba(255, 191, 51, 0.16);
  color: var(--ora-oro-brillo);
}

.select2-container--default .select2-results__message,
.select2-container--default .select2-results__option[role="alert"] {
  color: var(--ora-texto-terciario);
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
}

/* El <select> nativo: sus opciones las pinta el sistema, y en varios
   navegadores salen blancas si no se les da color. */
.ora select option,
.ora-app select option {
  background: var(--ora-noche-elevada);
  color: var(--ora-texto);
}

/* El menú del usuario: cuelga de su nombre, a la derecha, así que su panel
   se ancla ahí y no desde la izquierda. */
.ora-menu--usuario summary {
  font-family: var(--ora-interfaz);
  font-size: 14px;
  color: var(--ora-texto-secundario);
}

.ora-menu--usuario .ora-menu__panel {
  left: auto;
  right: -8px;
  min-width: 190px;
}

.ora-menu__filete {
  display: block;
  height: 1px;
  margin: 6px 8px;
  background: var(--ora-borde-sutil);
}

/* =============================================================
   Banlist.
   Ya no hay formatos de usuario: se muestran los dos vigentes y
   sus cartas agrupadas por edición, con el mismo banner y las
   mismas tres marcas que la app.
   ============================================================= */

.ora-banlist__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.ora-banlist__cabecera h1 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  margin-bottom: 8px;
}

.ora-banlist__bajada {
  max-width: 46ch;
  font-family: var(--ora-lectura);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ora-texto-secundario);
}

/* Selector de formato. Con dos opciones un segmentado se lee de una
   y cambia con un clic; un desplegable pediría dos. */
.ora-segmento {
  display: inline-flex;
  padding: 3px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 999px;
}

.ora-segmento__opcion {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ora-texto-secundario);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ora-segmento__opcion:hover { color: var(--ora-texto); }

.ora-segmento__opcion.es-activa {
  background: var(--ora-oro);
  color: var(--ora-noche);
}

/* Resumen del formato elegido. */
.ora-banlist__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 22px;
  margin-bottom: 30px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
}

.ora-banlist .ora-banlist__glosa {
  margin: 0;
  font-family: var(--ora-lectura);
  font-size: 16px;
  color: var(--ora-texto-fuerte);
}

/* La fecha de la última actualización. Iba en terciario y de 12 px y nadie la
   veía: ahora lleva el día en fuerte y cuánto hace, que es lo que se busca. */
.ora-banlist .ora-banlist__fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-secundario);
}

.ora-banlist__fecha b {
  font-weight: 500;
  color: var(--ora-texto-fuerte);
}

.ora-banlist__hace { color: var(--ora-texto-terciario); }

/* La ficha de la temporada reutiliza la caja de resumen de la banlist: es la
   misma información (qué reglas, cuántas cartas) con una fecha de vigencia. */
.ora-temporada__estado {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--ora-borde-sutil);
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
  vertical-align: middle;
}

.ora-temporada__estado.es-en-curso {
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro);
}

.ora-banlist__cifras a { font-family: var(--ora-interfaz); font-size: 13px; }

/* =============================================================
   La portada de la temporada (/temporadas).

   Manda la tipografía, como en el tomo: el nombre grande a la
   izquierda, la cifra contra la que se lee todo compacta a la
   derecha. Debajo, el podio con el arte del Aliado más jugado y
   todas las razas como barras que salen del 50%.
   ============================================================= */

.ora-temporada__portada {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: center;
  padding: 36px 0 40px;
}

.ora-temporada__titular { display: flex; flex-direction: column; gap: 18px; }

.ora-temporada__rotulo {
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ora-oro);
}

.ora .ora-temporada__titular h1 {
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* El selector es el título mismo: sin caja, el chevrón en oro. */
.ora-menu--temporada summary {
  gap: 14px;
  align-items: center;
  font-family: var(--ora-display);
  color: var(--ora-texto);
}

.ora-menu--temporada summary svg { flex-shrink: 0; color: var(--ora-oro); }

.ora-menu__panel--temporadas {
  left: -8px;
  min-width: 300px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

.ora .ora-menu__panel--temporadas .ora-temporada__opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  white-space: normal;
}

.ora .ora-temporada__opcion.es-activa {
  background: var(--ora-superficie);
  color: var(--ora-oro);
}

.ora-temporada__opcion-nombre { font-size: 13.5px; }

.ora-temporada__opcion-meta {
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-terciario);
}

.ora-temporada__bajada {
  max-width: 44ch;
  font-family: var(--ora-lectura);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ora-texto-secundario);
}

.ora-temporada__bajada em { color: var(--ora-texto); }

.ora-temporada__reglas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  font-family: var(--ora-cifra);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

.ora-temporada__reglas > span { display: inline-flex; align-items: center; gap: 6px; }
.ora-temporada__reglas b { font-weight: 500; color: var(--ora-texto); }
.ora-temporada__reglas a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ora-interfaz); font-size: 13px; }

.ora-temporada__lateral { display: flex; flex-direction: column; gap: 14px; }

/* Las cifras bajaron de la columna derecha de la portada a una fila propia: en
   la portada va el abanico de cartas del mes. La ventaja de empezar pesa más
   que las tres de muestra, y por eso se lleva más ancho. */
.ora-temporada__fila-cifras {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.ora-temporada__fila-cifras .ora-temporada__ventaja { flex: 1 1 360px; margin: 0; padding: 14px 18px; }
.ora-temporada__fila-cifras .ora-temporada__cifras { flex: 2 1 420px; }

/* En la fila las tres cifras conviven con el 63,5% de al lado: a 24 px se leían
   como pie de página suyo en vez de como sus iguales. */
.ora-temporada__fila-cifras .ora-temporada__cifra { font-size: 34px; }
.ora-temporada__fila-cifras .ora-temporada__cifras > div { gap: 4px; font-size: 12.5px; }

.ora-temporada__ventaja { padding: 18px 20px; gap: 14px 18px; flex-wrap: nowrap; }
.ora-temporada__ventaja .ora-stat__cifra { font-size: 40px; }
.ora-temporada__ventaja-texto { display: flex; flex-direction: column; gap: 2px; font-family: var(--ora-interfaz); font-size: 13.5px; color: var(--ora-texto-fuerte); }

.ora-temporada__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ora-temporada__cifras > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 12px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
}

.ora-temporada__cifra { font-family: var(--ora-cifra); font-size: 24px; color: var(--ora-texto); }

.ora-temporada__calculo {
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

/* ---------- las promos de Juego Organizado ----------
   Ocupan la derecha de la portada, donde antes estaban las cifras: tres cartas
   en abanico, montadas y abiertas desde abajo como en la mano. */

.ora-promos { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }

.ora-promos__abanico { display: flex; align-items: flex-end; padding: 10px 0 6px 30px; }

.ora .ora-promos__carta {
  display: block;
  width: 122px;
  margin-left: -30px;
  transform-origin: bottom center;
  transition: transform 0.18s ease;
}

.ora-promos__carta:nth-child(1) { transform: rotate(-9deg); }
.ora-promos__carta:nth-child(3) { transform: rotate(9deg); }

/* La que se mira se endereza y se levanta por sobre las otras dos. */
.ora-promos__carta:hover { transform: translateY(-8px) rotate(0deg); z-index: 2; }

.ora-promos__carta img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 141 / 203;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}

.ora-promos__nombres {
  margin: 0;
  font-family: var(--ora-lectura);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ora-texto-secundario);
}

.ora-promos__nombres strong { font-weight: 400; color: var(--ora-texto); }

.ora-promos__glosa {
  margin: 0;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

@media (prefers-reduced-motion: reduce) {
  .ora-promos__carta { transition: none; }
}

.ora-cintillo__glosa {
  font-family: var(--ora-lectura);
  font-style: italic;
  font-size: 15px;
  color: var(--ora-texto-terciario);
}

/* ---------- la lente: winrate o más jugadas ---------- */

.ora-lentes { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.ora-lente[hidden] { display: none; }

/* ---------- el podio ---------- */

.ora-podio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ora a.ora-podio__puesto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 300px;
  padding: 22px;
  overflow: hidden;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 14px;
  color: var(--ora-texto);
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.ora a.ora-podio__puesto:hover { border-color: var(--ora-borde-oro); transform: translateY(-2px); color: var(--ora-texto); }
.ora a.ora-podio__puesto.es-primero { border-color: var(--ora-borde-oro); }

/* El arte del Aliado más jugado, desvanecido hacia abajo para que el texto
   siga sobre la superficie lisa. */
.ora-podio__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.40;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  transition: transform 0.4s ease;
}

.ora a.ora-podio__puesto:hover .ora-podio__arte { transform: scale(1.04); }

.ora-podio__cabeza, .ora-podio__pie { position: relative; }
.ora-podio__cabeza { display: flex; align-items: baseline; justify-content: space-between; }
.ora-podio__numero { font-family: var(--ora-display); font-size: 44px; color: var(--ora-texto-secundario); }
.es-primero .ora-podio__numero { color: var(--ora-oro); }
.ora-podio__pie { display: flex; flex-direction: column; gap: 6px; }
.ora .ora-podio__pie h2 { font-size: 30px; }
.ora-podio__winrate { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.ora-podio__cifra { font-family: var(--ora-cifra); font-size: 34px; color: var(--ora-texto); }
.es-primero .ora-podio__cifra { color: var(--ora-oro); }
.ora-podio__contra { font-family: var(--ora-lectura); font-style: italic; font-size: 16px; color: var(--ora-texto-secundario); }
.ora-podio__barra { height: 4px; background: rgba(255, 255, 255, 0.10); border-radius: 2px; }
.ora-podio__barra > div { height: 100%; background: rgba(255, 255, 255, 0.7); border-radius: 2px; }
.es-primero .ora-podio__barra > div { background: var(--ora-oro); }

/* ---------- todas las razas contra el 50% ---------- */

.ora-temporada__dos-columnas {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px;
  align-items: stretch;
}

.ora-temporada__dos-columnas.es-una { grid-template-columns: 1fr; }

.ora-barras {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
}

.ora-barras__eje,
.ora-barras__fila {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 12px;
}

/* El de uso lleva una tercera columna con el número de partidas; el de
   winrate ya no: la cuenta vive en este. */
.ora-barras--uso .ora-barras__eje,
.ora-barras--uso .ora-barras__fila { grid-template-columns: 112px 1fr 64px; }

.ora-barras__eje {
  margin-bottom: 8px;
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ora-texto-tenue);
}

.ora-barras__eje > div { position: relative; height: 12px; }
.ora-barras__eje > div > span { position: absolute; top: 0; }
.ora-barras__eje > div > span:first-child { left: 0; }
.ora-barras__eje > div > span.es-centro { left: 50%; transform: translateX(-50%); color: rgba(255, 191, 51, 0.8); }
.ora-barras__eje > div > span:last-child { right: 0; }
.ora-barras__eje > span:last-child { white-space: nowrap; }

/* Las filas se reparten el alto: así el gráfico y la columna de al lado
   miden lo mismo aunque cambie el número de razas. */
.ora-barras__fila { flex: 1 1 0; min-height: 30px; }

.ora .ora-barras__fila > a {
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  text-align: right;
  color: var(--ora-texto-fuerte);
}

.ora .ora-barras__fila > a:hover { color: var(--ora-oro); }

.ora-barras__pista { position: relative; height: 100%; min-height: 30px; }

.ora-barras__pista::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 191, 51, 0.45);
}

.ora-barras__barra { position: absolute; top: 4px; bottom: 4px; }
.ora-barras__barra.es-sobre { left: 50%; background: var(--ora-oro); border-radius: 0 4px 4px 0; }
.ora-barras__barra.es-bajo { right: 50%; background: var(--ora-aliado); border-radius: 4px 0 0 4px; }
.ora-barras__barra.es-sobre.es-preliminar { background: repeating-linear-gradient(90deg, var(--ora-oro) 0 6px, transparent 6px 10px); }
.ora-barras__barra.es-bajo.es-preliminar { background: repeating-linear-gradient(90deg, var(--ora-aliado) 0 6px, transparent 6px 10px); }

/* ---------- las razas más jugadas: una sola serie, desde la izquierda ---------- */
.ora-barras--uso .ora-barras__pista::before { display: none; }
.ora-barras__escala { position: absolute; top: 0; bottom: 0; left: 0; right: 56px; }
.ora-barras__barra.es-uso { left: 0; background: var(--ora-oro); border-radius: 0 4px 4px 0; }
.ora-barras__barra.es-uso.es-preliminar { background: repeating-linear-gradient(90deg, var(--ora-oro) 0 6px, transparent 6px 10px); }

.ora-barras__cifra {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ora-cifra);
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--ora-texto);
}

.ora-barras__cifra > span { color: rgba(255, 255, 255, 0.4); }

.ora-barras__faltan {
  position: absolute;
  left: calc(50% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-terciario);
}

.ora-barras__partidas { font-family: var(--ora-cifra); font-size: 11px; color: var(--ora-texto-tenue); }

.ora-barras__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  color: var(--ora-texto-terciario);
}

.ora-barras__leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.ora-barras__leyenda i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.ora-barras__leyenda i.es-sobre { background: var(--ora-oro); }
.ora-barras__leyenda i.es-bajo { background: var(--ora-aliado); }
.ora-barras__leyenda i.es-uso { background: var(--ora-oro); }
.ora-barras__leyenda i.es-sobre.es-preliminar { background: repeating-linear-gradient(90deg, var(--ora-oro) 0 3px, transparent 3px 5px); }

/* ---------- qué cambió ---------- */

.ora-cambios { display: flex; flex-direction: column; gap: 10px; }

.ora a.ora-cambios__tarjeta {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
  color: var(--ora-texto);
  transition: border-color 0.16s ease;
}

.ora a.ora-cambios__tarjeta:hover { border-color: var(--ora-borde-oro); color: var(--ora-texto); }
.ora a.ora-cambios__tarjeta.es-sube:first-of-type { border-color: var(--ora-borde-oro); }

.ora-cambios__raza { display: flex; flex-direction: column; }
.ora-cambios__raza b { font-family: var(--ora-display); font-weight: 400; font-size: 18px; }
.ora-cambios__delta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ora-cifra); font-size: 18px; }
.es-sube .ora-cambios__delta { color: #6BCC96; }
.es-baja .ora-cambios__delta { color: #FF4C4C; }
.ora-cambios__nota { font-family: var(--ora-lectura); font-style: italic; font-size: 13.5px; color: var(--ora-texto-terciario); }

.ora-temporada__portada.es-sola { grid-template-columns: 1fr; }

@media (max-width: 1000px) {
  .ora-temporada__portada { grid-template-columns: 1fr; gap: 28px; }
  .ora-podio { grid-template-columns: 1fr; }
  .ora-temporada__dos-columnas { grid-template-columns: 1fr; }
  .ora-barras__eje, .ora-barras__fila { grid-template-columns: 88px 1fr; }
  .ora-barras--uso .ora-barras__eje, .ora-barras--uso .ora-barras__fila { grid-template-columns: 88px 1fr 44px; }
  .ora-barras__escala { right: 48px; }
}

.ora-banlist__cifras {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.ora-banlist__cifras li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-secundario);
}

.ora-banlist__cifras b {
  font-family: var(--ora-cifra);
  font-size: 15px;
  font-weight: 500;
  color: var(--ora-texto);
}

/* La marca de cada restricción. Nunca va sola: al lado siempre hay
   el número y la palabra, así que el color no carga el significado. */
.ora-banlist__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--ora-interfaz);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.es-prohibida  .ora-banlist__marca { background: rgba(217, 26, 26, 0.22);  color: #FF6B6B; }
.es-limitada1  .ora-banlist__marca { background: rgba(217, 140, 31, 0.22); color: #E8A93D; }
.es-limitada2  .ora-banlist__marca { background: rgba(255, 191, 51, 0.20); color: var(--ora-oro); }

/* Una edición. */
.ora-banlist__edicion {
  margin-bottom: 30px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 14px;
  overflow: hidden;
}

/* El banner es la misma ilustración que muestra la app. Trae el nombre
   de la edición dentro del arte y fondos claros, así que se apoya con
   un velo abajo para que el rótulo se lea y la tira no corte en seco.
   El alto lo manda la imagen (todas son 1400x463): con un alto fijo y
   object-fit: cover se recortaba arriba y abajo y el titulo del arte
   quedaba mochado. El aspect-ratio va en la imagen para que el hueco
   este reservado antes de que cargue (loading="lazy") y no salte. */
.ora-banlist__banner {
  position: relative;
  background: var(--ora-mistico-inicio);
}

.ora-banlist__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 463;
  object-fit: contain;
}

/* Velo solo en la franja del rotulo: medido en px desde abajo, no en %,
   para que en un banner alto no se coma la mitad del arte. */
.ora-banlist__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--ora-noche-elevada) 0,
    rgba(13, 18, 36, 0.55) 34px,
    rgba(13, 18, 36, 0) 78px);
}

.ora-banlist__banner.sin-banner {
  background: linear-gradient(135deg, var(--ora-mistico-inicio), var(--ora-mistico-fin));
  height: 84px;
}

.ora-banlist__rotulo {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ora-banlist__edicionNombre {
  font-family: var(--ora-display);
  font-size: 21px;
  color: var(--ora-texto);
  text-shadow: 0 1px 6px rgba(13, 18, 36, 0.9);
}

.ora-banlist__edicionCuenta {
  font-family: var(--ora-cifra);
  font-size: 12px;
  color: var(--ora-texto-fuerte);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(13, 18, 36, 0.9);
}

.ora-banlist__cuerpo { padding: 4px 22px 22px; }

.ora-banlist__bloque { padding: 18px 0; }
.ora-banlist__bloque + .ora-banlist__bloque { border-top: 1px solid var(--ora-borde-sutil); }

.ora-banlist__encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ora-banlist__titulo {
  font-family: var(--ora-interfaz);
  font-size: 14px;
  font-weight: 600;
  color: var(--ora-texto);
}

.ora-banlist__nota {
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

.ora-banlist__cuenta {
  margin-left: auto;
  font-family: var(--ora-cifra);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

.ora-banlist__cartas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 16px 14px;
}

.ora a.ora-banlist__carta {
  display: block;
  color: var(--ora-texto-secundario);
}

.ora a.ora-banlist__carta:hover { color: var(--ora-texto); }

.ora-banlist__lamina {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ora-borde-sutil);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ora-banlist__carta:hover .ora-banlist__lamina {
  transform: translateY(-3px);
  border-color: var(--ora-borde-oro);
}

.ora-banlist__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 141 / 203;
  object-fit: cover;
}

/* El sello repite la marca sobre la lámina: el nombre de la carta ya
   dice cuál es, esto dice cuántas copias caben. */
.ora-banlist__sello {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-family: var(--ora-interfaz);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  box-shadow: 0 1px 4px rgba(13, 18, 36, 0.8);
}

.es-prohibida .ora-banlist__sello { background: #D91A1A; }
.es-limitada1 .ora-banlist__sello { background: #D98C1F; }
.es-limitada2 .ora-banlist__sello { background: var(--ora-oro); color: var(--ora-noche); }

.ora-banlist__nombre {
  display: block;
  margin-top: 6px;
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  line-height: 1.35;
  color: inherit;
}

@media (max-width: 720px) {
  .ora-banlist__cuerpo { padding: 4px 16px 18px; }
  .ora-banlist__rotulo { left: 16px; right: 16px; }
  .ora-banlist__cartas { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 14px 10px; }
  .ora-banlist__resumen { padding: 14px 16px; }
  .ora-segmento { width: 100%; }
  .ora-segmento__opcion { flex: 1; }
}

/* =============================================================
   Autocompletar del buscador de la barra.

   El panel lo dibuja jQuery UI y lo cuelga del <body>, así que su
   hoja (jquery-ui.min.css) lo deja blanco. Estas reglas van
   DESPUÉS y le ganan; el tamaño de la miniatura vivía suelto en
   un <style> de _LayoutOraculo y por eso en el shell nuevo la
   carta salía a tamaño natural.
   ============================================================= */

.ui-autocomplete.ui-menu {
  z-index: 1200;
  max-height: 380px;
  padding: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  font-family: var(--ora-interfaz);
}

.ui-autocomplete.ui-menu .ui-menu-item { list-style: none; }

.ui-autocomplete .ac-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ora-texto-fuerte);
  cursor: pointer;
}

/* El teclado marca .ui-state-active; el ratón, :hover. Las dos igual. */
.ui-autocomplete .ac-item:hover,
.ui-autocomplete .ac-item.ui-state-active {
  background: var(--ora-superficie-elevada);
  border: 0;
  margin: 0;
  color: var(--ora-texto);
}

.ui-autocomplete .ac-thumb {
  display: block;
  width: 34px;
  height: 49px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--ora-borde-sutil);
}

.ui-autocomplete .ac-thumb.placeholder { background: var(--ora-superficie); }

.ui-autocomplete .ac-text { display: block; min-width: 0; }

.ui-autocomplete .ac-name {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  color: inherit;
}

.ui-autocomplete .ac-edition {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ora-texto-terciario);
}

/* La coincidencia se marca con el oro de la casa, no con el resaltador
   amarillo que traía de antes. */
.ui-autocomplete .ac-match {
  color: var(--ora-oro);
  font-weight: 600;
  background: transparent;
}

/* El aviso que jQuery UI le lee al lector de pantalla ("3 resultados").
   Se saca de la vista sin sacarlo del árbol de accesibilidad: con
   display:none dejaría de anunciarse. */
.ui-helper-hidden-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   Formularios largos: perfil y creación de listas.
   Los campos sueltos (.ora-campo) ya venían de las pantallas de
   cuenta; acá se agrega lo que aquellas no necesitaban —select,
   archivo, nota bajo el campo y rejilla de dos columnas.
   ============================================================= */

.ora-form--angosta { max-width: 420px; }

/* Dos columnas en pantalla ancha; los campos largos ocupan la fila. */
.ora-form--rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  align-items: start;
}

.ora-campo--ancho { grid-column: 1 / -1; }

.ora-form__pie {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.ora-campo select,
.ora-campo textarea {
  color-scheme: dark;
  width: 100%;
  padding: 12px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 14.5px;
}

/* El <select> nativo se dimensiona solo y no respeta el padding: al lado de un
   <input> quedaba 15 px más bajo, y con las flechitas del sistema. Apagando la
   apariencia nativa vuelve a ser una caja normal —misma altura que el input— y
   la flecha la pone la hoja, en el gris del resto de la interfaz.

   Vale para los sitios donde hay un select nuestro: los formularios de perfil
   y listas (.ora-campo), el filtro del catálogo público (.ora-filtro-casos), y
   los de las páginas y modales heredados, que marcan sus campos con
   .form-control. Los que bootstrap-select convierte en
   widget no entran acá: ese tiene su propio bloque más abajo. */
.ora-campo select,
.ora-filtro-casos select,
.ora-app select.form-control,
.ora-app select.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B3B3BF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Un select MÚLTIPLE es una lista, no un desplegable: ni flecha ni hueco. */
.ora-app select.form-control[multiple],
.ora-app select.form-select[multiple] {
  padding-right: 12px;
  background-image: none;
  cursor: default;
}

/* La bio se escribe a varias líneas: se lee con la tipografía de lectura y
   solo crece a lo alto. */
.ora-campo textarea {
  min-height: 96px;
  resize: vertical;
  font-family: var(--ora-lectura);
  font-size: 16px;
  line-height: 1.5;
}

.ora-campo textarea::placeholder { color: var(--ora-texto-tenue); }

/* background-color y no el atajo: 'background' borraría la flecha del select. */
.ora-campo select:focus,
.ora-filtro-casos select:focus,
.ora-campo textarea:focus {
  outline: none;
  background-color: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
}

/* El selector de archivo: el botón que dibuja el navegador es lo único
   que se puede vestir, y sin esto sale blanco sobre el panel oscuro. */
.ora-campo input[type="file"] {
  color-scheme: dark;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ora-texto-secundario);
}

.ora-campo input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  background: var(--ora-superficie-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 7px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  cursor: pointer;
}

.ora-campo input[type="file"]::file-selector-button:hover {
  background: var(--ora-superficie-flotante);
  border-color: var(--ora-borde-oro);
}

/* La condición del campo va DEBAJO, no en un placeholder que desaparece
   al escribir. */
.ora-campo__nota {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ora-texto-terciario);
}

.ora-campo__rotulo {
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ora-texto-secundario);
}

/* Una casilla que además explica qué pasa al marcarla. */
.ora-interruptor--bloque {
  align-items: flex-start;
  height: auto;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
}

.ora-interruptor--bloque > span { display: flex; flex-direction: column; gap: 3px; }
.ora-interruptor--bloque b { font-size: 13.5px; font-weight: 600; color: var(--ora-texto); }

/* =============================================================
   Mi perfil.
   Tres tareas cortas, una debajo de otra. Eran pestañas.
   ============================================================= */

.ora-perfil { max-width: 780px; }

.ora-perfil h1 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  margin-bottom: 8px;
}

.ora p.ora-perfil__bajada {
  max-width: 52ch;
  font-family: var(--ora-lectura);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ora-texto-secundario);
}

.ora-perfil__seccion { margin-top: 44px; }
.ora-perfil__seccion .ora-cintillo { margin-bottom: 24px; }
.ora-perfil__seccion .ora-aviso { margin-bottom: 22px; }

/* La imagen de perfil, al lado de su campo: se compara lo que hay con lo
   que se va a subir sin tener que bajar la vista. */
.ora-avatar {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.ora-avatar__marco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ora-mistico-inicio), var(--ora-mistico-fin));
  border: 1px solid var(--ora-borde-sutil);
}

.ora-avatar__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ora-avatar__marco img[hidden] { display: none; }

/* Mientras no hay imagen: la inicial, que es lo que dibuja la app. */
.ora-avatar__inicial {
  font-family: var(--ora-display);
  font-size: 52px;
  line-height: 1;
  color: var(--ora-oro);
}

.ora-avatar__campos { display: flex; flex-direction: column; gap: 14px; }

/* Quitar no es una acción de igual peso que guardar: va de enlace. */
.ora-avatar__quitar {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ora-interfaz);
}

/* El logo de la tienda al lado del campo, no debajo: se compara lo que
   hay con lo que se va a subir. */
.ora-tiendaform {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ora-tiendaform__logo { display: flex; flex-direction: column; gap: 9px; }

.ora-tiendaform__logo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
}

.ora-tiendaform__vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--ora-superficie);
  border: 1px dashed var(--ora-borde-sutil);
  border-radius: 10px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-tenue);
}

.ora-tiendaform__campos { display: flex; flex-direction: column; gap: 18px; }

/* =============================================================
   Mis listas.
   Una tarjeta por lista, como las barajas. Era una tabla.
   ============================================================= */

.ora-listas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.ora-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.ora-lista:hover { border-color: var(--ora-borde-oro); transform: translateY(-2px); }

.ora-lista__texto { display: flex; flex-direction: column; gap: 10px; }

.ora a.ora-lista__titulo {
  font-family: var(--ora-display);
  font-size: 20px;
  line-height: 1.22;
  color: var(--ora-texto);
}

.ora a.ora-lista__titulo:hover { color: var(--ora-oro); }

.ora-lista__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ora-lista__meta .ora-ficha { padding: 4px 9px; font-size: 11.5px; }

.ora-ficha--tenue { color: var(--ora-texto-terciario); }

.ora .ora-lista__glosa {
  margin: 0;
  font-family: var(--ora-lectura);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ora-texto-secundario);
}

.ora .ora-lista__glosa--suelta { max-width: 56ch; margin-top: 8px; }

.ora-lista__pie {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora-lista__estado {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

.ora-lista__precio { font-family: var(--ora-cifra); color: var(--ora-oro); }

/* La fila de iconos comparte estilo con la tarjeta de baraja; solo le
   falta el borde de arriba cuando va dentro de una tabla. */
.ora-lista__acciones { border-top: 0; padding-top: 0; }
.ora-lista .ora-lista__acciones { padding-top: 12px; border-top: 1px solid var(--ora-borde-sutil); }

.ora .ora-lista__acciones a.es-ocupado { opacity: 0.4; pointer-events: none; }

/* Barra de "hay cambios sin guardar" en la administración de una tienda.
   Antes era un botón siempre visible y siempre apagado. */
.ora-guardar {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-bottom: 18px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.ora-guardar[hidden] { display: none; }

.ora-guardar__nota {
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-secundario);
}

.ora-guardar__nota b { font-family: var(--ora-cifra); color: var(--ora-oro); }

/* El segmentado de la lista, sobre la galería. */
.ora-segmento--vistas { margin-bottom: 20px; }

@media (max-width: 720px) {
  .ora-form--rejilla { grid-template-columns: minmax(0, 1fr); }
  .ora-avatar { grid-template-columns: minmax(0, 1fr); }
  .ora-tiendaform { grid-template-columns: minmax(0, 1fr); }
  .ora-tiendaform__logo { max-width: 150px; }
  .ora-listas { grid-template-columns: minmax(0, 1fr); }
  .ora-guardar { position: static; }
}


/* =============================================================
   Panel de administración.
   ============================================================= */

.ora-admin__panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

/* Las tres del día a día ocupan más y se leen antes. */
.ora-admin__panel--destacado {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ora a.ora-herramienta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
  color: var(--ora-texto-secundario);
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.ora a.ora-herramienta:hover {
  border-color: var(--ora-borde-oro);
  transform: translateY(-2px);
  color: var(--ora-texto-secundario);
}

.ora-herramienta__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 3px;
  border-radius: 9px;
  background: var(--ora-superficie-elevada);
  color: var(--ora-oro);
  font-size: 15px;
}

.ora-herramienta__nombre {
  font-family: var(--ora-display);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ora-texto);
}

.ora-herramienta:hover .ora-herramienta__nombre { color: var(--ora-oro); }

.ora-herramienta__glosa {
  font-family: var(--ora-lectura);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ora-texto-terciario);
}

/* Las de abajo se abren de vez en cuando: mismo lenguaje, menos peso. */
.ora a.ora-herramienta--chica { padding: 16px 18px; gap: 7px; }
.ora-herramienta--chica .ora-herramienta__icono { width: 30px; height: 30px; font-size: 13px; }
.ora-herramienta--chica .ora-herramienta__nombre { font-family: var(--ora-interfaz); font-size: 14.5px; font-weight: 600; }
.ora-herramienta--chica .ora-herramienta__glosa { font-family: var(--ora-interfaz); font-size: 12.5px; }


/* Tiras de cifras del panel: una cifra grande, qué es, y el matiz debajo. */
.ora-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.ora-cifra-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 20px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
}

.ora-cifra-tarjeta__num {
  font-family: var(--ora-cifra);
  font-size: 30px;
  line-height: 1.05;
  color: var(--ora-oro);
}

.ora-cifra-tarjeta__rotulo {
  font-family: var(--ora-interfaz);
  font-size: 13px;
  font-weight: 500;
  color: var(--ora-texto-fuerte);
}

.ora-cifra-tarjeta__nota {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

/* Los gráficos del panel se acomodan solos; los anchos piden dos huecos. */
.ora-graficos--admin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

@media (min-width: 900px) {
  .ora-graficos--admin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ora-grafico--ancho { grid-column: span 2; }
  .ora-grafico--entero { grid-column: 1 / -1; }
}


/* --- Reportes de cartas --- */

/* El segmentado de estados: cada uno lleva su cuenta al lado. */
.ora-segmento--estados { flex-wrap: wrap; margin: 4px 0 26px; }

.ora .ora-segmento__opcion { text-decoration: none; }

.ora-segmento__cuenta {
  margin-left: 6px;
  font-family: var(--ora-cifra);
  font-size: 12px;
  opacity: 0.75;
}

.ora-reportes { display: flex; flex-direction: column; gap: 12px; }

.ora-reporte {
  padding: 16px 18px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-left: 3px solid transparent;
  border-radius: 10px;
}

/* Lo que nadie ha mirado todavía se distingue sin tener que leer el sello. */
.ora-reporte.es-viva { border-left-color: var(--ora-oro); }

.ora-reporte__cabecera {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.ora a.ora-reporte__carta {
  font-family: var(--ora-display);
  font-size: 18px;
  color: var(--ora-texto);
}

.ora a.ora-reporte__carta:hover { color: var(--ora-oro); }

.ora-reporte__meta {
  margin-left: auto;
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

.ora .ora-reporte__comentario {
  margin: 0 0 12px;
  font-family: var(--ora-lectura);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ora-texto-fuerte);
  white-space: pre-wrap;
}

.ora-reporte__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.ora-reporte__acciones:empty { display: none; }
.ora-reporte__acciones .ora-boton { padding: 7px 14px; font-size: 12.5px; }

/* Un sello de estado. Nunca va solo: siempre lleva su palabra. */
.ora-sello {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  white-space: nowrap;
}

.ora-sello.es-pendiente { background: rgba(255,191,51,0.16);  border-color: var(--ora-borde-oro);        color: var(--ora-oro); }
.ora-sello.es-motor     { background: rgba(51,115,204,0.20);  border-color: rgba(51,115,204,0.55);      color: #7FA8E8; }
.ora-sello.es-app       { background: rgba(115,51,166,0.22);  border-color: rgba(115,51,166,0.55);      color: #B98CE8; }
.ora-sello.es-revisado  { background: rgba(51,204,102,0.16);  border-color: rgba(51,204,102,0.45);      color: #6BCC96; }

/* La resolución no es un estado más: es la conclusión, y va en la voz de la web
   pública. Por eso su sello es neutro y no compite con el semáforo de estado. */
.ora-sello.es-resolucion { background: rgba(255,255,255,0.10); border-color: var(--ora-borde); color: var(--ora-texto-secundario); }
.ora-sello.es-oculto     { background: rgba(217,26,26,0.12);   border-color: rgba(217,26,26,0.45); color: #E8827F; }

.ora-reporte__replay {
  align-self: center;
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
}

/* Lo ya publicado, tal cual lo lee el jugador: verlo con su propio marco es la
   única forma de notar que quedó escrito en jerga del repo. */
.ora-resolucion {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(51,204,102,0.07);
  border-left: 2px solid rgba(51,204,102,0.45);
  border-radius: 0 8px 8px 0;
}

.ora-resolucion__rotulo {
  display: block;
  margin-bottom: 5px;
  font-family: var(--ora-interfaz);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

.ora .ora-resolucion__texto {
  margin: 0;
  font-family: var(--ora-lectura);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ora-texto-fuerte);
  white-space: pre-wrap;
}

.ora-resolucion__pie {
  display: block;
  margin-top: 7px;
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

/* El formulario de resolución vive dentro de la ficha del reporte: el
   comentario del jugador tiene que quedar a la vista mientras se escribe. */
.ora-resolver {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora-resolver[hidden] { display: none; }

.ora-resolver__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.ora-resolver__fila .ora-campo[hidden] { display: none; }

.ora-campo__nota {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
}

.ora-resolver__pie {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ora-resolver__cuenta {
  margin-left: auto;
  font-family: var(--ora-cifra);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

.ora-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-secundario);
  cursor: pointer;
}

.ora-check input { accent-color: var(--ora-oro); width: 16px; height: 16px; }

/* --- Partidas en vivo --- */

/* Colores de estado de la página: aclarados para leerse sobre la noche. */
.ora-partidas,
.ora-confirmar {
  --ora-vivo: #4ADE80;
  --ora-lento: #FACC15;
  --ora-callado: #FB923C;
  --ora-caido: #F87171;
  --ora-maquina: #7FA8E8;
}

.ora-partidas__vivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-family: var(--ora-cifra);
  font-size: 12px;
  color: var(--ora-texto-secundario);
}
.ora-partidas__pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--ora-vivo); }
.ora-partidas__vivo.es-pausa .ora-partidas__pulso { background: var(--ora-lento); }
.ora-partidas__vivo.es-caido .ora-partidas__pulso { background: var(--ora-caido); }
.ora-partidas__vivo.es-caido { color: #FCA5A5; }

.ora-partidas .ora-boton { min-height: 44px; }

/* El veredicto de "¿puedo desplegar?": lo primero que se mira acá. */
.ora-veredicto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 26px 30px;
  margin: 4px 0 24px;
  border-radius: 16px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
}
.ora-veredicto.es-rojo  { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.40); --ora-veredicto: var(--ora-caido); }
.ora-veredicto.es-verde { background: rgba(74,222,128,0.08);  border-color: rgba(74,222,128,0.35);  --ora-veredicto: var(--ora-vivo); }

.ora-veredicto__icono {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ora-veredicto, var(--ora-borde));
  color: var(--ora-noche);
}
.ora .ora-veredicto__titulo {
  margin: 0 0 4px;
  font-family: var(--ora-display);
  font-size: 30px;
  line-height: 1.15;
  color: var(--ora-veredicto, var(--ora-texto));
}
.ora .ora-veredicto__texto {
  margin: 0;
  max-width: 64ch;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ora-texto-fuerte);
}
.ora-veredicto__lado,
.ora a.ora-veredicto__lado {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 340px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(13,18,36,0.55);
  border: 1px solid var(--ora-borde-sutil);
  color: var(--ora-texto);
  text-decoration: none;
}
.ora a.ora-veredicto__lado.es-callada { border-color: rgba(251,146,60,0.45); }
.ora a.ora-veredicto__lado.es-callada:hover { border-color: var(--ora-callado); }
.ora-veredicto__rotulo {
  font-family: var(--ora-interfaz);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ora-texto-secundario);
}
.ora-veredicto__lado.es-callada .ora-veredicto__rotulo { color: #FDBA74; }
.ora-veredicto__cifra { font-family: var(--ora-cifra); font-size: 19px; }
.ora-veredicto__nota { font-family: var(--ora-interfaz); font-size: 13px; line-height: 1.45; color: var(--ora-texto-secundario); }

.ora-partidas__clave.es-rojo  { border-color: rgba(248,113,113,0.45); }
.ora-partidas__clave.es-rojo  .ora-cifra-tarjeta__num { color: var(--ora-caido); }
.ora-partidas__clave.es-verde { border-color: rgba(74,222,128,0.40); }
.ora-partidas__clave.es-verde .ora-cifra-tarjeta__num { color: var(--ora-vivo); }

.ora-partidas__orden {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

/* Las salas: una grilla por fila, que en el teléfono se vuelve tarjeta. */
.ora-salas { font-family: var(--ora-interfaz); }

.ora-sala {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 150px 120px 210px 200px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  scroll-margin-top: 90px;
}
.ora-sala.es-callada { background: rgba(251,146,60,0.08); border-color: rgba(251,146,60,0.35); }
.ora-sala:target { border-color: var(--ora-oro); }

.ora-sala--cabecera {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ora-borde-sutil);
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

.ora-salas__grupo { padding-top: 18px; }
.ora .ora-salas__titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 18px;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  font-weight: 600;
  color: var(--ora-texto);
}
.ora-salas__cuenta { font-family: var(--ora-cifra); font-size: 13px; font-weight: 400; color: var(--ora-texto-secundario); }
.ora-salas__nota { font-size: 13px; font-weight: 400; color: var(--ora-texto-terciario); }
.ora .ora-salas__vacio {
  margin: 0 0 6px;
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed var(--ora-borde-sutil);
  font-size: 14px;
  color: var(--ora-texto-secundario);
}

.ora-sala__id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ora-sala__codigo { font-family: var(--ora-cifra); font-size: 14px; color: var(--ora-texto); }
.ora-sala__marcas { display: flex; flex-wrap: wrap; gap: 6px; }

.ora-ficha-sala {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  font-size: 11px;
  color: var(--ora-texto-fuerte);
}
.ora-ficha-sala.es-nueva   { background: rgba(255,191,51,0.16); color: var(--ora-oro-brillo); }
.ora-ficha-sala.es-callada { background: rgba(251,146,60,0.18); color: #FDBA74; font-weight: 600; }

.ora-sala__jugadores { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ora-asiento { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.ora-asiento__punto {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ora-texto-terciario);
}
.ora-asiento__nombre { font-weight: 500; color: var(--ora-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ora-asiento__estado { font-size: 12px; color: var(--ora-texto-secundario); white-space: nowrap; }
.ora-asiento.es-presente .ora-asiento__punto { background: var(--ora-vivo); box-shadow: 0 0 0 3px rgba(74,222,128,0.18); }
.ora-asiento.es-ausente  .ora-asiento__punto { background: #64748B; box-shadow: 0 0 0 3px rgba(100,116,139,0.20); }
.ora-asiento.es-caido    .ora-asiento__punto { background: var(--ora-caido); box-shadow: 0 0 0 3px rgba(248,113,113,0.20); }
.ora-asiento.es-caido    .ora-asiento__estado { color: #FCA5A5; }
.ora-asiento.es-bot      .ora-asiento__punto { background: var(--ora-maquina); box-shadow: 0 0 0 3px rgba(127,168,232,0.20); }
.ora-asiento.es-vacio    .ora-asiento__punto { background: none; box-shadow: inset 0 0 0 1.5px var(--ora-texto-terciario); }

.ora-sala__fase { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ora-texto); }
.ora-sala__sub { font-family: var(--ora-cifra); font-size: 12px; color: var(--ora-texto-secundario); }

.ora-sala__dato { display: flex; flex-direction: column; gap: 6px; }
.ora-sala__etiqueta { display: none; }
.ora-sala__linea { display: flex; align-items: center; gap: 8px; }
.ora-sala__cifra { font-family: var(--ora-cifra); font-size: 14px; color: var(--ora-texto-fuerte); }
.ora-sala__silencio.es-viva    { --ora-silencio: var(--ora-vivo); }
.ora-sala__silencio.es-lenta   { --ora-silencio: var(--ora-lento); }
.ora-sala__silencio.es-callada { --ora-silencio: var(--ora-callado); }
.ora-sala__silencio .ora-sala__cifra { color: var(--ora-silencio, var(--ora-texto-terciario)); }
.ora-sala__barra { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.10); overflow: hidden; }
.ora-sala__barra > span { display: block; height: 100%; background: var(--ora-silencio, transparent); }

.ora-sala__acciones { display: flex; justify-content: flex-end; gap: 8px; text-align: right; }
.ora-sala__boton,
.ora-sala__eliminar {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.ora-sala__boton {
  padding: 0 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde);
  color: var(--ora-texto);
  white-space: nowrap;
}
.ora-sala__boton:hover { border-color: var(--ora-oro); background: var(--ora-superficie-elevada); }
.ora-sala__eliminar {
  width: 44px;
  flex-shrink: 0;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.35);
  color: #FCA5A5;
}
.ora-sala__eliminar:hover { background: rgba(248,113,113,0.18); border-color: var(--ora-caido); }

.ora-partidas__glosas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* Confirmación de cerrar o eliminar: la mesa tal como estaba al abrirla. */
.ora-confirmar {
  width: min(520px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 28px;
  border-radius: 18px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
}
.ora-confirmar::backdrop { background: rgba(6,9,20,0.78); }
.ora-confirmar__meta { margin: 0 0 6px; font-family: var(--ora-cifra); font-size: 12px; color: var(--ora-texto-secundario); }
.ora-confirmar__titulo { margin: 0 0 18px; font-family: var(--ora-display); font-weight: 400; font-size: 28px; color: var(--ora-texto); }
.ora-confirmar__mesa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
}
.ora-confirmar__mesa:empty { display: none; }
.ora-confirmar__silencio { margin: 2px 0 0; font-size: 13px; color: #FDBA74; }
.ora-confirmar__texto { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--ora-texto-fuerte); }
.ora-confirmar__botones { display: flex; justify-content: flex-end; gap: 10px; }
.ora-confirmar .ora-boton { min-height: 44px; gap: 8px; }
.ora-confirmar .ora-boton.es-peligro { background: #DC2626; color: #FFFFFF; }
.ora-confirmar .ora-boton.es-peligro:hover { background: #B91C1C; color: #FFFFFF; }

@media (max-width: 1100px) {
  .ora-veredicto { grid-template-columns: auto minmax(0, 1fr); }
  .ora-veredicto__lado,
  .ora a.ora-veredicto__lado { grid-column: 1 / -1; max-width: none; }
}

/* Teléfono: cada sala es una tarjeta y los datos llevan su rótulo. */
@media (max-width: 900px) {
  .ora-veredicto { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 14px; }
  .ora-veredicto__icono { display: none; }
  .ora .ora-veredicto__titulo { font-size: 24px; }
  .ora-sala--cabecera { display: none; }
  .ora-sala {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
  }
  .ora-sala__id { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ora-sala__fase { align-items: flex-end; text-align: right; }
  .ora-sala__jugadores,
  .ora-sala__acciones { grid-column: 1 / -1; }
  .ora-sala__etiqueta { display: block; font-size: 11px; color: var(--ora-texto-secundario); }
  .ora-sala__boton { flex-grow: 1; }
  .ora-partidas__glosas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ora-partidas__orden { display: none; }
}

.ora .ora-glosa {
  max-width: 78ch;
  margin-top: 18px;
  font-family: var(--ora-lectura);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ora-texto-terciario);
}

.ora .ora-glosa strong { color: var(--ora-texto-secundario); }

/* ------------------------------------------------------------------
   Estado de las cartas — la vista pública de las resoluciones.
   La lee un jugador que llega con una duda ("¿esto es un bug?"), no un
   administrador: manda la conclusión, y el estado del trabajo va detrás.
   ------------------------------------------------------------------ */

.ora .ora-parrafo-guia {
  max-width: 68ch;
  margin: 0 0 20px;
  font-family: var(--ora-lectura);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
}

.ora-filtro-casos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
}

.ora .ora-filtro-casos input[type="search"] {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 11px 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 14.5px;
}

.ora .ora-filtro-casos input[type="search"]:focus {
  outline: none;
  border-color: var(--ora-oro);
}

/* background-color y no el atajo: 'background' borraría la flecha que le pone
   la regla de más arriba. El tamaño iguala al del input de al lado. */
.ora .ora-filtro-casos select {
  color-scheme: dark;
  padding: 11px 14px;
  background-color: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 14.5px;
  line-height: 1.2;
}

.ora-casos { display: flex; flex-direction: column; gap: 12px; }

/* Una ficha por caso, y nada más que la ficha: la lámina, lo que dijo el
   jugador, el sello con el tipo de conclusión y en qué versión quedó. La
   explicación escrita no se muestra todavía — hasta que las respuestas tengan
   un formato estándar, publicar el texto tal cual es publicar prosa desigual. */
.ora-caso {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 10px;
}

.ora a.ora-caso--enlace { color: inherit; text-decoration: none; }

.ora a.ora-caso--enlace:hover {
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-borde-oro);
}

.ora-caso__lamina {
  width: 54px;
  height: 78px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 5px;
  background: rgba(0,0,0,0.25);
}

.ora-caso__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ora-caso__cabecera {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ora-caso__carta,
.ora a.ora-caso__carta {
  font-family: var(--ora-display);
  font-size: 17px;
  color: var(--ora-texto);
}

.ora a.ora-caso__carta:hover { color: var(--ora-oro); }

/* Lo que escribió el jugador: se lee como cita, no como conclusión nuestra. */
.ora .ora-caso__comentario {
  margin: 0;
  font-family: var(--ora-lectura);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ora-texto-secundario);
  overflow-wrap: anywhere;
}

.ora .ora-caso__comentario::before { content: "“"; }
.ora .ora-caso__comentario::after  { content: "”"; }

.ora-caso__meta {
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}

/* En revisión: los reportes de la carta, uno debajo del otro, separados por un
   filete. El propio lleva el borde en oro para encontrarlo de un vistazo. */
.ora-caso__reportes {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ora-caso__reporte {
  padding: 8px 0 0 12px;
  border-left: 2px solid var(--ora-borde-sutil);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ora-caso__reporte.es-mio { border-left-color: var(--ora-borde-oro); }

.ora-caso__reporte .ora-caso__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* El sello de la conclusión. El color dice de qué tipo es sin leerla: ámbar
   "era un error nuestro", verde "el juego tenía razón", azul "lo explicamos
   mejor". Nunca va solo: siempre lleva su palabra. */
.ora-sello.es-bug     { background: rgba(217,140,31,0.18); border-color: rgba(217,140,31,0.55); color: #E8B45C; }
.ora-sello.es-reglas  { background: rgba(51,204,102,0.16); border-color: rgba(51,204,102,0.45); color: #6BCC96; }
.ora-sello.es-texto   { background: rgba(51,115,204,0.20); border-color: rgba(51,115,204,0.55); color: #7FA8E8; }
.ora-sello.es-neutro  { background: rgba(255,255,255,0.10); border-color: var(--ora-borde); color: var(--ora-texto-secundario); }
/* "Lo reportaste tú": lo único que se dice de quién reportó, y solo a esa
   persona. Oro, como todo lo que es del jugador que mira. */
.ora-sello.es-mio     { background: rgba(255,191,51,0.16); border-color: var(--ora-borde-oro); color: var(--ora-oro); }

.ora-paginacion {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 8px;
}

.ora-paginacion__cuenta {
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

/* =============================================================
   Estadísticas PvP.

   Regla de la sección: ningún porcentaje aparece solo. Va siempre
   con su muestra al lado, y si la muestra no alcanza no se pinta
   el número — se dice cuántas partidas faltan. Un 62% sacado de
   ocho partidas y uno sacado de cinco mil se ven idénticos, y esa
   es exactamente la confusión que esta pantalla no puede permitir.
   ============================================================= */

.ora-stat__destacado {
  display: flex;
  flex-wrap: wrap;
  /* La cifra, su margen y la explicación se leen como una sola frase: centrados
     entre sí. Con `baseline` la glosa —que son tres líneas— se colgaba de la
     primera y dejaba el bloque descuadrado. */
  align-items: center;
  gap: 14px 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--ora-mistico-inicio), var(--ora-mistico-fin));
  border: 1px solid var(--ora-borde-oro);
  border-radius: 12px;
}
.ora-stat__cifra {
  font-family: var(--ora-cifra);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--ora-oro);
}
.ora-stat__margen {
  align-self: center;
  margin-left: -8px;
  font-family: var(--ora-cifra);
  font-size: 15px;
  color: var(--ora-texto-secundario);
}
.ora-stat__glosa {
  flex: 1 1 260px;
  margin: 0;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ora-texto-secundario);
}

/* La barra vive DENTRO de la celda de la tabla: se lee como el número,
   no como un gráfico aparte. El 50% queda marcado porque es la única
   referencia que importa — arriba o abajo de la media. */
.ora-barra {
  position: relative;
  height: 8px;
  min-width: 120px;
  background: var(--ora-superficie);
  border-radius: 4px;
  overflow: hidden;
}
.ora-barra__relleno {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ora-oro-ambar);
  border-radius: 4px;
}
.ora-barra__relleno--sobre { background: var(--ora-oro); }
.ora-barra__medio {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: var(--ora-texto-tenue);
}

.ora-stat__muestra {
  font-family: var(--ora-cifra);
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
  white-space: nowrap;
}
/* Lo que todavía no aguanta una conclusión se rotula, no se esconde:
   esconderlo haría creer que no hay datos. */
.ora-stat__preliminar {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 5px;
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

/* ---------- matriz de enfrentamientos ---------- */

.ora-matriz__marco { overflow-x: auto; padding-bottom: 6px; }

.ora-matriz {
  /* Ocupa todo el ancho: las 16 columnas se reparten lo que sobra tras la
     cabecera de fila. En pantallas angostas el marco desplaza en horizontal. */
  /* Nunca desplaza: las 16 columnas se reparten el ancho que haya y la letra
     encoge con la ventana. Un "62%" a 9px sigue cabiendo en una celda de 24px. */
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
  font-family: var(--ora-cifra);
  font-size: clamp(9px, 0.95vw, 12px);
}
.ora-matriz thead th:first-child { width: clamp(72px, 9vw, 110px); }
.ora-matriz th {
  padding: 4px 6px;
  font-family: var(--ora-interfaz);
  font-size: clamp(9px, 0.85vw, 10.5px);
  font-weight: 500;
  color: var(--ora-texto-secundario);
  text-align: right;
  white-space: nowrap;
}
.ora-matriz thead th {
  /* Los rótulos de arriba se giran: 16 nombres de raza en horizontal
     harían la tabla cuatro veces más ancha que la pantalla. El texto va en
     un span ABSOLUTO: Safari mide una celda girada como si el texto fuera
     horizontal, y con eso cada columna medía lo que mide "Abominación". */
  position: relative;
  height: 96px;
  padding: 0;
}
.ora-matriz thead th > span {
  position: absolute;
  left: 50%;
  bottom: 6px;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  white-space: nowrap;
  line-height: 1;
}
.ora-matriz td {
  height: 36px;
  padding: 0;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  background: var(--ora-superficie);
  color: var(--ora-texto-fuerte);
}
.ora-matriz td.ora-matriz--vacia { background: transparent; color: var(--ora-texto-tenue); }
.ora-matriz td.ora-matriz--espejo { background: rgba(255, 255, 255, 0.03); color: var(--ora-texto-tenue); }
/* Lo preliminar se ve, pero rayado: el color dice hacia dónde, el rayado que aún no aguanta una conclusión. */
.ora-matriz--preliminar { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(13, 18, 36, 0.45) 5px 7px); }
/* La cabecera de cada fila se queda fija al desplazar la matriz en pantallas angostas. */
.ora-matriz tbody th { position: sticky; left: 0; background: var(--ora-noche); }
.ora .ora-matriz tbody th a { color: var(--ora-texto-secundario); }
.ora .ora-matriz tbody th a:hover { color: var(--ora-oro); }

.ora-stat__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-family: var(--ora-interfaz);
  font-size: 12px;
  color: var(--ora-texto-terciario);
}
.ora-stat__muestrario { display: inline-flex; align-items: center; gap: 6px; }
.ora-stat__cuadro {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--ora-borde-sutil);
}

/* ---------- el "Más" de la barra ---------- */

/* Lo llena el script midiendo el sitio real; sin JS se queda oculto. */
.ora-menu--mas[hidden] { display: none; }

/* El "Más" es el último de la fila: su panel se ancla por la DERECHA, como el
   del usuario. Colgándolo de la izquierda crecía hacia afuera de la pantalla. */
.ora-menu--mas .ora-menu__panel--mas { left: auto; right: -14px; }

/* Dentro del panel, los enlaces se apilan como en cualquier otro menú. */
.ora-menu__panel--mas > a {
  padding: 0 8px;
  line-height: 32px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ora-texto-fuerte);
  white-space: nowrap;
}
.ora-menu__panel--mas > a:hover { background: var(--ora-superficie); }

/* Un desplegable que cae al "Más" no puede seguir flotando: se abriría un
   panel encima de otro. Se muestra en flujo, sangrado bajo su título. */
.ora-menu__panel--mas > details > summary {
  padding: 0 8px;
  line-height: 32px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ora-texto-fuerte);
}
.ora-menu__panel--mas > details > .ora-menu__panel {
  position: static;
  min-width: 0;
  margin: 2px 0 6px 10px;
  padding: 4px 0 4px 10px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--ora-borde-sutil);
  border-radius: 0;
  box-shadow: none;
  /* Productos son ~45: dentro del "Más" tienen que poder desplazarse en vez
     de estirar el panel hasta salirse de la pantalla. */
  max-height: 320px;
  overflow-y: auto;
}

/* Acciones al final de una fila de tabla.

   Cada botón es su propio <form> —son POST distintos, no hay forma de
   evitarlo—, y sueltos en la celda se comportaban como bloques: se apilaban
   escalonados, cada uno con su ancho, en vez de alinearse. La caja los ordena
   y los mantiene juntos; la celda se encoge a lo que ocupan para no robarle
   ancho a las columnas con contenido. */
.ora-acciones-celda { width: 1%; white-space: nowrap; }

.ora-acciones-celda__caja {
  /* Uno bajo otro y del MISMO ancho. En fila pedían más sitio del que la tabla
     tiene y se salían del marco; sueltos se apilaban escalonados, cada uno con
     su ancho, que es lo que se veía mal. Apilados y estirados quedan alineados
     sin robarle ancho a las columnas con contenido. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.ora-acciones-celda__caja form { margin: 0; }
.ora-acciones-celda__caja .ora-boton { width: 100%; text-align: center; }

/* En una tabla de datos, `ora-stat__muestra` guarda cifras cortas —"(503)"— y
   el nowrap es lo que las mantiene pegadas a su porcentaje. En una tabla de
   fichas guarda frases: fechas, "472 jugadores · 2351 barajas". Ahí el nowrap
   impide que la tabla encoja y la empuja fuera de su marco, dejando la última
   columna cortada. Esta variante las deja envolver. */
.ora-admin__tabla--fichas .ora-stat__muestra { white-space: normal; }

/* ---------- ban list ---------- */

/* Cada carta de la lista, como una ficha suelta: son cien y pico nombres y en
   una lista corrida no se distingue dónde termina uno y empieza el otro. */
.ora-ficha-carta {
  display: inline-block;
  margin: 0 4px 6px 0;
  padding: 3px 9px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 6px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-fuerte);
}
/* Las que entran con este cambio: es lo único que hay que revisar de verdad,
   así que se ven sin buscarlas. */
.ora-ficha-carta--nueva {
  background: rgba(255, 191, 51, 0.14);
  border-color: var(--ora-borde-oro);
  color: var(--ora-oro-brillo);
}

/* La × que saca una carta de la lista. Va dentro de la ficha y no como fila
   aparte: quitar es lo que más se hace y tiene que estar donde está la carta. */
.ora-ficha-carta__quitar {
  margin-left: 7px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--ora-texto-terciario);
  cursor: pointer;
}
.ora-ficha-carta__quitar:hover { color: #FF4C4C; }

/* Buscador para agregar una carta al grupo. Uno por grupo, porque agregar es
   siempre "a este límite": pedir aparte la carta y la cantidad era un paso de
   más. */
.ora-busca-carta { position: relative; max-width: 380px; margin-top: 8px; }

.ora-busca-carta__campo {
  width: 100%;
  padding: 9px 12px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 9px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
}
.ora-busca-carta__campo::placeholder { color: var(--ora-texto-tenue); }
.ora-busca-carta__campo:focus {
  outline: none;
  background: var(--ora-superficie-elevada);
  border-color: var(--ora-oro);
}

.ora-busca-carta__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-oro);
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.ora-busca-carta__panel--abierto { display: flex; }

.ora-busca-carta__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  background: none;
  border: 0;
  border-radius: 6px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-fuerte);
  text-align: left;
  cursor: pointer;
}
.ora-busca-carta__opcion:hover { background: var(--ora-superficie); }

.ora-busca-carta__vacio {
  padding: 7px 9px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

/* =============================================================
   Teléfono. Lo que la adaptación general de arriba no alcanza:
   piezas que en escritorio se leen en una línea y en 390 px se
   descuadran. Cada regla nombra la vista que la pidió.
   ============================================================= */

/* Una celda de grilla nunca se ensancha por su contenido: sin esto, un
   texto con `white-space: nowrap` empuja la columna fuera de la pantalla
   (la portada de Temporadas se salía 27 px por la muestra del 62,3 %). */
.ora-temporada__portada > * { min-width: 0; }

@media (max-width: 700px) {
  /* Las tablas de estadísticas siguen siendo tablas: se desplazan a lo ancho,
     pero se AVISA. La sombra del borde derecho aparece solo mientras quede
     tabla por ver (fondos que se desplazan con el contenido tapan la sombra
     fija al llegar al final). La primera columna queda pegada para no perder
     de qué carta o raza es la fila. */
  .ora-admin__tabla {
    background:
      linear-gradient(270deg, var(--ora-noche) 40%, rgba(13, 18, 36, 0)) right / 48px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), transparent) right / 18px 100% no-repeat scroll;
  }
  .ora-app .ora-admin__tabla th:first-child,
  .ora-app .ora-admin__tabla td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ora-noche);
  }
  /* La cadena con `>` de la regla base pesa más que `.ora-admin__tabla td`:
     hay que repetirla para que el relleno angosto gane. */
  .ora-app .ora-admin__tabla .table > thead > tr > th { padding: 11px 10px; }
  .ora-app .ora-admin__tabla .table > tbody > tr > td { padding: 9px 10px; }
  .ora-temporada__estado { margin-left: 0; margin-top: 4px; white-space: nowrap; }

  /* --- Constructor de barajas: las pestañas del pozo ---
     Seis pestañas con icono y cuenta no caben en 334 px: se amontonaban en
     tres filas desiguales. Van en una tira que se desplaza a lo ancho, con la
     última asomando para que se note que hay más. */
  .ora-app .default-tab .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ora-app .default-tab .nav-tabs::-webkit-scrollbar { display: none; }
  .ora-app .default-tab .nav-tabs .nav-item { flex-shrink: 0; }
  .ora-app .default-tab .nav-tabs .nav-link { white-space: nowrap; padding: 9px 12px; font-size: 13.5px; }

  /* La celda de carta de la grilla móvil: el selector de versión mostraba
     "Leyendas 4.(" porque el botón conserva el relleno de escritorio. */
  .ora-app .card-baraja-mobile .bootstrap-select > .dropdown-toggle { padding: 6px 24px 6px 8px; font-size: 12px; }
  .ora-app .card-baraja-mobile .bootstrap-select > .dropdown-toggle::after { right: 8px; }
}

@media (max-width: 560px) {
  /* Las tablas de cuatro columnas (cartas por raza, contra cada raza) caben
     en 334 px si la cabecera afloja el interletrado y las celdas el relleno:
     mejor que cortar la última columna por 20 px. */
  .ora-app .ora-admin__tabla .table > thead > tr > th { padding: 9px 8px; font-size: 9.5px; letter-spacing: 0.08em; }
  .ora-app .ora-admin__tabla .table > tbody > tr > td { padding: 8px 8px; font-size: 13px; }
  .ora-app .ora-admin__tabla .ora-stat__muestra { font-size: 11px; }
}

@media (max-width: 560px) {
  /* --- Portada: el índice del tomo ---
     "Las aclaraciones · 1.335 · RESUELTAS" no cabe en 334 px y la unidad
     caía sola a la línea siguiente. El título ocupa su línea y la cifra con
     su unidad van debajo, tras los puntos guía, como en un índice impreso. */
  .ora-entrada:has(.ora-entrada__unidad) .ora-entrada__titulo { flex-basis: calc(100% - 50px); }
  .ora-entrada:has(.ora-entrada__unidad) .ora-entrada__guia { margin-left: 50px; }
  .ora-entrada:has(.ora-entrada__unidad) .ora-entrada__cifra { margin-left: 0; }

  /* --- Cintillo con glosa (Temporadas: "El podio · winrate sin corregir…") ---
     El rótulo y su filete en una línea; la glosa entera debajo. Antes el
     rótulo se apretaba a una palabra por línea. */
  .ora-cintillo { flex-wrap: wrap; gap: 8px 18px; }
  .ora-cintillo__glosa { flex-basis: 100%; }

  /* --- Temporadas: la lente --- */
  .ora-lentes { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
  .ora-lentes .ora-segmento { display: flex; }
  .ora-lentes .ora-segmento__opcion { flex: 1 1 0; padding: 8px 6px; font-size: 13px; line-height: 1.2; }

  /* --- Temporadas: las promos de Juego Organizado ---
     El abanico se encoge, que a 122 px por carta se sale del ancho. */
  .ora-promos__abanico { padding-left: 24px; }
  .ora .ora-promos__carta { width: 96px; margin-left: -24px; }

  /* --- Temporadas: la ventaja de empezar y las tres cifras --- */
  .ora-temporada__portada { gap: 24px; padding-top: 28px; }
  .ora-temporada__ventaja { flex-wrap: wrap; padding: 16px 18px; }
  .ora-temporada__ventaja .ora-stat__muestra { white-space: normal; }
  .ora-temporada__cifras { gap: 8px; }
  .ora-temporada__cifras > div { padding: 10px 10px; font-size: 11px; }
  .ora-temporada__cifra, .ora-temporada__fila-cifras .ora-temporada__cifra { font-size: 26px; }

  /* --- Temporadas: todas las razas contra el 50 % ---
     La cifra de una raza que pierde iba a la IZQUIERDA de su barra y se
     montaba sobre el nombre. En angosto las cifras van todas a la derecha
     del 50 %, sobre la pista vacía; el margen (±) se calla porque no cabe:
     la leyenda ya dice que es preliminar cuando lo es. */
  .ora-barras { padding: 14px 12px 12px; }
  .ora-barras__eje, .ora-barras__fila { grid-template-columns: 84px 1fr; gap: 8px; }
  .ora-barras--uso .ora-barras__eje, .ora-barras--uso .ora-barras__fila { grid-template-columns: 84px 1fr 40px; }
  .ora .ora-barras__fila > a { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ora-barras__cifra { font-size: 12px; }
  .ora-barras__cifra > span { display: none; }
  .ora-barras__cifra.es-bajo { right: auto !important; left: calc(50% + 8px); }
  .ora-barras__escala { right: 44px; }

  /* --- Banlist: "Última actualización" --- La fila en flex partía la fecha
     en tres columnas desalineadas; en angosto es una frase que corre. */
  .ora-banlist .ora-banlist__fecha { display: block; line-height: 1.5; }
  .ora-banlist .ora-banlist__fecha svg { vertical-align: -2px; margin-right: 4px; }
  .ora-banlist__resumen { gap: 16px; }
}

@media (max-width: 400px) {
  /* "Septiembre 2026" a 38 px partía en dos líneas en un Android de 360. */
  .ora .ora-temporada__titular h1 { font-size: 34px; }
}

/* =============================================================
   Detalle de baraja: la portada y el panel de cifras.

   Antes esta página empezaba con un título suelto y terminaba, mucho
   más abajo, con los tres gráficos: estaban DESPUÉS de las seis
   galerías de cartas, así que para verlos había que recorrer la
   página entera. Y la ilustración que el dueño ya le eligió a la
   baraja —8 de cada 10 la tienen— solo aparecía dentro del modal de
   Exportar; en la página no se veía nunca.

   Ahora la ilustración es la PORTADA y el panel de cifras se monta
   sobre ella: el solape es lo que amarra las dos cosas, y deja la
   curva de oros en el primer pantallazo.
   ============================================================= */

/* La portada rompe los márgenes del pliego, no los del viewport: se
   estira hasta el borde de la columna de contenido (1280) y no hasta
   el del navegador. Un sangrado a 100vw pelearía con la metáfora de
   pliego del resto del sitio —y traería la barra de scroll horizontal
   de regalo. El -32px de arriba se come el padding-top de <main>. */
.ora-mazo-portada {
  position: relative;
  margin: -32px calc(-1 * var(--ora-margen)) 0;
  height: 480px;
  overflow: hidden;
  background: linear-gradient(118deg, var(--ora-mistico-inicio) 0%, var(--ora-noche-elevada) 46%, var(--ora-mistico-fin) 100%);
}

.ora-mazo-portada__lamina {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 24% y no el centro: las ilustraciones del catálogo son verticales
     y lo que importa —la cara— vive en el tercio de arriba. */
  object-position: center 24%;
}

/* Dos velos. El vertical baja hasta la noche para que el panel nazca
   del mismo color; el lateral le da fondo al título pase lo que pase
   en esa zona del cuadro. Sin el segundo, una ilustración clara a la
   izquierda dejaba el nombre de la baraja ilegible. */
.ora-mazo-portada__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(13, 18, 36, 0.34) 0%,
              rgba(13, 18, 36, 0.10) 26%,
              rgba(13, 18, 36, 0.72) 68%,
              rgba(13, 18, 36, 0.99) 100%);
}

.ora-mazo-portada__velo--lado {
  background: linear-gradient(90deg,
              rgba(13, 18, 36, 0.90) 0%,
              rgba(13, 18, 36, 0.52) 34%,
              rgba(13, 18, 36, 0.00) 62%);
}

/* Sin ilustración la portada no se encoge: el degradado místico hace de
   fondo y la INICIAL de la baraja, enorme y casi invisible, le da materia.

   Era una runa (ᛟ) y se veía el cuadrito de "falta el glifo": Marcellus no
   trae rúnico. Una letra la tiene cualquier tipografía, y además cambia con
   cada baraja. */
.ora-mazo-portada__sigilo {
  position: absolute;
  top: -136px;
  right: var(--ora-margen);
  font-family: var(--ora-display);
  font-size: 420px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  user-select: none;
  pointer-events: none;
}

.ora-mazo-portada__volver {
  position: absolute;
  top: 28px;
  left: var(--ora-margen);
  z-index: 2;
}

/* Las acciones son HERMANAS de la portada, no hijas: en ancho se
   posicionan sobre ella y en angosto vuelven al flujo, debajo. Si
   colgaran de .ora-mazo-portada quedarían presas de su alto fijo y de su
   overflow, y en un teléfono —donde son hasta cinco— no habría dónde
   soltarlas. Por eso .ora-mazo es el que lleva el position. */
.ora-mazo { position: relative; }

.ora-mazo-acciones {
  position: absolute;
  top: 28px;
  right: var(--ora-margen);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Las fichas de la portada van sobre la parte MÁS CLARA de la
   ilustración, así que llevan su propio fondo oscuro. */
.ora .ora-mazo-ficha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(13, 18, 36, 0.66);
  border: 1px solid var(--ora-borde);
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-fuerte);
  cursor: pointer;
  white-space: nowrap;
}

.ora .ora-mazo-ficha:hover { background: rgba(13, 18, 36, 0.86); color: var(--ora-texto); }

.ora .ora-mazo-ficha--volver { padding: 0 16px 0 13px; }

.ora .ora-mazo-ficha--oro {
  background: var(--ora-oro);
  border-color: var(--ora-oro);
  font-weight: 600;
  color: var(--ora-noche);
}

.ora .ora-mazo-ficha--oro:hover { background: var(--ora-oro-brillo); color: var(--ora-noche); }

/* El estado del formato, que antes era una caja entera. El detalle de
   las restricciones sigue existiendo: baja al panel. */
.ora .ora-mazo-ficha--valida { border-color: rgba(51, 204, 102, 0.50); color: #7FD9A8; cursor: default; }
.ora .ora-mazo-ficha--invalida { border-color: rgba(217, 140, 31, 0.60); color: #E8C24D; cursor: default; }
.ora .ora-mazo-ficha--indeterminada { color: var(--ora-texto-terciario); cursor: default; }

/* "Ponerle una ilustración": solo para el dueño y solo si no tiene. */
.ora a.ora-mazo-ficha--poner {
  position: absolute;
  top: 190px;
  left: var(--ora-margen);
  background: rgba(255, 191, 51, 0.10);
  border: 1px dashed var(--ora-borde-oro);
  color: var(--ora-oro);
}

.ora a.ora-mazo-ficha--poner:hover { background: rgba(255, 191, 51, 0.18); color: var(--ora-oro-brillo); }

.ora-mazo-portada__titulos {
  position: absolute;
  left: var(--ora-margen);
  right: var(--ora-margen);
  bottom: 88px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ora-mazo-portada__epigrafe {
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ora-oro);
  text-transform: uppercase;
}

.ora .ora-mazo-portada__titulos h1 {
  margin: 0;
  font-size: 72px;
  line-height: 0.98;
  color: var(--ora-texto);
  text-shadow: 0 2px 28px rgba(13, 18, 36, 0.85);
}

.ora .ora-mazo-portada__meta {
  margin: 0;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  color: var(--ora-texto-fuerte);
}

.ora .ora-mazo-portada__meta a {
  color: var(--ora-texto-fuerte);
  border-bottom: 1px solid var(--ora-borde-oro);
}

.ora .ora-mazo-portada__meta a:hover { color: var(--ora-oro); }

/* ---------- el panel de cifras ---------- */

/* El -64 es el solape sobre la portada: es lo único que amarra la
   ilustración con los números. Si se quita, vuelven a ser dos bloques
   que no se hablan. */
.ora-mazo-panel {
  position: relative;
  z-index: 2;
  margin: -64px 0 0;
  padding: 24px 28px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 33, 61, 0.97) 0%, rgba(13, 18, 36, 0.99) 100%);
  border: 1px solid var(--ora-borde-oro);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ora-mazo-panel__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* El crédito del ilustrador. Viene en el NOMBRE DEL ARCHIVO
   ("Thor by Gabriel Rodríguez (La Cofradía).webp"), así que se puede
   mostrar sin tocar la base. */
.ora-mazo-panel__credito {
  font-family: var(--ora-cifra);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ora-texto-tenue);
  text-transform: uppercase;
}

.ora-mazo-panel__cuerpo { display: flex; gap: 44px; align-items: stretch; }

.ora-mazo-panel__cifras {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Son dos y se reparten el alto de la curva que tienen al lado: con el
   alto natural quedaban arriba y media columna vacía debajo. */
.ora-mazo-cifra {
  flex-grow: 1;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.ora-mazo-cifra__rotulo {
  font-family: var(--ora-cifra);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ora-texto-terciario);
}

.ora-mazo-cifra__dato {
  font-family: var(--ora-cifra);
  font-size: 40px;
  line-height: 1;
  color: var(--ora-oro);
}

.ora-mazo-cifra__dato--neutra { color: var(--ora-texto-fuerte); }
.ora-mazo-cifra__dato--vacia { color: var(--ora-texto-terciario); }

.ora-mazo-cifra__nota {
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
}

/* ---------- la curva de oros ---------- */

/* Mide CUÁNTAS cartas cuestan cada cifra: una cantidad, no una
   identidad, así que va entera en oro. Antes eran cinco series de
   línea superpuestas —una por tipo— sobre la misma caja: cinco
   colores para responder una pregunta que no pregunta por el color. */
.ora-mazo-curva { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.ora-mazo-curva__glosa {
  font-family: var(--ora-interfaz);
  font-size: 11.5px;
  color: var(--ora-texto-terciario);
}

/* La marca del promedio tiene su propia franja ARRIBA de la pista. Iba
   flotando dentro y, cuando el promedio caía cerca de la barra más alta
   —que es lo normal, para eso es un promedio—, la etiqueta se montaba
   sobre la cifra de esa barra. */
.ora-mazo-curva__marca { position: relative; height: 22px; }

.ora-mazo-curva__marca span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ora-superficie-elevada);
  font-family: var(--ora-cifra);
  font-size: 10px;
  color: var(--ora-texto-secundario);
  white-space: nowrap;
}

/* content-box a propósito: el padding de arriba es el aire donde cae
   la cifra de la barra más alta, y las barras miden su % contra los
   210px de la caja, no contra 232. */
.ora-mazo-curva__pista {
  position: relative;
  box-sizing: content-box;
  height: 210px;
  padding-top: 22px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  border-bottom: 1px solid var(--ora-borde-sutil);
}

.ora-mazo-curva__columna { position: relative; flex-grow: 1; display: flex; align-items: flex-end; height: 100%; }

.ora-mazo-curva__barra {
  position: relative;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--ora-oro);
}

/* Un coste que NO tiene cartas deja su muesca: "acá no hay ninguna"
   no es lo mismo que "acá no hay columna". */
.ora-mazo-curva__barra--vacia { height: 3px; background: rgba(255, 255, 255, 0.12); }

.ora-mazo-curva__valor {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 7px;
  text-align: center;
  font-family: var(--ora-cifra);
  font-size: 13px;
  color: var(--ora-texto-fuerte);
}

.ora-mazo-curva__valor--cero { font-size: 12px; color: var(--ora-texto-tenue); }
.ora-mazo-curva__valor--alto { color: var(--ora-oro-brillo); }

.ora-mazo-curva__promedio {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg,
              rgba(255, 255, 255, 0.55) 0 4px,
              rgba(255, 255, 255, 0) 4px 9px);
  pointer-events: none;
}

.ora-mazo-curva__eje { display: flex; gap: 14px; padding-top: 9px; }

.ora-mazo-curva__eje span {
  flex-grow: 1;
  text-align: center;
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-terciario);
}

/* ---------- de qué está hecha ---------- */

/* El ÚNICO sitio donde los colores de tipo significan algo. Por eso
   cada tramo lleva su nombre escrito encima: la identidad no puede
   depender solo del color. */
.ora-mazo-composicion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora-mazo-composicion__barra {
  display: flex;
  gap: 2px;
  height: 56px;
  border-radius: 7px;
  overflow: hidden;
}

.ora-mazo-composicion__tramo {
  display: flex;
  align-items: center;
  padding-left: 14px;
  box-sizing: border-box;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  font-weight: 600;
  /* Tinta oscura sobre el relleno claro: de 4,6:1 a 6,6:1 según el tipo.
     En blanco, el oro se caía a 2,8:1. */
  color: var(--ora-noche);
  white-space: nowrap;
  overflow: hidden;
}

/* Un tramo angosto no alcanza para su rótulo; lo dice la leyenda. */
.ora-mazo-composicion__tramo--mudo { padding-left: 0; }

/* Los Oros SIN habilidad son Oros: mismo color, apagado. Distinguirlos con
   un sexto matiz sería un color nuevo para una distinción que no es de tipo,
   y ya son cinco. */
.ora-mazo-composicion__tramo.es-tenue,
.ora-resumen__punto.es-tenue { opacity: 0.45; }

.ora-mazo-composicion__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
}

/* ⚠️ HIJO directo, no descendiente: cada entrada lleva DENTRO otro span
   —el punto de color—, y un `.leyenda span` le pegaba también a él. Con la
   regla del teléfono (width: 100%) eso convertía cada punto de 9px en una
   barra del ancho de la página y la reventaba a lo ancho entera. */
.ora-mazo-composicion__leyenda > span { display: flex; align-items: center; gap: 8px; }
.ora-mazo-composicion__leyenda b { font-family: var(--ora-cifra); font-weight: 400; color: var(--ora-texto-fuerte); }
.ora-mazo-composicion__leyenda .es-ausente { color: var(--ora-texto-tenue); }
.ora-mazo-composicion__leyenda .es-ausente b { color: inherit; }

/* ---------- qué hace esta baraja ---------- */

.ora-mazo-funciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 56px;
}

.ora-mazo-funcion { display: flex; align-items: center; gap: 14px; }

.ora-mazo-funcion__nombre {
  width: 150px;
  flex-shrink: 0;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
  color: var(--ora-texto-fuerte);
}

.ora-mazo-funcion__pista {
  flex-grow: 1;
  display: block;
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.ora-mazo-funcion__barra { display: block; height: 16px; border-radius: 4px; background: var(--ora-oro); }

.ora-mazo-funcion__valor {
  width: 26px;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--ora-cifra);
  font-size: 13px;
  color: var(--ora-texto-fuerte);
}

/* ---------- las restricciones, cuando las hay ---------- */

/* La ficha de la portada dice CUÁNTAS; el detalle vive acá. */
.ora-mazo-panel__restricciones {
  padding-top: 20px;
  border-top: 1px solid rgba(217, 140, 31, 0.35);
}

/* ---------- angosto ---------- */

@media (max-width: 1100px) {
  .ora-mazo-panel__cuerpo { flex-direction: column; gap: 26px; }
  .ora-mazo-panel__cifras { width: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ora-mazo-funciones { gap: 12px 36px; }
}

@media (max-width: 820px) {
  /* Las acciones bajan al flujo y el panel deja de montar sobre la
     portada: con cinco fichas no hay sitio arriba de una ilustración
     de 380px, y el solape se las comería. */
  .ora-mazo-acciones { position: static; justify-content: flex-start; padding-top: 14px; }
  .ora-mazo-panel { margin-top: 16px; }

  .ora-mazo-portada { height: 380px; }
  .ora .ora-mazo-portada__titulos h1 { font-size: 48px; }
  .ora-mazo-portada__titulos { bottom: 72px; gap: 10px; }
  .ora-mazo-portada__sigilo { font-size: 300px; top: -70px; }
  .ora a.ora-mazo-ficha--poner { top: 150px; }
  .ora-mazo-funciones { grid-template-columns: minmax(0, 1fr); }
  .ora-mazo-funcion__nombre { width: 120px; font-size: 13px; }
  .ora-mazo-curva__pista { height: 160px; gap: 7px; }
  .ora-mazo-curva__eje { gap: 7px; }
  .ora-mazo-composicion__barra { height: 30px; }
  /* A 30px de alto el nombre dentro del tramo ya no entra: la leyenda,
     que siempre estuvo debajo, pasa a ser la única identificación. */
  .ora-mazo-composicion__tramo { padding-left: 0; font-size: 0; }
  .ora-mazo-composicion__leyenda { flex-direction: column; gap: 7px; }
  .ora-mazo-composicion__leyenda > span { width: 100%; }
  .ora-mazo-composicion__leyenda b { margin-left: auto; }
}

@media (max-width: 560px) {
  .ora-mazo-portada { height: 320px; }
  .ora .ora-mazo-portada__titulos h1 { font-size: 38px; }
  .ora .ora-mazo-ficha { height: 40px; padding: 0 14px; font-size: 12.5px; }
  .ora-mazo-panel { padding: 20px 16px 22px; }
  .ora-mazo-cifra__dato { font-size: 32px; }
}

/* =============================================================
   La ficha de una raza (/temporadas/raza).

   Hereda la portada del detalle de baraja —misma sangría, mismos
   dos velos, mismo solape de -64 del panel—: es la misma idea de
   "una lámina y los números encima", y tener dos tratamientos de
   portada en el mismo sitio se nota.

   Lo propio de acá son tres piezas que el detalle de baraja no
   necesita, y las tres existen por lo mismo: un winrate sin su
   muestra al lado promete una precisión que no tiene.
   ============================================================= */

/* ---------- la portada ---------- */

/* Rompe los márgenes del PLIEGO, no los del viewport: un sangrado a
   100vw pelearía con la metáfora de tomo del resto del sitio. El -32
   se come el padding-top de <main>. */
.ora-raza-portada {
  position: relative;
  margin: -32px calc(-1 * var(--ora-margen)) 0;
  height: 440px;
  overflow: hidden;
  background: linear-gradient(118deg, var(--ora-mistico-inicio) 0%, var(--ora-noche-elevada) 46%, var(--ora-mistico-fin) 100%);
}

.ora-raza-portada__lamina {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Igual que en la baraja: las ilustraciones del catálogo son
     verticales y la cara vive en el tercio de arriba. */
  object-position: center 24%;
}

/* Dos velos. El vertical baja hasta la noche para que el panel nazca
   del mismo color; el lateral le da fondo al título pase lo que pase
   en esa zona del cuadro. */
.ora-raza-portada__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(13, 18, 36, 0.34) 0%,
              rgba(13, 18, 36, 0.10) 26%,
              rgba(13, 18, 36, 0.72) 68%,
              rgba(13, 18, 36, 0.99) 100%);
}

.ora-raza-portada__velo--lado {
  background: linear-gradient(90deg,
              rgba(13, 18, 36, 0.90) 0%,
              rgba(13, 18, 36, 0.52) 34%,
              rgba(13, 18, 36, 0.00) 62%);
}

/* Una raza cuyos Aliados no tienen ninguna ilustración cae acá, y la
   portada NO se encoge: el degradado hace de fondo y la inicial de la
   raza, enorme y casi invisible, le da materia. */
.ora-raza-portada__sigilo {
  position: absolute;
  top: -126px;
  right: var(--ora-margen);
  font-family: var(--ora-display);
  font-size: 400px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  user-select: none;
  pointer-events: none;
}

.ora-raza-portada__volver {
  position: absolute;
  top: 28px;
  left: var(--ora-margen);
  z-index: 2;
}

.ora-raza-portada__estado {
  position: absolute;
  top: 28px;
  right: var(--ora-margen);
  z-index: 2;
}

.ora-raza-portada__titulos {
  position: absolute;
  left: var(--ora-margen);
  right: var(--ora-margen);
  bottom: 84px;
  max-width: 760px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ora-raza-portada__epigrafe {
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ora-oro);
  text-transform: uppercase;
}

.ora .ora-raza-portada__titulos h1 {
  margin: 0;
  font-size: 68px;
  line-height: 0.98;
  color: var(--ora-texto);
  text-shadow: 0 2px 28px rgba(13, 18, 36, 0.85);
}

.ora .ora-raza-portada__meta {
  margin: 0;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  color: var(--ora-texto-fuerte);
}

/* ---------- el panel de cifras ---------- */

/* El -64 es el solape sobre la portada, y acá gana el doble: sube el
   winrate y la regla de puestos al primer pantallazo. */
.ora-raza-panel {
  position: relative;
  z-index: 2;
  margin: -64px 0 0;
  padding: 24px 28px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 33, 61, 0.97) 0%, rgba(13, 18, 36, 0.99) 100%);
  border: 1px solid var(--ora-borde-oro);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ora-raza-panel__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ora .ora-raza-panel__veredicto {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  max-width: 720px;
  color: var(--ora-texto-fuerte);
}

.ora-raza-panel__veredicto strong {
  font-weight: 500;
  color: var(--ora-oro);
}

/* El crédito del ilustrador viene en el NOMBRE DEL ARCHIVO, igual que
   en la baraja: no hay columna para eso. */
.ora-raza-panel__credito {
  font-family: var(--ora-cifra);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

/* La tarjeta del winrate ocupa dos huecos porque lleva la regla dentro. */
.ora-raza-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ora-raza-cifras > .ora-cifra-tarjeta--ancha {
  grid-column: span 2;
  border-color: var(--ora-borde-oro);
}

/* ---------- la regla de las razas ---------- */

/* "Puesto 9 de 16" no dice si la novena está pegada a la octava o a
   diez puntos. Un tic por raza sobre un eje fijo lo dice de un
   vistazo, y el tic propio va en oro, más alto y rotulado. El eje no
   se ajusta a los datos: va de 40 a 60 siempre, para que dos
   temporadas se puedan comparar de memoria. */
.ora-regla {
  position: relative;
  height: 46px;
  margin-top: 14px;
}

.ora-regla__eje {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 1px;
  background: var(--ora-borde);
}

.ora-regla__centro {
  position: absolute;
  top: 8px;
  height: 19px;
  width: 1px;
  background: var(--ora-texto-tenue);
}

.ora-regla__tic {
  position: absolute;
  top: 10px;
  height: 15px;
  width: 2px;
  margin-left: -1px;
  background: var(--ora-texto-tenue);
}

.ora-regla__tic--yo {
  top: 4px;
  height: 27px;
  width: 3px;
  margin-left: -1.5px;
  background: var(--ora-oro);
  border-radius: 2px;
}

.ora-regla__rotulo {
  position: absolute;
  top: 33px;
  transform: translateX(-50%);
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-oro);
  white-space: nowrap;
}

.ora-regla__extremo {
  position: absolute;
  top: 33px;
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  color: var(--ora-texto-terciario);
}

.ora-regla__extremo--izq { left: 0; }
.ora-regla__extremo--der { right: 0; }

/* ---------- empezar o no empezar ---------- */

/* Antes eran dos tarjetas sueltas —"Empezando 61,5%", "De segunda
   34,2%"— y la comparación contra la media del formato vivía en una
   nota al pie, o sea que había que restar de cabeza. La marca blanca
   trae esa media a la misma barra: el número que se lee ya ES la
   diferencia. */
.ora-turno {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}

.ora-turno__barras {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ora-turno__fila {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 132px;
  gap: 16px;
  align-items: center;
}

.ora-turno__rotulo {
  font-family: var(--ora-interfaz);
  font-size: 14px;
  font-weight: 500;
  color: var(--ora-texto-fuerte);
}

.ora-turno__pista {
  position: relative;
  height: 26px;
  background: var(--ora-superficie);
  border-radius: 5px;
}

.ora-turno__relleno {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ora-oro);
  border-radius: 5px;
}

.ora-turno__relleno--segunda { background: var(--ora-aliado); }

.ora-turno__media {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--ora-texto);
}

.ora-turno__media-rotulo {
  position: absolute;
  top: -21px;
  transform: translateX(-50%);
  font-family: var(--ora-cifra);
  font-size: 10.5px;
  color: var(--ora-texto-secundario);
  white-space: nowrap;
}

.ora-turno__cifra {
  font-family: var(--ora-cifra);
  font-size: 15px;
  color: var(--ora-texto);
}

.ora-turno__delta {
  font-size: 11.5px;
  color: var(--ora-texto-secundario);
}

.ora-turno__glosa {
  width: 340px;
  flex-shrink: 0;
}

/* ---------- los cruces, con su intervalo ---------- */

/* La barra llena iba de 0 al winrate y prometía una precisión que la
   muestra no tiene: con 66 partidas el margen es de ±12,3 puntos. Acá
   la banda clara ES el intervalo del 95% y el tic es el punto, así que
   un cruce "dice algo" solo cuando la banda entera queda de un lado
   del 50 — y por eso las filas se agrupan en gana / parejo / pierde en
   vez de fingir un orden. El eje va de 25 a 75. */
.ora-cruces__eje,
.ora-cruce {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 104px 74px;
  gap: 14px;
  align-items: center;
}

.ora-cruces__eje { padding-bottom: 6px; }

.ora-cruces__escala {
  position: relative;
  height: 13px;
  font-family: var(--ora-cifra);
  font-size: 10px;
  color: var(--ora-texto-terciario);
}

.ora-cruces__escala > span:first-child { position: absolute; left: 0; }
.ora-cruces__escala > span.es-centro { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255, 191, 51, 0.8); }
.ora-cruces__escala > span:last-child { position: absolute; right: 0; }

.ora-cruces__rotulo {
  font-family: var(--ora-cifra);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

.ora-cruces__rotulo--der { text-align: right; }

.ora-cruces__grupo { margin-top: 14px; }

.ora-cruces__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ora-cruces__titulo b {
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ora-texto-fuerte);
}

.ora-cruces__titulo--gana b { color: var(--ora-oro); }
.ora-cruces__titulo--pierde b { color: var(--ora-aliado); }

.ora-cruces__titulo span {
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-terciario);
}

.ora-cruce {
  height: 34px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora-cruce__pista { position: relative; height: 22px; }

.ora-cruce__centro {
  position: absolute;
  left: 50%;
  top: -6px;
  height: 34px;
  width: 1px;
  background: var(--ora-texto-tenue);
}

.ora-cruce__banda {
  position: absolute;
  top: 5px;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 191, 51, 0.22);
}

.ora-cruce__banda--bajo { background: rgba(68, 130, 219, 0.28); }

/* Menos de 100 partidas: el intervalo sigue siendo el mismo, pero el
   rayado avisa que todavía se mueve. */
.ora-cruce__banda--preliminar { background: repeating-linear-gradient(90deg, rgba(255, 191, 51, 0.30) 0 5px, transparent 5px 9px); }
.ora-cruce__banda--bajo.ora-cruce__banda--preliminar { background: repeating-linear-gradient(90deg, rgba(68, 130, 219, 0.38) 0 5px, transparent 5px 9px); }

.ora-cruce__punto {
  position: absolute;
  top: 1px;
  height: 20px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ora-oro);
}

.ora-cruce__punto--bajo { background: var(--ora-aliado); }

.ora-cruce__cifra {
  font-family: var(--ora-cifra);
  font-size: 13px;
  color: var(--ora-texto);
}

.ora-cruce__cifra span {
  font-size: 11px;
  color: var(--ora-texto-terciario);
}

.ora-cruce__juegos {
  font-family: var(--ora-cifra);
  font-size: 11.5px;
  color: var(--ora-texto-secundario);
  text-align: right;
}

/* Un cruce con menos de 30 partidas no publica winrate: la banda entera
   se pinta apagada y la cifra dice cuántas faltan. */
.ora-cruce__banda--flaca {
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.10);
}

.ora-cruces__leyenda {
  margin-top: 18px;
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-secundario);
}

.ora-cruces__leyenda i {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 7px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 9px);
}

/* ---------- qué juega ---------- */

.ora-filtro-cartas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.ora-filtro-cartas label {
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-secundario);
}

.ora .ora-filtro-cartas input {
  flex-grow: 1;
  max-width: 300px;
  height: 44px;
  padding: 0 14px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde);
  border-radius: 9px;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 14px;
}

.ora .ora-filtro-cartas button {
  height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--ora-borde-oro);
  border-radius: 9px;
  color: var(--ora-oro);
  font-family: var(--ora-interfaz);
  font-size: 13px;
  cursor: pointer;
}

.ora .ora-filtro-cartas button:hover { background: rgba(255, 191, 51, 0.10); color: var(--ora-oro-brillo); }

.ora-filtro-cartas__cuenta {
  font-family: var(--ora-cifra);
  font-size: 11px;
  color: var(--ora-texto-terciario);
}

/* El punto de tipo reemplaza la palabra "Oro"/"Talismán" repetida en
   cada una de las 149 filas. Nunca va solo: al lado sigue el nombre
   del tipo o la curva del Aliado. */
.ora-punto-tipo {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.ora-presencia {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Los dos son <span> y no <div> porque van dentro de una celda de tabla
   junto a texto; sin `display: block` el relleno es un inline y ni el alto
   ni el ancho en % le aplican — todas las filas salían con la pista vacía,
   igual para el 91% que para el 35%. */
.ora-presencia__pista {
  display: block;
  width: 96px;
  flex-shrink: 0;
  height: 7px;
  background: var(--ora-superficie);
  border-radius: 4px;
  overflow: hidden;
}

.ora-presencia__relleno {
  display: block;
  height: 100%;
  background: var(--ora-oro);
  border-radius: 4px;
}

/* Las 149 cartas de una raza tienen winrates entre 37 y 55: leída como
   columna es una pared de cuarentaitantos. Restado el de la raza, el
   mismo dato se ordena solo. Sigue siendo DESCRIPTIVO, y la nota de
   arriba lo dice. */
.ora-dif {
  font-family: var(--ora-cifra);
  font-size: 13px;
  color: var(--ora-oro);
}

.ora-dif--bajo { color: var(--ora-aliado); }

.ora-fila-carta--cola { display: none; }
.ora-cartas--con-cola .ora-fila-carta--cola { display: table-row; }
.ora-fila-carta--oculta { display: none; }

/* ---------- angosto ---------- */

@media (max-width: 1100px) {
  .ora-raza-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* `align-items: flex-start` es del eje CRUZADO: puesto en columna encoge las
     barras al ancho de su contenido y la pista queda de 50 px. */
  .ora-turno { flex-direction: column; align-items: stretch; gap: 24px; }
  .ora-turno__glosa { width: auto; }
}

@media (max-width: 820px) {
  /* El panel deja de montar sobre la portada: con el título a 48px no
     queda sitio arriba de una lámina de 380. */
  .ora-raza-panel { margin-top: 16px; }
  .ora-raza-portada { height: 380px; }
  .ora .ora-raza-portada__titulos h1 { font-size: 48px; }
  .ora-raza-portada__titulos { bottom: 68px; gap: 10px; }
  .ora-raza-portada__sigilo { font-size: 300px; top: -70px; }

  .ora-cruces__eje,
  .ora-cruce { grid-template-columns: 104px minmax(0, 1fr) 92px; }
  .ora-cruces__rotulo--der,
  .ora-cruce__juegos { display: none; }
  .ora-turno__fila { grid-template-columns: 92px minmax(0, 1fr) 108px; }
}

@media (max-width: 560px) {
  .ora-raza-cifras { grid-template-columns: minmax(0, 1fr); }
  .ora-raza-cifras > .ora-cifra-tarjeta--ancha { grid-column: auto; }
  .ora-raza-portada { height: 320px; }
  .ora .ora-raza-portada__titulos h1 { font-size: 38px; }
  .ora-raza-portada__estado { display: none; }
  .ora-raza-panel { padding: 20px 16px 22px; }
  .ora-presencia__pista { display: none; }
}

/* La ficha del estado de la temporada no lleva a ninguna parte: comparte la
   pastilla de la portada, no su cursor. */
.ora span.ora-raza-portada__estado {
  cursor: default;
  color: var(--ora-texto-secundario);
}

/* ------------------------------------------------------------------
   Documentos — los PDF oficiales. Eran un desplegable de cuatro columnas
   en la barra que ya no cabía en ninguna pantalla; ahora tienen su página.
   ------------------------------------------------------------------ */

/* El buscador esconde con `hidden`, y las tarjetas son flex o grid. */
.ora-documentos [hidden] { display: none !important; }

.ora-documentos__buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  color: var(--ora-texto-secundario);
}
.ora-documentos__buscador:focus-within { border-color: var(--ora-oro); }
.ora-documentos__buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  color: var(--ora-texto);
}
.ora-documentos__buscador input::placeholder { color: var(--ora-texto-terciario); }

.ora .ora-documentos__vacio {
  padding: 22px;
  border-radius: 12px;
  border: 1px dashed var(--ora-borde-sutil);
  font-family: var(--ora-interfaz);
  font-size: 15px;
  color: var(--ora-texto-secundario);
}

.ora-documentos__grupo { margin-bottom: 44px; }
.ora-documentos__grupo .ora-cintillo { margin-bottom: 18px; }
.ora-documentos__grupo h2.ora-rotulo { margin: 0; font-weight: 400; }

/* Reglamento y FAQ vigente: lo que más se abre, grande y arriba. */
.ora-documentos__destacados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.ora a.ora-doc-destacado {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ora-mistico-inicio), var(--ora-mistico-fin));
  border: 1px solid var(--ora-borde-oro);
  text-decoration: none;
  color: var(--ora-texto);
}
.ora a.ora-doc-destacado:hover { border-color: var(--ora-oro); }
.ora-doc-destacado__rotulo {
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ora-oro);
}
.ora-doc-destacado__nombre { font-family: var(--ora-display); font-size: 32px; line-height: 1.15; }
.ora-doc-destacado__pie { font-family: var(--ora-interfaz); font-size: 13px; color: var(--ora-texto-secundario); }

/* Oráculos: el banner de la edición, el mismo arte que la banlist. */
/* Son CINCO oráculos (Promocionales, PEX y La Cofradía están fuera, ver
   DocumentosController). Con auto-fill quedaban 4 arriba y uno huérfano abajo:
   van 3 arriba y 2 CENTRADOS abajo (rejilla de 6, cada banner ocupa 2 y el
   cuarto arranca en la columna 2), sin estirarlos, para que todos midan lo
   mismo. En teléfono, uno por fila. Si cambia la cantidad, revisar. */
.ora-documentos__ediciones {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ora-documentos__ediciones > * { grid-column: span 2; }
.ora-documentos__ediciones > :nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 640px) {
  .ora-documentos__ediciones { grid-template-columns: minmax(0, 1fr); }
  .ora-documentos__ediciones > *,
  .ora-documentos__ediciones > :nth-child(4) { grid-column: auto; }
}
.ora a.ora-doc-edicion {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1400 / 463;
  border-radius: 12px;
  background: var(--ora-mistico-inicio);
  border: 1px solid var(--ora-borde-sutil);
  text-decoration: none;
}
.ora a.ora-doc-edicion:hover { border-color: var(--ora-oro); }
.ora-doc-edicion img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ora a.ora-doc-edicion.sin-banner { background: linear-gradient(135deg, var(--ora-mistico-inicio), var(--ora-mistico-fin)); }
.ora-doc-edicion__nombre { font-family: var(--ora-display); font-size: 22px; color: var(--ora-texto); }

/* Lanzamientos y FAQ anteriores: filas con su ícono. */
.ora-documentos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.ora a.ora-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--ora-superficie);
  border: 1px solid transparent;
  text-decoration: none;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  color: var(--ora-texto-fuerte);
}
.ora a.ora-doc:hover { border-color: var(--ora-borde-oro); color: var(--ora-texto); }
.ora-doc__icono { flex-shrink: 0; color: var(--ora-oro); }

/* Juego organizado: un boletín por mes, agrupado por año. */
.ora-documentos__anio {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--ora-borde-sutil);
}
.ora .ora-documentos__anio-titulo {
  margin: 0;
  padding-top: 9px;
  font-family: var(--ora-cifra);
  font-size: 15px;
  font-weight: 400;
  color: var(--ora-texto-secundario);
}
.ora-documentos__meses { display: flex; flex-wrap: wrap; gap: 8px; }
.ora a.ora-doc-mes {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  text-decoration: none;
  font-family: var(--ora-interfaz);
  font-size: 14px;
  color: var(--ora-texto-fuerte);
}
.ora a.ora-doc-mes:hover { border-color: var(--ora-oro); color: var(--ora-texto); }

@media (max-width: 700px) {
  .ora-documentos__buscador { width: 100%; }
  .ora-doc-destacado__nombre { font-size: 26px; }
  .ora-documentos__anio { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ora .ora-documentos__anio-titulo { padding-top: 0; }
}

/* =============================================================
   Portada (Home/Index). Desde el 21 sep abre con el multijugador:
   es lo que trae jugadores nuevos. El multijugador todavía no se
   juega en el navegador, así que todo "jugar" acá es descargar la
   app. Las clases viejas de la portada (.ora-apertura, .ora-entrada,
   .ora-dos-bloques…) se quedan: las usan otras páginas.
   ============================================================= */

.ora-portada-antetitulo {
  display: block;
  font-family: var(--ora-cifra);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ora-oro);
}

.ora-portada-antetitulo--tenue { color: var(--ora-texto-terciario); }

/* Botón grande del héroe y de la temporada: el .ora-boton de siempre, con
   tamaño de llamado principal (≥ 44 px de toque). */
.ora-boton.ora-portada-cta,
.ora a.ora-boton.ora-portada-cta {
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 16px;
  justify-content: flex-start;
}

/* ---------- héroe ---------- */

.ora-portada-heroe {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-top: 72px;
  padding-bottom: 88px;
}

.ora-portada-heroe__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ora-portada-heroe h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  text-wrap: balance;
}

.ora-portada-bajada {
  max-width: 540px;
  font-family: var(--ora-interfaz);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
}

.ora-portada-descarga {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.ora-portada-descarga__botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ora-portada-qr {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* El QR va sobre papel claro: sobre la noche los lectores no lo toman. */
.ora-portada-qr img {
  width: 124px;
  height: 124px;
  padding: 6px;
  background: #F6F2E8;
  border-radius: 12px;
}

.ora-portada-qr span {
  width: 140px;
  font-family: var(--ora-interfaz);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ora-texto-terciario);
}

.ora-portada-nota {
  font-family: var(--ora-interfaz);
  font-size: 14px;
  color: var(--ora-texto-terciario);
}

.ora-portada-heroe__arte {
  position: relative;
  flex-shrink: 0;
  width: 440px;
  display: flex;
  justify-content: flex-end;
}

/* Una captura REAL de la app. El recorte de abajo esconde la barra de estado
   del teléfono donde se sacó: sin barra falsa ni barra ajena. */
.ora-portada-telefono {
  width: 324px;
  padding: 12px;
  background: #05070F;
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 46px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.ora-portada-telefono img {
  display: block;
  width: 300px;
  height: 600px;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 34px;
}

.ora-portada-globo {
  position: absolute;
  left: 0;
  top: 44%;
  width: 210px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--ora-interfaz);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ora-texto-fuerte);
}

.ora-portada-globo__rotulo {
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ora-oro);
}

/* ---------- cifras ---------- */

.ora-portada-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--ora-borde-sutil);
  border-bottom: 1px solid var(--ora-borde-sutil);
}

.ora-portada-cifras > div { display: flex; flex-direction: column; gap: 6px; }

.ora-portada-cifras__valor {
  font-family: var(--ora-cifra);
  font-size: 32px;
  color: var(--ora-texto-fuerte);
}

.ora-portada-cifras__valor--oro { color: var(--ora-oro); }

.ora-portada-cifras__glosa {
  font-family: var(--ora-interfaz);
  font-size: 14px;
  color: var(--ora-texto-terciario);
}

/* ---------- secciones ---------- */

.ora-portada-seccion { padding-top: 96px; }

.ora-portada-seccion h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
}

.ora-portada-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.ora-portada-encabezado__glosa {
  font-family: var(--ora-interfaz);
  font-size: 15px;
  color: var(--ora-texto-terciario);
}

/* ---------- tres maneras de jugar ---------- */

.ora-portada-modos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ora-portada-modo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 16px;
}

.ora-portada-modo--destacado { border-color: var(--ora-borde-oro); }

.ora-portada-modo__icono {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 14%, transparent);
}

.ora-portada-modo h3 { font-size: 25px; }

.ora-portada-modo p {
  font-family: var(--ora-interfaz);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ora-texto-secundario);
}

/* ---------- temporada ---------- */

.ora-portada-temporada {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}

.ora-portada-temporada__texto {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ora-portada-temporada__texto p {
  font-family: var(--ora-interfaz);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
}

.ora-portada-razas {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 30px;
  background: var(--ora-noche-elevada);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 16px;
}

.ora-portada-razas__cabeza,
.ora a.ora-portada-raza {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 64px 80px;
  align-items: center;
  gap: 14px;
}

.ora-portada-razas__cabeza {
  padding-bottom: 8px;
  font-family: var(--ora-cifra);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

.ora-portada-razas__cabeza span:nth-child(2) { grid-column: 2 / 4; }
.ora-portada-razas__cabeza span:last-child { text-align: right; }

.ora a.ora-portada-raza {
  padding: 8px 0;
  color: var(--ora-texto-fuerte);
}

.ora a.ora-portada-raza:hover { color: var(--ora-texto); }

.ora-portada-raza__nombre {
  font-family: var(--ora-interfaz);
  font-size: 16px;
}

/* La pista lleva la línea del 50%: una raza por encima gana más de lo que pierde. */
.ora-portada-raza__pista {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--ora-superficie);
}

.ora-portada-raza__pista::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--ora-texto-terciario);
}

/* Divergente: nace en el 50% y crece hacia el lado que corresponde. */
.ora-portada-raza__barra {
  position: absolute;
  top: 0;
  bottom: 0;
}

.ora-portada-raza__barra.es-arriba {
  left: 50%;
  border-radius: 0 5px 5px 0;
  background: var(--ora-oro);
}

.ora-portada-raza__barra.es-abajo {
  right: 50%;
  border-radius: 5px 0 0 5px;
  background: var(--ora-texto-tenue);
}

.ora-portada-raza__valor,
.ora-portada-raza__juegos {
  font-family: var(--ora-cifra);
  font-size: 14px;
}

.ora-portada-raza__juegos { text-align: right; color: var(--ora-texto-terciario); }

.ora-portada-razas__pie {
  padding-top: 8px;
  font-family: var(--ora-interfaz);
  font-size: 13px;
  color: var(--ora-texto-terciario);
}

/* ---------- el oráculo ---------- */

.ora-portada-oraculo {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 60px 64px;
  background: #121935;
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 22px;
}

.ora-portada-oraculo__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ora-portada-oraculo__texto p {
  max-width: 560px;
  font-family: var(--ora-interfaz);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
}

.ora-portada-buscador {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px;
  background: var(--ora-noche);
  border: 1px solid var(--ora-borde);
  border-radius: 14px;
  color: var(--ora-texto-terciario);
}

.ora-portada-buscador:focus-within { border-color: var(--ora-oro); }

.ora-portada-buscador input {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ora-texto);
  font-family: var(--ora-interfaz);
  font-size: 17px;
}

.ora-portada-oraculo__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--ora-interfaz);
  font-size: 15px;
}

.ora-portada-oraculo__abanico {
  position: relative;
  width: 360px;
  height: 300px;
  flex-shrink: 0;
}

.ora-portada-oraculo__abanico img {
  position: absolute;
  top: 40px;
  width: 170px;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.ora-portada-oraculo__abanico img:nth-child(1) { left: 20px; transform: rotate(-9deg); }
.ora-portada-oraculo__abanico img:nth-child(2) { left: 175px; transform: rotate(9deg); }
.ora-portada-oraculo__abanico img:nth-child(3) { left: 96px; top: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }

/* ---------- adaptación ---------- */

@media (max-width: 1100px) {
  .ora-portada-heroe { gap: 40px; }
  .ora-portada-heroe__arte { width: 340px; }
  .ora-portada-globo { display: none; }
  .ora-portada-temporada { gap: 40px; }
  .ora-portada-temporada__texto { width: 320px; }
  .ora-portada-oraculo { padding: 48px; gap: 40px; }
  .ora-portada-oraculo__abanico { display: none; }
}

@media (max-width: 860px) {
  .ora-portada-heroe {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .ora-portada-heroe__arte { width: auto; justify-content: center; }

  /* En el teléfono no hay nada que escanear. */
  .ora-portada-qr { display: none; }
  .ora-portada-descarga__botones { width: 100%; }
  .ora-boton.ora-portada-cta,
  .ora a.ora-boton.ora-portada-cta { justify-content: center; }

  .ora-portada-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .ora-portada-cifras__valor { font-size: 24px; }

  .ora-portada-seccion { padding-top: 64px; }
  .ora-portada-modos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ora-portada-modo { padding: 22px; }

  .ora-portada-temporada { flex-direction: column; gap: 28px; }
  .ora-portada-temporada__texto { width: auto; }
  .ora-portada-razas { width: 100%; padding: 20px; }
  .ora-portada-razas__cabeza,
  .ora a.ora-portada-raza { grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 10px; }
  .ora-portada-razas__cabeza span:nth-child(2) { grid-column: 2 / 4; }
  .ora-portada-razas__cabeza span:last-child,
  .ora-portada-raza__juegos { display: none; }

  .ora-portada-oraculo { padding: 28px 20px; border-radius: 16px; }
}

@media (max-width: 380px) {
  .ora-portada-telefono { width: 276px; padding: 10px; border-radius: 40px; }
  .ora-portada-telefono img { width: 256px; height: 512px; border-radius: 30px; }
}