/* =====================================================================
   ACTIVIDADES: estilos de la página de actividades, «Respira con Nubbit»,
   «5-4-3-2-1» y «Memoria de emociones». Los colores vienen de tokens.css.
   Todas las animaciones son suaves y se apagan con "reducir movimiento".

   ¿PARA QUÉ SIRVE ESTE ARCHIVO?
   Tiene solo lo propio de las actividades: las tarjetas de la lista de
   actividades, la frase de Nubbit, la guía de respiración, los círculos
   del 5-4-3-2-1 y las cartas del juego de memoria. Lo común (botones,
   tarjetas, campos, Nubbit) está en componentes.css.

   ¿QUÉ PÁGINAS LO USAN?
   actividades.html, respirar.html, anclaje.html (el 5-4-3-2-1) y
   memoria.html. Se carga el ÚLTIMO, después de tokens.css, base.css y
   componentes.css. Varias piezas las crea JavaScript al abrir la página
   (js/paginas/respirar.js, anclaje.js y memoria.js).

   ÍNDICE DE SECCIONES
   1. Página de actividades (actividades.html): tarjetas, duración,
      enlace "volver" y frase de Nubbit.
   2. Opciones de ritmo y duración (respirar.html).
   3. Respira con Nubbit (respirar.html).
   4. 5-4-3-2-1 (anclaje.html).
   5. Memoria de emociones (memoria.html).
   6. Reducir movimiento (accesibilidad).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Página de actividades
   --------------------------------------------------------------------- */
/* Lista <ul> con las cuatro tarjetas de actividades.html (Respira, 5-4-3-2-1, Memoria e Ideas para escribir).
   GRID (cuadrícula): ordena a los hijos en filas y columnas. */
.tarjetas-actividades {
  display: grid; /* cuadrícula */
  /* repeat(auto-fill, ...) crea tantas columnas como quepan; minmax(15rem, 1fr) = cada columna mide mínimo
     15rem (240 px) y como máximo una parte igual del espacio libre (fr = fracción) */
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--espacio-3); /* var() lee una variable de tokens.css: 16 px entre tarjetas */
  margin: 0 0 var(--espacio-4); /* tres valores (arriba, lados, abajo): solo 24 px abajo */
  padding: 0; /* quita la sangría que el navegador pone a las listas */
  list-style: none; /* sin viñetas */
} /* fin de la regla .tarjetas-actividades */

/* Cada tarjeta de actividad (<li class="tarjeta-actividad">): ícono, título, duración, descripción y botón.
   FLEX (caja flexible): acomoda a los hijos en una fila o, como aquí, en una columna. */
.tarjeta-actividad {
  display: flex; /* caja flexible */
  flex-direction: column; /* los hijos van uno debajo del otro */
  gap: var(--espacio-2); /* 8 px entre ellos */
  padding: var(--espacio-4); /* 24 px de relleno en todos los lados */
  border: 1px solid var(--color-borde); /* borde fino */
  border-radius: var(--radio-grande); /* esquinas bien redondeadas */
  background: var(--color-superficie); /* fondo blanco (u oscuro de noche) */
  box-shadow: var(--sombra); /* sombra suave */
  /* TRANSICIÓN: el levantarse y la sombra del :hover (regla de abajo) ocurren en 0,25 s y no de golpe */
  transition: transform var(--transicion), box-shadow var(--transicion);
} /* fin de la regla .tarjeta-actividad */

/* Tarjeta con el mouse encima. :hover es una PSEUDO-CLASE: elige el elemento según su estado
   (aquí, "el puntero está encima"). */
.tarjeta-actividad:hover {
  transform: translateY(-3px); /* sube 3 px: parece que se levanta */
  box-shadow: var(--sombra-elevada); /* sombra más grande: flota */
} /* fin de la regla .tarjeta-actividad:hover */

/* Título de cada actividad ("Respira con Nubbit", "Memoria de emociones"...) */
.tarjeta-actividad h2 {
  margin: var(--espacio-2) 0 0; /* 8 px arriba y nada abajo (el gap ya separa) */
  font-size: var(--texto-grande); /* 20 px */
} /* fin de la regla .tarjeta-actividad h2 */

