/* Deberes — sistema visual "Cuaderno de clase".
   Capas: 1 tokens · 2 base · 3 layout · 4 componentes · 5 utilidades ·
   6 temas de página. Sin framework, sin build. Ver
   docs/superpowers/specs/2026-08-13-rediseno-interfaz-design.md */

/* ============ 1. TOKENS ============ */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --papel: #FDF8EF;
  --tarjeta: #FFFFFF;
  --linea: #E7DCC9;
  --linea-suave: #F3EDE2;
  --tinta: #2E2A27;
  --tinta-suave: #7A7068;

  --boli: #2F6FB2;
  --boli-fondo: #EDF3FA;
  --lapiz: #E8703A;
  --lapiz-fondo: #FBE9E0;
  /* Hermano oscurecido de --lapiz para texto y para fondos con texto blanco:
     5.09:1 sobre --tarjeta, 4.81:1 sobre --papel, 4.75:1 sobre el papel del
     niño. El --lapiz puro se queda en 3.08:1 y no llega al AA que pide el
     plan. Mismo patrón que --ambar-texto. */
  --lapiz-texto: #BC4A15;
  --verde: #3F9D6B;
  --verde-fondo: #E3F3EA;
  --verde-sombra: #2F7B53;
  /* Hermano oscurecido de --verde para texto: 5.20:1 sobre --tarjeta,
     4.91:1 sobre --papel, 4.85:1 sobre el papel del niño. */
  --verde-texto: #317A53;
  --ambar: #E8A33D;
  --ambar-fondo: #FFF2D6;
  --ambar-texto: #8A6100;

  --radio: 14px;
  --radio-g: 18px;
  --radio-xg: 26px;
  --espacio: 1rem;
  --toque: 44px;
  --icono-g: 44px;
  --barra-alto: 14px;
  --texto-base: 16px;
  --sombra-tarjeta: 0 1px 2px rgba(46, 42, 39, .06);

  --fuente: "Nunito", ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ============ 2. BASE ============ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: 1.5;
  background: var(--papel);
  color: var(--tinta);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }

a { color: var(--boli); }

:focus-visible {
  outline: 3px solid var(--boli);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ 3. LAYOUT ============ */

.cascara {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cabecera-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem var(--espacio);
  background: var(--tarjeta);
  border-bottom: 1px solid var(--linea);
}

.logo {
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--tinta);
}

.contenido {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--espacio);
  padding-bottom: calc(var(--toque) + 3.5rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--tarjeta);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}

.nav-inferior-enlace {
  flex: 1;
  min-height: var(--toque);
  padding: .4rem 0 .5rem;
  text-align: center;
  text-decoration: none;
  font-size: .7rem;
  color: var(--tinta-suave);
}

.nav-inferior-enlace span {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3;
}

.nav-inferior-enlace.activo {
  color: var(--boli);
  font-weight: 800;
}

.pagina-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--espacio);
}

.tarjeta-auth {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xg);
  padding: 1.8rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--sombra-tarjeta);
}

/* Tablet y escritorio: la misma barra pasa a lateral. */
@media (min-width: 900px) {
  .cascara { flex-direction: row; }

  .nav-inferior {
    position: sticky;
    top: 0;
    bottom: auto;
    flex-direction: column;
    width: 220px;
    height: 100vh;
    border-top: 0;
    border-right: 1px solid var(--linea);
    padding-top: 1rem;
  }

  .nav-inferior-enlace {
    flex: none;
    display: flex;
    align-items: center;
    gap: .7rem;
    text-align: left;
    padding: .8rem 1.2rem;
    font-size: .95rem;
  }

  .nav-inferior-enlace span { font-size: 1.3rem; }

  .contenido {
    padding-bottom: var(--espacio);
    padding-top: 1.2rem;
  }

  /* A partir de 900px el logotipo vive en la barra lateral, así que aquí
     sobra; la cabecera se queda porque es donde está "Salir". */
  .cabecera-app { justify-content: flex-end; }
  .cabecera-app .logo { display: none; }
}

