/* ==========================================================================
   COMPONENTES — piezas que se repiten entre pantallas
   ========================================================================== */

/* Contenedores de capa completa: sus hijos también van en absoluto */
.wheel > *, .layer > * { position: absolute; }
.composer, .send { position: absolute; }

/* --- Rueda de capítulos (1.3 y Home) ------------------------------------ */
.wheel-item {
  font-family: var(--f-text);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  transform: translateX(-50%);
  cursor: pointer;
}
.wheel-item { pointer-events: none; will-change: top, font-size; }  /* tamaño, color y posición los pone wheel.js */
.wheel-box { left: 20px; width: 362px; border: 2px solid var(--c-dark); border-radius: var(--r-btn); background: var(--c-pink-30); transition: background-color .25s ease; }
/* 2.1 — capítulo aún no leído: fondo gris y borde discontinuo */
.wheel-box.is-unread { background: rgba(0, 0, 0, 0.1); border-style: dashed; }
.wheel-sub { pointer-events: none; }
/* El contenedor de la rueda ocupa toda la pantalla: no debe tapar el botón de volver,
   el avatar ni el nombre. Solo la zona de arrastre recibe toques. */
.wheel { pointer-events: none; }
.wheel-hit { touch-action: none; cursor: grab; z-index: 1; pointer-events: auto; }
.wheel-hit:active { cursor: grabbing; }

/* --- Avatar con la cabeza del caballo (Home) ------------------------------ */
.avatar { left: 19px; top: 80px; width: 50px; height: 50px; border-radius: 25px; overflow: hidden; background: var(--c-cream); }
.user-name { background: transparent; border: 0; padding: 0; caret-color: var(--c-dark); }
.user-name::placeholder { color: var(--c-dark); opacity: 1; }
.avatar img { position: absolute; left: -6.944px; top: 9.723px; width: 118.176px; height: 87.5px; }

/* Enlace "Volver a tu capítulo" (2.1): única pieza en Bricolage SemiCondensed y sin mayúsculas */
.back-to-mine { font-family: "Bricolage SemiCondensed", var(--f-text); font-size: 25px; line-height: 1.1; color: var(--c-pink); text-decoration: underline; text-decoration-thickness: 8%; white-space: nowrap; transform: translateX(-50%); }

/* --- Hoja "¿Hasta dónde has llegado?" (2.2) ------------------------------- */
.sheet-scrim { inset: 0; background: var(--c-dark-20); z-index: 20; }
.sheet { left: 0; top: 383px; width: 402px; height: 715px; border-radius: 15px 15px 0 0; background: var(--c-cream); z-index: 21; touch-action: none; }
.sheet > * { position: absolute; }
.sheet__handle { left: 161px; top: 20px; width: 80px; height: 6px; border-radius: 27px; background: var(--c-dark); }
.sheet__grip { left: 0; top: 0; width: 402px; height: 50px; }   /* zona de arrastre invisible */

/* --- Píldora de navegación "Mi lectura / Reunión" + botón del caballo ---- */
.navpill { left: 20px; top: 764px; width: 292px; height: 60px; border-radius: 30px; background: var(--c-dark); }
.navpill__thumb { position: absolute; top: 5px; width: 136px; height: 50px; border-radius: 25px; background: var(--c-cream); }
.navpill__label { position: absolute; top: 16px; font-family: var(--f-text); font-size: 25px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.horse-btn { left: 322px; top: 764px; width: 60px; height: 60px; border-radius: 30px; overflow: hidden; }
.horse-btn img { position: absolute; left: -8px; top: 10px; width: 135.038px; height: 100px; }
.horse-btn::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c-dark); border-radius: 30px; }

