/* ruleta.css — Ruleta de decisión rápida (js/ruleta.js)
   Estética minimalista moderna (la "vintage" del prototipo se descartó).
   Todo con prefijo .rul- / #ruleta-btn; usa las variables del tema
   (--surface, --text, --accent…) así respeta modo noche. No toca * ni body. */

/* ── Botón de activación: círculo igual a los de categorías (54 px, misma sombra),
   fijo justo arriba del PRIMER botón de la fila de filtros. Ese botón siempre
   está en el casillero 0 (70 px de ancho, círculo de 54 px centrado → empieza
   a 8 px del borde) y su círculo arranca a 32 px del tope de la fila; el nuestro
   termina 12 px antes (bottom: calc(100% - 20px)). No se mueve con el scroll de
   la fila porque vive en #filter-bar, no en .filter-row. ── */
#ruleta-btn {
  position: absolute;
  left: 8px;
  bottom: var(--ruleta-btn-bottom, calc(100% - 20px)); /* ajustable si hace falta */
  z-index: 3;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: #1c1c1e; color: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.25);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .2s, background .15s;
}
#ruleta-btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ruleta-btn:active { transform: scale(.92); }
#ruleta-btn.on { background: var(--accent, #3a8c4f); box-shadow: 0 7px 22px rgba(0,0,0,.35); }
#ruleta-btn[hidden] { display: none; }

