/* ==========================================================================
   Estilos de Serenity (versión 0.6.0)

   Diseño tranquilo inspirado en el universo: cielo pastel con estrellas,
   lavanda y azul cielo (los colores del logo de Serenity), títulos con letra
   de serifa y textos con una letra sin serifa muy legible. Sin frameworks.

   Cómo leer este archivo:
   - Cada bloque "selector { ... }" aplica estilos a los elementos que
     coinciden con el selector. Lo que va entre barra-asterisco y
     asterisco-barra es un comentario y no afecta al diseño.
   - Los colores, tamaños y radios están en VARIABLES (las líneas que empiezan
     con --) dentro de :root. Cambiar una variable cambia toda la app.
   - El tema oscuro solo vuelve a definir esas mismas variables.
   - Los nombres de clase que usa el JavaScript no se deben cambiar (ver
     docs/QUE_PUEDEN_MODIFICAR.md); sus valores sí.
   ========================================================================== */

/* --- 1. Fuentes tipográficas (archivos en static/fuentes) --------------- */

/* Letra para todo el texto: Source Sans 3 (licencia libre OFL). */
@font-face {
  font-family: "Source Sans 3";                          /* nombre con el que se usa abajo */
  src: url("../fuentes/source-sans-3.woff2") format("woff2"); /* archivo dentro del proyecto */
  font-weight: 200 900;                                  /* fuente variable: todos los grosores */
  font-style: normal;                                    /* versión recta (no cursiva) */
  font-display: swap;                                    /* mientras carga, muestra la letra del sistema */
}

/* Letra para los títulos: Source Serif 4 (licencia libre OFL). */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fuentes/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Variables (tokens de diseño) ------------------------------------- */

/* :root es el elemento <html>. Aquí se definen los colores y medidas de toda la app. */
:root {
  /* Marca */
  --color-primario: #5b67a8;           /* lavanda profundo (del logo): botones principales, enlaces activos, barras */
  --color-primario-oscuro: #444e8c;    /* lavanda más oscuro: enlaces y botón al pasar el ratón */
  --color-primario-suave: #e7e9f7;     /* lavanda muy claro: fondos de selección y de iconos */
  --color-sobre-primario: #ffffff;     /* texto que va encima del lavanda */
  --color-azul-suave: #e1eef9;         /* azul cielo claro (del logo): burbujas de la persona en el chat */
  /* Superficies */
  --color-fondo: #f6f7fc;              /* fondo general: cielo pastel, no blanco puro */
  --color-superficie: #ffffff;         /* tarjetas, encabezado y campos */
  --color-superficie-suave: #eff1fa;   /* zonas internas (reloj, guía de respiración, filas al pasar el ratón) */
  --color-pista: #e4e7f3;              /* fondo de las barras vacías */
  /* Texto y bordes */
  --color-texto: #1f2440;              /* texto principal (azul noche muy oscuro) */
  --color-texto-suave: #575d7a;        /* textos secundarios: ayudas, fechas, descripciones */
  --color-borde: #e1e4f0;              /* líneas finas que separan tarjetas y filas */
  --color-borde-campo: #858aa3;        /* borde de campos y casillas (contraste 3:1 para verlos bien) */
  /* Estados */
  --color-aviso-fondo: #fbf3e2;        /* fondo ámbar de avisos importantes */
  --color-aviso-borde: #e2c48a;        /* borde ámbar */
  --color-aviso-texto: #6e4e12;        /* texto sobre ámbar */
  --color-festivo: #a5761f;            /* ámbar de la marca de días festivos (contraste 3:1 o más) */
  --color-error: #a23b2c;              /* rojo ladrillo de errores y del botón de borrar */
  --color-error-fondo: #f8e6e1;        /* fondo de los mensajes de error */
  --color-exito: #2e6b47;              /* verde de mensajes de éxito */
  --color-exito-fondo: #e3f0e7;        /* fondo de los mensajes de éxito */
  --color-foco: #2563a6;               /* azul del contorno de foco al navegar con el teclado */
  /* Universo: estrellas y nubes de color (nebulosas) del fondo */
  --color-estrella: rgba(107, 118, 190, 0.45);
  --color-nebulosa-1: rgba(167, 211, 236, 0.45); /* azul cielo del logo */
  --color-nebulosa-2: rgba(178, 168, 228, 0.35); /* lavanda del logo */
  /* Escala de ánimo (de "muy bien" a "muy mal"): se usa en caras, puntos y barras */
  --animo-muy-bien: #2c7a68;
  --animo-bien: #5c9c88;
  --animo-regular: #9c8238;
  --animo-mal: #c9764f;
  --animo-muy-mal: #a44f45;
  /* Tipografía */
  --fuente: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* texto */
  --fuente-titulos: "Source Serif 4", Georgia, "Times New Roman", serif;                      /* títulos */
  /* Formas y medidas */
  --radio: 12px;                       /* esquinas de tarjetas */
  --radio-control: 8px;                /* esquinas de botones y campos */
  --radio-pequeno: 6px;                /* esquinas de etiquetas pequeñas */
  --sombra: 0 1px 2px rgba(30, 42, 44, 0.05);          /* sombra casi invisible de las tarjetas */
  --sombra-flotante: 0 16px 40px rgba(30, 42, 44, 0.18); /* sombra de avisos flotantes */
  --ancho-maximo: 1080px;              /* ancho máximo del contenido */
  --ancho-lectura: 720px;              /* ancho cómodo para páginas de texto largo */
  --alto-encabezado: 64px;             /* alto de la barra superior */
  /* Flecha de los <select>, dibujada como imagen SVG dentro del CSS (data:). */
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6664' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;                 /* controles nativos (barras de scroll, calendario) en claro */
}

/* Tema oscuro elegido en Ajustes: <html data-tema="oscuro">. Solo cambian los valores. */
:root[data-tema="oscuro"] {
  --color-primario: #aab4f0;
  --color-primario-oscuro: #c7cdf8;
  --color-primario-suave: #262b58;
  --color-sobre-primario: #11153a;
  --color-azul-suave: #1e2b4c;
  --color-fondo: #0d1030;
  --color-superficie: #161a3e;
  --color-superficie-suave: #1d2249;
  --color-pista: #272c57;
  --color-texto: #e8eaf8;
  --color-texto-suave: #a5aacb;
  --color-borde: #2b305e;
  --color-borde-campo: #6f75a0;
  --color-aviso-fondo: #33291a;
  --color-aviso-borde: #8a6a2e;
  --color-aviso-texto: #f0d9a6;
  --color-festivo: #d9aa55;
  --color-error: #f0a090;
  --color-error-fondo: #3d2320;
  --color-exito: #8fd1a8;
  --color-exito-fondo: #1d3426;
  --color-foco: #93c5fd;
  --color-estrella: rgba(255, 255, 255, 0.75);
  --color-nebulosa-1: rgba(80, 110, 210, 0.30);
  --color-nebulosa-2: rgba(150, 105, 215, 0.24);
  --animo-muy-bien: #5db59f;
  --animo-bien: #88c2b0;
  --animo-regular: #d3bb76;
  --animo-mal: #e39a74;
  --animo-muy-mal: #d7786b;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-flotante: 0 16px 40px rgba(0, 0, 0, 0.55);
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fafac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Tema automático: si el dispositivo está en modo oscuro y la persona NO eligió "claro". */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-primario: #aab4f0;
    --color-primario-oscuro: #c7cdf8;
    --color-primario-suave: #262b58;
    --color-sobre-primario: #11153a;
    --color-azul-suave: #1e2b4c;
    --color-fondo: #0d1030;
    --color-superficie: #161a3e;
    --color-superficie-suave: #1d2249;
    --color-pista: #272c57;
    --color-texto: #e8eaf8;
    --color-texto-suave: #a5aacb;
    --color-borde: #2b305e;
    --color-borde-campo: #6f75a0;
    --color-aviso-fondo: #33291a;
    --color-aviso-borde: #8a6a2e;
    --color-aviso-texto: #f0d9a6;
    --color-festivo: #d9aa55;
    --color-error: #f0a090;
    --color-error-fondo: #3d2320;
    --color-exito: #8fd1a8;
    --color-exito-fondo: #1d3426;
    --color-foco: #93c5fd;
    --color-estrella: rgba(255, 255, 255, 0.75);
    --color-nebulosa-1: rgba(80, 110, 210, 0.30);
    --color-nebulosa-2: rgba(150, 105, 215, 0.24);
    --animo-muy-bien: #5db59f;
    --animo-bien: #88c2b0;
    --animo-regular: #d3bb76;
    --animo-mal: #e39a74;
    --animo-muy-mal: #d7786b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-flotante: 0 16px 40px rgba(0, 0, 0, 0.55);
    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fafac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

/* Tamaño de texto grande (Ajustes). Todo usa rem, así que la app entera escala. */
:root[data-texto="grande"] {
  font-size: 112.5%;                   /* 18px de base en vez de 16px */
}

/* Cada estado de ánimo pone su color en --color-animo; las caras, puntos y barras lo usan. */
.animo-muy_bien { --color-animo: var(--animo-muy-bien); }
.animo-bien { --color-animo: var(--animo-bien); }
.animo-regular { --color-animo: var(--animo-regular); }
.animo-mal { --color-animo: var(--animo-mal); }
.animo-muy_mal { --color-animo: var(--animo-muy-mal); }

/* --- 3. Base ------------------------------------------------------------- */

/* El ancho de cada caja incluye su relleno y su borde (más fácil de calcular). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;      /* evita que iOS agrande el texto al girar el teléfono */
  scroll-padding-top: calc(var(--alto-encabezado) + 16px); /* los enlaces #ancla no quedan bajo el encabezado */
}

body {
  margin: 0;                           /* quita el margen que pone el navegador */
  min-height: 100vh;                   /* ocupa al menos toda la ventana */
  display: flex;                       /* en columna: encabezado, contenido, pie */
  flex-direction: column;
  font-family: var(--fuente);          /* letra de texto */
  font-size: 1.0625rem;                /* 17px: cómodo para leer */
  line-height: 1.6;                    /* separación entre líneas */
  color: var(--color-texto);
  /* Cielo con estrellas: varias "estrellas" (puntos con radial-gradient) que se repiten
     en mosaicos de distinto tamaño, más dos nubes de color suaves arriba. */
  background-color: var(--color-fondo);
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, var(--color-estrella) 99%, transparent),
    radial-gradient(1.1px 1.1px at 32% 68%, var(--color-estrella) 99%, transparent),
    radial-gradient(1.3px 1.3px at 57% 24%, var(--color-estrella) 99%, transparent),
    radial-gradient(0.9px 0.9px at 78% 82%, var(--color-estrella) 99%, transparent),
    radial-gradient(1.8px 1.8px at 91% 41%, var(--color-estrella) 99%, transparent),
    radial-gradient(1px 1px at 20% 90%, var(--color-estrella) 99%, transparent),
    radial-gradient(1.2px 1.2px at 66% 55%, var(--color-estrella) 99%, transparent),
    radial-gradient(1.4px 1.4px at 44% 8%, var(--color-estrella) 99%, transparent),
    radial-gradient(ellipse 60% 45% at 12% 0%, var(--color-nebulosa-1), transparent 70%),
    radial-gradient(ellipse 55% 40% at 95% 6%, var(--color-nebulosa-2), transparent 70%);
  background-size:
    260px 260px, 260px 260px, 260px 260px, 260px 260px,
    410px 410px, 410px 410px, 410px 410px, 410px 410px,
    100% 100%, 100% 100%;
  background-attachment: fixed;        /* el cielo queda quieto al desplazarse */
  -webkit-font-smoothing: antialiased; /* letra más fina y nítida en macOS */
  text-rendering: optimizeLegibility;  /* mejor espaciado entre letras */
}

