/* Oráculo Elevenchi — estilos del frontend.
   Todo lo controlado por variables CSS se genera en
   OE_Settings::generar_css_variables() a partir de Apariencia > Oráculo. */

.oe-tirada {
    /* Antes era un tope fijo de 900px, de cuando no existían ni el
       tapete ni la columna lateral. Ahora la variable la calcula PHP a
       partir de lo que el tapete y la columna necesitan de verdad, y
       nunca baja de los 900px de siempre para quien no use ninguno
       de los dos. min() con 98vw para que en pantallas normales no se
       salga del viewport. */
    max-width: min(98vw, var(--oe-tirada-ancho-maximo, 900px));
    margin: 0 auto;
    text-align: center;
    font-family: var(--oe-fuente, inherit);
}
/* Los filtros (categoría/tipo/pregunta) y el resumen de la elección se
   quedan en su ancho de siempre, aunque el tapete de más abajo pueda
   ensancharse mucho: son un formulario, no la tirada, y en pantallas
   anchas quedaban tan estirados que las preguntas sugeridas se veían
   descentradas y los campos con un aspecto forzado. */
.oe-controles-ancho {
    max-width: 900px;
    margin: 0 auto;
}
.oe-preview-escena {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--oe-fuente, inherit);
}

.oe-ritual-centrado {
    display: none;
    max-width: var(--oe-ritual-ancho-maximo, 420px);
    margin: var(--oe-ritual-margen-arriba, 40px) auto var(--oe-ritual-margen-abajo, 40px);
    padding: var(--oe-ritual-padding, 40px) 24px;
    text-align: var(--oe-ritual-alineacion, center);
    font-family: var(--oe-ritual-fuente, inherit);
    transition: opacity var(--oe-ritual-duracion, 0.5s) ease, transform var(--oe-ritual-duracion, 0.5s) ease;
}
.oe-ritual-paso {
    /* cada paso (texto, respiración, botón final) se apila en el mismo
       sitio — solo se ve uno cada vez, según el punto del ritual en el
       que se esté. */
}
.oe-ritual-texto {
    font-size: var(--oe-ritual-tamano-texto, 1.15em);
    color: var(--oe-ritual-color-texto, inherit);
    line-height: var(--oe-ritual-interlineado-texto, 1.6);
    margin-bottom: var(--oe-ritual-espacio-texto-boton, 24px);
}
/* Mientras el ritual está pendiente, se ve solo él — el resto de la
   tirada (controles, escena, botones...) queda oculto hasta pulsar
   "Estoy list@". */
.oe-tirada.oe-ritual-pendiente > .oe-ritual-centrado {
    display: block;
}
.oe-tirada.oe-ritual-pendiente > *:not(.oe-ritual-centrado) {
    display: none;
}
/* Las 4 transiciones de salida configurables desde Apariencia — la
   quinta opción ("ninguna") no necesita clase: el JS quita el bloque
   al instante sin pasar por aquí. */
.oe-ritual-saliendo-fundido { opacity: 0; }
.oe-ritual-saliendo-deslizar-arriba { opacity: 0; transform: translateY(-30px); }
.oe-ritual-saliendo-deslizar-abajo { opacity: 0; transform: translateY(30px); }
.oe-ritual-saliendo-escala { opacity: 0; transform: scale(0.85); }
.oe-ritual-saliendo-desenfoque { opacity: 0; filter: blur(10px); }
.oe-ritual-saliendo-giro { opacity: 0; transform: rotate(8deg) scale(0.9); }

/* El círculo de las 3 respiraciones guiadas — oculto por defecto,
   solo se muestra si esa opción está activa (el botón "Estoy list@"
   entonces también empieza oculto hasta terminar el ciclo). */
.oe-ritual-respiracion {
    display: none;
    margin: 8px 0 24px;
}
/* El círculo crece hasta 1.5x al inspirar. Si el hueco reservado fuera
   solo su tamaño en reposo, al crecer se saldría por arriba y por abajo,
   montándose sobre el texto. Aquí se reserva de antemano el alto que va
   a ocupar en su punto más grande, y el círculo se centra dentro. */
