@import url('https://fonts.googleapis.com/css2?family=Anton&family=Baloo+2:wght@500;600;700;800&display=swap');

/* "only light" le dice al navegador que esta app tiene un diseño propio
   de un solo modo y que NO debe aplicarle su tema oscuro automático.
   Sin esto, Samsung Internet y Chrome con tema oscuro forzado invertían
   los colores: la polaroid blanca salía gris oscura y las imágenes de
   líneas negras se perdían contra ese fondo. */
:root {
  color-scheme: only light;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

body {
  background: linear-gradient(#2a1454, #2a1454);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

/* Contenedor de la app: formato móvil vertical, centrado en pantallas anchas */
#app {
  position: relative;
  width: 100%;
  max-width: var(--app-max-width);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
}

.view {
  display: none;
  position: relative;
  min-height: 100vh;
  padding: 32px 24px 48px;
  flex-direction: column;
  align-items: center;
}

.view.active {
  display: flex;
}

/* ---------- Cupidos y corazones decorativos ---------- */
.heart-outline {
  position: absolute;
  width: 46px;
  opacity: 0.85;
}
.heart-outline.left { bottom: 16px; left: 20px; }
.heart-outline.right { bottom: 16px; right: 20px; }
.heart-outline.top-left { top: 20px; left: 20px; }
.heart-outline.top-right { top: 20px; right: 20px; }

/* ---------- Vista: Inicio ---------- */
#view-home {
  justify-content: center;
  gap: 40px;
  text-align: center;
}

.home-circle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 90px;
}

.home-circle-wrap::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-circle-glow) 0%, transparent 70%);
}

.home-circle {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9a4bf0, var(--color-circle-fill) 70%);
  box-shadow: inset 0 -10px 30px rgba(0,0,0,0.25), var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.home-circle .title {
  font-family: var(--font-display);
  font-size: 2.35rem;
  letter-spacing: 1px;
  line-height: 1;
}

.home-circle .big-number {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  margin-top: 6px;
}

.btn-enter {
  margin-top: 60px;
  padding: 16px 56px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(2px);
}
.btn-enter:active { transform: translateY(2px); }
.btn-enter:disabled { opacity: 0.7; }

/* ---------- Vista: Acceso (código de compra) ---------- */
#view-access {
  justify-content: center;
  gap: 32px;
  text-align: center;
}

.access-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
}

.access-form .instruction {
  margin: 0;
}

.access-input {
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.5);
  background: var(--color-glass);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}
.access-input::placeholder {
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
}
.access-input:focus {
  outline: 2px solid var(--color-pink);
  outline-offset: 2px;
}

.access-error {
  min-height: 1.2em;
  margin: 0;
  color: #ffe08a;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
}

.access-form .btn-enter {
  margin-top: 0;
}

/* ---------- Burbujas cómic tipo estrella (zigzag) ---------- */
.comic-bubble {
  position: relative;
  background: var(--color-purple-dark);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 800;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  clip-path: polygon(
    50% 0%, 58% 12%, 72% 3%, 74% 18%, 90% 12%, 86% 28%,
    100% 30%, 88% 42%, 100% 55%, 84% 56%, 90% 72%, 74% 65%,
    72% 82%, 58% 72%, 52% 88%, 44% 74%, 32% 88%, 28% 70%,
    12% 78%, 18% 62%, 2% 60%, 16% 46%, 0% 34%, 16% 30%,
    10% 14%, 26% 20%, 30% 4%, 40% 16%
  );
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.comic-bubble span {
  font-size: 0.92rem;
  line-height: 1.15;
  max-width: 85%;
}

/* ---------- Vista: Selección de mes ---------- */
#view-months .bubbles-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  margin-top: 54px;
}
#view-months .comic-bubble { width: 170px; height: 170px; transform: rotate(-4deg); }
#view-months .comic-bubble:last-child { transform: rotate(4deg); }
#view-months .comic-bubble span { transform: translateY(-8%); }

.instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  margin: 28px 0 16px;
  text-align: center;
}
.instruction .arrow { font-size: 1.1rem; }

.months-panel {
  width: 100%;
  background: var(--color-purple-dark);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  box-shadow: var(--shadow-soft);
}