img,
svg {
  max-width: 100%;                     /* las imágenes nunca se salen de su contenedor */
  height: auto;                        /* y mantienen su proporción */
}

/* El atributo hidden gana siempre, incluso a clases con display propio (como .boton). */
[hidden] {
  display: none !important;
}

a {
  color: var(--color-primario-oscuro);
  text-decoration-thickness: 1px;      /* subrayado fino */
  text-underline-offset: 3px;          /* subrayado un poco separado del texto */
}

a:hover {
  color: var(--color-primario);
}

/* Títulos de página y de sección: letra de serifa, más apretados. */
h1,
h2 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;             /* letras un poco más juntas en tamaños grandes */
  color: var(--color-texto);
  text-wrap: balance;                  /* reparte el texto en líneas parejas */
}

h1 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.625rem); /* entre 32px y 42px según la pantalla */
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.375rem;                 /* 22px */
  margin: 2.5rem 0 1rem;
}

/* Subtítulos dentro de tarjetas: letra de texto en negrita. */
h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.5rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.3rem;                /* sangría de las listas */
}

li + li {
  margin-top: 0.3rem;                  /* aire entre elementos de lista */
}

/* Texto de código (por ejemplo, el usuario "demo"). */
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  padding: 0.05rem 0.35rem;
  border-radius: var(--radio-pequeno);
}

.texto-suave {
  color: var(--color-texto-suave);
  font-weight: 400;
}

/* Texto centrado (por ejemplo, el código de la página de error). */
.texto-centrado {
  text-align: center;
}

/* --- 4. Accesibilidad ------------------------------------------------------ */

/* Contorno visible al navegar con el teclado (Tab). No aparece al usar el ratón. */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* Enlace "Ir al contenido": escondido hasta que recibe el foco. */
.salto-contenido {
  position: absolute;
  left: 1rem;
  top: -4rem;                          /* fuera de la pantalla */
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--radio-control);
  background: var(--color-primario);
  color: var(--color-sobre-primario);
}

.salto-contenido:focus {
  top: 1rem;                           /* al recibir el foco aparece */
}

/* Oculta visualmente pero deja el texto disponible para lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 5. Iconos (archivo static/iconos/iconos.svg) -------------------------- */

/* Icono de trazo: toma el color del texto que lo rodea (currentColor). */
.icono {
  width: 1.25em;                       /* tamaño relativo al texto */
  height: 1.25em;
  flex-shrink: 0;                      /* no se encoge dentro de filas flexibles */
  fill: none;                          /* sin relleno: solo líneas */
  stroke: currentColor;                /* líneas del color del texto */
  stroke-width: 1.75;                  /* grosor de línea */
  stroke-linecap: round;               /* puntas redondeadas */
  stroke-linejoin: round;              /* uniones redondeadas */
  vertical-align: -0.25em;             /* alineado con el texto de la línea */
}

/* Icono dentro de un cuadro de color (accesos, tipos de ejercicio, sonidos). */
.icono-caja {
  display: inline-grid;
  place-items: center;                 /* icono centrado */
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  flex-shrink: 0;
}

.icono-caja .icono {
  width: 1.3rem;
  height: 1.3rem;
}

/* --- 6. Encabezado y menú --------------------------------------------------- */

.encabezado {
  position: sticky;                    /* se queda pegado arriba al hacer scroll */
  top: 0;
  z-index: 20;                         /* por encima del contenido */
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}

.encabezado-interior {
  max-width: var(--ancho-maximo);
  margin: 0 auto;                      /* centrado */
  padding: 0 1.25rem;
  min-height: var(--alto-encabezado);
  display: flex;                       /* marca | menú | cuenta en una fila */
  align-items: stretch;                /* los hijos ocupan todo el alto (para la línea del menú) */
  gap: 1.5rem;
}

/* Logo + nombre. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-texto);
}

/* Logo oficial (emblema + nombre). Sobre el cielo claro, "multiply" hace desaparecer
   el fondo blanco del archivo sin cambiar la imagen; en modo oscuro va sobre una placa blanca. */
.marca img {
  width: auto;
  height: 46px;
}

/* La guía de respiración se escala (transform), y eso aísla la mezcla de la imagen:
   por eso "multiply" también se aplica a ese contenedor. */
.logo-serenity,
.panda-serenity,
.circulo-respiracion {
  mix-blend-mode: multiply;
  border-radius: 10px;
}

:root[data-tema="oscuro"] .logo-serenity {
  mix-blend-mode: normal;
  background: #ffffff;
  padding: 2px 6px;
}

:root[data-tema="oscuro"] .panda-serenity,
:root[data-tema="oscuro"] .circulo-respiracion {
  mix-blend-mode: normal;
  border-radius: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-serenity {
    mix-blend-mode: normal;
    background: #ffffff;
    padding: 2px 6px;
  }

  :root:not([data-tema="claro"]) .panda-serenity,
  :root:not([data-tema="claro"]) .circulo-respiracion {
    mix-blend-mode: normal;
    border-radius: 24px;
  }
}

.marca:hover {
  color: var(--color-texto);
}

/* Menú principal (en computador, texto; en teléfono pasa abajo con iconos). */
.navegacion {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  margin-left: auto;                   /* empuja el menú a la derecha */
}

.navegacion a {
  position: relative;                  /* referencia para la línea de la sección actual */
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.75rem;
  text-decoration: none;
  color: var(--color-texto-suave);
  font-weight: 500;
  font-size: 0.975rem;
  white-space: nowrap;                 /* "Mi ánimo" no se parte en dos líneas */
}

/* Los iconos del menú solo se ven en el teléfono (ver el final del archivo). */
.navegacion .icono {
  display: none;
}

.navegacion a:hover {
  color: var(--color-texto);
}

/* Sección actual: texto oscuro y una línea lavanda abajo. */
.navegacion a[aria-current="page"] {
  color: var(--color-texto);
}

.navegacion a[aria-current="page"]::after {
  content: "";                         /* elemento decorativo sin texto */
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -1px;                        /* encima del borde inferior del encabezado */
  height: 2px;
  border-radius: 2px;
  background: var(--color-primario);
}

/* Cuenta, Salir y Ajustes, a la derecha. */
.acciones-encabezado {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Enlace a Mi cuenta: círculo con iniciales + primer nombre. */
.enlace-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 500;
  font-size: 0.95rem;
}

.enlace-cuenta:hover,
.enlace-cuenta[aria-current="page"] {
  background: var(--color-superficie-suave);
  color: var(--color-texto);
}

/* Círculo con las iniciales de la persona. */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Botón redondo con solo un icono (Ajustes). */
.enlace-icono {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-texto-suave);
}

.enlace-icono:hover,
.enlace-icono[aria-current="page"] {
  background: var(--color-superficie-suave);
  color: var(--color-texto);
}

/* Formulario de una sola línea sin márgenes (botón Salir). */
.formulario-en-linea-compacto {
  display: inline-flex;
  margin: 0;
}

/* --- 7. Estructura de las páginas --------------------------------------- */

/* Zona principal: crece para empujar el pie hacia abajo. */
.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Título de página con su entradilla. */
.cabecera-pagina {
  margin-bottom: 2rem;
}

.cabecera-pagina h1 {
  margin-bottom: 0.4rem;
}

/* Frase que explica la página, debajo del título. */
.entradilla {
  font-size: 1.125rem;
  color: var(--color-texto-suave);
  max-width: 62ch;                     /* líneas no demasiado largas */
  margin: 0;
}

.cabecera-pagina .etiqueta-demo,
.cabecera-pagina .etiqueta-revisado {
  margin-top: 0.85rem;
}

/* Columna estrecha y centrada (entrar, registro, cuenta). */
.columna-estrecha {
  max-width: 560px;
  margin: 0 auto;
}

/* Columna de lectura (privacidad, ayuda). */
.columna-lectura {
  max-width: var(--ancho-lectura);
}

/* Tarjeta: superficie blanca con borde fino. */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.25rem;
}

/* Título justo debajo del icono de una tarjeta (Ayuda): poco espacio entre ambos. */
.tarjeta > .icono-caja + h2 {
  margin-top: 1rem;
}

/* El primer título de una tarjeta no lleva margen superior. */
.tarjeta > h1:first-child,
.tarjeta > h2:first-child,
.tarjeta > h3:first-child {
  margin-top: 0;
}

/* Lo último de la tarjeta no deja espacio extra abajo. */
.tarjeta > :last-child {
  margin-bottom: 0;
}

/* Título de sección dentro de una tarjeta, con un enlace o botón a la derecha. */
.encabezado-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.encabezado-seccion h2 {
  margin: 0;
}

/* Rejilla flexible: tantas columnas como quepan de mínimo 240px. */
.rejilla {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 1.25rem;
}

.rejilla > .tarjeta {
  margin-bottom: 0;                    /* la rejilla ya separa con gap */
}

/* Dos columnas: principal (más ancha) y lateral. En pantallas pequeñas, una. */
.dos-columnas {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.dos-columnas > * {
  margin-bottom: 0;
}

.columna-lateral {
  display: grid;
  gap: 1.25rem;
}

.columna-lateral > .tarjeta {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .dos-columnas {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* 7 partes y 5 partes */
  }
}

/* Separación entre bloques grandes de una página. */
.seccion {
  margin-top: 3rem;
}

.seccion > h2:first-child {
  margin-top: 0;
}

/* Fila de botones. */
.acciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1rem 0 0;
}

.acciones-centradas {
  justify-content: center;
}

/* Lista sin viñetas con líneas separadoras (últimas actividades). */
.lista-simple {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-simple li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem 0;
  border-top: 1px solid var(--color-borde);
}

.lista-simple li:first-child {
  border-top: 0;
}

/* --- 8. Pestañas de sección (Ejercicios · Enfoque · Sonidos) ------------ */

.subnavegacion {
  display: flex;
  gap: 0.25rem;
  margin: -0.5rem 0 2rem;
  border-bottom: 1px solid var(--color-borde);
  overflow-x: auto;                    /* en pantallas muy pequeñas se deslizan */
}

.subnavegacion a {
  padding: 0.6rem 0.85rem;
  margin-bottom: -1px;                 /* la línea activa tapa el borde inferior */
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--color-texto-suave);
  font-weight: 500;
  white-space: nowrap;
}

.subnavegacion a:hover {
  color: var(--color-texto);
}

.subnavegacion a[aria-current="page"] {
  color: var(--color-texto);
  border-bottom-color: var(--color-primario);
  font-weight: 600;
}

/* --- 9. Botones ------------------------------------------------------------- */

