/* ============================================================
   VARIABLES CSS (CUSTOM PROPERTIES)
   Paleta de colores y tipografías globales del proyecto
============================================================ */
:root {
  --bg: #f8f3e9;
  /* Color de fondo principal (crema cálido) */
  --card: #fffcf5;
  /* Fondo de tarjetas (blanco hueso) */
  --line: #e4d9cf;
  /* Líneas divisorias y bordes sutiles */
  --plum: #673c57;
  /* Color principal marca (ciruela oscuro) */
  --lilac: #eee3ea;
  /* Acentos suaves (lila pálido) */
  --ink: #332b30;
  /* Texto principal (casi negro cálido) */
  --muted: #796c70;
  /* Texto secundario/muted */
  --gold: #9a7043;
  /* Detalles dorados (comillas, acentos) */
  --peach: #f0d2b4;
  /* Destacado día actual / focus (melocotón) */
  --serif: "Lora", Georgia, serif;
  /* Tipografía serif para titulares */
  --sans: "Inter", system-ui, sans-serif;
  /* Tipografía sans para UI */
}

/* ============================================================
   RESET Y BASE
   Normalización cross-browser y estilos base
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
}

/* Imágenes se comportan como bloques y no encogen en flex */
img {
  display: block;
  flex-shrink: 0;
}

/* Eliminar márgenes/padding por defecto de elementos tipográficos */
h1,
h2,
p,
ol,
ul,
blockquote {
  margin: 0;
  padding: 0;
}

/* Quitar viñetas de listas */
ol,
ul {
  list-style: none;
}

/* ============================================================
   LAYOUT PRINCIPAL: .screen
   Contenedor que centra el contenido, ancho máx 390px (móvil)
============================================================ */
.screen {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Espacio entre secciones principales */
  max-width: 390px;
  margin: 0 auto;
  /* Centrado horizontal */
  padding: 26px 22px 20px;
}

/* ============================================================
   TEXTOS BASE: utilidades tipográficas reutilizables
============================================================ */
/* Eyebrow: texto pequeño en mayúsculas, color muted, peso 600 */
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

/* Label base: tamaño 10px */
.label {
  font-size: 10px;
}

/* Label acento: peso 600, color ciruela */
.label--accent {
  font-weight: 600;
  color: var(--plum);
}

/* Label muted: color muted */
.label--muted {
  color: var(--muted);
}

/* Regla divisoria horizontal: línea fina 1px color --line */
.rule {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

/* ============================================================
   PÍLDORAS (PILLS): badges/etiquetas redondeadas reutilizables
============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 100px;
  /* Fully rounded */
  font-size: 10px;
  white-space: nowrap;
  color: var(--plum);
}

/* Variante outline: solo borde */
.pill--outline {
  border: 1px solid var(--line);
}

/* Variante soft: fondo lila, peso 500, padding ligeramente mayor */
.pill--soft {
  background: var(--lilac);
  font-weight: 500;
  padding: 6px 8px;
}

/* ============================================================
   SECCIÓN: BIENVENIDA (.welcome)
============================================================ */
.welcome {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

/* Cabecera club: logo + nombre a la izquierda, pill estado a la derecha */
.club-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Marca: icono + nombre en serif ciruela */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--plum);
}

/* Saludo: eyebrow + h1 + lead apilados verticalmente */
.greeting {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.greeting h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 35px;
  line-height: 1.14;
}

