/* ==========================================================================
   OpoPlanning · hoja de estilos
   1. Tokens          5. Koda
   2. Base            6. Vistas
   3. Layout          7. Calendario
   4. Componentes     8. Temporizador / Onboarding / Landing
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root {
  --lav-50:#FAF6FF;  --lav-100:#F1E9FE; --lav-200:#E4D6FC; --lav-300:#D1BBF8;
  --lav-400:#B596F0; --lav-500:#9B78E6; --lav-700:#6B4FB0;

  --mint-50:#F1FBF6; --mint-100:#DFF5EA; --mint-200:#C3EBD8; --mint-300:#A1E0C4;
  --mint-400:#6FCFA6; --mint-600:#3FA37A;

  --pink-50:#FFF5F8;  --pink-100:#FFE7EE; --pink-200:#FFD3E0; --pink-300:#FFB3C8;
  --pink-400:#FF8FAE; --pink-600:#E05F85;

  --peach-100:#FFEADF; --peach-200:#FFDCC9; --peach-300:#FFC5A8; --peach-400:#FFA47C;
  --sky-100:#E6F2FD;  --sky-200:#CDE6FB; --sky-300:#A9D6F7; --sky-400:#6BB8ED;
  --butter-100:#FFF6DF; --butter-200:#FFEBBB; --butter-300:#FFDC93;

  --ink:#4B4259; --ink-2:#766D8C; --ink-3:#A9A2BC; --ink-4:#CFC9DC;
  --bg:#FFF9FC; --surface:#FFFFFF; --line:#EFE9F8;

  --ok:var(--mint-400); --warn:var(--butter-300); --bad:var(--pink-400);

  --r-xs:12px; --r-sm:16px; --r-md:22px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  --sh-sm:0 2px 8px rgba(120,95,175,.07);
  --sh-md:0 6px 20px rgba(120,95,175,.10);
  --sh-lg:0 14px 40px rgba(120,95,175,.16);
  --sh-pop:0 18px 50px rgba(107,79,176,.22);

  --font: "Quicksand", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Baloo 2", var(--font);

  --nav-h: calc(66px + env(safe-area-inset-bottom));
  --page-max: 540px;
  --ease: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,.9,.3,1);
}

/* --------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; line-height: 1.5; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--lav-500); text-decoration: none; }
svg { display: block; }

::selection { background: var(--lav-200); }

:focus-visible { outline: 3px solid var(--lav-300); outline-offset: 2px; border-radius: 8px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
.muted { color: var(--ink-2); }
.tiny { font-size: .78rem; }
.small { font-size: .86rem; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 14px; }
.stack-sm { display: grid; gap: 8px; }
.mt { margin-top: 14px; }
.mt-lg { margin-top: 24px; }

/* ------------------------------------------------------------- 3. Layout */
.app-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(120% 80% at 10% 0%, var(--lav-100) 0%, transparent 55%),
    radial-gradient(110% 70% at 95% 8%, var(--pink-50) 0%, transparent 50%),
    radial-gradient(90% 60% at 50% 100%, var(--mint-50) 0%, transparent 60%),
    var(--bg);
}
.blob { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .5; animation: float 18s ease-in-out infinite; }
.blob-1 { width: 260px; height: 260px; background: var(--lav-200); top: -70px; left: -60px; }
.blob-2 { width: 220px; height: 220px; background: var(--pink-200); top: 18%; right: -80px; animation-delay: -5s; }
.blob-3 { width: 240px; height: 240px; background: var(--mint-200); bottom: 4%; left: -70px; animation-delay: -10s; }
.blob-4 { width: 180px; height: 180px; background: var(--butter-200); bottom: 18%; right: -50px; animation-delay: -14s; }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(18px,-22px) scale(1.07); } 66% { transform: translate(-14px,16px) scale(.95); } }

.shell { max-width: var(--page-max); margin: 0 auto; padding: 0 16px calc(var(--nav-h) + 26px); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  /* El hueco inferior es donde se desvanece: así el texto nunca queda
     difuminado por la máscara. */
  padding: calc(env(safe-area-inset-top) + 14px) 2px 22px;
  background: linear-gradient(rgba(255, 249, 252, .86) calc(100% - 22px), rgba(255, 249, 252, 0));
  backdrop-filter: blur(12px) saturate(1.2);
  /* Sin máscara, el desenfoque se corta de golpe y deja una raya horizontal
     a lo ancho de la cabecera. Con ella se apaga a la vez que el color. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}
.topbar__title { font-family: var(--display); font-size: 1.45rem; font-weight: 800; }
.topbar__sub { font-size: .76rem; color: var(--ink-2); font-weight: 700; margin-top: -2px; }
.topbar > .grow { min-width: 0; }
.topbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__title { line-height: 1.15; overflow-wrap: anywhere; }
/* Pantallas estrechas (360 px y menos): todo cabe en una fila sin partir el subtítulo. */
@media (max-width: 380px) {
  .topbar { gap: 7px; }
  .topbar__title { font-size: 1.3rem; }
  .huesos { height: 34px; padding: 0 9px; font-size: .8rem; gap: 3px; }
  .topbar .help-btn { width: 34px; height: 34px; font-size: 1rem; }
  .topbar .avatar { width: 36px; height: 36px; font-size: .95rem; }
}

/* Huesos en la barra de arriba: es un dato, no una acción del día. */
.huesos {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  height: 38px; padding: 0 13px; border-radius: var(--r-pill);
  background: var(--butter-100); color: #96701A;
  font-weight: 800; font-size: .86rem; letter-spacing: .01em;
  transition: transform .18s var(--ease), background .2s;
}
.huesos:active { transform: scale(.92); }
.huesos__emoji { font-size: .95rem; }

.help-btn {
  width: 38px; height: 38px; border-radius: var(--r-pill); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700);
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  transition: transform .18s var(--ease), background .2s;
}
.help-btn:active { transform: scale(.9); }
.help-btn:hover { background: var(--lav-200); }

.avatar {
  width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: linear-gradient(140deg, var(--lav-300), var(--pink-300));
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--sh-sm); flex: 0 0 auto;
}

/* --- navegación inferior (móvil) --- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 8px 6px calc(env(safe-area-inset-bottom) + 8px);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(120,95,175,.08);
}
.nav__item {
  flex: 1; display: grid; justify-items: center; gap: 3px; padding: 6px 2px 4px;
  border-radius: var(--r-sm); color: var(--ink-3); font-size: .66rem; font-weight: 700;
  transition: color .2s, background .2s, transform .25s var(--ease);
}
.nav__item svg { width: 22px; height: 22px; stroke-width: 2; }
@media (max-width: 430px) {
  .nav { padding-left: 3px; padding-right: 3px; }
  /* Casillas iguales, pero ninguna más estrecha que su nombre («Calendario»). */
  .nav__item { font-size: .56rem; padding: 6px 0 4px; letter-spacing: -.01em; min-width: min-content; }
  .nav__item span { white-space: nowrap; }
  .nav__item svg { width: 20px; height: 20px; }
}
.nav__item.is-active { color: var(--lav-500); background: var(--lav-100); }
.nav__item.is-active svg { transform: translateY(-1px) scale(1.08); }
.nav__item:active { transform: scale(.93); }