/* Base de todos los botones y enlaces con forma de botón. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;                    /* tamaño cómodo para el dedo */
  padding: 0.5rem 1.1rem;
  border-radius: var(--radio-control);
  border: 1px solid transparent;       /* reserva el espacio del borde */
  font: inherit;                       /* misma letra que el texto */
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.boton .icono {
  width: 1.15rem;
  height: 1.15rem;
}

/* Principal: relleno lavanda. Uno por pantalla, para la acción más importante. */
.boton-primario {
  background: var(--color-primario);
  color: var(--color-sobre-primario);
}

.boton-primario:hover {
  background: var(--color-primario-oscuro);
  color: var(--color-sobre-primario);
}

/* Secundario: blanco con borde. */
.boton-secundario {
  background: var(--color-superficie);
  border-color: var(--color-borde-campo);
  color: var(--color-texto);
}

.boton-secundario:hover {
  background: var(--color-superficie-suave);
  color: var(--color-texto);
}

/* Terciario: solo texto lavanda (acciones menores). */
.boton-terciario {
  background: transparent;
  color: var(--color-primario-oscuro);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.boton-terciario:hover {
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
}

/* Acciones que borran datos. */
.boton-peligro {
  background: var(--color-superficie);
  border-color: var(--color-error);
  color: var(--color-error);
}

.boton-peligro:hover {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

/* Botón más bajo (encabezado, chat, filas). */
.boton-pequeno {
  min-height: 36px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

/* Botón que ocupa todo el ancho (formularios de entrar). */
.boton-bloque {
  width: 100%;
}

/* Botón cuadrado con solo un icono (editar, borrar). */
.boton-icono {
  width: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--color-texto-suave);
  background: transparent;
}

.boton-icono:hover {
  background: var(--color-superficie-suave);
  color: var(--color-texto);
}

.boton-icono.boton-borrar:hover {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

/* Botón desactivado (mientras se guarda). */
.boton[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- 10. Chips y controles segmentados ---------------------------------- */

/* Chip: botón pequeño para filtros, contextos y mensajes de ejemplo. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radio-control);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  font: inherit;
  font-size: 0.925rem;
  color: var(--color-texto);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.chip:hover {
  border-color: var(--color-borde-campo);
  background: var(--color-superficie-suave);
}

.chip .icono {
  width: 1rem;
  height: 1rem;
}

/* Chip activo (aria-pressed="true" lo pone el JavaScript). */
.chip[aria-pressed="true"] {
  background: var(--color-primario-suave);
  border-color: var(--color-primario);
  color: var(--color-primario-oscuro);
  font-weight: 600;
}

/* Grupo de chips en fila. */
.chips-seleccion {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0;
}

/* Chip con una casilla o un radio escondido dentro (contextos, tema). */
.chip-seleccion {
  position: relative;
}

/* La casilla real se esconde, pero sigue funcionando con teclado y lectores de pantalla. */
.chip-seleccion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* :has(input:checked): el chip cuya casilla está marcada se resalta. */
.chip-seleccion:has(input:checked) {
  background: var(--color-primario-suave);
  border-color: var(--color-primario);
  color: var(--color-primario-oscuro);
  font-weight: 600;
}

.chip-seleccion:has(input:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* Chip desactivado (ya se marcó el máximo de contextos). */
.chip-seleccion:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Control segmentado: varias opciones pegadas en una sola pieza (periodo, tema). */
.segmentado {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
}

.segmentado .chip {
  border-color: transparent;
  background: transparent;
  min-height: 34px;
  border-radius: 7px;
  font-weight: 500;
}

.segmentado .chip:hover {
  background: var(--color-superficie);
}

/* Opción elegida: blanca y con sombra, como una pieza levantada. */
.segmentado .chip[aria-pressed="true"],
.segmentado .chip-seleccion:has(input:checked) {
  background: var(--color-superficie);
  border-color: var(--color-borde);
  color: var(--color-texto);
  box-shadow: 0 1px 2px rgba(30, 42, 44, 0.12);
  font-weight: 600;
}

/* --- 11. Formularios -------------------------------------------------------- */

.campo {
  margin: 1.1rem 0;
}

label,
legend {
  font-weight: 600;
}

/* La etiqueta de un campo va encima, en su propia línea. */
.campo > label {
  display: block;
  margin-bottom: 0.35rem;
}

/* Campos de texto, contraseña, áreas de texto y selectores con el mismo aspecto. */
textarea,
input[type="text"],
input[type="password"],
select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-control);
  font: inherit;
  font-weight: 400;                    /* texto normal aunque el campo esté dentro de una etiqueta en negrita */
  color: var(--color-texto);
  background: var(--color-superficie);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea::placeholder,
input::placeholder {
  color: var(--color-texto-suave);
  opacity: 0.85;
}

/* Al escribir: borde lavanda y halo suave. */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-suave);
  outline: none;                       /* el halo reemplaza al contorno (sigue siendo visible) */
}

/* Selector con flecha propia (la del sistema se ve distinta en cada navegador). */
select {
  width: auto;                         /* solo ocupa lo que necesita */
  appearance: none;                    /* quita la flecha nativa */
  padding-right: 2.4rem;               /* espacio para la flecha */
  background-image: var(--flecha-select);
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  cursor: pointer;
}

textarea {
  resize: vertical;                    /* solo se puede estirar hacia abajo */
  min-height: 6rem;
}

/* Deslizador de volumen. */
input[type="range"] {
  width: min(100%, 220px);
  accent-color: var(--color-primario); /* color del control nativo */
}

/* Casilla con texto al lado (Sonido al terminar, Acepto...). */
.casilla {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 500;
  cursor: pointer;
}

.casilla input {
  width: 18px;
  height: 18px;
  margin: 0.2rem 0 0;
  accent-color: var(--color-primario);
  flex-shrink: 0;
}

/* Texto pequeño de ayuda o de estado. */
.ayuda-campo {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  margin: 0.4rem 0 0;
}

/* Etiqueta y campo en la misma línea. */
.formulario-en-linea {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.formulario-en-linea label,
.formulario-en-linea span {
  font-weight: 500;
}

/* <fieldset> sin el borde que pone el navegador. */
.grupo-opciones {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0;                        /* evita que el fieldset se salga en pantallas pequeñas */
}

.grupo-opciones legend {
  padding: 0;
  margin-bottom: 0.25rem;
}

/* Mensajes de error y de éxito. */
.mensaje-error,
.mensaje-exito {
  padding: 0.65rem 0.9rem;
  border-radius: var(--radio-control);
  margin: 0.9rem 0;
  font-size: 0.95rem;
}

.mensaje-error {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

.mensaje-exito {
  background: var(--color-exito-fondo);
  color: var(--color-exito);
}

/* Barra de filtros de la página de ejercicios. */
.filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.filtros .chips-seleccion {
  margin: 0;
}

/* Línea divisoria con texto en el centro ("o"). */
.divisor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.divisor::before,
.divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-borde);
}

/* --- 12. Etiquetas y avisos ---------------------------------------------- */

/* Etiqueta pequeña de estado "contenido demostrativo" (neutra, no alarmante). */
.etiqueta-demo,
.etiqueta-revisado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-texto-suave);
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  padding: 0.25rem 0.6rem;
  margin: 0 0 1rem;
}

/* Contenido ya revisado por un profesional: en verde. */
.etiqueta-revisado {
  color: var(--color-exito);
  background: var(--color-exito-fondo);
  border-color: transparent;
}

.etiqueta-demo .icono,
.etiqueta-revisado .icono {
  width: 1rem;
  height: 1rem;
}

/* Aviso: icono a la izquierda y texto a la derecha. */
.aviso {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  margin-bottom: 1.25rem;
}

.aviso > .icono {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  color: var(--color-primario);
}

.aviso p:last-child {
  margin-bottom: 0;
}