.cascara-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============ 4. COMPONENTES ============ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--toque);
  padding: .65rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.boton-primario {
  background: var(--boli);
  border-color: var(--boli);
  color: #fff;
}

.boton-secundario {
  background: var(--tarjeta);
  border-color: var(--linea);
  color: var(--tinta);
}

.boton-secundario:hover {
  background: var(--papel);
  border-color: var(--tinta-suave);
}

.boton-enlace {
  background: none;
  border: 0;
  padding: .4rem;
  min-height: var(--toque);
  color: var(--boli);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}

.flash {
  padding: .7rem 1rem;
  border-radius: var(--radio);
  font-size: .95rem;
  margin: 0;
}

.flash-ok { background: var(--verde-fondo); color: #256D48; }
.flash-error { background: var(--lapiz-fondo); color: #B4471F; }

.formulario { display: flex; flex-direction: column; gap: .9rem; }

.campo { display: flex; flex-direction: column; gap: .35rem; }

.campo-etiqueta {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="date"],
.formulario input[type="number"],
.formulario input[type="password"],
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: var(--toque);
  font-family: inherit;
  font-size: 1rem;
  padding: .6rem .75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--tinta);
}

.formulario input[type="color"] {
  width: 64px;
  min-height: var(--toque);
  padding: .2rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
}

.formulario fieldset.campo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.formulario legend.campo-etiqueta {
  padding: 0;
  margin-bottom: .35rem;
}

/* Casilla suelta (p. ej. "Visible para el hijo", "ver también hechas" o las
   casillas de la recurrencia): la etiqueta envuelve directamente al input.
   Se excluye `.opcion` porque en los chips el input es una capa invisible
   de width:100%/height:100% encima de la etiqueta y dimensionarla a 24px
   rompería el área pulsable del chip. */
.formulario label:not(.opcion) > input[type="checkbox"],
.filtros label:not(.opcion) > input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--boli);
}

.formulario label:not(.opcion):has(> input[type="checkbox"]),
.filtros label:not(.opcion):has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  min-height: var(--toque);
}

/* Chips seleccionables sin JavaScript: el input está oculto y la etiqueta
   se pinta según :checked. */
.opciones { display: flex; flex-wrap: wrap; gap: .45rem; }

.opcion { position: relative; }

.opcion input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.opcion span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: var(--toque);
  padding: .4rem .85rem;
  border: 1px solid var(--linea);
  border-radius: 99px;
  background: var(--tarjeta);
  color: var(--tinta-suave);
  font-size: .95rem;
}

.opcion input:checked + span {
  background: var(--boli);
  border-color: var(--boli);
  color: #fff;
  font-weight: 800;
}

.opcion input:focus-visible + span {
  outline: 3px solid var(--boli);
  outline-offset: 2px;
}

.plegable {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .7rem .8rem;
}

.plegable > summary {
  min-height: var(--toque);
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}

.plegable[open] > summary { margin-bottom: .6rem; }

.bloque-ajustes {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: 1rem 1.1rem;
  box-shadow: var(--sombra-tarjeta);
}

.bloque-ajustes h3 { margin-top: 0; }
.bloque-ajustes h4 { margin: 1rem 0 .4rem; font-size: .95rem; }

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

/* La fila sirve tanto para un enlace suelto (ajustes) como para
   `<strong>` + `.ayuda` + un formulario en línea (dispositivos,
   recurrencias). El flex con `wrap` coloca ambos casos. */
.lista-ajustes-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-height: var(--toque);
  padding: .4rem 0;
  border-top: 1px solid var(--linea-suave);
}

.lista-ajustes-fila:first-child { border-top: 0; }

.lista-ajustes-fila > a {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  min-height: var(--toque);
  text-decoration: none;
  font-weight: 600;
}

.enlace-ics { margin: .4rem 0; }