/* --------------------------------------------------------- 4. Componentes */
.card {
  background: var(--surface); border-radius: var(--r-lg); padding: 18px;
  box-shadow: var(--sh-sm); border: 1px solid var(--line);
}
.card--flat { box-shadow: none; }
.card--lav  { background: linear-gradient(145deg, var(--lav-100), var(--lav-50)); border-color: var(--lav-200); }
.card--mint { background: linear-gradient(145deg, var(--mint-100), var(--mint-50)); border-color: var(--mint-200); }
.card--pink { background: linear-gradient(145deg, var(--pink-100), var(--pink-50)); border-color: var(--pink-200); }
.card--sky  { background: linear-gradient(145deg, var(--sky-100), #F4FAFF); border-color: var(--sky-200); }
.card--butter { background: linear-gradient(145deg, var(--butter-100), #FFFCF4); border-color: var(--butter-200); }
.aviso-acceso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aviso-acceso__emoji { display: grid; place-items: center; color: #A97A12; }
.aviso-acceso__emoji .ico { width: 26px; height: 26px; }
.aviso-acceso .grow { flex: 1 1 180px; }
.card--peach { background: linear-gradient(145deg, var(--peach-100), #FFF6F0); border-color: var(--peach-200); }

.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card__title { font-family: var(--display); font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.card__title .emoji { font-size: 1.1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: var(--lav-100); color: var(--lav-700);
  transition: transform .18s var(--ease), box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.btn:active { transform: scale(.96); }
.btn--primary {
  background: linear-gradient(135deg, var(--lav-400), var(--lav-500));
  color: #fff; box-shadow: 0 8px 22px rgba(155,120,230,.38);
}
.btn--mint { background: linear-gradient(135deg, var(--mint-300), var(--mint-400)); color: #1F6349; box-shadow: 0 8px 22px rgba(111,207,166,.35); }
.btn--pink { background: linear-gradient(135deg, var(--pink-300), var(--pink-400)); color: #fff; box-shadow: 0 8px 22px rgba(255,143,174,.35); }
.btn--peach{ background: linear-gradient(135deg, var(--peach-300), var(--peach-400)); color: #7A3A1C; box-shadow: 0 8px 22px rgba(255,164,124,.35); }
.btn--ghost { background: #fff; border: 2px solid var(--line); color: var(--ink-2); }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 26px; font-size: 1.08rem; }
.btn--sm { padding: 9px 15px; font-size: .86rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn svg { width: 19px; height: 19px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: #fff; border: 2px solid var(--line); color: var(--ink-2);
  font-size: .88rem; font-weight: 700;
  transition: transform .16s var(--ease), background .2s, border-color .2s, color .2s;
}
.chip:active { transform: scale(.94); }
.chip.is-on { background: var(--lav-100); border-color: var(--lav-300); color: var(--lav-700); }
.chip--mint.is-on { background: var(--mint-100); border-color: var(--mint-300); color: var(--mint-600); }
.chip--pink.is-on { background: var(--pink-100); border-color: var(--pink-300); color: var(--pink-600); }
/* `flex: 0 0 auto` es imprescindible: dentro de una fila flex, sin él el botón
   se encoge según lo largo que sea el texto que tiene al lado, y cada fila
   acababa con un cuadrado de un tamaño distinto. */
.chip--square {
  flex: 0 0 auto;
  width: 44px; height: 44px; min-width: 44px;
  padding: 0; justify-content: center; border-radius: var(--r-sm);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  width: fit-content;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 800; letter-spacing: .01em;
  background: var(--lav-100); color: var(--lav-700);
}
.badge--mint { background: var(--mint-100); color: var(--mint-600); }
.badge--pink { background: var(--pink-100); color: var(--pink-600); }
.badge--butter { background: var(--butter-100); color: #96701A; }
.badge--sky { background: var(--sky-100); color: #2E6F9E; }
.badge--peach { background: var(--peach-100); color: #A8572B; }
/* Etiquetas de vuelta dentro de un tema: mismos colores que la leyenda del
   calendario, para que «1.ª vuelta» sea del mismo color en los dos sitios. */
.badge--xs { padding: 3px 9px; font-size: .68rem; font-weight: 800; }
/* El repaso no es un color más de la leyenda: es un aviso encima de la vuelta,
   por eso va hueco y con borde en vez de relleno. */
.badge--repaso { background: #FFF; color: var(--lav-700); box-shadow: inset 0 0 0 1.5px var(--lav-300); }
.item__tags { display: flex; flex-wrap: wrap; gap: 5px; }

.field { display: grid; gap: 7px; }
.field__label { font-size: .84rem; font-weight: 700; color: var(--ink-2); padding-left: 4px; }
.input, .select, .textarea {
  width: 100%; padding: 15px 17px; border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--line); color: var(--ink);
  font-weight: 600; transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); font-weight: 600; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--lav-300); box-shadow: 0 0 0 4px var(--lav-100);
}
.textarea { min-height: 86px; resize: vertical; line-height: 1.45; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A9A2BC' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 17px center; padding-right: 42px;
}

/* barras y anillos de progreso */
.bar { display: block; height: 10px; border-radius: var(--r-pill); background: var(--lav-100); overflow: hidden; }
.bar__fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--lav-300), var(--lav-400));
  transition: width .7s var(--ease-out);
}
.bar__fill--mint { background: linear-gradient(90deg, var(--mint-300), var(--mint-400)); }
.bar__fill--pink { background: linear-gradient(90deg, var(--pink-300), var(--pink-400)); }
.bar--thin { height: 7px; }

.ring { position: relative; width: 108px; height: 108px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring__track { fill: none; stroke: var(--lav-100); stroke-width: 11; }
.ring__bar {
  fill: none; stroke: url(#ringGrad); stroke-width: 11; stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease-out);
}
.ring__label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ring__value { font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.ring__unit { font-size: .66rem; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* listas */
.list { display: grid; gap: 10px; }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.item:active { transform: scale(.985); }
.item__num {
  width: 36px; height: 36px; border-radius: var(--r-xs); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700);
  font-family: var(--display); font-weight: 800; font-size: .9rem;
}
.item__num--mint { background: var(--mint-100); color: var(--mint-600); }
.item__num--pink { background: var(--pink-100); color: var(--pink-600); }
.item__num--sky  { background: var(--sky-100); color: #2E6F9E; }
.item__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.item__title { font-weight: 700; font-size: .94rem; min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__meta { font-size: .76rem; color: var(--ink-2); font-weight: 700; }

.empty { text-align: center; padding: 26px 16px; color: var(--ink-2); }
.empty__emoji { font-size: 2.4rem; display: block; margin-bottom: 8px; }

/* hojas emergentes */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(75,66,89,.4);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  visibility: hidden;
  max-height: 88dvh; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 18px calc(env(safe-area-inset-bottom) + 24px);
  box-shadow: var(--sh-pop);
  transform: translateY(102%);
  transition: transform .38s var(--ease-out), visibility 0s linear .38s;
}
.sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .38s var(--ease-out), visibility 0s;
}
/* Cabecera pegada arriba: con muchos temas, bajar hasta el final para guardar
   era un engorro, así que la acción principal vive aquí. */
.sheet__head {
  position: sticky; top: 0; z-index: 3;
  margin: -10px -18px 12px; padding: 10px 18px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.sheet__grip { width: 44px; height: 5px; border-radius: var(--r-pill); background: var(--ink-4); margin: 0 auto 10px; }
.sheet__barra { display: flex; align-items: center; gap: 12px; }
.sheet__title { font-family: var(--display); font-size: 1.25rem; font-weight: 800;
  flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.sheet__barra .btn { flex: 0 0 auto; }

/* --- ventana flotante de Koda ---
   El vídeo tiene que estar en la página con tamaño real: Safari del iPad no
   pinta en la ventana flotante un vídeo que esté escondido fuera de pantalla
   (se veía todo negro). Mientras no se usa ocupa 1 px y es invisible. */
.pip-host { display: flex; justify-content: center; }
.pip-video {
  width: 1px; height: 1px; opacity: .01; pointer-events: none;
  border-radius: var(--r-sm); background: var(--lav-100);
}
.pip-video.is-live {
  width: 160px; height: 100px; opacity: 1; margin-top: 10px;
  box-shadow: var(--sh-sm);
}

/* --- Koda como mascota --- */
.medida { display: grid; gap: 4px; }
.tienda { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.articulo {
  display: grid; justify-items: center; gap: 3px;
  padding: 13px 8px; border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--line); text-align: center;
  transition: transform .16s var(--ease), border-color .2s, background .2s;
}
.articulo:active { transform: scale(.95); }
.articulo.is-on { border-color: var(--mint-300); background: var(--mint-50); }
.articulo[disabled] { opacity: .45; }
.articulo__emoji { font-size: 1.7rem; line-height: 1; }
.articulo__nombre { font-size: .78rem; font-weight: 700; line-height: 1.25; }
.articulo__precio { font-size: .74rem; font-weight: 800; color: var(--lav-700); }

/* --- minijuegos --- */
.juego {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(75,66,89,.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
.juego__caja {
  width: min(420px, 100%); max-height: 92dvh; overflow: hidden;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-pop); display: flex; flex-direction: column;
}
.juego__barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 1.05rem;
}
.juego__salir {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--lav-100); color: var(--lav-700); font-size: 1rem;
}
.juego__cuerpo { padding: 16px 18px 20px; overflow-y: auto; }
.juego__campo {
  position: relative; height: 320px; margin-top: 10px;
  border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(var(--sky-100), var(--mint-50));
}
.pelota {
  position: absolute; top: -44px; width: 48px; height: 48px;
  font-size: 1.9rem; line-height: 1;
  background: none; border: 0; padding: 0; outline: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  animation: cae linear forwards;
}
.pelota:focus, .pelota:focus-visible { outline: none; box-shadow: none; }
/* Pelota de tenis dibujada a mano: el emoji 🎾 se ve como una raqueta en
   algunos móviles, y aquí tiene que ser una pelota sí o sí. */
.pelota--bola {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #EAFB6B 0%, #CBE93F 46%, #A8C72B 100%);
  box-shadow: inset -4px -5px 10px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.18);
}
.pelota--bola::before, .pelota--bola::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 26px;
  border: 2.5px solid rgba(255,255,255,.92); border-radius: 50%;
  border-top-color: transparent; border-bottom-color: transparent;
}
.pelota--bola::before { left: -9px; }
.pelota--bola::after  { right: -9px; }
.pelota--pillada { transform: scale(1.7); opacity: 0; transition: transform .22s, opacity .22s; }
@keyframes cae { to { top: 330px; } }

.memoria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.carta {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--lav-100); border: 2px solid var(--lav-200);
  transition: transform .18s var(--ease), background .2s;
}
.carta__cara { display: none; }
.carta.is-on, .carta.is-ok { background: #fff; border-color: var(--mint-300); }
.carta.is-on .carta__dorso, .carta.is-ok .carta__dorso { display: none; }
.carta.is-on .carta__cara, .carta.is-ok .carta__cara { display: block; }
.carta.is-ok { opacity: .55; }

/* --- minijuego de baño --- */
/* Agua con color de verdad: sobre el azul claro de antes, la espuma blanca y
   las burbujas no se veían. */
.bano { position: relative; height: 320px; margin-top: 10px; border-radius: var(--r-md);
  overflow: hidden; background: linear-gradient(#A8D8F0, #6FB9DF); touch-action: none; }
.bano__koda { position: absolute; left: 50%; top: 52%; width: 190px; transform: translate(-50%,-50%); }
.mancha { position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(#8A6A4A, #6B4F38); opacity: .85; pointer-events: none; }
.burbuja {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.92) 45%, rgba(214,238,252,.85) 100%);
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(20,70,110,.22);
  pointer-events: none; animation: sube 1.4s ease-out forwards;
}
@keyframes sube { to { transform: translateY(-70px) scale(1.5); opacity: 0; } }

/* --- minijuego de comida --- */
.comedor { position: relative; height: 320px; margin-top: 10px; border-radius: var(--r-md);
  overflow: hidden; background: linear-gradient(var(--mint-50), var(--butter-100)); touch-action: none; }
.comedor__koda { position: absolute; left: 50%; bottom: 8px; width: 150px; transform: translateX(-50%); }
.bocado { position: absolute; font-size: 2rem; cursor: grab; user-select: none;
  -webkit-tap-highlight-color: transparent; }
.bocado--cogido { transform: scale(1.3); }

/* --- minijuego del recorrido --- */
.ruta { display: grid; gap: 4px; margin-top: 10px; touch-action: none; }
.celda {
  aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center;
  background: var(--lav-50); border: 2px solid var(--lav-100);
  font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--lav-700);
  -webkit-tap-highlight-color: transparent;
}
.celda--num { background: var(--lav-200); border-color: var(--lav-300); }
.celda--on { background: var(--mint-300); border-color: var(--mint-400); color: #1F6349; }
.celda--fin { box-shadow: 0 0 0 3px var(--mint-400); }

/* --- aviso de sesión en marcha --- */
.minitimer {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--nav-h) + 12px);
  transform: translate(-50%, 180%);
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--lav-400), var(--lav-500));
  color: #fff; font-weight: 700; font-size: .86rem;
  box-shadow: 0 10px 26px rgba(155,120,230,.45);
  transition: transform .4s var(--ease), background .3s;
}
.minitimer.is-on { transform: translate(-50%, 0); }
.minitimer strong { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 1rem; }
.minitimer__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: mini-pulse 1.6s ease-in-out infinite;
}
.minitimer--paused .minitimer__dot { animation: none; opacity: .5; }
.minitimer--break { background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); }
.minitimer__tag { font-size: .72rem; opacity: .8; font-weight: 700; }
@keyframes mini-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

@media (min-width: 834px) {
  .minitimer { bottom: 20px; left: auto; right: 24px; transform: translate(0, 180%); }
  .minitimer.is-on { transform: translate(0, 0); }
}

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); z-index: 95;
  transform: translate(-50%, 260%);
  visibility: hidden;
  display: flex; align-items: center; gap: 9px;
  /* Con left: 50% el ancho «natural» se queda en media pantalla y el texto se
     parte en tres líneas en el móvil: que mida lo que su texto. */
  width: max-content; max-width: calc(100vw - 32px);
  padding: 13px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: var(--sh-lg);
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.toast.is-on { transition: transform .4s var(--ease), visibility 0s; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }
.toast--ok { background: linear-gradient(135deg, var(--mint-400), var(--mint-600)); }
.toast--bad { background: linear-gradient(135deg, var(--pink-400), var(--pink-600)); }

/* ---------------------------------------------------------------- 5. Koda */
.koda { width: 120px; height: 120px; overflow: visible; }
/* `transform-box: fill-box` solo en las piezas que anima el CSS: aplicarlo a
   todo descoloca los elementos que ya traen su propio atributo `transform`. */
.koda__body, .koda__tail, .koda__head, .koda__eyelid, .koda__ear-l, .koda__ear-r,
.koda__tongue, .koda__tongue-open, .koda__sparkle, .koda__anger, .koda__sweat, .koda__qmark,
.koda__zzz, .koda__prop, .koda__pencil { transform-box: fill-box; }
/* cuando el contenedor ya tiene tamaño propio, Koda lo ocupa entero */
.landing__logo .koda, .koda-guide__dog .koda { width: 100%; height: 100%; }

/* --- piezas animadas en reposo --- */
/* El collar y la ropa del cuerpo (jersey, chaleco) respiran con él: misma
   animación y mismo punto fijo, la base del cuerpo (x 100, y 193.5 en el
   viewBox de 200). Con su propia caja se escalaban desde otro punto, y antes
   ni respiraban: el cuerpo se hinchaba y el collar se quedaba quieto. */
.koda__body, .koda__collar, .koda__acc--medio {
  transform-box: view-box; transform-origin: 50% 96.75%;
  animation: koda-breathe 3.4s ease-in-out infinite;
}
/* la postura tumbada no se ve salvo con .koda--tumbada */
.koda__tumbada { opacity: 0; transition: opacity .35s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.koda__tail   { transform-origin: 88% 88%;  animation: koda-wag 1.1s ease-in-out infinite; }
.koda__head   { transform-origin: 50% 92%;  animation: koda-bob 3.4s ease-in-out infinite; }
.koda__eyelid { transform-origin: 50% 0%;   animation: koda-blink 4.6s infinite; }
.koda__ear-l  { transform-origin: 70% 82%;  animation: koda-ear-l 3.8s ease-in-out infinite; }
.koda__ear-r  { transform-origin: 30% 82%;  animation: koda-ear-r 3.8s ease-in-out infinite; }

/* --- piezas que solo aparecen en ciertos ánimos --- */
.koda__tongue, .koda__tongue-open, .koda__sparkle, .koda__zzz, .koda__anger,
.koda__sweat, .koda__qmark, .koda__prop { opacity: 0; }
.koda__mouth--frown, .koda__mouth--open { opacity: 0; }
.koda__brow-sad, .koda__brow-angry { opacity: 0; }

@keyframes koda-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03,1.035); } }
@keyframes koda-wag  { 0%,100% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } }
@keyframes koda-bob  { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.5px) rotate(-1.5deg); } }
@keyframes koda-blink { 0%,92%,100% { transform: scaleY(0); } 94%,97% { transform: scaleY(1); } }
@keyframes koda-ear-l { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
@keyframes koda-ear-r { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } }

/* ------------------------------------------------------ estados de ánimo */

/* contento: jadea y mueve el rabo rápido */
.koda--happy .koda__tail { animation-duration: .55s; }
.koda--happy .koda__tongue { opacity: 1; animation: koda-pant 1s ease-in-out infinite; }

/* fiesta: salta, saca la lengua y suelta chispas */
.koda--party { animation: koda-hop .62s var(--ease) infinite; }
.koda--party .koda__tail { animation-duration: .34s; }
.koda--party .koda__tongue-open { opacity: 1; animation: koda-pant .7s ease-in-out infinite; }
.koda--party .koda__mouth--smile { opacity: 0; }
.koda--party .koda__mouth--open { opacity: 1; }
.koda--party .koda__sparkle { opacity: 1; animation: koda-sparkle 1.3s ease-in-out infinite; }

/* triste: orejas más caídas, cejas de pena y morro hacia abajo */
.koda--sad .koda__ear-l { animation: none; transform: rotate(36deg); }
.koda--sad .koda__ear-r { animation: none; transform: rotate(-36deg); }
.koda--sad .koda__head { animation: koda-droop 3s ease-in-out infinite; }
.koda--sad .koda__tail { animation-duration: 2.8s; }
.koda--sad .koda__brow-sad { opacity: 1; }
.koda--sad .koda__mouth--smile { opacity: 0; }
.koda--sad .koda__mouth--frown { opacity: 1; }
.koda--sad .koda__sweat { opacity: 1; animation: koda-drop 2.4s ease-in infinite; }

/* enfadado: cejas en pico, temblor y marca de cabreo */
.koda--angry { animation: koda-shake .36s ease-in-out infinite; }
.koda--angry .koda__ear-l { animation: none; transform: rotate(24deg); }
.koda--angry .koda__ear-r { animation: none; transform: rotate(-24deg); }
.koda--angry .koda__brow-angry { opacity: 1; }
.koda--angry .koda__mouth--smile { opacity: 0; }
.koda--angry .koda__mouth--frown { opacity: 1; }
.koda--angry .koda__anger { opacity: 1; animation: koda-pulse .55s ease-in-out infinite; }
.koda--angry .koda__tail { animation: none; transform: rotate(-6deg); }

/* dormido: ojos cerrados y zzz */
.koda--sleep .koda__eyelid { animation: none; transform: scaleY(1); }
.koda--sleep .koda__tail { animation-duration: 3.6s; }
.koda--sleep .koda__body, .koda--sleep .koda__collar, .koda--sleep .koda__acc--medio { animation-duration: 5s; }
.koda--sleep .koda__head { animation: koda-droop 5s ease-in-out infinite; }
.koda--sleep .koda__zzz { opacity: 1; animation: koda-zzz 2.6s ease-out infinite; }

/* atento: ladea la cabeza, como cuando no entiende algo */
.koda--alert .koda__head { animation: koda-tilt 1.9s ease-in-out infinite; }
.koda--alert .koda__ear-l { animation: none; transform: rotate(-7deg) scaleY(1.08); }
.koda--alert .koda__ear-r { animation: none; transform: rotate(7deg) scaleY(1.08); }

/* pensando: cabeza ladeada e interrogación flotando */
.koda--think .koda__head { animation: koda-tilt 3s ease-in-out infinite; }
.koda--think .koda__qmark { opacity: 1; animation: koda-float-q 2.2s ease-in-out infinite; }
.koda--think .koda__tail { animation-duration: 2.2s; }

/* orgulloso: pecho fuera y brillos */
.koda--proud .koda__body, .koda--proud .koda__collar, .koda--proud .koda__acc--medio { animation: koda-puff 2.4s ease-in-out infinite; }
.koda--proud .koda__sparkle { opacity: 1; animation: koda-sparkle 1.8s ease-in-out infinite; }
.koda--proud .koda__tail { animation-duration: .5s; }

/* hablando: mueve la cabeza al ritmo de la frase */
.koda--talk .koda__head { animation: koda-talk .42s ease-in-out infinite; }

/* escribiendo: saca la libreta y apunta lo que le dices */
.koda--write .koda__prop--note { opacity: 1; animation: koda-note-in .45s var(--ease) both; }
.koda--write .koda__pencil { animation: koda-write .5s ease-in-out infinite; transform-origin: 50% 100%; }
.koda--write .koda__head { animation: koda-look-down 3s ease-in-out infinite; }
.koda--write .koda__tail { animation-duration: 1.6s; }

@keyframes koda-hop { 0%,100% { transform: translateY(0) scaleY(1); } 28% { transform: translateY(-13px) scaleY(1.07); } 55% { transform: translateY(0) scaleY(.94); } 70% { transform: translateY(0) scaleY(1.02); } }
@keyframes koda-pant { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.3) translateY(1px); } }
@keyframes koda-sparkle { 0%,100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes koda-droop { 0%,100% { transform: translateY(3px) rotate(5deg); } 50% { transform: translateY(5px) rotate(3deg); } }
@keyframes koda-zzz { 0% { opacity: 0; transform: translate(0,0) scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(9px,-20px) scale(1.15); } }
@keyframes koda-tilt { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes koda-talk { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.5px) rotate(1deg); } }
@keyframes koda-shake { 0%,100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@keyframes koda-pulse { 0%,100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes koda-drop { 0%,60% { opacity: 0; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes koda-float-q { 0%,100% { opacity: .5; transform: translateY(2px) rotate(-6deg); } 50% { opacity: 1; transform: translateY(-5px) rotate(6deg); } }
@keyframes koda-puff { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05,1.02); } }
@keyframes koda-note-in { from { opacity: 0; transform: translateY(14px) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes koda-write { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-3px,2px) rotate(-7deg); } }
@keyframes koda-look-down { 0%,100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(2px) rotate(3deg); } }

/* --- burbuja de diálogo --- */
.bubble {
  position: relative; background: #fff; border: 2px solid var(--lav-200);
  border-radius: var(--r-md); padding: 13px 16px;
  font-size: .92rem; font-weight: 600; line-height: 1.45; color: var(--ink);
  box-shadow: var(--sh-md);
}
.bubble::after, .bubble::before {
  content: ""; position: absolute; width: 14px; height: 14px; transform: rotate(45deg);
}
.bubble::before { background: var(--lav-200); }
.bubble::after  { background: #fff; }
.bubble--left::before  { left: -8px; top: 22px; }
.bubble--left::after   { left: -5px; top: 22px; }
.bubble--right::before { right: -8px; top: 22px; }
.bubble--right::after  { right: -5px; top: 22px; }
.bubble--bottom::before { bottom: -8px; left: 28px; }
.bubble--bottom::after  { bottom: -5px; left: 28px; }
.bubble--top::before { top: -8px; left: 28px; }
.bubble--top::after  { top: -5px; left: 28px; }
.bubble__caret { display: none; }

/* --- Koda flotante que salta por la pantalla --- */
.koda-guide {
  /* left/top a cero son imprescindibles: sin ellos el translate partiría de la
     posición que el elemento tendría en el flujo, no de la esquina de la pantalla */
  position: fixed; left: 0; top: 0; z-index: 120; width: 0; height: 0;
  pointer-events: none;
  transition: transform .7s var(--ease);
}
.koda-guide.is-hidden { opacity: 0; transform: scale(.4); }
/* despedida: pega un brinco y se va */
.koda-guide.is-leaving { animation: koda-bye .52s var(--ease-out) forwards; }
@keyframes koda-bye {
  0%   { opacity: 1; }
  35%  { opacity: 1; translate: 0 -26px; rotate: -8deg; }
  100% { opacity: 0; translate: 0 70px; rotate: 10deg; scale: .5; }
}
.koda-guide__dog {
  position: absolute; left: -54px; top: -54px; width: 108px; height: 108px;
  filter: drop-shadow(0 10px 18px rgba(107,79,176,.25));
  animation: koda-float 2.6s ease-in-out infinite;
}
.koda-guide__bubble {
  position: fixed; z-index: 130; left: 0; top: 0;
  width: min(300px, calc(100vw - 24px));
  pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.94);
  transition: opacity .3s, transform .35s var(--ease);
}
.koda-guide__bubble.is-on { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.koda-guide__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@keyframes koda-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.koda-spot {
  /* Captura los toques: durante el recorrido no se debe poder navegar por
     debajo del velo y dejar el foco señalando algo que ya no existe. */
  position: fixed; z-index: 115; border-radius: var(--r-lg); pointer-events: auto;
  box-shadow: 0 0 0 4px var(--lav-300), 0 0 0 9999px rgba(75,66,89,.55);
  transition: all .6s var(--ease-out); opacity: 0;
}
.koda-spot.is-on { opacity: 1; }
.koda-spot:not(.is-on) { pointer-events: none; }

/* Koda en cabecera del panel */
.koda-hero { display: flex; align-items: flex-start; gap: 12px; }
.koda-hero .koda { width: 92px; height: 92px; flex: 0 0 auto; margin-top: -6px; }
.koda-hero__bubble { flex: 1; min-width: 0; }

/* -------------------------------------------------------------- 6. Vistas */
.view { animation: view-in .4s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.stat {
  padding: 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line);
  display: grid; gap: 3px;
}
.stat__value { font-family: var(--display); font-size: 1.42rem; font-weight: 800; line-height: 1; }
.stat__label { font-size: .72rem; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat--lav { background: var(--lav-100); border-color: var(--lav-200); }
.stat--mint { background: var(--mint-100); border-color: var(--mint-200); }
.stat--pink { background: var(--pink-100); border-color: var(--pink-200); }
.stat--butter { background: var(--butter-100); border-color: var(--butter-200); }
.stat--sky { background: var(--sky-100); border-color: var(--sky-200); }

/* --- plan de los próximos días --- */
.plandia {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
}
.plandia.is-today { border-color: var(--lav-300); background: var(--lav-50); }
.plandia__fecha {
  display: grid; justify-items: center; min-width: 34px; flex: 0 0 auto;
  font-family: var(--display); line-height: 1.1;
}
.plandia__fecha strong { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; }
.plandia__fecha span { font-size: 1.15rem; font-weight: 800; color: var(--lav-700); }
.plandia__cuerpo { flex: 1; min-width: 0; display: grid; gap: 4px; }
.plandia__tema {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .86rem; font-weight: 700;
}
/* El título ocupa lo que haya y parte en varias líneas; los minutos no se
   encogen nunca y se quedan arriba, sin que el texto se les meta debajo. */
.plandia__titulo {
  flex: 1 1 auto; min-width: 0;
  overflow-wrap: anywhere; line-height: 1.35;
}
.plandia__min {
  flex: 0 0 auto; font-size: .76rem; color: var(--ink-2);
  white-space: nowrap; padding-top: 1px;
}
.plandia__tramo {
  display: block; font-size: .74rem; font-weight: 700;
  color: var(--lav-500); margin-top: 1px;
}
.plandia__tema--repaso { color: #2E6F9E; }
.plandia__tema--repaso .plandia__min { color: #2E6F9E; }

.block-list { display: grid; gap: 8px; }
.block {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line);
  font-size: .88rem; font-weight: 700;
}
.block__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.block--review .block__dot { background: var(--sky-300); }
.block--focus  .block__dot { background: var(--lav-400); }
.block--break  .block__dot { background: var(--mint-300); }
.block--break { background: var(--mint-50); border-color: var(--mint-100); color: var(--mint-600); }
.block--review { background: var(--sky-100); border-color: var(--sky-200); }
.block__time { margin-left: auto; font-family: var(--display); font-weight: 700; color: var(--ink-2);
  flex: 0 0 auto; align-self: flex-start; }
.block { align-items: flex-start; }
.block__dot { margin-top: 6px; }
.block__cuerpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.block__que { font-size: .88rem; }
.block__tema { font-size: .82rem; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.block__tramo { font-size: .74rem; font-weight: 700; color: var(--lav-500); }
.block--review .block__tramo { color: #2E6F9E; }

.segmented {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  background: var(--lav-100);
}
.segmented__btn {
  flex: 1; padding: 10px 8px; border-radius: var(--r-pill);
  font-size: .84rem; font-weight: 700; color: var(--ink-2);
  transition: background .25s, color .25s, box-shadow .25s;
}
.segmented__btn.is-on { background: #fff; color: var(--lav-700); box-shadow: var(--sh-sm); }
/* Muchas pestañas (los rincones de la casa son nueve): se deslizan en vez de
   estirar la pantalla a lo ancho. */
.segmented--scroll {
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.segmented--scroll::-webkit-scrollbar { display: none; }
.segmented--scroll .segmented__btn { flex: 0 0 auto; padding: 10px 14px; white-space: nowrap; }

/* el título de una escena nunca empuja la fila */
.escena__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- cómo ha ido el día, en emojis --- */
.animos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.animo {
  display: grid; justify-items: center; gap: 3px;
  padding: 10px 2px; border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--line);
  transition: transform .16s var(--ease), background .2s, border-color .2s;
}
.animo:active { transform: scale(.92); }
.animo.is-on { border-color: var(--lav-400); background: var(--lav-50); }
.animo__cara { font-size: 1.5rem; line-height: 1; filter: grayscale(.5); transition: filter .2s, transform .2s; }
.animo.is-on .animo__cara { filter: none; transform: scale(1.12); }
.animo__texto { font-size: .62rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.animo.is-on .animo__texto { color: var(--lav-700); }

@media (max-width: 380px) {
  .animos { grid-template-columns: repeat(3, 1fr); }
}

/* --- fila de tema en el registro diario --- */
.logrow {
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--line);
  padding: 11px 13px; transition: border-color .2s, background .2s;
}
.logrow.is-on { border-color: var(--mint-300); background: var(--mint-50); }
.logrow__head { display: flex; align-items: flex-start; gap: 11px; }
.logrow__head .badge { flex: 0 0 auto; }
.logrow__title {
  flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .92rem;
  line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* el detalle solo se despliega cuando el tema está marcado */
.logrow__body { display: none; margin-top: 11px; }
.logrow.is-on .logrow__body { display: grid; gap: 11px; }
.logrow__time { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.logrow__time .grow { min-width: 0; }
/* Dentro de una fila del registro ya hay separación propia (el gap). */
.logrow__body .logrow__time { margin: 0; }

.segmented--sm { padding: 3px; }
.segmented--sm .segmented__btn { padding: 7px 6px; font-size: .78rem; }

.input--mini { width: 82px; padding: 9px 10px; text-align: center;
  font-family: var(--display); font-weight: 700; }
.input--hm { width: 56px; }

.topic-progress { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topic-progress .slider { flex: 1 1 auto; min-width: 0; }
.topic-progress .bar { flex: 1; }
.topic-progress__pct { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--ink-2); min-width: 34px; text-align: right; }

/* En móvil la tarjeta de los próximos días se queda donde siempre, justo
   debajo del plan de hoy (por eso el `order`, va la última en el HTML); en
   pantalla ancha se va abajo cruzando las dos columnas. */
.grid-2 { display: flex; flex-direction: column; gap: 14px; }
.hoy-semana { order: 1; }
.hoy-col2 { order: 2; }

/* --- bolitas de vueltas dadas --- */
.rdots { display: inline-flex; gap: 3px; align-items: center; flex: 0 0 auto; }
.rdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lav-100); border: 1.5px solid var(--lav-200);
}
.rdot.is-done { background: var(--mint-400); border-color: var(--mint-400); }
.rdot.is-now  { background: #fff; border-color: var(--lav-400); border-width: 2.5px; }
.center .rdots { gap: 6px; }
.center .rdot { width: 13px; height: 13px; }

.slider {
  -webkit-appearance: none; appearance: none; width: 100%;
  /* Alto generoso + fondo solo en la pista: con 10px el dedo fallaba y el
     gesto acababa haciendo scroll de la hoja en vez de mover el valor. */
  height: 34px; background: transparent; outline: none;
  touch-action: none;
}
.slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-pill); background: var(--lav-100);
}
.slider::-moz-range-track {
  height: 10px; border-radius: var(--r-pill); background: var(--lav-100);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--lav-400); box-shadow: var(--sh-md); cursor: grab;
  margin-top: -10px;
}
.slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 4px solid var(--lav-400); box-shadow: var(--sh-md); cursor: grab;
}

/* ---------------------------------------------------------- 7. Calendario */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__month { font-family: var(--display); font-size: 1.16rem; font-weight: 800; text-transform: capitalize; }
.cal__nav {
  width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700);
  transition: transform .18s var(--ease);
}
.cal__nav:active { transform: scale(.9); }
.cal__nav svg { width: 17px; height: 17px; }

.cal__dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 7px; }
.cal__dow { text-align: center; font-size: .68rem; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 11px 5px; }
.cal__cell { aspect-ratio: 1; display: grid; place-items: center; }

.cal__day {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 46px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: .86rem; font-weight: 700; color: var(--ink-2);
  background: transparent; border: 2px solid transparent;
  transition: transform .2s var(--ease), background .25s, color .25s, border-color .25s;
}
.cal__day:active { transform: scale(.88); }

/* estilo "regla": círculos pastel rellenos */
.cal__day--planned { background: var(--lav-50); color: var(--lav-700); }
.cal__day--done {
  background: linear-gradient(140deg, var(--mint-300), var(--mint-400));
  color: #fff; box-shadow: 0 4px 12px rgba(111,207,166,.42);
}
.cal__day--partial {
  background: linear-gradient(140deg, var(--butter-200), var(--butter-300));
  color: #7D5E12; box-shadow: 0 4px 12px rgba(255,220,147,.5);
}
.cal__day--missed {
  background: linear-gradient(140deg, var(--pink-200), var(--pink-300));
  color: #fff; box-shadow: 0 4px 12px rgba(255,179,200,.5);
}
.cal__day--rest { background: var(--sky-100); color: #3C7FB0; border-color: var(--sky-200); }
.cal__day--today { border-color: var(--lav-400); font-weight: 800; color: var(--lav-700); }
.cal__day--today.cal__day--done,
.cal__day--today.cal__day--missed { color: #fff; border-color: var(--lav-500); }
.cal__day--today.cal__day--partial { border-color: var(--lav-500); }
.cal__day--out { opacity: .3; }
/* Días anteriores a la cuenta: ni plan ni vuelta, solo historia apagada. */
.cal__day--antes { background: var(--line); color: var(--ink-3); opacity: .55; }
/* color del día futuro según la vuelta que toque */
.cal__day--r1 { background: var(--lav-50); color: var(--lav-700); }
.cal__day--r2 { background: var(--sky-100); color: #2E6F9E; }
.cal__day--r3 { background: var(--peach-100); color: #9A5A33; }
.cal__day--r2.cal__day--future::after { background: var(--sky-300) !important; }
.cal__day--r3.cal__day--future::after { background: var(--peach-300) !important; }

.cal__day--future.cal__day--planned::after {
  content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--lav-300);
}
/* Días en los que ya solo toca repasar: huecos, como la etiqueta de repaso. */
.cal__day--repaso {
  background: #FFF; color: var(--lav-700);
  box-shadow: inset 0 0 0 2px var(--lav-200);
}
/* Los días reservados a repaso general: hueco, pero del color del examen. */
.cal__day--final {
  background: #FFF; color: #9A5A33;
  box-shadow: inset 0 0 0 2px var(--peach-200);
}
/* Cartel de examen o entrega: montado en el borde de abajo del círculo,
   que conserva su tamaño; el aro blanco lo separa del círculo. */
.cal__examtag {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 2;
  font-size: .6rem; font-weight: 800; letter-spacing: .01em; line-height: 1.3;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--peach-200); color: #9A5A33; white-space: nowrap;
  box-shadow: 0 0 0 2px #fff; pointer-events: none;
}
.cal__day--exam {
  background: linear-gradient(140deg, var(--peach-300), var(--peach-400));
  color: #fff; box-shadow: 0 4px 14px rgba(255,164,124,.5);
}
.cal__day--exam::before { content: "★"; position: absolute; top: -3px; right: -2px; font-size: .7rem; color: var(--peach-400); }

.cal__legend { display: flex; flex-wrap: wrap; gap: 9px 14px; margin-top: 16px; }
.cal__legend-item { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.cal__legend-dot { width: 14px; height: 14px; border-radius: 50%; }

.cal__streak {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--peach-100), var(--butter-100));
  border: 1px solid var(--peach-200);
}
.cal__streak-num { font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--peach-400); }

/* --------------------------------------- 8. Temporizador / Onboarding / Landing */
.timer-stage { display: grid; place-items: center; gap: 18px; padding: 10px 0 4px; }
.timer-dial { position: relative; width: min(74vw, 290px); aspect-ratio: 1; }
.timer-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-dial__track { fill: none; stroke: var(--lav-100); stroke-width: 15; }
.timer-dial__bar { fill: none; stroke-width: 15; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .5s; }
.timer-dial__inner {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.timer-dial__phase { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.timer-dial__time { font-family: var(--display); font-size: 3.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.timer-dial__note { font-size: .78rem; color: var(--ink-2); font-weight: 700; }
.timer-dial--focus .timer-dial__bar { stroke: var(--lav-400); }
.timer-dial--break .timer-dial__bar { stroke: var(--mint-400); }
.timer-dial--review .timer-dial__bar { stroke: var(--sky-400); }
.timer-dial.is-running .timer-dial__inner { animation: pulse-soft 3.4s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

.timer-controls { display: flex; gap: 11px; justify-content: center; }
.timer-ctrl {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); color: var(--ink-2);
  box-shadow: var(--sh-sm); transition: transform .18s var(--ease);
}
.timer-ctrl:active { transform: scale(.9); }
.timer-ctrl svg { width: 22px; height: 22px; }
.timer-ctrl--main {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--lav-400), var(--lav-500));
  border: 0; color: #fff; box-shadow: 0 10px 26px rgba(155,120,230,.42);
}
.timer-ctrl--main svg { width: 29px; height: 29px; }

.timer-dots { display: flex; gap: 6px; justify-content: center; }
.timer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lav-200); transition: background .3s, transform .3s; }
.timer-dot.is-done { background: var(--lav-400); }
.timer-dot.is-now { background: var(--lav-500); transform: scale(1.4); }

/* onboarding */
.onb { min-height: 100dvh; display: flex; flex-direction: column; max-width: var(--page-max); margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 104px); }
.onb__progress { height: 7px; border-radius: var(--r-pill); background: var(--lav-100); overflow: hidden; margin-bottom: 18px; }
.onb__progress-fill { height: 100%; background: linear-gradient(90deg, var(--lav-300), var(--pink-300)); border-radius: var(--r-pill); transition: width .5s var(--ease-out); }
.onb__koda { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.onb__koda .koda { width: 104px; height: 104px; flex: 0 0 auto; }
.onb__step { flex: 1; display: grid; gap: 16px; align-content: start; }
.onb__q { font-family: var(--display); font-size: 1.32rem; font-weight: 800; line-height: 1.25; }
.onb__hint { font-size: .86rem; color: var(--ink-2); font-weight: 600; }
.onb__options { display: grid; gap: 10px; }
.onb__opt {
  display: flex; align-items: center; gap: 12px; padding: 15px 17px;
  border-radius: var(--r-md); background: #fff; border: 2px solid var(--line);
  text-align: left; font-weight: 700; transition: transform .16s var(--ease), border-color .2s, background .2s;
}
.onb__opt:active { transform: scale(.975); }
.onb__opt.is-on { border-color: var(--lav-400); background: var(--lav-50); }
.onb__opt-emoji { font-size: 1.45rem; }
.onb__opt-sub { font-size: .76rem; color: var(--ink-2); font-weight: 600; }
.onb__opt .grow { min-width: 0; overflow-wrap: anywhere; }
.onb__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.onb__day {
  aspect-ratio: 1; border-radius: var(--r-sm); display: grid; place-items: center;
  background: #fff; border: 2px solid var(--line); font-weight: 800; font-size: .85rem; color: var(--ink-2);
  transition: transform .16s var(--ease), background .2s, border-color .2s, color .2s;
}
.onb__day.is-on { background: var(--lav-100); border-color: var(--lav-400); color: var(--lav-700); }
.onb__day:active { transform: scale(.9); }
.onb__nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px;
  max-width: var(--page-max); margin: 0 auto;
  padding: 14px 18px calc(env(safe-area-inset-bottom) + 16px);
  background: linear-gradient(transparent, var(--bg) 26%);
}
.onb__stepper { display: flex; align-items: center; justify-content: center; gap: 18px; }
.onb__stepper-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700); font-size: 1.5rem; font-family: var(--display); font-weight: 800;
  transition: transform .16s var(--ease);
}
.onb__stepper-btn:active { transform: scale(.88); }
.onb__stepper-value { font-family: var(--display); font-size: 2.6rem; font-weight: 800; min-width: 92px; text-align: center; }
.onb__custom { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md);
  background: var(--lav-50); border: 2px dashed var(--lav-200); }