.lead {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* Bloque CTA: contenedor del botón principal */
.cta-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   BOTÓN CTA PRINCIPAL (.cta) - "Ir al perfil de TikTok"
   Contenedor flex alto (200px) con icono izq, texto centro, icono der
   --------------------------------------------------------------
   PARA CAMBIAR TAMAÑO DE ICONOS Y TEXTO SIN AFECTAR CONTENEDOR:
   - Iconos: son <img> dentro de .cta → usa .cta img { width/height }
   - Texto: está en <span> dentro de .cta → usa .cta span { font-size }
   - Altura del botón: cambia height en .cta (afecta contenedor)
   - Gap entre elementos: cambia gap en .cta
============================================================ */
.cta {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Espacio entre icono izq, texto, icono der */
  height: 200px;
  /* ALTO DEL CONTENEDOR (cambia esto para botón más alto/bajo) */
  padding: 0 18px;
  /* Padding horizontal interno */
  border-radius: 12px;
  background: var(--plum);
  color: var(--card);
  font-size: 15px;
  /* TAMAÑO BASE TEXTO (heredado por span si no se sobrescribe) */
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}

/* Texto central: flex:1 para ocupar espacio entre los dos iconos */
.cta span {
  flex: 1;
  /* PARA CAMBIAR SOLO TAMAÑO TEXTO: descomenta y ajusta:*/
  font-size: 20px;
}

/* Iconos dentro del CTA (TikTok y flecha) */
/* PARA CAMBIAR TAMAÑO ICONOS: ajusta width/height aquí */
.cta img {
  width: 50px;
  /* Icono TikTok (el primero) */
  height: auto;
}

/* El segundo icono (flecha) usa mismo tamaño por defecto.
   Si quieres tamaño distinto para la flecha, usa:
   .cta img:last-child { width: 19px; height: 19px; } */

/* Estados interactivos del CTA */
.cta:hover {
  opacity: .92;
}

.cta:active {
  transform: scale(.985);
}

.cta:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 2px;
}

/* Caption: texto centrado pequeño muted (no usado actualmente) */
.caption {
  font-size: 10px;
  text-align: center;
  color: var(--muted);
}

/* ============================================================
   SECCIÓN: PREGUNTA DEL DÍA (.card.question)
============================================================ */
/* Tarjeta base: fondo card, borde, radio 18px, padding 20px */
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* Cabecera pregunta: label acento a la izq, fecha a la der */
.question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Texto de la pregunta: comilla dorada + párrafo en serif */
.question-text {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: var(--serif);
}

.quote-mark {
  font-size: 39px;
  line-height: 1;
  color: var(--gold);
}

.question-text p {
  flex: 1;
  font-size: 24px;
  line-height: 1.28;
}

/* Invitación a responder: icono mensaje + texto muted */
.invite {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invite p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================
   SECCIÓN: DIARIO DE LECTURA (.journal)
============================================================ */
.journal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Streak (racha) --- */
.streak {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Resumen streak: info a la izq, botón "Hoy ya leí" a la der */
.streak-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.streak-count {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 28px;
  white-space: nowrap;
}

/* Semana: 7 items flex distribuidos equitativamente */
.week {
  display: flex;
  justify-content: space-between;
}

.week li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.week span {
  font-size: 10px;
  color: var(--muted);
}

/* Punto de día: círculo ciruela 34px */
.dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--plum);
}

/* Día actual: borde melocotón 3px */
.dot--today {
  border: 3px solid var(--peach);
}

/* Día sin visita: círculo apagado, check oculto */
.dot--empty {
  background: var(--lilac);
}

.dot--empty img {
  opacity: 0;
}

/* Mensaje motivacional bajo la semana */
.motivation {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* ============================================================
   INSIGNIAS (.badges)
============================================================ */
.badges {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.badges-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.badges-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
}

.count {
  font-size: 10px;
  color: var(--muted);
}

/* Lista de insignias: flex horizontal, gap 8px */
.badge-list {
  display: flex;
  gap: 8px;
}

/* Insignia individual: columna centrada, flex:1 para igual ancho */
.badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* Permite encoger si espacio limitado */
}

/* Medalla: círculo 44px fondo lila con icono centrado */
.medal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lilac);
  border: 1px solid var(--lilac);
}

.badge strong {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.badge small {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

/* Estado bloqueado: fondo bg, borde line, texto muted */
.badge--locked .medal {
  background: var(--bg);
  border-color: var(--line);
}

.badge--locked strong {
  color: var(--muted);
}

/* ============================================================
   ÁNIMO / MASCOTA (.cheer)
============================================================ */
.cheer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Burbuja a la derecha, mascota a su derecha */
  gap: 10px;
}

/* Burbuja de diálogo: fondo lila, radio asimétrico (pico abajo izq) */
.bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 204px;
  padding: 12px;
  background: var(--lilac);
  border-radius: 12px 12px 2px 12px;
}

.bubble-title {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--plum);
}

.bubble-sub {
  font-size: 10px;
  color: var(--muted);
}

/* ============================================================
   FOOTER / FIRMA
============================================================ */
.signature {
  font-size: 10px;
  text-align: center;
  color: var(--muted);
}