/* ============================================================
   EL CUADERNO  --  estilo
   ============================================================
   La idea: una MESA oscura con cuadernos de colores encima.
   Cada seccion es un cuaderno con su color, y lo que se escribe
   va en hojas de papel claras. Asi los dibujos y las fotos de
   los ninos resaltan, que es lo que importa, y el resto se
   queda quieto alrededor.

   Todo lo que se toca mide al menos 48 px: esto lo usan dedos
   de 8 anos, a veces con las manos manchadas de harina.
   ============================================================ */

:root {
  --mesa:        #1b2233;
  --mesa-2:      #242e45;
  --mesa-3:      #313c57;
  --papel:       #fbfaf6;
  --papel-2:     #f1eee4;
  --linea:       #e2ddcf;
  --tinta:       #1f2430;
  --tinta-suave: #5d6477;
  --claro:       #e8ecf6;
  --claro-suave: #9aa5bf;

  /* Los colores de las secciones son los mismos siete de La Banda */
  --recetas: #f4791f;
  --notas:   #ffc857;
  --pintar:  #e63946;
  --puzles:  #52b788;
  --musica:  #4c6ef5;
  --voz:     #9d4edd;
  --copia:   #22b8cf;

  --radio: 16px;
  --sombra: 0 2px 0 rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.22);
  --letra: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round",
           "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--mesa);
  /* Una trama muy suave de cuadricula, como una alfombrilla de corte */
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--claro);
  font-family: var(--letra);
  font-size: 18px;
  line-height: 1.4;
  overscroll-behavior: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ── La barra de arriba ─────────────────────────────────────── */
#barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: rgba(27,34,51,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: 64px;
}
#titulo {
  flex: 1; margin: 0;
  font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#guardado { font-size: 14px; color: var(--claro-suave); white-space: nowrap; }

.redondo {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 50%; border: 0;
  background: var(--mesa-3); color: var(--claro);
  font-size: 28px; line-height: 1;
  display: grid; place-items: center;
}
.redondo:active { transform: scale(.94); }
.avatar { font-size: 26px; border: 3px solid var(--color-perfil, #fff); }

main#vista {
  padding: 16px 14px calc(96px + env(safe-area-inset-bottom));
  max-width: 980px; margin: 0 auto;
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px;
  border: 0; border-radius: 14px;
  background: var(--mesa-3); color: var(--claro);
  font-weight: 700; font-size: 18px;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:focus-visible, .redondo:focus-visible, .portada:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px;
}
.btn.principal { background: var(--acento, #4c6ef5); color: #fff; }
.btn.peligro   { background: #b3262f; color: #fff; }
.btn.claro     { background: var(--papel-2); color: var(--tinta); }
.btn.ancho     { width: 100%; }
.btn.chico     { min-height: 44px; padding: 0 14px; font-size: 16px; }
.btn[disabled] { opacity: .45; }

.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila.fin { justify-content: flex-end; }
.hueco { flex: 1; }

/* ── Inicio: los cuadernos ──────────────────────────────────── */
.saludo { margin: 6px 4px 18px; font-size: 26px; font-weight: 800; }
.saludo small { display: block; font-size: 16px; font-weight: 600; color: var(--claro-suave); }

.portadas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.portada {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0; border-radius: 8px 18px 18px 8px;
  padding: 16px 16px 16px 30px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 0 16px, rgba(255,255,255,.12) 16px 18px, transparent 18px),
    var(--c);
  color: #1b1b1b;
  text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sombra);
  transition: transform .12s ease;
}
/* La goma elastica del cuaderno */
.portada::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 22px; width: 7px;
  background: rgba(0,0,0,.2); border-radius: 2px;
}
.portada:active { transform: rotate(-1.5deg) scale(.97); }
.portada .emoji { font-size: 54px; line-height: 1; }
.portada .nombre { font-size: 22px; font-weight: 800; line-height: 1.1; }
.portada .cuenta { font-size: 14px; font-weight: 700; opacity: .7; }

.enlace-copia {
  display: block; margin: 28px auto 0; background: none; border: 0;
  color: var(--claro-suave); font-size: 16px; text-decoration: underline;
  min-height: 48px;
}

/* ── Perfiles ──────────────────────────────────────────────── */
.perfiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.perfil {
  border: 0; border-radius: var(--radio); padding: 20px 10px;
  background: var(--mesa-2); color: var(--claro);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--sombra);
}
.perfil .cara {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; font-size: 52px;
  background: var(--c); border: 4px solid rgba(255,255,255,.85);
}
.perfil .nombre { font-size: 20px; font-weight: 800; }
.perfil.nuevo .cara { background: var(--mesa-3); border-style: dashed; font-size: 40px; }