.onb__custom.is-on { border-style: solid; border-color: var(--lav-400); background: #fff; }
.onb__custom-row { display: flex; align-items: center; gap: 10px; }
.onb__custom-row .input { text-align: center; font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.onb__custom-unit { font-weight: 700; color: var(--ink-2); white-space: nowrap; }

/* landing */
.landing { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 460px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 28px); }
.landing__brand { text-align: center; margin-bottom: 22px; }
.landing__logo { width: 150px; height: 150px; margin: 0 auto 6px; }
.landing__name { font-family: var(--display); font-size: 2.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.landing__name span { background: linear-gradient(120deg, var(--lav-500), var(--pink-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.landing__tag { font-size: .95rem; color: var(--ink-2); font-weight: 700; margin-top: 7px; }
.landing__card { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--sh-lg); border: 1px solid #fff; }
.landing__feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.landing__feat { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.75); font-size: .76rem; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); }
.alert { padding: 12px 15px; border-radius: var(--r-md); font-size: .86rem; font-weight: 700; display: none; }
.alert.is-on { display: block; animation: shake .4s; }
.alert--bad { background: var(--pink-100); color: var(--pink-600); border: 1px solid var(--pink-200); }
.alert--ok { background: var(--mint-100); color: var(--mint-600); border: 1px solid var(--mint-200); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.loader { display: grid; place-items: center; min-height: 60dvh; gap: 14px; }
.loader .koda { width: 96px; height: 96px; }
.loader__text { font-weight: 700; color: var(--ink-2); font-size: .9rem; }

/* --------------------------------------------------- iPad / pantallas grandes */
@media (min-width: 834px) {
  :root { --page-max: 960px; --nav-h: 0px; }

  .shell { max-width: 1000px; padding: 0 28px 48px 126px; }

  .nav {
    top: 0; bottom: auto; left: 0; right: auto; width: 110px; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 8px;
    padding: calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 20px);
    /* Ni borde ni sombra ni fondo propio: dibujaban un canto recto que se
       veía como un corte. El fondo va en el pseudoelemento de abajo, que se
       desvanece hacia la derecha igual que la cabecera lo hace hacia abajo. */
    border-top: 0; border-right: 0;
    background: none; box-shadow: none; backdrop-filter: none;
  }
  .nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to right, rgba(255,255,255,.92) 55%, rgba(255,255,255,0));
    backdrop-filter: blur(14px) saturate(1.2);
    /* La máscara apaga también el desenfoque: sin ella se cortaría en seco. */
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
            mask-image: linear-gradient(to right, #000 55%, transparent);
  }
  .nav__item { flex: 0 0 auto; width: 100%; padding: 12px 4px; font-size: .68rem; gap: 5px; }
  .nav__item svg { width: 25px; height: 25px; }

  /* Solo el relleno superior: escribir `padding` entero aquí borraba el
     `env(safe-area-inset-top)` y la cabecera se metía bajo la barra de estado. */
  .topbar {
    padding-top: calc(env(safe-area-inset-top) + 26px);
    /* Se sale de los márgenes de la columna para llegar a los bordes: si no,
       el fondo de la cabecera dibuja un rectángulo recortado en medio. */
    margin-left: -126px; margin-right: -28px;
    padding-left: 126px; padding-right: 28px;
  }

  .grid-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
  .grid-2 > .stack { gap: 18px; }
  /* En ancho de sobra, «los próximos días» cruza las dos columnas: es una
     lista con fechas y tramos, y en media columna se parte en dos líneas. */
  .grid-2 > .hoy-semana { grid-column: 1 / -1; order: 0; }
  .grid-2 > .hoy-col2 { order: 0; }

  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .koda-hero .koda { width: 118px; height: 118px; }
  .cal__day { max-width: 62px; font-size: 1rem; }
  .sheet { left: 50%; right: auto; transform: translate(-50%, 102%); width: 560px; border-radius: var(--r-xl); bottom: 24px; }
  .sheet.is-open { transform: translate(-50%, 0); }
  .toast { bottom: 28px; }
  .onb { max-width: 620px; }
  .onb__koda .koda { width: 130px; height: 130px; }
  h1 { font-size: 2.1rem; }
}

@media (min-width: 1180px) {
  .shell { max-width: 1160px; }
  .grid-2 { grid-template-columns: 1.2fr .8fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}


/* ==========================================================================
   Tests del temario
   ========================================================================== */

.pregunta { font-size: 1.12rem; line-height: 1.4; margin: 8px 0 4px; }

/* tipos de pregunta que se eligen al configurar */
.tipos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.tipo {
  display: grid; gap: 2px; text-align: left;
  padding: 12px 13px; border-radius: var(--r-md);
  background: var(--lav-50); border: 2px solid transparent;
  transition: transform .18s var(--ease), border-color .2s, background .2s;
}
.tipo:active { transform: scale(.97); }
.tipo.is-on { background: #fff; border-color: var(--lav-400); box-shadow: var(--sh-sm); }
.tipo__emoji { font-size: 1.25rem; }
.tipo__nombre { font-weight: 800; font-size: .88rem; }
.tipo__desc { font-size: .72rem; color: var(--ink-3); font-weight: 600; line-height: 1.25; }

/* opciones de una pregunta tipo test */
.opciones { display: grid; gap: 9px; margin-top: 12px; }
.opcion {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  padding: 13px 14px; border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--line);
  font-weight: 700; font-size: .92rem;
  transition: transform .16s var(--ease), border-color .2s, background .2s;
}
.opcion:active { transform: scale(.98); }
.opcion.is-on { border-color: var(--lav-400); background: var(--lav-50); }
.opcion__letra {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lav-100); color: var(--lav-700);
  font-family: var(--display); font-weight: 800; font-size: .82rem;
}
.opcion__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.opciones--revision .opcion { padding: 10px 12px; font-size: .84rem; cursor: default; }
.opcion.es-buena { border-color: var(--mint-300); background: var(--mint-50); }
.opcion.es-mala  { border-color: var(--pink-300); background: var(--pink-50); }
.opcion .tiny { flex: 0 0 auto; color: var(--ink-3); font-weight: 700; }

/* el cajón que sale después de contestar */
.feedback { border-radius: var(--r-md); padding: 14px 15px; }
.feedback--ok { background: var(--mint-50); border: 1.5px solid var(--mint-200); }
.feedback--ko { background: var(--butter-100); border: 1.5px solid var(--butter-200); }
.feedback__titulo { font-family: var(--display); font-weight: 800; margin-bottom: 6px; }
.feedback__pares { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; line-height: 1.5; }
.feedback__pares .ok { color: var(--mint-600); }
.feedback__pares .ko { color: var(--pink-600); }

/* nota final: rosco de porcentaje */
.nota {
  width: 150px; height: 150px; margin: 4px auto 0; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  background: conic-gradient(var(--lav-400) var(--nota, 0deg), var(--lav-100) 0deg);
  position: relative;
}
.nota::before {
  content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff;
}
.nota__pct {
  position: relative; font-family: var(--display); font-weight: 800;
  font-size: 2.1rem; color: var(--lav-700); line-height: 1;
}
.nota__sub { position: relative; font-size: .78rem; font-weight: 700; color: var(--ink-3); }

/* rejilla de respuestas del simulacro */
.simrejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 7px; }
.simnum {
  aspect-ratio: 1; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--lav-50); border: 2px solid transparent;
  font-weight: 800; font-size: .82rem; color: var(--ink-2);
  transition: transform .16s var(--ease), background .2s, border-color .2s;
}
.simnum:active { transform: scale(.92); }
.simnum.is-on { background: var(--mint-100); color: var(--mint-600); }
.simnum.is-aqui { border-color: var(--lav-400); color: var(--lav-700); }