.months-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.month-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #9a4bf0, #7c2ae8);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.5px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), 0 4px 8px rgba(0,0,0,0.25);
}
.month-btn:active { transform: translateY(1px); }

/* ---------- Vista: Calendario del mes ---------- */
#view-calendar .comic-bubble {
  width: 200px;
  height: 200px;
  margin-top: 46px;
  transform: rotate(-3deg);
}
#view-calendar .comic-bubble span {
  max-width: 68%;
  transform: translateY(-10%);
}

.calendar-panel {
  width: 100%;
  margin-top: 28px;
  background: var(--color-lavender);
  border: 10px solid var(--color-lavender-border);
  border-radius: var(--radius-lg);
  padding: 22px 14px 28px;
}

.calendar-panel .month-title {
  text-align: center;
  font-family: var(--font-display);
  color: var(--color-purple-darker);
  font-size: 1.7rem;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px 6px;
  justify-items: center;
}

.day-btn {
  background: none;
  color: var(--color-purple-darker);
  font-family: var(--font-display);
  font-size: 1.15rem;
  padding: 4px 0;
  width: 100%;
  border-radius: 8px;
}
.day-btn:active { background: rgba(124, 58, 237, 0.15); }

.btn-back {
  margin-top: 26px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.3;
}

/* ---------- Modal Polaroid (popup del día) ---------- */
#modal-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay);
  padding: 24px;
}
#modal-popup.active { display: flex; }

.polaroid {
  position: relative;
  width: 100%;
  max-width: 340px;
  /* Misma técnica que en .polaroid-photo: un PNG blanco incrustado en
     vez de un color, porque los navegadores que fuerzan el tema oscuro
     no invierten las imágenes reales. Así la polaroid entera se mantiene
     blanca en Samsung Internet con modo oscuro activado. */
  background-color: var(--color-white);
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAARSURBVChTY/hPAIwIBf//AwCEtf8BmLK6XAAAAABJRU5ErkJggg==');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  padding: 18px 18px 26px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  text-align: center;
}

.polaroid-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 90px;
  height: 30px;
  background: rgba(240, 190, 110, 0.85);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.polaroid-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid #ddd;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Este fondo DEBE quedar blanco pase lo que pase: las imágenes del
     calendario son dibujos de líneas negras y sin fondo claro no se ven.
     Samsung Internet fuerza su propio tema oscuro y transforma tanto
     `background-color` como los degradados (se comprobó: el degradado
     del hero de la landing igual le sale oscuro). Lo que los navegadores
     NO invierten son las imágenes reales — si lo hicieran, todas las
     fotos de la web se verían mal en modo oscuro. Por eso el fondo aquí
     es un PNG blanco de 8x8 incrustado, no un color.
     `forced-color-adjust: none` cubre además los modos de alto contraste. */
  background-color: #fff;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAARSURBVChTY/hPAIwIBf//AwCEtf8BmLK6XAAAAABJRU5ErkJggg==');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  forced-color-adjust: none;
  color: #b9a7d9;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  /* "contain" (no "cover"): la imagen se escala completa dentro del
     recuadro sin recortarse ni deformarse, sin importar si es vertical,
     horizontal o cuadrada — quedan franjas del fondo donde sobre. */
  object-fit: contain;
  display: block;
  /* Que ningún modo oscuro del sistema le aplique filtros al dibujo. */
  forced-color-adjust: none;
}

.polaroid-date {
  font-family: var(--font-display);
  color: var(--color-purple-darker);
  font-size: 1.6rem;
  margin: 16px 0 18px;
}

.polaroid-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.polaroid-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-lavender);
  color: var(--color-purple-darker);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-volver {
  padding: 14px 44px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #f472b6, var(--color-pink));
  color: var(--color-purple-darker);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 0 var(--color-pink-dark), 0 8px 14px rgba(0,0,0,0.25);
}
.btn-volver:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-pink-dark); }

.modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: var(--color-white);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Accesibilidad / utilidades ---------- */
:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* En pantallas anchas (escritorio), la app queda centrada como una tarjeta móvil,
   nunca se convierte en dashboard horizontal (regla del brief). */
@media (min-width: 540px) {
  body { padding: 24px 0; }
  #app { min-height: auto; border-radius: 24px; }
}