/* Tarot Apps — estilos autónomos (prefijo .tapp), pensados para convivir
   con cualquier tema. Responsivo: la escena mantiene el fondo del legacy
   con textos e imágenes fluidos encima. */

/* El width: 100 % no sobra. Si el tema mete la app dentro de un contenedor
   flex o grid, sin el la caja se mide por su contenido y las rejillas de los
   formularios la estiran por encima de la pantalla en movil. */
.tapp { width: 100%; max-width: 780px; margin: 0 auto; font-size: 1rem; }
.tapp * { box-sizing: border-box; }
.tapp [hidden] { display: none !important; }

/* ── Escena con el fondo del legacy ─────────────────────────────── */
.tapp .tapp-escena {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 24rem;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
}

/* ── Fase 1: intro + mazo ───────────────────────────────────────── */
.tapp .tapp-f1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.tapp .tapp-intro {
  margin: .4rem auto 0;
  max-width: 92%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  line-height: 1.45;
  text-align: center;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.tapp .tapp-mazo {
  align-self: flex-end;
  margin: 0 8% 2% 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: clamp(110px, 24%, 180px);
  animation: tapp-bamboleo 4s ease-in-out infinite;
  transform-origin: 50% 90%;
  transition: transform .15s ease;
}
.tapp .tapp-mazo:hover { animation-play-state: paused; transform: scale(1.06); }
.tapp .tapp-mazo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
@keyframes tapp-bamboleo {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(8deg); }
  75%      { transform: rotate(-8deg); }
}