/* Dentro de un aviso, la etiqueta de revisión va como texto pequeño, sin caja. */
.aviso .etiqueta-demo,
.aviso .etiqueta-revisado {
  margin: 0.6rem 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.aviso h2 {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

/* Aviso informativo en azul suave (chat). */
.aviso-informativo {
  background: var(--color-azul-suave);
  border-color: transparent;
}

/* Aviso importante en ámbar (peligro inmediato en Ayuda). */
.aviso-importante {
  background: var(--color-aviso-fondo);
  border-color: var(--color-aviso-borde);
  color: var(--color-aviso-texto);
}

.aviso-importante > .icono,
.aviso-importante h2 {
  color: var(--color-aviso-texto);
}

/* Notas con borde lateral (precauciones, textos pendientes). */
.nota-precaucion,
.nota-pendiente {
  background: var(--color-aviso-fondo);
  color: var(--color-aviso-texto);
  border-left: 3px solid var(--color-aviso-borde);
  padding: 0.65rem 0.9rem;
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  font-size: 0.95rem;
}

/* Franja "Sin conexión" bajo el encabezado. */
.aviso-conexion {
  background: var(--color-aviso-fondo);
  color: var(--color-aviso-texto);
  border-bottom: 1px solid var(--color-aviso-borde);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

/* Avisos flotantes abajo a la izquierda (privacidad, recordatorio, actualización). */
.aviso-flotante {
  position: fixed;                     /* fijo respecto a la ventana */
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  width: min(420px, calc(100% - 2.5rem));
  padding: 1.1rem 1.25rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  font-size: 0.95rem;
}

.aviso-flotante p {
  margin-bottom: 0.85rem;
}

.aviso-flotante .acciones {
  margin-top: 0;
}

.aviso-recordatorio {
  border-left: 3px solid var(--color-primario);
}

/* Mensajes de resultado de formularios (flash), bajo el encabezado. */
.mensajes-flash {
  padding-top: 1.25rem;
  padding-bottom: 0;
}

.mensajes-flash p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

/* --- 13. Página de inicio ------------------------------------------------ */

/* Portada sin sesión: texto a la izquierda e ilustración de respiración a la derecha. */
.portada {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0 2rem;
}

@media (min-width: 860px) {
  .portada {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.portada h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem); /* título más grande que en otras páginas */
  margin-bottom: 1rem;
}

.portada .entradilla {
  font-size: 1.2rem;
}

/* Anillos concéntricos que "respiran" despacio, con el logo en el centro (decorativo). */
.portada-ilustracion {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;                     /* siempre cuadrada */
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.anillo {
  position: absolute;
  border-radius: 50%;
  background: var(--color-primario);
  animation: respirar 9s ease-in-out infinite; /* animación definida más abajo */
}

.anillo-1 { inset: 0; opacity: 0.07; }
.anillo-2 { inset: 14%; opacity: 0.1; animation-delay: 0.6s; }
.anillo-3 { inset: 28%; opacity: 0.14; animation-delay: 1.2s; }

.portada-ilustracion img {
  position: relative;                  /* por encima de los anillos */
  width: 62%;
  height: auto;
}

/* Inhala (crece) y exhala (vuelve), en un ciclo de 9 segundos. */
@keyframes respirar {
  0%, 100% { transform: scale(0.94); }
  45% { transform: scale(1.03); }
}

/* Saludo con sesión: "Hola, ..." y la fecha. */
.saludo {
  margin-bottom: 2rem;
}

.saludo h1 {
  margin-bottom: 0.25rem;
}

.saludo-fecha {
  color: var(--color-texto-suave);
  margin: 0;
}

/* Franja de clima y próximo festivo (_contexto_hoy.html). */
.contexto-hoy {
  display: flex;
  flex-wrap: wrap;                     /* en pantallas angostas, un bloque debajo del otro */
  gap: 0.75rem 2rem;                   /* espacio vertical y horizontal entre bloques */
  margin-top: 1.25rem;
}

/* Cada bloque: icono a la izquierda y dos líneas de texto. */
.contexto-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  line-height: 1.35;
}

/* Icono dentro de un círculo lavanda claro. */
.contexto-icono {
  flex: none;                          /* el círculo no se encoge */
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-primario-suave);
  color: var(--color-primario);
}

/* Primera línea: temperatura y estado del tiempo, o el festivo. */
.contexto-principal {
  display: block;
  font-weight: 600;
}

/* Segunda línea: detalle del día y el crédito de Open-Meteo. */
.contexto-detalle {
  display: block;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

/* El crédito del clima va pegado al detalle, separado por un punto. */
.contexto-detalle a {
  color: inherit;
}

.contexto-detalle span:not(:empty) + a::before {
  content: "· ";                       /* separador solo si hay detalle antes */
  display: inline-block;
  margin-right: 0.25em;
  text-decoration: none;
}

/* Tarjeta de la frase del día. */
.tarjeta-frase {
  display: flex;
  flex-direction: column;
}

.frase {
  position: relative;
  margin: 0.25rem 0 1.25rem;
  padding-left: 1.75rem;               /* espacio para la comilla grande */
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--color-texto);
}

/* Comilla decorativa grande en lavanda. */
.frase::before {
  content: "\201C";                    /* comilla de apertura “ */
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-primario);
}

.tarjeta-frase .acciones {
  margin-top: auto;                    /* el botón queda abajo de la tarjeta */
  justify-content: space-between;
}

/* Dentro de la frase, la etiqueta de revisión va como texto pequeño, sin caja. */
.tarjeta-frase .etiqueta-demo,
.tarjeta-frase .etiqueta-revisado {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  max-width: 34ch;
}

/* Rejilla de accesos a las herramientas. */
.accesos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Cada acceso: icono, título y una línea de descripción. */
.acceso {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.acceso:hover {
  border-color: var(--color-primario);
  box-shadow: 0 4px 14px rgba(30, 42, 44, 0.07);
  color: inherit;
}

.acceso-titulo {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.acceso-texto {
  display: block;
  font-size: 0.925rem;
  color: var(--color-texto-suave);
  line-height: 1.45;
}

/* Nota final de la portada sobre los límites de la app. */
.nota-limites {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

.nota-limites .icono {
  margin-top: 0.15rem;
  color: var(--color-primario);
}

.nota-limites p {
  margin: 0;
  max-width: 70ch;
}

/* --- 14. Listas de filas con enlace (sugerencias) ------------------------ */

.lista-sugerencias {
  list-style: none;
  padding: 0;
  margin: 0 -0.5rem;                   /* las filas llegan casi al borde de la tarjeta */
}

.lista-sugerencias li {
  margin: 0;
}

/* Cada sugerencia es una fila completa que funciona como enlace. */
.sugerencia {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radio-control);
  text-decoration: none;
  color: inherit;
}

.sugerencia:hover {
  background: var(--color-superficie-suave);
  color: inherit;
}

.lista-sugerencias li + li .sugerencia {
  border-top: 1px solid var(--color-borde);
  border-radius: 0;
}

.sugerencia-cuerpo {
  flex: 1;                             /* empuja la flecha a la derecha */
  min-width: 0;
}

.sugerencia-titulo {
  display: block;
  font-weight: 600;
  color: var(--color-texto);
}

.sugerencia-motivo {
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  line-height: 1.45;
}

.sugerencia > .icono:last-child {
  color: var(--color-texto-suave);
}

/* --- 15. Ejercicios -------------------------------------------------------- */

/* Lista de ejercicios: una sola tarjeta con filas separadas por líneas. */
.lista-ejercicios {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;                    /* las esquinas redondeadas recortan las filas */
}

.ejercicio + .ejercicio {
  border-top: 1px solid var(--color-borde);
}

/* Fila visible de cada ejercicio (<summary>). */
.ejercicio summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;                    /* quita el triángulo por defecto */
}

/* Quita el triángulo también en Safari. */
.ejercicio summary::-webkit-details-marker {
  display: none;
}

.ejercicio summary:hover {
  background: var(--color-superficie-suave);
}

.ejercicio-info {
  flex: 1;
  min-width: 0;
}

.ejercicio-titulo {
  display: block;
  font-weight: 600;
}

/* "Respiración · 2 min" debajo del título. */
.ejercicio-meta {
  display: block;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.ejercicio-tipo,
.ejercicio-duracion {
  white-space: nowrap;
}

/* Flecha que gira al abrir el ejercicio. */
.ejercicio-flecha {
  color: var(--color-texto-suave);
  transition: transform 0.2s;
}

.ejercicio[open] .ejercicio-flecha {
  transform: rotate(180deg);
}

/* Contenido del ejercicio abierto. */
.ejercicio-cuerpo {
  padding: 0.25rem 1.25rem 1.5rem calc(1.25rem + 2.5rem + 1rem); /* alineado con el título, no con el icono */
}

.ejercicio-descripcion {
  margin: 0 0 0.5rem;
  max-width: 65ch;
}

.ejercicio-cuerpo h3 {
  margin-top: 1.25rem;
}

/* Pasos numerados con números en círculo. */
.ejercicio-cuerpo ol {
  counter-reset: paso;                 /* contador propio para los números */
  list-style: none;
  padding: 0;
  margin: 0;
}

.ejercicio-cuerpo ol li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.1rem;
  margin: 0.55rem 0 0;
}

.ejercicio-cuerpo ol li::before {
  content: counter(paso);              /* escribe el número del paso */
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
}

/* Botón de favorito (estrella). */
.boton-favorito {
  color: var(--color-texto-suave);
}

.boton-favorito[aria-pressed="true"] {
  color: var(--color-aviso-texto);
  background: var(--color-aviso-fondo);
}

/* Estrella rellena cuando es favorito. */
.boton-favorito[aria-pressed="true"] .icono {
  fill: currentColor;
}

/* Zona de la guía de respiración y del temporizador. */
.guia-respiracion,
.temporizador-ejercicio {
  text-align: center;
  padding: 1.75rem 1rem 1.25rem;
  border-radius: var(--radio);
  background: var(--color-superficie-suave);
  margin: 1.25rem 0;
}

/* El panda de Serenity, que crece al inhalar y se encoge al exhalar.
   (Se llama "circulo-respiracion" porque ejercicios.js usa ese nombre de clase.) */
.circulo-respiracion {
  width: 220px;
  height: 220px;
  margin: 0 auto 1.25rem;
  transform: scale(0.78);              /* tamaño inicial (pequeño) */
  transform-origin: 50% 85%;           /* crece desde las patas, como al llenar el pecho de aire */
  transition: transform 4s ease-in-out; /* la duración real la pone ejercicios.js según la fase */
}

.circulo-respiracion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Versión en video: el panda respira dentro del video, así que el contenedor no se escala.
   El video tiene fondo transparente; la máscara desvanece abajo el cuerpo, que el video corta. */
.circulo-respiracion:has(.panda-video) {
  width: 260px;
  height: 245px;
  transform: none;
  mix-blend-mode: normal;
}

.panda-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  pointer-events: none;
}

.circulo-grande {
  transform: scale(1);
}

.circulo-pequeno {
  transform: scale(0.78);
}

/* Casilla "Guía con voz" debajo de los botones de la guía y del temporizador. */
.guia-voz {
  margin: 1rem 0 0;
  font-size: 0.95rem;
}

/* Texto de estado de la guía ("Inhala · 3 s · ronda 1 de 6"). */
.guia-estado {
  font-weight: 600;
  min-height: 1.6em;                   /* reserva el espacio para que la página no "salte" */
  margin: 0;
}

/* Números grandes de los temporizadores. */
.temporizador-tiempo,
.reloj-tiempo {
  font-size: 2.75rem;
  font-weight: 300;                    /* números finos: elegantes y fáciles de leer */
  font-variant-numeric: tabular-nums;  /* todos los dígitos del mismo ancho: no tiembla al contar */
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.25rem 0 0.5rem;
  color: var(--color-texto);
}

/* Fila "Registrar que la hice", separada por una línea. */
.registro-actividad {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-borde);
}

.registro-actividad .ayuda-campo {
  margin: 0;
}

/* --- 16. Enfoque ------------------------------------------------------------ */

/* Caja del reloj grande. */
.reloj {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  margin: 1.25rem 0;
  border-radius: var(--radio);
  background: var(--color-superficie-suave);
}

/* "Bloque de trabajo", "Descanso"... */
.reloj-fase {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primario-oscuro);
}

.reloj-tiempo {
  font-size: clamp(3.5rem, 12vw, 5.5rem); /* muy grande, pero se adapta al ancho */
}

.reloj-tarea {
  margin: 0.25rem 0 0;
  color: var(--color-texto-suave);
}

/* Barra de progreso del bloque. */
.barra-progreso {
  max-width: 360px;
  margin: 0.75rem auto 0;
}

/* Opciones del bloque en una fila. */
.opciones-enfoque {
  display: flex;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.opciones-enfoque .campo {
  margin: 0;
}

.opciones-enfoque .casilla {
  min-height: 44px;
  align-items: center;
}

.opciones-enfoque .casilla input {
  margin-top: 0;
}

/* Consejos en dos columnas en pantallas anchas. */
.lista-consejos {
  columns: 2 280px;                    /* dos columnas si caben de 280px */
  column-gap: 2.5rem;
  margin: 0;
}

.lista-consejos li {
  break-inside: avoid;                 /* un consejo no se parte entre columnas */
}

/* --- 17. Sonidos ------------------------------------------------------------ */

.rejilla-sonidos {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}

/* Cada sonido es un botón grande con icono y nombre. */
.tarjeta-sonido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.tarjeta-sonido:hover {
  border-color: var(--color-borde-campo);
}

/* Sonido que está sonando. */
.tarjeta-sonido[aria-pressed="true"] {
  border-color: var(--color-primario);
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
}

.tarjeta-sonido[aria-pressed="true"] .icono-caja {
  background: var(--color-primario);
  color: var(--color-sobre-primario);
}

/* Barritas que suben y bajan mientras suena (solo decorativas). */
.sonido-ondas {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  margin-left: auto;
}

.tarjeta-sonido[aria-pressed="true"] .sonido-ondas {
  display: inline-flex;
}

.sonido-ondas span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: onda 1.1s ease-in-out infinite;
}

.sonido-ondas span:nth-child(2) { animation-delay: 0.2s; }
.sonido-ondas span:nth-child(3) { animation-delay: 0.4s; }

@keyframes onda {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

.sonido-cabecera {
  display: flex;
  width: 100%;
  align-items: center;
}

/* Volumen, apagado automático y botón Detener en fila. */
.controles-sonido {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-borde);
}