/* ── Ventana centrada ── */
.rul-backdrop {
  position: fixed; inset: 0; z-index: 1250;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.45);
}
.rul-backdrop.is-open { display: flex; }
.rul-card {
  position: relative; width: min(94vw, 380px); max-height: 92vh; overflow-y: auto;
  padding: 18px 18px 20px; border-radius: var(--r-lg, 20px);
  background: var(--surface, #fff); color: var(--text, #1a2e1a);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.25));
  /* [I3, 23/10] línea fina con el color de acento del skin, como la de la bandera de idioma elegida */
  border: 1.5px solid var(--accent, #3a8c4f);
  animation: rulPop .25s cubic-bezier(.16,1,.3,1);
}
@keyframes rulPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.rul-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rul-title { flex: 1; margin: 0; font: 800 18px/1.2 var(--font-d, sans-serif); }
.rul-mute {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border, #e2eae2); background: var(--surface2, #f7f9f7);
  display: flex; align-items: center; justify-content: center;
}
.rul-mute svg { width: 16px; height: 16px; fill: none; stroke: var(--text2, #4a6b4a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rul-hint { margin: 0 0 12px; font-size: 12px; color: var(--text3, #8aaa8a); }

/* ── Filtros ── */
.rul-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rul-chips--sub { margin-top: -2px; }
.rul-chip {
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border2, #ccdacc); background: var(--surface, #fff); color: var(--text, #1a2e1a);
  font: 700 12px/1 var(--font-b, sans-serif); transition: background .15s, color .15s, border-color .15s;
}
.rul-chips--sub .rul-chip { padding: 5px 10px; font-size: 11px; }
.rul-chip.on { background: var(--text, #1a2e1a); color: var(--surface, #fff); border-color: var(--text, #1a2e1a); }

/* ── Escenario: carril que gira + resultado ── */
.rul-stage { position: relative; margin: 14px 0 12px; min-height: 104px; }
.rul-reel {
  position: relative; height: 104px; overflow: hidden; border-radius: 16px;
  background: #181816; border: 1px solid #2e2d29; box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.rul-reel::before, .rul-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none; }
.rul-reel::before { top: 0;    background: linear-gradient(to bottom, #181816, transparent); }
.rul-reel::after  { bottom: 0; background: linear-gradient(to top,    #181816, transparent); }
.rul-strip { display: flex; flex-direction: column; }
.rul-strip > div {
  height: 104px; padding: 0 22px; display: flex; align-items: center; justify-content: center; text-align: center;
  font: italic 400 24px/1.15 'Instrument Serif', Georgia, serif; color: #f4f1ea;
}
.rul-strip > div > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rul-strip.spin { animation: rulDrop 2.6s forwards; }
.rul-reel.landed { animation: rulThud .35s ease-out; }
.rul-idle {
  height: 104px; border-radius: 16px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 18px; font-size: 13px; color: var(--text3, #8aaa8a);
  border: 1.5px dashed var(--border2, #ccdacc);
}
@keyframes rulDrop {
  0%   { transform: translateY(var(--rul-start)); animation-timing-function: cubic-bezier(.55,.06,.68,.19); }
  55%  { transform: translateY(calc(var(--rul-start) + (var(--rul-final) - var(--rul-start)) * 0.82)); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  78%  { transform: translateY(calc(var(--rul-final) + 18px)); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  88%  { transform: translateY(calc(var(--rul-final) - 9px));  animation-timing-function: cubic-bezier(.36,0,.66,-0.4); }
  95%  { transform: translateY(calc(var(--rul-final) + 3px));  animation-timing-function: ease-out; }
  100% { transform: translateY(var(--rul-final)); }
}
@keyframes rulThud { 0% { transform: scale(1); } 30% { transform: scale(1.02,.98); } 60% { transform: scale(.99,1.01); } 100% { transform: scale(1); } }

/* ── Resultado (tocable) ── */
.rul-result {
  display: block; width: 100%; padding: 0; border: none; cursor: pointer; text-align: left; overflow: hidden;
  border-radius: 16px; background: var(--surface2, #f7f9f7); color: var(--text, #1a2e1a);
  box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.18)); animation: rulPop .35s cubic-bezier(.16,1,.3,1);
  /* [R1] Las 4 esquinas siempre redondeadas, con o sin imagen y al cambiar de tamaño.
     Causa del problema: .rul-cap (nombre sobre degradé) es position:absolute y este botón
     no era position:relative, así que se anclaba al .rul-stage y se salía del cuadro con
     esquinas cuadradas. Ahora el botón es su propio ancla y recorta todo lo de adentro
     (overflow + isolation; la imagen y el degradé repiten el radio, ver abajo). */
  position: relative; isolation: isolate;
}
.rul-result:focus-visible { outline: 2px solid var(--accent, #3a8c4f); outline-offset: -3px; }
.rul-media { position: relative; overflow: hidden; border-radius: inherit; clip-path: inset(0 round 16px); aspect-ratio: 16 / 9; background: var(--accent-pale, #edf7ef); display: flex; align-items: center; justify-content: center; }
.rul-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rul-emoji { font-size: 44px; }
.rul-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 11px; color: #fff; border-radius: 0 0 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}
.rul-cap strong { display: block; font: 800 18px/1.15 var(--font-d, sans-serif); }
.rul-cap small { font-size: 11px; opacity: .85; }
.rul-result--ev { padding: 18px 16px; background: #181816; color: #f4f1ea; min-height: 104px; }
.rul-result--ev small { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #b9b5aa; }
.rul-result--ev strong { display: block; margin: 6px 0 4px; font: italic 400 26px/1.15 'Instrument Serif', Georgia, serif; }
.rul-result--ev span { font-size: 12px; color: #b9b5aa; }
.rul-tap { margin: 8px 0 0; text-align: center; font-size: 11px; color: var(--text3, #8aaa8a); }

.rul-spin {
  width: 100%; padding: 13px; border: none; border-radius: 99px; cursor: pointer;
  /* [I3, 23/10] botón de girar con el color de acento del skin activo (variable --accent) */
  background: var(--accent, #3a8c4f); color: #fff;
  font: 800 13px/1 var(--font-b, sans-serif); letter-spacing: .5px; transition: opacity .15s, transform .1s;
}
/* acento claro (amarillo del skin oscuro): letra oscura para que se lea */
[data-skin="neobrutal-night"] .rul-spin { color: #18181b; }
.rul-spin:active { transform: scale(.98); }
.rul-spin:disabled { opacity: .45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .rul-card, .rul-result, .rul-strip.spin, .rul-reel.landed { animation: none; }
}