/* Descripción de cada actividad */
.tarjeta-actividad p {
  margin: 0; /* sin márgenes: el gap de la tarjeta da el espacio */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .tarjeta-actividad p */

/* Botón de cada tarjeta ("Respirar ahora", "Jugar a la memoria"...) */
.tarjeta-actividad .boton {
  align-self: flex-start; /* no se estira a todo el ancho: mide lo que su texto */
  margin-top: auto; /* margen automático arriba: empuja el botón al fondo y todos quedan alineados */
} /* fin de la regla .tarjeta-actividad .boton */

/* Cuánto dura (con un relojito) */
/* ("De 1 a 3 minutos", "Unos 2 minutos"... en cada tarjeta de actividades.html) */
.etiqueta-duracion {
  display: flex; /* reloj y texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-1); /* 4 px entre ellos */
  font-size: var(--texto-pequeno); /* 14 px */
  font-weight: 700; /* negrita */
  color: var(--color-primario) !important; /* violeta; !important le gana al gris de ".tarjeta-actividad p" */
} /* fin de la regla .etiqueta-duracion */

/* "Volver a Actividades" en cada actividad */
/* (enlace "Actividades" con flecha arriba de respirar.html, anclaje.html y memoria.html.
   .boton.volver, sin espacio = un elemento que tiene LAS DOS clases) */
.boton.volver {
  min-height: 44px; /* más bajo que los botones normales (48 px), pero con el mínimo cómodo para tocar */
  padding: 0 var(--espacio-3) 0 var(--espacio-2); /* arriba 0, derecha 16 px, abajo 0, izquierda 8 px */
  font-size: var(--texto-pequeno); /* letra pequeña: es una acción secundaria */
} /* fin de la regla .boton.volver */

/* Frase de Nubbit (también se usa en el inicio) */
/* (tarjeta "Nubbit dice" arriba de actividades.html: Nubbit a la izquierda y la frase a la derecha) */
.frase-nubbit {
  display: flex; /* Nubbit y el texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-3); /* 16 px entre ellos */
} /* fin de la regla .frase-nubbit (Nubbit y frase en fila) */

/* La misma tarjeta "Nubbit dice": relleno y un brillo lila detrás de Nubbit */
.frase-nubbit {
  padding: var(--espacio-4) var(--espacio-5); /* 24 px arriba y abajo, 40 px a los lados */
  /* Dos fondos superpuestos (el primero queda encima): un degradado RADIAL (circular) lila de 22rem x 12rem
     centrado en el borde izquierdo, que se vuelve transparente; y debajo, el color normal de las tarjetas. */
  background:
    /* capa de encima: brillo lila de 22rem x 12rem en el borde izquierdo (0% 50%) */
    radial-gradient(22rem 12rem at 0% 50%, var(--color-primario-suave), transparent 70%),
    var(--color-superficie); /* capa de abajo: el color normal de las tarjetas */
} /* fin de la regla .frase-nubbit (relleno y brillo lila) */

/* Lugar donde js/nubbit.js dibuja a Nubbit dentro de esa tarjeta */
.frase-nubbit__nubbit {
  width: 112px; /* ancho del dibujo */
  flex-shrink: 0; /* no se encoge aunque la frase sea larga */
} /* fin de la regla .frase-nubbit__nubbit */

/* MEDIA QUERY (@media): las reglas de adentro solo se aplican si se cumple la condición. max-width: 480px =
   pantallas de 480 px de ancho o MENOS (celulares). Así la página se adapta a cada pantalla (diseño adaptable). */
@media (max-width: 480px) {
  /* En el celular, la tarjeta "Nubbit dice" lleva menos relleno */
  .frase-nubbit {
    padding: var(--espacio-4); /* 24 px en todos los lados */
  } /* fin de la regla .frase-nubbit (celular) */

  /* ...y Nubbit se dibuja más pequeño */
  .frase-nubbit__nubbit {
    width: 80px; /* ancho del dibujo en el celular */
  } /* fin de la regla .frase-nubbit__nubbit (celular) */
} /* fin del @media (max-width: 480px): ajustes del celular */

/* Título "Nubbit dice" de esa tarjeta */
.frase-nubbit h2 {
  margin: 0 0 var(--espacio-1); /* solo 4 px debajo */
  font-size: var(--texto-normal); /* tamaño normal: la protagonista es la frase */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .frase-nubbit h2 */

/* La frase de Nubbit (cambia con el botón "Otra frase") */
.frase-nubbit__texto {
  margin: 0 0 var(--espacio-3); /* 16 px debajo, antes del botón */
  font-family: var(--fuente-titulos); /* letra redondeada */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 750; /* bien negrita */
  line-height: 1.35; /* líneas un poco juntas */
} /* fin de la regla .frase-nubbit__texto */

/* ---------------------------------------------------------------------
   Opciones (ritmo y duración)
   --------------------------------------------------------------------- */
/* Formulario de respirar.html con los grupos "Ritmo" y "Duración" (las opciones las crea respirar.js) */
.opciones-actividad {
  display: grid; /* cuadrícula */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); /* 1 o 2 columnas de mínimo 14rem, según quepan */
  gap: var(--espacio-3); /* 16 px entre los grupos */
  margin-bottom: var(--espacio-3); /* 16 px debajo */
} /* fin de la regla .opciones-actividad */

/* Cada grupo de opciones (<fieldset>): las opciones una debajo de otra */
.opciones-actividad fieldset {
  display: grid; /* cuadrícula de una sola columna */
  gap: var(--espacio-2); /* 8 px entre opciones */
} /* fin de la regla .opciones-actividad fieldset */

/* ---------------------------------------------------------------------
   Respira con Nubbit
   --------------------------------------------------------------------- */
/* Recuadro de la guía de respiración (respirar.html): círculo con Nubbit, fase, cuenta regresiva y ciclo */
.respiracion {
  display: grid; /* cuadrícula de una columna */
  place-items: center; /* todo centrado a lo ancho y a lo alto */
  gap: var(--espacio-2); /* 8 px entre los elementos */
  margin-bottom: var(--espacio-4); /* 24 px debajo */
  padding: var(--espacio-5) var(--espacio-3) var(--espacio-4); /* 40 px arriba, 16 px a los lados, 24 abajo */
  border-radius: var(--radio-grande); /* esquinas redondeadas */
  /* degradado LINEAL de arriba hacia abajo: el mismo cielo de la escena de Nubbit (lila arriba, durazno abajo) */
  background: linear-gradient(var(--escena-cielo-arriba), var(--escena-cielo-abajo));
  overflow: hidden; /* lo que se salga del recuadro (el círculo al crecer) no se ve */
} /* fin de la regla .respiracion */

/* El círculo que crece al inhalar y se encoge al exhalar, con Nubbit adentro */
.respiracion__circulo {
  display: grid; /* cuadrícula para centrar a Nubbit */
  place-items: center; /* Nubbit al centro */
  width: min(250px, 68vw); /* min() elige el menor: 250 px, o el 68 % del ancho de la ventana en celulares */
  aspect-ratio: 1; /* proporción 1:1: el alto igual al ancho (círculo, no óvalo) */
  border-radius: 50%; /* esquinas al 50 %: forma de círculo */
  /* degradado radial: blanco en el centro que pasa a lila transparente hacia el borde (parece una luz) */
  background: radial-gradient(circle, rgb(255 255 255 / 0.95) 0 45%, rgb(185 167 245 / 0.45) 70%, rgb(185 167 245 / 0.15));
  box-shadow: 0 0 0 14px rgb(185 167 245 / 0.2); /* sombra sin desenfoque de 14 px: un anillo lila alrededor */
  /* js/paginas/respirar.js cambia estas dos variables en cada fase */
  /* --escala-respiracion: 1.12 al inhalar y 0.78 al exhalar; --duracion-fase: los segundos de la fase.
     var(--nombre, respaldo): mientras la variable no exista (antes de empezar), usa el valor de respaldo. */
  transform: scale(var(--escala-respiracion, 0.8)); /* scale() agranda o achica: 0.8 = 80 % al comienzo */
  transition: transform var(--duracion-fase, 1s) ease-in-out; /* crece o se encoge durante toda la fase */
} /* fin de la regla .respiracion__circulo */

/* Lugar donde js/nubbit.js dibuja a Nubbit dentro del círculo */
.respiracion__nubbit {
  width: 62%; /* 62 % del ancho del círculo */
} /* fin de la regla .respiracion__nubbit */

/* Texto de la fase ("Inhala", "Sostén el aire", "Exhala"...); el lector de pantalla lo anuncia (aria-live) */
.respiracion__fase {
  min-height: 2.4rem; /* alto reservado: el recuadro no "salta" cuando cambia el texto */
  margin: var(--espacio-3) 0 0; /* 16 px arriba */
  font-size: 1.6rem; /* letra grande (unos 26 px) */
  font-weight: 800; /* extra negrita */
  text-align: center; /* centrado */
} /* fin de la regla .respiracion__fase */

/* Cuenta regresiva de los segundos de la fase (4, 3, 2, 1), en grande y violeta */
.respiracion__cuenta {
  min-height: 3rem; /* alto reservado aunque esté vacía */
  margin: 0; /* sin márgenes */
  color: var(--color-primario); /* violeta */
  font-size: 2.4rem; /* número muy grande (unos 38 px) */
  font-weight: 800; /* extra negrita */
  line-height: 1; /* línea del alto justo de la letra */
} /* fin de la regla .respiracion__cuenta */

/* Avance de la sesión ("Ciclo 2 de 6") */
.respiracion__progreso {
  margin: 0; /* sin márgenes */
  color: var(--color-texto-suave); /* gris violeta */
} /* fin de la regla .respiracion__progreso */

/* ---------------------------------------------------------------------
   5-4-3-2-1
   --------------------------------------------------------------------- */
/* Fila de indicadores de los pasos (5, 4, 3, 2, 1) arriba de anclaje.html (la dibuja anclaje.js) */
.anclaje__pasos {
  display: flex; /* en fila */
  justify-content: center; /* centrados */
  gap: var(--espacio-2); /* 8 px entre ellos */
  margin: 0 0 var(--espacio-4); /* 24 px debajo */
  padding: 0; /* sin la sangría de las listas */
  list-style: none; /* sin viñetas */
} /* fin de la regla .anclaje__pasos */

/* Cada indicador: un círculo con el número de cosas que pide ese paso */
.anclaje__paso {
  display: grid; /* cuadrícula para centrar el número */
  place-items: center; /* número al centro */
  width: 2.6rem; /* ancho (unos 42 px) */
  height: 2.6rem; /* alto igual al ancho: círculo */
  border: 2px solid var(--color-borde-control); /* borde gris violeta */
  border-radius: 50%; /* forma de círculo */
  font-weight: 800; /* número bien negrita */
} /* fin de la regla .anclaje__paso */

/* Pasos ya hechos: círculo relleno de violeta */
.anclaje__paso--hecho {
  border-color: var(--color-primario); /* borde violeta */
  background: var(--color-primario); /* relleno violeta */
  color: var(--color-sobre-primario); /* número blanco */
} /* fin de la regla .anclaje__paso--hecho */

/* El paso en el que vas: anclaje.js le pone aria-current="step" (el lector de pantalla dice "paso actual") */
.anclaje__paso[aria-current="step"] {
  border-width: 3px; /* borde más grueso */
  border-color: var(--color-primario); /* violeta */
  box-shadow: 0 0 0 3px var(--color-superficie-suave); /* anillo lila claro alrededor */
} /* fin de la regla .anclaje__paso[aria-current="step"] */

/* Grupo de círculos para tocar: uno por cada cosa que nombras en el paso */
.anclaje__circulos {
  display: flex; /* en fila */
  flex-wrap: wrap; /* si no caben, pasan a otra línea */
  justify-content: center; /* centrados */
  gap: var(--espacio-3); /* 16 px entre círculos */
  margin: var(--espacio-4) 0; /* 24 px arriba y abajo */
} /* fin de la regla .anclaje__circulos */

/* Cada círculo para tocar (<button class="circulo-sentido">): muestra su número y, al tocarlo, un ✓ */
.circulo-sentido {
  width: 64px; /* tamaño cómodo para el dedo */
  height: 64px; /* alto igual: círculo */
  border: 3px dashed var(--color-borde-control); /* borde de rayitas: "falta por tocar" */
  border-radius: 50%; /* forma de círculo */
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-texto); /* número oscuro */
  font: inherit; /* hereda la letra de la página (los botones traen otra por defecto) */
  font-size: 1.4rem; /* número grande */
  font-weight: 800; /* extra negrita */
  cursor: pointer; /* el puntero se vuelve una manito: se puede tocar */
  transition: transform 0.2s ease, background-color 0.2s ease; /* crecer y colorearse suave (0,2 s) */
} /* fin de la regla .circulo-sentido */

