/* =====================================================================
   COMPONENTES: botones, formularios, tarjetas, escala emocional, Nubbit,
   historial, progreso y diálogos. Los colores vienen de tokens.css.

   ¿PARA QUÉ SIRVE ESTE ARCHIVO?
   Reúne las PIEZAS REUTILIZABLES de toda la app (los "componentes"):
   cada clase dibuja una pieza que se repite en muchas pantallas, como un
   botón, una tarjeta, un campo de formulario, las caritas de la escala
   emocional o el dibujo de Nubbit. Como todas las páginas usan las mismas
   clases, un botón "Guardar" se ve igual en todas partes y, si se cambia
   aquí, cambia en todas las páginas a la vez. También guarda el diseño de
   las pantallas privadas que no tienen un CSS propio: inicio, registro,
   historial, progreso y ajustes. (La tabla de piezas está en
   docs/identidad-visual.md.)

   ¿CÓMO SE RELACIONA CON LOS DEMÁS CSS?
   - tokens.css guarda los VALORES (colores, tamaños de letra, espacios,
     bordes y sombras). Aquí se leen con var(--nombre): por eso este
     archivo casi no escribe colores sueltos y la apariencia nocturna
     funciona sola, sin repetir reglas.
   - base.css da el aspecto general de toda página (letra, títulos,
     enlaces, foco, íconos, cabecera, menú y pie). Se carga ANTES que este
     archivo, así que aquí se ajusta lo que haga falta (por ejemplo, el
     margen de los h2 dentro de las tarjetas).
   - publico.css tiene lo propio de las páginas públicas (bienvenida,
     entrar, crear cuenta, recuperar, apoyo, privacidad y sin conexión).
   - actividades.css tiene lo propio de las actividades (la lista de
     actividades, respirar, 5-4-3-2-1 y memoria).
   Esos dos últimos se cargan DESPUÉS de este archivo: pueden completar o
   cambiar una pieza de aquí solo en sus páginas (por ejemplo, publico.css
   agrega .insignia--grande y .boton--urgente).

   ¿QUÉ PÁGINAS LO USAN?
   TODAS (las 16 páginas .html). En el <head> va en tercer lugar:
   tokens.css, base.css y luego componentes.css. Después:
   - index, entrar, crear-cuenta, recuperar, apoyo, privacidad y offline
     cargan además publico.css;
   - actividades, respirar, anclaje y memoria cargan además actividades.css;
   - inicio, registrar, historial, progreso y ajustes no cargan nada más:
     su diseño propio está aquí.

   ÍNDICE DE SECCIONES
   1. Botones y fila de botones (.acciones).
   2. Tarjetas y avisos: tarjeta, insignia, etiqueta, grilla, mensaje
      vacío, aviso, "pendiente" y mensajes de estado.
   3. Formularios: campos, ayudas, errores, cuadros para escribir y botón
      "Mostrar" de la contraseña.
   4. Interruptor (casilla con forma de interruptor).
   5. Control segmentado, casillas con texto, contador de caracteres,
      <fieldset> y resumen de errores.
   6. Escala emocional (las cinco caritas del registro).
   7. Chips de emociones.
   8. Escena: el mundo de Nubbit.
   9. Nubbit (el dibujo SVG, sus colores y accesorios).
   10. Inicio (panel, registro rápido y accesos) y piezas que comparten
       otras pantallas: pasos del registro, ideas para escribir, secciones
       que se abren y se cierran, zona de cuidado y barra de avance.
   11. Historial (calendario y lista de registros).
   12. Progreso (etapas de Nubbit, jardín y armario).
   13. Código de recuperación.
   14. Diálogos (confirmaciones).
   15. Páginas informativas (apoyo y privacidad).

   CÓMO LEER UNA REGLA CSS
   selector { propiedad: valor; }  El SELECTOR dice a qué elementos se
   aplica (.clase, #id o etiqueta); cada DECLARACIÓN "propiedad: valor;"
   cambia algo de su aspecto. var(--nombre) lee una variable de tokens.css.
   Los nombres de clase siguen el estilo BEM: .bloque es la pieza (.boton),
   .bloque__elemento es una parte de la pieza (.tarjeta__titulo) y
   .bloque--variante es otra versión de la pieza (.boton--principal).
   Medidas: 1rem = 16 px (la letra base); 1em = el tamaño de la letra del
   propio elemento.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Botones (mínimo 44 px de alto: fáciles de tocar en el celular)
   --------------------------------------------------------------------- */
/* Botón base: TODOS los botones de la app llevan esta clase, sean <button> o enlaces <a> con forma de
   botón. Se combina con una variante que le da el color, por ejemplo:
   class="boton boton--principal boton--grande". (44 px es el tamaño mínimo para tocar que recomiendan
   las pautas de accesibilidad; casi todos los botones de aquí miden 48 px o más.)
   FLEX (caja flexible): acomoda a sus hijos en una fila o en una columna y reparte el espacio. */
.boton {
  display: inline-flex; /* caja FLEX en línea: se ubica como una palabra y pone ícono y texto en fila */
  align-items: center; /* centra el ícono y el texto a lo alto */
  justify-content: center; /* y a lo ancho (se nota en los botones anchos, .boton--ancho) */
  gap: var(--espacio-2); /* var() lee una variable de tokens.css: 8 px entre el ícono y el texto */
  min-height: 48px; /* alto mínimo: fácil de tocar con el dedo */
  padding: var(--espacio-2) var(--espacio-4); /* relleno: 8 px arriba y abajo, 24 px a los lados */
  border: 2px solid transparent; /* borde invisible: todos miden igual, tengan borde de color o no */
  border-radius: 999px; /* radio enorme: forma de "pastilla" (extremos redondos) */
  font: inherit; /* los botones no heredan la letra de la página: inherit = "usa la del contenedor" */
  font-weight: 700; /* negrita */
  line-height: 1.25; /* líneas más juntas que en el texto normal: si el texto baja, el botón no crece tanto */
  text-align: center; /* texto centrado aunque ocupe dos líneas */
  text-decoration: none; /* sin subrayado (para los enlaces <a> con forma de botón) */
  cursor: pointer; /* puntero de "manito": se nota que se puede tocar */
  /* TRANSICIÓN: el movimiento (transform), el fondo, la sombra y el color cambian poco a poco (0,15 s) */
  transition: transform var(--transicion-rapida), background-color var(--transicion-rapida),
    box-shadow var(--transicion-rapida), color var(--transicion-rapida); /* sigue la lista: sombra y color del texto */
} /* fin de la regla .boton */

/* Al pasar el mouse el botón se levanta un poquito; al presionarlo, se hunde */
/* :hover es una PSEUDO-CLASE: elige un elemento según su estado (aquí, "el mouse está encima").
   :not([disabled]) = "que NO tenga el atributo disabled": un botón desactivado no se mueve. */
.boton:not([disabled]):hover {
  transform: translateY(-1px); /* TRANSFORM mueve o cambia el tamaño sin empujar a los vecinos: sube 1 px */
} /* fin de la regla .boton:not([disabled]):hover */

/* :active = mientras se mantiene presionado (con el dedo o con el clic) */
.boton:not([disabled]):active {
  transform: translateY(0) scale(0.98); /* vuelve a su altura y se achica al 98 %: parece que se hunde */
} /* fin de la regla .boton:not([disabled]):active */

/* Íconos dentro de un botón (la flecha de "Anterior", la llave de "Generar código nuevo"...).
   El espacio entre ".boton" y ".icono" significa "que está DENTRO de". */
.boton .icono {
  width: 1.25em; /* 1,25 veces la letra del botón: el ícono crece con el texto */
  height: 1.25em; /* alto igual al ancho: cuadrado */
} /* fin de la regla .boton .icono */

/* Botón principal: violeta relleno, para la acción más importante de cada pantalla ("Entrar", "Crear mi
   cuenta", "Guardar", "Empezar"). Mejor uno solo por pantalla (ver docs/identidad-visual.md). */
.boton--principal {
  background: var(--color-primario); /* fondo violeta de la marca */
  color: var(--color-sobre-primario); /* texto blanco (oscuro en la apariencia nocturna) */
  box-shadow: var(--sombra-boton); /* sombra violeta debajo: el botón resalta */
} /* fin de la regla .boton--principal */

/* Botón principal con el mouse encima.
   ESPECIFICIDAD: si dos reglas le dan valores distintos a lo mismo, gana la más específica (un #id pesa
   más que una .clase o una :pseudo-clase, y estas más que una etiqueta); si pesan igual, gana la que va
   DESPUÉS. "a:hover" de base.css (etiqueta + pseudo-clase) le gana a ".boton--principal" (una clase sola),
   pero no a esta regla (clase + pseudo-clase). */
.boton--principal:hover {
  background: var(--color-primario-hover); /* violeta más oscuro */
  /* Se repite el color del texto: en los enlaces <a class="boton">, sin esta línea ganaría a:hover y el
     texto quedaría del mismo violeta oscuro que el fondo (no se leería) */
  color: var(--color-sobre-primario);
} /* fin de la regla .boton--principal:hover */

/* Botón secundario: blanco con borde violeta, para la segunda opción ("Ya tengo cuenta", "Cancelar",
   "Copiar código", "Anterior" y "Siguiente" del historial...) */
.boton--secundario {
  background: var(--color-superficie); /* fondo blanco (violeta muy oscuro de noche) */
  border-color: var(--color-primario); /* el borde invisible de .boton se pinta de violeta */
  color: var(--color-primario); /* texto violeta */
} /* fin de la regla .boton--secundario */

/* Botón secundario con el mouse encima */
.boton--secundario:hover {
  background: var(--color-primario-suave); /* se rellena de lila */
  color: var(--color-primario); /* sigue violeta (en los enlaces <a>, le gana a a:hover de base.css) */
} /* fin de la regla .boton--secundario:hover */

/* Botón discreto: fondo lila sin borde (acciones terciarias) */
/* ("Volver a Noosfera" en apoyo y privacidad, "Cómo cuidamos tus datos" en la bienvenida, "Otra frase"
   en actividades y el enlace para volver a las actividades) */
.boton--suave {
  background: var(--color-primario-suave); /* fondo lila */
  color: var(--color-primario); /* texto violeta */
} /* fin de la regla .boton--suave */

/* Botón suave con el mouse encima */
.boton--suave:hover {
  color: var(--color-primario-hover); /* el texto pasa a un violeta más oscuro */
} /* fin de la regla .boton--suave:hover */

/* Botón grande para la acción más importante de una pantalla */
/* (el botón de enviar de entrar, crear cuenta, recuperar y el registro, los de la bienvenida, "Intentar
   de nuevo" sin conexión y "Llamar al 123" en apoyo). Solo cambia el tamaño: el color lo pone otra
   variante (por ejemplo, boton--principal). */
.boton--grande {
  min-height: 56px; /* más alto: 56 px */
  padding-inline: var(--espacio-5); /* 40 px a la izquierda y a la derecha (inline = los lados) */
  font-size: 1.0625rem; /* 17 px: letra un poco más grande que la normal (16 px) */
} /* fin de la regla .boton--grande */

/* Botón de peligro: rojo relleno, para lo que no se puede deshacer ("Eliminar mi cuenta" y "Eliminar
   para siempre" en ajustes, "Borrar registro" en el diálogo del historial) */
.boton--peligro {
  background: var(--color-error); /* fondo rojo */
  color: var(--color-superficie); /* texto blanco (de noche el rojo es claro y el texto, oscuro) */
} /* fin de la regla .boton--peligro */

/* Peligro suave: solo borde y texto rojos. Es el "Borrar" de cada registro del historial (lo crea
   js/paginas/historial.js); el rojo relleno queda para la confirmación del diálogo. */
.boton--peligro-suave {
  background: transparent; /* sin fondo */
  border-color: var(--color-error); /* borde rojo */
  color: var(--color-error); /* texto rojo */
  min-height: 44px; /* un poco más bajo que los demás (44 px, el mínimo cómodo para tocar) */
  padding: var(--espacio-1) var(--espacio-3); /* 4 px arriba y abajo, 16 px a los lados: más compacto */
} /* fin de la regla .boton--peligro-suave */

/* Botón desactivado (con el atributo disabled): "Guardar" mientras carga el registro, "Anterior" y
   "Siguiente" mientras carga el mes (y "Siguiente" en el mes actual) o cualquier botón mientras se envía
   un formulario (marcarOcupado en js/formularios.js). [disabled] = selector de ATRIBUTO: elige los
   elementos que tienen ese atributo. */
.boton[disabled] {
  opacity: 0.6; /* opacidad al 60 %: se ve apagado (1 = normal, 0 = invisible) */
  cursor: not-allowed; /* puntero de "prohibido" */
} /* fin de la regla .boton[disabled] */

/* Botón que ocupa todo el ancho: el de enviar en entrar, crear cuenta, recuperar y el registro */
.boton--ancho {
  width: 100%; /* todo el ancho de su contenedor */
} /* fin de la regla .boton--ancho */

/* Botón con apariencia de enlace (por ejemplo, "Ver nota") */
/* ("Ver nota" y "Ocultar nota" en cada registro del historial, los crea historial.js; "Otra idea" y
   "Escribir sobre esta idea" en registrar.html). Es un <button> porque hace algo en la misma página. */
.boton-texto {
  min-height: 44px; /* aunque parece un enlace, el área para tocar sigue siendo cómoda */
  padding: 0; /* sin relleno */
  border: 0; /* sin el borde que el navegador pone a los botones */
  background: none; /* sin fondo */
  color: var(--color-primario); /* violeta, como los enlaces */
  font: inherit; /* la letra de la página */
  font-weight: 600; /* seminegrita */
  text-decoration: underline; /* subrayado: se ve como un enlace */
  text-underline-offset: 0.15em; /* separa un poco el subrayado de las letras */
  cursor: pointer; /* manito al pasar el mouse */
} /* fin de la regla .boton-texto */

/* Fila de botones que van juntos: "Crear mi cuenta" y "Ya tengo cuenta" en la bienvenida, "Cancelar" y
   "Eliminar" en los diálogos, "Copiar código" y "Ya lo guardé, continuar" al crear la cuenta... */
.acciones {
  display: flex; /* botones en fila */
  flex-wrap: wrap; /* si no caben (en el celular), pasan a la línea de abajo */
  gap: var(--espacio-3); /* 16 px entre botones (y entre líneas) */
  align-items: center; /* centrados a lo alto */
  margin-top: var(--espacio-4); /* 24 px de aire arriba: se separan del texto */
} /* fin de la regla .acciones */

/* ---------------------------------------------------------------------
   Tarjetas y avisos
   --------------------------------------------------------------------- */
/* Tarjeta: caja blanca con borde fino, esquinas redondeadas y sombra suave. Es la pieza más usada: agrupa
   lo que va junto (cada sección de ajustes, el formulario de entrar, cada paso del registro, cada
   actividad...). Casi todas las páginas la tienen. */
.tarjeta {
  margin-bottom: var(--espacio-4); /* 24 px de separación con lo que sigue */
  padding: var(--espacio-4); /* un solo valor: 24 px de relleno en los cuatro lados */
  background: var(--color-superficie); /* fondo blanco (violeta muy oscuro de noche) */
  /* borde de 1 px, lila suave que combina con el fondo de galaxia (base.css); si no existe, el borde normal */
  border: 1px solid var(--galaxia-borde-tarjeta, var(--color-borde));
  border-radius: var(--radio-grande); /* esquinas redondeadas de 24 px */
  /* sombra muy suave y, debajo, un resplandor violeta (brilla un poco sobre la galaxia) */
  box-shadow: var(--sombra), 0 12px 34px -16px var(--galaxia-brillo, transparent);
} /* fin de la regla .tarjeta */

/* El último elemento de la tarjeta. ">" = hijo DIRECTO (no nietos); ":last-child" = el último de sus
   hermanos. Sin etiqueta delante de los dos puntos, vale para cualquier elemento (p, div, ul...). */
.tarjeta > :last-child {
  margin-bottom: 0; /* sin margen abajo: el relleno de la tarjeta ya deja el espacio */
} /* fin de la regla .tarjeta > :last-child */

/* Títulos h2 dentro de una tarjeta */
.tarjeta h2 {
  margin-top: 0; /* quita los 40 px de margen de arriba que base.css les da a los h2 */
} /* fin de la regla .tarjeta h2 */

/* Título de tarjeta con su ícono a la izquierda */
/* (<div class="tarjeta__titulo"> con una .insignia y un h2: tarjetas de ajustes, inicio, progreso y apoyo) */
.tarjeta__titulo {
  display: flex; /* insignia y título en fila */
  align-items: center; /* centrados a lo alto */
  gap: var(--espacio-3); /* 16 px entre la insignia y el título */
  margin-bottom: var(--espacio-3); /* 16 px debajo, antes del contenido de la tarjeta */
} /* fin de la regla .tarjeta__titulo */

/* El título (h2 o h3) de esa fila. La coma separa dos selectores que comparten la misma regla. */
.tarjeta__titulo h2,
.tarjeta__titulo h3 { /* y también el título h3 de esa fila */
  margin: 0; /* sin márgenes: la fila ya pone el espacio */
} /* fin de la regla .tarjeta__titulo h2 y h3 */

/* Insignia: ícono dentro de un círculo de color (decorativa) */
/* Es el cuadrito de color con un ícono que acompaña a los títulos (ajustes, inicio, progreso, apoyo, la
   bienvenida, privacidad...). Con 14 px de radio en 44 px se ve como un cuadrado de esquinas muy redondas.
   Es decorativa: el ícono lleva aria-hidden="true" y lo importante lo dice el texto de al lado. */
.insignia {
  display: grid; /* GRID (cuadrícula): ordena en filas y columnas; aquí solo sirve para centrar el ícono */
  place-items: center; /* centra el ícono a lo alto y a lo ancho */
  width: 2.75rem; /* 44 px de ancho */
  height: 2.75rem; /* 44 px de alto */
  flex-shrink: 0; /* dentro de una fila flex no se encoge aunque el título sea largo */
  border-radius: 14px; /* esquinas redondeadas */
  background: var(--color-primario-suave); /* fondo lila (la insignia básica, sin variante) */
  color: var(--color-primario); /* ícono violeta: los íconos toman el color del texto (currentColor) */
} /* fin de la regla .insignia */

/* El ícono dentro de la insignia */
.insignia .icono {
  width: 1.5rem; /* 24 px de ancho */
  height: 1.5rem; /* 24 px de alto */
} /* fin de la regla .insignia .icono */

/* Variantes de color de la insignia, con los colores decorativos de tokens.css (de noche son versiones
   oscuras). Sobre estos fondos, el ícono va en color tinta (el del texto principal). Cada regla está
   escrita en una sola línea: es lo mismo que escribirla en varias. */
.insignia--menta { background: var(--color-menta-suave); color: var(--color-texto); } /* verde agua claro */
.insignia--cielo { background: var(--color-cielo-suave); color: var(--color-texto); } /* celeste claro */
.insignia--sol { background: var(--color-sol-suave); color: var(--color-texto); } /* amarillo claro */
.insignia--rosa { background: var(--color-rosa-suave); color: var(--color-texto); } /* rosado claro */
.insignia--acento { background: var(--color-acento-suave); color: var(--color-texto); } /* coral (apoyo) */

/* Insignia grande (encabezados de apoyo y privacidad, recordatorio de la bienvenida, llave del código de
   recuperación y tarjetas de actividades.html). Va DESPUÉS de .insignia para ganarle en tamaño: las dos
   reglas tienen la misma especificidad, y en ese caso gana la que se lee después. */
.insignia--grande {
  width: 3.5rem; /* 56 px de ancho */
  height: 3.5rem; /* 56 px de alto */
  border-radius: 18px; /* esquinas un poco más redondeadas, en proporción al tamaño */
} /* fin de la regla .insignia--grande */

/* El ícono dentro de la insignia grande */
.insignia--grande .icono {
  width: 1.9rem; /* unos 30 px de ancho */
  height: 1.9rem; /* unos 30 px de alto */
} /* fin de la regla .insignia--grande .icono */

/* Etiqueta pequeña sobre un título ("Para adolescentes de 12 a 18 años", "Etapa 3 de 5") */
/* (la primera en la bienvenida, index.html; la segunda en progreso.html, donde progreso.js la escribe) */
.etiqueta {
  display: inline-flex; /* mide lo que su texto (un <p> normal ocuparía todo el ancho) */
  align-items: center; /* contenido centrado a lo alto */
  gap: var(--espacio-2); /* 8 px entre un ícono y el texto, si lo lleva */
  margin-bottom: var(--espacio-3); /* 16 px debajo, antes del título */
  padding: var(--espacio-1) var(--espacio-3); /* 4 px arriba y abajo, 16 px a los lados */
  border-radius: 999px; /* forma de pastilla */
  background: var(--color-primario-suave); /* fondo lila */
  color: var(--color-primario); /* texto violeta */
  font-size: var(--texto-pequeno); /* letra pequeña: 14 px */
  font-weight: 700; /* negrita */
} /* fin de la regla .etiqueta */