/* repaso de respuestas */
.revision {
  padding: 12px 13px; border-radius: var(--r-md);
  background: #fff; border-left: 4px solid var(--line);
}
.revision--ok { border-left-color: var(--mint-300); }
.revision--ko { border-left-color: var(--pink-300); }
/* A falta de que la persona diga cuál era la correcta: ni bien ni mal. */
.revision--pendiente {
  border-left-color: var(--butter-300);
  background: linear-gradient(145deg, var(--butter-100), #FFFCF4);
}
.revision--pendiente .opcion { border-color: var(--butter-200); }
.opcion.es-tuya { border-color: var(--lav-400); background: var(--lav-50); }
.revision summary { cursor: pointer; color: var(--lav-700); font-weight: 700; }
.revision .ok { color: var(--mint-600); }
.revision .ko { color: var(--pink-600); }

@media (min-width: 900px) {
  .tipos { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Los sitios de Koda (casa, supermercado, parque, tienda)
   ========================================================================== */

.sitios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.sitio {
  display: grid; justify-items: center; gap: 3px; text-align: center;
  padding: 18px 12px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.sitio:active { transform: scale(.96); }
.sitio__emoji { font-size: 2rem; line-height: 1.1; }
.sitio__nombre { font-family: var(--display); font-weight: 800; font-size: .95rem; }
.sitio__pie { font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.sitio--mint   { background: linear-gradient(150deg, var(--mint-100), #fff); border-color: var(--mint-200); }
.sitio--sky    { background: linear-gradient(150deg, var(--sky-100), #fff);  border-color: var(--sky-200); }
.sitio--lav    { background: linear-gradient(150deg, var(--lav-100), #fff);  border-color: var(--lav-200); }
.sitio--butter { background: linear-gradient(150deg, var(--butter-100), #fff); border-color: var(--butter-200); }

/* cada sitio tiñe un poco su pantalla, para saber dónde estás */
.escena { border-radius: var(--r-lg); padding: 12px; }
.escena--super  { background: linear-gradient(170deg, var(--mint-50), transparent 55%); }
.escena--parque { background: linear-gradient(170deg, var(--sky-100), transparent 55%); }
.escena--tienda { background: linear-gradient(170deg, var(--lav-50), transparent 55%); }
.escena__head { display: flex; align-items: center; gap: 10px; }
.escena__titulo {
  flex: 1; text-align: center; font-family: var(--display);
  font-weight: 800; font-size: 1.02rem;
}

/* estanterías del supermercado */
.estante {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  padding: 12px 10px 14px; border-radius: var(--r-lg);
  background: #fff; border: 1.5px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--mint-100);
}
.articulo--balda { background: var(--mint-50); }

/* el espejo del probador */
.espejo { display: grid; justify-items: center; gap: 6px; }
.espejo__marco {
  width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fff, var(--lav-50) 70%);
  border: 6px solid var(--lav-200);
  box-shadow: 0 10px 26px rgba(155,120,230,.22), inset 0 0 22px rgba(255,255,255,.9);
}
.espejo__marco .koda { width: 150px; height: 150px; }

@media (min-width: 900px) {
  .sitios { grid-template-columns: repeat(4, 1fr); }
  .estante { grid-template-columns: repeat(5, 1fr); }
}

/* el jabón y la herramienta del baño */
.espuma {
  position: absolute; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff 55%, #E6F3FF 100%);
  border: 2px solid rgba(255,255,255,.98);
  box-shadow: 0 3px 8px rgba(20,70,110,.28);
}
/* enjabonada: el agua se queda igual de azul para que el blanco destaque */
.bano--enjabonado { background: linear-gradient(#9FD2EC, #63B0D8) !important; }
.bano--limpio { background: linear-gradient(#BDEBD4, #86D9B4) !important; }
/* La herramienta: se dibuja centrada en el dedo, que es justo donde limpia. */
.utensilio {
  position: absolute; left: 50%; top: 86%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.9rem;
  background: #fff; border: 2px solid var(--sky-200);
  box-shadow: 0 5px 14px rgba(0,0,0,.16);
  pointer-events: none; z-index: 5;
  transition: transform .12s var(--ease), box-shadow .2s;
}
.utensilio--cogida { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.utensilio--ducha { border-color: var(--lav-300); }

/* ==========================================================================
   Escenarios de Koda · dibujados con CSS, sin imágenes que cargar
   ========================================================================== */

.escenario {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  height: 230px; margin-bottom: 14px;
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-sm);
}
.escenario .koda { width: 132px; height: 132px; }
.escenario__koda { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; }

/* elementos sueltos (plantas, nubes, perchas…) */
.deco { position: absolute; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.08)); }

/* --- casa: salón con su camita --- */
.escenario--casa { background: linear-gradient(180deg, #FBF4FF 0%, #F6ECFF 58%, #EBD9C8 58%, #E3CDB8 100%); }
.escenario--casa .ventana {
  position: absolute; top: 20px; left: 22px; width: 86px; height: 66px;
  border-radius: 10px; border: 5px solid #E8DCC8;
  background: linear-gradient(180deg, var(--sky-100), #FFF8E7);
  box-shadow: inset 0 0 0 2px #fff;
}
.escenario--casa .ventana::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 100%; background: #E8DCC8;
}
.escenario--casa .escenario__koda { bottom: 18px; }


/* --- parque --- */
.escenario--parque { background: linear-gradient(180deg, var(--sky-100) 0%, #DFF3FF 52%, #BFE6C4 52%, #A6DCAE 100%); }
.escenario--parque .deco--sol   { top: 10px; right: 18px; font-size: 2.6rem; animation: brillar 4s ease-in-out infinite; }
.escenario--parque .deco--nube1 { top: 26px; left: 22px; font-size: 2rem; animation: flotar 9s ease-in-out infinite; }
.escenario--parque .deco--nube2 { top: 58px; left: 128px; font-size: 1.5rem; animation: flotar 12s ease-in-out infinite reverse; }
/* Los árboles apoyan en la línea del césped: están DETRÁS, por eso se ven algo
   menores que Koda, que está delante. Antes medían 45 px y parecían setas. */
.escenario--parque .deco--arbol1 { bottom: 96px; left: 4px;  font-size: 7rem; z-index: 1; }
.escenario--parque .deco--arbol2 { bottom: 100px; right: 6px; font-size: 5.6rem; z-index: 1; }
.escenario--parque .deco--pelota { bottom: 18px; right: 54px; width: 26px; height: 26px; z-index: 4;
  animation: botar 1.6s ease-in-out infinite; }
.escenario--parque .escenario__koda { bottom: 14px; }

/* --- supermercado --- */
.escenario--super { background: linear-gradient(180deg, #FFF9F2 0%, #FFF4E8 62%, #E9E4DC 62%, #DED8CF 100%); }
.escenario--super .balda {
  position: absolute; left: 14px; right: 14px; height: 10px; border-radius: 4px;
  background: linear-gradient(180deg, #F2E6D6, #D9C6AE);
}
.escenario--super .balda--1 { top: 62px; }
.escenario--super .balda--2 { top: 112px; }
.escenario--super .genero { position: absolute; display: flex; gap: 14px; font-size: 1.9rem; }
.escenario--super .genero--1 { top: 22px; left: 22px; }
.escenario--super .genero--2 { top: 72px; left: 30px; }
.escenario--super .deco--cartel {
  top: 14px; right: 18px; font-size: .64rem; font-weight: 800; color: var(--mint-600);
  background: #fff; border: 1.5px solid var(--mint-200); border-radius: var(--r-pill); padding: 4px 10px;
}
/* El carro le llega a Koda por el lomo, como uno de verdad. */
.escenario--super .deco--carro { bottom: 14px; left: 18px; font-size: 4.4rem; z-index: 4; }
.escenario--super .escenario__koda { bottom: 14px; }

/* --- tienda de ropa: probador --- */
.escenario--tienda { background: linear-gradient(180deg, #FBF6FF 0%, #F4EAFF 60%, #E7D7C6 60%, #DFCDBA 100%); }
.escenario--tienda .cortina {
  position: absolute; top: 0; bottom: 0; width: 54px;
  background: repeating-linear-gradient(90deg, var(--lav-200) 0 9px, var(--lav-300) 9px 18px);
  opacity: .85;
}
.escenario--tienda .cortina--izq { left: 0; border-radius: 0 10px 10px 0; }
.escenario--tienda .cortina--der { right: 0; border-radius: 10px 0 0 10px; }
.escenario--tienda .barra-ropa {
  position: absolute; top: 26px; left: 60px; right: 60px; height: 6px;
  border-radius: 3px; background: #CBB9A6; box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
/* La ropa cuelga de la barra, no flota: arranca justo debajo y es de talla
   creíble al lado de Koda. */
.escenario--tienda .deco--percha1 { top: 30px; left: 72px;  font-size: 3.2rem; }
.escenario--tienda .deco--percha2 { top: 30px; right: 78px; font-size: 3rem; }
.escenario--tienda .escenario__koda { bottom: 14px; }

/* --- baño --- */
.escenario--bano { background: linear-gradient(180deg, #F0FAFF 0%, #E3F4FF 58%, #DDEBF2 58%, #CFE2EC 100%); }
.escenario--bano .azulejos {
  position: absolute; top: 0; left: 0; right: 0; height: 58%;
  background-image: linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px),
                    linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 34px 34px;
}
.escenario--bano .deco--pompa1 { top: 40px; left: 60px; font-size: 1.1rem; animation: flotar 6s ease-in-out infinite; }
.escenario--bano .deco--pompa2 { top: 26px; right: 76px; font-size: .9rem; animation: flotar 8s ease-in-out infinite reverse; }
.escenario--bano .deco--pato   { bottom: 26px; right: 44px; font-size: 1.6rem; animation: botar 2.4s ease-in-out infinite; }

@keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes brillar { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes botar  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* --- el viaje de un sitio a otro --- */
.viaje {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; gap: 8px; align-content: center;
  background: rgba(255,249,252,.94); backdrop-filter: blur(3px);
  animation: viaje-entra .22s var(--ease-out);
}
.viaje__emoji { font-size: 3.4rem; animation: trotar .5s ease-in-out infinite alternate; }
.viaje__texto { font-family: var(--display); font-weight: 800; color: var(--lav-700); }
.viaje__huellas { font-size: 1rem; letter-spacing: 6px; opacity: .55; }
@keyframes viaje-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes trotar { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-12px) rotate(5deg); } }

.escena { animation: escena-entra .4s var(--ease-out); }
@keyframes escena-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Muebles de la casa · dibujados por piezas, con su color (--c, --c2, --c3)
   Koda mide 132 px: todo está a esa escala. Lo que va detrás de ella lleva
   z-index 1-2; lo que va delante (borde de la cama, comedero, planta), 4-5.
   ========================================================================== */

.escenario--casa { height: 250px; }
.escenario--casa .escenario__koda { bottom: 18px; }
/* Con cama: dentro de ella va más arriba, entre el fondo y el borde de la
   cama; cuando se baja a pasear, por el suelo y por delante de la cama. */
.escenario--casa.tiene-cama .escenario__koda { z-index: 5; }
.escenario--casa.tiene-cama .escenario__koda.en-cama { bottom: calc(40px * var(--sc)); z-index: 3; }
.escenario--casa.tiene-cama--real .escenario__koda.en-cama { bottom: calc(54px * var(--sc)); }

/* El salón va en tres filas con perspectiva: lo de la pared (lámpara, sofá,
   tele) más al fondo, la cama en medio y lo pequeño (comedero, juguete,
   planta) delante. Aquí va la altura de cada fila y el tamaño; dónde cae cada
   cosa a lo ancho lo calcula pet.js (colocaCasa) según el ancho real, para
   que se repartan a los lados de la cama en vez de amontonarse en las
   esquinas. --s escala los muebles y --sc la cama y a Koda. */
.escenario--casa { --s: 1; --sc: 1; --fondo: 64px; }
.escenario--casa .koda { width: calc(132px * var(--sc)); height: calc(132px * var(--sc)); }
.m-lampara, .m-sofa, .m-mueble-tv, .m-tele, .m-radio, .m-tocadiscos, .m-comedero, .m-bebedero, .m-planta, .m-juguete {
  transform: scale(var(--s)); transform-origin: left bottom;
}

.escenario--casa [class^="m-"] { position: absolute; }
.escenario--casa [class^="m-"] i { position: absolute; display: block; }

/* --- alfombra --- */
.m-alfombra {
  left: 50%; bottom: 2px; transform: translateX(-50%) scale(var(--sc)); transform-origin: center bottom; z-index: 1;
  width: 290px; height: 50px; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--c2) 0 48%, var(--c) 49% 60%, var(--c2) 61% 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

/* de rayas, con flecos */
.m-alfombra--rayas {
  width: 268px; height: 44px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, var(--c) 0 24px, var(--c2) 24px 48px);
}
.m-alfombra--rayas::before, .m-alfombra--rayas::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 8px;
  background: repeating-linear-gradient(180deg, var(--c3) 0 2px, transparent 2px 5px);
}
.m-alfombra--rayas::before { left: -7px; }
.m-alfombra--rayas::after  { right: -7px; }
/* huella: almohadilla y cuatro deditos, aplastados por la perspectiva del suelo */
.m-alfombra--huella {
  width: 230px; height: 64px; border-radius: 0; box-shadow: none;
  background: radial-gradient(64px 22px at 115px 42px, var(--c) 97%, transparent 100%),
              radial-gradient(18px 10px at 46px 20px, var(--c) 95%, transparent 100%),
              radial-gradient(18px 10px at 88px 10px, var(--c) 95%, transparent 100%),
              radial-gradient(18px 10px at 142px 10px, var(--c) 95%, transparent 100%),
              radial-gradient(18px 10px at 184px 20px, var(--c) 95%, transparent 100%);
}
/* corazón */
.m-alfombra--corazon {
  width: 200px; height: 66px; border-radius: 0; box-shadow: none;
  background: radial-gradient(ellipse at 50% 42%, var(--c2) 0 38%, var(--c) 40%);
  clip-path: path('M100 64C60 48 4 34 6 16 8 2 40-4 70 4 84 8 94 14 100 20 106 14 116 8 130 4 160-4 192 2 194 16 196 34 140 48 100 64Z');
}

/* --- lámpara de pie, junto al sofá --- */
.m-lampara { left: 8px; bottom: var(--fondo); width: 58px; height: 128px; z-index: 1; }
/* la luz solo se ve encendida (Koda la enciende y la apaga; de noche, ya lo está) */
.m-lampara__luz {
  left: -34px; top: -26px; width: 126px; height: 126px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,232,160,.75), transparent 66%);
  opacity: 0; transition: opacity .5s ease;
}
.m-lampara.encendida .m-lampara__luz { opacity: 1; }
.m-lampara.encendida .m-lampara__pantalla { filter: brightness(1.18) saturate(1.1); }

/* lámpara de lava: las burbujas suben y bajan cuando está encendida */
.m-lampara--lava { width: 34px; height: 88px; }
.m-lampara--lava .m-lampara__luz { left: -46px; top: -34px; }
.m-lava__cristal {
  left: 7px; bottom: 22px; width: 20px; height: 54px; overflow: hidden;
  border-radius: 10px 10px 6px 6px; border: 2px solid rgba(255,255,255,.7);
  background: linear-gradient(180deg, var(--c2), #FFF6EE);
}
.m-lava__cristal b { position: absolute; border-radius: 50%; background: var(--c); }
.m-lava__cristal b:nth-child(1) { left: 3px; bottom: 4px; width: 11px; height: 13px; }
.m-lava__cristal b:nth-child(2) { left: 7px; bottom: 24px; width: 8px; height: 9px; }
.m-lava__cristal b:nth-child(3) { left: 2px; bottom: 36px; width: 6px; height: 7px; }
.m-lampara--lava.encendida .m-lava__cristal b { animation: lava-sube 3.4s ease-in-out infinite alternate; }
.m-lampara--lava.encendida .m-lava__cristal b:nth-child(2) { animation-delay: -1.2s; }
.m-lampara--lava.encendida .m-lava__cristal b:nth-child(3) { animation-delay: -2.4s; animation-direction: alternate-reverse; }
@keyframes lava-sube { to { transform: translateY(-24px) scale(1.15, .9); } }
.m-lava__base {
  left: 3px; bottom: 0; width: 28px; height: 24px; border-radius: 3px; background: #6E5F51;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

/* farolillo de papel: cuelga del techo */
.m-lampara--farolillo { top: 0; bottom: auto; width: 46px; height: 96px; transform-origin: left top; }
.m-lampara--farolillo .m-lampara__luz { left: -40px; top: -6px; }
.m-farolillo__cuerda { left: 22px; top: 0; width: 2px; height: 44px; background: #8C7A69; }
.m-lampara__emoji { position: absolute; left: 0; font-size: 2.7rem; line-height: 1; transition: filter .5s ease; }
.m-lampara--farolillo .m-lampara__emoji { top: 40px; }
.m-lampara.encendida .m-lampara__emoji { filter: drop-shadow(0 0 8px #FFE7A0) brightness(1.12); }

/* lámpara seta: en el suelo, junto al sofá */
.m-lampara--seta { width: 50px; height: 48px; }
.m-lampara--seta .m-lampara__luz { left: -38px; top: -40px; }
.m-lampara--seta .m-lampara__emoji { bottom: 0; }
.m-lampara__pantalla {
  left: 3px; top: 0; width: 52px; height: 38px; background: var(--c);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.m-lampara__palo { left: 27px; top: 36px; width: 4px; height: 84px; background: #8C7A69; border-radius: 2px; }
.m-lampara__pie  { left: 11px; bottom: 0; width: 36px; height: 9px; border-radius: 50%; background: #6E5F51; }

/* --- sofá --- */
.m-sofa { left: 58px; bottom: var(--fondo); width: 148px; height: 92px; z-index: 1; }
.m-sofa__respaldo {
  left: 14px; right: 14px; top: 0; height: 58px; border-radius: 22px 22px 8px 8px;
  background: var(--c); box-shadow: inset 0 -6px 0 var(--c3);
}
.m-sofa__cojin { top: 14px; width: 52px; height: 36px; border-radius: 13px; background: var(--c2); }
.m-sofa__cojin--1 { left: 26px; }
.m-sofa__cojin--2 { right: 26px; }
.m-sofa__asiento {
  left: 10px; right: 10px; top: 48px; height: 28px; border-radius: 11px;
  background: var(--c2); box-shadow: inset 0 -6px 0 var(--c);
}
.m-sofa__brazo {
  top: 28px; width: 26px; height: 52px; border-radius: 13px;
  background: var(--c); box-shadow: inset 0 -6px 0 var(--c3);
}
.m-sofa__brazo--izq { left: 0; }
.m-sofa__brazo--der { right: 0; }
.m-sofa__pata { bottom: 0; width: 8px; height: 14px; background: #7A6250; border-radius: 2px; }
.m-sofa__pata--izq { left: 16px; }
.m-sofa__pata--der { right: 16px; }

/* sofá Chester: respaldo capitoné con botones, brazos enrollados y patas oscuras */
.m-sofa--chester .m-sofa__respaldo {
  border-radius: 12px 12px 6px 6px;
  background: radial-gradient(circle, var(--c3) 0 1.8px, transparent 2.4px) 4px 6px / 15px 13px, var(--c);
}
.escenario--casa .m-sofa--chester .m-sofa__cojin { display: none; }
.m-sofa--chester .m-sofa__brazo { top: 22px; height: 58px; border-radius: 20px 20px 10px 10px; }
.m-sofa--chester .m-sofa__pata { width: 7px; height: 10px; background: #4B3A2E; border-radius: 0 0 3px 3px; }

/* sillón: de una plaza, con el respaldo alto y redondo */
.m-sofa--sillon { width: 96px; }
.escenario--casa .m-sofa--sillon .m-sofa__cojin--2 { display: none; }
.m-sofa--sillon .m-sofa__cojin--1 { left: 50%; width: 40px; transform: translateX(-50%); }
.m-sofa--sillon .m-sofa__respaldo { top: -10px; height: 68px; border-radius: 30px 30px 8px 8px; }

/* puf gigante: un saco mullido con su hundido */
.m-sofa--puf { width: 92px; height: 66px; }
.escenario--casa .m-sofa--puf i { display: none; }
.m-sofa--puf::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 48% 52% 42% 46% / 58% 56% 44% 42%;
  background: radial-gradient(ellipse at 40% 30%, var(--c2), var(--c) 60%, var(--c3));
  box-shadow: 0 6px 10px rgba(0,0,0,.12);
}
.m-sofa--puf::after {
  content: ""; position: absolute; left: 30%; top: 24%; width: 36%; height: 20%;
  border-radius: 50%; background: var(--c3); opacity: .35;
}

/* --- tele (o radio) sobre su mueble --- */
.m-mueble-tv {
  right: 16px; bottom: var(--fondo); width: 112px; height: 36px; z-index: 1; border-radius: 6px;
  background: var(--c); box-shadow: inset 0 -6px 0 var(--c3), inset 0 0 0 2px var(--c3);
}
.m-tele { right: 22px; bottom: calc(var(--fondo) + 36px * var(--s)); width: 100px; height: 68px; z-index: 1; }
.m-tele__pantalla {
  left: 0; right: 0; top: 0; bottom: 8px; border-radius: 8px;
  background: linear-gradient(135deg, #3E3854 0%, #2A2538 52%, #4D4668 100%);
  border: 4px solid #1F1B2B;
}
.m-tele__pantalla::after {
  content: ""; position: absolute; left: 12px; top: 8px; width: 36px; height: 6px;
  border-radius: 3px; background: rgba(255,255,255,.18); transform: rotate(-12deg);
}
.m-tele__pie { left: 50%; bottom: 0; transform: translateX(-50%); width: 32px; height: 9px; background: #1F1B2B; border-radius: 3px; }

/* encendida: la pantalla se ilumina y sale un perrito corriendo de lado a lado */
.m-tele.encendida .m-tele__pantalla {
  background: linear-gradient(180deg, #9ED8FF 0 62%, #A8E6B8 62%);
  animation: tele-parpadea 1.1s ease-in-out infinite alternate;
}
.m-tele.encendida .m-tele__pantalla::before {
  content: "🐕"; position: absolute; left: 6%; bottom: 8%; font-size: 1.3rem; line-height: 1;
  animation: tele-perro 2.2s ease-in-out infinite alternate;
}
@keyframes tele-parpadea { to { filter: brightness(1.12); } }
@keyframes tele-perro { from { transform: translateX(0) scaleX(-1); } to { transform: translateX(46px) scaleX(-1); } }

/* tele antigua: caja de madera, pantalla abombada, botones y antena de cuernos */
.m-tele--retro {
  width: 96px; height: 74px; border-radius: 12px;
  background: var(--c); box-shadow: inset 0 -6px 0 var(--c3);
}
.m-tele--retro .m-tele__pantalla { left: 8px; right: 30px; top: 8px; bottom: 14px; border-radius: 16px / 20px; border-width: 3px; }
.m-tele--retro.encendida .m-tele__pantalla::before { font-size: 1.05rem; }
.m-tele--retro.encendida .m-tele__pantalla::before { animation-name: tele-perro-retro; }
@keyframes tele-perro-retro { from { transform: translateX(0) scaleX(-1); } to { transform: translateX(28px) scaleX(-1); } }
.m-tele__botones {
  right: 9px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c3); box-shadow: 0 20px 0 var(--c3);
}
.m-tele__antena { left: 30px; top: -26px; width: 26px; height: 28px; }
.m-tele__antena::before, .m-tele__antena::after {
  content: ""; position: absolute; bottom: 0; width: 3px; height: 30px; border-radius: 2px;
  background: #4B4259; transform-origin: bottom;
}
.m-tele__antena::before { left: 6px; transform: rotate(-26deg); }
.m-tele__antena::after  { right: 6px; transform: rotate(26deg); }

.m-radio {
  right: 35px; bottom: calc(var(--fondo) + 36px * var(--s)); width: 74px; height: 46px; z-index: 1; border-radius: 11px;
  background: var(--c); box-shadow: inset 0 -5px 0 var(--c3);
}
.m-radio__rejilla {
  left: 9px; top: 9px; width: 32px; height: 28px; border-radius: 6px;
  background: repeating-linear-gradient(0deg, var(--c3) 0 2px, transparent 2px 5px);
}
.m-radio__dial { right: 11px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--c2); border: 3px solid var(--c3); }
.m-radio__antena { right: 16px; top: -26px; width: 3px; height: 30px; background: #8C7A69; transform: rotate(18deg); }

/* suena: el dial se ilumina y salen notas */
.m-radio.sonando .m-radio__dial { background: #FFE7A0; box-shadow: 0 0 8px #FFE7A0; }
.m-radio.sonando::before, .m-radio.sonando::after,
.m-tocadiscos.sonando::before, .m-tocadiscos.sonando::after {
  content: "♪"; position: absolute; top: -8px; left: 12px; font-size: 1.2rem; font-weight: 800; line-height: 1;
  color: var(--c3); animation: nota-sube 1.6s ease-out infinite;
}
.m-radio.sonando::after, .m-tocadiscos.sonando::after { content: "♫"; left: 46px; animation-delay: .8s; }
@keyframes nota-sube {
  0%   { transform: translateY(0) rotate(-10deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-38px) rotate(14deg); opacity: 0; }
}

/* tocadiscos: el disco (un círculo visto de lado) gira mientras suena */
.m-tocadiscos {
  right: 30px; bottom: calc(var(--fondo) + 36px * var(--s)); width: 84px; height: 30px; z-index: 1;
  border-radius: 8px; background: var(--c); box-shadow: inset 0 -5px 0 var(--c3);
}
.m-tocadiscos__disco { left: 10px; top: -36px; width: 54px; height: 54px; transform: scaleY(.34); }
.m-tocadiscos__disco b {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #E85A6B 0 15%, transparent 16%),
              conic-gradient(#2F2A3A, #5A516B, #2F2A3A 25%, #5A516B 50%, #2F2A3A 75%, #5A516B);
}
.m-tocadiscos.sonando .m-tocadiscos__disco b { animation: disco-gira 1.1s linear infinite; }
@keyframes disco-gira { to { transform: rotate(360deg); } }
.m-tocadiscos__brazo {
  right: 9px; top: -16px; width: 4px; height: 24px; border-radius: 2px; background: #C9CED6;
  transform: rotate(32deg); transform-origin: bottom;
}

/* --- en la pared --- */
.m-pared { right: 40px; top: 6px; z-index: 1; line-height: 0;
  transform: scale(var(--s)); transform-origin: left top; }
/* los cuadros, dibujados (pet.js, CUADROS): colgados de su clavo, con sombra en la pared */
.cuadro-dibujo { display: block; width: 88px; height: auto; filter: drop-shadow(0 3px 3px rgba(75, 66, 89, .2)); }
.m-pared--cuadro .cuadro-dibujo { width: 64px; }
.articulo__emoji--cuadro { display: grid; place-items: center; height: 1.7rem; }
.articulo__emoji--cuadro .cuadro-dibujo { width: auto; height: 2.4rem; filter: none; margin-top: -.35rem; }

/* --- cama 1 · camita de felpa (redonda, mullida) --- */
.m-felpa { left: 50%; transform: translateX(-50%) scale(var(--sc)); transform-origin: center bottom; width: 210px; }
.m-felpa--fondo {
  bottom: 16px; height: 86px; z-index: 2; border-radius: 50%;
  background: linear-gradient(170deg, var(--c2), var(--c));
  box-shadow: 0 9px 18px rgba(0,0,0,.14);
}
.m-felpa--fondo i {
  left: 15px; right: 15px; top: 12px; bottom: 18px; border-radius: 50%;
  background: linear-gradient(170deg, #FFF7FA, var(--c2));
}
.m-felpa--frente {
  bottom: 16px; height: 42px; z-index: 4;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(170deg, var(--c2), var(--c));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45);
}

/* --- cama · cesta de mimbre (el color es el del cojín) --- */
.m-cesta { left: 50%; transform: translateX(-50%) scale(var(--sc)); transform-origin: center bottom; width: 214px; }
.m-cesta--fondo {
  bottom: 16px; height: 84px; z-index: 2; border-radius: 50%;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 3px, transparent 3px 9px),
              repeating-linear-gradient(-45deg, rgba(0,0,0,.07) 0 3px, transparent 3px 9px), #D6A465;
  box-shadow: 0 9px 18px rgba(0,0,0,.14), inset 0 0 0 5px #C48F55;
}
.m-cesta--fondo i {
  left: 16px; right: 16px; top: 12px; bottom: 16px; border-radius: 50%;
  background: linear-gradient(170deg, var(--c2), var(--c));
}
.m-cesta--frente {
  bottom: 16px; height: 44px; z-index: 4;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 3px, transparent 3px 9px),
              repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 3px, transparent 3px 9px), #D6A465;
  box-shadow: inset 0 4px 0 #E8BF86;
}

/* --- cama 2 · cama nube (bultos esponjosos) --- */
.m-nube { left: 50%; transform: translateX(-50%) scale(var(--sc)); transform-origin: center bottom; width: 230px; }
.m-nube i {
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #fff 0%, #fff 30%, var(--c2) 80%);
  box-shadow: 0 5px 12px rgba(80,120,170,.18);
}
.m-nube--fondo { bottom: 22px; height: 96px; z-index: 2; }
.m-nube--fondo i:nth-child(1) { left: 0;     bottom: 0;  width: 74px; height: 74px; }
.m-nube--fondo i:nth-child(2) { left: 42px;  bottom: 22px; width: 84px; height: 84px; }
.m-nube--fondo i:nth-child(3) { left: 102px; bottom: 30px; width: 90px; height: 90px; }
.m-nube--fondo i:nth-child(4) { left: 156px; bottom: 16px; width: 74px; height: 74px; }
.m-nube--fondo i:nth-child(5) { left: 64px;  bottom: 0;  width: 110px; height: 60px; }
.m-nube--frente { bottom: 10px; height: 42px; z-index: 4; }
.m-nube--frente i:nth-child(1) { left: 4px;   bottom: 0; width: 62px; height: 40px; }
.m-nube--frente i:nth-child(2) { left: 56px;  bottom: 0; width: 66px; height: 42px; }
.m-nube--frente i:nth-child(3) { left: 112px; bottom: 0; width: 64px; height: 41px; }
.m-nube--frente i:nth-child(4) { left: 164px; bottom: 0; width: 60px; height: 38px; }

/* --- cama 3 · cama con dosel (postes, cabecero y tela arriba) --- */
.m-dosel { left: 50%; transform: translateX(-50%) scale(var(--sc)); transform-origin: center bottom; width: 204px; }
.m-dosel--fondo { bottom: 12px; height: 196px; z-index: 2; }
.m-dosel__tela {
  left: -4px; right: -4px; top: 0; height: 40px;
  background: repeating-linear-gradient(90deg, var(--c2) 0 14px, var(--c) 14px 16px);
  border-radius: 6px 6px 50% 50% / 6px 6px 40% 40%;
  box-shadow: 0 6px 10px rgba(0,0,0,.10);
}
.m-dosel__cabecero {
  left: 18px; right: 18px; bottom: 58px; height: 82px;
  border-radius: 34px 34px 6px 6px; background: var(--c);
  box-shadow: inset 0 0 0 5px var(--c3);
}
.m-dosel__poste { bottom: 30px; width: 9px; height: 152px; background: #8C6E52; border-radius: 3px; }
.m-dosel__poste--izq { left: 4px; }
.m-dosel__poste--der { right: 4px; }
.m-dosel__colchon {
  left: 8px; right: 8px; bottom: 36px; height: 30px; border-radius: 11px;
  background: #fff; box-shadow: inset 0 -5px 0 #ECE4F5;
}
.m-dosel--frente { bottom: 6px; height: 62px; z-index: 4; }
.m-dosel__manta {
  left: 6px; right: 6px; bottom: 12px; height: 36px; border-radius: 13px 13px 9px 9px;
  background: var(--c); box-shadow: inset 0 5px 0 var(--c2), inset 0 -5px 0 var(--c3);
}
.m-dosel--frente .m-dosel__poste { bottom: 0; height: 58px; width: 11px; background: #7A5E45; }

/* --- comedero --- */
.m-comedero { left: 30px; bottom: 8px; width: 58px; height: 26px; z-index: 5; }
.m-comedero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  border-radius: 7px 7px 24px 24px; background: var(--c);
  box-shadow: inset 0 4px 0 var(--c2), 0 3px 5px rgba(0,0,0,.12);
}
.m-comedero i {
  left: 9px; right: 9px; top: 0; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, #B07A4A 0 3px, transparent 4px),
              radial-gradient(circle at 60% 50%, #9B6A3E 0 3px, transparent 4px),
              radial-gradient(circle at 80% 35%, #B07A4A 0 3px, transparent 4px), #8A5B34;
}

/* comedero de acero, perrito (con orejas y carita) y de flores */
.m-comedero--metal::before {
  background: linear-gradient(180deg, #F4F7FA, #A9B4BF);
  box-shadow: inset 0 4px 0 #FFFFFF, 0 3px 5px rgba(0,0,0,.12);
}
.m-comedero--perrito::before {
  background: radial-gradient(circle at 40% 52%, #3A2B25 0 1.6px, transparent 2.2px),
              radial-gradient(circle at 60% 52%, #3A2B25 0 1.6px, transparent 2.2px),
              radial-gradient(4px 3px at 50% 72%, #3A2B25 95%, transparent), var(--c);
}
.m-comedero--perrito::after {
  content: ""; position: absolute; left: -5px; right: -5px; top: 5px; height: 16px;
  background: radial-gradient(7px 10px at 7px 9px, var(--c3) 95%, transparent),
              radial-gradient(7px 10px at calc(100% - 7px) 9px, var(--c3) 95%, transparent);
}
.m-comedero--flores::before {
  background: radial-gradient(circle at 22% 62%, #FFD36B 0 1.2px, #fff 1.6px 3px, transparent 3.5px),
              radial-gradient(circle at 50% 72%, #FFD36B 0 1.2px, #fff 1.6px 3px, transparent 3.5px),
              radial-gradient(circle at 78% 62%, #FFD36B 0 1.2px, #fff 1.6px 3px, transparent 3.5px), var(--c);
}

/* --- bebedero: como el comedero, pero con agua --- */
.m-bebedero { left: 96px; bottom: 8px; width: 54px; height: 24px; z-index: 5; }
.m-bebedero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  border-radius: 7px 7px 22px 22px; background: var(--c);
  box-shadow: inset 0 4px 0 var(--c2), 0 3px 5px rgba(0,0,0,.12);
}
.m-bebedero i {
  left: 7px; right: 7px; top: 2px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at 32% 40%, #fff 0 2px, transparent 3px), linear-gradient(180deg, #CDEBFF, #7CC4F2);
}
.m-bebedero--metal::before {
  background: linear-gradient(180deg, #F4F7FA, #A9B4BF);
  box-shadow: inset 0 4px 0 #FFFFFF, 0 3px 5px rgba(0,0,0,.12);
}
.m-bebedero.bebiendo i { animation: m-onda .3s ease-in-out infinite; }
@keyframes m-onda { 50% { transform: scale(.9, .75); } }
.m-bebedero--gota::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 0 50% 50% 50%; background: #fff; opacity: .85; transform: rotate(45deg);
}
/* fuente: con su torre y un chorrito de agua que no para */
.m-bebedero--fuente { width: 62px; height: 46px; }
.m-bebedero--fuente::after {
  content: ""; position: absolute; right: 9px; bottom: 12px; width: 12px; height: 28px;
  border-radius: 6px 6px 2px 2px; background: var(--c3);
}
/* el agua, en el cuenco (abajo), y el chorro sale de lo alto de la torre y cae en él */
.m-bebedero--fuente i { top: auto; bottom: 10px; right: 20px; }
.m-bebedero--fuente i::before {
  content: ""; position: absolute; right: 0; top: -20px; width: 15px; height: 20px;
  border: 3px solid #7CC4F2; border-color: #7CC4F2 transparent transparent #7CC4F2; border-radius: 15px 0 0 0;
  animation: chorro 1.2s ease-in-out infinite;
}
@keyframes chorro { 50% { opacity: .55; } }

/* --- planta y juguete --- */
.m-planta { right: 8px; bottom: 2px; font-size: 4.6rem; line-height: 1; z-index: 5;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.m-juguete { right: 126px; bottom: 8px; z-index: 5; line-height: 1; }
.m-juguete--peluche { font-size: 2.7rem; }
.m-juguete.pelota--bola { width: 28px; height: 28px; }

/* --- paleta de colores de muebles y ropa --- */
.paleta {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  display: grid; gap: 8px;
}
.paleta__titulo { font-size: .8rem; font-weight: 800; color: var(--ink-2); }
.paleta__muestras { display: flex; flex-wrap: wrap; gap: 9px; }
.muestra {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--m, #fff);
  border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line), 0 2px 5px rgba(0,0,0,.1);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.muestra:active { transform: scale(.9); }
.muestra.is-on { box-shadow: 0 0 0 3px var(--lav-500), 0 3px 8px rgba(0,0,0,.15); transform: scale(1.08); }
.muestra--original {
  display: grid; place-items: center; font-size: .95rem; font-weight: 800; color: var(--ink-3);
  background: conic-gradient(#FF8FAE, #FFD36B, #6FCFA6, #6BB8ED, #B596F0, #FF8FAE);
}
.muestra--original::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
}
.muestra--original { position: relative; isolation: isolate; }
.muestra--original span { position: relative; z-index: 1; }

/* ==========================================================================
   Vida propia de Koda en los escenarios
   ========================================================================== */

.escenario__koda { transition: left 1.6s cubic-bezier(.45,.05,.4,1), bottom .45s var(--ease); }
/* se da la vuelta hacia donde va (el centrado sigue en el translate) */
.escenario__koda.gira { transform: translateX(-50%) scaleX(-1); }
/* en el espejo no hay translate que conservar */
.espejo__marco .koda-vive { transition: transform .5s var(--ease); }
.espejo__marco .koda-vive.gira { transform: scaleX(-1); }

/* trote al pasear: sube y baja con cada paso */
.koda-vive.anda .koda { animation: koda-paso .3s ease-in-out infinite; }
.koda-vive.anda .koda__tail { animation-duration: .4s; }
@keyframes koda-paso {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-6px) rotate(1.5deg); }
}

/* inclina la cabeza mirando algo */
.koda-vive.mira .koda__head { animation: koda-tilt 1.3s ease-in-out 1; }

/* sacudida rápida de oreja, como cuando oye algo */
.koda-vive.oreja .koda__ear-l { animation: koda-flick .32s ease-in-out 2; }
@keyframes koda-flick { 0%,100% { transform: rotate(0deg); } 45% { transform: rotate(-24deg); } }

/* hocico al suelo olisqueando */
.koda-vive.olfatea .koda__head { animation: koda-olfatea .45s ease-in-out 3; }
@keyframes koda-olfatea {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(7px) rotate(7deg); }
}

/* bostezo: boca abierta, ojos que se cierran y estirón */
.koda-vive.bosteza .koda__mouth--smile { opacity: 0; }
.koda-vive.bosteza .koda__mouth--open  { opacity: 1; }
.koda-vive.bosteza .koda__eyelid { animation: none; transform: scaleY(1); }
.koda-vive.bosteza .koda__head { animation: koda-bostezo 1.5s ease-in-out 1; }
@keyframes koda-bostezo {
  0%,100% { transform: translateY(0) rotate(0deg); }
  40%     { transform: translateY(-4px) rotate(-6deg); }
}

/* doble parpadeo, que un parpadeo regular delata al dibujo */
.koda-vive.parpadeo .koda__eyelid { animation: koda-guino .5s ease-in-out 2; }
@keyframes koda-guino { 0%,100% { transform: scaleY(0); } 45%,55% { transform: scaleY(1); } }

/* ante el espejo: se gira y se mira con orgullo */
.koda-vive.posando .koda__head { animation: koda-tilt 1.6s ease-in-out 1; }
.koda-vive.posando .koda__sparkle { opacity: 1; animation: koda-sparkle 1.3s ease-in-out 1; }

/* come y bebe agachada: la cabeza baja hasta el cuenco (que tiene a las patas)
   y el cuerpo se encoge, como al inclinarse; comiendo mastica y bebiendo
   saca la lengua a lengüetazos */
.koda-vive.come .koda__cabeza-pos, .koda-vive.bebe .koda__cabeza-pos { transform: translate(0, 52px) scale(.94); }
.koda-vive.come .koda__body, .koda-vive.come .koda__collar, .koda-vive.come .koda__acc--medio,
.koda-vive.bebe .koda__body, .koda-vive.bebe .koda__collar, .koda-vive.bebe .koda__acc--medio {
  animation: none; transform: scale(1.04, .9); transition: transform .5s ease, opacity .35s ease;
}
.koda-vive.come .koda__tail, .koda-vive.bebe .koda__tail { animation-duration: .45s; }
.koda-vive.come .koda__head { animation: koda-mastica .32s ease-in-out infinite; }
@keyframes koda-mastica { 50% { transform: translateY(3px) rotate(-2deg); } }
.koda-vive.bebe .koda__tongue { opacity: 1; animation: koda-lame .28s ease-in-out infinite; }
@keyframes koda-lame { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.3); } }

/* viendo la tele: ladea la cabeza despacio, embobada */
.koda-vive.viendo .koda__head { animation: koda-tilt 2.6s ease-in-out infinite; }
/* con música: mueve la cabeza al ritmo y el rabo contento */
.koda-vive.baila .koda__head { animation: koda-baila .5s ease-in-out infinite alternate; }
.koda-vive.baila .koda__tail { animation-duration: .4s; }
@keyframes koda-baila { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-2px); } }

/* brinco al subirse a la cama */
.koda-vive.brinca .koda { animation: koda-brinco .5s ease-out 1; }
@keyframes koda-brinco { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-16px); } }

/* come: la cabeza al cuenco y arriba, varias veces; el pienso se menea */
.koda-vive.come .koda__head { animation: koda-olfatea .4s ease-in-out 6; }
.m-comedero.comiendo i { animation: m-pienso .4s ease-in-out 6; }
@keyframes m-pienso { 0%,100% { transform: none; } 50% { transform: translateY(1px) scaleX(.9); } }

/* el juguete bota cuando juega con él (conserva su escala) */
.m-juguete.bota { animation: m-bota .5s ease-out 2; }
@keyframes m-bota {
  0%,100% { transform: scale(var(--s)) translateY(0) rotate(0deg); }
  45%     { transform: scale(var(--s)) translateY(-22px) rotate(-24deg); }
}

/* vuelta sobre sí misma persiguiéndose la cola (conserva el centrado) */
.escenario__koda.persigue { animation: koda-persigue .95s cubic-bezier(.45,.05,.4,1) 1; }
@keyframes koda-persigue {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .escenario__koda, .koda-vive .koda, .m-juguete.bota, .m-comedero.comiendo i, .m-bebedero.bebiendo i,
  .m-tele.encendida .m-tele__pantalla, .m-tele.encendida .m-tele__pantalla::before, .m-lava__cristal b,
  .m-tocadiscos__disco b, .m-radio::before, .m-radio::after, .m-tocadiscos::before, .m-tocadiscos::after,
  .m-bebedero--fuente i::before { transition: none; animation: none !important; }
}

/* ==========================================================================
   El baño de Koda · bañera, esponja y alcachofa dibujadas
   ========================================================================== */

.ducha {
  position: relative; height: 340px; border-radius: var(--r-md); overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #EAF6FD 0 72%, #D9E7EF 72% 100%);
}
.ducha__pared {
  position: absolute; left: 0; right: 0; top: 0; height: 72%;
  background-image: linear-gradient(90deg, rgba(255,255,255,.85) 2px, transparent 2px),
                    linear-gradient(rgba(255,255,255,.85) 2px, transparent 2px);
  background-size: 38px 38px;
}

/* la bañera: el fondo detrás de Koda, el frente con sus patas delante */
.ducha__banera-fondo {
  position: absolute; left: 3%; width: 72%; bottom: 82px; height: 30px; z-index: 1;
  border-radius: 16px 16px 0 0; background: linear-gradient(#FFFFFF, #E4EEF4);
  box-shadow: inset 0 4px 0 #fff, inset 0 -6px 10px rgba(80,120,150,.12);
}
.ducha__koda {
  position: absolute; left: 39%; bottom: 70px; width: 170px; z-index: 2;
  transform: translateX(-50%);
}
.ducha__koda .koda { width: 170px; height: 170px; }
.ducha__agua {
  position: absolute; left: 5%; width: 68%; bottom: 96px; height: 16px; z-index: 3;
  border-radius: 50%; background: linear-gradient(180deg, rgba(140,200,235,.85), rgba(110,180,225,.7));
}
.ducha__banera-frente {
  position: absolute; left: 3%; width: 72%; bottom: 14px; height: 92px; z-index: 4;
  border-radius: 12px 12px 46px 46px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4F8 60%, #D6E3EC 100%);
  box-shadow: 0 8px 16px rgba(60,90,120,.18), inset 0 4px 0 #fff;
}
.ducha__banera-frente i {
  position: absolute; bottom: -10px; width: 18px; height: 16px; border-radius: 0 0 8px 8px;
  background: #C9B48A;
}
.ducha__banera-frente i:first-child { left: 18px; }
.ducha__banera-frente i:last-child  { right: 18px; }

/* zona sucia: justo la silueta de Koda por encima del borde */
.ducha__sucio {
  position: absolute; left: 39%; width: 118px; bottom: 112px; height: 124px; z-index: 5;
  transform: translateX(-50%); pointer-events: none;
}
.ducha .mancha {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,80,52,.9) 0 40%, rgba(110,80,52,.55) 62%, transparent 72%);
  transition: opacity .3s, transform .3s;
}
.ducha .mancha--fuera { opacity: 0; transform: scale(.5); }
.ducha .espuma {
  position: absolute; width: 42px; height: 38px; margin: -19px 0 0 -21px; border: 0; box-shadow: none;
  background:
    radial-gradient(circle at 30% 38%, #fff 0 9px, transparent 10px),
    radial-gradient(circle at 64% 32%, #fff 0 11px, transparent 12px),
    radial-gradient(circle at 48% 68%, #fff 0 10px, transparent 11px),
    radial-gradient(circle at 78% 70%, #fff 0 6px, transparent 7px);
  filter: drop-shadow(0 1px 1.5px rgba(40,90,130,.45));
  animation: espuma-sale .3s var(--ease-out);
  transition: opacity .45s, transform .45s;
}
.ducha .espuma--fuera { opacity: 0; transform: translateY(26px) scale(.7); }
@keyframes espuma-sale { from { transform: scale(.35); } to { transform: none; } }

/* balda de la esponja y gancho de la ducha */
.ducha__balda {
  position: absolute; right: 8px; top: 184px; width: 82px; height: 9px; z-index: 1;
  border-radius: 3px; background: linear-gradient(#E6D3B3, #C9B48A);
  box-shadow: 0 3px 4px rgba(0,0,0,.12);
}
.ducha__soporte {
  position: absolute; right: 30px; top: 22px; width: 26px; height: 10px; z-index: 1;
  border-radius: 5px; background: linear-gradient(#DDE4EA, #A9B6C1);
}

/* --- la esponja (amarilla, con su lado verde de frotar) --- */
.esponja {
  position: absolute; right: 18px; top: 140px; width: 64px; height: 44px; z-index: 6;
  border-radius: 12px; cursor: grab;
  background:
    radial-gradient(circle at 22% 62%, #D9A92A 0 2.5px, transparent 3px),
    radial-gradient(circle at 48% 78%, #D9A92A 0 2px, transparent 2.5px),
    radial-gradient(circle at 70% 58%, #D9A92A 0 3px, transparent 3.5px),
    radial-gradient(circle at 84% 82%, #D9A92A 0 2px, transparent 2.5px),
    linear-gradient(180deg, #4FB06F 0 26%, #FFD64F 26% 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.18);
  transition: transform .15s var(--ease), opacity .3s, filter .3s;
}
.esponja--apagada { opacity: .38; filter: grayscale(.7); }

/* --- la alcachofa de la ducha (cabeza cromada con agujeros y su mango) --- */
.alcachofa {
  position: absolute; right: 18px; top: 26px; width: 56px; height: 96px; z-index: 6;
  cursor: grab; transition: transform .15s var(--ease), opacity .3s, filter .3s;
}
.alcachofa__cabeza {
  position: absolute; left: 3px; top: 0; width: 50px; height: 50px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(255,255,255,0) 15px),
    radial-gradient(#6B7A88 1.6px, transparent 2px) 0 0 / 9px 9px,
    radial-gradient(circle at 35% 30%, #FFFFFF 0%, #DCE3E9 45%, #A3B0BC 100%);
  border: 3px solid #C3CDD6;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
.alcachofa__mango {
  position: absolute; left: 21px; top: 44px; width: 14px; height: 52px; border-radius: 7px;
  background: linear-gradient(90deg, #A3B0BC, #E7ECF0 50%, #A3B0BC);
}
.alcachofa--apagada { opacity: .38; filter: grayscale(.7); }

/* cogida: se pega al dedo por su centro (la esponja) o por la cabeza (la ducha) */
.esponja.cogida, .alcachofa.cogida { cursor: grabbing; z-index: 8; }
.esponja.cogida { transform: translate(-50%, -50%) rotate(-8deg) scale(1.08); }
.alcachofa.cogida { transform: translate(-50%, -25px) rotate(-14deg) scale(1.06); }

/* con la ducha en la mano sale un chorro que se ve caer */
.alcachofa.cogida::after {
  content: ""; position: absolute; left: -10px; top: 30px; width: 76px; height: 92px; z-index: -1;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(180deg, rgba(120,195,240,0) 0 7px, rgba(120,195,240,.55) 7px 11px);
  animation: chorro .3s linear infinite;
}
@keyframes chorro { from { background-position: 0 0; } to { background-position: 0 22px; } }

/* si tocas el fondo, la herramienta te llama para que la cojas */
.llama { animation: llama .5s var(--ease) 2; }
@keyframes llama { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14) rotate(-4deg); } }

/* el agua que sale de la alcachofa */
.gota {
  position: absolute; width: 5px; height: 11px; z-index: 7; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(150,210,245,.2), #5DB0E8);
  animation: gota-cae .55s ease-in forwards;
}
@keyframes gota-cae { to { transform: translateY(78px); opacity: 0; } }

/* limpia: se sacude el agua */
.ducha--limpia { background: linear-gradient(180deg, #EFFBF4 0 72%, #DCEBE4 72% 100%); }
.ducha__koda.sacude .koda { animation: sacudida .11s ease-in-out 10 alternate; }
@keyframes sacudida { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* ==========================================================================
   Koda tumbada · panza al suelo y la cabeza apoyada en las patas
   ========================================================================== */

.koda__body, .koda__tail, .koda__collar { transition: opacity .35s ease; }
.koda--tumbada .koda__body,
.koda--tumbada .koda__tail,
.koda--tumbada .koda__collar,
.koda--tumbada .koda__acc--fondo,
.koda--tumbada .koda__acc--medio { opacity: 0; }
.koda--tumbada .koda__tumbada { opacity: 1; animation: koda-respira-tumbada 4.2s ease-in-out infinite; }

/* la cabeza baja hasta apoyarse en las patas, con transición: así se ve el
   gesto de tumbarse y el de incorporarse */
.koda__cabeza-pos {
  transform-box: view-box; transform-origin: 100px 118px;
  transition: transform .7s cubic-bezier(.3,.7,.3,1);
}
.koda--tumbada .koda__cabeza-pos { transform: translate(-18px, 56px) rotate(-5deg); }

/* dormida, las orejas se relajan un poco hacia los lados */
.koda--tumbada.koda--sleep .koda__ear-l { animation: none; transform: rotate(-14deg); }
.koda--tumbada.koda--sleep .koda__ear-r { animation: none; transform: rotate(14deg); }
/* y las zzz salen de más abajo, que la cabeza está más baja */
.koda--tumbada .koda__zzz { transform: translate(-8px, 40px); }

@keyframes koda-respira-tumbada {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(1.035); }
}


/* ------------------------------------------------------------ Profesor */
.profe__hero .koda-hero .koda { width: 104px; height: 104px; margin-top: -10px; }
.profe__sello {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.7); border: 1px dashed var(--lav-300);
  font-size: .78rem; font-weight: 700; color: var(--lav-700); line-height: 1.4;
}

.profe__chat { display: grid; gap: 14px; }
.profe__vacio { text-align: center; padding: 6px 4px; }
.profe__sugerencias { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.profe__sugerencias .chip { font-size: .8rem; padding: 8px 13px; text-align: left; }

.msg { display: flex; gap: 8px; align-items: flex-end; animation: msg-in .35s var(--ease-out); scroll-margin-top: 84px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg--alumno { flex-direction: column; align-items: flex-end; gap: 4px; }
.msg--alumno .msg__burbuja {
  max-width: 85%; background: linear-gradient(145deg, var(--lav-400), var(--lav-500)); color: #fff;
  border-radius: var(--r-md) var(--r-md) 6px var(--r-md); padding: 11px 15px;
  font-weight: 700; font-size: .92rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
  box-shadow: var(--sh-sm);
}
.msg__meta { font-size: .68rem; font-weight: 700; color: var(--ink-3); padding-right: 6px; }
.msg--profe { align-items: flex-start; }
.msg__avatar { flex: 0 0 44px; width: 44px; height: 44px; margin-top: 2px; }
.msg__avatar .koda { width: 44px; height: 44px; }
.msg--profe .msg__burbuja {
  flex: 1; min-width: 0; background: #fff; border: 2px solid var(--lav-200);
  border-radius: 6px var(--r-md) var(--r-md) var(--r-md); padding: 12px 15px;
  font-size: .9rem; font-weight: 600; line-height: 1.5; color: var(--ink); box-shadow: var(--sh-sm);
}
.msg__texto p { margin: 0 0 8px; }
.msg__texto p:last-child { margin-bottom: 0; }
.msg__texto ul { margin: 4px 0 8px; padding-left: 20px; }
.msg__texto li { margin: 3px 0; }
.msg__texto strong { color: var(--lav-700); }
.msg__aviso {
  display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--butter-100); border: 1px solid var(--butter-300); color: #8A6A1E;
  font-size: .74rem; font-weight: 800;
}
.msg__aviso--peach { background: var(--peach-100); border-color: var(--peach-300); color: #A65A33; }

.citas {
  margin-top: 12px; padding: 10px 12px 4px; border-radius: var(--r-sm);
  background: var(--mint-50); border: 1px solid var(--mint-200);
}
.citas--mira { background: var(--lav-50); border-color: var(--lav-200); padding-bottom: 10px; }
.citas__titulo { font-size: .76rem; font-weight: 800; color: var(--mint-600); margin-bottom: 8px; }
.citas--mira .citas__titulo { color: var(--lav-700); margin-bottom: 4px; }
.cita { margin: 0 0 10px; padding: 0 0 0 10px; border-left: 3px solid var(--mint-300); }
.cita__donde { font-size: .72rem; font-weight: 800; color: var(--ink-2); }
.cita__texto { font-size: .83rem; font-style: italic; color: var(--ink); margin-top: 3px; line-height: 1.45; }
.cita__ver { margin-left: 6px; color: var(--lav-500); text-decoration: none; white-space: nowrap; }
.citas__nota { font-size: .72rem; color: var(--ink-3); margin: 0 0 8px; }

.msg--pensando .msg__burbuja { display: flex; align-items: center; gap: 10px; }
.puntos { display: inline-flex; gap: 4px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--lav-400); animation: puntos 1.1s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes puntos { 0%,80%,100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }

/* La caja de escribir se queda pegada encima de la barra de abajo. */
.profe__caja {
  position: sticky; bottom: calc(var(--nav-h) + 10px); z-index: 20;
  display: grid; gap: 8px; padding: 10px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border: 1px solid var(--lav-200); box-shadow: var(--sh-lg);
}
.profe__barra { display: flex; gap: 8px; align-items: center; }
.profe__tema { padding: 9px 38px 9px 13px; font-size: .84rem; border-radius: var(--r-pill); background-position: right 14px center; }
.profe__borrar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lav-50); border: 2px solid var(--line); font-size: 1.05rem;
}
.profe__escribe { display: flex; gap: 8px; align-items: flex-end; }
.profe__escribe .textarea {
  min-height: 46px; max-height: 140px; resize: none; padding: 11px 15px; border-radius: 23px; font-size: .95rem;
}
.profe__enviar {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--lav-400), var(--pink-400));
  box-shadow: 0 6px 16px rgba(155,120,230,.35);
  transition: transform .18s var(--ease), opacity .2s;
}
.profe__enviar svg { width: 20px; height: 20px; margin-left: 2px; }
.profe__enviar:active { transform: scale(.9); }
.profe__enviar:disabled { opacity: .45; }

/* La profe Koda se ajusta el monóculo de vez en cuando. */
.koda--profesor .koda__monoculo { transform-box: fill-box; transform-origin: center; animation: monoculo 7s ease-in-out infinite; }
@keyframes monoculo { 0%,88%,100% { transform: none; } 92% { transform: translateY(-2px) rotate(-8deg); } 96% { transform: translateY(1px) rotate(4deg); } }
.koda--profesor .koda__bigote { transform-box: fill-box; transform-origin: center top; }
.koda--profesor.koda--talk .koda__bigote { animation: bigote .32s ease-in-out infinite alternate; }
@keyframes bigote { from { transform: scaleY(1); } to { transform: scaleY(.86) translateY(1px); } }
@media (prefers-reduced-motion: reduce) {
  .koda--profesor .koda__monoculo, .koda--profesor.koda--talk .koda__bigote, .puntos i { animation: none; }
}
.profe__pendientes p { margin: 0; }

/* Profesor · ampliación contrastada y pruebas */
.ampliacion {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--sky-100); border: 1px solid var(--sky-200);
}
.ampliacion__titulo { font-size: .76rem; font-weight: 800; color: #2F78B0; margin-bottom: 6px; }
.ampliacion__dato { font-size: .85rem; padding: 8px 0; border-top: 1px dashed var(--sky-200); }
.ampliacion__dato:first-of-type { border-top: 0; padding-top: 2px; }
.ampliacion__dato p { margin: 0; }
.ampliacion__pie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.ampliacion__ref { font-size: .72rem; font-weight: 800; color: var(--ink-2); }
.ampliacion__fuente {
  font-size: .7rem; font-weight: 800; color: #2F78B0; text-decoration: none;
  background: #fff; border: 1px solid var(--sky-200); border-radius: var(--r-pill); padding: 2px 9px;
}
.profe__ojo {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--butter-100); border: 1px solid var(--butter-300); font-size: .84rem;
}
.profe__ojo p { margin: 0; }
details.citas { padding-bottom: 6px; }
details.citas > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.citas > summary::-webkit-details-marker { display: none; }
details.citas > summary::after { content: " ▾"; }
details.citas[open] > summary { margin-bottom: 8px; }
details.citas[open] > summary::after { content: " ▴"; }
.profe__google { display: block; width: 100%; height: 64px; border: 0; margin-top: 10px; border-radius: 12px; }
/* Las llamadas a fuentes no deben separar las líneas: sin «super», subidas a mano. */
.msg__texto sup.ref, .ampliacion sup.ref { margin-left: 2px; white-space: nowrap; line-height: 0; vertical-align: baseline; position: relative; top: -.45em; }
.msg__texto sup.ref a, .ampliacion sup.ref a {
  display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; margin-left: 2px;
  border-radius: 8px; background: var(--sky-100); color: #2F78B0; border: 1px solid var(--sky-200);
  font-size: .62rem; font-weight: 800; text-decoration: none; line-height: 1; vertical-align: baseline;
}
.fuentes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fuentes__titulo { width: 100%; font-size: .74rem; font-weight: 800; color: var(--ink-2); }
.fuentes__item {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px;
  border-radius: var(--r-pill); background: #fff; border: 1px solid var(--sky-200);
  font-size: .72rem; font-weight: 700; color: var(--ink-2); text-decoration: none;
}
.fuentes__n {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--sky-100); color: #2F78B0; font-size: .62rem; font-weight: 800;
}
.fuentes__oficial {
  font-size: .6rem; font-weight: 800; color: var(--mint-600); background: var(--mint-100);
  border-radius: var(--r-pill); padding: 1px 6px;
}

/* ==========================================================================
   Temario · ficha de estudio y documentos
   ========================================================================== */
.tema-resumen { display: grid; gap: 6px; }
.docs { display: grid; gap: 8px; }
.docs__vacio {
  display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 14px;
  border: 2px dashed var(--lav-200); border-radius: var(--r-md); color: var(--ink-2); font-size: .86rem; font-weight: 600;
}
.docs__vacio span { font-size: 1.8rem; }
.doc { display: flex; align-items: center; gap: 6px; }
.doc__abrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md); background: #fff; border: 1.5px solid var(--line);
  transition: transform .15s var(--ease), border-color .2s, box-shadow .2s;
}
.doc__abrir:hover { border-color: var(--lav-300); box-shadow: var(--sh-sm); }
.doc__abrir:active { transform: scale(.98); }
.doc__icono {
  flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
  background: var(--butter-100); box-shadow: inset 0 -3px 0 rgba(0,0,0,.05);
}
.doc__icono--pdf { background: var(--pink-100); }
.doc__icono--img { background: var(--sky-100); }
.doc__icono--txt { background: var(--mint-100); }
.doc__cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.doc__nombre { font-weight: 800; font-size: .92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc__meta { font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.doc__ir { color: var(--lav-400); font-size: 1.3rem; font-weight: 800; flex: 0 0 auto; }
.doc--falta .doc__abrir { opacity: .7; cursor: default; }
.doc__quitar { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--pink-50); border: 1.5px solid var(--pink-200); }

.ajuste-temas { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.ajuste-temas .card__title { display: block; margin-bottom: 2px; }
.ajuste-temas__emoji {
  display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 15px;
  background: rgba(255,255,255,.75); color: var(--lav-700);
}
.ajuste-temas__emoji .ico { width: 25px; height: 25px; }

/* ==========================================================================
   Visor de documentos
   ========================================================================== */
body.con-visor { overflow: hidden; }
.visor {
  position: fixed; inset: 0; z-index: 300;
  background:
    radial-gradient(circle at 1px 1px, rgba(155,120,230,.13) 1px, transparent 0) 0 0 / 18px 18px,
    linear-gradient(180deg, #F5EFFF 0%, #FFF3F8 100%);
  animation: visor-in .28s var(--ease-out);
}
@keyframes visor-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.visor__barra {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lav-200); box-shadow: 0 6px 20px rgba(120,95,175,.08);
}
.visor__icono {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 800; color: var(--lav-700);
  background: var(--lav-50); border: 1.5px solid var(--lav-200);
  transition: transform .15s var(--ease), background .2s;
}
.visor__icono:active { transform: scale(.9); }
.visor__titulo { flex: 1; min-width: 0; display: grid; }
.visor__nombre {
  display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left;
  font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink);
}
.visor__nombre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor__nombre i { font-style: normal; font-size: .75rem; opacity: .55; }
.visor__nombre-campo {
  font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink);
  border: 2px solid var(--lav-300); border-radius: 10px; padding: 4px 8px; width: 100%; outline: none;
  box-shadow: 0 0 0 3px var(--lav-100);
}
.visor__tema { font-size: .7rem; font-weight: 700; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor__pagina {
  flex: 0 0 auto; font-size: .74rem; font-weight: 800; color: var(--lav-700);
  background: var(--lav-100); border-radius: var(--r-pill); padding: 5px 10px;
}

.visor__hoja {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top) + 57px);
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 18px 12px calc(env(safe-area-inset-bottom) + 150px);
}
/* Rejilla de 1, 2 o 3 columnas (las fija visor.js). Centrada, pero con zoom
   más ancha que la pantalla se puede recorrer entera: con align-items: center
   el borde izquierdo quedaba inalcanzable. */
.visor__paginas {
  display: grid; grid-template-columns: max-content; justify-content: center; align-items: start;
  gap: 18px 16px; width: max-content; min-width: 100%;
}
.visor__cargando, .visor__aviso {
  display: grid; justify-items: center; gap: 4px; text-align: center; margin: 12vh auto 0; max-width: 340px;
  background: #fff; border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--sh-md);
}
.visor__cargando .koda, .visor__aviso .koda { width: 110px; height: 110px; }
.visor__cargando p { font-weight: 700; color: var(--ink-2); }

/* --- cada página --- */
.vpag {
  position: relative; flex: 0 0 auto; background: #fff; border-radius: 6px;
  /* las notas se escalan con la página, como si fueran de papel */
  container-type: inline-size;
  box-shadow: 0 2px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(107,79,176,.13);
  overflow: hidden;
}
.vpag__lienzo, .vpag__imagen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vpag__papel {
  position: absolute; left: 0; top: 0; width: 720px; padding: 48px 56px; box-sizing: border-box;
  transform-origin: 0 0; white-space: pre-wrap; word-break: break-word;
  font: 600 15px/1.75 var(--font); color: var(--ink); z-index: 2;
}
.vpag__subr { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.subr { position: absolute; border-radius: 3px; opacity: .5; mix-blend-mode: multiply; }
.vpag__tinta { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.vpag__tinta path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vpag__posits { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.posit {
  position: absolute; pointer-events: auto; width: 24%; min-height: 7cqw; max-height: 44%;
  padding: 2.2cqw 1.4cqw 1.4cqw; box-sizing: border-box; overflow: hidden;
  background: var(--c); border-radius: .4cqw .4cqw .4cqw 2cqw;
  box-shadow: 0 .5cqw 1.4cqw rgba(0,0,0,.16), inset 0 -.5cqw 0 rgba(0,0,0,.05);
  font: 600 1.55cqw/1.38 var(--font); color: #3E3650; text-align: left;
  transform: rotate(-1.5deg); cursor: grab; touch-action: none;
  transition: transform .2s var(--ease), box-shadow .2s;
}
/* tira de celo arriba */
.posit::before {
  content: ""; position: absolute; left: 34%; top: -.6cqw; width: 32%; height: 2.2cqw;
  background: rgba(255,255,255,.55); box-shadow: 0 0 0 .1cqw rgba(0,0,0,.04); transform: rotate(-3deg);
}
/* esquinita doblada */
.posit::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 2cqw; height: 2cqw;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.1) 50%); border-radius: 0 0 .4cqw 0;
}
.posit:hover { transform: rotate(0deg) scale(1.03); box-shadow: 0 1cqw 2.4cqw rgba(0,0,0,.2); z-index: 1; }
.posit.is-moviendo { cursor: grabbing; transform: rotate(2deg) scale(1.06); box-shadow: 0 1.6cqw 3cqw rgba(0,0,0,.24); z-index: 2; transition: none; }
.posit__texto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.posit__vacio { color: rgba(62,54,80,.45); font-style: italic; }
.posit--mini {
  width: 17%; min-height: 0; padding: 1.4cqw 1.2cqw 1.1cqw; font-size: 1.3cqw;
  transform: rotate(1.5deg); border-radius: .4cqw; cursor: pointer;
}
.posit--mini::before { height: 1.6cqw; top: -.5cqw; }
.posit--mini .posit__texto { -webkit-line-clamp: 6; }
.sin-notas .posit { display: none; }
.vpag__num {
  position: absolute; right: 8px; bottom: 6px; z-index: 4; pointer-events: none;
  font-size: .62rem; font-weight: 800; color: var(--ink-3); background: rgba(255,255,255,.85);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.destello { animation: destello 1.2s ease-in-out 2; }
@keyframes destello { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 6px var(--lav-500)) brightness(1.1); opacity: 1; } }

/* capa de texto de pdf.js: transparente, solo para seleccionar */
.textLayer {
  position: absolute; inset: 0; overflow: hidden; line-height: 1; z-index: 2;
  text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none;
  transform-origin: 0 0;
}
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgba(155,120,230,.32); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
.vpag__papel::selection, .vpag__papel *::selection { background: rgba(155,120,230,.32); }

/* lo que hace cada herramienta */
.visor[data-herramienta="lapiz"] .vpag__tinta { pointer-events: all; touch-action: none; cursor: crosshair; }
.visor[data-herramienta="lapiz"] .textLayer,
.visor[data-herramienta="lapiz"] .vpag__papel { pointer-events: none; user-select: none; }
.visor[data-herramienta="nota"] .vpag { cursor: copy; }
.visor[data-herramienta="goma"] .vpag { cursor: pointer; }
.visor[data-herramienta="goma"] .textLayer { user-select: none; }
.visor[data-herramienta="goma"] .subr { outline: 1px dashed rgba(224,95,133,.6); }

/* --- barra de herramientas de abajo --- */
.visor__herramientas {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100% - 16px);
}
.visor__tools {
  display: flex; gap: 2px; padding: 6px; border-radius: 24px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border: 1px solid var(--lav-200); box-shadow: var(--sh-pop);
}
.visor__tool {
  display: grid; justify-items: center; gap: 1px; min-width: 52px; padding: 6px 6px 5px; border-radius: 18px;
  font-size: .62rem; font-weight: 800; color: var(--ink-2);
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.visor__tool-emoji { font-size: 1.25rem; line-height: 1.1; transition: transform .25s var(--ease); }
.visor__tool.is-on { background: var(--lav-100); color: var(--lav-700); }
.visor__tool.is-on .visor__tool-emoji { transform: translateY(-2px) rotate(-8deg) scale(1.12); }
.visor__tool:active { transform: scale(.92); }
.visor__tool--koda { color: #fff; background: linear-gradient(145deg, var(--lav-400), var(--pink-400)); margin-left: 4px; }
.visor__opciones {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.96); border: 1px solid var(--lav-200); box-shadow: var(--sh-md);
  animation: msg-in .25s var(--ease-out); flex-wrap: wrap; justify-content: center;
}
.visor__separa { width: 1px; height: 22px; background: var(--line); }
.punto {
  width: 26px; height: 26px; border-radius: 50%; background: var(--c); flex: 0 0 auto;
  border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line), 0 2px 5px rgba(0,0,0,.12);
  transition: transform .15s var(--ease), box-shadow .2s;
}
.punto.is-on { transform: scale(1.18); box-shadow: 0 0 0 2.5px var(--lav-500), 0 3px 8px rgba(0,0,0,.15); }
.punto--posit { border-radius: 6px 6px 6px 11px; }
.grosor {
  width: 32px; height: 28px; border-radius: 10px; display: grid; place-items: center;
  background: var(--lav-50); border: 1.5px solid transparent;
}
.grosor i { display: block; width: 18px; border-radius: 4px; background: var(--ink-2); }
.grosor.is-on { border-color: var(--lav-400); background: var(--lav-100); }

.visor__zoom {
  position: absolute; z-index: 19; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 96px);
  display: grid; justify-items: center; gap: 2px; padding: 4px; border-radius: 18px;
  background: rgba(255,255,255,.94); border: 1px solid var(--lav-200); box-shadow: var(--sh-md);
}
.visor__zoom button { width: 34px; height: 30px; border-radius: 12px; font-size: 1.15rem; font-weight: 800; color: var(--lav-700); }
.visor__zoom-separa { width: 22px; height: 1px; background: var(--line); margin: 3px 0; }
/* botones de 1, 2 y 3 páginas: unas hojitas dibujadas */
.visor__cols { display: flex !important; align-items: center; justify-content: center; gap: 2px; }
.visor__cols i { display: block; width: 6px; height: 9px; border-radius: 1.5px; border: 1.5px solid currentColor; opacity: .7; }
.visor__cols.is-on { background: var(--lav-100); }
.visor__cols.is-on i { opacity: 1; background: var(--lav-200); }

.visor__historia {
  position: absolute; z-index: 19; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 96px);
  display: grid; gap: 2px; padding: 4px; border-radius: 18px;
  background: rgba(255,255,255,.94); border: 1px solid var(--lav-200); box-shadow: var(--sh-md);
}
.visor__historia button {
  width: 38px; height: 36px; border-radius: 13px; display: grid; place-items: center; color: var(--lav-700);
  transition: background .15s, transform .15s var(--ease), opacity .2s;
}
.visor__historia button .flecha { width: 22px; height: 22px; stroke-width: 2.6; }
.visor__historia button:not(:disabled):hover { background: var(--lav-100); }
.visor__historia button:not(:disabled):active { transform: scale(.88) rotate(-8deg); }
.visor__historia button:disabled { opacity: .3; cursor: default; }
.visor__zoom button:active { background: var(--lav-100); }
.visor__zoom span { font-size: .6rem; font-weight: 800; color: var(--ink-3); }
@media (max-width: 520px) {
  .visor__tool { min-width: 46px; padding: 6px 3px 5px; font-size: .58rem; }
  .visor__zoom, .visor__historia { bottom: calc(env(safe-area-inset-bottom) + 132px); }
}

/* --- burbuja al seleccionar texto --- */
.visor__burbuja {
  position: fixed; z-index: 40; display: grid; gap: 8px; padding: 10px;
  background: #fff; border-radius: 18px; border: 1px solid var(--lav-200); box-shadow: var(--sh-pop);
  opacity: 0; transform: translateY(6px) scale(.97); pointer-events: none;
  transition: opacity .18s, transform .22s var(--ease);
}
.visor__burbuja.is-on { opacity: 1; transform: none; pointer-events: auto; }
.visor__burbuja-colores { display: flex; justify-content: center; gap: 10px; }
.visor__burbuja-acciones { display: flex; gap: 6px; }
.visor__burbuja-acciones button {
  flex: 1; padding: 8px 6px; border-radius: 12px; font-size: .78rem; font-weight: 800; color: var(--lav-700);
  background: var(--lav-50); border: 1.5px solid var(--lav-200); white-space: nowrap;
}
.visor__burbuja-acciones button:last-child { flex: 0 0 40px; }
.es-koda { color: #fff !important; border-color: transparent !important; background: linear-gradient(145deg, var(--lav-400), var(--pink-400)) !important; }
.visor__burbuja-acciones .es-koda { flex: 1.6; }

/* --- paneles (nota, Koda, mis notas, menú) --- */
.visor__panel {
  position: absolute; z-index: 30; left: 50%; width: min(560px, calc(100% - 16px));
  bottom: calc(env(safe-area-inset-bottom) + 8px); max-height: 78vh; overflow: auto;
  background: #fff; border-radius: 24px; border: 1px solid var(--lav-200); box-shadow: var(--sh-pop);
  padding: 14px 16px 16px; display: grid; gap: 10px;
  transform: translate(-50%, 24px); opacity: 0; transition: transform .28s var(--ease-out), opacity .2s;
}
.visor__panel.is-on { transform: translate(-50%, 0); opacity: 1; }
.visor__panel--menu {
  left: auto; right: 10px; bottom: auto; top: calc(env(safe-area-inset-top) + 62px);
  width: 250px; padding: 8px; gap: 2px; transform: translateY(-8px);
}
.visor__panel--menu.is-on { transform: none; }
.vmenu__op { display: block; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none; }
.vmenu__op:hover { background: var(--lav-50); }
.vmenu__op--peligro { color: var(--pink-600); }
@media (min-width: 900px) {
  .visor__panel--lista {
    left: auto; right: 14px; bottom: 14px; top: calc(env(safe-area-inset-top) + 70px);
    width: 380px; max-height: none; transform: translateX(24px); align-content: start;
  }
  .visor__panel--lista.is-on { transform: none; }
}
.tarjeta__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tarjeta__tipo { font-family: var(--display); font-weight: 800; font-size: 1rem; }
.tarjeta__cita {
  margin: 0; padding: 8px 12px; border-left: 4px solid var(--c, var(--lav-300)); border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, var(--c, #E4D6FC) 22%, #fff); font-size: .86rem; font-style: italic; color: var(--ink);
  max-height: 140px; overflow: auto;
}
.tarjeta__texto { min-height: 84px; }
.tarjeta__colores { display: flex; gap: 10px; }
.tarjeta__acciones { display: flex; gap: 8px; }

.vkoda__cabeza { display: flex; align-items: center; gap: 10px; }
.vkoda__cabeza .grow { display: grid; }
.vkoda__avatar { flex: 0 0 56px; width: 56px; height: 56px; }
.vkoda__avatar .koda { width: 56px; height: 56px; }
.vkoda__cita {
  margin: 0; padding: 8px 12px; border-left: 4px solid var(--lav-400); border-radius: 4px 12px 12px 4px;
  background: var(--lav-50); font-size: .86rem; font-style: italic; max-height: 120px; overflow: auto;
}
.vkoda__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vkoda__chips .chip { font-size: .78rem; padding: 7px 12px; }
.vkoda__respuesta:empty { display: none; }
.vkoda__respuesta { font-size: .9rem; font-weight: 600; line-height: 1.5; }
.vkoda__respuesta .msg__burbuja { border: 0; padding: 0; box-shadow: none; }
.vkoda__pregunta {
  justify-self: end; margin: 0 0 8px auto; width: fit-content; max-width: 85%;
  background: linear-gradient(145deg, var(--lav-400), var(--lav-500)); color: #fff;
  border-radius: 16px 16px 4px 16px; padding: 7px 12px; font-size: .84rem; font-weight: 700;
}

.vlista { display: grid; gap: 6px; }
.vlista__item {
  display: grid; gap: 8px; width: 100%; text-align: left;
  padding: 10px 12px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .15s var(--ease);
}
.vlista__item:hover { border-color: var(--lav-300); box-shadow: var(--sh-sm); }
.vlista__item:active { transform: scale(.985); }
.vlista__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vlista__tipo { font-size: .72rem; font-weight: 800; color: var(--ink-2); }
.vlista__pag { flex: 0 0 auto; font-size: .66rem; font-weight: 800; color: var(--lav-700); background: var(--lav-100); border-radius: var(--r-pill); padding: 2px 8px; }
.vlista__subrayado { font-size: .86rem; font-weight: 600; line-height: 1.7; color: var(--ink); }
.vlista__subrayado mark {
  color: inherit; padding: 1px 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: color-mix(in srgb, var(--c) 60%, #fff);
}
.vlista__posit {
  position: relative; display: block; padding: 12px 12px 10px; border-radius: 4px 4px 4px 14px;
  background: var(--c); font-size: .84rem; font-weight: 600; line-height: 1.45; color: #3E3650;
  white-space: pre-wrap; word-break: break-word; transform: rotate(-.6deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.1), inset 0 -3px 0 rgba(0,0,0,.04);
}
.vlista__posit::before {
  content: ""; position: absolute; left: 38%; top: -5px; width: 24%; height: 12px;
  background: rgba(255,255,255,.6); transform: rotate(-3deg);
}
.vlista__recorte {
  display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #FAF6FF 0 8px, #fff 8px 16px);
}
.vlista__recorte img { display: block; width: 100%; height: auto; min-height: 60px; }

/* --- avisito propio --- */
.visor__aviso-mini {
  position: absolute; z-index: 45; left: 50%; top: calc(env(safe-area-inset-top) + 68px);
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px);
  padding: 9px 16px; border-radius: var(--r-pill); background: #4B4259; color: #fff;
  font-size: .82rem; font-weight: 700; box-shadow: var(--sh-lg);
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: transform .25s var(--ease), opacity .2s;
}
.visor__aviso-mini.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.visor__aviso-mini button { color: var(--butter-300); font-weight: 800; text-decoration: underline; }

.cita__ver { margin-left: 6px; color: var(--lav-500); font-weight: 800; white-space: nowrap; font-size: inherit; }
@media (prefers-reduced-motion: reduce) {
  .visor, .visor__panel, .visor__burbuja, .destello { animation: none; transition: none; }
}

/* ==========================================================================
   Flechas dibujadas y botón de volver
   ========================================================================== */
.flecha {
  width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -.18em;
  fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
.atras {
  position: relative; display: inline-flex; align-items: center; gap: 9px; width: auto;
  padding: 5px 16px 5px 5px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid var(--lav-200); box-shadow: var(--sh-sm);
  font-family: var(--display); font-weight: 800; font-size: .92rem; color: var(--lav-700);
  transition: transform .18s var(--ease), box-shadow .2s, border-color .2s;
}
.atras__circulo {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, var(--lav-400), var(--pink-400));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.35), 0 3px 8px rgba(155,120,230,.35);
  transition: transform .25s var(--ease);
}
.atras__circulo .flecha { width: 18px; height: 18px; stroke-width: 3.2; margin-left: -1px; }
/* una huellita que asoma al pasar por encima */
.atras::after {
  content: "🐾"; position: absolute; left: -2px; top: -9px; font-size: .62rem;
  opacity: 0; transform: translateY(4px) rotate(-20deg); transition: opacity .2s, transform .3s var(--ease);
}
.atras:hover { border-color: var(--lav-300); box-shadow: var(--sh-md); }
.atras:hover .atras__circulo { animation: atras-salto .55s var(--ease); }
.atras:hover::after { opacity: .8; transform: translateY(0) rotate(-20deg); }
.atras:active { transform: scale(.94); }
.atras--solo { padding: 4px; }
.atras--solo .atras__circulo { width: 34px; height: 34px; }
@keyframes atras-salto { 0%,100% { transform: none; } 40% { transform: translateX(-4px) scale(1.05); } 70% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .atras:hover .atras__circulo { animation: none; } }

/* Subrayar con el dedo: de lado marca, arriba y abajo desplaza la página. */
.visor[data-herramienta="subrayar"] .vpag { touch-action: pan-y; }
/* El pellizco lo maneja el visor (amplía el documento hacia los dedos, no la
   pantalla entera con sus barras): el navegador solo desplaza. */
.visor__hoja { touch-action: pan-x pan-y; }
.visor__paginas.is-ampliando { will-change: transform; }
.visor__paginas.is-ampliando .posit { transition: none; }
.visor[data-herramienta="subrayar"] .textLayer ::selection,
.visor[data-herramienta="subrayar"] .vpag__papel::selection { background: rgba(255,214,90,.55); }

/* Rotulador: trazo semitransparente, como un fluorescente sobre el papel. */
.vpag__tinta path.marcador { opacity: .42; mix-blend-mode: multiply; }
.vpag__tinta path.marcador--vivo { opacity: .3; }
.subr--previa { opacity: .55; outline: 1.5px dashed rgba(75,66,89,.35); outline-offset: 1px; }

/* Tests: el tipo de cada test y el filtro por tipo */
.filtro-tipos { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: -2px -2px 4px; scrollbar-width: none; }
.filtro-tipos::-webkit-scrollbar { display: none; }
.filtro-tipos .chip { flex: 0 0 auto; font-size: .78rem; padding: 7px 12px; }
.test-tipos { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.test-tipo {
  font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--lav-100); color: var(--lav-700);
}
.test-tipo--flashcard { background: var(--pink-100); color: var(--pink-600); }
.test-tipo--true_false { background: var(--sky-100); color: #2F78B0; }
.test-tipo--short_answer { background: var(--mint-100); color: var(--mint-600); }
.test-tipo--fill_blank { background: var(--butter-100); color: #8A6A1E; }
.test-tipo--matching { background: var(--peach-100); color: #A65A33; }
.test-tipo--simulacro { background: #EFE9F8; color: var(--ink-2); }

/* ==========================================================================
   Página de inicio (landing)
   ========================================================================== */
body.lp { overflow-x: hidden; }
.lp-nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 18px 10px;
  background: rgba(255,249,252,.82); backdrop-filter: blur(14px); border-radius: 0 0 22px 22px;
}
.lp-nav__marca { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); text-decoration: none; }
.lp-nav__marca b { background: linear-gradient(120deg, var(--lav-500), var(--pink-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-nav__koda { width: 40px; height: 40px; display: block; }
.lp-nav__koda .koda { width: 40px; height: 40px; }
.lp-nav__enlaces { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: .9rem; }
.lp-nav__enlaces > a:not(.btn) { color: var(--ink-2); text-decoration: none; }
.lp-nav__enlaces .btn { width: auto; padding: 9px 18px; }
@media (max-width: 560px) { .lp-nav__enlaces > a:not(.btn) { display: none; } }

.lp-hero {
  max-width: 1120px; margin: 0 auto; padding: 34px 20px 20px;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px;
}
.lp-etiqueta { display: inline-block; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--lav-200); font-weight: 800; font-size: .8rem; color: var(--lav-700); box-shadow: var(--sh-sm); }
.lp-hero h1 { font-family: var(--display); font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; margin: 14px 0 12px; }
.lp-hero h1 span { background: linear-gradient(120deg, var(--lav-500), var(--pink-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-hero p { font-size: 1.08rem; font-weight: 600; color: var(--ink-2); line-height: 1.55; max-width: 34em; }
.lp-hero__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lp-hero__botones .btn { width: auto; text-decoration: none; }
.lp-hero__koda { position: relative; display: grid; place-items: center; min-height: 340px; }
.lp-hero__koda::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, var(--lav-100) 55%, var(--pink-100) 100%);
  box-shadow: var(--sh-lg);
}
.lp-hero__perro { position: relative; width: 260px; height: 260px; cursor: pointer; }
.lp-hero__perro .koda { width: 260px; height: 260px; }
.lp-pegatina {
  position: absolute; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--lav-200);
  font-weight: 800; font-size: .82rem; color: var(--ink); box-shadow: var(--sh-md); white-space: nowrap;
  animation: lp-flota 5s ease-in-out infinite;
}
.lp-pegatina--1 { top: 8%; left: 2%; }
.lp-pegatina--2 { top: 46%; right: -2%; animation-delay: -1.6s; }
.lp-pegatina--3 { bottom: 6%; left: 10%; animation-delay: -3.2s; }
@keyframes lp-flota { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.lp-seccion { max-width: 1120px; margin: 0 auto; padding: 40px 20px; }
.lp-seccion h2 { font-family: var(--display); font-size: clamp(1.5rem, 3.6vw, 2.2rem); text-align: center; margin-bottom: 22px; }
.lp-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-tarjeta { background: rgba(255,255,255,.88); border: 1px solid #fff; border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-md); }
.lp-tarjeta span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; font-size: 1.6rem; background: var(--lav-100); }
.lp-tarjeta:nth-child(2) span { background: var(--pink-100); }
.lp-tarjeta:nth-child(3) span { background: var(--butter-100); }
.lp-tarjeta:nth-child(4) span { background: var(--mint-100); }
.lp-tarjeta:nth-child(5) span { background: var(--sky-100); }
.lp-tarjeta:nth-child(6) span { background: var(--peach-100); }
.lp-tarjeta h3 { font-family: var(--display); font-size: 1.12rem; margin: 12px 0 6px; }
.lp-tarjeta p { font-size: .9rem; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.lp-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: paso; }
.lp-pasos li { position: relative; background: rgba(255,255,255,.88); border: 1px solid #fff; border-radius: var(--r-lg); padding: 22px 20px 20px; box-shadow: var(--sh-md); }
.lp-pasos b {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-family: var(--display); font-size: 1.15rem;
  background: linear-gradient(145deg, var(--lav-400), var(--pink-400)); box-shadow: 0 4px 10px rgba(155,120,230,.35);
}
.lp-pasos h3 { font-family: var(--display); font-size: 1.08rem; margin: 12px 0 4px; }
.lp-pasos p { font-size: .9rem; font-weight: 600; color: var(--ink-2); }

/* «¿Aún no tienes código?» en la portada */
.lp-pedir { scroll-margin-top: 70px; }
.lp-pedir__tarjeta { max-width: 560px; margin: 0 auto; }
.lp-pedir__tarjeta > .small { text-align: center; }
.lp-pedir__ya { text-align: center; margin-top: 16px; font-weight: 700; color: var(--ink-2); }
.lp-pedir a { color: var(--lav-500); font-weight: 800; }

/* entrar.php: entrar y crear cuenta, en su propia página */
.lp-nav .atras { text-decoration: none; }
/* 360 px y menos: el logo y la flecha de volver, sin la palabra «Inicio» */
@media (max-width: 360px) {
  .lp-nav { padding-left: 14px; padding-right: 14px; }
  .lp-nav__marca { font-size: 1.15rem; }
  .lp-nav .atras__texto { display: none; }
}
.lp-entrar { max-width: 520px; margin: 0 auto; padding: 18px 16px 10px; display: grid; justify-items: center; text-align: center; }
.lp-entrar__koda { width: 130px; height: 130px; cursor: pointer; }
.lp-entrar__koda .koda { width: 130px; height: 130px; }
.lp-entrar__titulo { font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.2rem); margin-top: 4px; }
.lp-entrar__sub { color: var(--ink-2); font-weight: 600; margin: 4px 0 18px; }
.lp-entrar__tarjeta { width: 100%; text-align: left; }
.lp-entrar a { color: var(--lav-500); font-weight: 800; }
.lp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-codigo { font-family: var(--display); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; }
.lp-olvide { margin: 0; text-align: center; }
.lp-check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.lp-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--lav-500); flex: 0 0 auto; }
.lp-check a { color: var(--lav-500); font-weight: 800; }
.lp-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lp-pie { max-width: 1120px; margin: 0 auto; padding: 24px 20px calc(env(safe-area-inset-bottom) + 30px); display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: .84rem; font-weight: 700; color: var(--ink-3); }
.lp-pie a { color: var(--ink-2); }
.lp-pie span { width: 100%; text-align: center; }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; }
  .lp-hero { text-align: center; padding-top: 18px; }
  .lp-hero p { margin: 0 auto; }
  .lp-hero__botones { justify-content: center; }
  .lp-hero__koda { order: -1; min-height: 280px; }
  .lp-hero__koda::before { width: 240px; height: 240px; }
  .lp-hero__perro, .lp-hero__perro .koda { width: 210px; height: 210px; }
  .lp-tarjetas, .lp-pasos { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .lp-dos { grid-template-columns: 1fr; } .lp-pegatina { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .lp-pegatina { animation: none; } }

/* páginas legales */
.legal { max-width: 760px; margin: 0 auto; padding: 30px 20px 60px; }
.legal h1 { font-family: var(--display); font-size: 2rem; margin: 14px 0 6px; }
.legal h2 { font-family: var(--display); font-size: 1.2rem; margin: 24px 0 8px; }
.legal p, .legal li { font-size: .95rem; font-weight: 600; color: var(--ink-2); line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal__aviso { padding: 12px 14px; border-radius: var(--r-md); background: var(--butter-100); border: 1px solid var(--butter-300); font-size: .86rem !important; color: #8A6A1E !important; }

/* ==========================================================================
   Mensajes: Soporte Koda y amigos
   ========================================================================== */
.chat-btn { position: relative; font-size: 1rem; }
.chat-btn__globo {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--pink-400); color: #fff; font-size: .64rem; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #fff; animation: globo-late 1.6s ease-in-out infinite;
}
@keyframes globo-late { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.chat { position: fixed; inset: 0; z-index: 250; }
.chat__fondo { position: absolute; inset: 0; background: rgba(75,66,89,.28); opacity: 0; transition: opacity .2s; }
.chat.is-on .chat__fondo { opacity: 1; }
.chat__caja {
  position: absolute; right: 16px; bottom: 16px; width: min(420px, calc(100% - 16px)); height: min(640px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--lav-200); box-shadow: var(--sh-pop);
  transform: translateY(24px) scale(.98); opacity: 0; transition: transform .28s var(--ease-out), opacity .2s;
}
.chat.is-on .chat__caja { transform: none; opacity: 1; }
@media (max-width: 560px) {
  .chat__caja { right: 0; left: 0; bottom: 0; width: 100%; height: calc(100dvh - env(safe-area-inset-top) - 40px); border-radius: 26px 26px 0 0; }
}
.chat__cabeza {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--lav-100), var(--pink-100)); border-bottom: 1px solid var(--lav-200);
}
.chat__cabeza .grow { display: grid; }
.chat__avatar { width: 46px; height: 46px; flex: 0 0 46px; }
.chat__avatar .koda { width: 46px; height: 46px; }
.chat__conversacion { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat__mensajes {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px;
  background: radial-gradient(circle at 1px 1px, rgba(155,120,230,.1) 1px, transparent 0) 0 0 / 16px 16px, #FDFBFF;
}
.chat__vacio { margin: auto; max-width: 300px; text-align: center; font-weight: 700; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.chat__dia { align-self: center; margin: 8px 0 4px; padding: 3px 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: .7rem; font-weight: 800; color: var(--ink-3); }
.chat__msg {
  align-self: flex-start; max-width: 82%; padding: 8px 12px 5px; border-radius: 4px 16px 16px 16px;
  background: #fff; border: 1px solid var(--lav-200); box-shadow: var(--sh-sm); animation: msg-in .25s var(--ease-out);
}
.chat__msg--mio {
  align-self: flex-end; border-radius: 16px 4px 16px 16px; border-color: transparent; color: #fff;
  background: linear-gradient(145deg, var(--lav-400), var(--lav-500));
}
.chat__texto { font-size: .9rem; font-weight: 600; line-height: 1.45; word-break: break-word; }
.chat__hora { text-align: right; font-size: .62rem; font-weight: 700; opacity: .7; margin-top: 2px; }
.chat__check { letter-spacing: -3px; margin-left: 3px; opacity: .65; }
.chat__check.is-leido { color: var(--mint-200); opacity: 1; }
.chat__escribe-otro { padding: 2px 16px 6px; background: #FDFBFF; }
.chat__enviar { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px); border-top: 1px solid var(--line); background: #fff; }
.chat__enviar .textarea { min-height: 44px; max-height: 140px; resize: none; padding: 10px 14px; border-radius: 22px; font-size: .92rem; overflow-y: hidden; }

/* Mensajes: con el chat abierto, las hojas (regalo, casa de un amigo…) y los
   avisos salen por encima de él. */
body.con-chat .sheet-backdrop { z-index: 260; }
body.con-chat .sheet { z-index: 261; }
body.con-chat .toast { z-index: 270; }

.chat__cabeza .grow { min-width: 0; }
.chat__cabeza .grow strong, .chat__cabeza .grow .tiny { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__cabeza .visor__icono { width: 36px; height: 36px; font-size: 1rem; }
.chat__cabeza .atras--solo { padding: 0; }
@media (max-width: 400px) {
  .chat__cabeza { gap: 6px; padding: 10px; }
  .chat__cabeza > .conv__avatar { display: none; }   /* el nombre ya dice quién es */
  .chat__cabeza .visor__icono { width: 32px; height: 32px; font-size: .92rem; }
  .chat__cabeza .conv__avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .9rem; }
}

/* La lista: Soporte Koda arriba, solicitudes y amigos debajo */
.chat__lista { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #FDFBFF; }
.chat__seccion { margin: 10px 4px 2px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.chat__nadie { padding: 6px 10px 10px; }
.chat__permiso {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); text-align: left;
  background: var(--butter-100); border: 1px solid var(--butter-300); color: #7D5E12; font-size: 1.2rem;
}
.chat__permiso > span { display: grid; font-size: .86rem; }
.conv {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-md); text-align: left;
  background: #fff; border: 1px solid var(--line); transition: transform .15s var(--ease), border-color .2s;
}
button.conv:active { transform: scale(.98); }
button.conv:hover { border-color: var(--lav-300); }
.conv--soporte { background: linear-gradient(135deg, var(--lav-50), var(--pink-50)); border-color: var(--lav-200); }
.conv__info { flex: 1; min-width: 0; display: grid; }
.conv__info strong { font-size: .92rem; }
.conv__ultimo { font-size: .78rem; font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__avatar {
  position: relative; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--lav-200), var(--pink-200)); color: var(--lav-700);
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.conv__avatar--koda { background: none; }
.conv__avatar--koda .koda { width: 42px; height: 42px; }
.conv__punto { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--mint-400); box-shadow: 0 0 0 2px #fff; }
.conv__globo {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-style: normal;
  background: var(--pink-400); color: #fff; font-size: .68rem; font-weight: 800; line-height: 20px; text-align: center;
}

/* Emojis del chat: un botón junto al texto y la lista encima */
.chat__emoji-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
  background: var(--lav-50); border: 1.5px solid var(--lav-200); transition: transform .15s var(--ease), background .2s;
}
.chat__emoji-btn:active { transform: scale(.9); }
.chat__emoji-btn.is-on { background: var(--lav-200); }
.chat__emojis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px;
  max-height: 176px; overflow-y: auto; padding: 8px 10px; border-top: 1px solid var(--line); background: #fff;
}
.chat__emojis button { height: 40px; border-radius: 10px; font-size: 1.35rem; line-height: 1; transition: background .15s, transform .15s; }
.chat__emojis button:hover { background: var(--lav-50); }
.chat__emojis button:active { transform: scale(.88); }
@media (max-width: 380px) {
  .chat__enviar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .chat__emoji-btn { width: 40px; height: 40px; font-size: 1.15rem; }
}

/* Avisos de mensajes: arriba a la derecha, con ✕, apilados si llegan varios */
.avisos-pila {
  position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 12px; z-index: 300;
  width: min(340px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.aviso {
  display: flex; align-items: flex-start; pointer-events: auto;
  background: #fff; border: 1.5px solid var(--lav-200); border-radius: 18px; box-shadow: var(--sh-pop);
  transform: translateX(calc(100% + 24px)); opacity: 0; transition: transform .32s var(--ease-out), opacity .25s;
}
.aviso.is-on { transform: none; opacity: 1; }
.aviso.is-fuera { transform: translateX(calc(100% + 24px)); opacity: 0; }
.aviso__cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 11px 4px 11px 14px; text-align: left; }
.aviso__cuerpo strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso__cuerpo span {
  font-size: .82rem; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aviso__x {
  flex: 0 0 auto; width: 34px; height: 34px; margin: 6px 6px 0 0; border-radius: 50%; display: grid; place-items: center;
  font-size: .85rem; font-weight: 800; color: var(--ink-3); transition: background .15s;
}
.aviso__x:hover { background: var(--lav-50); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .aviso, .aviso.is-fuera { transition: opacity .2s; transform: none; } }

/* Regalos dentro del chat */
.chat__regalo {
  display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 12px;
  background: var(--butter-100); border: 1px dashed var(--butter-300); color: #7D5E12;
}
.chat__msg--mio .chat__regalo { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }
.chat__regalo-icono { font-size: 1.7rem; line-height: 1; animation: regalo-bota 1.8s var(--ease) infinite; }
@keyframes regalo-bota { 0%,100% { transform: none; } 50% { transform: translateY(-3px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .chat__regalo-icono { animation: none; } }

/* ==========================================================================
   Amigos (pestaña Koda)
   ========================================================================== */
.koda-amigos { margin-top: 16px; }
.koda-mascota:not([data-lugar="casa"]) + .koda-amigos { display: none; }
.amigos__mio {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 10px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--lav-50); border: 1px dashed var(--lav-300);
}
.amigos__mio .tiny { flex-basis: 100%; }
.amigos__codigo { flex: 1 0 100%; white-space: nowrap; font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; color: var(--lav-700); }
.amigos__etiqueta { display: block; margin: 0 2px 6px; }
.amigos__anadir { display: flex; gap: 8px; }
.amigos__anadir .input { flex: 1; min-width: 0; text-transform: uppercase; }
.amigos__anadir .input::placeholder { text-transform: none; }
.amigos__nota { margin: 8px 2px 4px; }
.amigos__seccion { margin: 14px 2px 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.amigos__vacio { margin: 14px 0 4px; }
/* Si el nombre no cabe junto a los botones, los botones bajan a otra fila. */
.amigo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.amigos__seccion + .amigo { border-top: 0; }
.amigo .conv__avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: .95rem; }
.amigo__nombre { flex: 1 1 72px; min-width: 0; font-weight: 800; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amigo--espera .amigo__nombre { color: var(--ink-3); }
.amigo__acciones { display: flex; gap: 4px; margin-left: auto; }
.amigo__btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
  background: var(--lav-50); border: 1.5px solid var(--lav-200); transition: transform .15s var(--ease);
}
.amigo__btn:active { transform: scale(.9); }
.amigos__bloqueados { margin-top: 12px; }
.amigos__bloqueados summary { cursor: pointer; font-size: .78rem; font-weight: 800; color: var(--ink-3); }

/* Hoja del regalo */
.regalo__saldo { text-align: center; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.regalo__huesos { display: flex; flex-wrap: wrap; gap: 8px; }
.regalo__huesos .chip[disabled], .articulo.is-tiene { opacity: .45; }
.regalo__confirma { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 8px 0; }
.regalo__confirma .row { width: 100%; margin-top: 6px; }
.regalo__grande { font-size: 3.4rem; line-height: 1; animation: regalo-bota 1.8s var(--ease) infinite; }

/* La casa de un amigo, solo para mirar */
.casa-amigo { min-height: 230px; }
.casa-amigo .escenario { margin-bottom: 0; pointer-events: none; }

/* Quitar, bloquear, denunciar */
.amigo-op {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); text-align: left;
  background: #fff; border: 1.5px solid var(--line); transition: transform .15s var(--ease), border-color .2s;
}
.amigo-op:active { transform: scale(.98); }
.amigo-op > span:last-child { display: grid; gap: 2px; }
.amigo-op__emoji { font-size: 1.5rem; }
.amigo-op--peligro { border-color: var(--pink-200); background: var(--pink-50); }
.amigo-check { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; }
.amigo-check input { width: 18px; height: 18px; accent-color: var(--lav-500); }

.adm-cabeza__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.adm-cabeza { flex-wrap: wrap; }
.adm-borrar { color: var(--pink-600); }
.adm-cuenta { max-width: 620px; }
/* Resúmenes «etiqueta → valor»: un valor largo (un email) baja de línea en vez de salirse. */
.resumen > strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.resumen > .muted { flex: 0 0 auto; }
.lp-entrar__invita {
  max-width: 380px; margin: 4px auto 14px; padding: 10px 14px; border-radius: var(--r-md); text-align: center;
  background: var(--butter-100); border: 1px solid var(--butter-300); color: #7D5E12; font-weight: 700; font-size: .88rem;
}

/* ==========================================================================
   Panel de administración
   ========================================================================== */
.adm { padding-bottom: 40px; }
.adm-cabeza, .adm-cuerpo { max-width: 1180px; margin-left: auto; margin-right: auto; }
.adm-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 10px;
}
.adm-cabeza__titulo { display: flex; align-items: center; gap: 10px; }
.adm-cabeza__titulo strong { display: block; font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }
.adm-cabeza__koda { width: 54px; height: 54px; flex: 0 0 54px; }
.adm-cabeza__koda .koda { width: 54px; height: 54px; }

.adm-pestanas {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 6px;
  padding: 8px max(16px, calc((100% - 1148px) / 2));
  overflow-x: auto; scrollbar-width: none; background: rgba(255,249,252,.88); backdrop-filter: blur(10px);
}
.adm-pestanas::-webkit-scrollbar { display: none; }
.adm-pestanas button {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--r-pill); background: #fff; border: 2px solid var(--line);
  font-size: .88rem; font-weight: 700; color: var(--ink-2); transition: background .2s, border-color .2s, color .2s;
}
.adm-pestanas button.is-on { background: var(--lav-100); border-color: var(--lav-300); color: var(--lav-700); }
.adm-globo {
  display: inline-block; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: var(--pink-400); color: #fff; font-size: .68rem; font-weight: 800; font-style: normal; line-height: 19px; text-align: center;
}

.adm-cuerpo { padding: 12px 16px; }
.adm-cargando { display: grid; place-items: center; min-height: 40vh; }
.adm-cargando > div { width: 110px; height: 110px; }
.adm-cargando .koda { width: 110px; height: 110px; }

/* minmax(0, …): una tabla ancha no estira la columna (ni la página) en el móvil */
.adm-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) {
  .adm-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-ancho { grid-column: 1 / -1; }
}
.adm .card__head { flex-wrap: wrap; gap: 8px; }
.adm .stat-grid { grid-template-columns: repeat(2, 1fr); }
.stat--peach { background: var(--peach-100); border-color: var(--peach-200); }
.adm-tile__extra { font-size: .74rem; color: var(--ink-2); font-weight: 700; }
.adm code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; font-weight: 700;
  padding: 2px 7px; border-radius: 7px; background: var(--lav-50); border: 1px solid var(--lav-200); color: var(--lav-700);
  white-space: nowrap;
}
.adm .is-apagado { opacity: .55; }

/* --- el número grande: quién está conectado --- */
.adm-hero {
  display: grid; align-content: center; justify-items: start; gap: 2px;
  background: linear-gradient(145deg, var(--mint-100), var(--mint-50)); border-color: var(--mint-200);
}
.adm-hero__etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; color: var(--mint-600); text-transform: uppercase; letter-spacing: .04em; }
.adm-hero__numero { font-family: var(--display); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.adm-punto {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mint-400);
  box-shadow: 0 0 0 2px #fff; animation: adm-latido 2s ease-in-out infinite;
}
@keyframes adm-latido { 0%,100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(111,207,166,.5); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(111,207,166,0); } }

.adm-pendientes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-pendientes button {
  display: grid; gap: 2px; padding: 12px 8px; border-radius: var(--r-md); text-align: center;
  background: var(--lav-50); border: 1px solid var(--lav-200); font-size: .74rem; font-weight: 700; color: var(--ink-2);
  transition: transform .16s var(--ease), background .2s;
}
.adm-pendientes button:hover { background: var(--lav-100); }
.adm-pendientes button:active { transform: scale(.96); }
.adm-pendientes b { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--lav-700); }

/* --- gráfica de columnas: una sola serie, un solo eje --- */
.adm-medida { min-width: 240px; }
.adm-grafica {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 190px auto; column-gap: 8px;
  margin-top: 18px;
}
.adm-grafica__eje { position: relative; min-width: 40px; }
.adm-grafica__eje span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: .68rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adm-grafica__eje span:nth-child(1) { top: 0; }
.adm-grafica__eje span:nth-child(2) { top: 50%; }
.adm-grafica__eje span:nth-child(3) { top: 100%; }
.adm-grafica__zona { position: relative; }
.adm-grafica__nada {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-size: .86rem; font-weight: 700; color: var(--ink-3);
}
.adm-grafica__linea { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); }
.adm-grafica__linea--base { border-top: 1px solid var(--ink-4); }
.adm-grafica__barras { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 2px; }
.adm-barra {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 0; border: 0;   /* sin el relleno de botón: 30 barras caben en un móvil */
  border-radius: 6px; outline-offset: 1px;
}
.adm-barra span {
  display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0;
  background: var(--lav-400); transition: background .15s;
}
.adm-barra:hover span, .adm-barra:focus-visible span { background: var(--lav-500); }
.adm-barra:hover, .adm-barra:focus-visible { background: rgba(155,120,230,.07); }
.adm-barra:focus-visible { outline: 2px solid var(--lav-400); }
.adm-barra em {
  position: absolute; left: 50%; transform: translate(-50%, -4px); margin-bottom: 0;
  font-size: .68rem; font-weight: 800; font-style: normal; color: var(--ink-2); white-space: nowrap; pointer-events: none;
}
.adm-grafica__tip {
  position: absolute; top: 0; transform: translateX(-50%); z-index: 2; pointer-events: none;
  display: grid; gap: 1px; padding: 7px 11px; border-radius: 12px; white-space: nowrap; text-align: center;
  background: var(--ink); color: #fff; box-shadow: var(--sh-md);
}
.adm-grafica__tip strong { font-family: var(--display); font-size: .95rem; }
.adm-grafica__tip span { font-size: .7rem; opacity: .8; }
.adm-grafica__fechas {
  grid-column: 2; display: flex; justify-content: space-between; padding-top: 6px;
  font-size: .68rem; font-weight: 700; color: var(--ink-3);
}
.adm-tabla-datos { margin-top: 14px; overflow-x: auto; }
.adm-tabla-datos summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--lav-500); }
.adm-tabla-datos .adm-tabla { margin-top: 8px; }

/* --- tablas --- */
.adm-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.adm-tabla th {
  text-align: left; padding: 7px 8px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.adm-tabla td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-tabla tbody tr:last-child td { border-bottom: 0; }
.adm-tabla-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
/* Correos: la configuración de ejemplo y la vista previa de cada plantilla */
.adm-codigo { margin: 8px 0 0; padding: 12px 14px; background: var(--lav-50); border-radius: var(--r-sm); font-size: .78rem; line-height: 1.5; overflow-x: auto; white-space: pre; }
.adm-correo-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.adm-correo-botones .segmented__btn { white-space: nowrap; }
.adm-correo-asunto { margin: 12px 0 8px; overflow-wrap: anywhere; }
.adm-correo-marco { background: #FFF9FC; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; overflow: hidden; }
.adm-correo-vista { display: block; width: 100%; height: 760px; margin: 0 auto; border: 0; background: #FFF9FC; transition: width .2s ease; }
.adm-correo-vista.is-movil { width: 375px; max-width: 100%; box-shadow: 0 0 0 1px var(--line); border-radius: 18px; }
.adm-correo-texto { margin: 0; padding: 14px; background: var(--lav-50); border-radius: var(--r-sm); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-tabla--codigos td:nth-child(2) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tabla__acciones { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.adm-tabla .btn--sm { padding: 6px 11px; font-size: .78rem; }

/* --- usuarios --- */
.adm-filtros { display: grid; gap: 10px; margin-bottom: 4px; }
.adm-usuarios { display: grid; gap: 12px; }
@media (min-width: 1000px) { .adm-usuarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-usuario, .adm-solicitud, .adm-denuncia {
  padding: 14px; border-radius: var(--r-md); background: #fff; border: 1.5px solid var(--line);
}
.adm-denuncias { display: grid; gap: 12px; margin-top: 14px; }
.adm-denuncia p { overflow-wrap: anywhere; }
.adm-denuncia__varias { color: var(--pink-600); }
.adm-denuncia__chat { margin-top: 8px; }
.adm-denuncia__chat summary { cursor: pointer; font-size: .82rem; font-weight: 800; color: var(--lav-700); }
.adm-denuncia__hilo {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; max-height: 340px; overflow-y: auto;
  border-radius: var(--r-md); background: #FDFBFF; border: 1px solid var(--line);
}
.adm-usuario.is-bloqueado { background: var(--pink-50); border-color: var(--pink-200); }
.adm-usuario__cabeza { display: flex; align-items: center; gap: 11px; }
.adm-usuario__cabeza strong { font-family: var(--display); font-size: 1.02rem; }
.adm-usuario__linea { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-2); overflow-wrap: anywhere; }
.adm-avatar {
  position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--lav-300), var(--pink-300)); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.adm-avatar .adm-punto { position: absolute; right: -1px; bottom: -1px; }
.adm-usuario__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin: 14px 0 12px; }
.adm-dato { display: grid; gap: 1px; min-width: 0; }
.adm-dato span { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.adm-dato b { font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-dato i { font-size: .72rem; font-style: normal; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-usuario__acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-usuario__detalle { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.adm-acceso { display: grid; gap: 8px; justify-items: start; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.adm-acceso p { margin: 0; }
.adm-acceso__botones { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-acceso__botones:empty { display: none; }
.adm-acceso__fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-acceso__fecha .input { width: auto; min-width: 0; padding: 8px 12px; }
.adm-dos { display: grid; gap: 14px; }
.adm-dos h4 { font-size: .92rem; margin-bottom: 6px; }
.adm-dos > div { min-width: 0; overflow-x: auto; }
@media (min-width: 600px) {
  .adm-dos--lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- desde dónde se conectan --- */
.adm-lugares { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.adm-lugares li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: var(--r-xs); background: var(--lav-50); font-size: .86rem;
}
.adm-lugares span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-lugares i { font-style: normal; font-size: .74rem; color: var(--ink-3); }
.adm-lugares b { font-variant-numeric: tabular-nums; color: var(--lav-700); }

/* --- códigos --- */
.adm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.adm-form .input { padding: 11px 14px; }
.adm-form__ancho { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .adm-form--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-crear .btn--block { width: auto; min-width: 220px; }
}
.adm-nuevos {
  display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: var(--r-md);
  background: var(--mint-50); border: 1px solid var(--mint-200);
}
.adm-nuevo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-nuevo code { flex: 1 1 auto; font-size: .95rem; padding: 6px 10px; background: #fff; }

/* --- chat: lista de conversaciones + la conversación abierta --- */
.adm-chat {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  height: min(760px, calc(100dvh - 170px)); min-height: 420px;
  background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-sm); overflow: hidden;
}
.adm-chat__lista { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-right: 1px solid var(--line); }
.adm-chat__lista .input { padding: 10px 14px; flex: 0 0 auto; }
.adm-chat__lista #chLista { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; }
.adm-conv {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); text-align: left;
  transition: background .15s;
}
.adm-conv:hover { background: var(--lav-50); }
.adm-conv.is-on { background: var(--lav-100); }
.adm-conv .grow { display: grid; }
.adm-conv strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-conv__ultimo { font-size: .76rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-conv__ultimo em { color: var(--mint-600); font-style: normal; }
.adm-conv__ultimo i { color: var(--ink-3); font-style: normal; }
.adm-conv__meta { display: grid; justify-items: end; gap: 4px; font-size: .66rem; color: var(--ink-3); white-space: nowrap; }
.adm-chat__panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.adm-chat__vacio { margin: auto; display: grid; justify-items: center; gap: 8px; color: var(--ink-2); font-weight: 700; text-align: center; padding: 20px; }
.adm-chat__vacio > div { width: 120px; height: 120px; }
.adm-chat__vacio .koda { width: 120px; height: 120px; }
.adm-chat__cabeza {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--lav-100), var(--pink-100)); border-bottom: 1px solid var(--lav-200);
}
.adm-chat__cabeza [data-volver] { display: none; }
.adm-chat__cabeza [data-escribe-sub] { color: var(--mint-600); font-weight: 700; }
.adm-chat .chat__enviar { padding-bottom: 10px; }
@media (max-width: 759px) {
  .adm-chat { grid-template-columns: 1fr; height: calc(100dvh - 150px); }
  .adm-chat__lista { border-right: 0; }
  .adm-chat__panel { display: none; }
  .adm-chat.con-conversacion .adm-chat__lista { display: none; }
  .adm-chat.con-conversacion .adm-chat__panel { display: flex; }
  .adm-chat__cabeza [data-volver] { display: inline-flex; }
}

/* --- solicitudes --- */
.adm-solicitudes { display: grid; gap: 12px; margin-top: 12px; }
.adm-solicitud__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.adm-solicitud__cabeza strong { font-family: var(--display); font-size: 1.02rem; }
.adm-solicitud__msg {
  margin: 8px 0 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--lav-50);
  font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .adm-pendientes { grid-template-columns: 1fr; }
  .adm-pendientes button { grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: 10px; padding: 10px 14px; }
  .adm-form { grid-template-columns: 1fr; }
  .adm-cabeza__titulo .tiny { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-punto { animation: none; }
}

/* ==========================================================================
   Modo estudios: asignaturas, sus colores y sus fechas
   ========================================================================== */
/* Cada asignatura tiene un color de la paleta: --asig (fuerte) y --asig-claro. */
.asig--lav    { --asig: var(--lav-400);   --asig-claro: var(--lav-100);   --asig-borde: var(--lav-200);   --asig-tinta: var(--lav-700); }
.asig--pink   { --asig: var(--pink-400);  --asig-claro: var(--pink-100);  --asig-borde: var(--pink-200);  --asig-tinta: var(--pink-600); }
.asig--mint   { --asig: var(--mint-400);  --asig-claro: var(--mint-100);  --asig-borde: var(--mint-200);  --asig-tinta: var(--mint-600); }
.asig--sky    { --asig: var(--sky-400);   --asig-claro: var(--sky-100);   --asig-borde: var(--sky-200);   --asig-tinta: #2E6F9E; }
.asig--butter { --asig: var(--butter-300); --asig-claro: var(--butter-100); --asig-borde: var(--butter-200); --asig-tinta: #8A6A1E; }
.asig--peach  { --asig: var(--peach-400); --asig-claro: var(--peach-100); --asig-borde: var(--peach-200); --asig-tinta: #A8572B; }

.asig-punto {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--asig, var(--lav-400)); margin-right: 6px; vertical-align: 0;
  box-shadow: 0 0 0 2px #fff;
}
.asig-punto.is-hecho { opacity: .35; }
.asig-fill--lav { background: var(--lav-400); } .asig-fill--pink { background: var(--pink-400); }
.asig-fill--mint { background: var(--mint-400); } .asig-fill--sky { background: var(--sky-400); }
.asig-fill--butter { background: var(--butter-300); } .asig-fill--peach { background: var(--peach-400); }

/* Lo que toca hoy, con el color de su asignatura a la izquierda */
.item--asig { border-left: 4px solid var(--asig); }
.item__num--asig { background: var(--asig-claro); color: var(--asig-tinta); }
.item__asig { font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--asig-tinta, var(--ink-2)); display: flex; align-items: center; }

/* Próximas fechas */
.fechas { display: grid; gap: 8px; }
.fecha {
  display: flex; align-items: stretch; gap: 10px; padding: 8px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
}
.fecha.is-cerca { border-color: var(--pink-200); background: var(--pink-50); }
.fecha.is-hecha { opacity: .6; }
.fecha__dia {
  flex: 0 0 52px; display: grid; place-content: center; text-align: center; gap: 0; border-radius: 14px;
  background: var(--asig-claro); color: var(--asig-tinta); border: 1.5px solid var(--asig-borde);
}
.fecha__dia strong { font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.fecha__dia span { font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.fecha__cuerpo { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left; padding: 2px 0; }
.fecha__titulo { font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.fecha__meta { font-size: .76rem; color: var(--ink-2); font-weight: 700; }
.fecha__falta { color: var(--pink-600); }
.fecha__prep { display: flex; align-items: center; gap: 8px; }
.fecha__prep .bar { flex: 1; }
.fecha__check {
  flex: 0 0 40px; align-self: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--mint-300); color: var(--mint-600); font-weight: 800; font-size: 1.05rem; background: #fff;
  transition: background .2s, color .2s, transform .16s var(--ease);
}
.fecha__check:active { transform: scale(.9); }
.fecha__check.is-on { background: var(--mint-400); border-color: var(--mint-400); color: #fff; }
.fechas-atrasadas { display: grid; gap: 8px; margin-bottom: 10px; }
.fecha-atrasada {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--butter-100); border: 1px solid var(--butter-200);
}
.fecha-atrasada .btn { width: auto; flex: 0 0 auto; }

/* Tus asignaturas (en Hoy) */
.asig-resumen { display: grid; gap: 10px; }
.asig-resumen__fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.asig-resumen__nombre { font-weight: 700; font-size: .88rem; display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asig-resumen__dato { white-space: nowrap; text-align: right; min-width: 64px; }

/* Temario por asignaturas */
.asig-card { border-top: 5px solid var(--asig); }
.asig-card .card__title { display: flex; align-items: center; min-width: 0; }
.asig-fechas { display: grid; gap: 6px; margin-bottom: 10px; }
.asig-fecha {
  text-align: left; padding: 8px 12px; border-radius: var(--r-sm); font-size: .84rem; font-weight: 700;
  background: var(--asig-claro); color: var(--ink); border: 1px solid var(--asig-borde);
}
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--lav-50); border: 1px solid var(--line); font-size: .9rem;
}

/* Hojas: elegir color, temas de un examen, un día del calendario */
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--asig); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--asig-borde); transition: transform .16s var(--ease);
}
.color-btn.is-on { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.08); }
.fe-temas { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.fe-tema {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line); font-size: .86rem; font-weight: 600;
}
.fe-tema input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lav-500); flex: 0 0 auto; }
.dia-fecha {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--asig-claro); border: 1.5px solid var(--asig-borde);
}
.dia-fecha__tipo { font-size: 1.4rem; }

/* Calendario: entregas (los exámenes usan la etiqueta de siempre) y puntos de color */
.cal__cell { position: relative; }
.cal__examtag--entrega { background: var(--lav-200); color: var(--lav-700); }
.cal__examtag--ley { position: static; transform: none; display: inline-block; margin-right: 4px; box-shadow: none; }
.cal__marcas { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); display: flex; gap: 2px; pointer-events: none; }
.cal__marcas .asig-punto { width: 6px; height: 6px; margin: 0; box-shadow: 0 0 0 1px #fff; }

/* Cuestionario: fechas que ya sabe */
.onb-fecha { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; padding: 10px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.onb-fecha .select, .onb-fecha .input { padding: 10px 12px; font-size: .88rem; }
.onb-fecha .input { grid-column: 1 / 2; }
.onb-fecha .icon-btn { justify-self: end; }

/* Logo: «My» en tinta y «Koda» en degradado, con su huellita */
.logo {
  display: inline-flex; align-items: flex-start; gap: 1px;
  font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.015em; line-height: 1;
  color: var(--ink);
}
.logo b {
  font-weight: 800;
  background: linear-gradient(120deg, var(--lav-500), var(--pink-400));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.logo__huella { width: 13px; height: 13px; fill: var(--pink-400); transform: rotate(20deg) translateY(-1px); flex: 0 0 auto; }
.lp-tarjetas--3 { grid-template-columns: repeat(3, 1fr); }
.lp-tarjeta--para span { background: var(--lav-100); }
.lp-tarjeta--para:nth-child(2) span { background: var(--sky-100); }
.lp-tarjeta--para:nth-child(3) span { background: var(--mint-100); }
.lp-tarjeta--para:nth-child(4) span { background: var(--butter-100); }
.lp-tarjetas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .lp-tarjetas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lp-tarjetas--4 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .lp-tarjetas--3 { grid-template-columns: 1fr; } }


/* Cuestionario: las asignaturas, cada una en su curso (bloques desplegables) */
.onb-ca-lista { display: grid; gap: 8px; }
.onb-ca { border-radius: var(--r-md); background: #fff; border: 2px solid var(--line); overflow: hidden; transition: border-color .2s; }
.onb-ca.is-open { border-color: var(--lav-300); }
.onb-ca__cabeza { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; text-align: left; }
.onb-ca__cabeza strong { font-family: var(--display); font-size: 1.05rem; }
.onb-ca__cuenta { flex: 1; font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.onb-ca__flecha { color: var(--ink-3); transition: transform .2s; }
.onb-ca.is-open .onb-ca__flecha { transform: rotate(180deg); }
.onb-ca__cuerpo { display: grid; gap: 10px; padding: 0 14px 14px; }
.onb-ca__cuerpo .textarea { min-height: 120px; }
.onb-ca__sug { font-size: .76rem; padding: 6px 11px; }

/* Temario: las asignaturas agrupadas por curso */
.temario-curso { font-family: var(--display); font-size: 1.15rem; margin: 8px 4px -4px; color: var(--ink-2); }

/* Apuntar día (estudios): los temas por curso y por asignatura, en desplegables */
.lg-grupos { display: grid; gap: 8px; }
.lg-grupos summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-size: .92rem;
}
.lg-grupos summary::-webkit-details-marker { display: none; }
.lg-grupos summary::after { content: "▾"; color: var(--ink-3); margin-left: 4px; transition: transform .2s; }
.lg-grupos details[open] > summary::after { transform: rotate(180deg); }
.lg-cuenta { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.lg-marcados { color: var(--mint-600); font-weight: 800; }
.lg-curso { border-radius: var(--r-md); background: #fff; border: 2px solid var(--line); }
.lg-curso[open] { border-color: var(--lav-300); }
.lg-curso > summary strong { font-family: var(--display); font-size: 1.02rem; }
.lg-curso__asigs { display: grid; gap: 8px; padding: 0 10px 10px; }
.lg-asig { border-radius: var(--r-md); background: var(--asig-claro); border: 1.5px solid var(--asig-borde); }
.lg-asig > summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-asig > .list { padding: 0 8px 8px; }

/* Tests: qué es un simulacro, en tres pasos */
.sim-pasos { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: .86rem; font-weight: 600; color: var(--ink); }

/* Apuntar día: qué páginas son de cada documento cuando el tema tiene varios */
.logrow__docs { flex-basis: 100%; }

.lg-sin-temas { margin-top: 8px; }

/* Cuestionario: opciones que se pueden marcar a la vez (repasos) */
.onb__check {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  border: 2px solid var(--lav-300); color: #fff; font-weight: 800; font-size: .85rem;
}
.onb__opt.is-on .onb__check { background: var(--lav-500); border-color: var(--lav-500); }

/* Calendario: el emoji de cómo fue el día, en la esquina del número */
.cal__animo {
  position: absolute; top: -9px; right: -9px; font-size: 1.1rem; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); pointer-events: none;
}

/* Casa de Koda: suelo y paredes comprados (textura + color) */
.escenario--casa .casa-pared { position: absolute; left: 0; right: 0; top: 0; height: 58%; }
.escenario--casa .casa-suelo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  box-shadow: inset 0 10px 12px -10px rgba(75,66,89,.28);
}

/* ==========================================================================
   Horario y sesiones · el horario de clases (horario.js)
   ========================================================================== */
.hs-tabs { margin-bottom: 14px; }
@media (max-width: 400px) { .hs-ancho { display: none; } }
.horario-card .card__head .btn { white-space: nowrap; }
.horario-card { padding-left: 12px; padding-right: 12px; }
.horario__pista { margin: -4px 0 12px; }
.horario {
  display: grid; grid-template-columns: 34px repeat(var(--dias), minmax(0, 1fr));
  column-gap: 3px; -webkit-user-select: none; user-select: none;
}
.horario__dia {
  text-align: center; padding: 4px 0 6px; margin-bottom: 4px; border-radius: 9px;
  font-size: .74rem; font-weight: 800; color: var(--ink-3);
}
.horario__dia.is-hoy { color: var(--lav-700); background: var(--lav-100); }
.horario__horas { position: relative; }
.horario__horas span {
  position: absolute; right: 4px; transform: translateY(-50%);
  font-size: .62rem; font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.horario__horas span:first-child { transform: none; }
.horario__col {
  position: relative; border-radius: 10px; cursor: pointer;
  background: #FCFAFF repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--px-hora, 52px));
}
.horario__col.is-hoy { background-color: #F6F1FE; }
.horario__clase {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden;
  padding: 4px 4px 3px 5px; border: 0; border-left: 3px solid var(--asig); border-radius: 8px;
  background: var(--asig-claro); color: var(--asig-tinta); text-align: left; font: inherit; cursor: pointer;
  box-shadow: 0 1px 3px rgba(75, 66, 89, .08); transition: transform .15s var(--ease);
}
.horario__clase b {
  max-width: 100%; font-size: .66rem; font-weight: 800; line-height: 1.15;
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.horario__clase span {
  max-width: 100%; font-size: .6rem; font-weight: 700; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.horario__clase:active { transform: scale(.96); }
.horario__ahora {
  position: absolute; left: -2px; right: -2px; height: 2px; z-index: 2; pointer-events: none;
  background: var(--pink-400); border-radius: 2px;
}
.horario__ahora::before {
  content: ''; position: absolute; left: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-400);
}
.horario-item { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.horario-item__color { flex: 0 0 6px; align-self: stretch; min-height: 34px; border-radius: 4px; background: var(--asig); }
.horario-item .item__body { min-width: 0; }
.horario__vaciar { color: var(--pink-600); }
.horario-asigs { display: flex; flex-wrap: wrap; gap: 6px; }
.horario-asig { padding: 7px 12px; font-size: .82rem; }
.horario-asig .asig-punto { flex: 0 0 auto; }
.horario-asig.is-on { background: var(--asig-claro, var(--lav-100)); border-color: var(--asig, var(--lav-300)); color: var(--asig-tinta, var(--lav-700)); }
.horario-horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.horario-horas .input { min-width: 0; }
.horario-duraciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.horario-duraciones .chip { padding: 6px 12px; font-size: .8rem; }
@media (max-width: 380px) {
  .horario-card { padding-left: 8px; padding-right: 8px; }
  .horario { grid-template-columns: 30px repeat(var(--dias), minmax(0, 1fr)); column-gap: 2px; }
  .horario__clase { padding: 3px 3px 2px 4px; border-left-width: 2px; }
  .horario__clase b { font-size: .62rem; }
}

/* Hoy: las clases de hoy */
.clases-hoy { display: grid; gap: 8px; }
.clase-hoy {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px;
  background: var(--asig-claro); border: 1.5px solid var(--asig-borde);
}
.clase-hoy__hora {
  display: grid; min-width: 44px; line-height: 1.05;
  font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--asig-tinta);
}
.clase-hoy__hora small { font-size: .7rem; font-weight: 700; opacity: .75; }
.clase-hoy__cuerpo { flex: 1; min-width: 0; display: grid; }
.clase-hoy__cuerpo b, .clase-hoy__cuerpo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clase-hoy__cuerpo b { font-size: .92rem; }
.clase-hoy__cuerpo span { font-size: .76rem; color: var(--ink-2); }
.clase-hoy.is-pasada { opacity: .5; }
.clase-hoy.is-ahora { box-shadow: 0 0 0 2px var(--asig); }

/* Selector de idioma (portada, entrar y páginas legales): un desplegable de
   enlaces ?idioma=xx que funciona sin JavaScript. */
.idiomas { position: relative; flex: 0 0 auto; }
.idiomas__boton {
  display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer;
  padding: 7px 11px; border-radius: var(--r-pill); background: #fff; border: 2px solid var(--line);
  font-weight: 800; font-size: .8rem; color: var(--ink-2); user-select: none;
}
.idiomas__boton::-webkit-details-marker { display: none; }
.idiomas__boton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.idiomas[open] .idiomas__boton, .idiomas__boton:hover { border-color: var(--lav-300); color: var(--lav-700); }
.idiomas__lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px;
  margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: 0 12px 30px -12px rgba(75, 66, 89, .35);
}
.idiomas__lista a {
  display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .9rem;
}
.idiomas__lista a:hover { background: var(--lav-50); }
.idiomas__lista a[aria-current] { background: var(--lav-100); color: var(--lav-700); }
.legal .idiomas { float: right; }
.lp-nav > .idiomas { margin-left: auto; }   /* en «Entrar», junto a «Inicio» */

/* Perfil → Idioma: los 7 idiomas, cada uno escrito en el suyo */
.idioma-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.idioma-lista__opcion { justify-content: center; padding: 12px 10px; font-size: .95rem; }

/* La web de pruebas (dev): una pestañita «DEV» arriba, que no tapa nada ni se puede pulsar */
.marca-dev {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 2147483000;
  padding: 1px 10px 2px; border-radius: 0 0 8px 8px; background: #D93025; color: #fff;
  font: 800 10px/1.4 system-ui, sans-serif; letter-spacing: .12em; pointer-events: none;
}

/* --- Fotos de perfil (assets/img/avatares, tools/avatares.py): llenan su circulito --- */
.foto { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar--foto { background: #fff; box-shadow: 0 0 0 2px #fff, var(--sh-sm); }
.avatar.is-active { box-shadow: 0 0 0 3px var(--lav-300), var(--sh-sm); }
.conv__avatar--foto { background: none; }

/* Tu cuenta: el menú que sale al tocar tu foto de arriba (Perfil, Ajustes, Cerrar sesión) */
.menu-cuenta {
  position: fixed; z-index: 70; width: 250px; max-width: calc(100vw - 20px);
  padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-pop);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .16s, transform .22s var(--ease);
}
.menu-cuenta.is-on { opacity: 1; transform: none; }
.menu-cuenta__yo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-cuenta__yo .avatar { width: 42px; height: 42px; }
.menu-cuenta__yo .grow { min-width: 0; }
.menu-cuenta__yo strong, .menu-cuenta__yo .tiny { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cuenta__yo strong { font-family: var(--display); font-size: 1rem; line-height: 1.25; }
.menu-cuenta [role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border-radius: var(--r-sm);
  font-weight: 700; font-size: .95rem; color: var(--ink); text-align: left;
}
.menu-cuenta [role="menuitem"]:hover, .menu-cuenta [role="menuitem"]:focus-visible { background: var(--lav-100); outline: none; }
.menu-cuenta [role="menuitem"] .emoji { width: 22px; text-align: center; }
.menu-cuenta .menu-cuenta__salir { color: var(--pink-600); }
.menu-cuenta .menu-cuenta__salir:hover, .menu-cuenta .menu-cuenta__salir:focus-visible { background: var(--pink-50); }

/* Perfil: tu foto en grande (tocándola se cambia) */
.perfil-yo { display: flex; align-items: center; gap: 16px; }
.perfil-yo .grow { min-width: 0; }
.perfil-yo h2 { margin: 0; overflow-wrap: anywhere; }
.perfil-yo__foto { position: relative; width: 86px; height: 86px; font-size: 2.1rem; }
.perfil-yo__lapiz {
  position: absolute; right: -3px; bottom: -3px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); box-shadow: var(--sh-sm); font-size: .8rem;
}
.perfil-yo__usuario { margin: 1px 0 3px; font-weight: 800; color: var(--lav-500); overflow-wrap: anywhere; }

/* Elegir la foto: la rejilla, y la inicial como «sin foto» */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px; }
.fotos__una {
  aspect-ratio: 1; padding: 3px; border-radius: 50%; border: 3px solid transparent;
  transition: transform .2s var(--ease), border-color .2s;
}
.fotos__una img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.fotos__una:active { transform: scale(.93); }
.fotos__una.is-on { border-color: var(--lav-500); background: var(--lav-100); }
.fotos__una--inicial > span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(140deg, var(--lav-300), var(--pink-300)); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.7rem;
}

/* El nombre de usuario: la «@» delante y si está libre */
.input-arroba { position: relative; }
.input-arroba > span {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-weight: 800; pointer-events: none;
}
.input-arroba .input { padding-left: 32px; }
.usuario-libre { color: var(--mint-600); font-weight: 700; }
.usuario-cogido { color: var(--pink-600); font-weight: 700; }
.enlace { padding: 0; color: var(--lav-500); font: inherit; font-weight: 800; text-decoration: underline; }

/* Amigos: cómo te ven (tu foto y tu nombre de usuario) */
.amigos__yo {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--lav-50);
}
.amigos__yo .grow { min-width: 0; }
.amigos__yo .tiny, .amigos__yo strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amigos__yo .conv__avatar { width: 40px; height: 40px; flex-basis: 40px; }

/* --- Iconos de la interfaz (assets/img/iconos.svg, el mismo trazo que los de la barra).
       Sustituyen a los emojis que hacían de icono; los de contenido (lo que dice
       Koda, regalos, la tienda, los huesos…) se quedan como emojis. --- */
.ico {
  display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.24em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* títulos de tarjeta: en color, como estaban los emojis */
.card__title .emoji { display: inline-grid; place-items: center; color: var(--lav-500); }
.card__title .emoji .ico { width: 21px; height: 21px; }
/* donde no hay hueco entre icono y texto */
.vmenu__op .ico, .segmented__btn .ico, .visor__burbuja-acciones button .ico { margin-right: 6px; }
.vmenu__op .ico { color: var(--lav-500); }
.vmenu__op--peligro .ico { color: currentColor; }
/* botones de solo icono */
.chat-btn .ico, .amigo__btn .ico, .visor__icono .ico { width: 20px; height: 20px; }
.chat-btn, .amigo__btn { color: var(--lav-700); }
.icon-btn .ico { width: 17px; height: 17px; color: var(--lav-700); }
.doc__quitar { display: grid; place-items: center; color: var(--pink-600); }
.doc__quitar .ico { width: 19px; height: 19px; }
.chat__permiso > .ico { width: 22px; height: 22px; }
/* menú de tu cuenta */
.menu-cuenta [role="menuitem"] .emoji { display: inline-grid; place-items: center; color: var(--lav-500); }
.menu-cuenta [role="menuitem"] .ico { width: 20px; height: 20px; }
.menu-cuenta .menu-cuenta__salir .emoji { color: var(--pink-600); }
/* títulos de las hojas */
.sheet__title { display: flex; align-items: center; gap: 9px; }
.sheet__title > .ico { width: 24px; height: 24px; color: var(--lav-500); }
/* el panel de administración */
.adm-pestanas button .ico { width: 18px; height: 18px; }
/* la portada: cada icono, del color de su cuadradito */
.lp-tarjeta span .ico { width: 27px; height: 27px; color: var(--lav-700); }
.lp-tarjeta:nth-child(2) span .ico { color: var(--pink-600); }
.lp-tarjeta:nth-child(3) span .ico { color: #A97A12; }
.lp-tarjeta:nth-child(4) span .ico { color: var(--mint-600); }
.lp-tarjeta:nth-child(5) span .ico { color: #3D8FCB; }
.lp-tarjeta:nth-child(6) span .ico { color: #D9773F; }
.adm-punto--chip { position: static; display: inline-block; flex: none; }
#tsReloj .ico, .stat__value .ico { margin-right: 4px; }

/* La puerta de la web de pruebas (puerta_dev en bootstrap.php) */
.puerta-dev { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.puerta-dev__caja { display: grid; gap: 14px; justify-items: center; width: 100%; max-width: 380px; text-align: center; }
.puerta-dev__caja h1 { margin: 0; font-family: var(--display); }
.puerta-dev__caja p { margin: 0; }
.puerta-dev__caja .field { width: 100%; text-align: left; }
.puerta-dev__error { color: var(--pink-600); font-weight: 700; }