.control {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.control label {
  font-weight: 500;
}

/* Títulos "Generados por el navegador" y "Grabaciones de la naturaleza". */
.titulo-grupo-sonidos {
  font-family: var(--fuente);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  margin: 0 0 0.75rem;
}

/* El segundo grupo, separado del primero. */
.rejilla-sonidos + .titulo-grupo-sonidos {
  margin-top: 1.5rem;
}

/* Lista de créditos de las grabaciones. */
.creditos-sonidos {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  padding-left: 1.1rem;
}

/* --- 18. Mi ánimo ----------------------------------------------------------- */

/* Las cinco opciones de ánimo en fila. */
.opciones-animo {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.85rem;
}

/* Cada opción es una tarjeta pulsable con la cara y el nombre. */
.opcion-animo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1rem 0.35rem 0.85rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}

/* El radio real se esconde (sigue funcionando con el teclado). */
.opcion-animo input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Cara de la opción, en el color de su estado de ánimo. */
.opcion-icono {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--color-animo);
  stroke-width: 1.5;
}

.opcion-animo:hover {
  border-color: var(--color-animo);
}

/* Opción marcada: borde y fondo del color de su estado de ánimo. */
.opcion-animo:has(input:checked) {
  border-color: var(--color-animo);
  background: color-mix(in srgb, var(--color-animo) 12%, var(--color-superficie)); /* mezcla: 12 % del color */
  box-shadow: inset 0 0 0 1px var(--color-animo); /* borde doble para que se note más */
  font-weight: 600;
}

.opcion-animo:has(input:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* Tira de días: 7 columnas iguales. */
.tira-dias {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}

/* Cuadro de un día. */
.dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.6rem 0.2rem 0.7rem;
  border-radius: 10px;
  background: var(--color-superficie-suave);
  min-height: 74px;
}

/* Hoy: contorno lavanda. */
.dia-hoy {
  background: var(--color-superficie);
  box-shadow: inset 0 0 0 1.5px var(--color-primario);
}

.dia-nombre {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  line-height: 1.2;
}

.dia-hoy .dia-nombre {
  color: var(--color-primario-oscuro);
  font-weight: 600;
}

/* Día festivo: el cuadro sirve de referencia para colocar la marca de la esquina. */
.dia-festivo {
  position: relative;
}

/* Marca del festivo: triángulo ámbar en la esquina superior derecha. */
.dia-marca-festivo,
.leyenda-festivo {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 13px 13px 0;         /* un triángulo hecho solo con bordes */
  border-color: transparent var(--color-festivo) transparent transparent;
}

.dia-marca-festivo {
  position: absolute;
  top: 0;
  right: 0;
  border-top-right-radius: 10px;       /* sigue la curva de la esquina del cuadro */
}

/* En la leyenda, el mismo triángulo junto a la palabra "Festivo". */
.leyenda-festivo {
  display: inline-block;
}

/* Puntos de color: uno por registro del día. */
.dia-marcas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  max-width: 44px;
}

.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-animo);
}

/* Día sin registros: una rayita suave. */
.dia-vacio {
  width: 12px;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--color-borde-campo);
  opacity: 0.5;
}

/* Vista de 30 días: cuadros más bajos. */
.tira-dias.tira-mes .dia {
  min-height: 60px;
  padding: 0.45rem 0.15rem;
}

.tira-dias.tira-mes .punto {
  width: 8px;
  height: 8px;
}

/* Leyenda de colores de la escala de ánimo. */
.leyenda-animo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.leyenda-animo li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* --- 19. Panel -------------------------------------------------------------- */

/* Cuatro cifras en una sola tarjeta, separadas por líneas. */
.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.25rem 1.5rem;
}

.cifra + .cifra {
  border-left: 1px solid var(--color-borde);
}

.cifra-valor {
  font-family: var(--fuente-titulos);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
}

.cifra-nombre {
  color: var(--color-texto-suave);
  font-size: 0.925rem;
  line-height: 1.35;
}

/* Comparación con el periodo anterior, debajo de las cifras. */
.comparacion-periodo {
  margin: -0.5rem 0 1.5rem;
}

/* Barras horizontales: etiqueta | barra | número. */
.lista-barras {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.fila-barra {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr 2rem;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.barra-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
}

/* Cara pequeña junto a la etiqueta (barras de ánimo). */
.barra-etiqueta .icono {
  color: var(--color-animo);
}

/* Fondo de la barra. */
.barra-pista {
  display: block;
  height: 8px;
  background: var(--color-pista);
  border-radius: 999px;
  overflow: hidden;                    /* el relleno no se sale de las esquinas */
}

/* Relleno de la barra; el ancho lo pone el JavaScript. */
.barra-relleno {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-animo, var(--color-primario)); /* color del ánimo, o lavanda si no hay */
  border-radius: 999px;
  transition: width 0.4s ease;
}

.barra-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Valor cero: en gris, para que se lea como "nada". */
.fila-barra.sin-valor .barra-valor,
.fila-barra.sin-valor .barra-etiqueta {
  color: var(--color-texto-suave);
}

/* Botones de descarga en fila. */
.descargas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

/* Zona de borrado, separada por una línea. */
.zona-peligro {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-borde);
}

/* --- 20. Lista de registros de ánimo ---------------------------------------- */

.lista-registros {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Cada registro: cara | cuerpo | botones. */
.registro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: start;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-borde);
}

.registro:first-child {
  border-top: 0;
  padding-top: 0.25rem;
}

/* Cara del registro dentro de un círculo de su color. */
.registro-icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-animo) 14%, var(--color-superficie));
  color: var(--color-animo);
}

.registro-icono .icono {
  width: 1.5rem;
  height: 1.5rem;
}

/* Fila superior: estado y fecha. */
.registro-cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  flex-wrap: wrap;
}

.registro-titulo {
  margin: 0;
  font-weight: 600;
}

.registro-fecha {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

/* Contextos como etiquetas pequeñas. */
.registro-contextos {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.45rem 0 0;
}

.registro-contextos span {
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radio-pequeno);
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
}

.registro-nota {
  margin: 0.45rem 0 0;
  white-space: pre-line;               /* respeta los saltos de línea que escribió la persona */
}

/* Botones Editar y Borrar, en fila arriba a la derecha. */
.registro-acciones {
  display: flex;
  gap: 0.15rem;
  margin-top: -0.25rem;
}

/* Formulario de edición: ocupa todo el ancho del registro. */
.formulario-edicion {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  background: var(--color-superficie-suave);
}

.formulario-edicion .campo {
  margin: 0.5rem 0 1rem;
}

.formulario-edicion select {
  width: 100%;
}

/* --- 21. Chat ---------------------------------------------------------------- */

/* Lista de burbujas con altura máxima y scroll propio. */
.chat-mensajes {
  list-style: none;
  padding: 0.25rem 0;
  margin: 0 0 1rem;
  min-height: 220px;
  max-height: 58vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Burbuja base. */
.mensaje {
  max-width: min(85%, 620px);
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  line-height: 1.55;
}

.mensaje p {
  margin: 0;
  white-space: pre-line;               /* respeta los saltos de línea de la respuesta */
}

/* "Tú" / "Serenity" encima del texto. */
.mensaje-autor {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  margin-bottom: 0.2rem;
}

/* Burbuja de la persona: a la derecha, en azul suave. */
.mensaje-usuario {
  align-self: flex-end;
  background: var(--color-azul-suave);
  border-bottom-right-radius: 4px;     /* "colita" de la burbuja */
}

/* Burbuja del asistente: a la izquierda, en gris cálido. */
.mensaje-asistente {
  align-self: flex-start;
  background: var(--color-superficie-suave);
  border-bottom-left-radius: 4px;
}

/* Respuesta ante un mensaje de riesgo y notas del sistema: ámbar, ancho completo. */
.mensaje-riesgo,
.mensaje-nota {
  max-width: 100%;
  background: var(--color-aviso-fondo);
  border: 1px solid var(--color-aviso-borde);
  color: var(--color-aviso-texto);
}

.mensaje-riesgo .mensaje-autor,
.mensaje-nota .mensaje-autor {
  color: var(--color-aviso-texto);
}

.mensaje-nota {
  align-self: stretch;
  font-size: 0.95rem;
}

/* Botón de acción dentro de una burbuja. */
.mensaje .boton {
  margin-top: 0.75rem;
}

/* Mensajes de ejemplo encima del campo de texto. */
.sugerencias {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.85rem;
}

.sugerencias-titulo {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  margin-right: 0.25rem;
}

/* Campo de texto y botón Enviar en fila. */
.chat-formulario {
  display: flex;
  gap: 0.5rem;
}

.chat-formulario input {
  flex: 1;                             /* el campo ocupa todo el espacio libre */
}

/* Estimación de tono debajo de una respuesta. */
.tono {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--color-texto) 12%, transparent); /* línea muy suave */
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.tono p {
  margin: 0 0 0.5rem;
}

.tono .acciones {
  margin: 0 0 0.25rem;
  gap: 0.4rem;
}

.tono .ayuda-campo {
  margin: 0;
}

/* --- 22. Cuentas -------------------------------------------------------------- */

/* Cabecera centrada de los formularios de entrar y crear cuenta. */
.cabecera-acceso {
  text-align: center;
  margin-bottom: 1.5rem;
}

.cabecera-acceso img {
  width: auto;
  height: 70px;
  margin-bottom: 0.75rem;
}

.cabecera-acceso .entradilla {
  margin: 0 auto;
}

/* Icono de la página de error, encima del título. */
.cabecera-acceso .icono-caja {
  margin-bottom: 0.75rem;
}

.tarjeta-acceso {
  max-width: 440px;
  margin: 0 auto;
}

/* Datos de la cuenta: término a la izquierda y valor a la derecha. */
.lista-datos {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.6rem 1.5rem;
  margin: 0 0 1rem;
}

.lista-datos dt {
  color: var(--color-texto-suave);
}

.lista-datos dd {
  margin: 0;
  font-weight: 600;
}

/* --- 23. Acerca y páginas de texto ------------------------------------------- */

/* Misión y visión, una al lado de la otra. */
.par-textos {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 1rem;
}

.par-textos h2 {
  margin-top: 0;
}

/* Valores: icono, nombre y explicación. */
.valores {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.valores li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0;
}

.valores h3 {
  margin: 0 0 0.2rem;
}

.valores p {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* Secciones de documento (privacidad): título con línea arriba, sin tarjetas. */
.documento section + section {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-borde);
}

.documento h2 {
  margin-top: 0;
}

/* Filas de Ajustes: texto a la izquierda y control a la derecha. */
.ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--color-borde);
}

.tarjeta > h2 + .ajuste,
.ajuste:first-child {
  border-top: 0;
  padding-top: 0.25rem;
}

.ajuste-texto {
  flex: 1 1 260px;
}

.ajuste-titulo {
  display: block;
  font-weight: 600;
}

/* Si el título de la fila es un <h2> (página Instalar), tamaño de texto normal. */
h2.ajuste-titulo {
  font-family: var(--fuente);
  font-size: 1.0625rem;
  letter-spacing: 0;
  margin: 0;
}

.ajuste-descripcion {
  display: block;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.ajuste .segmentado,
.ajuste .chips-seleccion {
  margin: 0;
}

/* Formulario de recordatorios: un poco de aire debajo de su explicación. */
#formulario-recordatorios {
  margin-top: 0.75rem;
}