/* Grilla de tarjetas que se acomoda sola al ancho disponible */
/* ("Qué puedes hacer" en la bienvenida, el resumen de privacidad.html, y el jardín y el armario de
   progreso.html). Una columna en el celular y más columnas cuando caben. */
.grilla {
  display: grid; /* cuadrícula */
  /* repeat(auto-fit, ...) crea tantas columnas como quepan y, si sobra espacio, las estira.
     minmax(mínimo, máximo): cada columna mide al menos 17rem (272 px) y como mucho 1fr (fr = una parte
     igual del espacio libre). min(100%, 17rem) elige el menor de los dos: en un celular muy angosto la
     columna nunca es más ancha que la pantalla. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--espacio-4); /* 24 px entre tarjetas, a lo ancho y a lo alto */
} /* fin de la regla .grilla */

/* Las tarjetas que están dentro de la grilla */
.grilla > .tarjeta {
  margin-bottom: 0; /* sin margen: la grilla ya las separa con gap (si no, los espacios se sumarían) */
} /* fin de la regla .grilla > .tarjeta */

/* Mensaje amable cuando todavía no hay nada que mostrar (con Nubbit) */
/* (en historial.html, <div class="vacio" id="mes-vacio">: historial.js lo muestra si el mes no tiene
   registros, con "Aún no hay registros en este mes." y, en el mes actual, el botón para registrar) */
.vacio {
  display: grid; /* cuadrícula de una columna: ícono, texto y botón, uno debajo del otro */
  justify-items: center; /* cada uno centrado a lo ancho */
  gap: var(--espacio-2); /* 8 px entre ellos */
  padding: var(--espacio-5) var(--espacio-4); /* 40 px arriba y abajo, 24 px a los lados */
  border: 2px dashed var(--color-borde); /* borde de rayitas (dashed): parece un espacio por llenar */
  border-radius: var(--radio-grande); /* esquinas de 24 px, como las tarjetas */
  text-align: center; /* texto centrado */
} /* fin de la regla .vacio */

/* El ícono de Nubbit del mensaje vacío */
.vacio img {
  width: 72px; /* ancho */
  height: 72px; /* alto */
} /* fin de la regla .vacio img */

/* El texto del mensaje vacío */
.vacio p {
  max-width: 28rem; /* líneas no muy largas (448 px como máximo) */
  margin: 0; /* sin márgenes: el gap ya separa */
  color: var(--color-texto-suave); /* gris violeta: un tono tranquilo */
} /* fin de la regla .vacio p */

/* Aviso: recuadro amarillo con una franja dorada a la izquierda. Es el "Versión de prueba..." de
   crear-cuenta y privacidad, y el error de carga (<p class="aviso" id="error-carga" role="alert">) de
   inicio, registrar, historial, progreso y ajustes, que el JavaScript de cada página llena si algo falla. */
.aviso {
  margin-bottom: var(--espacio-4); /* 24 px debajo */
  padding: var(--espacio-3); /* 16 px de relleno */
  background: var(--color-aviso-fondo); /* amarillo pálido */
  border-left: 5px solid var(--color-aviso-borde); /* franja dorada de 5 px, solo en el borde izquierdo */
  border-radius: var(--radio); /* esquinas de 14 px */
} /* fin de la regla .aviso */

/* El último elemento del aviso */
.aviso > :last-child {
  margin-bottom: 0; /* sin margen abajo (igual que en .tarjeta) */
} /* fin de la regla .aviso > :last-child */

/* "Pendiente de la institución: ..." en privacidad.html: lo que la institución todavía debe definir */
.pendiente {
  padding: var(--espacio-3); /* 16 px de relleno */
  border: 2px dashed var(--color-aviso-borde); /* borde de rayitas dorado: algo "por completar" */
  border-radius: var(--radio); /* esquinas de 14 px */
  background: var(--color-aviso-fondo); /* amarillo pálido */
} /* fin de la regla .pendiente */

/* Mensajes que anuncia el lector de pantalla (role="status").
   Vacíos no se ven, pero NO se ocultan con display:none: la región debe existir
   antes de recibir el texto para que el lector de pantalla lo anuncie. */
/* <p class="mensaje-estado" role="status">: confirmaciones cortas como "Código copiado..." (crear cuenta
   y recuperar), las de ajustes, del jardín y el armario (progreso), del historial, del juego de memoria,
   del inicio y de la bienvenida. role="status" crea una REGIÓN VIVA: cuando JavaScript cambia su texto,
   el lector de pantalla lo lee sin mover el foco.
   :empty = sin nada adentro (ni siquiera espacios). Esta regla va ANTES que la de abajo y aun así le gana
   cuando el párrafo está vacío: es más específica (clase + pseudo-clase pesa más que una clase sola). */
.mensaje-estado:empty {
  padding: 0; /* sin relleno: no ocupa espacio */
  background: none; /* sin fondo: no se ve una caja vacía */
} /* fin de la regla .mensaje-estado:empty */

/* El mensaje cuando tiene texto: una cajita lila */
.mensaje-estado {
  padding: var(--espacio-3); /* 16 px de relleno */
  border-radius: var(--radio); /* esquinas de 14 px */
  background: var(--color-superficie-suave); /* lila muy claro */
} /* fin de la regla .mensaje-estado */

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
/* Todo <form class="formulario">: entrar, crear cuenta, recuperar, los tres de ajustes (cambiar
   contraseña, código nuevo y eliminar cuenta) y el registro de hoy (registrar.html) */
.formulario {
  display: grid; /* cuadrícula de una sola columna: cada campo queda debajo del anterior */
  gap: var(--espacio-4); /* 24 px entre campos */
} /* fin de la regla .formulario */

/* Cada campo (<div class="campo">): etiqueta, ayuda, cuadro para escribir y mensaje de error */
.campo {
  display: grid; /* una columna: las partes quedan una debajo de la otra */
  gap: var(--espacio-1); /* muy juntas (4 px): se ve que forman un solo campo */
} /* fin de la regla .campo */

/* Nombre de cada campo, en negrita. <label> = el texto de un campo (tocarlo enfoca o marca el campo);
   <fieldset> = un grupo de opciones y <legend> = su título ("¿Cómo te sientes hoy?" en el registro,
   "Ritmo" y "Duración" en respirar.html). */
.campo label,
.campo legend, /* la leyenda <legend> que esté dentro de un .campo */
fieldset legend { /* y la leyenda de cualquier <fieldset> */
  font-weight: 700; /* negrita */
} /* fin de la regla .campo label, .campo legend y fieldset legend */

/* Texto de ayuda de un campo ("Inventa uno: no uses tu nombre real...", "Mínimo 8 caracteres...").
   El cuadro para escribir lo enlaza con aria-describedby (la lista de ids de su ayuda y su error): así el
   lector de pantalla lee la ayuda junto con el campo. También sirve como nota pequeña fuera de los
   formularios (entrar, inicio, actividades, respirar, apoyo...). */
.campo__ayuda {
  margin: 0; /* sin márgenes: el campo ya separa sus partes */
  color: var(--color-texto-suave); /* gris violeta: menos protagonismo que la etiqueta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .campo__ayuda */

/* Mensaje de error de un campo ("Escribe un apodo.", "Las contraseñas no coinciden."). Empieza oculto;
   js/formularios.js escribe el texto y lo muestra (lo encuentra por su atributo data-error-de). */
.campo__error {
  margin: 0; /* sin márgenes */
  color: var(--color-error); /* rojo */
  font-weight: 600; /* seminegrita */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .campo__error */

/* Mientras no hay error, el párrafo lleva el atributo hidden (base.css ya oculta todo lo que tiene hidden;
   esta regla lo deja escrito junto a la pieza) */
.campo__error[hidden] {
  display: none; /* no se muestra ni ocupa lugar */
} /* fin de la regla .campo__error[hidden] */

/* Cuadros para escribir: apodo y código de recuperación (type="text"), contraseñas (type="password") y la
   nota del registro (<textarea>, de varias líneas). input[type="text"] = los <input> cuyo atributo type
   vale "text". Al tocar "Mostrar", formularios.js cambia la contraseña a type="text": se ve igual. */
input[type="text"],
input[type="password"], /* los cuadros de contraseña (type="password") */
textarea { /* y el cuadro de varias líneas (la nota del registro) */
  width: 100%; /* todo el ancho del campo */
  min-height: 52px; /* alto cómodo para tocar y escribir */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  border: 2px solid var(--color-borde-control); /* borde gris violeta de 2 px (contraste 3,7:1 con el fondo) */
  border-radius: var(--radio); /* esquinas de 14 px */
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-texto); /* texto color tinta */
  font: inherit; /* la letra de la página (16 px: así el iPhone no acerca la pantalla al escribir) */
  /* el color del borde y el halo del foco aparecen suavemente (0,15 s) */
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
} /* fin de la regla input text, input password y textarea */

/* Al escribir, el campo se resalta en violeta (además del contorno de foco del teclado) */
/* :focus = el campo tiene el foco (el cursor está adentro), se llegue con el dedo, el mouse o el teclado */
input[type="text"]:focus,
input[type="password"]:focus, /* los cuadros de contraseña con el foco */
textarea:focus { /* y el <textarea> de la nota con el foco */
  border-color: var(--color-primario); /* borde violeta */
  /* halo lila alrededor: sin correrse (0 0), sin desenfoque (0) y con 4 px de extensión */
  box-shadow: 0 0 0 4px var(--color-primario-suave);
} /* fin de la regla input text/password y textarea con :focus */

/* La nota del registro (registrar.html, hasta 500 caracteres) */
textarea {
  min-height: 8rem; /* 128 px de alto: caben unas cuatro líneas */
  line-height: 1.5; /* interlineado cómodo para leer lo escrito */
  resize: vertical; /* se estira arrastrando la esquina, pero solo a lo alto (a lo ancho se saldría) */
} /* fin de la regla textarea */

/* Campo con un dato que no sirve: formularios.js le pone aria-invalid="true" (el lector de pantalla dice
   "no válido"). El rojo nunca va solo: debajo aparece también el mensaje de error escrito. */
input[aria-invalid="true"],
textarea[aria-invalid="true"] { /* y la nota del registro marcada como no válida */
  border-color: var(--color-error); /* borde rojo */
} /* fin de la regla input y textarea con aria-invalid="true" */

/* Fila de la contraseña: el cuadro y, al lado, el botón "Mostrar" (entrar, crear cuenta, recuperar, ajustes) */
.campo__contrasena {
  display: flex; /* en fila */
  gap: var(--espacio-2); /* 8 px entre el cuadro y el botón */
} /* fin de la regla .campo__contrasena */

/* El cuadro de la contraseña dentro de esa fila */
.campo__contrasena input {
  flex: 1; /* crece y ocupa todo el espacio que deja libre el botón */
} /* fin de la regla .campo__contrasena input */

/* Botón "Mostrar"/"Ocultar" con un ojo, junto a la contraseña. js/formularios.js
   (activarBotonesMostrarContrasena) cambia el campo entre puntitos (password) y texto visible, y cambia
   la palabra, el ícono (ojo u ojo cerrado) y aria-pressed (el lector de pantalla dice si está presionado). */
.boton-mostrar {
  display: inline-flex; /* ojo y palabra en fila */
  align-items: center; /* centrados a lo alto */
  justify-content: center; /* y a lo ancho */
  gap: var(--espacio-1); /* 4 px entre el ojo y la palabra */
  min-width: 6.75rem; /* 108 px de ancho mínimo: no cambia de tamaño entre "Mostrar" y "Ocultar" */
  min-height: 52px; /* el mismo alto que el cuadro de la contraseña */
  padding: 0 var(--espacio-3); /* 16 px a los lados */
  border: 2px solid transparent; /* borde invisible: al pasar el mouse se pinta sin que el botón crezca */
  border-radius: var(--radio); /* esquinas de 14 px, como el cuadro */
  background: var(--color-primario-suave); /* fondo lila */
  color: var(--color-primario); /* ojo y palabra violetas */
  font: inherit; /* la letra de la página */
  font-weight: 700; /* negrita */
  cursor: pointer; /* manito */
} /* fin de la regla .boton-mostrar */

/* Botón "Mostrar" con el mouse encima */
.boton-mostrar:hover {
  border-color: var(--color-primario); /* aparece el borde violeta */
} /* fin de la regla .boton-mostrar:hover */

/* En celulares angostos el botón queda solo con el ojo: el texto sigue ahí para el lector de pantalla */
/* MEDIA QUERY (@media): lo de adentro solo se aplica si se cumple la condición. max-width: 420px =
   pantallas de 420 px de ancho o menos. Así cada tamaño de pantalla recibe su diseño (diseño adaptable). */
@media (max-width: 420px) {
  /* El botón: queda cuadrado, del alto del campo */
  .boton-mostrar {
    min-width: 52px; /* 52 x 52 px */
    padding: 0; /* sin relleno: solo cabe el ojo */
  } /* fin de la regla .boton-mostrar (420 px o menos) */

  /* La palabra "Mostrar" u "Ocultar": invisible, pero el lector de pantalla la sigue leyendo
     (la misma técnica de .visualmente-oculto en base.css; display: none la ocultaría también para él) */
  .boton-mostrar__texto {
    position: absolute; /* sale del flujo: no ocupa lugar dentro del botón */
    width: 1px; /* 1 píxel de ancho */
    height: 1px; /* 1 píxel de alto */
    overflow: hidden; /* lo que no cabe en ese píxel no se ve */
    clip: rect(0 0 0 0); /* recorta el texto a un rectángulo vacío: queda invisible */
    white-space: nowrap; /* no se parte en líneas (algunos lectores leerían palabra por palabra) */
  } /* fin de la regla .boton-mostrar__texto (420 px o menos) */
} /* fin de la media query para celulares (420 px o menos) */

/* ---------------------------------------------------------------------
   Interruptor: una casilla de verificación con forma de interruptor.
   En el HTML: <input type="checkbox" class="interruptor" role="switch">
   (el lector de pantalla dice "activado" o "desactivado").
   --------------------------------------------------------------------- */
/* La "pista" del interruptor: una cápsula gris que se vuelve violeta al activarse. Está en ajustes
   ("Permitir que el mundo de Nubbit cambie según mis últimos días") y en el armario de progreso.html
   (un interruptor por cada accesorio ganado; los crea js/paginas/progreso.js). */
.interruptor {
  position: relative; /* RELATIVA: queda en su lugar y sirve de referencia a la perilla (position: absolute) */
  width: 3.25rem; /* 52 px de ancho */
  height: 1.875rem; /* 30 px de alto */
  flex-shrink: 0; /* en la fila flex no se encoge aunque el texto sea largo */
  margin: 0; /* quita el margen que el navegador pone a las casillas */
  border-radius: 999px; /* forma de cápsula */
  background: var(--color-borde-control); /* gris violeta = apagado (contraste 3,7:1 con el fondo) */
  cursor: pointer; /* manito */
  appearance: none; /* borra el dibujo propio del navegador (el cuadrito con visto): se dibuja con CSS */
  transition: background-color var(--transicion-rapida); /* el color de la pista cambia suavemente (0,15 s) */
} /* fin de la regla .interruptor */

/* La perilla: un círculo blanco que se desliza. ::before es un PSEUDO-ELEMENTO: una cajita extra que dibuja
   el CSS sin que exista en el HTML (con appearance: none, el navegador deja dibujarla dentro de la casilla). */
.interruptor::before {
  content: ""; /* obligatorio para que el pseudo-elemento exista (aquí va vacío, sin texto) */
  position: absolute; /* ABSOLUTA: se ubica dentro del interruptor, sin ocupar lugar */
  top: 3px; /* 3 px desde arriba */
  left: 3px; /* 3 px desde la izquierda: empieza a la izquierda (apagado) */
  width: calc(1.875rem - 6px); /* calc() hace cuentas: 30 px de alto menos 6 px = 24 px */
  height: calc(1.875rem - 6px); /* 24 px: quedan 3 px de pista arriba y abajo */
  border-radius: 50%; /* esquinas al 50 %: un círculo */
  background: #fff; /* blanco (#fff = #ffffff), igual en las dos apariencias */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); /* sombrita negra al 30 % hacia abajo: se ve en relieve */
  transition: transform var(--transicion); /* se desliza en 0,25 s con la curva suave de tokens.css */
} /* fin de la regla .interruptor::before */

/* Interruptor activado. :checked = la casilla está marcada */
.interruptor:checked {
  background: var(--color-primario); /* la pista se vuelve violeta */
} /* fin de la regla .interruptor:checked */

/* La perilla del interruptor activado */
.interruptor:checked::before {
  transform: translateX(1.375rem); /* se corre 22 px a la derecha (52 - 24 - 3 - 3 = 22) */
} /* fin de la regla .interruptor:checked::before */

/* Interruptor desactivado (:disabled): el de ajustes mientras cargan los datos de la cuenta, y los del
   armario mientras cargan o se guarda un cambio (progreso.js desactiva el <fieldset> que los contiene) */
.interruptor:disabled {
  opacity: 0.5; /* se ve a medias: se nota que no se puede usar */
  cursor: not-allowed; /* puntero de "prohibido" */
} /* fin de la regla .interruptor:disabled */

/* Fila con texto a la izquierda y el interruptor a la derecha */
/* (la opción de ajustes y cada accesorio del armario en progreso.html) */
.campo--interruptor {
  display: flex; /* texto e interruptor en fila */
  align-items: center; /* centrados a lo alto */
  justify-content: space-between; /* reparte el espacio: el texto a la izquierda y el interruptor a la derecha */
  gap: var(--espacio-3); /* al menos 16 px entre los dos */
  min-height: 48px; /* fila alta: fácil de tocar */
} /* fin de la regla .campo--interruptor */

/* El texto de esa fila */
.campo--interruptor label {
  font-weight: 700; /* negrita */
  cursor: pointer; /* tocar el texto también cambia el interruptor (la etiqueta lo nombra con for="...") */
} /* fin de la regla .campo--interruptor label */

/* ---------------------------------------------------------------------
   Control segmentado: opciones de radio que se ven como botones unidos
   (por ejemplo, la apariencia: Automática, Clara, Nocturna).
   --------------------------------------------------------------------- */
/* El "riel" lila que contiene las opciones. Hoy está solo en ajustes.html ("Apariencia de la pantalla"):
   js/paginas/ajustes.js guarda lo elegido en el dispositivo y cambia los colores al instante. Son radios
   (<input type="radio">): solo se puede elegir una opción. */
.segmentado {
  display: grid; /* cuadrícula */
  grid-auto-columns: 1fr; /* las columnas que se crean solas miden lo mismo (1fr = una parte igual) */
  grid-auto-flow: column; /* cada opción nueva va en una columna nueva: todas quedan en una sola fila */
  gap: var(--espacio-1); /* 4 px entre opciones */
  padding: var(--espacio-1); /* 4 px de riel alrededor de las opciones */
  border-radius: 999px; /* forma de pastilla */
  background: var(--color-superficie-suave); /* lila muy claro */
} /* fin de la regla .segmentado */

/* Cada opción (un <div> con su radio y su etiqueta). ">" = solo los <div> que son hijos directos */
.segmentado > div {
  position: relative; /* referencia para el radio invisible, que se ubica con position: absolute */
} /* fin de la regla .segmentado > div */

/* El radio real: invisible y encima de toda la opción. Sigue funcionando con el teclado (flechas) y el
   lector de pantalla lo anuncia; lo que se VE es su etiqueta. */
.segmentado input {
  position: absolute; /* sale del flujo y se pone encima de la opción */
  opacity: 0; /* transparente del todo (0 = invisible, 1 = normal), pero sigue ahí y se puede tocar */
  width: 100%; /* cubre todo el ancho de la opción... */
  height: 100%; /* ...y todo el alto: tocar en cualquier parte la elige */
  margin: 0; /* sin margen: queda justo encima */
} /* fin de la regla .segmentado input */

/* La parte visible de cada opción: ícono y palabra dentro de una pastilla */
.segmentado label {
  display: flex; /* ícono y palabra en fila */
  align-items: center; /* centrados a lo alto */
  justify-content: center; /* y a lo ancho */
  gap: var(--espacio-1); /* 4 px entre el ícono y la palabra */
  min-height: 44px; /* alto cómodo para tocar */
  padding: 0 var(--espacio-2); /* 8 px a los lados */
  border-radius: 999px; /* forma de pastilla */
  color: var(--color-texto-suave); /* gris violeta: opción no elegida */
  font-weight: 700; /* negrita */
  text-align: center; /* centrada si la palabra baja de línea */
  cursor: pointer; /* manito */
  /* el fondo y el color cambian suavemente al elegir otra opción */
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
} /* fin de la regla .segmentado label */

/* La opción elegida. "+" = el elemento que va JUSTO DESPUÉS (el hermano siguiente): la <label> que sigue
   al radio marcado (:checked). Se ve como una pastilla blanca en relieve. */
.segmentado input:checked + label {
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-primario); /* texto violeta */
  box-shadow: var(--sombra); /* sombra suave: se levanta del riel */
} /* fin de la regla .segmentado input:checked + label */