/* Círculo ya tocado (aria-pressed="true": el lector de pantalla dice "presionado") */
.circulo-sentido[aria-pressed="true"] {
  border-style: solid; /* borde continuo */
  border-color: var(--color-primario); /* violeta */
  background: var(--color-primario); /* relleno violeta */
  color: var(--color-sobre-primario); /* ✓ blanco */
  transform: scale(1.06); /* crece un poquito (6 %) */
} /* fin de la regla .circulo-sentido[aria-pressed="true"] */

/* ---------------------------------------------------------------------
   Memoria de emociones
   --------------------------------------------------------------------- */
/* Tablero de memoria.html (<ul class="memoria">); las cartas las crea js/paginas/memoria.js */
.memoria {
  display: grid; /* cuadrícula */
  /* 2 columnas en celulares: así los mensajes se leen en líneas más largas */
  grid-template-columns: repeat(2, 1fr); /* dos columnas iguales (1fr cada una) */
  grid-auto-rows: 1fr; /* todas las filas igual de altas: nada salta al voltear una carta */
  gap: var(--espacio-2); /* 8 px entre cartas */
  margin: 0 0 var(--espacio-3); /* 16 px debajo */
  padding: 0; /* sin la sangría de las listas */
  list-style: none; /* sin viñetas */
} /* fin de la regla .memoria */