.enlace-ics input {
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  padding: .6rem .7rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta-suave);
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: .8rem .9rem;
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-atrasado { border-color: #F0C4AC; }
.tarjeta-preparar { background: #FFFBF2; border-color: #EBD9BC; }

.tarjeta-cabecera {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.contador {
  background: var(--boli);
  color: #fff;
  border-radius: 99px;
  padding: .05rem .5rem;
  font-size: .7rem;
  letter-spacing: 0;
}

/* El texto de la píldora es blanco: se oscurece el fondo en vez del texto,
   porque el color de la píldora es el que comunica el estado. Blanco sobre
   --lapiz-texto da 5.09:1; sobre --lapiz daba 3.08:1. */
.contador-atrasado { background: var(--lapiz-texto); }

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

.tarea {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 0;
  border-top: 1px solid var(--linea-suave);
}

.tarea:first-child { border-top: 0; }

.tarea-franja {
  width: 5px;
  align-self: stretch;
  border-radius: 99px;
  background: var(--tinta-suave);
  flex: none;
}

.tarea-cuerpo { flex: 1; min-width: 0; }

.tarea-cuerpo a { text-decoration: none; color: var(--tinta); font-weight: 600; }

.tarea-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--tinta-suave);
  margin-top: .1rem;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  background: var(--tinta-suave);
}

.marca {
  font-size: .7rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 99px;
  white-space: nowrap;
  background: var(--linea-suave);
  color: var(--tinta-suave);
}

.marca-tarde { background: var(--lapiz-fondo); color: #B4471F; }
.marca-ok { background: var(--verde-fondo); color: #256D48; }
.marca-reportado { background: var(--ambar-fondo); color: var(--ambar-texto); }

.captura {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--tarjeta);
  border: 2px dashed var(--linea);
  border-radius: var(--radio-g);
  padding: .7rem .8rem;
}

.captura-principal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.captura-texto,
.captura input[type="text"] {
  flex: 1 1 240px;
  min-width: 0;
  min-height: var(--toque);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinta);
  resize: vertical;
}

.captura-texto:focus,
.captura input[type="text"]:focus { outline: none; }

.captura-acciones {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-left: auto;
}

.captura-revision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .45rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--linea-suave);
}

.captura-campo {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.captura-campo-titulo {
  grid-column: span 2;
}

.captura-campo-detalle {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .captura-campo-titulo {
    grid-column: auto;
  }
}

.captura-campo label {
  font-size: .75rem;
  color: var(--tinta-suave);
  font-weight: 700;
}

.captura-campo input,
.captura-campo select {
  min-height: 36px;
  font-family: inherit;
  font-size: .85rem;
  padding: .3rem .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
}

.captura-campo input:focus,
.captura-campo select:focus {
  border-color: var(--boli);
  outline: none;
}

/* Vive dentro de `.captura`: ocupa la fila entera bajo los campos. */
.captura-previa {
  margin: 0;
  font-size: .8rem;
  color: var(--verde-texto);
  min-height: 1.2em;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.filtros label { font-size: .85rem; color: var(--tinta-suave); }

.filtros select,
.filtros input[type="search"] {
  min-height: var(--toque);
  font-family: inherit;
  font-size: .95rem;
  padding: .4rem .6rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--tinta);
}

/* Chips: los filtros de la lista (selects e input de búsqueda) con forma
   de píldora. El control sigue siendo un <select> nativo -hijo, tipo y
   asignatura son listas abiertas que no caben en una fila de chips fijos
   en móvil-, solo cambia su piel.
   Cualificamos con el tipo de elemento (select./input.) para que la
   especificidad (0,2,1) supere a `.filtros select` (0,1,1) y empate -y
   gane por orden- con `.filtros input[type="search"]` (0,2,1); si el
   selector fuera solo `.chip-filtro` (0,1,0), la regla de abajo perdería
   el border-radius, el font-size y el padding frente a esa. */
.filtros select.chip-filtro,
.filtros input.chip-filtro {
  min-height: var(--toque);
  font-family: inherit;
  font-size: .85rem;
  padding: .4rem .9rem;
  border: 1px solid var(--linea);
  border-radius: 99px;
  background: var(--tarjeta);
  color: var(--tinta);
}

/* Un chip con un valor activo se resalta para que se note de un vistazo
   qué está filtrando la lista ahora mismo. Misma cualificación que arriba
   -especificidad (0,2,1)-, necesaria para ganarle al bloque `.chip-filtro`
   de encima en background, border-color y color; al tener ambas la misma
   especificidad, gana por ir declarada después en la hoja. */
.filtros select.chip-filtro-activo,
.filtros input.chip-filtro-activo {
  background: var(--boli-fondo);
  border-color: var(--boli);
  color: var(--boli);
}

.grupo-fecha {
  margin: .6rem .2rem -.2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}


.acciones-fila {
  display: flex;
  gap: .3rem;
  align-items: center;
  flex: none;
}

.acciones-fila a { font-size: .8rem; }

.lista-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

@media (min-width: 900px) {
  .lista-tarjetas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
  }

  .grupo-fecha { grid-column: 1 / -1; }
}