/* Controles a la derecha de una fila (casilla y botón "Probar" de la voz). */
.ajuste-controles {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

/* Fila de notificaciones: separada del formulario de recordatorios con una línea. */
.ajuste-separado {
  margin-top: 1rem;
}

/* --- 24. Pie de página ------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie);
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.pie-interior {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
}

/* Fila superior: marca a la izquierda y enlaces a la derecha. */
.pie-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-borde);
}

.pie-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-texto);
}

.pie-marca img {
  width: auto;
  height: 40px;
}

.pie-enlaces {
  display: flex;
  gap: 0.35rem 1.25rem;
  flex-wrap: wrap;
}

.pie-enlaces a {
  color: var(--color-texto-suave);
  text-decoration: none;
}

.pie-enlaces a:hover {
  color: var(--color-texto);
  text-decoration: underline;
}

.pie-aviso {
  max-width: 72ch;
  margin: 0 0 0.5rem;
}

.pie-aviso strong {
  color: var(--color-texto);
  font-weight: 600;
}

.pie-creditos {
  margin: 0;
  font-size: 0.85rem;
}

/* --- 25. Pantallas medianas y pequeñas -------------------------------------- */

/* Hasta 900px de ancho: el nombre junto al círculo de la cuenta se oculta. */
@media (max-width: 900px) {
  .enlace-cuenta-nombre {
    display: none;
  }

  .enlace-cuenta {
    padding: 0.25rem;
  }

  .navegacion a {
    padding: 0 0.55rem;
  }

  .navegacion a[aria-current="page"]::after {
    left: 0.55rem;
    right: 0.55rem;
  }

  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* cifras en 2 x 2 */
  }

  .cifra:nth-child(3) {
    border-left: 0;
  }

  .cifra:nth-child(n + 3) {
    border-top: 1px solid var(--color-borde);
  }
}

/* Hasta 720px (teléfonos): el menú pasa a una barra fija abajo, con iconos. */
@media (max-width: 720px) {
  body {
    font-size: 1rem;                   /* texto un poco más pequeño en el teléfono */
    padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* espacio para la barra de abajo */
  }

  .encabezado-interior {
    gap: 0.75rem;
    padding: 0 1rem;
    min-height: 56px;
  }

  /* Barra de navegación inferior, como en las apps del teléfono. */
  .navegacion {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* seis botones iguales */
    gap: 0;
    margin: 0;
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom)); /* respeta la barra del sistema */
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
  }

  .navegacion a {
    flex-direction: column;            /* icono arriba y texto abajo */
    justify-content: center;
    gap: 0.15rem;
    min-height: 54px;
    padding: 0.2rem 0.1rem;
    font-size: 0.72rem;
    border-radius: var(--radio-control);
  }

  .navegacion .icono {
    display: block;
    width: 22px;
    height: 22px;
  }

  .navegacion a[aria-current="page"] {
    color: var(--color-primario-oscuro);
    font-weight: 600;
  }

  .navegacion a[aria-current="page"] .icono {
    stroke-width: 2.1;                 /* icono de la sección actual un poco más grueso */
  }

  /* En la barra inferior no hace falta la línea de sección actual. */
  .navegacion a[aria-current="page"]::after {
    display: none;
  }

  .acciones-encabezado {
    margin-left: auto;                 /* cuenta y ajustes a la derecha del logo */
  }

  /* El botón Salir muestra solo su icono. */
  .boton-salir span {
    display: none;
  }

  .contenido {
    padding: 1.75rem 1rem 3rem;
  }

  .tarjeta {
    padding: 1.15rem;
  }

  h2 {
    margin-top: 2rem;
  }

  .seccion {
    margin-top: 2.25rem;
  }

  /* Avisos flotantes: por encima de la barra inferior y a todo el ancho. */
  .aviso-flotante {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .portada {
    padding-top: 0;
    gap: 1.5rem;
  }

  /* En el teléfono la ilustración va primero y más pequeña. */
  .portada-ilustracion {
    order: -1;
    width: 190px;
  }

  .opciones-animo {
    gap: 0.4rem;
  }

  .opcion-animo {
    padding: 0.75rem 0.15rem 0.65rem;
    font-size: 0.8rem;
  }

  .opcion-icono {
    width: 1.75rem;
    height: 1.75rem;
  }

  .tira-dias {
    gap: 0.25rem;
  }

  .ejercicio summary {
    padding: 0.9rem 1rem;
    gap: 0.85rem;
  }

  .ejercicio-cuerpo {
    padding: 0 1rem 1.25rem;           /* en el teléfono el contenido usa todo el ancho */
  }

  .fila-barra {
    grid-template-columns: minmax(6.5rem, auto) 1fr 1.75rem;
  }

  .cifra {
    padding: 1rem 1.1rem;
  }

  .cifra-valor {
    font-size: 1.85rem;
  }

  .mensaje {
    max-width: 92%;
  }

  .lista-datos {
    grid-template-columns: minmax(0, 1fr); /* término y valor uno debajo del otro */
    gap: 0.1rem;
  }

  .lista-datos dd {
    margin-bottom: 0.6rem;
  }
}

/* --- 25b. Universo: personajes, galaxias y mundos ------------------------- */

/* Mascota de Serenity en la página Acerca. */
.mascota-acerca {
  margin: 0 auto 2rem;
  width: min(240px, 70%);
}

.mascota-acerca img {
  display: block;
  width: 100%;
  height: auto;
}

/* Foto del personaje en el encabezado, en lugar de las iniciales. */
.avatar-personaje {
  object-fit: cover;
  object-position: 50% 100%;           /* el bebé está en la parte de abajo del lienzo */
  background: var(--color-primario-suave);
  padding: 0;
  border: 2px solid var(--color-primario-suave);
}

/* Selector de personaje (registro, Mi cuenta y Universo). */
.selector-personaje {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;                        /* evita que el fieldset se salga en pantallas angostas */
}

.selector-personaje legend {
  font-weight: 600;
  padding: 0;
}

.opciones-personaje {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); /* tantas columnas como quepan */
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.opcion-personaje {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}

/* El radio queda invisible pero sigue funcionando con el teclado. */
.opcion-personaje input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.opcion-personaje img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 100%;           /* muestra la parte de abajo del lienzo, donde está el bebé */
  background: radial-gradient(circle at 50% 35%, var(--color-nebulosa-1), var(--color-superficie-suave) 70%);
}

.opcion-personaje:hover {
  border-color: var(--color-primario);
}

/* Personaje elegido: borde y fondo lavanda. :has() mira si el radio de dentro está marcado. */
.opcion-personaje:has(input:checked) {
  border-color: var(--color-primario);
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
}

.opcion-personaje:has(input:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* Personaje en su etapa: escenario circular y la imagen más pequeña o más grande. */
.personaje {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.personaje-escenario {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: end center;             /* el personaje "se para" abajo, como en el suelo */
  padding-bottom: 6px;
  background:
    radial-gradient(circle at 50% 30%, var(--color-nebulosa-1), transparent 65%),
    var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
}

/* Todas las imágenes de un personaje tienen el mismo lienzo: con la misma altura,
   el bebé se ve pequeño y el adulto grande, igual que en la lámina original. */
.personaje-imagen {
  width: auto;
  height: 142px;
  object-fit: contain;
  animation: flotar 5s ease-in-out infinite; /* sube y baja muy despacio */
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.personaje-info {
  flex: 1 1 220px;
  min-width: 0;
}

.personaje-info p {
  margin: 0 0 0.35rem;
}

.personaje-nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 600;
}

/* Etiqueta pequeña tipo "pastilla" (etapa, mundo completado). */
.etiqueta-etapa {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  font-family: var(--fuente);
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}

.etiqueta-etapa .icono {
  width: 14px;
  height: 14px;
}

/* Barra de avance hacia la siguiente etapa. */
.barra-etapa {
  width: 100%;
  height: 10px;
  margin: 0.25rem 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-pista);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.barra-etapa::-webkit-progress-bar {
  background: var(--color-pista);
  border-radius: 999px;
}

.barra-etapa::-webkit-progress-value {
  background: linear-gradient(90deg, #a7d3ec, var(--color-primario));
  border-radius: 999px;
}

.barra-etapa::-moz-progress-bar {
  background: linear-gradient(90deg, #a7d3ec, var(--color-primario));
  border-radius: 999px;
}

/* Encabezado de la página Universo, con el panda a la derecha. */
.cabecera-universo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.panda-guia {
  flex: 0 0 auto;
  width: 130px;
  height: auto;
  animation: respirar 9s ease-in-out infinite;
}

/* Emoción activa: cara y nombre con el color del ánimo. */
.emocion-activa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-animo);
  margin: 0 0 0.5rem;
}

.emocion-activa .icono {
  width: 36px;
  height: 36px;
}

/* Colores de cada galaxia: planetas, espacio del tablero y paisaje de sus mundos. */
.galaxia-via-lactea {
  --planeta-1: #d6defb; --planeta-2: #8fb8ea; --planeta-3: #4d5fae;
  --nebulosa-a: rgba(120, 170, 255, 0.45); --nebulosa-b: rgba(170, 140, 255, 0.4);
  --espacio-1: #0d1236; --espacio-2: #26306e;
  --cielo: #3d4a9e; --horizonte: #8fb8ea;
  --colina-lejos: #5162b0; --colina-cerca: #3b4a92;
  --suelo-1: #6e7fd0; --suelo-2: #3c4a94; --suelo-borde: #a9b8f2;
}
.galaxia-andromeda {
  --planeta-1: #f4dcff; --planeta-2: #c08fe6; --planeta-3: #6a3f9e;
  --nebulosa-a: rgba(230, 130, 255, 0.42); --nebulosa-b: rgba(255, 140, 190, 0.35);
  --espacio-1: #1a0d36; --espacio-2: #4a2470;
  --cielo: #6a3d9a; --horizonte: #e6a9d8;
  --colina-lejos: #7a4bab; --colina-cerca: #5b3488;
  --suelo-1: #a774cf; --suelo-2: #5e3590; --suelo-borde: #e3c4f5;
}
.galaxia-centaurus-a {
  --planeta-1: #ffe9c7; --planeta-2: #f0a86e; --planeta-3: #a4503a;
  --nebulosa-a: rgba(255, 170, 90, 0.42); --nebulosa-b: rgba(255, 110, 120, 0.35);
  --espacio-1: #26100f; --espacio-2: #6a2e2a;
  --cielo: #9a4a3a; --horizonte: #f5c38e;
  --colina-lejos: #a85a42; --colina-cerca: #84402f;
  --suelo-1: #d38a5c; --suelo-2: #8a4630; --suelo-borde: #ffd3a6;
}

.galaxia {
  padding: 1.25rem;
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--color-superficie) 82%, transparent); /* deja ver un poco las estrellas */
  border: 1px solid var(--color-borde);
}

.galaxia-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.galaxia-cabecera > div {
  flex: 1 1 320px;                     /* el título ocupa el espacio; el avance va a la derecha */
}

.galaxia-cabecera h2 {
  margin-top: 0;
  margin-bottom: 0.15rem;
}

.galaxia-cabecera .ayuda-campo {
  margin: 0;
}

.galaxia-avance {
  display: inline-flex;
  margin-top: 0.4rem;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.galaxia-avance .icono {
  width: 16px;
  height: 16px;
}

.galaxia-bloqueada .galaxia-cabecera h2 {
  color: var(--color-texto-suave);
}

/* Página de un mundo: migas de pan. */
.migas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  color: var(--color-texto-suave);
}