/* --- Pestañas Profecías / Comentarios ------------------------------------ */
.tab { top: 151px; width: 171px; height: 50px; border-radius: var(--r-btn); font-family: var(--f-text); font-size: 25px; line-height: 1.1; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
/* Dos botones independientes: el activo, relleno oscuro con texto rosa */
.tab { border: 2px solid var(--c-dark); background: transparent; color: var(--c-dark); }
.tab.is-active { background: var(--c-dark); color: var(--c-pink); }

/* --- Lista de tarjetas (comentarios / profecías) ------------------------- */
.feed { left: 20px; top: 241px; width: 362px; height: 493px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.post { flex: none; border: 1px solid var(--c-dark); border-radius: var(--r-btn); padding: 15px; display: flex; flex-direction: column; gap: 15px; }
.post--mine { background: var(--c-pink-30); }
.post__head { display: flex; align-items: center; justify-content: space-between; }
.post__body { width: 332px; font-size: 20px; line-height: 1.1; }
.post__body--text  { font-family: var(--f-text); text-transform: uppercase; }
.post__body--quote { font-family: var(--f-display); letter-spacing: -0.06em; }

/* Etiqueta de veredicto (acerté / casi / ni de lejos) y pastilla azul */
.chip { display: inline-flex; align-items: center; height: 24px; padding: 4px 16px 3px 17px; border-radius: var(--r-pill); font-family: var(--f-text); font-size: 15px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.chip--acerte { background: var(--c-pink); color: var(--c-dark); }
.chip--lejos  { background: var(--c-dark-20); color: var(--c-dark); }
.chip--casi, .chip--blue { background: var(--c-blue); color: var(--c-cream); }

/* --- Caja de escribir comentario ----------------------------------------- */
.composer { left: 20px; top: 774px; width: 302px; height: 50px; background: var(--c-cream); border: 2px solid var(--c-dark); border-radius: var(--r-btn); padding: 0 18px; font-family: var(--f-text); font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.composer::placeholder { color: var(--c-dark-50); opacity: 1; }
.send { left: 332px; top: 774px; width: 50px; height: 50px; border-radius: 25px; background: var(--c-dark); }
.send__icon { position: absolute; left: 5.9px; top: 5.4px; width: 38.197px; height: 38.197px; display: flex; align-items: center; justify-content: center; }
.send__icon > span { position: relative; width: 25.07px; height: 28.949px; transform: rotate(135deg); }
.send__icon img { position: absolute; left: -2px; top: 0.9px; width: 26.0386px; height: 27.1494px; }

/* --- Interruptor (6.1) ----------------------------------------------------- */
.toggle { left: 334px; top: 538px; width: 49px; height: 30px; }
.toggle img { position: absolute; }
.toggle .t-off  { left: 0; top: 0; width: 48.163px; height: 30px; transform: scaleX(-1); }
.toggle .t-track{ left: 0; top: 0; width: 49px; height: 30px; }
.toggle .t-knob { left: 24.17px; top: 6px; width: 18px; height: 18px; }
.toggle[aria-checked="true"]  .t-off { display: none; }
.toggle[aria-checked="false"] .t-track, .toggle[aria-checked="false"] .t-knob { display: none; }

/* --- Textarea de profecía ------------------------------------------------- */
.prophecy-box { left: 20px; top: 252px; width: 362px; height: 200px; border: 1px solid var(--c-dark); border-radius: var(--r-btn); padding: 15px; }
.prophecy-box textarea { width: 330px; height: 168px; resize: none; font-family: var(--f-text); font-size: 20px; line-height: 1.1; text-transform: uppercase; }

/* --- Botones de veredicto (8) ---------------------------------------------- */
.verdicts { left: 36px; top: 471px; display: flex; gap: 5px; }
.verdict { height: 50px; border: 1px solid var(--c-dark); border-radius: var(--r-btn); font-family: var(--f-text); font-size: 20px; line-height: 1.1; text-transform: uppercase; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.verdict[aria-pressed="true"] { background: var(--c-pink-30); border-color: transparent; }

/* --- Filtros del mazo (11.1) ---------------------------------------------- */
.filter { top: 193px; width: 114px; height: 50px; border-radius: var(--r-btn); border: 1px solid var(--c-dark); font-family: var(--f-text); font-size: 20px; line-height: 1.1; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.filter[aria-pressed="true"] { background: var(--c-pink-30); border-color: transparent; }

/* Carta del mazo (reverso con el patrón exportado de Figma; el PNG incluye borde y sombra) */
.deck-card { width: 230px; height: 348.177px; border-radius: 6.354px; background: url("../assets/img/card-back.png") -4px 0 / 238px 356.333px no-repeat; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); transform-origin: 50% 50%; }

/* --- Carta activa de 11.2: anverso + reverso, gira en 3D ------------------ */
.dcard { left: 20px; top: 159px; width: 362px; height: 548px; perspective: 1400px; touch-action: none; cursor: grab; }
.dcard:active { cursor: grabbing; }
.dcard__inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.dcard__face { position: absolute; inset: 0; border-radius: var(--r-btn); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dcard__front { background: var(--c-cream); border: 1px solid var(--c-dark); }
.dcard__front > * { position: absolute; }
/* Reverso: el mismo PNG exportado de Figma que el mazo (incluye borde), escalado a 362 de ancho */
.dcard__back { transform: rotateY(180deg); background: url("../assets/img/card-back.png") -6.3px 0 / 374.59px 560.8px no-repeat; }

/* --- Carta grande (11.2) ---------------------------------------------------- */
.big-card { left: 20px; width: 362px; height: 548px; border-radius: var(--r-btn); background: var(--c-cream); border: 1px solid #000; }
.big-card--top { border-color: var(--c-dark); }

/* --- Tarjeta de escudo (10) -------------------------------------------------- */
.shield-card { left: 20px; top: 331px; width: 362px; height: 82px; border-radius: var(--r-btn); border: 2px solid var(--c-dark); }
.shield-card > * { position: absolute; }
.shield-card.is-raised { background: var(--c-blue); border-color: var(--c-blue); }
.shield-card__icon { left: 18px; top: 15px; width: 38px; height: 47.727px; }
.shield-card__badge { left: 46px; top: 5px; width: 20px; height: 20px; border-radius: 10px; background: var(--c-pink); }
.shield-card__count { left: 53px; top: 7px; font-family: var(--f-text); font-size: 15px; line-height: 1.1; }
.shield-card__text { left: 76px; top: 14px; display: flex; flex-direction: column; gap: 5px; }
.shield-card__btn { left: 277px; top: 18px; width: 73px; height: 42px; border-radius: var(--r-btn); background: var(--c-pink); font-family: var(--f-text); font-size: 15px; line-height: 1.1; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.shield-card.is-raised .shield-card__btn { background: var(--c-blue); border: 2px solid var(--c-cream); color: var(--c-cream); }

/* --- Notificaciones de ejemplo (1.4) ---------------------------------------- */
.notif { left: 20px; width: 362px; height: 100px; border: 2px solid var(--c-dark-50); border-radius: var(--r-btn); background: rgba(255, 255, 255, 0.6); }
.notif > * { position: absolute; }
.notif__icon { left: 8px; top: 13px; width: 36px; height: 36px; border-radius: 10px; background: var(--c-pink); overflow: hidden; }
.notif__icon img { position: absolute; left: -5px; top: 7px; width: 85.0864px; height: 63px; }
/* Siguiente carta bajo la activa (11.2): estática, no recibe toques */
.dcard--under { pointer-events: none; cursor: default; }
/* Interruptor animándose: las tres piezas visibles (las opacidades las pone GSAP) */
.toggle.is-animating .t-off, .toggle.is-animating .t-track, .toggle.is-animating .t-knob { display: block; }