/* =============================================================
   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: el mismo que la app pinta en el marco. */
  --ora-aliado: #3373CC;
  --ora-arma: #8C4026;
  --ora-talisman: #7333A6;
  --ora-totem: #338059;
  --ora-oro-carta: #8C731A;

  /* 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 respira un poco más ancha que el texto de la página: con la
   marca, seis o siete enlaces y el buscador, los 96 px de margen del pliego
   dejaban al último enlace sin sitio y lo tiraban a una segunda línea.
   Solo en pantalla ancha, que es donde sobra ese espacio a los lados. */
.ora-cabecera {
  position: relative;
  z-index: 2;
  padding-top: 18px;
}

@media (min-width: 1100px) {
  .ora-cabecera.ora-pliego {
    max-width: 1360px;
    padding-left: 64px;
    padding-right: 64px;
  }
}

.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;
}

.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,
  .ora-nav-compacta[open] .ora-menu__panel--documentos {
    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 —Documentos
     empezaba en Ragnarok, sin REGLAS ni los primeros oráculos— 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__panel--documentos,
  .ora-nav-compacta[open] .ora-menu__lista,
  .ora-nav-compacta[open] .ora-docs__rollo {
    max-height: none;
    overflow: visible;
  }

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

  .ora-nav-compacta[open] .ora-docs__grupo + .ora-docs__grupo { margin-top: 8px; }

  /* 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-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);
}

/* --- 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-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__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;
}

.ora-baraja__mano img {
  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__mano img + img { margin-left: -34px; }
.ora-baraja:hover .ora-baraja__mano img + img { 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);
}

.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-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; }
}

/* =============================================================
   Validador de formato.
   ============================================================= */

.ora-validador {
  margin: 8px 0 26px;
  padding: 18px 22px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-radius: 12px;
}

.ora-validador__cabecera { display: flex; align-items: flex-start; gap: 14px; }

.ora-validador__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--ora-interfaz);
  font-size: 15px;
  font-weight: 600;
}

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

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

.ora-validador__lista {
  margin: 16px 0 0;
  padding: 16px 0 0 0;
  list-style: none;
  border-top: 1px solid var(--ora-borde-sutil);
  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;
}

.ora-validador.es-valida { border-color: rgba(51, 204, 102, 0.45); }
.ora-validador.es-valida .ora-validador__marca { background: rgba(51,204,102,0.18); color: #6BCC96; }

.ora-validador.es-invalida { border-color: rgba(217, 140, 31, 0.55); }
.ora-validador.es-invalida .ora-validador__marca { background: rgba(217,140,31,0.18); color: #E8C24D; }

.ora-validador.es-indeterminado .ora-validador__marca {
  background: var(--ora-superficie-elevada);
  color: var(--ora-texto-terciario);
}

/* =============================================================
   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__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);
}

/* 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__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. */
.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); }
}

/* Panel de Documentos: los PDF oficiales, en columnas por grupo. En el sidebar
   viejo eran tres niveles de desplegable (Documentos › Oráculos › El Reto);
   son pocos, así que se ven todos de una y se abren de un clic. */
.ora-menu--ancho .ora-menu__panel--documentos {
  flex-direction: row;
  align-items: flex-start;
  gap: 26px;
  min-width: 0;
  width: max-content;
  max-width: min(880px, calc(100vw - 2 * var(--ora-margen)));
  padding: 16px 20px;
}

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

.ora-docs__grupo .ora-menu__titulo { padding-left: 8px; }

/* Juego organizado crece un archivo por mes: solo esa columna se desplaza. */
.ora-docs__rollo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  .ora-menu--ancho .ora-menu__panel--documentos {
    flex-direction: column;
    gap: 12px;
    width: min(320px, calc(100vw - 2 * var(--ora-margen)));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Dentro de un panel que ya se desplaza entero, un scroll anidado atrapa
     el gesto y no deja llegar al resto de los grupos. */
  .ora-docs__rollo { max-height: none; overflow-y: visible; }
}

/* 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 {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.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;
  gap: 14px;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
}

.ora-visor__caja img {
  max-width: 100%;
  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);
}

.ora-banlist__fecha {
  display: block;
  margin-top: 2px;
  font-family: var(--ora-interfaz);
  font-size: 12.5px;
  color: var(--ora-texto-terciario);
}

.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. */
.ora-banlist__banner {
  position: relative;
  height: 150px;
  background: var(--ora-mistico-inicio);
}

.ora-banlist__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ora-banlist__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(13, 18, 36, 0) 40%,
    rgba(13, 18, 36, 0.55) 72%,
    var(--ora-noche-elevada) 100%);
}