/* ── Fase 2: carta + interpretación ─────────────────────────────── */
.tapp .tapp-f2 {
  flex: 1;
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.tapp .tapp-f2[hidden] { display: none; }
.tapp .tapp-entra { animation: tapp-aparece .5s ease both; }
@keyframes tapp-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tapp .tapp-carta {
  flex: 0 0 38%;
  display: flex;
  align-items: center;
}
.tapp .tapp-carta img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
/* El volteo va en el CONTENEDOR: así no pisa el rotate(180deg) de la
   carta invertida, que vive en el img. */
.tapp .tapp-entra .tapp-carta { animation: tapp-volteo .6s ease both; }
@keyframes tapp-volteo { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }

.tapp .tapp-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  color: #fff;
}
.tapp .tapp-titulo {
  margin: 0 0 .2rem;
  color: #ffd76a;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.tapp .tapp-pos {
  margin: 0 0 .3rem;
  color: #8fe89a;
  font-size: .9rem;
  font-weight: 700;
}
.tapp .tapp-pos.tapp-pos-rev { color: #ff9d9d; }
.tapp .tapp-carta img.tapp-invertida { transform: rotate(180deg); }
.tapp .tapp-sim {
  margin: 0 0 .7rem;
  color: #9df3a5;
  font-size: .95rem;
  font-style: italic;
}
.tapp .tapp-texto {
  flex: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tapp .tapp-btn {
  background: rgba(0, 0, 0, .5);
  color: #d9f7dd;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  padding: .55rem 1.4rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.tapp .tapp-btn:hover { background: rgba(255, 255, 255, .18); }
.tapp .tapp-otra-wrap { text-align: center; margin: .9rem 0 0; }

/* ── Grupos 2-4: escena clara con rejilla de dorsos ─────────────── */
.tapp .tapp-clara {
  background-color: #f6f9fc;
  color: #222;
}
.tapp .tapp-instr {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: #1a3a5c;
  margin: .2rem 0 .9rem;
}
.tapp .tapp-pista { font-weight: 400; font-size: 1rem; color: #444; }
.tapp .tapp-rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
}
.tapp .tapp-dorso {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: clamp(48px, 8vw, 66px);
  transition: transform .12s ease, opacity .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.tapp .tapp-dorso:hover { transform: translateY(-4px); }
.tapp .tapp-dorso img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.tapp .tapp-dorso.tapp-usado { cursor: default; opacity: .35; transform: none; }

/* Tirada completa: el resto de dorsos ya no se puede tocar */
.tapp .tapp-rejilla-fin .tapp-dorso { cursor: default; opacity: .55; }
.tapp .tapp-rejilla-fin .tapp-dorso:hover { transform: none; }
.tapp .tapp-rejilla-fin .tapp-dorso.tapp-usado { opacity: .35; }

/* Cartas reveladas (slots) */
.tapp .tapp-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-bottom: .9rem;
}
.tapp .tapp-slot {
  margin: 0;
  width: clamp(84px, 16vw, 120px);
  text-align: center;
  animation: tapp-aparece .4s ease both;
  animation-delay: var(--d, 0s);
}
.tapp .tapp-slot img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.tapp .tapp-slot figcaption {
  font-size: .82rem;
  font-weight: 700;
  color: #1a3a5c;
  margin: .25rem 0;
  line-height: 1.25;
}
.tapp .tapp-slot figcaption span { display: block; font-weight: 700; }
.tapp .tapp-v-si   { color: #2e9e3f; }
.tapp .tapp-v-no   { color: #b02020; }
.tapp .tapp-v-duda { color: #d98a12; }

/* G2: cartas clicables + panel de interpretación */
.tapp .tapp-lectura2 .tapp-slot { cursor: pointer; transition: transform .15s ease; }
.tapp .tapp-lectura2 .tapp-slot:hover { transform: translateY(-4px); }
.tapp .tapp-lectura2 .tapp-slot-activo img { box-shadow: 0 0 0 3px #2b6cb0, 0 4px 12px rgba(0, 0, 0, .3); }
.tapp .tapp-panel2 {
  background: #fff;
  border: 1px solid #cfdcea;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  max-width: 44rem;
  margin: 0 auto;
}
.tapp .tapp-titulo2 { margin: 0 0 .5rem; color: #1a3a5c; font-size: 1.15rem; }
.tapp .tapp-texto2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #222;
}

/* Botón sobre escena clara */
.tapp .tapp-clara .tapp-btn {
  background: #2b6cb0;
  color: #fff;
  border: 0;
}
.tapp .tapp-clara .tapp-btn:hover { background: #3182ce; }

/* ── Escena SIN foto de fondo (siono_5cartas): noche, no gris ─────
   Cuando fondo=null el div sale sin atributo style (sin background-image):
   ese caso —y solo ese— viste la noche del tema en vez del gris claro.
   Los tarots con foto conservan su escena y sus colores de siempre. */
.tapp .tapp-clara:not([style]) {
  background: radial-gradient(ellipse at 50% 0%, #241a4f 0%, #120e24 58%, #0d0a1c 100%);
  border: 1px solid rgba(201, 164, 92, .30);
  color: #f0ebf6;
}
.tapp .tapp-clara:not([style]) .tapp-instr { color: #e9c87f; }
.tapp .tapp-clara:not([style]) .tapp-pista { color: #9a92b0; }
.tapp .tapp-clara:not([style]) .tapp-slot figcaption { color: #f0ebf6; }
.tapp .tapp-clara:not([style]) .tapp-answer-is { color: #e9c87f; }
/* Los veredictos por carta, subidos de brillo para la noche. */
.tapp .tapp-clara:not([style]) .tapp-v-si   { color: #7fe08a; }
.tapp .tapp-clara:not([style]) .tapp-v-no   { color: #ff9d9d; }
.tapp .tapp-clara:not([style]) .tapp-v-duda { color: #f3c165; }
.tapp .tapp-clara:not([style]) .tapp-btn {
  background: linear-gradient(180deg, #f3d9a4, #d9a05c);
  color: #2a1420;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
}
.tapp .tapp-clara:not([style]) .tapp-btn:hover { background: linear-gradient(180deg, #f8e3b8, #e0ab68); }

/* G3/G4: veredicto en círculo, como el legacy */
.tapp .tapp-veredicto { text-align: center; margin: 1rem 0 .4rem; }
.tapp .tapp-answer-is { font-weight: 700; font-size: 1.15rem; color: #1a3a5c; margin: 0 0 .7rem; }
.tapp .tapp-circulo {
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tapp-aparece .5s ease both;
}
.tapp .tapp-circulo span { font-weight: 800; font-size: 2rem; line-height: 1.1; padding: 0 .5rem; }
.tapp .tapp-circulo .tapp-r-si   { color: #1fb02b; font-size: 2.6rem; text-transform: uppercase; }
.tapp .tapp-circulo .tapp-r-no   { color: #b02020; font-size: 2.6rem; text-transform: uppercase; }
.tapp .tapp-circulo .tapp-r-duda { color: #d98a12; font-size: 1.5rem; }
.tapp .tapp-circulo .tapp-r-nada { color: #444; font-size: 1.4rem; }

/* ── Móvil ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .tapp .tapp-escena { padding: .8rem; }
  .tapp .tapp-f2 { flex-direction: column; align-items: center; }
  .tapp .tapp-carta { flex: 0 0 auto; width: min(60%, 230px); }
  .tapp .tapp-mazo { margin-right: 4%; }
}

/* ── Preload: breve suspense (0,5–2 s) antes de revelar la carta ─── */
.tapp .tapp-cargando {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .32);
  border-radius: inherit;
  z-index: 6;
}
.tapp .tapp-cargando-on { display: flex; }
.tapp .tapp-spinner {
  width: clamp(2.6rem, 9vw, 3.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  animation: tapp-girar .8s linear infinite;
}
@keyframes tapp-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tapp .tapp-mazo, .tapp .tapp-entra .tapp-carta, .tapp .tapp-entra, .tapp .tapp-spinner { animation: none; }
}