/* Foco del teclado: el radio es invisible, así que el contorno azul se dibuja en su etiqueta */
.segmentado input:focus-visible + label {
  outline: 3px solid var(--color-foco); /* contorno azul de 3 px (outline va por fuera y no cambia el tamaño) */
  outline-offset: 2px; /* separado 2 px de la pastilla */
} /* fin de la regla .segmentado input:focus-visible + label */

/* Pantallas de 400 px de ancho o menos: se quita el ícono para que las tres palabras quepan en la fila */
@media (max-width: 400px) {
  /* El ícono de cada opción del control segmentado */
  .segmentado label .icono {
    display: none; /* en pantallas muy angostas solo queda la palabra */
  } /* fin de la regla .segmentado label .icono (400 px o menos) */
} /* fin de la media query de 400 px o menos (control segmentado) */

/* Casilla (o radio) con su texto al lado: las aceptaciones de crear-cuenta.html ("Leí cómo Noosfera cuida
   mis datos...") y las opciones de ritmo y duración de respirar.html (las crea js/paginas/respirar.js) */
.campo--casilla {
  display: flex; /* casilla y texto en fila */
  align-items: flex-start; /* alineados ARRIBA: si el texto ocupa varias líneas, la casilla queda en la primera */
  gap: var(--espacio-2); /* 8 px entre la casilla y el texto */
} /* fin de la regla .campo--casilla */

/* La casilla o el radio */
.campo--casilla input {
  width: 1.4rem; /* unos 22 px: más grande que la del navegador, fácil de tocar */
  height: 1.4rem; /* alto igual al ancho */
  margin-top: 0.15rem; /* la baja unos 2 px para alinearla con la primera línea del texto */
  flex-shrink: 0; /* no se encoge aunque el texto sea largo */
  accent-color: var(--color-primario); /* ACCENT-COLOR: el visto de la casilla y el punto del radio, en violeta */
} /* fin de la regla .campo--casilla input */

/* El texto de la casilla: son frases largas, van sin negrita. Esta regla le gana a ".campo label" porque
   las dos pesan lo mismo (clase + etiqueta) y esta va DESPUÉS (ver "especificidad" en los botones). */
.campo--casilla label {
  font-weight: 400; /* peso normal (400) */
} /* fin de la regla .campo--casilla label */