/* ── Hojas de papel ────────────────────────────────────────── */
.hoja {
  background: var(--papel); color: var(--tinta);
  border-radius: var(--radio); padding: 18px;
  box-shadow: var(--sombra);
}
.hoja + .hoja { margin-top: 16px; }
.hoja h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
.hoja .ayuda { color: var(--tinta-suave); font-size: 15px; margin: 4px 0 10px; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 15px; font-weight: 700; color: var(--tinta-suave); margin-bottom: 6px; }
.entrada, textarea.entrada {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--linea); border-radius: 12px;
  background: #fff; color: var(--tinta); font-size: 18px;
}
textarea.entrada { resize: vertical; min-height: 110px; line-height: 1.5; }
.entrada:focus { outline: none; border-color: var(--acento, #4c6ef5); }
.entrada.titular { font-size: 26px; font-weight: 800; border-color: transparent; background: transparent; padding-left: 4px; }
.entrada.titular:focus { border-color: var(--linea); background: #fff; }

/* Selector de emoji o color, en fila */
.elegir { display: flex; gap: 8px; flex-wrap: wrap; }
.elegir button {
  width: 52px; height: 52px; border-radius: 14px;
  border: 3px solid transparent; background: var(--papel-2);
  font-size: 28px; display: grid; place-items: center;
}
.elegir button[aria-pressed="true"] { border-color: var(--tinta); background: #fff; }
.elegir.colores button { background: var(--c); }
.oscuro .elegir button { background: var(--mesa-3); }
.oscuro .elegir button[aria-pressed="true"] { border-color: #fff; background: var(--mesa-2); }
/* Los botones de color van despues y con mas peso: las dos reglas
   de arriba les ponian el fondo gris de la mesa y todos los
   colores salian iguales. */
.elegir.colores button,
.oscuro .elegir.colores button,
.oscuro .elegir.colores button[aria-pressed="true"] { background: var(--c); }

/* Contador + / - */
.contador { display: inline-flex; align-items: center; gap: 6px; }
.contador button { width: 48px; height: 48px; border-radius: 12px; border: 0; background: var(--papel-2); font-size: 24px; font-weight: 800; }
.contador output { min-width: 56px; text-align: center; font-size: 22px; font-weight: 800; }

/* ── Listas de cosas guardadas ─────────────────────────────── */
.vacio {
  text-align: center; color: var(--claro-suave);
  padding: 40px 16px; font-size: 18px;
}
.vacio .grande { font-size: 64px; display: block; margin-bottom: 10px; }

.tarjetas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tarjeta {
  border: 0; padding: 0; overflow: hidden; text-align: left;
  border-radius: var(--radio); background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.tarjeta .foto {
  aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block;
  background: var(--papel-2);
}
.tarjeta .foto.emoji { display: grid; place-items: center; font-size: 64px; }
.tarjeta .texto { padding: 10px 12px 14px; }
.tarjeta .t { font-weight: 800; font-size: 18px; line-height: 1.2; }
.tarjeta .s { font-size: 14px; color: var(--tinta-suave); margin-top: 4px; }

.boton-flotante {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 15;
  min-height: 64px; padding: 0 24px; border-radius: 32px; border: 0;
  background: var(--acento, #4c6ef5); color: #fff;
  font-size: 20px; font-weight: 800;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.boton-flotante:active { transform: scale(.96); }

/* ── Recetas ───────────────────────────────────────────────── */
.foto-receta {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover;
  background: var(--papel-2); display: grid; place-items: center; font-size: 80px;
  border: 0; overflow: hidden;
}
.foto-receta img { width: 100%; height: 100%; object-fit: cover; display: block; }

.linea-lista { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.linea-lista .num {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--acento); color: #fff;
}
.linea-lista .entrada { min-height: 48px; }
.linea-lista textarea.entrada { min-height: 64px; }
.quitar { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-suave); font-size: 22px; }

.marca {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px;
  border: 3px solid var(--linea); background: #fff;
  display: grid; place-items: center; font-size: 24px; color: #2f9e44;
}
.marca[aria-pressed="true"] + .entrada { text-decoration: line-through; color: var(--tinta-suave); }

.estrellas button { background: none; border: 0; font-size: 36px; padding: 2px; filter: grayscale(1); opacity: .35; min-height: 48px; }
.estrellas button[aria-pressed="true"] { filter: none; opacity: 1; }

/* Modo cocinar: un paso, letra enorme */
/* La tarjeta del paso deja sitio al temporizador debajo: en la
   cocina tienen que verse los dos sin tocar la pantalla. */
.cocinar { display: flex; flex-direction: column; min-height: max(260px, calc(100dvh - 500px)); }
.cocinar .paso-num { font-size: 18px; font-weight: 800; color: var(--recetas); }
.cocinar .paso-texto { font-size: clamp(30px, 8vw, 48px); font-weight: 700; line-height: 1.35; margin: 12px 0 24px; flex: 1; }
.temporizador {
  font-size: 48px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
  padding: 4px; border-radius: 16px; background: var(--papel-2);
}
.temporizador.suena { background: #ffe066; animation: latido .6s infinite; }
@keyframes latido { 50% { transform: scale(1.04); } }

/* ── Notas: el muro de posits ──────────────────────────────── */
.muro { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.posit {
  border: 0; text-align: left; color: #2b2b2b;
  min-height: 150px; padding: 14px 14px 18px;
  background: var(--c);
  border-radius: 3px 3px 22px 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
  transform: rotate(var(--giro, 0deg));
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.posit .pegatina { font-size: 30px; line-height: 1; }
.posit .t { font-weight: 800; font-size: 18px; }
.posit .c { font-size: 15px; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

.hoja-posit { background: var(--c); }
.hoja-posit .entrada { background: rgba(255,255,255,.6); border-color: transparent; }

/* ── Pintar ────────────────────────────────────────────────── */
.pintar { display: flex; flex-direction: column; height: calc(100dvh - 64px - env(safe-area-inset-top)); margin: -16px -14px 0; }
.lienzo-caja { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; padding: 8px; touch-action: none; }
.lienzo-caja canvas {
  position: absolute; border-radius: 6px; touch-action: none;
}
.lienzo-caja canvas.fondo { background: #fff; box-shadow: var(--sombra); }
.herramientas {
  background: var(--mesa-2); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.herramientas .fila { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.herramientas .fila::-webkit-scrollbar { display: none; }
.herr {
  flex: 0 0 auto; min-width: 52px; height: 52px; padding: 0 10px; border-radius: 14px;
  border: 3px solid transparent; background: var(--mesa-3); font-size: 26px;
}
.herr[aria-pressed="true"] { border-color: #fff; background: var(--mesa); }
.color {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); background: var(--c);
}
.color[aria-pressed="true"] { border-color: #fff; transform: scale(1.12); }
.tam { display: grid; place-items: center; }
.tam i { display: block; border-radius: 50%; background: var(--claro); }

.plantillas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.plantilla {
  border: 3px solid transparent; border-radius: var(--radio); padding: 10px;
  background: var(--mesa-2); color: var(--claro); display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.plantilla canvas { width: 100%; aspect-ratio: 3 / 4; background: #fff; border-radius: 6px; }
.plantilla span { font-weight: 800; }

/* ── Puzles ────────────────────────────────────────────────── */
.puzle { position: relative; height: calc(100dvh - 64px - env(safe-area-inset-top)); margin: -16px -14px 0; overflow: hidden; touch-action: none; }
.puzle .tablero { position: absolute; border-radius: 4px; background: rgba(255,255,255,.06); outline: 2px dashed rgba(255,255,255,.25); }
.puzle .tablero img { width: 100%; height: 100%; opacity: 0; transition: opacity .3s; border-radius: 4px; }
.puzle .tablero.pista img { opacity: .22; }
.puzle canvas.pieza { position: absolute; touch-action: none; cursor: grab; }
.puzle canvas.pieza.moviendo { filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)); cursor: grabbing; }
.puzle canvas.pieza.puesta { pointer-events: none; }
.puzle .marcador {
  position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.puzle .marcador > * { pointer-events: auto; }
.puzle .marcador .dato { background: rgba(0,0,0,.4); padding: 8px 14px; border-radius: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.elige-img { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.elige-img button { border: 4px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; aspect-ratio: 1; background: var(--mesa-2); }
.elige-img button[aria-pressed="true"] { border-color: #fff; }
.elige-img img, .elige-img canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

.fiesta {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 30;
  background: rgba(27,34,51,.55); text-align: center;
}
.fiesta .caja { background: var(--papel); color: var(--tinta); padding: 26px; border-radius: 22px; box-shadow: var(--sombra); max-width: 320px; }
.fiesta .caja .gordo { font-size: 64px; }
.fiesta .caja h2 { margin: 6px 0; font-size: 28px; }

/* ── Pentagrama ────────────────────────────────────────────── */
.partitura { background: var(--papel); border-radius: var(--radio); padding: 10px 6px; box-shadow: var(--sombra); overflow-x: auto; }
.partitura svg { display: block; width: 100%; height: auto; }
.partitura .nota { cursor: pointer; }
.partitura .nota.elegida .cabeza { stroke: #111; stroke-width: 3; }
.partitura .nota.sonando .cabeza { filter: drop-shadow(0 0 6px rgba(0,0,0,.5)); }

.teclado { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.tecla {
  min-height: 64px; border: 0; border-radius: 12px; color: #fff;
  background: var(--c); font-weight: 800; font-size: 17px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.tecla small { font-size: 12px; opacity: .9; }
.tecla:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.tecla.silencio { background: var(--mesa-3); color: var(--claro); }
.duraciones .herr { font-size: 16px; font-weight: 800; padding: 0 12px; }
.duraciones .herr svg { width: 22px; height: 30px; vertical-align: middle; }

/* ── Grabadora ─────────────────────────────────────────────── */
.grabar-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 8px; }
.boton-grabar {
  width: 140px; height: 140px; border-radius: 50%; border: 8px solid rgba(255,255,255,.15);
  background: #e03131; color: #fff; font-size: 52px;
  box-shadow: 0 8px 26px rgba(224,49,49,.45);
}
.boton-grabar.grabando { animation: latido 1s infinite; background: #c92a2a; }
.boton-grabar .cuadrado { display: inline-block; width: 44px; height: 44px; background: #fff; border-radius: 8px; }
.nivel { width: 220px; height: 12px; border-radius: 6px; background: var(--mesa-3); overflow: hidden; }
.nivel i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #52b788, #ffc857, #e63946); transition: width .08s linear; }
.reloj { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }

.grabacion { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--papel); color: var(--tinta); border-radius: 14px; box-shadow: var(--sombra); }
.grabacion + .grabacion { margin-top: 12px; }
.grabacion .reproducir { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; border: 0; background: var(--voz); color: #fff; font-size: 24px; }
.grabacion .info { flex: 1; min-width: 0; }
.grabacion .info .entrada { min-height: 44px; padding: 8px 10px; font-weight: 700; }
.grabacion .s { font-size: 14px; color: var(--tinta-suave); margin-top: 4px; }

/* ── Avisos y ventanas ─────────────────────────────────────── */
#aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 50;
  background: #111827; color: #fff; padding: 12px 20px; border-radius: 24px;
  font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.4); max-width: 90vw; text-align: center;
}
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(10,14,24,.6); display: grid; place-items: center; padding: 16px; }
.ventana { background: var(--papel); color: var(--tinta); border-radius: 20px; padding: 22px; max-width: 420px; width: 100%; box-shadow: var(--sombra); max-height: 88vh; overflow: auto; }
.ventana h2 { margin: 0 0 8px; font-size: 22px; }
.ventana p { margin: 0 0 16px; color: var(--tinta-suave); }

#btn-instalar {
  position: fixed; left: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 14;
  min-height: 48px; padding: 0 16px; border-radius: 24px; border: 0;
  background: var(--mesa-3); color: var(--claro); font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
body.sin-instalar #btn-instalar { display: none; }

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