/* --- Tablero de la galaxia (mapa estilo videojuego) ---------------------- */

/* Tablero: un trozo de espacio oscuro con nebulosas y estrellas que titilan.
   Siempre es oscuro (también en el tema claro) para que se sienta como un juego. */
.tablero {
  position: relative;
  aspect-ratio: 100 / 40;              /* ancho / alto: los planetas usan porcentajes */
  min-height: 280px;
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  isolation: isolate;                  /* las capas de abajo no se mezclan con la página */
  background:
    radial-gradient(ellipse 45% 60% at 15% 20%, var(--nebulosa-a), transparent 70%),
    radial-gradient(ellipse 40% 55% at 85% 80%, var(--nebulosa-b), transparent 70%),
    radial-gradient(1.4px 1.4px at 10% 20%, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 35% 75%, #ffffff 99%, transparent),
    radial-gradient(1.6px 1.6px at 60% 15%, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 82% 55%, #ffffff 99%, transparent),
    radial-gradient(1.2px 1.2px at 50% 45%, #dfe6ff 99%, transparent),
    linear-gradient(160deg, var(--espacio-1), var(--espacio-2));
  background-size: 100% 100%, 100% 100%, 180px 180px, 180px 180px, 180px 180px, 180px 180px, 230px 230px, 100% 100%;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(20, 24, 70, 0.25);
}

/* Capa de estrellas que titila (pseudo-elemento: no necesita HTML). */
.tablero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(2px 2px at 20% 30%, #ffffff 99%, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff6c9 99%, transparent),
    radial-gradient(2px 2px at 45% 85%, #cfe0ff 99%, transparent);
  background-size: 260px 260px;
  animation: titilar 3.5s ease-in-out infinite alternate;
}

@keyframes titilar {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

/* Ruta luminosa entre planetas (SVG estirado al tamaño del tablero).
   Sin guiones: al estirar el SVG los guiones se deformarían. */
.tablero-ruta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(200, 215, 255, 0.4);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* el grosor no se deforma al estirar el SVG */
  filter: drop-shadow(0 0 4px rgba(170, 190, 255, 0.9));
  animation: brillar-ruta 2.4s ease-in-out infinite alternate;
}

.tablero-ruta-angosta {
  display: none;
}

@keyframes brillar-ruta {
  from { stroke: rgba(200, 215, 255, 0.25); }
  to { stroke: rgba(200, 215, 255, 0.6); }
}

/* Posiciones de los 9 planetas (en porcentaje del tablero). Las usan los planetas y el personaje. */
.posicion-1 { --x: 6%; --y: 70%; --retraso: 0s; }
.posicion-2 { --x: 17%; --y: 32%; --retraso: -0.7s; }
.posicion-3 { --x: 28%; --y: 70%; --retraso: -1.4s; }
.posicion-4 { --x: 39%; --y: 32%; --retraso: -2.1s; }
.posicion-5 { --x: 50%; --y: 70%; --retraso: -2.8s; }
.posicion-6 { --x: 61%; --y: 32%; --retraso: -0.35s; }
.posicion-7 { --x: 72%; --y: 70%; --retraso: -1.05s; }
.posicion-8 { --x: 83%; --y: 32%; --retraso: -1.75s; }
.posicion-9 { --x: 94%; --y: 70%; --retraso: -2.45s; }

.planetas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.planeta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.planeta-boton {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: #ffffff;
  text-decoration: none;
  border-radius: 12px;
  padding: 0.25rem;
}

.planeta-boton:focus-visible {
  outline: 3px solid #ffe28a;
  outline-offset: 4px;
}

/* La esfera del planeta: degradado con luz arriba a la izquierda y sombra abajo. */
.planeta-esfera {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.85) 0 5%, transparent 14%),
    radial-gradient(circle at 38% 35%, var(--planeta-1), var(--planeta-2) 58%, var(--planeta-3));
  box-shadow: inset -10px -9px 18px rgba(0, 0, 0, 0.4), 0 0 22px color-mix(in srgb, var(--planeta-2) 60%, transparent);
  animation: flotar-planeta 4s ease-in-out infinite;
  animation-delay: var(--retraso);
  transition: transform 0.25s ease;
}

/* Superficie que gira: franjas que se desplazan dentro del círculo. */
.planeta-esfera::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(170deg, rgba(255, 255, 255, 0.22) 0 6px, transparent 6px 16px, rgba(0, 0, 0, 0.12) 16px 22px, transparent 22px 30px);
  background-size: 200% 100%;
  mix-blend-mode: soft-light;
  animation: girar-superficie 9s linear infinite;
}

/* Planetas 2, 5 y 8: cráteres en vez de franjas. */
.tipo-2::before,
.tipo-5::before,
.tipo-8::before {
  background:
    radial-gradient(circle at 30% 60%, rgba(0, 0, 0, 0.28) 0 7%, transparent 8%),
    radial-gradient(circle at 65% 35%, rgba(0, 0, 0, 0.22) 0 9%, transparent 10%),
    radial-gradient(circle at 70% 72%, rgba(0, 0, 0, 0.2) 0 5%, transparent 6%),
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.18) 0 4%, transparent 5%);
  background-size: 200% 100%;
  mix-blend-mode: multiply;
}

/* Planetas 3, 6 y 9: tienen anillo. */
.tipo-3::after,
.tipo-6::after,
.tipo-9::after {
  content: "";
  position: absolute;
  left: -26%;
  right: -26%;
  top: 40%;
  height: 22%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.15); /* la parte de atrás del anillo, más tenue */
  transform: rotate(-16deg);
}

/* Cada tipo un poco distinto de tamaño, para que el mapa no se vea repetido. */
.tipo-1, .tipo-7 { width: 58px; height: 58px; }
.tipo-4, .tipo-9 { width: 72px; height: 72px; }

@keyframes flotar-planeta {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes girar-superficie {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

.planeta-boton:hover .planeta-esfera,
.planeta-boton:focus-visible .planeta-esfera {
  transform: scale(1.12);
}

.planeta-nombre {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Planeta disponible: halo que late y cartel "¡Juega!". */
.planeta-disponible .planeta-esfera {
  box-shadow: inset -10px -9px 18px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.15), 0 0 30px 8px color-mix(in srgb, var(--planeta-2) 80%, transparent);
}

.planeta-disponible .planeta-boton::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: onda-planeta 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes onda-planeta {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.9); opacity: 0; }
}

.planeta-jugar {
  order: 3;                            /* debajo del nombre, para no chocar con el personaje */
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #ffe28a;
  color: #3a2c00;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  animation: saltar-cartel 1.2s ease-in-out infinite;
}

@keyframes saltar-cartel {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Planeta completado: una estrella dorada que brilla junto al planeta. */
.planeta-insignia {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #ffd34d;
  filter: drop-shadow(0 0 6px rgba(255, 211, 77, 0.9));
  animation: brillar-estrella 2.4s ease-in-out infinite;
}

.planeta-insignia .icono {
  width: 28px;
  height: 28px;
}

/* --- Estrellas (una por mundo completado) -------------------------------- */

/* El icono de estrella es de contorno; relleno dorado cuando está ganada. */
.icono-estrella {
  fill: currentColor;
  stroke: #b8860b;
  stroke-width: 1.2;
}

@keyframes brillar-estrella {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.12) rotate(8deg); }
}

/* Estrella recién ganada: entra girando desde grande y deja un destello. */
.estrella-nueva {
  animation: estrella-aparece 1.1s cubic-bezier(0.2, 1.4, 0.4, 1) both, brillar-estrella 2.4s ease-in-out 1.1s infinite;
}