/* Contador de la nota en registrar.html: "N de 500 caracteres" (lo escribe registrar.js mientras escribes) */
.contador {
  justify-self: end; /* dentro de la cuadrícula del campo, se alinea a la derecha */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .contador */

/* Todos los <fieldset> (grupos de opciones): sin el borde, el margen y el relleno que les pone el
   navegador. Si además llevan una clase (como .tarjeta en los pasos del registro), la clase gana porque
   es más específica que una etiqueta: por eso esos pasos sí tienen borde y relleno. */
fieldset {
  margin: 0; /* sin margen */
  padding: 0; /* sin relleno */
  border: 0; /* sin el borde gris del navegador */
  min-width: 0; /* el navegador le da un ancho mínimo igual a su contenido; con 0 no se sale en el celular */
} /* fin de la regla fieldset */

/* Resumen de errores: recuadro rojo al comienzo de cada formulario (un mensaje general, por ejemplo
   "Revisa los datos marcados.", y la lista de errores). js/formularios.js (mostrarErrores) lo llena, lo
   muestra y le pone el foco; role="alert" hace que el lector de pantalla lo lea de inmediato. */
.resumen-errores {
  padding: var(--espacio-3); /* 16 px de relleno */
  border: 2px solid var(--color-error); /* borde rojo de 2 px */
  border-radius: var(--radio); /* esquinas de 14 px */
  background: var(--color-error-fondo); /* rosa muy claro */
} /* fin de la regla .resumen-errores */

/* Sin errores, formularios.js le pone el atributo hidden */
.resumen-errores[hidden] {
  display: none; /* oculto */
} /* fin de la regla .resumen-errores[hidden] */

/* El mensaje general del resumen */
.resumen-errores p {
  margin: 0; /* sin margen */
  font-weight: 700; /* negrita */
} /* fin de la regla .resumen-errores p */

/* ---------------------------------------------------------------------
   Escala emocional (5 opciones grandes). Cada opción es un radio real:
   funciona con teclado (flechas) y con lector de pantalla.
   --------------------------------------------------------------------- */
/* Fila de las cinco caritas de registrar.html (<div class="escala__opciones" id="opciones-nivel">), bajo la
   pregunta "¿Cómo te sientes hoy?". registrar.js crea adentro una .escala__opcion por cada nivel, de
   "Muy difícil" (1) a "Muy bien" (5). GRID (cuadrícula): ordena a los hijos en filas y columnas. */
.escala__opciones {
  display: grid; /* cuadrícula */
  grid-template-columns: repeat(5, 1fr); /* cinco columnas iguales (fr = una parte del espacio libre) */
  gap: var(--espacio-2); /* var() lee una variable de tokens.css: 8 px entre caritas */
  margin-top: var(--espacio-2); /* 8 px de aire arriba, bajo el texto de ayuda */
} /* fin de la regla .escala__opciones */

/* Cada opción de la escala: un <div class="escala__opcion"> con su radio (invisible) y su <label> */
.escala__opcion {
  position: relative; /* RELATIVA: sirve de referencia al radio, que se pone encima con position: absolute */
  display: grid; /* la etiqueta ocupa todo el alto: las cinco opciones quedan iguales */
} /* fin de la regla .escala__opcion */

/* El radio (<input type="radio">): invisible, pero sigue ahí, estirado sobre toda la opción. Así funciona con
   el teclado y el lector de pantalla lo anuncia (con display: none desaparecería para todos). */
.escala__opcion input {
  position: absolute; /* ABSOLUTA: se ubica encima de la opción sin ocupar lugar */
  opacity: 0; /* opacidad 0 = transparente del todo: no se ve, pero se puede tocar y enfocar */
  width: 100%; /* tan ancho como la opción */
  height: 100%; /* y tan alto: tocar cualquier parte de la opción la elige */
  margin: 0; /* sin el margen que el navegador pone a los radios */
} /* fin de la regla .escala__opcion input */

/* La tarjetita visible de cada opción (<label>): la carita arriba y el nombre del nivel abajo.
   FLEX (caja flexible): acomoda a los hijos en una fila o en una columna y reparte el espacio. */
.escala__opcion label {
  display: flex; /* caja flexible */
  flex-direction: column; /* en columna: la carita encima del nombre */
  align-items: center; /* centrados a lo ancho */
  justify-content: center; /* centrados a lo alto */
  gap: var(--espacio-2); /* 8 px entre la carita y el nombre */
  min-height: 7.5rem; /* alto mínimo de 120 px: las cinco miden igual y son fáciles de tocar */
  padding: var(--espacio-3) var(--espacio-2); /* 16 px arriba y abajo, 8 px a los lados */
  border: 2px solid var(--color-borde-control); /* borde de 2 px, línea continua (solid), gris violeta */
  border-radius: var(--radio-grande); /* esquinas redondeadas de 24 px */
  background: var(--color-superficie); /* fondo blanco (violeta oscuro en la apariencia nocturna) */
  font-weight: 700; /* grosor de la letra: 700 = negrita */
  line-height: 1.25; /* líneas juntas: "Más o menos" en dos líneas ocupa poco */
  text-align: center; /* texto centrado */
  cursor: pointer; /* el puntero del mouse se vuelve una manito: se nota que se puede tocar */
  /* TRANSICIÓN: el movimiento, el fondo y el color del borde cambian poco a poco (0,15 s) y no de golpe */
  transition: transform var(--transicion-rapida), background-color var(--transicion-rapida),
    border-color var(--transicion-rapida); /* sigue la lista: el color del borde, también en 0,15 s */
} /* fin de la regla .escala__opcion label */

/* Opción con el mouse encima. :hover es una PSEUDO-CLASE: elige un elemento según su estado (aquí, "el
   puntero está encima"). */
.escala__opcion label:hover {
  transform: translateY(-2px); /* transform mueve el elemento sin empujar a los vecinos: sube 2 px */
  border-color: var(--color-primario); /* borde violeta: se nota que responde */
} /* fin de la regla .escala__opcion label:hover */

/* La carita de cada opción: el <svg> que crea crearCarita() de js/nubbit.js */
.escala__opcion svg {
  width: 52px; /* 52 px de ancho */
  height: 52px; /* 52 px de alto */
  transition: transform var(--transicion); /* cuando la eligen, crece con suavidad (0,25 s) */
} /* fin de la regla .escala__opcion svg */

/* La opción ELEGIDA. :checked = el radio está marcado. El signo + elige al hermano que viene JUSTO DESPUÉS:
   "input:checked + label" = el <label> que sigue a un radio marcado. */
.escala__opcion input:checked + label {
  border-color: var(--color-primario); /* borde violeta */
  background: var(--color-primario-suave); /* fondo lila */
  /* sombra INTERNA (inset) sin desplazamiento ni desenfoque, de 2 px: el borde violeta se ve más grueso sin
     que la opción cambie de tamaño */
  box-shadow: inset 0 0 0 2px var(--color-primario);
} /* fin de la regla .escala__opcion input:checked + label */

/* La carita elegida crece un poco: se ve cuál es sin depender del color */
/* (el espacio antes de "svg" significa "un svg que está DENTRO de ese label") */
.escala__opcion input:checked + label svg {
  transform: scale(1.12); /* scale() agranda o achica: 1.12 = 12 % más grande */
} /* fin de la regla .escala__opcion input:checked + label svg */

/* Foco del teclado: como el radio es invisible, el contorno se dibuja en su <label>.
   :focus-visible = tiene el foco y el navegador lo muestra (al moverse con Tab o con las flechas). */
.escala__opcion input:focus-visible + label {
  outline: 3px solid var(--color-foco); /* contorno azul de 3 px por fuera (no cambia el tamaño) */
  outline-offset: 3px; /* separado 3 px del borde */
} /* fin de la regla .escala__opcion input:focus-visible + label */

/* En el celular las cinco caritas siguen en una fila, más compactas */
/* MEDIA QUERY (@media): las reglas de adentro solo se aplican si se cumple la condición; aquí, si la pantalla
   mide 480 px de ancho o menos (celulares).
   Este bloque va DESPUÉS de las reglas generales de la escala a propósito. Así funciona la CASCADA de CSS: si
   dos reglas tienen la misma fuerza (especificidad), gana la que se lee después, y estar dentro de una @media no
   les da más fuerza. Si este bloque estuviera más arriba, las reglas generales lo taparían. */
@media (max-width: 480px) {
  /* La fila de caritas del celular */
  .escala__opciones {
    gap: var(--espacio-1); /* solo 4 px entre caritas: así caben en la pantalla angosta */
  } /* fin de la regla .escala__opciones (480 px o menos) */

  /* Cada opción del celular (el <label>): más baja, con menos relleno y con letra más pequeña */
  .escala__opcion label {
    min-height: 6.25rem; /* 100 px de alto (rem = veces la letra base, 16 px) en vez de 120 */
    padding: var(--espacio-2) 2px; /* dos valores: 8 px arriba y abajo, 2 px a los lados (más lugar al texto) */
    border-radius: var(--radio); /* esquinas redondeadas de 14 px (24 en pantallas grandes) */
    font-size: 0.75rem; /* letra de 12 px: los nombres largos ("Muy difícil") caben en la columna */
    gap: var(--espacio-1); /* 4 px entre la carita y el nombre */
  } /* fin de la regla .escala__opcion label (480 px o menos) */

  /* Las caritas del celular: más pequeñas (38 px en vez de 52) */
  .escala__opcion svg {
    width: 38px; /* 38 px de ancho */
    height: 38px; /* 38 px de alto */
  } /* fin de la regla .escala__opcion svg (480 px o menos) */
} /* fin de la media query para celulares (escala emocional) */

/* Caritas de la escala: el color del círculo cambia con el nivel */
/* Cada carita es un <svg class="carita nivel-N"> que dibuja crearCarita() de js/nubbit.js: aparecen en la
   bienvenida, en el registro, en el registro rápido del inicio y en el historial. En un dibujo SVG, fill es el
   color de RELLENO de una forma y stroke el color de su LÍNEA (trazo). */
/* El círculo de fondo. var(--variable, valor) lleva un valor de RESPALDO después de la coma: se usa si la
   variable no existe (aquí, si el svg no tiene clase nivel-N). */
.carita__fondo {
  fill: var(--color-carita, var(--nivel-3)); /* color del nivel (respaldo: el verde salvia del nivel 3) */
} /* fin de la regla .carita__fondo */

/* La boca de la carita: una línea curva o recta, según el nivel */
.carita__rasgo {
  fill: none; /* sin relleno: solo la línea */
  stroke: #2a2340; /* línea color tinta (#2a2340 en hexadecimal: violeta casi negro); no cambia de noche */
  stroke-width: 3; /* grosor de la línea (en unidades del dibujo, que mide 48 × 48) */
  stroke-linecap: round; /* puntas de la línea redondeadas: una boca más suave */
} /* fin de la regla .carita__rasgo */

/* Los dos ojos de la carita */
.carita__ojo {
  fill: #2a2340; /* círculos rellenos de color tinta */
} /* fin de la regla .carita__ojo */

/* Color de cada nivel: la clase nivel-N guarda su color en la variable --color-carita. Una variable definida
   en una clase vale para ese elemento y para todo lo que tiene adentro (se HEREDA). La usan el círculo de las
   caritas, el .punto de abajo y la franja de color de cada día del historial (.historial__dia). */
.nivel-1 { --color-carita: var(--nivel-1); } /* nivel 1 "Muy difícil": azul índigo */
.nivel-2 { --color-carita: var(--nivel-2); } /* nivel 2 "Difícil": azul */
.nivel-3 { --color-carita: var(--nivel-3); } /* nivel 3 "Más o menos": verde salvia */
.nivel-4 { --color-carita: var(--nivel-4); } /* nivel 4 "Bien": verde */
.nivel-5 { --color-carita: var(--nivel-5); } /* nivel 5 "Muy bien": dorado */

/* Punto de color del nivel (siempre acompañado de texto) */
/* (<span class="punto nivel-N"> que inicio.js pone antes de "Hoy registraste: Bien" en la tarjeta «Hoy») */
.punto {
  display: inline-block; /* va en la línea del texto, pero acepta ancho y alto */
  width: 0.9rem; /* unos 14 px de ancho */
  height: 0.9rem; /* el mismo alto: un cuadrado... */
  border-radius: 50%; /* ...con esquinas al 50 %: un círculo */
  background: var(--color-carita, var(--nivel-3)); /* color del nivel (respaldo: el del nivel 3) */
  flex-shrink: 0; /* en la fila flex de .resumen-hoy (más abajo) no se encoge aunque falte espacio */
} /* fin de la regla .punto */

/* ---------------------------------------------------------------------
   Chips de emociones (casillas de verificación con forma de pastilla)
   --------------------------------------------------------------------- */
/* Lista de emociones de registrar.html (<div class="chips__lista" id="opciones-emociones">), bajo la pregunta
   "¿Quieres ponerle nombre a lo que sientes?". registrar.js crea un .chip por emoción ("Alegría", "Calma"...). */
.chips__lista {
  display: flex; /* caja flexible: los chips en fila */
  flex-wrap: wrap; /* si no caben, siguen en la línea de abajo */
  gap: var(--espacio-2); /* 8 px entre chips y entre líneas */
  margin-top: var(--espacio-2); /* 8 px arriba */
} /* fin de la regla .chips__lista */

/* Cada chip: un <span class="chip"> con su casilla (invisible) y su <label> */
.chip {
  position: relative; /* referencia para la casilla, que va encima con position: absolute */
} /* fin de la regla .chip */

/* La casilla (<input type="checkbox">): invisible pero presente, igual que el radio de la escala */
.chip input {
  position: absolute; /* encima del chip, sin ocupar lugar */
  opacity: 0; /* transparente: no se ve, pero se puede tocar y usar con el teclado */
  width: 100%; /* todo el ancho del chip */
  height: 100%; /* todo el alto del chip */
  margin: 0; /* sin el margen que el navegador pone a las casillas */
} /* fin de la regla .chip input */

/* La pastilla visible con el nombre de la emoción */
.chip label {
  display: inline-flex; /* flex en línea: mide lo que su texto y permite centrarlo */
  align-items: center; /* texto centrado en vertical */
  min-height: 44px; /* al menos 44 px de alto: fácil de tocar con el dedo */
  padding: var(--espacio-1) var(--espacio-3); /* 4 px arriba y abajo, 16 px a los lados */
  border: 2px solid var(--color-borde-control); /* borde gris violeta de 2 px */
  border-radius: 999px; /* radio enorme: forma de pastilla (extremos redondos) */
  background: var(--color-superficie); /* fondo blanco */
  font-weight: 600; /* seminegrita */
  cursor: pointer; /* manito del mouse: se puede tocar */
} /* fin de la regla .chip label */

/* Chip MARCADO (el <label> justo después de una casilla marcada): se rellena de violeta */
.chip input:checked + label {
  border-color: var(--color-primario); /* borde violeta */
  background: var(--color-primario); /* fondo violeta */
  color: var(--color-sobre-primario); /* texto blanco */
} /* fin de la regla .chip input:checked + label */

/* Marca ✓ delante del nombre en los chips marcados: se ve cuáles están elegidos sin depender del color.
   ::before es un PSEUDO-ELEMENTO: una cajita que el CSS crea ANTES del contenido del <label>. */
.chip input:checked + label::before {
  content: "✓ "; /* su texto: la marca y un espacio */
  white-space: pre; /* respeta ese espacio final (si no, se perdería y la ✓ quedaría pegada al nombre) */
} /* fin de la regla .chip input:checked + label::before */

/* Chip desactivado: cuando ya hay 3 emociones elegidas (el máximo), registrar.js desactiva las demás.
   :disabled = el elemento está desactivado */
.chip input:disabled + label {
  opacity: 0.5; /* 50 % visible: se ve apagado */
  cursor: not-allowed; /* puntero de "prohibido": no se puede elegir */
} /* fin de la regla .chip input:disabled + label */

/* Foco del teclado en un chip: el contorno se dibuja en la pastilla */
.chip input:focus-visible + label {
  outline: 3px solid var(--color-foco); /* contorno azul de 3 px */
  outline-offset: 3px; /* separado 3 px de la pastilla */
} /* fin de la regla .chip input:focus-visible + label */

/* ---------------------------------------------------------------------
   Escena: el mundo de Nubbit
   --------------------------------------------------------------------- */
/* <section class="escena">: el recuadro con cielo y suelo donde vive Nubbit, en inicio.html y progreso.html.
   En el inicio el fondo cambia con el modo de la semana (atributo data-modo, ver las dos reglas de abajo). */
.escena {
  position: relative; /* referencia para ubicar los destellos (position: absolute) */
  overflow: hidden; /* lo que se salga del recuadro no se ve (y todo respeta las esquinas redondeadas) */
  display: grid; /* cuadrícula: sus hijos (la burbuja y Nubbit) quedan uno debajo del otro */
  place-items: center; /* todo centrado a lo alto y a lo ancho */
  min-height: 260px; /* alto mínimo */
  margin-bottom: var(--espacio-3); /* 16 px debajo */
  border-radius: var(--radio-grande); /* esquinas redondeadas de 24 px */
  isolation: isolate; /* capa propia: la estrella fugaz (::before) queda encima del cielo y DETRÁS de Nubbit */
  /* Varios fondos, uno encima del otro (el primero de la lista queda ENCIMA): estrellitas, una luna, un
     planeta con anillo, un planetita rosa, el suelo y el cielo. Los colores de la galaxia están en base.css
     (con un respaldo por si no existen). El suelo es la curva de un planetita: un óvalo grande con el
     centro debajo del recuadro (at 50% 120%), así asoma solo su parte de arriba, como un horizonte curvo. */
  background:
    radial-gradient(circle at 10% 12%, var(--galaxia-estrella, #fff) 0 1.5px, transparent 2px), /* estrellitas */
    radial-gradient(circle at 30% 7%, var(--galaxia-estrella, #fff) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47% 18%, var(--galaxia-estrella, #fff) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 9%, var(--galaxia-estrella, #fff) 0 1.5px, transparent 2px),
    radial-gradient(circle at 76% 44%, var(--galaxia-estrella, #fff) 0 1px, transparent 1.5px),
    radial-gradient(circle at 93% 60%, var(--galaxia-estrella, #fff) 0 1.5px, transparent 2px),
    radial-gradient(circle at 5% 50%, var(--galaxia-estrella, #fff) 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 64%, var(--galaxia-estrella, #fff) 0 1px, transparent 1.5px),
    radial-gradient(circle at 36% 38%, var(--galaxia-estrella, #fff) 0 1px, transparent 1.5px),
    /* luna arriba a la izquierda, con dos cráteres */
    radial-gradient(circle at calc(15% - 4px) calc(26% - 3px), var(--galaxia-luna-oscuro, #ddd) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(15% + 5px) calc(26% + 5px), var(--galaxia-luna-oscuro, #ddd) 0 2px, transparent 2.5px),
    radial-gradient(circle at 15% 26%, var(--galaxia-luna-claro, #fff) 0 14px, transparent 15px),
    /* planeta con anillo arriba a la derecha: el anillo (un óvalo hueco), el brillo y el planeta */
    radial-gradient(ellipse 54px 11px at 84% 22%, transparent 0 70%, var(--galaxia-anillo, #ccc) 73% 86%, transparent 89%),
    radial-gradient(circle at calc(84% - 9px) calc(22% - 9px), var(--galaxia-grande-claro, #eef) 0 4px, transparent 14px),
    radial-gradient(circle at 84% 22%, var(--galaxia-grande-oscuro, #9cf) 0 27px, transparent 28px),
    /* planetita rosa, a la derecha */
    radial-gradient(circle at 72% 62%, var(--galaxia-rosa-claro, #fce) 0 3px, var(--galaxia-rosa-oscuro, #e9b) 4px 8px, transparent 9px),
    /* suelo: la curva de un planetita (verde, como antes) */
    radial-gradient(ellipse 72% 36% at 50% 120%, var(--escena-suelo) 0 99%, transparent 100%),
    /* nebulosas suaves de color (azul arriba a la derecha y violeta abajo a la izquierda) */
    radial-gradient(ellipse 55% 45% at 78% 18%, color-mix(in srgb, var(--galaxia-nebulosa-2, transparent) 45%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 18% 70%, color-mix(in srgb, var(--galaxia-nebulosa-1, transparent) 50%, transparent), transparent 70%),
    linear-gradient(var(--escena-cielo-arriba), var(--escena-cielo-abajo)); /* cielo: de lila a durazno */
} /* fin de la regla .escena */

/* Escena de NOCHE: modo "oscuro" (4 o más días difíciles en la última semana; lo decide el servidor).
   [data-modo="oscuro"] = selector de ATRIBUTO: la escena cuyo data-modo vale "oscuro" (lo escribe inicio.js). */
.escena[data-modo="oscuro"] {
  /* Cinco DEGRADADOS RADIALES (el color sale en círculo desde un centro) dibujan estrellitas. "circle at 15% 20%"
     = centro a 15 % desde la izquierda y 20 % desde arriba; blanco (#fff) hasta 1,5 px y transparente desde
     2 px. Debajo van el suelo y el cielo de noche. */
  background:
    radial-gradient(circle at 15% 20%, #fff 0 1.5px, transparent 2px), /* estrellita arriba a la izquierda */
    radial-gradient(circle at 35% 12%, #fff 0 1px, transparent 1.5px), /* estrellita pequeña, arriba */
    radial-gradient(circle at 72% 18%, #fff 0 1.5px, transparent 2px), /* estrellita arriba a la derecha */
    radial-gradient(circle at 88% 32%, #fff 0 1px, transparent 1.5px), /* estrellita pequeña, a la derecha */
    radial-gradient(circle at 55% 28%, #fff 0 1px, transparent 1.5px), /* estrellita pequeña, al centro */
    linear-gradient(to top, var(--escena-oscuro-suelo) 0 18%, transparent 18%), /* suelo azul oscuro */
    linear-gradient(var(--escena-oscuro-arriba), var(--escena-oscuro-abajo)); /* cielo: azul noche a índigo */
} /* fin de la regla .escena[data-modo="oscuro"] */

/* Escena del AMANECER: modo "sol interior" (5 o más días agradables en la última semana) */
.escena[data-modo="sol_interior"] {
  /* Un sol arriba a la derecha (centro a 82 % y 22 %): amarillo pálido (#fff3c4) hasta 38 px del centro, un
     halo dorado de 40 a 64 px y transparente desde 66 px. rgb(255 214 120 / 0.55) = cuánto rojo, verde y azul
     (de 0 a 255) y, después de la barra, la opacidad: 0.55 = 55 % visible. Debajo, el suelo y el cielo. */
  background:
    /* capa de arriba: el sol amarillo pálido con su halo dorado */
    radial-gradient(circle at 82% 22%, #fff3c4 0 38px, rgb(255 214 120 / 0.55) 40px 64px, transparent 66px),
    linear-gradient(to top, var(--escena-sol-suelo) 0 18%, transparent 18%), /* suelo color arena */
    linear-gradient(var(--escena-sol-arriba), var(--escena-sol-abajo)); /* cielo: de amarillo a durazno */
} /* fin de la regla .escena[data-modo="sol_interior"] */

/* Estrella fugaz y destello de la escena normal (no en la noche ni en el amanecer, que tienen su propio
   cielo). Van detrás de Nubbit (z-index -1 dentro de la capa propia de la escena) y no reciben toques.
   Con "reducir movimiento", base.css deja la animación quieta y la estrella fugaz queda escondida. */
.escena:not([data-modo="oscuro"]):not([data-modo="sol_interior"])::before {
  content: ""; /* la estrella fugaz */
  position: absolute; /* sobre el cielo */
  z-index: -1; /* detrás de Nubbit */
  top: 14%; /* arriba a la derecha */
  left: 66%; /* (ídem) */
  width: 80px; /* largo de la cola */
  height: 2px; /* fina */
  border-radius: 2px; /* puntas redondas */
  background: linear-gradient(90deg, var(--galaxia-fugaz, #fff), transparent); /* cabeza brillante y cola */
  box-shadow: -1px 0 6px var(--galaxia-fugaz, #fff); /* un poco de brillo */
  opacity: 0; /* escondida hasta que cruza */
  transform-origin: left center; /* gira desde la cabeza */
  pointer-events: none; /* no recibe toques */
  animation: escena-fugaz 9s linear 1.5s infinite; /* cruza de vez en cuando */
} /* fin de la regla de la estrella fugaz de la escena */
@keyframes escena-fugaz {
  0% { opacity: 0; transform: rotate(-35deg) translateX(0); } /* aparece */
  3% { opacity: 1; } /* brilla */
  12% { opacity: 0; transform: rotate(-35deg) translateX(-200px); } /* cruzó y se apagó */
  100% { opacity: 0; transform: rotate(-35deg) translateX(-200px); } /* espera hasta la próxima vez */
} /* fin de @keyframes escena-fugaz */
.escena:not([data-modo="oscuro"]):not([data-modo="sol_interior"])::after {
  content: ""; /* un destello de cuatro puntas que titila despacio */
  position: absolute; /* sobre el cielo */
  z-index: -1; /* detrás de Nubbit */
  top: 36%; /* a la izquierda, a media altura */
  left: 28%; /* (ídem) */
  width: 18px; /* tamaño */
  height: 18px; /* cuadrado */
  background:
    linear-gradient(var(--galaxia-destello, #fff), var(--galaxia-destello, #fff)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--galaxia-destello, #fff), var(--galaxia-destello, #fff)) center / 100% 1.5px no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 70%); /* las puntas se desvanecen (Safari) */
  mask-image: radial-gradient(circle, #000 15%, transparent 70%); /* (ídem) */
  pointer-events: none; /* no recibe toques */
  animation: escena-titilar 3.5s ease-in-out infinite alternate; /* titila despacio */
} /* fin de la regla del destello de la escena */
@keyframes escena-titilar {
  from { opacity: 0.3; transform: scale(0.8); } /* tenue */
  to { opacity: 1; transform: scale(1.1); } /* brillante */
} /* fin de @keyframes escena-titilar */

/* Contenedor donde js/nubbit.js dibuja a Nubbit en la escena (<span id="nubbit"> en inicio.html y
   <div id="nubbit"> en progreso.html) */
.escena__nubbit {
  display: block; /* se comporta como bloque (un <span> normalmente va en línea con el texto) */
  width: min(240px, 70vw); /* min() elige el menor: 240 px o el 70 % del ancho de la ventana (vw) */
} /* fin de la regla .escena__nubbit */

/* En el inicio Nubbit es un botón: al tocarlo salta y dice una frase */
/* (<button class="escena__boton" id="tocar-nubbit"> de inicio.html; inicio.js escucha el toque). Aquí se le
   quita el aspecto de botón: solo se ve a Nubbit. */
.escena__boton {
  display: block; /* como bloque: ocupa su propia fila */
  padding: 0; /* sin el relleno de los botones */
  border: 0; /* sin borde */
  border-radius: var(--radio-grande); /* esquinas de 24 px: el contorno de foco sale redondeado */
  background: none; /* sin fondo: se ve el cielo de la escena */
  color: inherit; /* inherit = usa el mismo color que el elemento que lo contiene */
  cursor: pointer; /* manito del mouse: se puede tocar */
} /* fin de la regla .escena__boton */

/* Botón desactivado: empieza así en el HTML (disabled) y inicio.js lo activa cuando ya cargó las frases */
.escena__boton:disabled {
  cursor: default; /* puntero normal: todavía no responde */
} /* fin de la regla .escena__boton:disabled */

/* Nubbit con el foco del teclado */
.escena__boton:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul de 3 px */
  outline-offset: 4px; /* separado 4 px del dibujo */
} /* fin de la regla .escena__boton:focus-visible */

/* Clase que inicio.js le pone a Nubbit al tocarlo (y le quita al terminar, para que salte otra vez).
   La propiedad animation reproduce una ANIMACIÓN definida con @keyframes (justo abajo). */
.escena__nubbit--salta {
  animation: nubbit-salta 0.6s ease-out; /* animación "nubbit-salta" de 0,6 s; ease-out: empieza rápido y frena */
} /* fin de la regla .escena__nubbit--salta */

/* @keyframes define una ANIMACIÓN con nombre: cómo se ve el elemento en ciertos momentos (0 % = inicio,
   100 % = final) y el navegador rellena los pasos intermedios. Aquí, un salto con un rebotito.
   Con "reducir movimiento" (ver base.css) no hay salto: solo aparece la frase. */
@keyframes nubbit-salta {
  /* al inicio y al final: en su lugar */
  0%,
  100% { /* y al 100 % (el final): también en su lugar */
    transform: translateY(0); /* sin desplazamiento */
  } /* fin del paso 0 % y 100 % (en su lugar) */
  /* al 30 % del tiempo: lo más alto del salto */
  30% {
    transform: translateY(-22px); /* sube 22 px */
  } /* fin del paso 30 % (lo más alto del salto) */
  /* al 55 %: vuelve al piso */
  55% {
    transform: translateY(0); /* en su lugar */
  } /* fin del paso 55 % (de vuelta en el piso) */
  /* al 75 %: un rebotito */
  75% {
    transform: translateY(-7px); /* sube solo 7 px (y al 100 % vuelve a bajar) */
  } /* fin del paso 75 % (el rebotito) */
} /* fin de la animación nubbit-salta (@keyframes) */

/* Burbuja con lo que dice Nubbit. Vacía no se ve, pero sigue en la página:
   así el lector de pantalla anuncia la frase cuando aparece (aria-live). */
/* (<p class="burbuja" id="burbuja" aria-live="polite">, arriba de Nubbit en inicio.html; inicio.js escribe
   la frase cada vez que tocan a Nubbit) */
.burbuja {
  position: relative; /* referencia para la "colita" (::after), que va con position: absolute */
  /* ancho máximo: el menor entre 24rem (384 px) y el ancho de la escena menos 32 px. calc() hace cuentas:
     100 % menos dos veces 16 px (el margen de cada lado); así la burbuja nunca toca los bordes */
  max-width: min(24rem, calc(100% - 2 * var(--espacio-3)));
  margin: var(--espacio-3) var(--espacio-3) var(--espacio-2); /* 16 px arriba y a los lados, 8 px abajo */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  border-radius: var(--radio); /* esquinas redondeadas de 14 px */
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-texto); /* texto color tinta */
  box-shadow: var(--sombra); /* sombra suave: la burbuja flota sobre el cielo */
  font-weight: 700; /* negrita */
  text-align: center; /* texto centrado */
} /* fin de la regla .burbuja */

/* La "colita" de la burbuja apunta hacia Nubbit */
/* ::after = PSEUDO-ELEMENTO que el CSS crea DESPUÉS del contenido. Truco del triángulo: una cajita sin
   contenido con bordes gruesos transparentes; solo el borde de arriba tiene color y, como los bordes se unen
   en diagonal, queda un triángulo que apunta hacia abajo. */
.burbuja::after {
  content: ""; /* texto vacío: sin content, el pseudo-elemento no aparece */
  position: absolute; /* se ubica respecto a la burbuja */
  bottom: -9px; /* 9 px por debajo del borde de abajo: cuelga de la burbuja */
  left: 50%; /* su borde izquierdo en la mitad de la burbuja... */
  translate: -50% 0; /* ...y se corre la mitad de su propio ancho a la izquierda: queda centrada */
  border: 9px solid transparent; /* bordes transparentes de 9 px en los cuatro lados */
  border-bottom: 0; /* sin borde de abajo: el triángulo mide 9 px de alto */
  border-top-color: var(--color-superficie); /* solo el borde de arriba tiene color (blanco): el triángulo */
} /* fin de la regla .burbuja::after */

/* Burbuja vacía (todavía no han tocado a Nubbit). :empty = el elemento no tiene nada adentro.
   Se "aplasta" en vez de usar display: none, para que el lector de pantalla la siga escuchando. */
.burbuja:empty {
  margin: 0; /* sin márgenes: no ocupa lugar */
  padding: 0; /* sin relleno: mide 0 de alto */
  box-shadow: none; /* sin sombra: no se ve nada */
} /* fin de la regla .burbuja:empty */

/* La colita de la burbuja vacía */
.burbuja:empty::after {
  display: none; /* display: none = no se muestra ni ocupa lugar */
} /* fin de la regla .burbuja:empty::after */

/* Pista "Toca a Nubbit para saludarlo." debajo de la escena de inicio.html
   (<p class="campo__ayuda pista-nubbit">: también lleva la clase de los textos de ayuda) */
.pista-nubbit {
  margin: calc(-1 * var(--espacio-2)) 0 var(--espacio-3); /* -8 px arriba: se acerca a la escena; 16 px abajo */
  text-align: center; /* centrada, igual que Nubbit */
} /* fin de la regla .pista-nubbit */

/* Destellos cuando Nubbit llega a una etapa nueva (decorativos) */
/* (<span class="escena__destellos" id="destellos" aria-hidden="true"> de inicio.html, con cinco estrellitas ✦;
   inicio.js los muestra durante 6 segundos en la celebración) */
.escena__destellos span {
  position: absolute; /* se ubican sobre la escena (su referencia es .escena, que es relative) */
  color: var(--nubbit-color-estrella); /* amarillo estrella */
  font-size: 1.6rem; /* tamaño de la estrellita (unos 26 px) */
  line-height: 1; /* alto de línea igual al tamaño de la letra: la caja mide justo la estrella */
  text-shadow: 0 0 8px rgb(255 255 255 / 0.9); /* sombra de texto sin desplazar, blanca: un resplandor */
  animation: destello 1.6s ease-in-out infinite; /* titila: 1,6 s, suave al empezar y al terminar, sin fin */
} /* fin de la regla .escena__destellos span */

/* Posición de cada estrellita. :nth-child(n) elige un hijo por su posición (1 = el primero). top, left y
   right = distancia a ese borde de la escena, en % de su alto o de su ancho. animation-delay retrasa el
   comienzo de la animación: así titilan una tras otra y no todas a la vez. */
/* 1.ª estrellita: arriba a la izquierda; empieza enseguida */
.escena__destellos span:nth-child(1) { top: 14%; left: 14%; }
/* 2.ª: arriba a la derecha; empieza a los 0,3 s */
.escena__destellos span:nth-child(2) { top: 10%; right: 18%; animation-delay: 0.3s; }
/* 3.ª: a media altura, a la izquierda; empieza a los 0,6 s y es más pequeña (1,2rem) */
.escena__destellos span:nth-child(3) { top: 46%; left: 8%; animation-delay: 0.6s; font-size: 1.2rem; }
/* 4.ª: a media altura, a la derecha; empieza a los 0,9 s */
.escena__destellos span:nth-child(4) { top: 40%; right: 9%; animation-delay: 0.9s; }
/* 5.ª: arriba, al centro; empieza a los 1,2 s y es la más pequeña (1,1rem) */
.escena__destellos span:nth-child(5) { top: 26%; left: 50%; animation-delay: 1.2s; font-size: 1.1rem; }

/* Animación "destello": la estrellita se apaga y se achica, luego brilla y crece, y así sin parar */
@keyframes destello {
  /* al inicio y al final: tenue y pequeña */
  0%,
  100% { /* y al 100 % (el final): también tenue y pequeña */
    opacity: 0.25; /* 25 % visible */
    transform: scale(0.6); /* al 60 % de su tamaño */
  } /* fin del paso 0 % y 100 % (tenue y pequeña) */
  /* a la mitad: brillante y un poco más grande */
  50% {
    opacity: 1; /* totalmente visible */
    transform: scale(1.15); /* 15 % más grande */
  } /* fin del paso 50 % (brillante y más grande) */
} /* fin de la animación destello (@keyframes) */

/* ---------------------------------------------------------------------
   Nubbit (el SVG lo dibuja js/nubbit.js). Colores en tokens.css.
   --------------------------------------------------------------------- */
/* El <svg class="nubbit ..."> completo: en la bienvenida, entrar, crear cuenta, recuperar, inicio, progreso
   (grande y en el camino de etapas), actividades y respirar. Toma el tamaño del contenedor donde se dibuja. */
.nubbit {
  display: block; /* bloque: evita el espacito que queda debajo de las imágenes en línea */
  width: 100%; /* tan ancho como su contenedor (por ejemplo .escena__nubbit) */
  height: auto; /* alto automático: conserva la proporción del dibujo (un cuadrado de 200 × 200) */
  overflow: visible; /* deja ver lo que se sale del cuadro de 200 × 200 (como el resplandor del farolito) */
} /* fin de la regla .nubbit (el dibujo completo) */

/* Tonos de los degradados. Cada <stop> (un color de un degradado de nubbit.js) lleva una de estas clases y
   toma su color de las variables del estado de hoy ("Colores de Nubbit", más abajo). stop-color es el color de
   ese punto del degradado. Así un mismo dibujo cambia de color solo con la clase del <svg>. */
.nubbit__tono-profundo { stop-color: var(--nubbit-profundo); } /* el centro intenso del cuerpo */
.nubbit__tono-cuerpo { stop-color: var(--nubbit-cuerpo); } /* el tono medio */
.nubbit__tono-claro { stop-color: var(--nubbit-claro); } /* los bordes iluminados */
.nubbit__tono-acento { stop-color: var(--nubbit-acento); } /* el tinte de las orejas y la panza */
.nubbit__tono-luz { stop-color: var(--nubbit-luz); } /* el halo de las lucecitas */

/* Luz del borde: el contorno de la silueta (y de los brazos), claro y desenfocado. nubbit.js lo recorta al
   cuerpo, así el borde parece brillar por dentro, como una figura blanda iluminada desde atrás. */
.nubbit__borde-luz {
  fill: none; /* sin relleno: solo la línea */
  stroke: var(--nubbit-claro); /* línea del tono claro del estado de hoy */
  stroke-width: 6; /* gruesa: al desenfocarla se vuelve un resplandor */
} /* fin de la regla .nubbit__borde-luz */

/* La luz del borde de los brazos: más fina (los brazos son pequeños) */
.nubbit__borde-luz--fino {
  stroke-width: 3; /* 3 unidades del dibujo */
  opacity: 0.8; /* 80 % visible */
} /* fin de la regla .nubbit__borde-luz--fino */

/* Sombra suave que los brazos dejan sobre el cuerpo (da la sensación de que están delante) */
.nubbit__sombra-brazo {
  fill: var(--nubbit-profundo); /* del tono profundo: una sombra del mismo color, no gris */
  opacity: 0.5; /* 50 % visible */
} /* fin de la regla .nubbit__sombra-brazo */

/* Los ojos (abiertos o cerrados) */
.nubbit__ojo {
  fill: #232045; /* color tinta azulado, fijo: los ojos se ven igual de día y de noche */
} /* fin de la regla .nubbit__ojo */

/* Los circulitos blancos de los ojos abiertos: les dan brillo y vida */
.nubbit__brillo {
  fill: #fff; /* blanco (#fff es la forma corta de #ffffff) */
} /* fin de la regla .nubbit__brillo */

/* Rasgos hechos con líneas: los ojos cerrados, en rayita o felices (^), las cejas y las sonrisas */
.nubbit__trazo {
  fill: none; /* sin relleno: solo la línea */
  stroke: #232045; /* línea color tinta */
  stroke-width: 3; /* grosor de la línea */
  stroke-linecap: round; /* puntas redondeadas */
  stroke-linejoin: round; /* uniones redondeadas (donde la línea cambia de dirección) */
} /* fin de la regla .nubbit__trazo */

/* Cejas y sonrisas de las expresiones: un poco más finas, porque la cara de Nubbit es pequeña.
   Va después de .nubbit__trazo para ganarle (las dos reglas pesan lo mismo y gana la última). */
.nubbit__trazo--fino {
  stroke-width: 2.2; /* 2,2 unidades del dibujo */
} /* fin de la regla .nubbit__trazo--fino */

/* La boquita en "o" (etapa 2) y la naricita (etapas 4 y 5) */
.nubbit__boca,
.nubbit__nariz {
  fill: #232045; /* color tinta, como los ojos */
} /* fin de la regla .nubbit__boca y .nubbit__nariz */

/* Boca abierta de alegría (expresión del nivel 5 "Muy bien") */
.nubbit__boca-abierta {
  fill: #232045; /* rellena de color tinta */
} /* fin de la regla .nubbit__boca-abierta */

/* La lengua, dentro de la boca abierta */
.nubbit__lengua {
  fill: #f28b8b; /* rosado coral */
} /* fin de la regla .nubbit__lengua */

/* Mejillas rosadas de algunos gestos al hablar (cariño, guiño, atento...; ver cambiarGesto en nubbit.js) */
.nubbit__rubor {
  fill: #ff9aa2; /* rosado suave */
  opacity: 0.6; /* un poco transparentes: se ve el color de Nubbit debajo */
} /* fin de la regla .nubbit__rubor */

/* Cuando la cara cambia de gesto, aparece con un «pop» corto (base.css lo deja quieto con "reducir
   movimiento"). transform-box: fill-box = crece desde el centro de la cara, no desde la esquina del dibujo. */
.nubbit__cara--cambia {
  transform-box: fill-box; /* el centro es el de la cara */
  transform-origin: center; /* (ídem) */
  animation: nubbit-gesto 350ms ease-out; /* un instante */
} /* fin de la regla .nubbit__cara--cambia */
@keyframes nubbit-gesto {
  from { transform: scale(0.85); opacity: 0.4; } /* la cara nueva empieza un poco más pequeña y tenue */
  to { transform: scale(1); opacity: 1; } /* y queda en su lugar */
} /* fin de @keyframes nubbit-gesto */

/* Plumón del pecho de la etapa 5: un corazón de pelo del tono claro */
.nubbit__pecho {
  fill: var(--nubbit-claro); /* tono claro del estado de hoy */
  opacity: 0.6; /* 60 % visible: deja ver el color de debajo, como pelo más claro */
} /* fin de la regla .nubbit__pecho */

/* Las rayitas del plumón, como plumas */
.nubbit__pecho-raya {
  fill: none; /* solo la línea */
  stroke: var(--nubbit-cuerpo); /* del tono medio: se ven sobre el corazón claro */
  stroke-width: 1.3; /* finas */
  stroke-linecap: round; /* puntas redondeadas */
  opacity: 0.8; /* 80 % visible */
} /* fin de la regla .nubbit__pecho-raya */

/* Centro de las lucecitas de la etapa 5 (frente y palmas); su halo usa el tono luz */
.nubbit__luz {
  fill: #fff; /* blanco: el centro de la luz */
} /* fin de la regla .nubbit__luz */

/* Aros de agua de las etapas 4 y 5: una cinta ancha y transparente del tono claro */
.nubbit__aro {
  fill: none; /* solo la línea */
  stroke: var(--nubbit-claro); /* tono claro del estado de hoy */
  stroke-width: 6; /* ancha, como una cinta */
  stroke-linecap: round; /* puntas redondeadas */
  opacity: 0.7; /* 70 % visible: parece de cristal */
} /* fin de la regla .nubbit__aro */

/* El brillo fino que recorre cada aro */
.nubbit__aro-brillo {
  fill: none; /* solo la línea */
  stroke: #fff; /* blanco */
  stroke-width: 1.4; /* muy fina */
  stroke-linecap: round; /* puntas redondeadas */
  opacity: 0.85; /* 85 % visible */
} /* fin de la regla .nubbit__aro-brillo */

/* Burbujitas y chispas alrededor de los aros */
.nubbit__chispa {
  fill: #fff; /* blancas */
  stroke: var(--nubbit-cuerpo); /* con un borde finito del tono medio: se ven también sobre fondos claros */
  stroke-width: 0.5; /* borde muy fino */
  opacity: 0.9; /* 90 % visible */
} /* fin de la regla .nubbit__chispa */

/* La sombra del piso (<ellipse class="nubbit__sombra">) no tiene regla aquí: su color sale del degradado
   "sombra" de nubbit.js (el tono profundo que se desvanece), así es una sombra suave del color de Nubbit. */

/* Respiración: el <svg class="nubbit"> completo crece un poquito y vuelve, sin fin. Cada etapa ya tiene su propio
   tamaño en el dibujo (Nubbit crece con su forma), así que aquí no se escala por etapa.
   Se anima el <svg> entero, y no una parte de adentro, por rendimiento: así el navegador mueve el dibujo ya
   pintado y no tiene que volver a calcular los degradados y filtros (el pelo, la luz) en cada cuadro. */
.nubbit {
  /* transform-origin = el punto que queda quieto al cambiar el tamaño: abajo al centro, en el piso (el 90 % del
     alto: y = 180 de 200 en la cuadrícula del dibujo). Así Nubbit "respira" hacia arriba sin despegarse del piso. */
  transform-origin: 50% 90%;
  animation: nubbit-respira 5s ease-in-out infinite; /* "respira": 5 s por respiración, suave y sin fin */
} /* fin de la regla .nubbit (respiración) */

/* Respiración muy suave (se desactiva con "reducir movimiento", ver base.css) */
@keyframes nubbit-respira {
  /* al inicio y al final: el tamaño normal */
  0%,
  100% { /* y al 100 % (el final): el mismo tamaño */
    transform: scale(1); /* tamaño normal */
  } /* fin del paso 0 % y 100 % (tamaño normal) */
  /* a la mitad: "toma aire" */
  50% {
    transform: scale(1.025); /* crece un 2,5 % */
  } /* fin del paso 50 % (toma aire) */
} /* fin de la animación nubbit-respira (@keyframes) */

/* Colores de Nubbit según el estado (los valores están en tokens.css) */
/* nubbit.js pone en el <svg> la clase del registro de HOY: nubbit--sin-registro o nubbit--nivel-1 a 5. Cada una
   define las cinco variables que usan las reglas de arriba: --nubbit-profundo, --nubbit-cuerpo, --nubbit-claro,
   --nubbit-acento y --nubbit-luz. La emoción cambia el color (aquí) y la expresión (en nubbit.js); la forma
   depende de la etapa.
   Todos los colores son agradables: ningún estado se ve como un castigo. */
/* Sin registro hoy: azul y lavanda, los colores del diseño original */
.nubbit--sin-registro {
  --nubbit-profundo: var(--nubbit-base-profundo); /* centro intenso */
  --nubbit-cuerpo: var(--nubbit-base-cuerpo); /* tono medio */
  --nubbit-claro: var(--nubbit-base-claro); /* bordes iluminados */
  --nubbit-acento: var(--nubbit-base-acento); /* tinte de orejas y panza */
  --nubbit-luz: var(--nubbit-base-luz); /* lucecitas */
} /* fin de la regla .nubbit--sin-registro */
/* Nivel 1 "Muy difícil": azul índigo suave */
.nubbit--nivel-1 {
  --nubbit-profundo: var(--nubbit-1-profundo); /* centro intenso */
  --nubbit-cuerpo: var(--nubbit-1-cuerpo); /* tono medio */
  --nubbit-claro: var(--nubbit-1-claro); /* bordes iluminados */
  --nubbit-acento: var(--nubbit-1-acento); /* tinte de orejas y panza */
  --nubbit-luz: var(--nubbit-1-luz); /* lucecitas */
} /* fin de la regla .nubbit--nivel-1 */
/* Nivel 2 "Difícil": celeste */
.nubbit--nivel-2 {
  --nubbit-profundo: var(--nubbit-2-profundo); /* centro intenso */
  --nubbit-cuerpo: var(--nubbit-2-cuerpo); /* tono medio */
  --nubbit-claro: var(--nubbit-2-claro); /* bordes iluminados */
  --nubbit-acento: var(--nubbit-2-acento); /* tinte de orejas y panza */
  --nubbit-luz: var(--nubbit-2-luz); /* lucecitas */
} /* fin de la regla .nubbit--nivel-2 */
/* Nivel 3 "Más o menos": verde salvia */
.nubbit--nivel-3 {
  --nubbit-profundo: var(--nubbit-3-profundo); /* centro intenso */
  --nubbit-cuerpo: var(--nubbit-3-cuerpo); /* tono medio */
  --nubbit-claro: var(--nubbit-3-claro); /* bordes iluminados */
  --nubbit-acento: var(--nubbit-3-acento); /* tinte de orejas y panza */
  --nubbit-luz: var(--nubbit-3-luz); /* lucecitas */
} /* fin de la regla .nubbit--nivel-3 */
/* Nivel 4 "Bien": verde */
.nubbit--nivel-4 {
  --nubbit-profundo: var(--nubbit-4-profundo); /* centro intenso */
  --nubbit-cuerpo: var(--nubbit-4-cuerpo); /* tono medio */
  --nubbit-claro: var(--nubbit-4-claro); /* bordes iluminados */
  --nubbit-acento: var(--nubbit-4-acento); /* tinte de orejas y panza */
  --nubbit-luz: var(--nubbit-4-luz); /* lucecitas */
} /* fin de la regla .nubbit--nivel-4 */
/* Nivel 5 "Muy bien": amarillo dorado */
.nubbit--nivel-5 {
  --nubbit-profundo: var(--nubbit-5-profundo); /* centro intenso */
  --nubbit-cuerpo: var(--nubbit-5-cuerpo); /* tono medio */
  --nubbit-claro: var(--nubbit-5-claro); /* bordes iluminados */
  --nubbit-acento: var(--nubbit-5-acento); /* tinte de orejas y panza */
  --nubbit-luz: var(--nubbit-5-luz); /* lucecitas */
} /* fin de la regla .nubbit--nivel-5 */

/* Accesorios y objetos */
/* Se ganan con las semillas (contenido/progreso.json): bufanda en la etapa 2, hojita en la 3, capa en la 4 y
   estrellas en la 5. nubbit.js los acomoda a la forma de cada etapa. La mantita (nivel 1) y el farolito
   (modo "oscuro") no se ganan: acompañan. */
.nubbit__bufanda { fill: var(--nubbit-color-bufanda); } /* bufanda coral (con la mantita no se dibuja) */
/* Hojita de la cabeza: relleno verde claro y contorno verde oscuro de grosor 2 */
.nubbit__hojita { fill: var(--nubbit-color-hojita); stroke: #2f6b2a; stroke-width: 2; }
/* Tallo de la hojita: solo una línea verde oscura de grosor 3, con puntas redondeadas */
.nubbit__tallo { fill: none; stroke: #2f6b2a; stroke-width: 3; stroke-linecap: round; }
.nubbit__capa { fill: var(--nubbit-color-capa); } /* capa violeta (se dibuja detrás del cuerpo) */
/* Estrellas (accesorio de la etapa 5 y destellos del modo "sol interior"): amarillas con contorno ámbar */
.nubbit__estrella { fill: var(--nubbit-color-estrella); stroke: #b07a10; stroke-width: 1.5; }
/* Mantita del nivel 1: color durazno con contorno terracota de grosor 2,5 */
.nubbit__mantita { fill: var(--nubbit-color-mantita); stroke: #b8603f; stroke-width: 2.5; }
/* Borde de la mantita: línea blanca al 60 % y PUNTEADA. stroke-dasharray: 4 5 = trazos de 4 y huecos de 5,
   como una costura */
.nubbit__mantita-borde { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 2; stroke-dasharray: 4 5; }
/* Pliegue de la mantita (la orilla de la mitad que se cruza por delante): línea terracota con puntas redondas */
.nubbit__mantita-pliegue { fill: none; stroke: #b8603f; stroke-width: 2; stroke-linecap: round; }
/* Farolito del modo "oscuro": cuerpo amarillo cálido con contorno café de grosor 2,5 */
.nubbit__farol { fill: #ffd678; stroke: #7a5418; stroke-width: 2.5; }
/* Asa del farolito: línea café de grosor 3 con puntas redondeadas */
.nubbit__farol-palo { fill: none; stroke: #7a5418; stroke-width: 3; stroke-linecap: round; }

/* ---------------------------------------------------------------------
   Inicio
   --------------------------------------------------------------------- */
/* Esta sección reúne piezas de las páginas PRIVADAS (las que se ven después de entrar):
   - inicio.html: el resumen de hoy, las tarjetas del modo y de la celebración, el panel con Nubbit,
     el registro rápido con caritas, el resumen de semillas y los accesos rápidos a las actividades.
   - registrar.html: los pasos numerados, el botón "Guardar" pegado abajo en el celular y las ideas
     para escribir.
   - ajustes.html: las secciones que se abren y se cierran y la zona de cuidado ("Eliminar mi cuenta").
   Algunas se reutilizan en otras páginas: la lista de emociones (historial), la barra de avance y el
   resumen de semillas (progreso) y el enlace con flecha (ajustes).
   Varias las arma o las muestra JavaScript al recibir los datos: sobre todo js/paginas/inicio.js, y también
   registrar.js, historial.js, progreso.js y js/comun.js. */
/* Resumen de la tarjeta «Hoy» del inicio cuando ya hay registro: "Hoy registraste: Bien".
   Es un <p> que arma inicio.js (función mostrarHoy): un punto del color del nivel, el texto y el nombre
   del nivel en negrita (<strong>). */
.resumen-hoy {
  display: flex; /* FLEX (caja flexible): acomoda a sus hijos en fila (el punto, el texto y el nivel) */
  align-items: center; /* los centra en vertical */
  gap: var(--espacio-2); /* var() lee una variable de tokens.css: 8 px entre las partes */
  flex-wrap: wrap; /* si no caben en una línea, bajan a la siguiente en vez de salirse de la tarjeta */
} /* fin de la regla .resumen-hoy */

/* Lista de las emociones elegidas, cada una en una pastilla ("Calma", "Alegría"...). Es un <ul> con un <li>
   por emoción; la arman inicio.js (tarjeta «Hoy») y historial.js (la tarjeta de cada día). */
.lista-emociones {
  display: flex; /* las emociones en fila */
  flex-wrap: wrap; /* si no caben, siguen en la línea de abajo */
  gap: var(--espacio-1); /* 4 px entre pastillas */
  margin: var(--espacio-2) 0 0; /* tres valores = arriba, lados y abajo: solo 8 px arriba */
  padding: 0; /* quita la sangría que el navegador pone a las listas */
  list-style: none; /* sin viñetas */
} /* fin de la regla .lista-emociones */

/* Cada emoción de la lista: una pastilla lila con letra pequeña.
   ".lista-emociones li" = los <li> que están DENTRO de .lista-emociones (el espacio significa "dentro de") */
.lista-emociones li {
  padding: 0.1rem 0.7rem; /* dos valores = arriba y abajo 1,6 px, a los lados 11 px (1rem = 16 px) */
  border-radius: 999px; /* radio enorme: forma de "pastilla" (extremos redondos) */
  background: var(--color-superficie-suave); /* fondo lila muy claro */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .lista-emociones li */

/* La lista de emociones dentro de la tarjeta «Hoy» del inicio.
   # elige por id: #contenido-hoy es el <div id="contenido-hoy"> de inicio.html, que llena inicio.js.
   Un id pesa más que una clase, así que este margen le gana al de la regla .lista-emociones. */
#contenido-hoy .lista-emociones {
  margin-bottom: var(--espacio-3); /* 16 px debajo: la separa del aviso de la nota o del botón "Editar..." */
} /* fin de la regla #contenido-hoy .lista-emociones */

/* Aviso "Escribiste una nota (puedes leerla en tu historial)." de la tarjeta «Hoy» (lo agrega inicio.js).
   El inicio nunca recibe el texto de la nota: solo sabe si existe. */
.indicador-nota {
  margin-bottom: var(--espacio-3); /* 16 px debajo; le gana al margin: 0 de .campo__ayuda porque se lee después */
} /* fin de la regla .indicador-nota */

/* Tarjeta del modo activo en el inicio (<section id="tarjeta-modo">): "Nubbit encendió un farolito" (modo
   oscuro) o "Nubbit está brillando contigo" (sol interior). Solo se ve si hay un modo activo (inicio.js).
   "tarjeta--modo" es una VARIANTE de .tarjeta (nombre bloque--variante): cambia solo lo que se escribe aquí. */
.tarjeta--modo {
  border-width: 2px; /* borde de 2 px (una tarjeta normal tiene 1 px) */
  border-color: var(--color-primario); /* borde violeta: la tarjeta se destaca de las demás */
} /* fin de la regla .tarjeta--modo */

/* El desplegable "¿Por qué veo esto?" de esa tarjeta. <details> es una etiqueta de HTML que se abre y se
   cierra sola al tocar su título (<summary>), sin JavaScript. */
.tarjeta--modo details {
  margin-top: var(--espacio-3); /* 16 px de separación con los botones de arriba */
} /* fin de la regla .tarjeta--modo details */

/* Botones de una tarjeta que van juntos, más cerca del texto */
/* Variante de .acciones (la fila de botones). Está en la tarjeta del modo (inicio.html), en "Tus datos" y
   "Sesión" (ajustes.html) y bajo el jardín (progreso.html). */
.acciones--juntas {
  margin-top: var(--espacio-3); /* 16 px arriba, en vez de los 24 px de .acciones */
} /* fin de la regla .acciones--juntas */

/* Celebración suave: Nubbit llegó a una etapa nueva */
/* (<section id="tarjeta-evolucion"> del inicio: "¡Nubbit llegó a una etapa nueva!" y el botón "Ver mi
   progreso". Empieza oculta; inicio.js la muestra justo después de guardar el registro que lo logró.) */
.tarjeta--celebracion {
  border: 2px solid var(--color-aviso-borde); /* borde dorado de 2 px */
  /* DEGRADADO LINEAL (linear-gradient): el fondo pasa poco a poco de un color a otro. 135deg = en diagonal,
     hacia abajo a la derecha: blanco hasta el 40 % y de ahí se funde con el amarillo pálido de los avisos */
  background: linear-gradient(135deg, var(--color-superficie) 40%, var(--color-aviso-fondo));
} /* fin de la regla .tarjeta--celebracion */

/* Registro de hoy: cada parte en una tarjeta con su número de paso */
/* (el <form id="formulario"> de registrar.html). Los números 1, 2 y 3 los pone el CSS con un CONTADOR:
   counter-reset lo crea aquí en 0 y el título de cada paso le suma 1 (ver ::before más abajo). */
.formulario--registro {
  counter-reset: paso; /* crea el contador "paso" y lo pone en 0 */
} /* fin de la regla .formulario--registro */

/* Las tarjetas de los tres pasos, dentro del formulario de registro */
.formulario--registro .tarjeta {
  margin-bottom: 0; /* sin el margen de abajo de .tarjeta: el formulario (grid con gap) ya las separa 24 px */
} /* fin de la regla .formulario--registro .tarjeta */

/* La leyenda "flota" para quedar dentro de la tarjeta (y no sobre su borde) */
/* <fieldset> agrupa campos de un formulario y su <legend> es el título del grupo ("¿Cómo te sientes hoy?",
   "¿Quieres ponerle nombre a lo que sientes?"). El navegador dibuja la leyenda ENCIMA de la línea del borde.
   fieldset.paso = un <fieldset> con la clase paso; el signo > significa HIJO DIRECTO. */
fieldset.paso > legend {
  float: left; /* FLOTAR a la izquierda: deja de ir sobre el borde y se acomoda adentro, como un bloque */
  width: 100%; /* ocupa todo el ancho: nada se pone a su lado */
  margin-bottom: var(--espacio-2); /* 8 px debajo */
  padding: 0; /* sin el relleno que el navegador les pone a las leyendas */
  font-family: var(--fuente-titulos); /* letra redondeada de los títulos */
  font-size: var(--texto-grande); /* 20 px, como el título de una tarjeta */
  font-weight: 750; /* grosor entre negrita (700) y extra negrita (800) */
  line-height: 1.3; /* alto de línea de 1,3 veces la letra: compacto, como un título */
} /* fin de la regla fieldset.paso > legend */

/* Lo que va justo después de la leyenda (el texto de ayuda de cada paso).
   + = el HERMANO que sigue inmediatamente; * = cualquier elemento. */
fieldset.paso > legend + * {
  clear: both; /* "limpia" el flotado: empieza DEBAJO de la leyenda y no a su lado */
} /* fin de la regla fieldset.paso > legend + * (lo que sigue a la leyenda) */

/* Título del tercer paso, "Nota (opcional)". Ese paso es un <div> y no un fieldset, así que su título es la
   <label> del cuadro de texto: se le da el mismo aspecto que a las leyendas de los otros dos pasos.
   [for="nota"] = selector de ATRIBUTO: la <label> cuyo atributo for vale "nota" (la del <textarea id="nota">). */
.paso--nota label[for="nota"] {
  font-family: var(--fuente-titulos); /* letra redondeada */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 750; /* casi extra negrita, igual que las leyendas */
} /* fin de la regla .paso--nota label[for="nota"] */

/* El número del paso, en un círculo lila */
/* ::before es un PSEUDO-ELEMENTO: una cajita que el CSS crea ANTES del contenido de la leyenda (o de la
   etiqueta de la nota) sin que exista en el HTML. Aquí muestra el número del contador: 1, 2 o 3. */
fieldset.paso > legend::before,
.paso--nota label[for="nota"]::before { /* y el número del tercer paso (la etiqueta de la nota) */
  content: counter(paso); /* su texto es el valor del contador "paso" */
  counter-increment: paso; /* suma 1 al contador cada vez que aparece: 1, 2 y 3 */
  display: inline-grid; /* cuadrícula EN LÍNEA: va junto al texto y permite centrar el número */
  place-items: center; /* el número al centro, a lo alto y a lo ancho */
  width: 1.9rem; /* unos 30 px de ancho */
  height: 1.9rem; /* alto igual al ancho */
  margin-right: var(--espacio-2); /* 8 px entre el círculo y el texto del título */
  border-radius: 50%; /* esquinas redondeadas al 50 %: un círculo */
  background: var(--color-primario-suave); /* fondo lila */
  color: var(--color-primario); /* número violeta */
  font-size: 0.95rem; /* unos 15 px */
  font-weight: 800; /* extra negrita */
  vertical-align: 0.1em; /* lo sube un poquito (em = el tamaño de la letra) para alinearlo con el título */
} /* fin de la regla legend::before y label[for="nota"]::before */

/* La caja de ideas dentro del paso de la nota (entre la ayuda y el cuadro de texto) */
.paso--nota .idea-nota {
  margin: var(--espacio-2) 0; /* dos valores = 8 px arriba y abajo, 0 a los lados */
} /* fin de la regla .paso--nota .idea-nota */

/* En el celular, el botón "Guardar" queda pegado abajo (encima del menú) mientras se baja por el formulario */
/* MEDIA QUERY (@media): las reglas de adentro solo se aplican si se cumple la condición. max-width: 899px =
   pantallas de hasta 899 px de ancho: justo donde el menú principal va fijo abajo (ver base.css). */
@media (max-width: 899px) {
  /* <div class="barra-guardar"> de registrar.html: envuelve el botón "Guardar" */
  .barra-guardar {
    position: sticky; /* STICKY ("pegajosa"): mientras se baja por el formulario, se queda pegada abajo */
    /* A qué distancia del borde de abajo se pega: el alto del menú (68 px) + la zona segura + 8 px.
       calc() hace cuentas; env(safe-area-inset-bottom) = espacio de la barra de gestos del iPhone (o 0). */
    bottom: calc(var(--alto-menu-movil) + env(safe-area-inset-bottom) + var(--espacio-2));
    z-index: 5; /* orden de apilado: queda ENCIMA de las tarjetas que pasan por detrás al desplazarse */
  } /* fin de la regla .barra-guardar (899 px o menos) */
} /* fin de la media query de hasta 899 px (barra de Guardar) */

/* Ideas para escribir (registrar.html) */
/* (<div class="idea-nota" id="ideas"> dentro del paso de la nota: "¿No sabes qué escribir? Una idea:", la
   idea y los botones "Otra idea" y "Escribir sobre esta idea". Empieza oculta; registrar.js la muestra
   cuando cargan las ideas de contenido/actividades.json.) */
.idea-nota {
  padding: var(--espacio-3) var(--espacio-4); /* dos valores = 16 px arriba y abajo, 24 px a los lados */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  background: var(--color-superficie-suave); /* fondo lila muy claro: se distingue del resto de la tarjeta */
} /* fin de la regla .idea-nota */

/* Los párrafos de la caja de ideas */
.idea-nota p {
  margin: 0; /* sin márgenes: el espacio lo pone la regla .idea-nota__texto (más abajo) */
} /* fin de la regla .idea-nota p */

/* Primera línea de la caja: un bombillo (ícono "idea") y "¿No sabes qué escribir? Una idea:".
   El nombre "idea-nota__titulo" es bloque__elemento: una parte que vive dentro de .idea-nota. */
.idea-nota__titulo {
  display: flex; /* ícono y texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-1); /* 4 px entre ellos */
  color: var(--color-texto-suave); /* gris violeta: es una línea secundaria */
  font-size: var(--texto-pequeno); /* 14 px */
  font-weight: 700; /* negrita */
} /* fin de la regla .idea-nota__titulo */

/* El bombillo de esa línea */
.idea-nota__titulo .icono {
  color: var(--color-primario); /* violeta (el ícono se dibuja con el color del texto) */
} /* fin de la regla .idea-nota__titulo .icono */

/* Secciones que se abren y se cierran (por ejemplo, "Cambiar contraseña" en Ajustes) */
/* (<details class="desplegable"> de ajustes.html: "Cambiar contraseña" y "Código de recuperación nuevo".
   Como todo <details>, el navegador lo abre y lo cierra al tocar su <summary>, sin JavaScript.) */
.desplegable {
  border-top: 1px solid var(--color-borde); /* línea fina arriba: separa cada desplegable de lo anterior */
} /* fin de la regla .desplegable */

/* El título que se toca para abrir o cerrar ("Cambiar contraseña"), con una flechita a la derecha */
.desplegable summary {
  display: flex; /* en fila: el texto y la flechita (::after) */
  align-items: center; /* centrados en vertical */
  justify-content: space-between; /* reparte el espacio: el texto a la izquierda y la flecha a la derecha */
  gap: var(--espacio-2); /* al menos 8 px entre ellos */
  min-height: 52px; /* alto cómodo para tocar con el dedo */
  color: var(--color-primario); /* violeta: se puede tocar */
  font-weight: 700; /* negrita */
  cursor: pointer; /* con el mouse encima, el puntero se vuelve una manito */
  list-style: none; /* quita el triángulo que el navegador le pone al <summary> (hay una flecha propia) */
} /* fin de la regla .desplegable summary */

/* El mismo triángulo en Safari: allí se quita con este pseudo-elemento, que lleva el PREFIJO -webkit- */
.desplegable summary::-webkit-details-marker {
  display: none; /* no se muestra */
} /* fin de la regla .desplegable summary::-webkit-details-marker */

/* Flechita que gira al abrir */
/* ::after es un PSEUDO-ELEMENTO: una cajita que el CSS dibuja DESPUÉS del texto del <summary>. La flecha es un
   cuadradito con solo dos bordes (derecho e inferior) girado 45 grados: parece una "v" que apunta abajo. */
.desplegable summary::after {
  content: ""; /* texto vacío; sin la propiedad content, el pseudo-elemento no aparece */
  width: 0.55em; /* ancho del cuadradito (em = el tamaño de la letra: crece con el texto) */
  height: 0.55em; /* alto igual al ancho */
  margin-right: 6px; /* 6 px de aire con el borde derecho (al girar, las puntas sobresalen un poco) */
  border-right: 2px solid currentColor; /* borde derecho del color del texto (currentColor: aquí, violeta) */
  border-bottom: 2px solid currentColor; /* borde de abajo, del mismo color */
  transform: rotate(45deg); /* transform cambia cómo se dibuja: lo gira 45 grados y la "v" apunta abajo */
  transition: transform var(--transicion-rapida); /* TRANSICIÓN: el giro ocurre poco a poco (0,15 s) */
} /* fin de la regla .desplegable summary::after */

/* La flecha con el desplegable abierto. [open] = selector de ATRIBUTO: el navegador le pone el atributo
   open al <details> mientras está abierto y se lo quita al cerrarlo. */
.desplegable[open] summary::after {
  transform: rotate(-135deg); /* gira hacia el otro lado: la "v" apunta hacia arriba */
} /* fin de la regla .desplegable[open] summary::after */

/* El desplegable abierto */
.desplegable[open] {
  padding-bottom: var(--espacio-3); /* 16 px de relleno abajo: lo de adentro no queda pegado a lo que sigue */
} /* fin de la regla .desplegable[open] */

/* Zona de cuidado: la acción que no se puede deshacer */
/* (tarjeta "Eliminar mi cuenta" al final de ajustes.html, separada del resto para no tocarla por error) */
.tarjeta--peligro {
  border: 2px solid var(--color-error); /* borde rojo de 2 px: avisa que es una acción seria */
} /* fin de la regla .tarjeta--peligro */

/* La insignia de esa tarjeta (el ícono de la basura): variante roja de .insignia */
.insignia--peligro {
  background: var(--color-error-fondo); /* fondo rosa muy claro */
  color: var(--color-error); /* ícono rojo */
} /* fin de la regla .insignia--peligro */

/* La idea en sí (<p id="idea">, la escribe registrar.js), por ejemplo una pregunta para empezar a escribir.
   Con dos clases, este selector es más ESPECÍFICO que ".idea-nota p" y por eso le gana en el margen. */
.idea-nota .idea-nota__texto {
  margin: var(--espacio-1) 0; /* 4 px arriba y abajo */
  font-size: 1.1rem; /* unos 18 px: más grande que el texto normal */
  font-weight: 700; /* negrita */
} /* fin de la regla .idea-nota .idea-nota__texto */

/* Fila de botones de la caja: "Otra idea" y "Escribir sobre esta idea" (botones con aspecto de enlace) */
.idea-nota__acciones {
  display: flex; /* en fila */
  flex-wrap: wrap; /* si no caben, el segundo baja a otra línea */
  gap: 0 var(--espacio-4); /* dos valores = 0 entre filas y 24 px entre columnas */
} /* fin de la regla .idea-nota__acciones */

/* "¿Por qué veo esto?": el <summary> que abre la explicación en la tarjeta del modo (inicio.html) */
.tarjeta--modo summary {
  min-height: 44px; /* área mínima de 44 px: fácil de tocar */
  display: flex; /* caja flexible: permite centrar el texto en vertical */
  align-items: center; /* texto centrado en vertical */
  color: var(--color-primario); /* violeta: se puede tocar */
  font-weight: 700; /* negrita */
  cursor: pointer; /* manito al pasar el mouse */
} /* fin de la regla .tarjeta--modo summary */

/* Resumen de semillas: el ícono de la semilla y "5 semillas · Etapa 2: ...", en fila. Lo arma inicio.js en
   la tarjeta «Tu progreso»; en progreso.html es el <div id="semillas">, que llena progreso.js. */
.mini-progreso {
  display: flex; /* ícono y texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-3); /* 16 px entre ellos */
} /* fin de la regla .mini-progreso */

/* El texto de ese resumen */
.mini-progreso p {
  margin: 0; /* sin márgenes: queda centrado junto al ícono */
} /* fin de la regla .mini-progreso p */

/* Ícono de la semilla: un SVG fijo de nubbit.js (ICONO_SEMILLA), una semilla café con dos hojitas */
.icono-semilla {
  width: 40px; /* ancho */
  height: 40px; /* alto */
  flex-shrink: 0; /* dentro de la fila flex no se encoge aunque el texto sea largo */
} /* fin de la regla .icono-semilla */

/* Barra de avance (decorativa: el dato siempre va escrito al lado) */
/* (un <div class="barra"> con un <span> adentro; lo crea crearBarra() de comun.js en el inicio y en
   progreso.html. Muestra cuánto falta para la siguiente etapa de Nubbit. Tiene aria-hidden="true": el
   lector de pantalla la salta y lee el texto que va al lado.) */
.barra {
  height: 10px; /* alto de la barra */
  margin: var(--espacio-3) 0 var(--espacio-2); /* 16 px arriba y 8 px abajo */
  overflow: hidden; /* lo que se salga no se ve: el relleno respeta las esquinas redondeadas */
  border-radius: 999px; /* forma de pastilla */
  background: var(--color-superficie-suave); /* el "riel" vacío: lila muy claro */
} /* fin de la regla .barra */

/* El relleno de color que avanza; su ancho (por ejemplo "50%") lo pone crearBarra() desde JavaScript */
.barra span {
  display: block; /* un <span> va en línea y no acepta alto; como bloque, sí */
  height: 100%; /* todo el alto de la barra */
  border-radius: inherit; /* inherit = el mismo valor que su padre: las esquinas redondas de la barra */
  /* degradado de izquierda a derecha (90deg): del verde de la hojita de Nubbit al verde del nivel 4 */
  background: linear-gradient(90deg, var(--nubbit-color-hojita), var(--nivel-4));
} /* fin de la regla .barra span */

/* Enlace con flecha al final ("Ver mi progreso →") */
/* (en inicio.html: "Ver mi progreso" y "Prefiero el registro completo", que agrega inicio.js; en ajustes.html:
   "Cómo cuidamos tus datos". La flecha es el ícono flecha-derecha de img/iconos.svg.) */
.enlace-flecha {
  display: inline-flex; /* flex EN LÍNEA: texto y flecha en fila, sin ocupar todo el ancho */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-1); /* 4 px entre el texto y la flecha */
  min-height: 44px; /* área cómoda para tocar */
  font-weight: 700; /* negrita */
} /* fin de la regla .enlace-flecha */

/* La flecha de esos enlaces */
.enlace-flecha .icono {
  width: 1.1em; /* 1,1 veces la letra: un poco más pequeña que los demás íconos (1,4em) */
  height: 1.1em; /* alto igual */
  transition: transform var(--transicion-rapida); /* se desliza poco a poco (0,15 s) */
} /* fin de la regla .enlace-flecha .icono */

/* Con el mouse encima del enlace, la flecha se corre un poquito: invita a seguir.
   :hover es una PSEUDO-CLASE: elige un elemento según su estado (aquí, "el mouse está encima"). */
.enlace-flecha:hover .icono {
  transform: translateX(3px); /* la mueve 3 px a la derecha */
} /* fin de la regla .enlace-flecha:hover .icono */

/* Inicio como panel: fecha y saludo, y dos columnas en pantallas grandes */
/* (<div class="encabezado-panel"> arriba de inicio.html: la fecha de hoy y el saludo) */
.encabezado-panel {
  margin-bottom: var(--espacio-4); /* 24 px antes del panel */
} /* fin de la regla .encabezado-panel */

/* La fecha ("Martes, 29 de septiembre"), que inicio.js escribe en el <p id="fecha-hoy"> */
.encabezado-panel__fecha {
  margin: 0 0 var(--espacio-1); /* solo 4 px abajo: pegada al saludo */
  color: var(--color-texto-suave); /* gris violeta */
  font-weight: 700; /* negrita */
} /* fin de la regla .encabezado-panel__fecha */

/* El saludo (<h1 id="saludo">), por ejemplo "Buenas tardes, luna" */
.encabezado-panel h1 {
  margin: 0; /* sin márgenes: el espacio de abajo lo pone .encabezado-panel */
} /* fin de la regla .encabezado-panel h1 */

/* <div class="panel"> de inicio.html, con dos partes: .panel__principal (Nubbit, lo que dice y la celebración)
   y .panel__lateral (las tarjetas «Hoy», del modo, «Tu progreso» y «Un momento para ti»).
   GRID (cuadrícula): ordena a los hijos en filas y columnas. En el celular hay una sola columna. */
.panel {
  display: grid; /* cuadrícula (de una columna: una parte debajo de la otra) */
  gap: 0 var(--espacio-5); /* 0 entre filas y 40 px entre columnas */
  align-items: start; /* cada parte arriba de su celda, sin estirarse: así funciona el sticky de abajo */
} /* fin de la regla .panel */

/* Desde 900 px de ancho (computadores y tabletas grandes): el panel pasa a dos columnas */
@media (min-width: 900px) {
  /* El panel: Nubbit a la izquierda y las tarjetas a la derecha */
  .panel {
    grid-template-columns: 1.1fr 1fr; /* dos columnas; fr = parte del espacio libre (1,1 partes y 1 parte) */
  } /* fin de la regla .panel (900 px o más) */

  /* Nubbit se queda a la vista mientras se recorren las tarjetas */
  /* (.panel__principal es la columna de Nubbit) */
  .panel__principal {
    position: sticky; /* STICKY ("pegajosa"): baja con la página hasta cierta altura y ahí se queda */
    top: calc(4rem + var(--espacio-4)); /* se pega a 88 px de arriba: 64 px de la cabecera + 24 px de aire */
  } /* fin de la regla .panel__principal (900 px o más) */

  /* La escena de Nubbit del inicio (<section class="escena escena--panel">), más alta */
  .escena--panel {
    min-height: 26rem; /* alto mínimo de 416 px (la escena normal mide 260 px) */
  } /* fin de la regla .escena--panel (900 px o más) */

  /* Nubbit dentro de esa escena, más grande */
  .escena--panel .escena__nubbit {
    width: 17rem; /* 272 px de ancho */
  } /* fin de la regla .escena--panel .escena__nubbit (900 px o más) */
} /* fin de la media query de 900 px o más (panel del inicio) */

/* Registro rápido: cinco caritas que guardan el nivel con un toque */
/* (en la tarjeta «Hoy» del inicio cuando todavía no hay registro; lo arma crearRegistroRapido() de
   inicio.js). Primero, la pregunta "¿Cómo te sientes hoy?" que va arriba de las caritas: */
.registro-rapido__pregunta {
  margin: 0 0 var(--espacio-2); /* solo 8 px abajo, antes de las caritas */
  font-family: var(--fuente-titulos); /* letra redondeada */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 750; /* casi extra negrita, como los títulos de los pasos del registro */
} /* fin de la regla .registro-rapido__pregunta */

/* La fila de las cinco caritas */
.registro-rapido__opciones {
  display: grid; /* cuadrícula */
  grid-template-columns: repeat(5, 1fr); /* repeat(5, 1fr) = cinco columnas iguales, una por carita */
  gap: var(--espacio-2); /* 8 px entre caritas */
  margin-bottom: var(--espacio-2); /* 8 px debajo, antes del texto de ayuda */
} /* fin de la regla .registro-rapido__opciones */

/* Cada carita es un <button>: el dibujo arriba y el nombre del nivel abajo ("Muy difícil"... "Muy bien") */
.registro-rapido__opcion {
  display: grid; /* cuadrícula de una columna: carita arriba y nombre abajo */
  justify-items: center; /* todo centrado a lo ancho */
  align-content: start; /* todo arriba: las caritas quedan alineadas aunque un nombre ocupe dos líneas */
  gap: var(--espacio-1); /* 4 px entre la carita y el nombre */
  min-height: 5.5rem; /* alto mínimo de 88 px: fácil de tocar */
  padding: var(--espacio-2) 2px; /* 8 px arriba y abajo y solo 2 px a los lados, para que quepa el texto */
  border: 2px solid var(--color-borde-control); /* borde gris violeta de 2 px */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-texto); /* texto oscuro */
  font: inherit; /* hereda la letra de la página (los botones traen otra por defecto) */
  font-size: 0.8125rem; /* 13 px: letra pequeña para que quepan los cinco nombres */
  font-weight: 700; /* negrita */
  line-height: 1.2; /* líneas juntas (algunos nombres ocupan dos líneas) */
  cursor: pointer; /* manito al pasar el mouse */
  /* TRANSICIÓN: el movimiento, el fondo y el borde del :hover cambian poco a poco (0,15 s) */
  transition: transform var(--transicion-rapida), background-color var(--transicion-rapida),
    border-color var(--transicion-rapida); /* un valor largo puede seguir en otra línea: termina en el ";" */
} /* fin de la regla .registro-rapido__opcion */

/* Carita con el mouse encima, solo si NO está desactivada: se levanta y se pinta de lila.
   :disabled = botón desactivado; :not(...) = "que NO cumpla esto". */
.registro-rapido__opcion:not(:disabled):hover {
  transform: translateY(-2px); /* sube 2 px (translateY mueve en vertical; negativo = hacia arriba) */
  border-color: var(--color-primario); /* borde violeta */
  background: var(--color-primario-suave); /* fondo lila */
} /* fin de la regla .registro-rapido__opcion:not(:disabled):hover */

/* Caritas desactivadas mientras se guarda (inicio.js las desactiva para que no se guarde dos veces) */
.registro-rapido__opcion:disabled {
  opacity: 0.6; /* 60 % visibles: se ven apagadas */
  cursor: progress; /* puntero de "trabajando": se está guardando */
} /* fin de la regla .registro-rapido__opcion:disabled */

/* El dibujo de cada carita (el SVG que hace crearCarita() de nubbit.js) */
.registro-rapido__opcion svg {
  width: 40px; /* ancho */
  height: 40px; /* alto */
} /* fin de la regla .registro-rapido__opcion svg */

/* Celulares muy angostos (400 px o menos): letra y caritas más pequeñas para que quepan las cinco */
@media (max-width: 400px) {
  /* Cada botón de carita */
  .registro-rapido__opcion {
    font-size: 0.75rem; /* 12 px */
  } /* fin de la regla .registro-rapido__opcion (400 px o menos) */

  /* El dibujo de cada carita */
  .registro-rapido__opcion svg {
    width: 34px; /* ancho */
    height: 34px; /* alto */
  } /* fin de la regla .registro-rapido__opcion svg (400 px o menos) */
} /* fin de la media query de 400 px o menos (registro rápido) */

/* Accesos rápidos a las actividades */
/* (<ul class="accesos"> de la tarjeta «Un momento para ti» del inicio: "Respira con Nubbit",
   "5-4-3-2-1: vuelve al presente" y "Memoria de emociones") */
.accesos {
  display: grid; /* uno debajo del otro */
  gap: var(--espacio-2); /* 8 px entre accesos */
  margin: 0; /* sin márgenes de lista */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .accesos */

/* Cada acceso es un enlace grande: el ícono de la actividad, su nombre y una flecha al final */
.accesos a {
  display: flex; /* en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-3); /* 16 px entre las partes */
  min-height: 52px; /* alto cómodo para tocar */
  padding: 0 var(--espacio-3); /* 16 px a los lados */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  background: var(--color-superficie-suave); /* fondo lila muy claro */
  color: var(--color-texto); /* texto oscuro (no el violeta de los enlaces) */
  font-weight: 700; /* negrita */
  text-decoration: none; /* sin subrayado */
  /* el fondo y el color cambian suavemente al pasar el mouse */
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
} /* fin de la regla .accesos a */

/* Acceso con el mouse encima */
.accesos a:hover {
  background: var(--color-primario-suave); /* fondo lila */
  color: var(--color-primario); /* texto violeta */
} /* fin de la regla .accesos a:hover */

/* Los íconos de cada acceso (el de la actividad y la flecha) */
.accesos .icono {
  color: var(--color-primario); /* violeta */
} /* fin de la regla .accesos .icono */

/* La flecha al final de cada acceso (<svg class="icono accesos__flecha">) */
.accesos__flecha {
  margin-left: auto; /* margen automático a la izquierda: empuja la flecha al extremo derecho */
  width: 1.1em !important; /* más pequeña que el ícono de la actividad; !important le gana a otras reglas */
  height: 1.1em !important; /* alto igual */
} /* fin de la regla .accesos__flecha */

/* ---------------------------------------------------------------------
   Historial
   --------------------------------------------------------------------- */
/* Todo lo de historial.html (lo arma js/paginas/historial.js): la fila para cambiar de mes, el calendario
   de caritas con su leyenda y la lista de registros del mes (una tarjeta por cada día registrado). */
/* Fila de arriba: «Anterior», el nombre del mes y «Siguiente» (<div class="navegacion-mes" role="group">).
   FLEX (caja flexible): acomoda a los hijos en una fila o en una columna y reparte el espacio entre ellos. */
.navegacion-mes {
  display: flex; /* los dos botones y el mes en una fila */
  align-items: center; /* centrados en vertical */
  justify-content: space-between; /* «Anterior» a la izquierda, «Siguiente» a la derecha y el mes al medio */
  gap: var(--espacio-2); /* var() lee una variable de tokens.css: 8 px de separación entre ellos */
  margin-bottom: var(--espacio-3); /* 16 px debajo */
} /* fin de la regla .navegacion-mes */

/* El nombre del mes (<h2 id="titulo-mes">: historial.js escribe, por ejemplo, "Septiembre de 2026").
   ".navegacion-mes h2" = los h2 que están DENTRO de .navegacion-mes (el espacio significa "descendiente de") */
.navegacion-mes h2 {
  margin: 0; /* sin los márgenes que base.css da a los h2 (40 px arriba y 16 px abajo) */
  text-align: center; /* texto centrado */
} /* fin de la regla .navegacion-mes h2 */

/* Los botones «Anterior» y «Siguiente» (usan la clase .boton, de la sección Botones de este archivo) */
.navegacion-mes .boton {
  padding-inline: var(--espacio-3); /* 16 px a cada lado (inline = izquierda y derecha); un .boton usa 24 */
  white-space: nowrap; /* el texto del botón nunca se parte en dos líneas */
} /* fin de la regla .navegacion-mes .boton */

/* En pantallas angostas: el mes arriba y los dos botones debajo, del mismo ancho */
/* 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í cada pantalla recibe su diseño (DISEÑO ADAPTABLE). */
@media (max-width: 480px) {
  /* La fila de navegación */
  .navegacion-mes {
    flex-wrap: wrap; /* si los hijos no caben en una línea, pueden pasar a la siguiente */
  } /* fin de la regla .navegacion-mes (480 px o menos) */

  /* El nombre del mes */
  .navegacion-mes h2 {
    order: -1; /* order cambia el orden en pantalla: -1 lo pone ANTES que los botones (arriba) */
    flex-basis: 100%; /* mide todo el ancho de la línea: los botones tienen que bajar a la siguiente */
  } /* fin de la regla .navegacion-mes h2 (480 px o menos) */

  /* Los dos botones */
  .navegacion-mes .boton {
    flex: 1; /* crecen por igual y se reparten la línea: quedan del mismo ancho */
  } /* fin de la regla .navegacion-mes .boton (480 px o menos) */
} /* fin de la media query para celulares (navegación del mes) */

/* Calendario del mes: 7 columnas, de domingo a sábado */
/* (<table class="calendario"> de historial.html: historial.js pone una fila <tr> por semana y una casilla
   <td> por día. Los días sin registro quedan en blanco, sin marcas: no pasa nada por no registrar.) */
.calendario {
  width: 100%; /* todo el ancho disponible */
  margin-bottom: var(--espacio-2); /* 8 px debajo, antes de la leyenda */
  padding: var(--espacio-2); /* 8 px de relleno */
  border: 1px solid var(--color-borde); /* borde: grosor, tipo de línea (solid = continua) y color lila claro */
  border-radius: var(--radio-grande); /* esquinas redondeadas (24 px) */
  border-spacing: 3px; /* espacio entre casilla y casilla de la tabla: cada día se ve como una cajita aparte */
  background: var(--color-superficie); /* fondo blanco (u oscuro de noche) */
  table-layout: fixed; /* las 7 columnas miden lo mismo (el ancho no depende de lo que tenga cada casilla) */
  text-align: center; /* letras y números centrados */
} /* fin de la regla .calendario */

/* Encabezados de las columnas: las iniciales D, L, M, M, J, V y S (<th> = celda de título de la tabla) */
.calendario th {
  padding-bottom: var(--espacio-1); /* 4 px de relleno debajo, antes de los días */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .calendario th */

/* Cada casilla de día (<td> = celda de datos): vacía, con solo el número o con el botón de un registro */
.calendario td {
  height: 3.4rem; /* unos 54 px (rem = veces la letra base del navegador, normalmente 16 px) */
  padding: 0; /* sin relleno: el botón del día llena toda la casilla */
  border-radius: var(--radio); /* esquinas redondeadas (14 px): se notan en el anillo del día de hoy */
  color: var(--color-texto-suave); /* número de los días sin registro en gris violeta: discreto */
  font-size: var(--texto-pequeno); /* 14 px */
  vertical-align: middle; /* contenido centrado a lo alto de la casilla */
} /* fin de la regla .calendario td */

/* Día con registro: botón con la carita del nivel y el número */
/* (<button class="calendario__dia"> que crea historial.js; al tocarlo lleva a ese registro en la lista.
   GRID (cuadrícula): ordena a los hijos en filas y columnas.) */
.calendario__dia {
  display: grid; /* cuadrícula de una columna: la carita arriba y el número abajo */
  place-items: center; /* cada uno centrado en su celda, a lo alto y a lo ancho */
  align-content: center; /* el grupo (carita y número) centrado a lo alto del botón */
  gap: 1px; /* 1 px entre la carita y el número */
  width: 100%; /* todo el ancho de la casilla... */
  height: 100%; /* ...y todo su alto */
  min-height: 3.4rem; /* como mínimo, el alto de la casilla (unos 54 px) */
  padding: 2px 0; /* dos valores = 2 px arriba y abajo, 0 a los lados */
  border: 0; /* sin el borde que el navegador pone a los botones */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  background: var(--color-superficie-suave); /* fondo lila muy claro: los días con registro se distinguen */
  color: var(--color-texto); /* número en color tinta */
  font: inherit; /* usa la letra de la página (los botones no la heredan solos) */
  font-size: 0.8rem; /* unos 13 px: letra pequeña para que quepa en la casilla */
  font-weight: 700; /* negrita */
  line-height: 1; /* alto de línea igual al tamaño de la letra: sin espacio de más */
  cursor: pointer; /* el puntero del mouse se vuelve una manito: se puede tocar */
} /* fin de la regla .calendario__dia */

/* Día con registro con el mouse encima.
   :hover es una PSEUDO-CLASE: elige el elemento según su estado (aquí, el puntero está encima) */
.calendario__dia:hover {
  outline: 2px solid var(--color-borde-control); /* contorno gris violeta por fuera (no cambia el tamaño) */
} /* fin de la regla .calendario__dia:hover */

/* La carita dentro del botón del día (el <svg class="carita"> que dibuja crearCarita, en js/nubbit.js) */
.calendario__dia .carita {
  width: 26px; /* ancho */
  height: 26px; /* alto */
} /* fin de la regla .calendario__dia .carita */

/* Hoy: un anillo alrededor del día (con o sin registro) */
/* (.calendario__hoy es la casilla <td> de hoy: se la pone historial.js. Si hoy hay registro, el botón tapa
   la casilla; por eso el anillo va también en el botón. Una coma separa selectores con las mismas reglas.) */
.calendario__hoy,
.calendario__hoy .calendario__dia { /* y el botón del día que está dentro de la casilla de hoy */
  /* box-shadow = sombra: desplazamiento horizontal, vertical, desenfoque, extensión y color. inset = por
     DENTRO. Con todo en 0 y 2 px de extensión, se ve como un anillo violeta pegado al borde. */
  box-shadow: inset 0 0 0 2px var(--color-primario);
  color: var(--color-texto); /* número en color tinta (más oscuro que el de los demás días) */
  font-weight: 800; /* extra negrita */
} /* fin de la regla .calendario__hoy (casilla y botón del día) */

/* Leyenda bajo el calendario: qué significa cada carita ("Muy difícil", "Difícil", "Más o menos"...).
   Es el <ul class="leyenda-calendario"> de historial.html; historial.js le pone un <li> por nivel. */
.leyenda-calendario {
  display: flex; /* los cinco niveles en fila */
  flex-wrap: wrap; /* si no caben, pasan a otra línea */
  justify-content: center; /* centrados a lo ancho */
  gap: var(--espacio-1) var(--espacio-3); /* dos valores: 4 px entre líneas y 16 px entre niveles */
  margin: 0 0 var(--espacio-4); /* tres valores = arriba, lados y abajo: solo 24 px debajo */
  padding: 0; /* sin la sangría de las listas */
  list-style: none; /* sin viñetas */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .leyenda-calendario */

/* Cada nivel de la leyenda: su carita y su nombre */
.leyenda-calendario li {
  display: flex; /* carita y nombre en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-1); /* 4 px entre ellos */
} /* fin de la regla .leyenda-calendario li */

/* Las caritas de la leyenda (más pequeñas que las del calendario) */
.leyenda-calendario .carita {
  width: 20px; /* ancho */
  height: 20px; /* alto */
} /* fin de la regla .leyenda-calendario .carita */

/* Lista de registros del mes (<ol class="historial" id="lista-registros">; la llena historial.js) */
.historial {
  display: grid; /* una tarjeta debajo de la otra */
  gap: var(--espacio-3); /* 16 px entre tarjetas */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin sangría */
  list-style: none; /* sin los números de la lista */
} /* fin de la regla .historial */

/* Tarjeta de cada registro: fecha, nivel, emociones, nota oculta y botones.
   Es un <li class="historial__dia nivel-N"> que crea historial.js (N = el nivel, de 1 a 5). */
.historial__dia {
  padding: var(--espacio-3) var(--espacio-4); /* 16 px arriba y abajo, 24 px a los lados */
  background: var(--color-superficie); /* fondo blanco */
  border: 1px solid var(--color-borde); /* borde fino lila claro */
  /* Franja de color del nivel a la izquierda (el nivel también va con carita y palabra) */
  /* var(--color-carita, var(--color-borde)): el segundo valor es de RESPALDO. --color-carita la pone la
     clase nivel-N (sección Escala emocional); si faltara, se usaría el color del borde normal. */
  border-left: 6px solid var(--color-carita, var(--color-borde));
  border-radius: var(--radio-grande); /* esquinas redondeadas (24 px) */
  box-shadow: var(--sombra); /* sombra suave (tokens.css) */
  /* TRANSICIÓN: cuando la sombra cambia (el anillo de "resaltado", más abajo), el cambio dura 0,3 s en vez
     de ser de golpe. ease = empieza suave, acelera y frena al final. */
  transition: box-shadow 0.3s ease;
} /* fin de la regla .historial__dia */

/* Resumen "Registraste N días en este mes." (<p class="resumen-mes">). Si el mes no tiene registros,
   historial.js lo deja vacío. :empty = "sin contenido": así el párrafo vacío no deja un hueco. */
.resumen-mes:empty {
  display: none; /* no se muestra ni ocupa lugar */
} /* fin de la regla .resumen-mes:empty */

/* Registro al que se llegó desde el calendario */
/* (historial.js le pone esta clase durante 2 segundos al tocar un día del calendario. Nombre de la clase:
   bloque__elemento--variante = una versión especial de la tarjeta .historial__dia) */
.historial__dia--resaltado {
  box-shadow: 0 0 0 3px var(--color-primario); /* anillo violeta de 3 px por fuera de la tarjeta */
} /* fin de la regla .historial__dia--resaltado */

/* Fecha de cada registro (<h3 class="historial__fecha">, por ejemplo "Martes, 29 de septiembre") */
.historial__fecha {
  margin: 0 0 var(--espacio-1); /* solo 4 px debajo */
  font-size: var(--texto-normal); /* 16 px */
} /* fin de la regla .historial__fecha */

/* Nivel del registro: su carita y su nombre en palabras (<p class="historial__nivel">, por ejemplo "Bien") */
.historial__nivel {
  display: flex; /* carita y palabra en fila */
  align-items: center; /* centradas en vertical */
  gap: var(--espacio-2); /* 8 px entre ellas */
  margin: 0; /* sin márgenes */
  font-weight: 700; /* negrita */
} /* fin de la regla .historial__nivel */

/* La carita del nivel en la tarjeta */
.historial__nivel .carita {
  width: 28px; /* ancho */
  height: 28px; /* alto */
} /* fin de la regla .historial__nivel .carita */

/* La nota del registro (<p class="historial__nota">): empieza oculta y aparece al tocar «Ver nota» */
.historial__nota {
  margin: var(--espacio-2) 0 0; /* 8 px arriba */
  padding: var(--espacio-3); /* 16 px de relleno */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  background: var(--color-superficie-suave); /* caja lila muy clara dentro de la tarjeta */
  white-space: pre-wrap; /* respeta los saltos de línea que escribió la persona y parte las líneas largas */
  overflow-wrap: anywhere; /* una palabra muy larga se corta donde haga falta: no se sale de la tarjeta */
} /* fin de la regla .historial__nota */

/* Botones de cada tarjeta: «Ver nota» (si hay nota) y «Borrar» (<div class="historial__acciones">) */
.historial__acciones {
  display: flex; /* en fila */
  flex-wrap: wrap; /* si no caben, pasan a otra línea */
  justify-content: space-between; /* «Ver nota» a la izquierda y «Borrar» a la derecha */
  gap: var(--espacio-2); /* 8 px entre ellos */
  margin-top: var(--espacio-2); /* 8 px arriba */
} /* fin de la regla .historial__acciones */

/* ---------------------------------------------------------------------
   Progreso
   --------------------------------------------------------------------- */
/* Todo lo de progreso.html (lo arma js/paginas/progreso.js): Nubbit en su etapa, las semillas, «El camino
   de Nubbit» (una tarjeta por etapa), el jardín (una planta por semilla) y el armario de accesorios. */
/* Nubbit y el resumen de su etapa: lado a lado en pantallas grandes */
/* (<div class="progreso-resumen">: la escena con Nubbit y la tarjeta "Etapa 3 de 5" con las semillas y
   la barra de avance. En el celular van una debajo de la otra.) */
.progreso-resumen {
  display: grid; /* cuadrícula: por defecto, una sola columna */
  gap: 0 var(--espacio-4); /* 0 entre filas (cada parte trae su margen de abajo) y 24 px entre columnas */
  align-items: stretch; /* las dos partes se estiran hasta el mismo alto */
} /* fin de la regla .progreso-resumen */

/* Desde 900 px de ancho (computadores y tabletas grandes): Nubbit a la izquierda y la tarjeta a la derecha */
@media (min-width: 900px) {
  /* El resumen del progreso, en dos columnas */
  .progreso-resumen {
    grid-template-columns: 1fr 1fr; /* dos columnas iguales (fr = una parte del espacio libre) */
  } /* fin de la regla .progreso-resumen (900 px o más) */

  /* La escena con Nubbit (.escena, de la sección Escena de este archivo) */
  .progreso-resumen .escena {
    margin-bottom: var(--espacio-4); /* 24 px debajo, como la tarjeta de al lado: terminan a la misma altura */
  } /* fin de la regla .progreso-resumen .escena (900 px o más) */
} /* fin de la media query de 900 px o más (resumen del progreso) */

/* Cuadrícula con las tarjetas del jardín y del armario (<div class="grilla progreso-grilla">;
   las columnas las pone .grilla, de la sección Tarjetas y avisos) */
.progreso-grilla {
  margin-top: var(--espacio-4); /* 24 px arriba, después del camino de Nubbit */
  align-items: start; /* cada tarjeta mide lo que su contenido (no se estira al alto de la otra) */
} /* fin de la regla .progreso-grilla */

/* El camino de Nubbit: cinco etapas en fila en pantallas grandes, en lista en el celular */
/* (<ol class="etapas" id="lista-etapas">: progreso.js le pone un <li class="etapa"> por etapa) */
.etapas {
  display: grid; /* una etapa debajo de la otra */
  gap: var(--espacio-3); /* 16 px entre etapas */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin sangría */
  list-style: none; /* sin los números de la lista (cada tarjeta ya dice el suyo) */
} /* fin de la regla .etapas */

/* Desde 760 px: las cinco etapas en una fila */
@media (min-width: 760px) {
  /* La lista de etapas */
  .etapas {
    grid-template-columns: repeat(5, 1fr); /* cinco columnas iguales: repeat() repite 1fr cinco veces */
  } /* fin de la regla .etapas (760 px o más) */
} /* fin de la media query de 760 px o más (etapas en fila) */

/* Tarjeta de cada etapa: Nubbit pequeño, su estado, el título ("3. Nubbit brote") y cuántas semillas pide.
   progreso.js le agrega la clase etapa--alcanzada o etapa--futura, y etapa--actual a la de ahora. */
.etapa {
  display: grid; /* en columna: dibujo, estado, título y texto */
  align-content: start; /* todo arriba (las tarjetas de una misma fila miden lo mismo) */
  gap: var(--espacio-1); /* 4 px entre partes */
  padding: var(--espacio-3); /* 16 px de relleno */
  border: 2px solid var(--color-borde); /* borde lila claro de 2 px */
  border-radius: var(--radio-grande); /* esquinas redondeadas (24 px) */
  background: var(--color-superficie); /* fondo blanco */
} /* fin de la regla .etapa */

/* Etapas ya alcanzadas */
.etapa--alcanzada {
  border-color: var(--color-primario); /* el borde se vuelve violeta */
} /* fin de la regla .etapa--alcanzada */

/* La etapa de ahora (progreso.js también le pone aria-current="step": el lector de pantalla la anuncia) */
.etapa--actual {
  background: var(--color-primario-suave); /* fondo lila */
  box-shadow: 0 0 0 2px var(--color-primario); /* anillo violeta de 2 px por fuera del borde */
} /* fin de la regla .etapa--actual */

/* Nubbit pequeño de cada etapa */
/* (<div class="etapa__nubbit" aria-hidden="true"> con el dibujo que arma progreso.js; es decorativo) */
.etapa__nubbit {
  width: 5.5rem; /* 88 px */
  justify-self: center; /* centrado a lo ancho (justify-self alinea solo a este hijo de la cuadrícula) */
} /* fin de la regla .etapa__nubbit */

/* El dibujo de Nubbit dentro de esa tarjeta (<svg class="nubbit"> de js/nubbit.js). En la sección Nubbit
   tiene la ANIMACIÓN "nubbit-respira" (un movimiento definido con @keyframes); animation: none la quita. */
.etapa__nubbit .nubbit {
  animation: none; /* en el camino, los Nubbit pequeños no "respiran" */
} /* fin de la regla .etapa__nubbit .nubbit */

/* Etapas por descubrir: Nubbit se ve como una silueta suave (sorpresa) */
.etapa--futura .etapa__nubbit {
  filter: grayscale(1); /* FILTRO de imagen: escala de grises al 100 % (sin colores) */
  opacity: 0.35; /* opacidad: solo 35 % visible (muy transparente) */
} /* fin de la regla .etapa--futura .etapa__nubbit */

/* Etiqueta del estado, dicho con palabras: "Etapa actual", "Alcanzada" o "Por descubrir"
   (<span class="etapa__estado"> que crea progreso.js) */
.etapa__estado {
  justify-self: start; /* mide lo que su texto y queda a la izquierda (no se estira a todo el ancho) */
  padding: 0 0.6rem; /* 0 arriba y abajo, unos 10 px a los lados */
  border-radius: 999px; /* radio enorme: forma de "pastilla" (extremos redondos) */
  background: var(--color-superficie-suave); /* fondo lila muy claro */
  font-size: var(--texto-pequeno); /* 14 px */
  font-weight: 700; /* negrita */
} /* fin de la regla .etapa__estado */

/* La etiqueta "Etapa actual": violeta con letra blanca */
.etapa--actual .etapa__estado {
  background: var(--color-primario); /* fondo violeta */
  color: var(--color-sobre-primario); /* texto blanco */
} /* fin de la regla .etapa--actual .etapa__estado */

/* Título de cada etapa ("1. Nubbit semilla", "3. Nubbit brote"...) */
.etapa h3 {
  margin: var(--espacio-1) 0 0; /* 4 px arriba */
  font-size: var(--texto-normal); /* 16 px */
} /* fin de la regla .etapa h3 */

/* Texto de cada etapa: "Desde el comienzo." o "Con 15 semillas." (y su descripción si ya se alcanzó) */
.etapa p {
  margin: 0; /* sin márgenes: el gap da el espacio */
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .etapa p */

/* En el celular: el dibujo a la izquierda y el texto a la derecha */
/* (759 px o menos: justo por debajo de los 760 px desde los que las etapas van en fila) */
@media (max-width: 759px) {
  /* Cada tarjeta de etapa, en dos columnas */
  .etapa {
    grid-template-columns: auto 1fr; /* auto = lo que mide el dibujo; 1fr = el resto, para el texto */
    column-gap: var(--espacio-3); /* 16 px entre las columnas (entre filas siguen los 4 px del gap) */
  } /* fin de la regla .etapa (759 px o menos) */

  /* El dibujo ocupa el alto de las tres filas de texto (estado, título y detalle) */
  .etapa__nubbit {
    grid-row: span 3; /* se extiende a lo largo de 3 filas */
    width: 4.5rem; /* 72 px: un poco más pequeño */
  } /* fin de la regla .etapa__nubbit (759 px o menos) */
} /* fin de la media query de hasta 759 px (etapas en el celular) */

/* El número grande de semillas en la tarjeta de la etapa, como en "12 semillas"
   (<span class="cifra"> que crea progreso.js) */
.cifra {
  font-size: 2.25rem; /* 36 px */
  font-weight: 800; /* extra negrita */
  line-height: 1; /* sin espacio de más arriba y abajo del número */
} /* fin de la regla .cifra */

/* Jardín: una planta por semilla, en surcos de tierra.
   Cada fila mide 44 px (planta de 35 px + 9 px de espacio) y cada surco también,
   por eso las plantas quedan paradas sobre su franja de tierra. */
/* (<div class="jardin" id="jardin" role="img"> de la tarjeta "El jardín de Nubbit": progreso.js pone
   adentro un dibujo por semilla, hasta 60. role="img": el lector de pantalla lo lee como una sola imagen.) */
.jardin {
  display: flex; /* las plantas en fila */
  flex-wrap: wrap; /* cuando una fila se llena, siguen en la de abajo (otro surco) */
  align-items: flex-end; /* cada planta apoyada abajo, sobre la tierra */
  justify-content: center; /* centradas a lo ancho */
  gap: 9px 4px; /* 9 px entre filas y 4 px entre plantas */
  min-height: 44px; /* al menos un surco de alto, aunque esté vacío */
  padding: 3px var(--espacio-2) 6px; /* 3 px arriba, 8 px a los lados y 6 px abajo */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  /* DEGRADADO LINEAL (de arriba hacia abajo) con un corte seco: transparente hasta el 55 % del alto y,
     desde ahí, verde pasto como el suelo de la escena (--escena-suelo). Esa franja verde es un surco. */
  background: linear-gradient(transparent 55%, var(--escena-suelo) 55%);
  background-size: 100% 44px; /* el fondo mide 44 px de alto y se repite hacia abajo: un surco por fila */
} /* fin de la regla .jardin */

/* Textos del jardín: "El jardín está listo para su primera semilla." (sin semillas) y "y N más" (más de 60) */
.jardin__vacio,
.jardin__mas { /* y el texto "y N más" (cuando hay más de 60 semillas) */
  margin: 0; /* sin márgenes */
  align-self: center; /* centrados a lo alto de su fila (align-self alinea solo a este hijo) */
  color: var(--color-texto-suave); /* gris violeta */
  font-weight: 700; /* negrita */
} /* fin de la regla .jardin__vacio y .jardin__mas */

/* Cada planta: un <svg class="planta flor-..."> que crea progreso.js (dibujada en 32 × 40, aquí más pequeña) */
.planta {
  width: 28px; /* ancho */
  height: 35px; /* alto (la misma proporción del dibujo) */
  transform-origin: 50% 100%; /* punto fijo al girar: el centro de abajo, así se mece desde la base del tallo */
} /* fin de la regla .planta */

/* Tallo de la planta (<path class="planta__tallo">). Propiedades de SVG: fill = relleno y stroke = línea.
   Los colores de las plantas están escritos aquí mismo: no cambian en la apariencia nocturna. */
.planta__tallo {
  fill: none; /* sin relleno: solo la línea */
  stroke: #4f8a3c; /* color de la línea: verde oscuro */
  stroke-width: 2.5; /* grosor de la línea (en unidades del dibujo) */
  stroke-linecap: round; /* puntas redondeadas */
} /* fin de la regla .planta__tallo */

/* Color de relleno (fill) de cada parte de la planta. Los pétalos toman el color de la clase flor-... que
   progreso.js le pone a cada planta, por turnos: rosa, amarilla, azul o coral (no representan emociones). */
.planta__hoja { fill: #6fb35e; } /* hojas: verde */
.planta__hoja--clara { fill: #9ed68a; } /* hojas claras: verde claro */
.planta__centro { fill: #ffe07a; } /* centro de la flor: amarillo */
.flor-rosa .planta__petalo { fill: #f59ac0; } /* pétalos rosados */
.flor-amarilla .planta__petalo { fill: #ffc94d; } /* pétalos amarillos */
.flor-azul .planta__petalo { fill: #8fb7ff; } /* pétalos azules */
.flor-coral .planta__petalo { fill: #ff9f7a; } /* pétalos coral */

/* Al regar, las plantas se mecen una tras otra (el retraso lo pone js/paginas/progreso.js) */
/* (progreso.js le pone la clase jardin--regando al jardín durante 2,4 s al tocar «Regar el jardín».
   Con "reducir movimiento", base.css deja la animación en casi 0 s: solo se ve el mensaje.) */
.jardin--regando .planta {
  /* ANIMACIÓN: nombre (definida abajo con @keyframes), duración (1,2 s), curva (ease-in-out = suave al
     empezar y al terminar), retraso antes de empezar y cuántas veces se repite (2). --retraso es una
     variable que progreso.js pone en cada planta (0, 60, 120... ms): se mecen como una ola. Si falta, 0ms. */
  animation: planta-se-mece 1.2s ease-in-out var(--retraso, 0ms) 2;
} /* fin de la regla .jardin--regando .planta */

/* @keyframes define los pasos de una ANIMACIÓN con nombre ("planta-se-mece"): cómo se ve la planta en
   ciertos momentos (0 % = inicio, 100 % = final); el navegador rellena lo que hay entre uno y otro. */
@keyframes planta-se-mece {
  /* al inicio y al final: recta */
  0%,
  100% { /* y al 100 % (el final): también recta */
    transform: rotate(0); /* transform cambia la forma o la posición: aquí, sin girar */
  } /* fin del paso 0 % y 100 % (planta recta) */
  /* a la cuarta parte del tiempo: inclinada a la izquierda */
  25% {
    transform: rotate(-7deg); /* gira 7 grados (deg) hacia la izquierda */
  } /* fin del paso 25 % (inclinada a la izquierda) */
  /* a las tres cuartas partes: inclinada a la derecha */
  75% {
    transform: rotate(7deg); /* gira 7 grados hacia la derecha */
  } /* fin del paso 75 % (inclinada a la derecha) */
} /* fin de la animación planta-se-mece (@keyframes) */

/* Armario de accesorios */
/* (tarjeta "El armario de Nubbit": <ul class="armario__lista"> dentro del <fieldset class="armario">.
   progreso.js pone un <li> por accesorio: un interruptor si ya se ganó, o un texto si aún no llega) */
.armario__lista {
  display: grid; /* uno debajo del otro */
  gap: var(--espacio-2); /* 8 px entre accesorios */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin sangría */
  list-style: none; /* sin viñetas */
} /* fin de la regla .armario__lista */

/* Accesorio que aún no se gana, por ejemplo "Capa de colores: llega en la etapa 4 (30 semillas)." */
.armario__por-descubrir {
  color: var(--color-texto-suave); /* gris violeta */
  font-size: var(--texto-pequeno); /* 14 px */
} /* fin de la regla .armario__por-descubrir */

/* ---------------------------------------------------------------------
   Código de recuperación
   --------------------------------------------------------------------- */
/* El código para recuperar la cuenta, por ejemplo K7PM-3QXD-R9TA-WF2H (<p class="codigo">). Aparece en
   crear-cuenta.html y recuperar.html (lo escribe js/formularios.js) y en ajustes.html al generar uno nuevo
   (lo escribe js/paginas/ajustes.js). Se ve grande y claro para copiarlo en papel sin equivocarse. */
.codigo {
  margin: var(--espacio-3) 0; /* 16 px arriba y abajo */
  padding: var(--espacio-3); /* 16 px de relleno */
  border: 2px dashed var(--color-primario); /* borde violeta de rayitas (dashed), como un cupón para recortar */
  border-radius: var(--radio); /* esquinas redondeadas (14 px) */
  background: var(--color-superficie-suave); /* fondo lila muy claro */
  /* Letra MONOESPACIADA (todos los caracteres miden lo mismo de ancho): se distingue mejor cada uno. Es una
     lista: el navegador usa la primera que exista. ui-monospace = la del sistema (iPhone y Mac); "Cascadia
     Mono" y Consolas = Windows; monospace = cualquier letra monoespaciada, como último recurso. */
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.35rem; /* unos 22 px */
  font-weight: 700; /* negrita */
  letter-spacing: 0.08em; /* letras un poco separadas (1em = el tamaño de la letra): se leen una por una */
  text-align: center; /* centrado */
  overflow-wrap: anywhere; /* en pantallas muy angostas se parte donde haga falta en vez de salirse */
} /* fin de la regla .codigo */

/* ---------------------------------------------------------------------
   Diálogos (confirmaciones)
   --------------------------------------------------------------------- */
/* Ventana de confirmación (<dialog class="dialogo">): «¿Borrar este registro?» en historial.html y
   «¿Eliminar tu cuenta para siempre?» en ajustes.html. <dialog> es una ventana propia del navegador: el JS
   la abre con showModal() (historial.js y ajustes.js), bloquea el resto de la página y se cierra con Esc. */
.dialogo {
  /* min() elige el menor de sus valores: 28rem (448 px) o, en pantallas angostas, el ancho de la ventana
     menos 2rem (32 px). calc() hace cuentas y 100vw = todo el ancho de la ventana (1vw = 1 % del ancho). */
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--espacio-4); /* 24 px de relleno */
  border: 0; /* sin el borde que el navegador le pone a <dialog> */
  border-radius: var(--radio-grande); /* esquinas redondeadas (24 px) */
  background: var(--color-superficie); /* fondo blanco (u oscuro de noche) */
  color: var(--color-texto); /* texto color tinta */
  box-shadow: var(--sombra-elevada); /* sombra grande: la ventana flota sobre la página */
} /* fin de la regla .dialogo */

/* Capa detrás de la ventana abierta. ::backdrop es un PSEUDO-ELEMENTO: una capa que crea el navegador (no
   está en el HTML) y que cubre toda la página detrás de un <dialog> abierto con showModal(). */
.dialogo::backdrop {
  /* rgb(rojo verde azul / opacidad): el color del fondo nocturno (#16131f) al 55 %. Oscurece la página
     para que la atención quede en la pregunta. */
  background: rgb(22 19 31 / 0.55);
} /* fin de la regla .dialogo::backdrop */

/* Título de la ventana ("¿Borrar este registro?", "¿Eliminar tu cuenta para siempre?") */
.dialogo h2 {
  margin-top: 0; /* sin los 40 px de arriba que base.css da a los h2 */
} /* fin de la regla .dialogo h2 */

/* ---------------------------------------------------------------------
   Páginas informativas (apoyo, privacidad)
   --------------------------------------------------------------------- */
/* <main class="contenido-texto"> de apoyo.html y privacidad.html: páginas de lectura con subtítulos,
   listas y tarjetas. Esas páginas cargan después publico.css, que completa algunas piezas. */
/* Subtítulos de esas páginas ("Hablar con alguien de confianza", "Qué guardamos"...) */
.contenido-texto h2 {
  margin-top: var(--espacio-5); /* 40 px arriba: separa cada tema del anterior */
} /* fin de la regla .contenido-texto h2 */

/* Títulos dentro de las tarjetas de esas páginas ("Si estás en peligro", en apoyo.html).
   ESPECIFICIDAD: si dos reglas chocan, gana la más específica (la de más clases); si pesan igual, gana la
   que va después. La regla de arriba le ganaría a ".tarjeta h2" (pesan igual y va después); esta tiene una
   clase más, así que el margen vuelve a 0. */
.contenido-texto .tarjeta h2 {
  margin-top: 0; /* sin margen arriba: la tarjeta ya tiene su relleno */
} /* fin de la regla .contenido-texto .tarjeta h2 */

/* Listas con viñetas de esas páginas (por ejemplo, "Qué guardamos" en privacidad.html) */
.contenido-texto ul {
  padding-left: 1.25rem; /* sangría de 20 px a la izquierda: ahí van las viñetas */
} /* fin de la regla .contenido-texto ul */

/* Cada punto de esas listas */
.contenido-texto li {
  margin-bottom: var(--espacio-2); /* 8 px debajo: los puntos no quedan pegados */
} /* fin de la regla .contenido-texto li */

/* Líneas de ayuda (apoyo.html) */
/* (<ul class="lista-recursos">: Línea Naranja de Ibagué, Línea Naranja del Tolima y Línea 141 del ICBF) */
.contenido-texto .lista-recursos {
  display: grid; /* una debajo de la otra */
  gap: var(--espacio-3); /* 16 px entre líneas de ayuda */
  padding: 0; /* sin la sangría de la regla de arriba (esta es más específica y gana) */
  list-style: none; /* sin viñetas */
} /* fin de la regla .contenido-texto .lista-recursos */

/* Cada línea de ayuda (<li class="recurso">): tarjetita con insignia, nombre, descripción y botón para
   llamar. publico.css la completa (en pantallas anchas pone la insignia a la izquierda). */
.recurso {
  padding: var(--espacio-3) var(--espacio-4); /* 16 px arriba y abajo, 24 px a los lados */
  border: 1px solid var(--color-borde); /* borde fino lila claro */
  border-radius: var(--radio-grande); /* esquinas redondeadas (24 px) */
  background: var(--color-superficie); /* fondo blanco */
} /* fin de la regla .recurso */

/* Nombre de la línea de ayuda ("Línea 141 · ICBF") */
.recurso h3 {
  margin: 0 0 var(--espacio-1); /* 4 px debajo (publico.css lo cambia a 0: allí el espacio lo da el gap) */
  font-size: var(--texto-normal); /* 16 px */
} /* fin de la regla .recurso h3 */

/* Descripción de la línea de ayuda (quién atiende y en qué horario) */
.recurso p {
  margin-bottom: var(--espacio-2); /* 8 px debajo, antes del botón (publico.css también lo cambia a 0) */
} /* fin de la regla .recurso p */

/* =====================================================================
   Ajustes para celular (toda la plataforma)
   ===================================================================== */
/* Filas de casillas y radios (por ejemplo, las opciones de Respira con Nubbit y los avisos de Crear cuenta):
   al menos 44 px de alto, y la etiqueta ocupa el resto de la fila, así se elige tocando cualquier parte. */
.campo--casilla {
  min-height: 2.75rem; /* 44 px: fácil de tocar */
} /* fin de la regla de la fila de casilla (celular) */
.campo--casilla label {
  flex: 1; /* la etiqueta llena el resto de la fila */
  padding-block: 0.6rem; /* unos 10 px arriba y abajo: la zona para tocar crece */
} /* fin de la regla de la etiqueta de la casilla (celular) */
.campo--casilla input {
  margin-top: 0.75rem; /* baja con el texto (que ahora tiene relleno arriba) */
} /* fin de la regla de la casilla (celular) */
/* Interruptores un poco más grandes en pantallas táctiles (pointer: coarse = se usa el dedo) */
@media (pointer: coarse) {
  .interruptor {
    width: 3.5rem; /* 56 px de ancho */
    height: 2.125rem; /* 34 px de alto */
  } /* fin de la regla del interruptor táctil */
  .interruptor::before {
    width: calc(2.125rem - 6px); /* perilla de 28 px */
    height: calc(2.125rem - 6px); /* (ídem) */
  } /* fin de la regla de la perilla táctil */
  .interruptor:checked::before {
    transform: translateX(1.375rem); /* 56 - 28 - 3 - 3 = 22 px a la derecha */
  } /* fin de la regla de la perilla activada táctil */
} /* fin del @media (pointer: coarse) */
/* Calendario del historial en celulares angostos: usa un poco del margen de la página, así cada día mide
   unos 45 px de ancho (antes, 41) */
@media (max-width: 399px) {
  .calendario {
    width: calc(100% + 1rem); /* 16 px más ancho... */
    margin-inline: -0.5rem; /* ...repartidos a los dos lados */
    padding: 4px; /* menos relleno */
    border-spacing: 2px; /* menos espacio entre días */
  } /* fin de la regla del calendario en el celular */
} /* fin del @media (max-width: 399px) del calendario */