.tarjeta-tarea {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .6rem .7rem;
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-tarea-hecha { opacity: .55; }

/* Detalle de una tarea (Task 7): cabecera, aviso, checklist con barra de
   progreso, adjuntos e historial. */
.cabecera-item {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: .9rem 1rem;
  box-shadow: var(--sombra-tarjeta);
}

.cabecera-item h2 { margin: .4rem 0 .3rem; }

.aviso {
  display: flex;
  gap: .5rem;
  align-items: center;
  background: var(--ambar-fondo);
  border: 1px solid #EBD9BC;
  border-radius: var(--radio);
  padding: .6rem .8rem;
  font-size: .88rem;
  color: var(--ambar-texto);
}

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

.checklist-linea {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-top: 1px solid var(--linea-suave);
  font-size: .95rem;
}

.checklist-linea:first-child { border-top: 0; }

.checklist-linea button,
.checklist-linea input[type="checkbox"] { flex: none; }

/* Tachado sigue siendo contenido: #7A6E60 da 4.97:1 sobre --tarjeta y
   4.70:1 sobre --papel; el gris anterior (#A79C8F) se quedaba en 2.69:1. */
.checklist-hecha { color: #7A6E60; text-decoration: line-through; }

.barra-progreso {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: var(--linea-suave);
  overflow: hidden;
  margin: .1rem 0 .5rem;
}

.barra-progreso-relleno {
  display: block;
  height: 100%;
  background: var(--verde);
}

.adjuntos { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.adjunto {
  width: 56px;
  height: 56px;
  border-radius: var(--radio);
  background: var(--linea-suave);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.adjunto img { width: 100%; height: 100%; object-fit: cover; }

.historial {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .82rem;
  color: var(--tinta-suave);
}

.historial li { padding: .3rem 0; border-top: 1px solid var(--linea-suave); }
.historial li:first-child { border-top: 0; }

.selector-hijos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.opcion-hijo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.1rem .6rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  text-decoration: none;
  color: var(--tinta);
  font-weight: 800;
  box-shadow: var(--sombra-tarjeta);
}

.avatar-grande {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: var(--linea-suave);
  color: #fff;
}

.campo-pin {
  width: 100%;
  min-height: 64px;
  font-size: 2rem;
  letter-spacing: .6em;
  text-align: center;
  font-family: inherit;
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  background: var(--tarjeta);
  color: var(--tinta);
}

.lista-hijos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.tarjeta-hijo {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: .8rem .9rem;
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-hijo .avatar-grande { width: 52px; height: 52px; font-size: 1.5rem; }

.tarjeta-hijo-cuerpo { flex: 1; min-width: 0; }

.tarjeta-hijo-cuerpo strong { display: block; }

/* Tarjeta de asignatura (Task 14): vive dentro de .lista-tarjetas/.tarjeta
   ya existentes, solo añade el apilado interno -cabecera con avatar y
   nombre, acciones debajo- que esa combinación no define por sí sola. */
.tarjeta-asignatura {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.tarjeta-asignatura-cabecera {
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* El pill de recuento (.contador, ya definido para las cabeceras de tarea)
   se posa al final de la fila; con align-items:center de arriba queda
   centrado verticalmente aunque el cuerpo crezca por el alias. */
.tarjeta-asignatura-cabecera .contador { flex: none; }

.tarjeta-asignatura .avatar-grande { width: 48px; height: 48px; font-size: 1.4rem; color: #fff; }

.tarjeta-asignatura-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.tarjeta-asignatura-cuerpo strong { display: block; font-size: 1.05rem; }

/* Inactiva: el icono ⏸️ y la palabra "Inactiva" en la .marca ya dicen el
   estado por sí solos; esto solo añade una atenuación visual de apoyo,
   nunca la única señal (por eso no hay ninguna variante de color aquí). */
.tarjeta-asignatura-inactiva { opacity: .7; }

.icono {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  flex: none;
}

/* ============ 5. UTILIDADES ============ */

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.en-linea { display: inline; }

.ayuda { color: var(--tinta-suave); font-size: .9rem; margin: 0; }

.estado-vacio {
  text-align: center;
  padding: 1.8rem 1rem;
  color: var(--tinta-suave);
}

/* ============ 6. TEMAS DE PÁGINA ============ */

/* El mundo del padre usa los tokens por defecto; la clase existe para poder
   afinarlo sin tocar `body` y para que el guardián de clases la reconozca. */
.pagina-padre { background: var(--papel); }

/* El mundo del niño: mismos componentes, otra escala y otra sombra. */
/* La clase va en <html>, no en <body>: todos los tamaños de los
   componentes están en `rem`, que se resuelve contra el elemento raíz. Con
   la clase en <body> el niño solo veía crecer el texto suelto del body y
   ningún componente. */
:root.pagina-nino { font-size: 18px; }

.pagina-nino {
  --papel: #FFF6E8;
  --texto-base: 18px;
  --radio: 18px;
  --radio-g: 22px;
  --toque: 56px;
  --icono-g: 52px;
  --barra-alto: 16px;
  --sombra-tarjeta: 0 3px 0 #EFE0C9;
}

.saludo-nino {
  background: linear-gradient(135deg, #FFD79A, #FFB86B);
  border-radius: var(--radio-g);
  padding: 1rem 1.1rem;
  color: #4A3A22;
}

.saludo-nino h2 { margin: 0 0 .2rem; }

.progreso { font-size: .95rem; margin: 0; }

.progreso-barra {
  display: block;
  height: var(--barra-alto);
  border-radius: 99px;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
  margin-top: .5rem;
}

.progreso-relleno {
  display: block;
  height: 100%;
  background: var(--verde);
  border-radius: 99px;
}

.tarea-nino {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--tarjeta);
  border-radius: var(--radio-g);
  padding: .9rem;
  box-shadow: var(--sombra-tarjeta);
}

.tarea-nino-cabecera { display: flex; align-items: center; gap: .6rem; }

.tarea-nino h3 { margin: 0; font-size: 1.05rem; }

.tarea-nino p { margin: .1rem 0 0; font-size: .82rem; color: #8A7F72; }

.tarea-nino-hecha { opacity: .62; }

.pegatina {
  width: var(--icono-g);
  height: var(--icono-g);
  border-radius: var(--radio);
  background: var(--linea-suave);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex: none;
}

.boton-hecho {
  width: 100%;
  min-height: var(--toque);
  border: 0;
  border-radius: var(--radio);
  background: var(--verde);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--verde-sombra);
  cursor: pointer;
}

.boton-hecho-hecho {
  background: var(--verde-fondo);
  color: #256D48;
  box-shadow: none;
}

.sellos { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }

.sello {
  width: 76px;
  padding: .6rem .3rem;
  border-radius: var(--radio);
  background: #FFE1B0;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: #6B4E1E;
}

.sello span { display: block; font-size: 1.5rem; }

.sello-bloqueado { background: var(--linea-suave); color: var(--tinta-suave); }

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

.movimientos li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem 0;
  border-top: 1px solid var(--linea-suave);
  font-size: .9rem;
}

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

.delta-positivo { color: var(--verde-texto); font-weight: 800; }
.delta-negativo { color: var(--lapiz-texto); font-weight: 800; }

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