/* Desde 480 px de ancho: el tablero pasa a 3 columnas */
@media (min-width: 480px) {
  /* El tablero de cartas */
  .memoria {
    grid-template-columns: repeat(3, 1fr); /* tres columnas iguales */
  } /* fin de la regla .memoria (3 columnas) */
} /* fin del @media (min-width: 480px): tablero de 3 columnas */

/* Desde 640 px de ancho: 4 columnas */
@media (min-width: 640px) {
  /* El tablero de cartas */
  .memoria {
    grid-template-columns: repeat(4, 1fr); /* cuatro columnas iguales */
  } /* fin de la regla .memoria (4 columnas) */
} /* fin del @media (min-width: 640px): tablero de 4 columnas */

/* Cada carta (<button class="carta">): boca abajo es violeta, con el ícono de Nubbit */
.carta {
  display: grid; /* cuadrícula: sus dos caras se apilan en la misma celda (ver más abajo) */
  place-items: center; /* contenido centrado */
  width: 100%; /* ocupa toda su celda */
  height: 100%; /* llena la fila aunque su texto sea corto */
  min-height: 7rem; /* alto mínimo (112 px) */
  padding: var(--espacio-2); /* 8 px de relleno */
  border: 2px solid var(--color-primario); /* borde violeta */
  border-radius: var(--radio); /* esquinas redondeadas */
  background: var(--color-primario); /* violeta: el reverso de la carta */
  color: var(--color-sobre-primario); /* texto blanco */
  font: inherit; /* la letra de la página */
  font-weight: 700; /* negrita */
  text-align: center; /* texto centrado */
  cursor: pointer; /* manito: se puede tocar */
  transition: background-color 0.25s ease, transform 0.25s ease; /* voltear con suavidad (0,25 s) */
} /* fin de la regla .carta */