@keyframes estrella-aparece {
  0% { transform: scale(4) rotate(-200deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.planeta-insignia.estrella-nueva::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid rgba(255, 211, 77, 0.9);
  animation: onda-planeta 1s ease-out 0.9s 3 both;
}

/* Fila de 9 estrellas de cada galaxia (en la cabecera). */
.estrellas-galaxia {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0.3rem 0 0;
}

.ranura-estrella {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--color-pista);
}

.ranura-estrella .icono {
  width: 24px;
  height: 24px;
}

/* Estrella aún no ganada: solo el contorno, tenue. */
.ranura-estrella:not(.ranura-llena) .icono-estrella {
  fill: none;
  stroke: var(--color-borde-campo);
  opacity: 0.6;
}

.ranura-llena {
  color: #f5c518;
}

/* Contador total de estrellas (tarjeta "Tu emoción activa"). */
.contador-estrellas {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0.2rem;
  padding: 0.35rem 0.9rem 0.35rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff6d6, #ffe7a3);
  color: #5b4300;
  font-size: 1.05rem;
}

.contador-estrellas .icono {
  width: 26px;
  height: 26px;
  color: #f5c518;
}

.contador-estrellas-nuevo .icono {
  animation: estrella-aparece 1.1s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

/* Etiqueta "Estrella ganada" junto al nombre del mundo. */
.etiqueta-estrella {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  vertical-align: middle;
  padding: 0.15rem 0.7rem 0.15rem 0.4rem;
  border-radius: 999px;
  background: #fff3c4;
  color: #5b4300;
  font-family: var(--fuente);
  font-size: 0.9rem;
  font-weight: 700;
}

.etiqueta-estrella .icono {
  width: 20px;
  height: 20px;
  color: #f5c518;
}

/* Planeta bloqueado: apagado, en gris, con candado. */
.planeta-bloqueado .planeta-esfera {
  filter: grayscale(1) brightness(0.5);
  box-shadow: inset -10px -9px 18px rgba(0, 0, 0, 0.5);
  animation: none;
}

.planeta-bloqueado .planeta-nombre {
  opacity: 0.55;
}

.planeta-candado {
  position: absolute;
  top: calc(0.25rem + 20px);
  color: rgba(255, 255, 255, 0.8);
}

.planeta-candado .icono {
  width: 22px;
  height: 22px;
}

.planeta-bloqueado .planeta-boton {
  cursor: not-allowed;
}

.planeta.sacudir .planeta-boton {
  animation: sacudir 0.45s ease;
}

@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

/* El personaje del jugador sobre el mapa. */
.viajero {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: auto;
  height: 96px;
  transform: translate(-50%, -122%);   /* de pie encima del planeta */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  transition: left 0.9s cubic-bezier(0.5, 0, 0.3, 1), top 0.9s cubic-bezier(0.5, 0, 0.3, 1);
  animation: rebotar 1.6s ease-in-out infinite;
}

.viajero.viajando {
  animation: saltar-viaje 0.45s ease-in-out infinite;
}

@keyframes rebotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes saltar-viaje {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

/* Galaxia bloqueada: todo apagado y un cartel encima. */
.tablero-bloqueado .planetas,
.tablero-bloqueado .tablero-ruta {
  opacity: 0.55;
}

.tablero-cerrado {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.2rem;
  background: rgba(8, 10, 30, 0.45);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.tablero-aviso {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  z-index: 4;
  transform: translateX(-50%);
  margin: 0;
  max-width: 90%;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(8, 10, 30, 0.75);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.tablero-aviso:empty {
  display: none;
}

/* --- Escena de un mundo (pequeño juego de plataforma) ------------------- */

.escena-juego {
  position: relative;
  height: 400px;
  margin-bottom: 1.5rem;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: linear-gradient(180deg, var(--espacio-1) 0%, var(--cielo) 62%, var(--horizonte) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(20, 24, 70, 0.25);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;          /* sin zoom por doble toque en el teléfono */
  --avance: 0;                         /* lo actualiza mundo.js: posición del personaje (0 a 100) */
}

.escena-juego:focus-visible {
  outline: 3px solid #ffe28a;
  outline-offset: 3px;
}

/* Capas del fondo. Se mueven un poco al caminar (efecto parallax) con --avance. */
.escena-capa {
  position: absolute;
  pointer-events: none;
}

.escena-estrellas {
  inset: 0 -20% 0 -20%;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 40% 10%, #ffffff 99%, transparent),
    radial-gradient(2px 2px at 75% 30%, #fff6c9 99%, transparent),
    radial-gradient(1px 1px at 90% 8%, #ffffff 99%, transparent);
  background-size: 200px 160px;
  transform: translateX(calc(var(--avance) * -0.4px));
  animation: titilar 4s ease-in-out infinite alternate;
}

/* Astro grande en el cielo (con anillo), con los colores de la galaxia. */
.escena-astro {
  top: 28px;
  right: 9%;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.85) 0 5%, transparent 14%),
    radial-gradient(circle at 38% 35%, var(--planeta-1), var(--planeta-2) 58%, var(--planeta-3));
  box-shadow: inset -14px -12px 24px rgba(0, 0, 0, 0.35), 0 0 40px color-mix(in srgb, var(--planeta-2) 70%, transparent);
  transform: translateX(calc(var(--avance) * -0.6px));
  animation: flotar-planeta 7s ease-in-out infinite;
}

.escena-astro::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 40%;
  height: 22%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.15);
  transform: rotate(-14deg);
}

/* Colinas lejanas y cercanas: semicírculos repetidos. */
.escena-colinas {
  left: -15%;
  right: -15%;
  background-repeat: repeat-x;
}

.escena-colinas-lejos {
  bottom: 70px;
  height: 150px;
  background-image: radial-gradient(ellipse 50% 100% at 50% 100%, var(--colina-lejos) 98%, transparent 100%);
  background-size: 260px 100%;
  opacity: 0.85;
  transform: translateX(calc(var(--avance) * -1px));
}

.escena-colinas-cerca {
  bottom: 70px;
  height: 90px;
  background-image: radial-gradient(ellipse 50% 100% at 50% 100%, var(--colina-cerca) 98%, transparent 100%);
  background-size: 180px 100%;
  background-position: 90px 0;
  transform: translateX(calc(var(--avance) * -2px));
}

/* Suelo del mundo: franja con borde claro y piedritas. */
.escena-suelo {
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  background:
    radial-gradient(circle at 12% 55%, rgba(0, 0, 0, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 37% 75%, rgba(0, 0, 0, 0.15) 0 4px, transparent 5px),
    radial-gradient(circle at 63% 45%, rgba(0, 0, 0, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 70%, rgba(0, 0, 0, 0.15) 0 3px, transparent 4px),
    linear-gradient(180deg, var(--suelo-1), var(--suelo-2));
  background-size: 220px 100%, 220px 100%, 220px 100%, 220px 100%, 100% 100%;
  border-top: 5px solid var(--suelo-borde);
}

/* Objetos con los que se interactúa: panda, cristales de actividad y portal. */
.objeto-escena {
  position: absolute;
  bottom: 68px;                        /* apoyados sobre el suelo */
  left: var(--x);
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

.objeto-escena:focus-visible {
  outline: 3px solid #ffe28a;
  outline-offset: 4px;
  border-radius: 12px;
}

.objeto-panda { --x: 9%; }
.estacion-1 { --x: 31%; }
.estacion-2 { --x: 52%; }
.estacion-3 { --x: 73%; }
.objeto-portal { --x: 92%; }

/* Globo de diálogo y tecla de acción que aparece al acercarse. */
.globo {
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2440;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.globo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #ffffff;
}

/* El globo se ve al estar cerca, al pasar el ratón o con el foco del teclado. */
.objeto-escena.cerca .globo,
.objeto-escena:hover .globo,
.objeto-escena:focus-visible .globo {
  opacity: 1;
  transform: translateY(0);
}

.objeto-panda img {
  width: auto;
  height: 118px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
  animation: rebotar 3s ease-in-out infinite;
}

/* Cristal flotante con el icono de la actividad, sobre un pedestal. */
.estacion-cristal {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), var(--planeta-1) 45%, var(--planeta-2));
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--planeta-2) 75%, transparent), inset -6px -6px 12px rgba(0, 0, 0, 0.2);
  animation: flotar-cristal 2.6s ease-in-out infinite;
}

.estacion-2 .estacion-cristal { animation-delay: -0.9s; }
.estacion-3 .estacion-cristal { animation-delay: -1.7s; }

.estacion-cristal .icono {
  width: 26px;
  height: 26px;
  color: #2b3160;
  transform: rotate(-45deg);           /* el icono queda derecho dentro del rombo */
}

@keyframes flotar-cristal {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.estacion-base {
  width: 62px;
  height: 18px;
  margin-top: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 70%);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.25);
}

.estacion.cerca .estacion-cristal {
  box-shadow: 0 0 34px 10px color-mix(in srgb, var(--planeta-2) 90%, transparent), inset -6px -6px 12px rgba(0, 0, 0, 0.2);
}

/* Actividad hecha: el cristal se vuelve dorado y muestra un check. */
.estacion.hecha .estacion-cristal {
  background: linear-gradient(135deg, #fffbe0, #ffd86b 50%, #f2a93b);
  box-shadow: 0 0 26px 6px rgba(255, 210, 90, 0.75), inset -6px -6px 12px rgba(0, 0, 0, 0.15);
}

.estacion-hecha {
  position: absolute;
  top: -10px;
  right: -12px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6fd3a0;
  color: #0c3320;
  box-shadow: 0 0 0 2px #ffffff;
}

.estacion-hecha .icono {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.estacion.hecha .estacion-hecha {
  display: grid;
}

/* Portal de salida: un óvalo con un remolino que gira cuando está activo. */
.portal-anillo {
  position: relative;
  display: block;
  width: 70px;
  height: 104px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.35));
  overflow: hidden;
}

.portal-anillo::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, var(--planeta-1), #ffffff, var(--planeta-2), var(--planeta-3), var(--planeta-1));
  opacity: 0.25;
  animation: girar 6s linear infinite;
}

.objeto-portal.activo .portal-anillo {
  border-color: #ffe28a;
  box-shadow: 0 0 30px 8px rgba(255, 226, 138, 0.6);
}

.objeto-portal.activo .portal-anillo::before {
  opacity: 0.95;
  animation-duration: 1.6s;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* El personaje del jugador. mundo.js cambia su "left" y las clases de movimiento. */
.jugador {
  position: absolute;
  bottom: 64px;
  left: 19%;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
}

.jugador img {
  display: block;
  width: auto;
  height: 168px;                       /* lienzo completo: el bebé ocupa la mitad de abajo */
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease;
}

.jugador.mirando-izquierda img {
  transform: scaleX(-1);               /* se voltea al caminar hacia la izquierda */
}

.jugador.caminando {
  animation: paso 0.32s ease-in-out infinite;
}

.jugador.celebrando {
  animation: celebrar 0.5s ease-in-out 3;
}

@keyframes paso {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes celebrar {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -38px; }
}

/* Estrellitas que salen al completar una actividad. */
.chispa {
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: #ffe28a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  animation: chispa 0.9s ease-out forwards;
}

@keyframes chispa {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(180deg); opacity: 0; }
}

/* Barra superior de la escena: misión y ayuda de controles. */
.escena-hud {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}

.hud-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(8, 10, 30, 0.6);
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(3px);
}

.hud-pastilla .icono {
  width: 16px;
  height: 16px;
}

.hud-controles {
  font-weight: 500;
}

/* Ventana de diálogo del juego (actividad, panda, portal). */
.dialogo-juego {
  width: min(440px, calc(100% - 2rem));
  padding: 1.5rem;
  border: 0;
  border-radius: 18px;
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: var(--sombra-flotante);
}

.dialogo-juego::backdrop {
  background: rgba(8, 10, 30, 0.55);
}

.dialogo-juego h2 {
  margin-top: 0;
}

.dialogo-cabecera {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.dialogo-cabecera h2 {
  margin: 0;
}

.dialogo-cabecera img {
  width: auto;
  height: 64px;
}

/* Lista de actividades debajo de la escena (versión sin juego, accesible). */
.actividades-mundo {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.actividades-mundo a {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
}

.actividades-mundo a:hover {
  border-color: var(--color-primario);
  background: var(--color-primario-suave);
}

.actividad-titulo {
  font-weight: 700;
  color: var(--color-primario-oscuro);
}

.actividad-texto {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

.actividad-minutos {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.actividad-minutos .icono {
  width: 14px;
  height: 14px;
}

.completar-mundo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-borde);
}

/* Teléfono: tablero vertical (ruta en zigzag hacia abajo) y escena más baja. */
@media (max-width: 720px) {
  .panda-guia {
    width: 90px;
  }

  .personaje-escenario {
    width: 128px;
    height: 128px;
  }

  .personaje-imagen {
    height: 112px;
  }

  .galaxia {
    padding: 1rem 0.75rem;
  }

  .tablero {
    aspect-ratio: 3 / 5;
  }

  .tablero-ruta-ancha {
    display: none;
  }

  .tablero-ruta-angosta {
    display: block;
  }

  .posicion-1 { --x: 28%; --y: 9%; }
  .posicion-2 { --x: 72%; --y: 19%; }
  .posicion-3 { --x: 28%; --y: 29%; }
  .posicion-4 { --x: 72%; --y: 39%; }
  .posicion-5 { --x: 28%; --y: 49%; }
  .posicion-6 { --x: 72%; --y: 59%; }
  .posicion-7 { --x: 28%; --y: 69%; }
  .posicion-8 { --x: 72%; --y: 79%; }
  .posicion-9 { --x: 28%; --y: 88%; }

  .planeta-esfera { width: 52px; height: 52px; }
  .tipo-4, .tipo-9 { width: 58px; height: 58px; }
  .planeta-disponible .planeta-boton::before { width: 52px; height: 52px; margin-left: -26px; }
  .planeta-candado { top: calc(0.25rem + 15px); }

  .viajero {
    height: 72px;
    /* En el teléfono el personaje va al lado del planeta, para no tapar al de arriba. */
    transform: translate(-130%, -70%);
  }

  .escena-juego {
    height: 340px;
  }

  .hud-controles {
    display: none;                     /* en el teléfono se juega tocando */
  }

  .objeto-panda img { height: 86px; }
  .estacion-cristal { width: 40px; height: 40px; border-radius: 10px; }
  .estacion-cristal .icono { width: 20px; height: 20px; }
  .estacion-base { width: 46px; }
  .portal-anillo { width: 50px; height: 80px; }
  .jugador img { height: 128px; }
  .escena-astro { width: 64px; height: 64px; }
}

/* --- 26. Menos movimiento --------------------------------------------------- */

/* Si la persona activó "reducir movimiento" en su dispositivo, se quitan las animaciones. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}