.oe-ritual-respiracion {
    min-height: calc(var(--oe-ritual-circulo-tamano, 56px) * 1.5);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.oe-tirada .oe-ritual-paso.oe-ritual-respiracion:not([hidden]) {
    display: flex;
}
.oe-ritual-circulo {
    position: relative;
    width: var(--oe-ritual-circulo-tamano, 56px);
    height: var(--oe-ritual-circulo-tamano, 56px);
    margin: 0 auto 18px;
    border-radius: 50%;
    /* Un pequeño brillo arriba a la izquierda le da volumen — no es un
       círculo plano, parece una esfera suave. */
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
        var(--oe-ritual-circulo-color, #d8ae55);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    /* Solo transform aquí — nunca box-shadow, que obliga al navegador a
       recalcular en cada fotograma y se ve "a trompicones". El halo de
       alrededor se anima aparte, en su propia capa (ver ::before). */
    transition: transform var(--oe-ritual-respiracion-duracion, 4s) cubic-bezier(0.37, 0, 0.63, 1);
}
/* El halo — una copia del círculo, detrás, que crece y se desvanece a
   la vez que el de delante. Solo anima transform y opacity (las dos
   únicas propiedades que el navegador puede mover con la tarjeta
   gráfica sin recalcular nada), así que queda perfectamente fluido. */
.oe-ritual-circulo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--oe-ritual-circulo-color, #d8ae55);
    opacity: 0.45;
    transform: scale(1);
    transition: transform var(--oe-ritual-respiracion-duracion, 4s) cubic-bezier(0.37, 0, 0.63, 1), opacity var(--oe-ritual-respiracion-duracion, 4s) ease;
    z-index: -1;
}
.oe-ritual-circulo.oe-inspirando {
    /* Crecimiento comedido (1.5x, no 1.8x) — se nota sin resultar
       exagerado. */
    transform: scale(1.5);
}
.oe-ritual-circulo.oe-inspirando::before {
    transform: scale(1.6);
    opacity: 0;
}
.oe-ritual-respiracion-texto {
    /* Vive DENTRO del círculo a propósito — al heredar el mismo
       transform:scale() del padre, crece y se encoge con él, sin
       necesitar ninguna animación aparte para el texto. */
    font-size: 0.72em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* Al revelarse el resto de la tirada justo después del ritual, entra
   con un pequeño fundido — para que tampoco ese paso se note brusco. */
.oe-tirada.oe-recien-revelado > *:not(.oe-ritual-centrado) {
    animation: oe-ritual-revelar var(--oe-ritual-duracion, 0.5s) ease;
}
@keyframes oe-ritual-revelar {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.oe-controles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.oe-preguntas-sugeridas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    justify-content: center;
}
.oe-pregunta-sugerida {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    background: none;
    color: inherit;
    opacity: 0.75;
    font-size: 0.85em;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.oe-pregunta-sugerida:hover {
    opacity: 1;
    background: var(--oe-color-fondo-carta, #fffaf0);
}

.oe-resumen-eleccion {
    max-width: 480px;
    margin: -8px auto 24px;
    padding: 14px 20px;
    border-radius: 10px;
    background: var(--oe-color-fondo-carta, #fffaf0);
    border: 1px solid var(--oe-color-borde, #d8c9a3);
    font-size: 0.95em;
}
.oe-resumen-pregunta-texto {
    margin: 6px 0 0;
    font-style: italic;
    opacity: 0.85;
}

.oe-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9em;
    opacity: 0.85;
}

.oe-botones-cantidad {
    display: inline-flex;
    gap: 8px;
}

.oe-controles-tirada {
    /* Antes era un div normal, centrado solo por el text-align:center
       heredado de .oe-tirada — funcionaba mientras .oe-tirada tenía un
       ancho fijo, pero ahora ese contenedor puede ser mucho más ancho
       (para dar sitio al tapete y la columna), y el texto centrado ya
       no coincide con el centro del tapete. El ancho real por el que se
       centra ahora lo fija el JS, midiendo el tapete (ver
       ajustarAlturaEscena en oraculo.js); aquí solo se asegura que los
       tres botones queden siempre en una sola fila, nunca en dos
       líneas, cualquiera que sea ese ancho. No se toca el aspecto de
       los propios botones — mismo tamaño, colores y forma de siempre. */
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.oe-controles-y-acciones {
    /* Envuelve la fila de Barajar/Sacar/Volver a tirar JUNTO con los tres
       iconos pequeños (Compartir/PDF/Guardar), para que se lean como una
       sola línea de acciones en vez de dos filas apiladas. Si no caben
       en una línea (pantallas estrechas, o un botón con texto largo),
       se permite el salto — mejor un segundo renglón ordenado que un
       desbordamiento. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Este es el hueco ENTRE los dos bloques (Barajar/Sacar/Volver a
       tirar por un lado, Compartir/PDF/Guardar por otro) — más generoso
       a propósito, para separar claramente la acción principal de las
       secundarias. El espacio entre los botones DENTRO de cada bloque no
       cambia: ese lo lleva el margen propio de cada botón. */
    column-gap: var(--oe-controles-espacio-bloques, 40px);
    row-gap: 14px;
    margin-bottom: var(--oe-controles-espacio-abajo, 20px);
}
.oe-controles-y-acciones .oe-acciones-secundarias {
    /* Ya no necesita su propio margen superior: al estar en la misma
       fila que los botones grandes, el hueco lo da el gap del envoltorio. */
    margin-top: 0;
}

.oe-btn-sacar,
.oe-btn-barajar,
.oe-btn-reiniciar,
.oe-ritual-boton,
.oe-ritual-boton-continuar {
    padding: var(--oe-padding-boton-v, 12px) var(--oe-padding-boton-h, 28px);
    border-radius: var(--oe-boton-radio-bordes, 999px);
    border: var(--oe-boton-borde, none);
    background: var(--oe-boton-fondo, linear-gradient(135deg, #d8ae55, #b8823f));
    color: var(--oe-boton-color-texto, #fff);
    font-size: var(--oe-boton-fuente-tamano, 16px);
    cursor: pointer;
    box-shadow: var(--oe-boton-sombra, 0 4px 14px rgba(0,0,0,0.2));
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
    margin: 0 6px;
    text-decoration: none; /* por si acaba siendo un <a>, para el visitante sin cuenta */
}

/* ---------- Fila de acciones secundarias (Compartir, PDF, Guardar) ----------
   Antes eran botones grandes iguales que "Volver a tirar", y con las 3
   o 4 acciones juntas se amontonaban y saltaban a una segunda línea. En
   vez de competir con el botón principal, ahora son pequeños círculos
   uniformes con solo el icono — el texto sigue existiendo para quien
   use lector de pantalla, y aparece como tooltip nativo al pasar el
   ratón (gracias al "title" del botón). */
.oe-acciones-secundarias {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--oe-acciones-espacio-iconos, 14px);
    margin-top: 16px;
    flex-wrap: wrap;
}
.oe-acciones-secundarias .oe-btn-compartir,
.oe-acciones-secundarias .oe-btn-pdf,
.oe-acciones-secundarias .oe-btn-guardar {
    /* Se anula el estilo grande de botón principal (relleno amplio,
       tipografía del tema) por uno pequeño y redondo. El COLOR ya no
       se fija aquí: cada acción trae el suyo desde Apariencia >
       Botones de la tirada (ver las tres reglas de debajo). */
    /* !important porque los temas (Flatsome estiliza TODOS los <button>
       de la web con reglas muy específicas) pisaban estos estilos y los
       botones acababan saliendo grandes y de colores otra vez. */
    width: var(--oe-accion-tamano, 42px) !important;
    height: var(--oe-accion-tamano, 42px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    /* Sin opacidad reducida: antes el círculo era un gris casi
       transparente (rgba negro al 4%) y por eso los tres iconos se
       veían apagados, como si estuvieran desactivados.
       OJO: este !important (necesario contra Flatsome) anulaba el
       fundido de entrada de la cascada — los tres iconos se veían
       desde el primer momento, ya encendidos. Las reglas de
       "oe-accion-esperando" al final del archivo llevan también
       !important para poder ganarle SOLO durante esa animación. */
    opacity: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15em;
    cursor: pointer;
    /* El "Guardar" del visitante sin sesión es un <a>, no un <button> —
       sin esto saldría subrayado y con el color de enlace del tema. */
    text-decoration: none !important;
    transition: filter 0.15s ease, transform 0.15s ease, width 0.2s ease, border-radius 0.2s ease, padding 0.2s ease;
}
.oe-acciones-secundarias .oe-btn-compartir {
    background: var(--oe-accion-compartir-fondo, #25d366) !important;
    color: var(--oe-accion-compartir-icono, #ffffff) !important;
}
.oe-acciones-secundarias .oe-btn-pdf {
    background: var(--oe-accion-pdf-fondo, #c0392b) !important;
    color: var(--oe-accion-pdf-icono, #ffffff) !important;
}
.oe-acciones-secundarias .oe-btn-guardar {
    background: var(--oe-accion-guardar-fondo, #b8823f) !important;
    color: var(--oe-accion-guardar-icono, #ffffff) !important;
}
.oe-acciones-secundarias .oe-btn-compartir:hover,
.oe-acciones-secundarias .oe-btn-pdf:hover,
.oe-acciones-secundarias .oe-btn-guardar:hover {
    /* Se aclara un poco en vez de cambiar de color: así el efecto vale
       para cualquier color que se elija en el panel. */
    filter: brightness(1.12);
    transform: translateY(-2px);
}
.oe-acciones-secundarias .oe-btn-compartir svg {
    width: 55%;
    height: 55%;
}

/* ---------- Aviso al pasar el ratón (tooltip propio) ----------
   El "title" del navegador es feo, tarda casi un segundo en salir y no
   respeta la tipografía ni los colores de la web. Este lo sustituye:
   una burbujita pequeña con los colores del plugin, sin JavaScript.
   El texto viaja en el atributo data-oe-tip del botón. */
.oe-acciones-secundarias [data-oe-tip] {
    position: relative;
}
.oe-acciones-secundarias [data-oe-tip]::after,
.oe-acciones-secundarias [data-oe-tip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    position: absolute;
    left: 50%;
    z-index: 30;
}
.oe-acciones-secundarias [data-oe-tip]::after {
    content: attr(data-oe-tip);
    bottom: calc(100% + 10px);
    transform: translate(-50%, 4px);
    background: var(--oe-tip-fondo, #6b4423);
    color: var(--oe-tip-texto, #ffffff);
    font-family: var(--oe-fuente, inherit);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
/* La puntita triangular de la burbuja */
.oe-acciones-secundarias [data-oe-tip]::before {
    content: "";
    bottom: calc(100% + 4px);
    transform: translate(-50%, 4px);
    border: 6px solid transparent;
    border-top-color: var(--oe-tip-fondo, #6b4423);
}
.oe-acciones-secundarias [data-oe-tip]:hover::after,
.oe-acciones-secundarias [data-oe-tip]:focus-visible::after,
.oe-acciones-secundarias [data-oe-tip]:hover::before,
.oe-acciones-secundarias [data-oe-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
/* Mientras se muestra un aviso pasajero ("Generando…") el texto ya se
   ve dentro del propio botón — la burbuja sobraría y se esconde. */
.oe-acciones-secundarias .oe-btn-mostrando-texto::after,
.oe-acciones-secundarias .oe-btn-mostrando-texto::before {
    display: none;
}
/* El texto va oculto visualmente por defecto (solo para lectores de
   pantalla y como respaldo si algo fallara con el tooltip) — técnica
   estándar de accesibilidad, en vez de "display:none" que lo
   escondería también de esos lectores. */
.oe-btn-texto-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Mientras dura un aviso pasajero ("Generando…", "✔ Guardada"), el
   texto sí se hace visible junto al icono — si no, ese aviso nunca
   llegaría a verse, quedando oculto igual que la etiqueta normal. */
.oe-acciones-secundarias .oe-btn-mostrando-texto {
    width: auto !important;
    border-radius: 999px !important;
    padding: 0 16px 0 12px !important;
    gap: 6px;
}
.oe-btn-mostrando-texto .oe-btn-texto-oculto {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 0.85em;
}
.oe-btn-sacar:hover,
.oe-btn-barajar:hover,
.oe-btn-reiniciar:hover {
    /* El efecto elegido en Apariencia > Botones se traduce en estas dos
       variables — para "Ninguno" ambas quedan en su valor neutro
       (sin transformar, sin aclarar), y cada efecto solo toca la que
       necesita, dejando la otra en su neutro. */
    transform: var(--oe-boton-hover-transform, translateY(-2px));
    filter: var(--oe-boton-hover-filter, none);
}
/* Ojo: aquí NO va .oe-btn-guardar. Es una de las acciones pequeñas y
   esta regla lo dejaba al 50% de opacidad — que es justo el aspecto
   "apagado" que tenían los tres iconos. */
.oe-btn-sacar:disabled,
.oe-btn-barajar:disabled { opacity: 0.5; cursor: default; transform: none; }

.oe-btn-reiniciar,
.oe-btn-compartir,
.oe-btn-pdf,
.oe-btn-guardar {
    display: none;
}

/* ---------- Escena: mazo boca abajo + resultado, anclados al mismo punto ---------- */

.oe-tirada,
.oe-preview-resultado {
    /* Tamaño de carta FLUIDO: crece/decrece según el ancho de pantalla en
       vez de saltar entre 2 tamaños fijos. El valor de Apariencia
       (--oe-ancho-carta) actúa como techo en pantallas grandes; en
       pantallas estrechas se reduce suavemente hasta un mínimo legible.
       (También se aplica a .oe-preview-resultado — la vista previa del
       panel de Apariencia — para que se comporte exactamente igual.) */
    --oe-ancho-carta-fluido: clamp(92px, 24vw, var(--oe-ancho-carta, 160px));
    /* El mazo (mientras se baraja) usa SIEMPRE este tamaño grande, tenga
       la tirada el tamaño de lienzo que tenga — antes heredaba por error
       el tamaño pequeño pensado para muchas cartas juntas en el lienzo,
       y se veía diminuto y sin fuerza visual mientras se barajaba. */
    --oe-mazo-ancho-carta: clamp(92px, 24vw, var(--oe-ancho-carta, 160px));
}

.oe-escena {
    position: relative;
    /* Por defecto solo reserva lo que ocupa el mazo. El hueco extra para
       el resultado (etiqueta, significado, botón de ficha...) se añade
       dinámicamente por JS SOLO cuando hay cartas reveladas que mostrar
       — así no queda un espacio en blanco antes de sacar cartas.
       Usa --oe-mazo-ancho-carta (no --oe-ancho-carta-fluido) porque el
       mazo se pinta con ese tamaño, más grande — si no, la escena se
       queda corta y el mazo se sale por debajo, montándose sobre los
       botones de "Barajar"/"Sacar cartas". */
    min-height: calc(var(--oe-mazo-ancho-carta, var(--oe-ancho-carta-fluido)) * 1.5);
    transition: min-height 0.3s ease;
    margin: var(--oe-mazo-espacio-arriba, 70px) auto var(--oe-mazo-espacio-abajo, 70px);
}

.oe-mazo-zona {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--oe-mazo-ancho-carta, var(--oe-ancho-carta-fluido));
    height: calc(var(--oe-mazo-ancho-carta, var(--oe-ancho-carta-fluido)) * 1.5);
}

.oe-carta-back {
    position: absolute;
    top: 0; left: 0;
    width: var(--oe-mazo-ancho-carta, var(--oe-ancho-carta-fluido));
    height: calc(var(--oe-mazo-ancho-carta, var(--oe-ancho-carta-fluido)) * 1.5);
    border-radius: 0;
    background: linear-gradient(135deg, var(--oe-color-primario, #b8823f), var(--oe-color-secundario, #6b4423));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    border: var(--oe-grosor-borde, 2px) solid var(--oe-color-borde, #d8ae55);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.oe-carta-back::after {
    content: "✦";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #f3e6cf;
    font-size: 2em;
    opacity: 0.6;
}

.oe-resultado {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* fijo — el control de este ajuste ya no existe en Apariencia, no se usaba en las tiradas reales */
    width: max-content;
    max-width: 92vw;
}

/* ---------- Tiradas con rejilla fija (Pasado/Presente/Futuro, Cruz Celta...) ---------- */

.oe-escena-rejilla {
    /* Redefine el ancho "fluido" de carta para todo lo que esté dentro del
       lienzo — como los tamaños de letra se calculan a partir de esta
       variable, al ser más pequeña aquí el texto se reduce con ella en
       vez de quedarse con el tamaño pensado para una carta grande. */
    --oe-ancho-carta-fluido: clamp(48px, 13vw, 96px);
}
.oe-escena-rejilla .oe-resultado {
    display: block; /* las cartas se posicionan con position:absolute individualmente */
    /* 100% (de siempre) = min(94vw, 640px). El tope de 640px ahora es
       configurable en Apariencia (Tapete > Ancho máximo de la tirada):
       con pantallas anchas, 640px dejaba las cartas pequeñas y mucho
       espacio muerto a los lados. Sigue siendo configurable por cada
       Tirada desde su editor, igual que el alto. */
    /* El ancho es el MENOR de dos topes: el de siempre (basado en el
       ancho de pantalla) y uno nuevo basado en el ALTO disponible. Como
       el lienzo tiene una proporción fija (aspect-ratio, justo debajo),
       de este segundo tope se despeja qué ancho produciría como mucho
       la altura permitida — así, en una tirada de muchas cartas (más
       alta que ancha) en una pantalla baja, el conjunto se encoge por
       ancho Y alto a la vez, en vez de quedarse ancho pero cortado por
       abajo y obligar a hacer scroll para ver toda la tirada. */
    width: min(
        calc(min(96vw, var(--oe-lienzo-ancho-max, 640px)) * var(--oe-lienzo-ancho-ratio, 1)),
        calc(var(--oe-tirada-alto-max, 68vh) / var(--oe-lienzo-alto-ratio, 1))
    );
    /* 1 = cuadrado (de siempre). Configurable por cada Tirada desde su
       editor — así una fila de pocas cartas no se queda con márgenes
       vacíos arriba/abajo por forzarla dentro de un cuadrado. */
    aspect-ratio: 1 / var(--oe-lienzo-alto-ratio, 1);
    max-width: 92vw;
}
.oe-escena-rejilla .oe-carta-final {
    /* En el lienzo libre, el ancho de carta es proporcional al propio
       lienzo (no al ancho de pantalla), y configurable por cada Tirada
       desde su editor — así puedes achicarlas si la composición las
       coloca muy juntas (ej. una pirámide con muchas posiciones). */
    width: var(--oe-lienzo-ancho-carta, 15%);
}
.oe-carta-final-clicable {
    cursor: pointer;
}
.oe-carta-final-clicable .oe-carta-final-frontal {
    transition: filter 0.15s ease, transform 0.15s ease;
}
.oe-carta-final-clicable:hover .oe-carta-final-frontal {
    filter: brightness(1.12);
}

/* ---------- Efectos alternativos al volteo 3D (fundido / deslizar / escala) ---------- */

.oe-carta-simple {
    width: 100%;
    aspect-ratio: 2/3;
    /* Aquí SÍ hay border-radius de sobra: como no llevan volteo 3D ni
       backface-visibility, no tienen el fallo de Chrome que sí afecta al
       volteo clásico (ver .oe-carta-final-cara más abajo). */
    border-radius: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity calc(0.6s * var(--oe-velocidad-mult, 1)) ease,
                transform calc(0.6s * var(--oe-velocidad-mult, 1)) ease,
                filter 0.15s ease;
}
.oe-carta-simple.oe-invertida { transform: rotate(180deg); }

.oe-efecto-deslizar { transform: translateY(30px); }
.oe-efecto-deslizar.oe-invertida { transform: translateY(30px) rotate(180deg); }

.oe-efecto-escala { transform: scale(0.7); }
.oe-efecto-escala.oe-invertida { transform: scale(0.7) rotate(180deg); }

.oe-carta-final.oe-fade-in .oe-carta-simple {
    opacity: 1;
    transform: none;
}
.oe-carta-final.oe-fade-in .oe-carta-simple.oe-invertida {
    transform: rotate(180deg);
}
.oe-carta-final-clicable:hover .oe-carta-simple {
    filter: brightness(1.12);
}

.oe-carta-final {
    width: var(--oe-ancho-carta-fluido);
    opacity: 0;
    perspective: 800px;
}
.oe-carta-final.oe-fade-in { opacity: 1; }

.oe-carta-final-flipper {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    transform-style: preserve-3d;
    transition: transform calc(1.05s * var(--oe-velocidad-mult, 1)) cubic-bezier(.25,.46,.45,.94);
    transform: rotateY(0deg);
}
.oe-carta-final.oe-fade-in .oe-carta-final-flipper {
    transform: rotateY(180deg);
}

.oe-carta-final-cara {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Sin border-radius aquí a propósito: combinado con el volteo 3D de
       abajo (backface-visibility), provocaba un fallo de renderizado de
       Chrome (un "cuadrado fantasma" visible sobre la carta). Esquinas
       rectas, pero sin ese fallo — confirmado quitando solo esta línea. */
    backface-visibility: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
}
.oe-carta-final-dorso {
    background-color: var(--oe-color-fondo-carta, #b8823f);
    background-image: linear-gradient(135deg, var(--oe-color-primario, #b8823f), var(--oe-color-secundario, #6b4423));
    border: var(--oe-grosor-borde, 2px) solid var(--oe-color-borde, #d8ae55);
    display: flex; align-items: center; justify-content: center;
}
.oe-carta-final-dorso::after {
    content: "✦";
    color: #f3e6cf;
    font-size: 2em;
    opacity: 0.6;
}
.oe-carta-final-frontal {
    transform: rotateY(180deg);
}
.oe-carta-final-frontal.oe-invertida {
    transform: rotateY(180deg) rotate(180deg);
}

.oe-check-invertidas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    white-space: nowrap;
}

/* ---------- Estilos del "asentado" tras el volteo (elige uno en Apariencia) ---------- */

/* Brillo dorado — el de siempre: crece un poco y destella en dorado. */
@keyframes oeAsentarBrillo {
    0%   { transform: rotateY(180deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(216,174,85,0)); }
    40%  { transform: rotateY(180deg) scale(calc(1 + 0.055 * var(--oe-brillo-mult, 1)));
           filter: brightness(calc(1 + 0.3 * var(--oe-brillo-mult, 1))) drop-shadow(0 0 calc(14px * var(--oe-brillo-mult, 1)) rgba(216,174,85,0.65)); }
    100% { transform: rotateY(180deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(216,174,85,0)); }
}
@keyframes oeAsentarBrilloInvertida {
    0%   { transform: rotateY(180deg) rotate(180deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(216,174,85,0)); }
    40%  { transform: rotateY(180deg) rotate(180deg) scale(calc(1 + 0.055 * var(--oe-brillo-mult, 1)));
           filter: brightness(calc(1 + 0.3 * var(--oe-brillo-mult, 1))) drop-shadow(0 0 calc(14px * var(--oe-brillo-mult, 1)) rgba(216,174,85,0.65)); }
    100% { transform: rotateY(180deg) rotate(180deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(216,174,85,0)); }
}
.oe-carta-final-frontal.oe-asentar-brillo {
    animation: oeAsentarBrillo calc(0.52s * var(--oe-velocidad-mult, 1)) ease-out;
}
.oe-carta-final-frontal.oe-invertida.oe-asentar-brillo {
    animation: oeAsentarBrilloInvertida calc(0.52s * var(--oe-velocidad-mult, 1)) ease-out;
}

/* Rebote — crece y vuelve, sin ningún cambio de color/brillo. */
@keyframes oeAsentarRebote {
    0%   { transform: rotateY(180deg) scale(1); }
    35%  { transform: rotateY(180deg) scale(calc(1 + 0.08 * var(--oe-brillo-mult, 1))); }
    65%  { transform: rotateY(180deg) scale(calc(1 - 0.02 * var(--oe-brillo-mult, 1))); }
    100% { transform: rotateY(180deg) scale(1); }
}
@keyframes oeAsentarReboteInvertida {
    0%   { transform: rotateY(180deg) rotate(180deg) scale(1); }
    35%  { transform: rotateY(180deg) rotate(180deg) scale(calc(1 + 0.08 * var(--oe-brillo-mult, 1))); }
    65%  { transform: rotateY(180deg) rotate(180deg) scale(calc(1 - 0.02 * var(--oe-brillo-mult, 1))); }
    100% { transform: rotateY(180deg) rotate(180deg) scale(1); }
}
.oe-carta-final-frontal.oe-asentar-rebote {
    animation: oeAsentarRebote calc(0.45s * var(--oe-velocidad-mult, 1)) ease-out;
}
.oe-carta-final-frontal.oe-invertida.oe-asentar-rebote {
    animation: oeAsentarReboteInvertida calc(0.45s * var(--oe-velocidad-mult, 1)) ease-out;
}

/* Destello — un flash breve de luz, sin cambiar de tamaño. */
@keyframes oeAsentarDestello {
    0%   { filter: brightness(1); }
    30%  { filter: brightness(calc(1 + 0.5 * var(--oe-brillo-mult, 1))); }
    100% { filter: brightness(1); }
}
.oe-carta-final-frontal.oe-asentar-destello {
    animation: oeAsentarDestello calc(0.38s * var(--oe-velocidad-mult, 1)) ease-out;
}
/* (Destello no necesita variante invertida — no toca el "transform", solo el brillo.) */

/* ---------- Modal de ficha completa (variables propias, independientes de la tirada) ---------- */

.oe-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--oe-modal-overlay-rgba, rgba(0,0,0,0.55));
    opacity: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none; /* mientras no esté visible, no bloquea clics de la página */
}
.oe-modal-overlay[hidden] { display: none; } /* refuerza el ocultado real (evita que "display:flex" de arriba lo pise) */
.oe-modal-overlay.oe-visible { opacity: 1; pointer-events: auto; }

.oe-modal-ficha {
    position: relative;
    background: var(--oe-modal-color-fondo, #fdf6e9);
    border-radius: var(--oe-modal-radio-bordes, 12px);
    max-width: var(--oe-modal-ancho-maximo, 420px);
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--oe-modal-padding, 28px);
    box-sizing: border-box;
    font-family: var(--oe-modal-fuente, inherit);
    text-align: center;
    transform: translateY(12px);
    transition: transform 0.25s ease;
}
.oe-modal-overlay.oe-visible .oe-modal-ficha { transform: translateY(0); }

.oe-modal-imagen {
    width: var(--oe-modal-ancho-imagen, 120px);
    aspect-ratio: 2/3;
    margin: 0 auto var(--oe-modal-espacio-bloques, 16px);
    border-radius: var(--oe-modal-radio-bordes, 12px);
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.oe-modal-titulo {
    margin: 0;
    color: var(--oe-modal-color-texto, #6b4423);
    font-size: calc(var(--oe-modal-tamano-titulo, 20px));
}

.oe-modal-clave {
    margin: 6px 0 var(--oe-modal-espacio-bloques, 16px);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--oe-modal-color-acento, #b8823f);
}

.oe-modal-bloque {
    text-align: left;
    margin-bottom: var(--oe-modal-espacio-bloques, 16px);
}
.oe-modal-bloque h4 {
    margin: 0 0 4px;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--oe-modal-color-acento, #b8823f);
}
.oe-modal-bloque p {
    margin: 0;
    font-size: var(--oe-modal-tamano-texto, 15px);
    line-height: 1.5;
    color: var(--oe-modal-color-texto, #6b4423);
}

/* Bloques tipo "grupo" (con subcampos, ej. Favorables / Desafiantes) */
.oe-modal-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.oe-modal-subcampo {
    flex: 1;
    min-width: 120px;
}
.oe-modal-subcampo-label {
    display: block;
    font-size: 0.75em;
    opacity: 0.75;
    margin-bottom: 2px;
    color: var(--oe-modal-color-texto, #6b4423);
}
.oe-modal-subcampo p {
    margin: 0;
    font-size: var(--oe-modal-tamano-texto, 15px);
    line-height: 1.4;
    color: var(--oe-modal-color-texto, #6b4423);
}

/* Flechas: pasar a la carta anterior/siguiente DE LA MISMA TIRADA, sin cerrar */
/* Cabecera: flecha Anterior | ✕ (centrada) | flecha Siguiente — como fila normal, no solapan nunca */
.oe-modal-cabecera {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.oe-modal-flecha {
    background: none;
    border: none;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    color: var(--oe-modal-color-acento, #b8823f);
    padding: 4px 6px;
    opacity: 0.85;
    white-space: nowrap;
}
.oe-modal-flecha:hover { opacity: 1; }
.oe-modal-flecha-prev { justify-self: start; }
.oe-modal-flecha-next { justify-self: end; }

.oe-modal-cerrar {
    justify-self: center;
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: var(--oe-modal-color-texto, #6b4423);
    opacity: 0.6;
}
.oe-modal-cerrar:hover { opacity: 1; }

.oe-modal-posicion {
    margin: 0 0 -6px;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.65;
    color: var(--oe-modal-color-texto, #6b4423);
}

/* ---------- Imagen ampliada (lightbox) + marca de agua ---------- */

.oe-modal-imagen-clicable {
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.oe-modal-imagen-clicable:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.oe-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 200000; /* siempre por encima de la ficha completa */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 24px;
    box-sizing: border-box;
}
.oe-lightbox-overlay[hidden] { display: none; }
.oe-lightbox-overlay.oe-visible { opacity: 1; }

/* Ni clic derecho ni "arrastrar para guardar" sobre la imagen protegida
   — un freno más, aunque el de verdad (que el navegador jamás llegue a
   tener la imagen ORIGINAL sin marca) ya está resuelto por el proxy
   en admin-ajax.php. Esto solo evita el camino más fácil y directo. */
.oe-lightbox-imagen,
.oe-modal-imagen {
    -webkit-user-drag: none;
    user-select: none;
}

.oe-lightbox-aviso-error {
    display: none;
    color: #fff;
    text-align: center;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.5;
}
.oe-lightbox-overlay.oe-lightbox-error .oe-lightbox-aviso-error {
    display: block;
}

.oe-lightbox-marco {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    min-width: 160px;
    min-height: 240px;
    line-height: 0; /* evita hueco extra bajo la imagen */
    background: rgba(255, 255, 255, 0.05); /* hueco visible mientras se compone la imagen con canvas */
    border-radius: var(--oe-modal-radio-bordes, 12px);
}
.oe-lightbox-imagen {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--oe-modal-radio-bordes, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.oe-lightbox-cerrar {
    position: fixed;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.8em;
    line-height: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
}
.oe-lightbox-cerrar:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Carta del día (imagen sola + clic para abrir ficha) ---------- */

.oe-carta-dia {
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--oe-fuente, inherit);
}
.oe-carta-dia-fecha {
    text-transform: capitalize;
    opacity: 0.7;
    margin-bottom: 10px;
}
.oe-carta-dia-imagen {
    width: 100%;
    aspect-ratio: 2/3;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.15s ease;
}
.oe-carta-dia-imagen.oe-fade-in { opacity: 1; transform: translateY(0) scale(1); }
.oe-carta-dia-imagen:hover { filter: brightness(1.08); }
.oe-carta-dia-ayuda {
    margin-top: 8px;
    font-size: 0.78em;
    opacity: 0.6;
}
.oe-carta-dia-racha {
    margin-top: 10px;
    font-size: 0.95em;
    color: var(--oe-color-primario, #6b4423);
}
.oe-carta-dia-racha a {
    color: inherit;
    text-decoration: underline;
}
.oe-carta-dia-record {
    font-size: 0.85em;
    opacity: 0.65;
}
.oe-carta-dia-enlace-logros {
    margin-top: 10px;
}
.oe-carta-dia-enlace-logros a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    font-size: 0.85em;
    text-decoration: none;
    color: var(--oe-color-primario, #6b4423);
}
.oe-carta-dia-enlace-logros a:hover {
    background: var(--oe-color-fondo-carta, #fffaf0);
}

.oe-aviso { text-align: center; opacity: 0.7; }

/* ---------- Índice de cartas (listado con significado visible, bueno para SEO) ---------- */

.oe-indice-cartas {
    font-family: var(--oe-fuente, inherit);
}
.oe-indice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--oe-indice-ancho-min, 200px), 1fr));
    gap: var(--oe-indice-gap, 28px);
}
.oe-indice-item {
    text-align: center;
}
.oe-indice-item-clicable {
    cursor: pointer;
    transition: transform 0.15s ease;
}
.oe-indice-item-clicable:hover {
    transform: translateY(-3px);
}
.oe-indice-imagen {
    display: block;
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--oe-indice-espacio-carta-titulo, 10px);
    /* Mismo criterio que en el resto del plugin: no evita del todo que
       alguien muy decidido la copie, pero sí frena el "clic derecho >
       Guardar imagen como" y el arrastrar-y-soltar casuales. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* el clic para abrir la ficha lo recoge la tarjeta entera, no hace falta que la imagen misma sea interactiva */
}
.oe-indice-titulo {
    margin: 0 0 var(--oe-indice-espacio-titulo-etiqueta, 4px);
    color: var(--oe-color-primario, #6b4423);
    font-size: var(--oe-indice-tamano-titulo, 17px);
    font-family: var(--oe-indice-fuente-titulo, inherit);
    line-height: var(--oe-indice-interlineado-titulo, 1.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.oe-indice-etiqueta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--oe-indice-color-etiqueta, var(--oe-color-primario, #d8ae55));
    color: #fff;
    font-size: var(--oe-indice-tamano-etiqueta, 11px);
    font-family: var(--oe-indice-fuente-etiqueta, inherit);
    line-height: var(--oe-indice-interlineado-etiqueta, 1.2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: var(--oe-indice-espacio-etiqueta-significado, 8px);
}
.oe-indice-significado {
    font-size: var(--oe-indice-tamano-texto, 15px);
    font-family: var(--oe-indice-fuente-significado, inherit);
    line-height: var(--oe-indice-interlineado-significado, 1.5);
    opacity: 0.85;
    margin: 0 0 10px;
}
.oe-indice-btn-ficha {
    display: inline-block;
    background: transparent;
    border: var(--oe-boton-borde, 1px solid #b8823f);
    color: var(--oe-boton-color-texto, #b8823f);
    border-radius: var(--oe-boton-radio-bordes, 999px);
    padding: 6px 16px;
    font-size: 0.85em;
}

/* ---------- Mi diario (lecturas guardadas) ---------- */

.oe-diario-invitacion {
    text-align: center;
    padding: 40px 20px;
}
.oe-diario-invitacion p {
    margin-bottom: 16px;
    opacity: 0.8;
}

.oe-diario {
    font-family: var(--oe-fuente, inherit);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oe-diario-filtros {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    overflow-x: auto; /* si en pantallas muy estrechas no cupieran del todo, se desliza en vez de romper la línea */
    padding-bottom: 2px;
}
.oe-diario-filtros select {
    padding: 7px 10px;
    border-radius: 4px;
    /* A propósito NO usa los colores "de carta" (fondo crema, borde
       dorado) — con esos se confundía con las cajas de las tiradas de
       abajo. Un gris neutro de formulario los diferencia de un vistazo. */
    border: 1px solid #8c8f94;
    background: #fff;
    color: #2c3338;
    font-family: inherit;
    font-size: 0.85em;
    flex-shrink: 1;
    min-width: 0;
    /* Un <select> por defecto se ensancha según su opción más larga —
       esto lo limita, para que los 3 quepan siempre en una sola línea
       sin desbordar ni obligar a desplazarse. */
    max-width: 225px;
}
#oe-diario-filtro-aplicar {
    /* Estilo propio, sin heredar la píldora dorada de los botones
       grandes (Barajar, Sacar...) — aquí, al lado de unos desplegables
       neutros, esa forma y esa sombra quedaban fuera de lugar. */
    flex-shrink: 0;
    margin-left: 6px;
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    background: var(--oe-color-primario, #b8823f);
    color: #fff;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
#oe-diario-filtro-aplicar:hover {
    background: var(--oe-color-secundario, #6b4423);
}
.oe-diario-sin-resultados {
    text-align: center;
    opacity: 0.7;
    font-style: italic;
}
.oe-diario-contador-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 0;
}
.oe-diario-contador {
    font-size: 0.85em;
    opacity: 0.7;
}
.oe-insignias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
}
.oe-insignia {
    position: relative; /* punto de referencia para la ventanita de detalle */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    font-size: 0.85em;
    cursor: default;
}
.oe-insignia-icono {
    font-size: 1.2em;
    line-height: 1;
}
.oe-insignia-lograda {
    background: var(--oe-color-fondo-carta, #fffaf0);
    color: var(--oe-color-primario, #6b4423);
    font-weight: 600;
}
.oe-insignia-bloqueada {
    background: #f0f0f0;
    border-color: #ccc;
}
.oe-insignia-bloqueada .oe-insignia-icono,
.oe-insignia-bloqueada .oe-insignia-nombre {
    opacity: 0.4;
    filter: grayscale(1);
}

/* La "ventanita" de detalle al pasar el ratón por una insignia —
   oculta por defecto, aparece con el hover, con una flechita apuntando
   hacia la insignia para que quede claro a cuál pertenece. */
.oe-insignia-popover {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    width: 220px;
    padding: 12px 14px;
    background: #2c2416;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-size: 0.95em;
    text-align: left;
    white-space: normal;
    z-index: 20;
}
.oe-insignia-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #2c2416;
}
.oe-insignia-popover strong {
    display: block;
    margin-bottom: 4px;
    color: var(--oe-color-primario, #d8ae55);
}
.oe-insignia-popover em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 0.85em;
    opacity: 0.75;
}
.oe-insignia:hover .oe-insignia-popover,
.oe-insignia:focus-within .oe-insignia-popover {
    display: block;
}

/* ---------- Pestaña "Mis logros" ---------- */
.oe-diario-enlace-logros {
    font-size: 0.9em;
    white-space: nowrap;
}
.oe-logros {
    font-family: var(--oe-fuente, inherit);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.oe-logros-resumen {
    text-align: center;
    padding: 28px 24px;
    background: linear-gradient(160deg, var(--oe-color-fondo-carta, #fdf6e9), #fff);
    border: 1px solid var(--oe-color-borde, #d8ae55);
    border-radius: 12px;
}
.oe-logros-resumen h2 {
    margin: 0 0 6px;
    color: var(--oe-color-primario, #6b4423);
}
.oe-logros-contador {
    margin: 0 0 14px;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--oe-color-primario, #6b4423);
    opacity: 1;
}
.oe-logros-barra {
    max-width: 420px;
    margin: 0 auto;
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.oe-logros-barra-relleno {
    height: 100%;
    background: linear-gradient(90deg, var(--oe-color-secundario, #b8823f), var(--oe-color-primario, #d8ae55));
    border-radius: 999px;
    transition: width 0.5s ease;
}
.oe-logros-tema {
    padding: 22px 24px;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    border-radius: 12px;
    background: #fff;
}
.oe-logros-tema-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--oe-color-primario, #6b4423);
    font-size: 1.05em;
}
.oe-logros-tema-contador {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.55;
    white-space: nowrap;
}
.oe-logros-subgrupo-titulo {
    margin: 16px 0 8px;
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.7;
}
.oe-logros-subgrupo-titulo:first-of-type {
    margin-top: 0;
}

.oe-diario-entrada {
    background: var(--oe-color-fondo-carta, #fdf6e9);
    border: 1px solid var(--oe-color-borde, #d8ae55);
    border-radius: 12px;
    overflow: hidden;
}
.oe-diario-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    line-height: 1.3; /* si no, la línea es más alta de lo que parece por el line-height por defecto del navegador */
    padding: 5px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
.oe-diario-resumen:hover {
    background: rgba(0, 0, 0, 0.03);
}
.oe-diario-resumen-texto {
    display: block;
    min-width: 0; /* para que el texto largo pueda recortarse con ellipsis, no desbordar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85em;
    color: var(--oe-color-primario, #6b4423);
}
.oe-diario-meta-linea {
    font-size: 0.9em;
    opacity: 0.65;
}
.oe-diario-flecha {
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
    transition: transform 0.2s ease;
    opacity: 0.6;
}
.oe-diario-abierta .oe-diario-flecha {
    transform: rotate(180deg);
}
.oe-diario-contenido {
    padding: 0 20px 20px;
}
.oe-diario-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.oe-diario-titulo {
    margin: 0 0 2px;
    color: var(--oe-color-primario, #6b4423);
}
.oe-diario-meta {
    margin: 0;
    font-size: 0.85em;
    opacity: 0.65;
}
.oe-diario-pregunta {
    margin: 4px 0 0;
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.8;
}
.oe-diario-cabecera-botones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.oe-diario-pdf {
    background: none;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    color: var(--oe-color-primario, #6b4423);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.82em;
    cursor: pointer;
    white-space: nowrap;
}
.oe-diario-pdf:hover {
    background: rgba(0, 0, 0, 0.04);
}
.oe-diario-pdf:disabled {
    opacity: 0.6;
    cursor: default;
}
.oe-diario-borrar {
    background: none;
    border: none;
    color: #b32d2e;
    font-size: 1.2em;
    cursor: pointer;
    opacity: 0.6;
    flex-shrink: 0;
}
.oe-diario-borrar:hover { opacity: 1; }

/* El lienzo real de la lectura guardada — mismas cartas, mismas
   posiciones, clicables, tal como salieron el día de la tirada. */
.oe-diario-lienzo {
    margin: 0 auto 16px;
    min-height: 160px; /* algo de aire mientras las imágenes cargan */
}
.oe-diario-lienzo .oe-resultado {
    /* El panel de Mi Cuenta suele tener menos ancho que la pantalla
       completa (por el menú lateral) — que nunca se desborde de su hueco real. */
    max-width: 100%;
    /* Al 50% del tamaño original — las cartas ya reveladas, aquí en el
       Diario, ocupan mucha pantalla si se ven a su tamaño real. Al
       reducir el ancho del propio contenedor (no el de cada carta por
       separado), todo lo de dentro se reduce igual de proporcionado:
       cartas, huecos, posiciones — sin tener que tocar nada más. */
    width: calc(min(94vw, 640px) * var(--oe-lienzo-ancho-ratio, 1) * 0.5) !important;
}

.oe-diario-nota {
    width: 100%;
    min-height: 70px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    font-family: inherit;
    font-size: 0.9em;
    box-sizing: border-box;
    resize: vertical;
    margin-bottom: 8px;
}
.oe-diario-guardar-nota {
    background: var(--oe-color-primario, #d8ae55);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 0.85em;
    cursor: pointer;
}
.oe-diario-nota-estado {
    margin-left: 10px;
    font-size: 0.8em;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .oe-controles { gap: 16px; }
    .oe-btn-sacar, .oe-btn-barajar, .oe-btn-reiniciar {
        padding: calc(var(--oe-padding-boton-v, 12px) * 0.8) calc(var(--oe-padding-boton-h, 28px) * 0.7);
        font-size: 0.95em;
    }
}

/* Ventanita de "los pasos que faltan" al compartir, cuando el
   dispositivo no admite adjuntar la imagen directamente. */
.oe-pasos-compartir-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 24px;
    box-sizing: border-box;
}
.oe-pasos-compartir-overlay[hidden] { display: none; }
.oe-pasos-compartir-overlay.oe-visible { opacity: 1; }
.oe-pasos-compartir-caja {
    position: relative;
    background: var(--oe-color-fondo-carta, #fdf6e9);
    color: var(--oe-color-secundario, #6b4423);
    border-radius: 16px;
    padding: 32px 28px 24px;
    max-width: 420px;
    width: 100%;
    text-align: left;
    font-family: var(--oe-fuente, inherit);
}
.oe-pasos-compartir-caja h3 {
    margin: 0 0 16px;
    font-size: 1.2em;
    color: var(--oe-color-primario, #d8ae55);
}
.oe-pasos-compartir-caja ol {
    margin: 0 0 18px;
    padding-left: 20px;
    line-height: 1.6;
}
.oe-pasos-compartir-caja ol li {
    margin-bottom: 8px;
}
.oe-pasos-compartir-alt {
    font-size: 0.9em;
    opacity: 0.8;
    line-height: 1.5;
    margin: 0 0 20px;
}
.oe-pasos-compartir-botones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.oe-pasos-compartir-botones button {
    flex: 1;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--oe-color-borde, #d8ae55);
    background: transparent;
    color: var(--oe-color-secundario, #6b4423);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    transition: background 0.15s ease;
}
.oe-pasos-compartir-botones button:hover {
    background: rgba(0, 0, 0, 0.05);
}
.oe-pasos-compartir-entendido {
    background: var(--oe-color-primario, #d8ae55) !important;
    color: #fff !important;
    border: none !important;
}
.oe-pasos-compartir-cerrar {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6em;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}
.oe-pasos-compartir-cerrar:hover { opacity: 1; }

/* =====================================================================
   TAPETE DE LA TIRADA  (v3.78.0 — en pruebas)
   =====================================================================
   Superficie que se pinta detrás de las cartas reveladas. Va como
   ::before del propio lienzo (.oe-resultado) en vez de como un div
   nuevo, por dos motivos: no toca el HTML ni el posicionado por
   porcentajes de cada carta, y desaparece solo con quitar una clase.
   El "inset" negativo lo hace algo más grande que el lienzo, para que
   las cartas pegadas al borde no queden cortadas.
   ===================================================================== */

.oe-con-tapete::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--oe-tapete-margen, 34px));
    background: var(--oe-tapete-fondo, #1d1a30);
    border: 1px solid var(--oe-tapete-borde, #b8823f);
    border-radius: var(--oe-tapete-radio, 18px);
    /* Sombra hacia dentro: hace que el centro parezca iluminado y los
       bordes se apaguen, como una mesa con una vela encima. Es lo que
       da sensación de superficie sin dibujar ninguna textura. La
       intensidad ahora es un ajuste (Apariencia > Tapete), no un valor
       fijo. */
    box-shadow: var(--oe-tapete-sombra, inset 0 0 60px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.18));
    /* Detrás de las cartas: son hermanas posteriores en el DOM, pero se
       deja explícito por si algún tema mete su propio apilado. */
    z-index: 0;
    /* Aparece suavemente junto con la primera carta. */
    opacity: 0;
    animation: oe-tapete-entra 0.7s ease forwards;
    pointer-events: none;
}

/* ---------- Patrón de textura del tapete (opcional) ----------
   Se dibuja con degradados CSS puros — nada de imágenes que descargar
   ni SVGs que generar en el servidor — así el color, la escala y la
   opacidad responden al instante a los ajustes, tanto en la web como en
   la vista previa del panel. Vive como un div propio (insertado por JS
   al revelar las cartas) en vez de un tercer pseudo-elemento, porque
   ::before y ::after ya están ocupados por el fondo y el filete. Su
   propio "opacity" controla solo la textura, sin aclarar ni oscurecer
   el color de fondo que tiene debajo. */
.oe-tapete-patron {
    position: absolute;
    inset: calc(-1 * var(--oe-tapete-margen, 34px));
    border-radius: var(--oe-tapete-radio, 18px);
    z-index: 0;
    pointer-events: none;
    opacity: var(--oe-tapete-patron-opacidad, 0.1);
    background-repeat: repeat;
    overflow: hidden;
}
.oe-tapete-patron-puntos {
    background-image: radial-gradient(circle, var(--oe-tapete-patron-color, #b8823f) 1.4px, transparent 1.6px);
    background-size: var(--oe-tapete-patron-escala, 24px) var(--oe-tapete-patron-escala, 24px);
}
.oe-tapete-patron-rayas {
    background-image: repeating-linear-gradient(
        45deg,
        var(--oe-tapete-patron-color, #b8823f) 0 2px,
        transparent 2px calc(var(--oe-tapete-patron-escala, 24px) / 2)
    );
}
.oe-tapete-patron-cuadricula {
    background-image:
        linear-gradient(var(--oe-tapete-patron-color, #b8823f) 1px, transparent 1px),
        linear-gradient(90deg, var(--oe-tapete-patron-color, #b8823f) 1px, transparent 1px);
    background-size: var(--oe-tapete-patron-escala, 24px) var(--oe-tapete-patron-escala, 24px);
}

/* Segundo filete por dentro, tipo paspartú. Se apaga solo en pantallas
   estrechas: a 320px de ancho queda pegado al borde de fuera y parece
   un fallo de dibujo, no un adorno. */
.oe-con-tapete.oe-tapete-doble::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--oe-tapete-margen, 34px) + 8px);
    border: 0.5px solid var(--oe-tapete-borde, #b8823f);
    border-radius: calc(var(--oe-tapete-radio, 18px) - 6px);
    opacity: var(--oe-tapete-filete-opacidad, 0.45);
    z-index: 0;
    pointer-events: none;
}

@keyframes oe-tapete-entra {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* Las cartas, por encima del tapete */
.oe-con-tapete .oe-carta-final {
    z-index: 1;
}

/* ---------- Etiquetas de posición ---------- */
/* Van DENTRO de la carta, pegadas a su borde superior. Colgando por
   debajo (como estaban) se pisaban entre ellas en cuanto dos cartas
   quedaban cerca en vertical — en la Cruz Celta, la etiqueta de una
   columna caía justo encima de la carta siguiente. Dentro de la carta
   no pueden invadir el espacio de nadie: ocupan exactamente lo que
   ocupa su carta. */

.oe-carta-etiqueta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    /* Franja translúcida para que el texto se lea sobre cualquier
       imagen, por clara o recargada que sea. */
    background: var(--oe-tapete-etiqueta-fondo, rgba(29, 26, 48, 0.72));
    border-radius: 3px 3px 0 0;
    font-size: clamp(9px, 1.15vw, 12px);
    line-height: 1.2;
    color: var(--oe-tapete-etiqueta-color, #e8d9b8);
    /* No debe estorbar al clic que abre la ficha de la carta. */
    pointer-events: none;
    z-index: 3;
}
.oe-carta-etiqueta-numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--oe-tapete-numero-fondo, #b8823f);
    color: #1d1a30;
    font-size: 0.95em;
    font-weight: 600;
}
.oe-carta-etiqueta-nombre {
    /* Hasta dos líneas; a partir de ahí se recorta con puntos suspensivos
       en vez de crecer y taparle media cara a la carta. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

/* ---------- Entrada escalonada de las etiquetas ----------
   Las franjas esperan apagadas a que la última carta termine de
   voltearse y asentarse; entonces se encienden una a una, en orden.
   El estado de partida depende del efecto elegido. */

.oe-carta-etiqueta.oe-etiqueta-esperando {
    opacity: 0;
}
.oe-carta-etiqueta.oe-etiqueta-efecto-deslizar.oe-etiqueta-esperando {
    transform: translateY(-100%);
}
.oe-carta-etiqueta.oe-etiqueta-efecto-escala.oe-etiqueta-esperando {
    transform: scaleY(0.4);
    transform-origin: top center;
}
.oe-carta-etiqueta.oe-etiqueta-efecto-deslizar,
.oe-carta-etiqueta.oe-etiqueta-efecto-escala,
.oe-carta-etiqueta.oe-etiqueta-efecto-fundido {
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.oe-carta-etiqueta.oe-etiqueta-visible {
    opacity: 1;
    transform: none;
}
/* Quien prefiera no ver animaciones las recibe ya puestas. */
@media (prefers-reduced-motion: reduce) {
    .oe-carta-etiqueta.oe-etiqueta-esperando {
        opacity: 1;
        transform: none;
    }
}

/* Con la columna lateral puesta, el nombre dentro de la carta es
   información repetida: se queda solo el número, que es lo que enlaza
   una cosa con la otra. */
.oe-resultado.oe-sin-nombre-en-carta .oe-carta-etiqueta-nombre {
    display: none;
}
.oe-resultado.oe-sin-nombre-en-carta .oe-carta-etiqueta {
    /* Sin texto largo, la franja se encoge a una pastilla con el número
       en la esquina, que tapa mucho menos la ilustración. */
    width: auto;
    left: 6px;
    top: 6px;
    padding: 3px;
    border-radius: 50%;
    background: transparent;
}

/* Modo "solo al pasar por encima" */
.oe-etiquetas-hover .oe-carta-etiqueta {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.oe-etiquetas-hover .oe-carta-final:hover .oe-carta-etiqueta,
.oe-etiquetas-hover .oe-carta-final:focus-within .oe-carta-etiqueta {
    opacity: 1;
}

/* ---------- Móviles y tablets ---------- */

@media (max-width: 782px) {
    /* Sin filete interior: no hay sitio para dos líneas paralelas. */
    .oe-con-tapete.oe-tapete-doble::after {
        display: none;
    }
    /* Sombra interior más contenida — en un tapete pequeño, 60px de
       difuminado se comen casi toda la superficie y queda todo oscuro. */
    .oe-con-tapete::before {
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.16);
    }
    /* En cartas pequeñas la franja se aprieta y el nombre se limita a
       una sola línea, para no tapar la ilustración. */
    .oe-carta-etiqueta {
        padding: 3px 4px 4px;
        gap: 3px;
    }
    .oe-carta-etiqueta-nombre {
        -webkit-line-clamp: 1;
    }
}

/* =====================================================================
   COLUMNA LATERAL DE POSICIONES  (v3.80.0 — en pruebas)
   =====================================================================
   Una fila por carta: miniatura, número, nombre de la posición y su
   palabra clave. Al pasar por una fila se ilumina su carta en el
   tapete, y al revés — es lo que hace que las dos zonas se lean como
   una sola pieza y no como una lista pegada al lado.
   ===================================================================== */

.oe-tirada-conjunto {
    display: flex;
    /* Antes "flex-start" (arriba): la columna se alineaba con el borde
       superior del tapete. Ahora centrada en vertical respecto a él,
       tenga la altura que tenga (una Cruz Celta muy alta o una tirada
       de 3 cartas mucho más baja). */
    align-items: center;
    justify-content: center;
    /* El hueco tiene que ser mayor que lo que el tapete sobresale por
       fuera de las cartas, o el borde del tapete se mete debajo de la
       columna. */
    gap: calc(var(--oe-tapete-margen, 34px) + 22px);
    /* Todo el conjunto centrado: el ancho de siempre del lienzo, más lo
       que ocupa la columna y su separación. */
    /* 98vw en vez de 96: en pantallas anchas se recuperan unos cuantos
       píxeles a cada lado, que es puro espacio muerto. */
    max-width: min(98vw, calc(var(--oe-lienzo-ancho-max, 640px) + var(--oe-columna-ancho, 240px) + var(--oe-tapete-margen, 34px) + 22px));
    margin: 0 auto;
}
.oe-tirada-conjunto .oe-escena {
    /* Antes crecía (flex-grow) para llenar todo el hueco disponible del
       conjunto. Cuando el tapete se encoge por ALTURA (tiradas largas
       en pantallas bajas — ver --oe-tirada-alto-max), el tapete
       visible queda más estrecho que ese hueco, pero la escena seguía
       ocupando el hueco entero: el tapete quedaba flotando centrado
       dentro de una caja invisible mucho más ancha, y la columna
       lateral aparecía lejos, con un margen enorme en medio — el de tu
       captura. Ahora la escena mide justo lo que el tapete necesita
       (fórmula igual que la de abajo, más el margen que el tapete
       sobresale por los lados), ni un píxel más. */
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    /* El hueco de abajo lo lleva ahora el conjunto entero, con su propio
       control: el del mazo estaba pensado para la fase de barajar y
       dejaba una franja enorme entre el tapete y los botones. */
    margin-bottom: 0;
}
.oe-tirada-conjunto {
    /* El ancho "ideal" del tapete, calculado UNA vez aquí y reutilizado
       tanto por la escena (que necesita ese ancho + lo que el tapete
       sobresale por los lados) como por el propio tapete (ver más
       abajo). Calcularlo dos veces por separado, cada uno relativo a un
       elemento distinto (antes: uno relativo al conjunto, el otro
       relativo a la escena) es lo que producía dos números DISTINTOS —
       la escena crecía de más y el tapete quedaba flotando en el
       centro de una caja invisible, con la columna lejos a la derecha.
       Basado en el ancho de VENTANA (vw), no en un porcentaje del
       contenedor — así no depende de qué elemento sea "el padre".
       OJO: la escena de abajo usa "ideal + margen*2" (para que quepa
       también el bezel del tapete) — si esta rama topara en 96vw sin
       descontar ya ese margen, la escena acababa siendo 96vw + margen*2,
       más ancha que la propia pantalla. Por eso el margen se resta AQUÍ,
       antes de aplicar la proporción de la tirada. */
    --oe-tapete-ancho-ideal: min(
        calc((min(96vw, var(--oe-lienzo-ancho-max, 640px)) - var(--oe-tapete-margen, 34px) * 2) * var(--oe-lienzo-ancho-ratio, 1)),
        calc(var(--oe-tirada-alto-max, 68vh) / var(--oe-lienzo-alto-ratio, 1))
    );
}
.oe-tirada-conjunto .oe-escena-rejilla {
    width: calc(var(--oe-tapete-ancho-ideal) + var(--oe-tapete-margen, 34px) * 2);
}
.oe-tirada-conjunto {
    /* Sitio para el borde inferior del tapete, que sobresale por debajo
       de las cartas, más la separación que se elija. */
    margin-bottom: calc(var(--oe-tapete-margen, 34px) + var(--oe-tapete-espacio-abajo, 30px));
}
/* AQUÍ estaba el problema de la primera prueba: el lienzo va
   posicionado de forma absoluta y calculaba su ancho contra la ventana
   (min(94vw, 640px)), así que al meterlo en dos columnas seguía
   midiendo lo mismo que antes y se desbordaba por encima de la lista.
   Dentro del conjunto se mide contra su propia columna, descontando lo
   que el tapete sobresale por los dos lados. */
.oe-tirada-conjunto .oe-escena-rejilla .oe-resultado {
    /* Mismo número que usa la escena de arriba (--oe-tapete-ancho-ideal),
       así que el tapete llena su escena exactamente — nada de hueco
       invisible entre uno y otro. */
    width: var(--oe-tapete-ancho-ideal);
    max-width: 100%;
}
.oe-panel-posiciones {
    flex: 0 0 var(--oe-columna-ancho, 240px);
    width: var(--oe-columna-ancho, 240px);
    /* Sin margen fijo: ahora el conjunto centra verticalmente (ver
       align-items:center más arriba), así que la columna queda a media
       altura del tapete sea cual sea su tamaño, en vez de alinearse
       siempre con el borde de arriba. */
    /* Por encima del tapete pase lo que pase: más vale que la lista tape
       un borde a que el borde tape la lista. */
    position: relative;
    z-index: 4;
}
.oe-panel-posiciones[hidden] {
    display: none;
}
.oe-columna-izquierda {
    /* Cambia el orden visual sin tocar el HTML: la columna sigue yendo
       después en el código, que es lo correcto para un lector de
       pantalla (primero la tirada, luego su resumen). */
    order: -1;
}
.oe-panel-posiciones-titulo {
    margin: 0 0 10px;
    font-size: var(--oe-columna-titulo-tamano, 15px);
    font-weight: 600;
    opacity: var(--oe-columna-titulo-opacidad, 0.65);
    text-transform: none;
    letter-spacing: normal;
    transition: opacity 0.4s ease;
}
/* Mientras las cartas siguen volteándose, el panel ya ocupa su sitio
   (para que la columna no cambie de ancho de golpe más tarde) pero el
   título permanece apagado — las filas, una a una, ya llevan su propio
   opacity:0 por defecto en .oe-panel-fila. */
.oe-panel-posiciones.oe-panel-esperando .oe-panel-posiciones-titulo {
    opacity: 0;
}
.oe-panel-posiciones-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.oe-panel-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: var(--oe-columna-fila-espacio, 6px);
    border: 1px solid var(--oe-columna-fila-borde, rgba(0, 0, 0, 0.09));
    border-radius: var(--oe-columna-fila-radio, 8px);
    /* Blanco sólido, no translúcido: sobre el fondo claro de la web una
       fila al 60% no se distinguía del papel y la lista parecía texto
       suelto flotando. */
    background: var(--oe-columna-fila-fondo, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    /* Más pausada al encender y bastante más al apagar: al recorrer la
       lista con el ratón, un cambio instantáneo por fila era un
       parpadeo continuo. Así se funde una en otra. */
    transition: background 0.32s ease, border-color 0.32s ease, transform 0.32s ease;
    /* Entra igual que las etiquetas: apagada hasta su turno. */
    opacity: 0;
    transform: translateY(6px);
    /* Sin interacción mientras está apagada: aunque la fila ya exista en
       el HTML desde el principio (para calcular su tamaño), el ratón no
       debe poder resaltar su carta hasta que de verdad le toque salir.
       Sin esto, pasar el cursor por la columna mientras las cartas aún
       se están volteando encendía y apagaba destellos sueltos en medio
       de la animación. */
    pointer-events: none;
}
.oe-panel-fila.oe-fila-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.oe-panel-fila:hover,
.oe-panel-fila.oe-fila-activa {
    /* Colores propios de la columna, no los del tapete: puedes querer
       un tapete oscuro pero un hover de la columna más suave, por
       ejemplo. Antes compartían variable y, si el texto no contrastaba
       bien contra ese fondo concreto, no había forma de arreglarlo sin
       tocar también el tapete. */
    background: var(--oe-columna-hover-fondo, #1d1a30);
    border-color: var(--oe-columna-hover-fondo, #1d1a30);
}
.oe-panel-fila:hover .oe-panel-fila-nombre,
.oe-panel-fila.oe-fila-activa .oe-panel-fila-nombre,
.oe-panel-fila:hover .oe-panel-fila-clave,
.oe-panel-fila.oe-fila-activa .oe-panel-fila-clave {
    color: var(--oe-columna-hover-texto, #e8d9b8);
}
.oe-panel-fila-mini {
    flex: 0 0 auto;
    width: 30px;
    height: 44px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.12);
}
.oe-panel-fila-mini.oe-invertida {
    transform: rotate(180deg);
}
.oe-panel-fila-texto {
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--oe-columna-texto-tamano, 15px);
}
.oe-panel-fila-nombre {
    display: block;
    font-size: 0.86em;
    line-height: 1.3;
    /* Sin recortes: los nombres largos se envuelven en dos líneas. Los
       puntos suspensivos dejaban "Esperanzas ..." y "Resultado fi...",
       que es peor que una fila un poco más alta. */
    overflow-wrap: break-word;
}
.oe-panel-fila-clave {
    display: block;
    font-size: 0.76em;
    line-height: 1.3;
    opacity: 0.7;
    overflow-wrap: break-word;
}
.oe-panel-fila-numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--oe-tapete-numero-fondo, #b8823f);
    color: #1d1a30;
    font-size: 0.78em;
    font-weight: 600;
}

/* Carta resaltada desde la columna */
.oe-carta-final.oe-carta-destacada .oe-carta-final-frontal,
.oe-carta-final.oe-carta-simple {
    transition: filter 0.35s ease;
}
.oe-carta-final.oe-carta-destacada .oe-carta-final-frontal,
.oe-carta-final.oe-carta-destacada .oe-carta-simple {
    filter: brightness(1.18);
}
.oe-resultado .oe-carta-final {
    transition: opacity 0.35s ease, filter 0.35s ease;
}
.oe-resultado.oe-hay-destacada .oe-carta-final:not(.oe-carta-destacada) {
    /* Ajustado a petición: 0.45 → 0.32 → 0.36. */
    opacity: 0.36;
}
/* La carta resaltada pasa por delante de todas. En la Cruz Celta, la
   carta 2 va cruzada ENCIMA de la 1: al resaltar la 1, la 2 se quedaba
   atenuada pero seguía delante, y a través de ella la 1 se veía
   lechosa, como medio transparente. Con la 1 por delante, se ve
   entera. */
.oe-resultado .oe-carta-final.oe-carta-destacada {
    z-index: 5;
}

/* ---------- Móviles y tablets ---------- */

@media (max-width: 900px) {
    /* Debajo del tapete, a lo ancho: al lado no cabe sin dejar las
       cartas diminutas. */
    .oe-tirada-conjunto {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .oe-panel-posiciones {
        flex: 1 1 auto;
        width: 100%;
        /* Separación respecto al borde inferior del tapete, que también
           sobresale por debajo de las cartas. */
        margin-top: var(--oe-tapete-margen, 34px);
    }
    .oe-columna-izquierda {
        order: 0;
    }
    /* Dos por fila para que la lista no se haga interminable. */
    .oe-panel-posiciones-lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .oe-panel-fila {
        margin-bottom: 0;
    }
}

@media (max-width: 520px) {
    .oe-panel-posiciones-lista {
        grid-template-columns: 1fr;
    }
}

/* ---------- Botones dentro de la columna (en pruebas) ----------
   Cuando el bloque de botones vive dentro de la aside (ver
   moverControlesSegunAjuste en oraculo.js), la columna es demasiado
   estrecha para la fila horizontal de siempre: aquí se apilan en
   columna, centrados, con su propio hueco respecto a la lista de
   posiciones que tienen encima. */
.oe-panel-posiciones .oe-controles-en-columna {
    flex-direction: column;
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
    /* Más aire respecto a la lista de posiciones — antes quedaba
       demasiado pegado. */
    margin-top: 30px;
    margin-bottom: 0;
    /* El espaciado (y el propio borde, transparente al principio) ya
       están puestos desde el primer momento — así, cuando la línea
       aparezca, solo cambia de COLOR (transparente → visible), sin
       mover nada de sitio ni aparecer de golpe. */
    padding-top: 24px;
    border-top: 1px solid transparent;
    transition: border-color 0.5s ease;
}
/* La línea que separa la lista de posiciones del resto del bloque —
   antes aparecía en cuanto se pintaba la columna, con las cartas
   todavía volteándose. Ahora espera a la clase "oe-controles-listos",
   que se añade en el mismo instante en que arranca la cascada de
   Nueva pregunta + iconos + selector, y al llegar se funde en vez de
   aparecer de golpe. */
.oe-panel-posiciones .oe-controles-en-columna.oe-controles-listos {
    border-top-color: rgba(0, 0, 0, 0.08);
}
/* Con los botones dentro, la columna vuelve a centrarse en vertical
   respecto al tapete, igual que cuando no hay botones dentro — ya no
   hace falta la excepción de antes: el fallo real que hacía "desaparecer"
   el botón no era el centrado en sí, sino un resto de estilos en línea
   que se quedaban puestos al mover el bloque (ver
   moverControlesAColumnaSiProcede en oraculo.js), ya corregido. */
.oe-panel-posiciones .oe-controles-en-columna .oe-controles-tirada,
.oe-panel-posiciones .oe-controles-en-columna .oe-acciones-secundarias {
    justify-content: center;
    margin-top: 0;
    /* Aseguran ocupar todo el ancho de la columna, igual que la lista de
       posiciones que tienen encima — antes podían quedarse más
       estrechos que la propia columna si su contenido no llegaba. */
    width: 100%;
}
/* ---------- Orden dentro de la columna ----------
   1. Los tres iconos (Compartir/PDF/Guardar)
   2. Línea
   3. Selector "Probar con otra tirada" + botón "Volver a tirar" (la
      regeneración rápida, sin pasar por categoría/pregunta/barajar)
   4. Línea
   5. "Nueva pregunta" (el reinicio completo, al final del todo)
   Los tres pasos "1", "3" y "5" entran en cascada, uno detrás de otro
   (ver mostrarControlesEnCascada en oraculo.js); las dos líneas se
   funden junto con el primer paso de esa cascada. */
.oe-panel-posiciones .oe-controles-en-columna .oe-acciones-secundarias {
    order: 1;
    /* Más aire entre los iconos y la línea de debajo. El borde,
       transparente hasta que la tirada esté lista, para que la línea se
       funda en vez de aparecer de golpe — igual que la de arriba. */
    padding-bottom: 22px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.5s ease;
}
.oe-panel-posiciones .oe-controles-en-columna.oe-controles-listos .oe-acciones-secundarias {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
.oe-panel-posiciones .oe-controles-en-columna .oe-repetir-selector {
    order: 2;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-btn-repetir-otra {
    order: 3;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-controles-tirada {
    order: 4;
    /* La segunda línea (antes vivía en los iconos) ahora separa el botón
       "Volver a tirar" de "Nueva pregunta", que es donde queda al
       final del todo. Mismo truco: borde transparente desde el
       principio, solo cambia de color cuando todo está listo. */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid transparent;
    transition: border-color 0.5s ease;
}
.oe-panel-posiciones .oe-controles-en-columna.oe-controles-listos .oe-controles-tirada {
    border-top-color: rgba(0, 0, 0, 0.08);
}
/* Dentro de la columna, "Barajar" y "Sacar cartas" no se muestran ni
   siquiera deshabilitados — el objetivo es un bloque limpio: iconos,
   la regeneración rápida, y "Nueva pregunta" al final. Fuera de la
   columna (el sitio de siempre) los tres se siguen viendo, con Barajar
   y Sacar deshabilitados hasta que se pulse Nueva pregunta. */
.oe-panel-posiciones .oe-controles-en-columna .oe-btn-barajar,
.oe-panel-posiciones .oe-controles-en-columna .oe-btn-sacar {
    display: none !important;
}
/* El botón grande ("Nueva pregunta") a lo ancho de la columna en vez de
   en píldora — en 190-210px de ancho, una píldora con su padding
   horizontal de siempre se queda muy apretada. */
.oe-panel-posiciones .oe-controles-en-columna .oe-controles-tirada button {
    flex: 1 1 auto;
    /* Mismo criterio que "Volver a tirar": más comedido que el tamaño de
       siempre, pensado para una columna estrecha, no para ir centrado
       en su propia línea a lo ancho de toda la tirada. */
    padding: 9px 16px !important;
    font-size: calc(var(--oe-boton-fuente-tamano, 16px) * 0.78) !important;
}

/* ---------- "Volver a tirar" — regenerar sin pasar por el principio (en pruebas) ----------
   Solo tiene sentido con los botones dentro de la columna: la idea es
   poder repetir la misma pregunta con una tirada distinta (de 3 a 5
   cartas, por ejemplo) sin volver a elegir categoría ni pregunta, ni
   pasar otra vez por Barajar. Fuera de ese contexto se queda oculto del
   todo — no aporta nada si los botones están en su sitio de siempre. */
.oe-repetir-selector,
.oe-btn-repetir-otra {
    display: none;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-repetir-selector {
    display: block;
    width: 100%;
    margin-top: 18px;
    margin-bottom: 12px;
    text-align: left;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-repetir-selector-label {
    display: block;
    font-size: 0.78em;
    opacity: 0.65;
    margin-bottom: 4px;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-tipo-tirada-rapida {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-family: inherit;
    font-size: 0.85em;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-btn-repetir-otra {
    display: block;
    width: 100%;
    /* Relleno propio, más comedido que el de los botones grandes de
       siempre (Barajar/Sacar/Nueva pregunta): en una columna de
       190-210px, el mismo padding y tamaño de letra de un botón pensado
       para ir centrado y solo se veía desproporcionado frente a una
       lista de pocas posiciones — "se comía" el espacio. */
    padding: 9px 16px;
    border-radius: var(--oe-boton-radio-bordes, 999px);
    border: none;
    background: var(--oe-repetir-boton-fondo, #6b4423);
    color: var(--oe-repetir-boton-texto, #ffffff);
    font-family: inherit;
    font-size: calc(var(--oe-boton-fuente-tamano, 16px) * 0.78);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.oe-panel-posiciones .oe-controles-en-columna .oe-btn-repetir-otra:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ---------- Entrada en cascada: Nueva pregunta + iconos + selector/Volver a tirar ----------
   Antes aparecían de golpe en cuanto llegaba la respuesta del servidor,
   incluso con las cartas todavía volteándose. Ahora, igual que las
   filas de la columna, esperan y entran una a una — mismo tiempo de
   fundido (0.32s) que usan las filas, para que todo el conjunto se
   sienta como una sola animación, no dos distintas. El intervalo entre
   una pieza y la siguiente lo calcula mostrarControlesEnCascada en
   oraculo.js, y siempre es igual o mayor que esta misma duración —
   para que una nunca empiece a aparecer antes de que la anterior haya
   terminado del todo. */
.oe-btn-reiniciar.oe-accion-esperando,
.oe-btn-compartir.oe-accion-esperando,
.oe-btn-pdf.oe-accion-esperando,
.oe-btn-guardar.oe-accion-esperando,
.oe-repetir-selector.oe-accion-esperando,
.oe-btn-repetir-otra.oe-accion-esperando {
    /* !important para poder ganarle al "opacity: 1 !important" de los
       iconos redondos (ver .oe-acciones-secundarias más arriba, puesto
       contra Flatsome). Sin esto, los tres iconos se saltaban el
       fundido y se veían desde el primer instante de la tirada. */
    opacity: 0 !important;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.oe-btn-reiniciar.oe-accion-esperando.oe-accion-visible,
.oe-btn-compartir.oe-accion-esperando.oe-accion-visible,
.oe-btn-pdf.oe-accion-esperando.oe-accion-visible,
.oe-btn-guardar.oe-accion-esperando.oe-accion-visible,
.oe-repetir-selector.oe-accion-esperando.oe-accion-visible,
.oe-btn-repetir-otra.oe-accion-esperando.oe-accion-visible {
    opacity: 1 !important;
    transform: none;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .oe-btn-reiniciar.oe-accion-esperando,
    .oe-btn-compartir.oe-accion-esperando,
    .oe-btn-pdf.oe-accion-esperando,
    .oe-btn-guardar.oe-accion-esperando,
    .oe-repetir-selector.oe-accion-esperando,
    .oe-btn-repetir-otra.oe-accion-esperando {
        opacity: 1 !important;
        transform: none;
    }
}

/* ---------- Columna demasiado larga: modos de ajuste ----------
   Con tiradas de muchas cartas (Cruz Celta, diez filas) la columna se
   hace más alta que el propio tapete y el conjunto queda descompensado.
   El JS (ajustarAlturaColumna) mide y aplica estos modos por pasos,
   solo cuando de verdad hacen falta. */

/* Paso 1 — compacto: mismo contenido, menos aire. No esconde nada. */
.oe-panel-posiciones.oe-columna-compacta .oe-panel-fila {
    padding: 5px 8px;
    margin-bottom: calc(var(--oe-columna-fila-espacio, 6px) * 0.5);
    gap: 8px;
}
.oe-panel-posiciones.oe-columna-compacta .oe-panel-fila-texto {
    font-size: calc(var(--oe-columna-texto-tamano, 15px) * 0.88);
}
.oe-panel-posiciones.oe-columna-compacta .oe-panel-fila-mini {
    width: 24px;
    height: 34px;
}
.oe-panel-posiciones.oe-columna-compacta .oe-panel-posiciones-titulo {
    margin-bottom: 6px;
}
.oe-panel-posiciones.oe-columna-compacta .oe-controles-en-columna {
    margin-top: 18px;
    padding-top: 16px;
}
.oe-panel-posiciones.oe-columna-compacta .oe-controles-en-columna .oe-acciones-secundarias {
    padding-bottom: 14px;
}
.oe-panel-posiciones.oe-columna-compacta .oe-controles-en-columna .oe-controles-tirada {
    margin-top: 14px;
    padding-top: 14px;
}

/* Paso 2 — scroll propio de la lista (el alto exacto lo pone el JS).
   Solo se desplaza la lista de posiciones: el título y los botones se
   quedan siempre a la vista. */
.oe-panel-posiciones.oe-columna-scroll .oe-panel-posiciones-lista {
    overflow-y: auto;
    /* Un pelín de margen a la derecha para que la barra de scroll no se
       coma el borde de las filas. */
    padding-right: 4px;
    /* Barra fina y discreta, a juego con el resto. */
    scrollbar-width: thin;
}
.oe-panel-posiciones.oe-columna-scroll .oe-panel-posiciones-lista::-webkit-scrollbar {
    width: 6px;
}
.oe-panel-posiciones.oe-columna-scroll .oe-panel-posiciones-lista::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
}