.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__banner { height: 108px; }
  .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 --- */

/* El semáforo de "¿puedo desplegar?": lo primero que se mira acá. */
.ora-semaforo {
  padding: 15px 18px;
  margin: 4px 0 24px;
  background: var(--ora-superficie);
  border: 1px solid var(--ora-borde-sutil);
  border-left: 3px solid var(--ora-borde);
  border-radius: 10px;
  font-family: var(--ora-interfaz);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ora-texto-secundario);
}

.ora-semaforo strong { color: var(--ora-texto); }

.ora-semaforo.es-verde { border-left-color: #33CC66; background: rgba(51,204,102,0.10); }
.ora-semaforo.es-rojo  { border-left-color: #D91A1A; background: rgba(217,26,26,0.12); }

.ora-jugador {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--ora-interfaz);
  font-size: 12px;
}

.ora-jugador.es-presente { background: rgba(51,204,102,0.14); border-color: rgba(51,204,102,0.45); color: #6BCC96; }
.ora-jugador.es-ausente  { background: rgba(217,26,26,0.14);  border-color: rgba(217,26,26,0.45);  color: #FF7A7A; }
.ora-jugador.es-bot      { background: var(--ora-superficie-elevada); border-color: var(--ora-borde-sutil); color: var(--ora-texto-secundario); }

.ora-versus {
  margin: 0 6px;
  font-family: var(--ora-lectura);
  font-style: italic;
  color: var(--ora-texto-terciario);
}

/* Una partida en curso callada un buen rato: candidata a estar trabada. */
.ora-app #filas tr.es-callada { background: rgba(255, 191, 51, 0.07); }

.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: la lámina de la carta es lo que se reconoce primero, y
   la conclusión se lee sin abrir nada. */
.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); }

.ora .ora-caso__titular {
  margin: 0;
  font-family: var(--ora-lectura);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ora-texto-fuerte);
}

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

/* 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); }

.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);
}

/* --- El caso, abierto --- */

.ora-caso-detalle__volver { margin-bottom: 16px; }

.ora-caso-detalle {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ora-caso-detalle__lamina img {
  width: 210px;
  max-width: 40vw;
  border-radius: 10px;
}

.ora-caso-detalle__cuerpo { flex: 1 1 380px; min-width: 0; }

.ora .ora-caso-detalle__cuerpo h1 { margin: 0 0 10px; }

.ora-caso-detalle__sellos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.ora .ora-caso-detalle__solucion {
  max-width: 68ch;
  margin: 0 0 20px;
  font-family: var(--ora-lectura);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ora-texto-fuerte);
  white-space: pre-wrap;
}

.ora-caso-detalle__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0 0 20px;
  font-family: var(--ora-interfaz);
  font-size: 13.5px;
}

.ora .ora-caso-detalle__datos dt { color: var(--ora-texto-terciario); font-weight: 400; }
.ora .ora-caso-detalle__datos dd { margin: 0; color: var(--ora-texto-secundario); }

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

.ora-caso-detalle__canonico {
  padding: 12px 14px;
  margin-bottom: 20px;
  background: var(--ora-superficie);
  border-left: 2px solid var(--ora-borde);
  border-radius: 0 8px 8px 0;
  font-family: var(--ora-interfaz);
  font-size: 14px;
  color: var(--ora-texto-secundario);
}

/* La regla relacionada: el texto impreso, que es donde casi siempre estaba la
   condición que decidió la partida. */
.ora-caso-detalle__regla {
  padding-top: 20px;
  border-top: 1px solid var(--ora-borde-sutil);
}

.ora .ora-caso-detalle__regla h2 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ora-texto-terciario);
}

.ora .ora-caso-detalle__habilidad,
.ora .ora-caso-detalle__aclaracion {
  max-width: 68ch;
  margin: 0 0 14px;
  font-family: var(--ora-lectura);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ora-texto-secundario);
  white-space: pre-wrap;
}

.ora-caso-detalle__rotulo {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ora-interfaz);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  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 {
  border-collapse: separate;
  border-spacing: 2px;
  font-family: var(--ora-cifra);
  font-size: 11px;
}
.ora-matriz th {
  padding: 4px 6px;
  font-family: var(--ora-interfaz);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ora-texto-secundario);
  text-align: right;
  white-space: nowrap;
}
.ora-matriz thead th {
  text-align: center;
  /* 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. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 86px;
  padding: 6px 3px;
}
.ora-matriz td {
  width: 34px;
  height: 30px;
  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); }

.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; }

/* 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);
}