/* Las dos caras ocupan la misma celda; "visibility" oculta una sin cambiar el tamaño */
/* (reverso = ícono de Nubbit; frente = la emoción o su mensaje) */
.carta__reverso,
.carta__frente { /* y el frente de la carta (la misma regla vale para las dos caras) */
  grid-area: 1 / 1; /* fila 1 y columna 1: las dos caras en el mismo lugar, una encima de la otra */
} /* fin de la regla .carta__reverso, .carta__frente */

/* El reverso: el ícono de Nubbit (<img>) */
.carta__reverso {
  width: 44px; /* ancho del ícono */
  height: 44px; /* alto del ícono */
} /* fin de la regla .carta__reverso */

/* Se ocultan: el frente de las cartas boca abajo y el reverso de las cartas boca arriba */
.carta__frente,
.carta--boca-arriba .carta__reverso { /* y el reverso de las cartas que ya están boca arriba */
  visibility: hidden; /* invisible, pero sigue ocupando su lugar (display:none lo quitaría) */
} /* fin de la regla .carta__frente, .carta--boca-arriba .carta__reverso */

/* El frente de una carta boca arriba (memoria.js le agrega la clase carta--boca-arriba al voltearla) */
.carta--boca-arriba .carta__frente {
  visibility: visible; /* se muestra el texto */
} /* fin de la regla .carta--boca-arriba .carta__frente */

