/* casa-bambini — ambiente preparado: materiales naturales, orden, calma.
   Dos mundos: el Taller de Paolo (arena cálida, sol ocre, verde hoja, Fraunces suave)
   y el Estudio de Nicole (papel frío, tinta índigo, retícula de cuaderno, Space Grotesk). */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cuerpo: "Atkinson Hyperlegible", system-ui, sans-serif;
}

/* Tokens por mundo */
body[data-kid="paolo"] {
  --papel: #F6EDDD;
  --papel-hondo: #EFE2CB;
  --tinta: #3B3128;
  --tinta-suave: #79695A;
  --acento: #C98A2B;
  --acento-2: #5F7E4E;
  --display: "Fraunces", serif;
  --radio: 18px;
  --trama: none;
}
body[data-kid="nicole"] {
  --papel: #F2F3F0;
  --papel-hondo: #E8EAE5;
  --tinta: #22262A;
  --tinta-suave: #5F666D;
  --acento: #2C4C9C;
  --acento-2: #3F6B4F;
  --display: "Space Grotesk", sans-serif;
  --radio: 6px;
  --trama: linear-gradient(var(--papel-hondo) 1px, transparent 1px),
           linear-gradient(90deg, var(--papel-hondo) 1px, transparent 1px);
}

body {
  font-family: var(--cuerpo);
  background: var(--papel, #F4F0E8);
  color: var(--tinta, #33302B);
  min-height: 100dvh;
}
body[data-kid="nicole"] .sala {
  background-image: var(--trama);
  background-size: 28px 28px;
}

.oculto { display: none !important; }

/* ---------- Portada ---------- */
.picker {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3rem; padding: 2rem;
  background: #F1EBDF;
}
.picker-pregunta {
  font-family: "Fraunces", serif;
  font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #3B3128; letter-spacing: 0.01em;
}
.picker-puertas {
  display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center;
}
.puerta {
  width: min(340px, 80vw); padding: 3.2rem 2rem 2.6rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  border: none; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.puerta:hover, .puerta:focus-visible { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.puerta:focus-visible { outline: 3px solid #3B3128; outline-offset: 4px; }
.puerta-paolo {
  background: #F6EDDD; border-radius: 22px; border-top: 6px solid #C98A2B;
}
.puerta-nicole {
  background: #F2F3F0; border-radius: 8px; border-top: 6px solid #2C4C9C;
  background-image: linear-gradient(#E8EAE5 1px, transparent 1px);
  background-size: 100% 26px;
}
.puerta-eyebrow {
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: #79695A;
}
.puerta-nicole .puerta-eyebrow { font-family: "Space Grotesk", sans-serif; color: #5F666D; }
.puerta-nombre {
  font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1.05; color: #3B3128;
}
.puerta-paolo .puerta-nombre { font-family: "Fraunces", serif; font-variation-settings: "SOFT" 100; font-weight: 600; }
.puerta-nicole .puerta-nombre { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #22262A; }
.puerta-invito { font-size: 0.95rem; color: #79695A; font-style: italic; }
.puerta-nicole .puerta-invito { color: #5F666D; font-style: normal; }

/* ---------- Reto de entrada ---------- */
.reto {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.reto-caja {
  width: min(560px, 94vw); background: #fff; border-radius: var(--radio, 16px);
  border-top: 6px solid var(--acento, #C98A2B); padding: 2.2rem 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10); text-align: center;
}
.reto-eyebrow {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave, #79695A);
}
.reto-pregunta {
  font-family: var(--display, "Fraunces", serif); font-weight: 600;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem); line-height: 1.35; margin: 0.9rem 0 1.5rem;
}
body[data-kid="paolo"] .reto-pregunta { font-variation-settings: "SOFT" 100; }
.reto-opciones { display: flex; flex-direction: column; gap: 0.8rem; }
.reto-opcion {
  font-family: var(--cuerpo); font-size: 1.1rem; font-weight: 700; color: var(--tinta, #3B3128);
  background: var(--papel, #F6EDDD); border: 2px solid var(--papel-hondo, #EFE2CB);
  border-radius: var(--radio, 14px); padding: 1rem 1.2rem; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.reto-opcion:hover, .reto-opcion:focus-visible { transform: translateY(-2px); border-color: var(--acento); }
.reto-opcion.mal { border-color: #B4552D; opacity: 0.55; cursor: default; transform: none; }
.reto-opcion.bien { border-color: var(--acento-2); background: #fff; }
.reto-aviso { min-height: 1.4em; margin-top: 1rem; color: var(--tinta-suave, #79695A); font-style: italic; }

/* ---------- Foto de la guía (Wikimedia Commons, pie en su voz) ---------- */
.foto-guia {
  max-width: min(76%, 440px);
  margin: 0.5rem 0;
  background: #fff;
  border-radius: var(--radio, 16px);
  padding: 0.55rem 0.55rem 0.35rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.foto-guia img {
  width: 100%; display: block;
  border-radius: calc(var(--radio, 16px) - 6px);
}
.foto-guia figcaption {
  font-size: 0.85rem; font-style: italic;
  color: var(--tinta-suave, #79695A);
  padding: 0.45rem 0.3rem 0.15rem;
}

/* ---------- La puerta de palabras (alfabeto móvil con fichas) ---------- */
.reto-caja.amplia { width: min(760px, 96vw); }
.palabra-barra { display: flex; gap: 0.7rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 1.3rem; }
.btn-escuchar {
  font-family: var(--cuerpo); font-size: 1.05rem; font-weight: 700; color: #fff;
  background: var(--acento, #C98A2B); border: none; border-radius: var(--radio, 14px);
  padding: 0.75rem 1.3rem; cursor: pointer; transition: transform 0.15s ease;
}
.btn-escuchar:hover { transform: translateY(-2px); }
.btn-escuchar.lento { background: var(--papel-hondo, #EFE2CB); color: var(--tinta, #3B3128); }
.ver-palabra {
  background: none; border: none; cursor: pointer; font-family: var(--cuerpo);
  font-size: 0.9rem; font-style: italic; color: var(--tinta-suave, #79695A); text-decoration: underline;
}
.palabra-revelada {
  font-family: "Edu SA Beginner", cursive; font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1.2; color: var(--acento, #C98A2B);
  margin-bottom: 0.9rem;
}
.encaje-palabra {
  display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  margin: 0.3rem 0 0.4rem;
}
.hueco-letra {
  width: clamp(52px, 8vw, 68px); height: clamp(66px, 10vw, 86px);
  border-radius: var(--radio, 14px);
  border: 2.5px dashed var(--acento, #C98A2B);
  background: var(--papel, #F6EDDD);
  display: flex; align-items: center; justify-content: center;
  font-family: "Edu SA Beginner", cursive; font-weight: 500;
  font-size: clamp(2.3rem, 5.5vw, 3.1rem); line-height: 1;
  color: var(--tinta, #33302B);
}
.hueco-letra.lleno {
  border-style: solid; border-color: var(--acento-2, #5F7E4E);
  background: #fff; animation: aterriza 0.25s ease;
}
@keyframes aterriza { from { transform: scale(1.3); } to { transform: scale(1); } }
.estante-fichas {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 2px solid var(--papel-hondo, #EFE2CB);
  transition: opacity 0.4s ease;
}
.estante-fichas.apagado { opacity: 0.25; pointer-events: none; }
.ficha-letra {
  width: clamp(50px, 7vw, 62px); height: clamp(62px, 9vw, 76px);
  border: none; border-radius: var(--radio, 14px);
  background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,0.14);
  font-family: "Edu SA Beginner", cursive; font-weight: 500;
  font-size: clamp(2rem, 4.8vw, 2.7rem); line-height: 1; color: #B03A2E;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform 0.15s ease, opacity 0.25s ease;
}
.ficha-letra.vocal { color: #2C4C9C; }
.ficha-letra:hover { transform: translateY(-4px); }
.ficha-letra.usada { opacity: 0.15; pointer-events: none; box-shadow: none; }
.ficha-letra.en-vuelo { opacity: 0.25; }
.ficha-letra.tiembla { animation: tiembla 0.4s ease; }
@keyframes tiembla {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px) rotate(-2deg); }
  65% { transform: translateX(7px) rotate(2deg); }
}
.ficha-flotante {
  position: fixed; z-index: 50; pointer-events: none; margin: 0;
  transform: translate(-50%, -55%) scale(1.12) rotate(-3deg);
  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
}

/* ---------- Sala de trabajo ---------- */
.sala {
  max-width: 1060px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; padding: 1.4rem 1.2rem 1.2rem;
}
.sala-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 1rem; border-bottom: 2px solid var(--papel-hondo);
}
.sala-eyebrow {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave);
}
.sala-titulo { font-family: var(--display); font-size: 1.9rem; font-weight: 600; }
body[data-kid="paolo"] .sala-titulo { font-variation-settings: "SOFT" 100; }
.sala-acciones { display: flex; align-items: center; gap: 0.8rem; }
.btn-salir {
  background: none; border: none; color: var(--tinta-suave);
  font-family: var(--cuerpo); font-size: 0.9rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0.4rem;
}
.btn-salir:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn-museo {
  background: none; border: 2px solid var(--acento); color: var(--acento);
  font-family: var(--cuerpo); font-weight: 700; font-size: 0.95rem; cursor: pointer;
  padding: 0.5rem 1.1rem; border-radius: var(--radio);
}
.btn-museo.activo { background: var(--acento); color: #fff; }
.btn-museo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* El museo — la repisa donde cada trabajo se vuelve pieza */
.museo { flex: 1; overflow-y: auto; padding: 1.4rem 0.2rem; }
.repisa {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem; padding: 1.2rem; background: var(--papel-hondo);
  border-radius: var(--radio); border-bottom: 6px solid var(--acento);
}
.pieza {
  background: #fff; border-radius: var(--radio); padding: 0.9rem;
  min-height: 130px; display: flex; flex-direction: column; gap: 0.35rem;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08); color: inherit; text-decoration: none;
  transition: transform 0.2s ease; border: 2px solid transparent;
}
a.pieza:hover, a.pieza:focus-visible { transform: translateY(-4px); border-color: var(--acento); }
button.pieza.abrible {
  font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; opacity: 1;
}
button.pieza.abrible:hover, button.pieza.abrible:focus-visible { transform: translateY(-4px); border-color: var(--acento-2, #5F7E4E); }
.pieza-icono { font-size: 1.8rem; line-height: 1; }
.pieza-titulo { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.pieza-fecha { font-size: 0.76rem; color: var(--tinta-suave); margin-top: auto; }
.pieza-logro { opacity: 0.85; }
.pieza-vacia {
  border: 2px dashed var(--acento); background: transparent; box-shadow: none;
  align-items: center; justify-content: center; text-align: center;
  color: var(--tinta-suave); font-style: italic; font-size: 0.88rem;
}
@media (prefers-reduced-motion: reduce) { a.pieza, a.pieza:hover { transition: none; transform: none; } }

/* ---------- Mesa de operaciones (azul dash de David: #04A9F5) ---------- */
:root { --op-azul: #04A9F5; --op-azul-hondo: #0284C7; }
.btn-ops { border-color: var(--op-azul); color: var(--op-azul-hondo); }
.btn-ops.activo { background: var(--op-azul); color: #fff; }
.operaciones { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.4rem 0.2rem; }
.ops-mesa {
  width: min(920px, 96%); background: #fff; border-radius: var(--radio);
  border-top: 6px solid var(--op-azul); box-shadow: 0 10px 30px rgba(2,132,199,0.15);
  padding: 2.2rem 2.8rem 2.6rem; text-align: center;
}
.ops-banda { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 1rem; }
.ops-nivel { color: var(--op-azul-hondo); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ops-cuenta { color: var(--tinta-suave); }
.ops-operacion {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.02em;
  font-size: clamp(3.2rem, 9vw, 4.6rem); margin: 0.6rem 0 1.2rem; color: var(--tinta);
}
.ops-form { display: flex; gap: 0.7rem; justify-content: center; }
#ops-respuesta {
  width: 11rem; font-family: var(--cuerpo); font-size: 2.4rem; font-weight: 700; text-align: center;
  padding: 0.6rem 0.4rem; border: 3px solid var(--papel-hondo); border-radius: var(--radio);
  color: var(--tinta); background: var(--papel);
}
#ops-respuesta:focus { outline: none; border-color: var(--op-azul); }
#ops-respuesta.bien { border-color: #3F8F5A; background: #EFF7F1; }
#ops-respuesta.casi { border-color: #B4552D; animation: tiembla 0.3s ease; }
.ops-comprobar {
  background: var(--op-azul); color: #fff; border: none; cursor: pointer;
  font-family: var(--cuerpo); font-weight: 700; font-size: 1.3rem;
  padding: 0 2.2rem; border-radius: var(--radio);
}
.ops-comprobar:hover { background: var(--op-azul-hondo); }
.ops-comprobar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.ops-aviso { margin-top: 1rem; min-height: 1.4em; color: var(--tinta-suave); font-style: italic; }

/* Skills visuales: ecuación a la izquierda, representación a la derecha, pasos opcionales */
.ops-mesa.amplia { width: min(1020px, 98%); }
.ops-visual-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  align-items: center; margin: 0.4rem 0 1rem; text-align: center;
}
@media (max-width: 620px) { .ops-visual-wrap { grid-template-columns: 1fr; } }
.ops-ecuacion {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 5vw, 3.4rem); color: var(--tinta);
}
.ops-ecuacion pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 2rem; font-weight: 700;
  text-align: left; display: inline-block; line-height: 1.5; margin: 0;
}
.ops-ecuacion .frac { display: inline-flex; flex-direction: column; vertical-align: middle; margin: 0 0.3rem; }
.ops-ecuacion .frac span { line-height: 1.1; }
.ops-ecuacion .frac span:first-child { border-bottom: 3px solid currentColor; padding: 0 0.35rem; }
.ops-visual svg { width: 100%; max-width: 460px; height: auto; }
.ops-pasos {
  margin: 0 0 1rem; padding: 0 0 0 1.4rem; text-align: left;
  font-size: 1.1rem; line-height: 1.5; color: var(--tinta-suave);
}
.ops-pasos li { margin-bottom: 0.35rem; }
.ops-pasos li::marker { color: var(--op-azul); font-weight: 700; }
.ops-btn-paso {
  background: none; border: 2px dashed var(--op-azul); color: var(--op-azul-hondo);
  font-family: var(--cuerpo); font-weight: 700; font-size: 0.92rem; cursor: pointer;
  padding: 0.5rem 1.1rem; border-radius: 999px; margin-bottom: 1rem;
}
.ops-btn-paso:hover { background: rgba(4,169,245,0.08); }

/* Guía del pentagrama (arriba) y variantes de reactivo */
.ops-guia { display: flex; justify-content: center; margin-bottom: 0.4rem; color: var(--tinta); }
.ops-pregunta { font-size: 1.02rem; color: var(--tinta-suave); font-style: italic; }
.ops-nota .frac { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.1; }
.ops-nota .frac span:first-child { border-bottom: 2.5px solid currentColor; padding: 0 0.3rem; }
.ops-visual { color: var(--tinta); }
.ops-guia svg { width: 100%; height: auto; transform-origin: center; }
.ops-guia { zoom: 1.25; }
.ops-operacion.chiste { font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.45; font-weight: 500; }
.ops-notas { display: flex; gap: 0.55rem; flex-wrap: wrap; justify-content: center; margin-bottom: 0.4rem; }
.ops-nota {
  background: var(--papel); border: 2px solid var(--papel-hondo); color: var(--tinta);
  font-family: var(--cuerpo); font-weight: 700; font-size: 1.25rem; cursor: pointer;
  padding: 0.8rem 1.5rem; border-radius: 999px;
}
.ops-nota.trivia { border-radius: var(--radio); flex: 1 1 100%; text-align: left; padding: 0.7rem 1rem; font-size: 0.98rem; }
.ops-nota:hover { border-color: var(--op-azul); }
.ops-nota.bien { border-color: #3F8F5A; background: #EFF7F1; }
.ops-nota.casi { border-color: #B4552D; opacity: 0.6; }
.ops-nota.otro { background: var(--op-azul); border-color: var(--op-azul); color: #fff; margin-top: 0.6rem; }
.ops-explicacion {
  margin-top: 0.9rem; padding: 1rem 1.2rem; text-align: left;
  background: var(--papel); border-left: 4px solid var(--op-azul);
  border-radius: calc(var(--radio) / 2); font-size: 1.15rem; line-height: 1.5;
}
@keyframes tiembla { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { #ops-respuesta.casi { animation: none; } }

/* Skills visuales: ecuación a la izquierda, representación a la derecha, pasos opcionales */
.ops-mesa.amplia { width: min(780px, 96%); }
.ops-visual-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  align-items: center; margin: 0.4rem 0 1rem; text-align: center;
}
@media (max-width: 620px) { .ops-visual-wrap { grid-template-columns: 1fr; } }
.ops-ecuacion {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.5rem); color: var(--tinta);
}
.ops-ecuacion pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.5rem; font-weight: 700;
  text-align: left; display: inline-block; line-height: 1.5; margin: 0;
}
.ops-ecuacion .frac { display: inline-flex; flex-direction: column; vertical-align: middle; margin: 0 0.3rem; }
.ops-ecuacion .frac span { line-height: 1.1; }
.ops-ecuacion .frac span:first-child { border-bottom: 3px solid currentColor; padding: 0 0.35rem; }
.ops-visual svg { width: 100%; max-width: 340px; height: auto; }
.ops-pasos {
  margin: 0 0 1rem; padding: 0 0 0 1.4rem; text-align: left;
  font-size: 0.95rem; line-height: 1.5; color: var(--tinta-suave);
}
.ops-pasos li { margin-bottom: 0.35rem; }
.ops-pasos li::marker { color: var(--op-azul); font-weight: 700; }
.ops-btn-paso {
  background: none; border: 2px dashed var(--op-azul); color: var(--op-azul-hondo);
  font-family: var(--cuerpo); font-weight: 700; font-size: 0.92rem; cursor: pointer;
  padding: 0.5rem 1.1rem; border-radius: 999px; margin-bottom: 1rem;
}
.ops-btn-paso:hover { background: rgba(4,169,245,0.08); }



/* Tarjeta de pieza nueva en el chat */
.pieza-nueva {
  align-self: flex-start; display: flex; align-items: center; gap: 0.9rem;
  background: #fff; border: 2px solid var(--acento-2); border-radius: var(--radio);
  padding: 0.9rem 1.1rem; margin: 0.2rem 0; animation: entrar 0.45s ease both;
}
.pieza-nueva-emoji { font-size: 1.8rem; }
.pieza-nueva-texto { font-size: 0.95rem; color: var(--tinta-suave); }
.pieza-nueva-titulo { font-weight: 700; color: var(--tinta); font-size: 1.05rem; }
.btn-abrir-pieza {
  background: var(--acento-2); color: #fff; border: none; cursor: pointer;
  font-family: var(--cuerpo); font-weight: 700; font-size: 0.95rem;
  padding: 0.65rem 1.2rem; border-radius: calc(var(--radio) / 1.5); white-space: nowrap;
}

.mensajes {
  flex: 1; overflow-y: auto; padding: 1.4rem 0.2rem;
  width: 100%; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.msg { max-width: 85%; padding: 0.85rem 1.1rem; font-size: 1.08rem; line-height: 1.5; border-radius: var(--radio); }
.msg p + p { margin-top: 0.5em; }
.msg-guia { align-self: flex-start; background: #FFFFFF; box-shadow: 0 1px 0 rgba(0,0,0,0.07); }
.msg-nino { align-self: flex-end; background: var(--papel-hondo); }
.msg-pensando { align-self: flex-start; color: var(--tinta-suave); font-style: italic; padding: 0.4rem 1.1rem; }

/* Tarjeta de invitación — la actividad fuera de la pantalla (elemento firma) */
.invitacion {
  align-self: stretch; margin: 0.4rem 0;
  background: #FFFFFF; border: 2px solid var(--acento);
  border-radius: var(--radio); padding: 1.3rem 1.4rem;
  animation: entrar 0.45s ease both;
}
.invitacion-eyebrow {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento);
  display: block; margin-bottom: 0.3rem;
}
.invitacion-titulo { font-family: var(--display); font-size: 1.45rem; font-weight: 600; margin-bottom: 0.7rem; }
body[data-kid="paolo"] .invitacion-titulo { font-variation-settings: "SOFT" 100; }
.invitacion-sub { font-weight: 700; font-size: 0.92rem; color: var(--tinta-suave); margin-bottom: 0.3rem; }
.invitacion ul { list-style: none; margin-bottom: 0.8rem; }
.invitacion li { padding-left: 1.2rem; position: relative; line-height: 1.6; }
.invitacion li::before { content: "•"; position: absolute; left: 0.2rem; color: var(--acento-2); }
.invitacion-reto { font-size: 1.05rem; line-height: 1.5; padding: 0.7rem 0.9rem; background: var(--papel); border-radius: calc(var(--radio) / 2); margin-bottom: 1rem; }
.invitacion-botones { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.btn-hecho {
  background: var(--acento-2); color: #fff; border: none; cursor: pointer;
  font-family: var(--cuerpo); font-weight: 700; font-size: 1rem;
  padding: 0.75rem 1.3rem; border-radius: calc(var(--radio) / 1.5);
}
.btn-otra {
  background: none; border: 2px solid var(--papel-hondo); color: var(--tinta-suave); cursor: pointer;
  font-family: var(--cuerpo); font-size: 1rem; padding: 0.75rem 1.3rem; border-radius: calc(var(--radio) / 1.5);
}
.btn-hecho:hover, .btn-otra:hover { filter: brightness(1.06); }
.btn-hecho:focus-visible, .btn-otra:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .invitacion { animation: none; }
  .puerta, .puerta:hover { transition: none; transform: none; }
}

/* Atajos de charla */
.chips { display: flex; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0 0.2rem; width: 100%; max-width: 760px; margin: 0 auto; }
.chip {
  background: #fff; border: 2px solid var(--papel-hondo); color: var(--tinta);
  font-family: var(--cuerpo); font-weight: 700; font-size: 0.92rem; cursor: pointer;
  padding: 0.55rem 1rem; border-radius: 999px; transition: border-color 0.15s ease, transform 0.15s ease;
}
.chip:hover, .chip:focus-visible { border-color: var(--acento); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .chip, .chip:hover { transition: none; transform: none; } }

/* Modos de la mesa de operaciones */
.ops-modos { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.1rem; }
.ops-modo {
  background: var(--papel); border: 2px solid var(--papel-hondo); color: var(--tinta);
  font-family: var(--cuerpo); font-weight: 700; font-size: 0.88rem; cursor: pointer;
  padding: 0.45rem 0.9rem; border-radius: 999px;
}
.ops-modo:hover { border-color: var(--op-azul); }
.ops-modo.activo { background: var(--op-azul); border-color: var(--op-azul); color: #fff; }

.form-chat {
  display: flex; gap: 0.7rem; padding-top: 1rem;
  width: 100%; max-width: 760px; margin: 0 auto;
  border-top: 2px solid var(--papel-hondo);
}
#input-chat {
  flex: 1; font-family: var(--cuerpo); font-size: 1.1rem;
  padding: 0.9rem 1.1rem; border: 2px solid var(--papel-hondo);
  border-radius: var(--radio); background: #FFFFFF; color: var(--tinta);
}
#input-chat:focus { outline: none; border-color: var(--acento); }
.btn-enviar {
  background: var(--acento); color: #fff; border: none; cursor: pointer;
  font-family: var(--cuerpo); font-weight: 700; font-size: 1.05rem;
  padding: 0 1.6rem; border-radius: var(--radio);
}
.btn-enviar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

@media (max-width: 560px) {
  .picker-puertas { gap: 1.2rem; }
  .msg { max-width: 92%; }
}

/* Sonido en Notas + estante de materiales */
.guia-nota { cursor: pointer; }
.guia-nota:hover text { fill: var(--op-azul); }
.ops-escuchar {
  display: block; margin: 0.2rem auto 0; background: none; border: none;
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.ops-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.ops-material { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--tinta); }
.estante-titulo { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin: 0 0 0.6rem; }
.estante-titulo + .repisa { margin-bottom: 1.6rem; }
.pieza-material { cursor: pointer; border: 2px solid var(--papel-hondo); font-family: var(--cuerpo); font-size: 1rem; }
.pieza-material:hover, .pieza-material:focus-visible { border-color: var(--acento); transform: translateY(-4px); }
.repisa-materiales { border-bottom-color: var(--acento-2); }