/* Espejo Zodiacal: trivia zodiacal diaria (J02). Tarjeta de pregunta sobre papel, como .carta-j de la maqueta A_final.
   No inventa colores ni fuentes: usa los tokens y las clases del motor (D01_CONTRATO.md): .hoja, .boton, .gl, --papel, --hueso,
   --tinta, --cuerpo, --suave, --filete, --oro, --oro-tinta, --luna, --noche-tinta, --serif, --sans, y el acento del signo
   (--acento y --acento-tx), que llega con la clase s-<signo> que trivia.js le pone a la tarjeta.
   El valor de reserva de cada var() es el de paleta.txt. Clases propias con prefijo tv-. Sin @import y sin url(). */
.tv{max-width:560px;margin:0 auto;text-align:left}
.tv [hidden]{display:none!important}
.tv .tv-carta{position:relative;background:var(--papel,#F7F3EA);color:var(--tinta,#1A1A22);border:1px solid var(--filete,#DDD5C7);
  border-radius:18px;padding:28px 30px 20px;box-shadow:0 30px 60px -30px var(--noche-tinta,#050D1C);scroll-margin-top:96px}
.tv .tv-arriba{display:flex;justify-content:space-between;gap:12px;margin:0;font:600 11.5px/1.3 var(--sans,sans-serif);
  letter-spacing:.2em;text-transform:uppercase;color:var(--suave,#726C7F)}
.tv .tv-pts{display:flex;gap:5px;margin-top:10px}
.tv .tv-pts u{flex:1;height:4px;border-radius:4px;background:var(--filete,#DDD5C7);text-decoration:none}
.tv .tv-pts u.h{background:var(--oro-tinta,#8A6A21)}
.tv .tv-q{font:700 27px/1.22 var(--serif,Georgia,serif);letter-spacing:-.008em;margin:22px 0;color:var(--tinta,#1A1A22);outline:0;max-width:none}
.tv .tv-txt{font:400 18px/1.55 var(--serif,Georgia,serif);color:var(--cuerpo,#3A3A45);margin:-8px 0 20px}
.tv .tv-ops{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tv .tv-ops.tv-largas{grid-template-columns:1fr}
.tv .tv-op{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;width:100%;margin:0;padding:11px 16px;text-align:left;
  border:1px solid var(--filete,#DDD5C7);border-radius:12px;background:var(--hueso,#FDFBF6);color:var(--tinta,#1A1A22);
  font:600 16.5px/1.25 var(--sans,sans-serif);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,transform .15s}
.tv .tv-op{flex-wrap:wrap;row-gap:4px}
.tv .tv-op .tv-t{flex:1 0 auto;max-width:100%;overflow-wrap:break-word}
.tv .tv-op .tv-gl{font-size:19px;line-height:1;color:var(--suave,#726C7F)}
.tv .tv-glifos .tv-op{justify-content:center;text-align:center}
.tv .tv-glifos .tv-op .tv-t{flex:0 1 auto;font-size:30px;line-height:1}
.tv .tv-op em{font:600 11px/1 var(--sans,sans-serif);font-style:normal;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.tv .tv-op em:empty{display:none}
.tv .tv-op:hover:not(:disabled){border-color:var(--tinta,#1A1A22);transform:translateY(-1px)}
.tv .tv-op:focus-visible,.tv .tv-son:focus-visible,.tv .tv-enlace:focus-visible,.tv .tv-carta a:focus-visible,.tv .tv-boton:focus-visible{
  outline:3px solid var(--oro-tinta,#8A6A21);outline-offset:2px}
.tv .tv-op:disabled{cursor:default;color:var(--suave,#726C7F)}
.tv .tv-op.es-ok{border-color:var(--acento,var(--oro-tinta,#8A6A21));background:var(--acento,var(--oro-tinta,#8A6A21));color:var(--hueso,#FDFBF6)}
.tv .tv-op.es-ok .tv-gl{color:var(--hueso,#FDFBF6)}
.tv .tv-op.es-mal{border:2px dashed var(--tinta,#1A1A22);color:var(--tinta,#1A1A22);padding:10px 15px}
.tv .tv-fb{position:relative;z-index:2;margin:18px 0 0;padding:16px 18px;border-radius:12px;background:var(--hueso,#FDFBF6);
  border-left:4px solid var(--acento,var(--oro-tinta,#8A6A21))}
.tv .tv-fb p{font:400 17px/1.55 var(--serif,Georgia,serif);color:var(--cuerpo,#3A3A45);margin:0 0 8px;max-width:none}
.tv .tv-fb .tv-ver{font:600 17px/1.35 var(--sans,sans-serif);color:var(--tinta,#1A1A22)}
.tv .tv-leer,.tv .tv-links a{display:inline-flex;align-items:center;min-height:44px;font:600 14.5px/1.4 var(--sans,sans-serif);letter-spacing:.04em;
  color:var(--acento-tx,var(--oro-tinta,#8A6A21));text-decoration:underline;text-underline-offset:4px}
.tv .tv-boton{position:relative;z-index:2;min-height:52px;margin:18px 0 0;padding:0 30px;border:0;font:600 15.5px/1 var(--sans,sans-serif);
  letter-spacing:.06em;text-decoration:none;cursor:pointer}
.tv .tv-tecla{font:500 13px/1.4 var(--sans,sans-serif);color:var(--suave,#726C7F);margin:14px 0 0;display:none}
@media (hover:hover) and (pointer:fine){.tv .tv-tecla{display:block}}
.tv .tv-pie{margin:12px 0 0;text-align:right}
.tv .tv-son,.tv .tv-enlace{min-height:44px;padding:0 4px;border:0;background:none;color:var(--suave,#726C7F);font:600 13px/1 var(--sans,sans-serif);
  letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tv .tv-son[aria-pressed="true"],.tv .tv-enlace{color:var(--tinta,#1A1A22)}
.tv .tv-num{font:400 25px/1 var(--serif,Georgia,serif);color:var(--cuerpo,#3A3A45);margin:22px 0 14px;outline:0}
.tv .tv-num b{font:700 72px/1 var(--serif,Georgia,serif);letter-spacing:-.02em;color:var(--tinta,#1A1A22);margin-right:6px}
.tv .tv-racha{font:600 18px/1.4 var(--sans,sans-serif);color:var(--tinta,#1A1A22);margin:18px 0 0}
.tv .tv-falta,.tv .tv-aviso{font:500 15.5px/1.5 var(--sans,sans-serif);color:var(--cuerpo,#3A3A45);margin:6px 0 0}
.tv .tv-aviso{margin-top:12px;overflow-wrap:anywhere}
.tv .tv-sub{font:600 11.5px/1.3 var(--sans,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--suave,#726C7F);
  margin:28px 0 10px;padding-top:18px;border-top:1px solid var(--filete,#DDD5C7)}
.tv .tv-repaso{margin:0;padding:0 0 0 22px}
.tv .tv-repaso li{font:400 16.5px/1.55 var(--serif,Georgia,serif);color:var(--cuerpo,#3A3A45);margin:0 0 12px}
.tv .tv-repaso b{display:block;color:var(--tinta,#1A1A22)}
.tv .tv-links{list-style:none;margin:0;padding:0}
.tv .tv-links li{margin:0}
.tv .tv-links a{color:var(--oro-tinta,#8A6A21)}
.tv-vivo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tv-mini .tv-carta{padding-bottom:26px}
/* la banda de la home: el boton y la racha, debajo del texto que pone el motor */
.tv-banda{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:28px 0 0}
.tv-llevas{font:600 13px/1.3 var(--sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--luna,#F2E9D0)}
/* confeti: sobre la tarjeta y por debajo de la explicacion y del boton (z-index 2). Solo transform y opacity. */
.tv-conf{position:absolute;z-index:1;width:0;height:0;pointer-events:none}
.tv-conf i{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px;will-change:transform,opacity;
  animation:tv-conf 1.05s cubic-bezier(.2,.7,.3,1) forwards}
.tv-conf .c0{background:var(--oro,#C9A227)}
.tv-conf .c1{background:var(--luna,#F2E9D0);box-shadow:0 0 0 1px var(--filete,#DDD5C7)}
.tv-conf .c2{background:var(--acento,var(--oro-tinta,#8A6A21))}
.tv-sacude{animation:tv-sacude .4s}
@keyframes tv-conf{0%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@keyframes tv-sacude{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (max-width:480px){
  .tv .tv-carta{padding:22px 18px 14px;border-radius:16px}
  .tv .tv-q{font-size:22px;margin:18px 0}
  .tv .tv-op{padding:10px 12px;font-size:16px;gap:8px}
  .tv .tv-op.es-mal{padding:9px 11px}
  .tv .tv-fb{padding:14px 14px}
  .tv .tv-boton{width:100%}
  .tv .tv-num b{font-size:60px}
}
@media (prefers-reduced-motion:reduce){.tv *,.tv .tv-carta{animation:none!important;transition:none!important}.tv-conf{display:none}}
@media print{.tv .tv-boton,.tv .tv-pie,.tv-conf{display:none!important}}