/* La carta volteada: fondo blanco y se levanta un poquito */
.carta--boca-arriba {
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-texto); /* texto oscuro */
  transform: translateY(-2px); /* sube 2 px */
} /* fin de la regla .carta--boca-arriba */

/* Carta con el nombre de una emoción (memoria.js le pone carta--emocion o carta--mensaje según su tipo) */
.carta--emocion .carta__frente {
  font-size: 1.15rem; /* letra más grande: es una sola palabra */
} /* fin de la regla .carta--emocion .carta__frente */

/* Carta con el mensaje de la emoción (un texto más largo) */
.carta--mensaje .carta__frente {
  font-size: var(--texto-pequeno); /* letra pequeña para que quepa */
  font-weight: 600; /* seminegrita */
  line-height: 1.35; /* líneas un poco más juntas */
} /* fin de la regla .carta--mensaje .carta__frente */

/* Pareja encontrada: queda boca arriba, con borde verde, y ya no se puede tocar */
.carta--encontrada {
  border-style: solid; /* borde continuo */
  border-color: var(--nivel-4); /* verde */
  background: var(--color-superficie-suave); /* fondo lila muy claro */
  color: var(--color-texto); /* texto oscuro */
  cursor: default; /* puntero normal: ya no es para tocar */
  transform: none; /* vuelve a su lugar */
} /* fin de la regla .carta--encontrada */

/* Texto "Parejas encontradas: X de Y" arriba del tablero */
.memoria__progreso {
  font-weight: 700; /* negrita */
} /* fin de la regla .memoria__progreso */

/* Sin animaciones para quien pidió reducir el movimiento */
/* prefers-reduced-motion: reduce = la persona activó "reducir movimiento" en su celular o computador.
   base.css ya acorta todas las transiciones; aquí, además, se quitan del todo el crecimiento del círculo
   y el movimiento de las cartas y los círculos (la fase escrita y la cuenta siguen guiando). */
@media (prefers-reduced-motion: reduce) {
  /* El círculo de la respiración queda quieto */
  .respiracion__circulo {
    transform: none !important; /* no crece ni se encoge */
    transition: none !important; /* sin transición */
  } /* fin de la regla .respiracion__circulo (quieto) */

  /* Los círculos del 5-4-3-2-1 y las cartas de la memoria no se mueven */
  .circulo-sentido,
  .carta { /* y las cartas de la memoria (misma regla) */
    transition: none; /* sin transición */
    transform: none !important; /* ni crecen ni se levantan */
  } /* fin de la regla .circulo-sentido, .carta */
} /* fin del @media (prefers-reduced-motion: reduce) */