/* =========================================================
   PASITOS v0.14.0 · estilos
   Índice:
   1. Tokens (colores, tipografía, radios)
   2. Base
   3. Cabecera y pestañas
   4. Componentes comunes (botones, chips, toast)
   5. Tareas (tablero por columnas)
   5b. Brain dump y nubes
   6. Check-in: asistente y emociones
   7. Check-in: escaneo corporal
   8. Resultado
   9. Diario (entradas reutilizadas en el calendario)
   10. Respiración
   11. Gotas, jardín y calendario
   12. v0.4.0: etiquetas, foco, recarga, premios, patrones, ajustes
   12b. v0.5.0: «Me siento rara» (triggers)
   12c. v0.6.0: tarro de calma y controles de respiración
   12d. v0.7.0: modo marea
   12e. v0.8.0: señales de desconexión
   12f. v0.9.0: mar animado de la marea
   12g. v0.10.0: copia de seguridad
   12h. v0.12.0: menos ruido (dos columnas, marea discreta)
   12i. v0.13.0: estilo suave y tarjeta de tarea compacta
   12j. v0.14.0: revisar mi perspectiva
   13. Temas sensoriales, accesibilidad y responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Tinta: un ciruela profundo en vez de negro, más amable */
  --ink: #2E2A47;
  --ink-soft: #6B6688;
  --bg: #EDF4FC;
  --surface: #FFFFFF;

  /* Pasteles + su versión intensa para acentos */
  --lavanda: #DDD2FF;   --lavanda-x: #8E74F2;
  --menta: #C9F2DF;     --menta-x: #3FAE80;
  --melocoton: #FFDCC8; --melocoton-x: #F08A55;
  --rosa: #FFCFE0;      --rosa-x: #E0628F;
  --mantequilla: #FFF1B8; --mantequilla-x: #D9A91E;
  --cielo: #D1E8FF;     --cielo-x: #4B97DE;

  /* Niveles de tensión corporal */
  --lvl-none: #ECE8F8;
  --lvl-0: var(--menta);
  --lvl-1: var(--mantequilla);
  --lvl-2: #FFC9A3;
  --lvl-3: #FF9EBF;
  --lvl-off: #E4E6EF; /* niebla: zona que no notas */

  /* Tipografía: una sola familia redondeada del sistema */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  --fs-xs: .8125rem;
  --fs-s: .9375rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.375rem;
  --fs-xl: clamp(1.45rem, 2.4vw + .7rem, 1.95rem);

  /* Forma: borde de tinta + sombra desplazada suave (bold, pero redondo) */
  --line: 1.5px solid rgba(46, 42, 71, .18);
  --lift: 0 2px 10px rgba(46, 42, 71, .06);
  --lift-hover: 0 4px 16px rgba(46, 42, 71, .09);
  --r-xl: 32px;
  --r-l: 22px;
  --r-m: 14px;
  --r-pill: 999px;

  --ease: cubic-bezier(.34, 1.4, .64, 1);
}

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

html { height: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100%;
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--bg);
  /* Manchas de color fijas al fondo */
  background-image:
    radial-gradient(circle at 8% 12%, var(--mantequilla) 0 180px, transparent 181px),
    radial-gradient(circle at 96% 30%, var(--menta) 0 220px, transparent 221px),
    radial-gradient(circle at 15% 95%, var(--rosa) 0 200px, transparent 201px),
    linear-gradient(165deg, #E4F0FF 0%, #EAF5FA 45%, #EAF7F2 100%);
  background-attachment: fixed;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

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

/* ---------- 3. Cabecera y pestañas ---------- */
.app-header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 20px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand__logo {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-size: 26px;
  background: var(--lavanda);
  border: var(--line);
  border-radius: 18px 18px 18px 6px;
  box-shadow: var(--lift);
  transform: rotate(-6deg);
}

.brand__name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}

/* Etiqueta de versión junto al nombre */
.version {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--ink);
  background: var(--menta);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
}

.brand__greeting { font-size: var(--fs-s); color: var(--ink-soft); }

.tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--lift);
}

.tab {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-s);
  white-space: nowrap;
  transition: background-color .2s;
}

.tab:hover { background: var(--bg); }
.tab.is-active { background: var(--ink); color: #fff; }

.app-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 20px 110px; /* hueco para el botón flotante */
}

.panel { max-width: 760px; margin: 0 auto; }
.panel[data-panel="tareas"] { max-width: none; }
.panel__intro { margin: 18px 0 20px; max-width: 60ch; }

.panel__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.panel__lead { color: var(--ink-soft); }

/* ---------- 4. Componentes comunes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 10px 20px;
  border: var(--line);
  border-radius: var(--r-pill);
  font-weight: 600;
  background: var(--surface);
  box-shadow: var(--lift);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .2s;
}

.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-hover); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--primary { background: var(--lavanda-x); color: #fff; }
.btn--soft { background: var(--cielo); }
.btn--ghost { box-shadow: none; background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn--ghost:hover { box-shadow: none; transform: none; background: rgba(46, 42, 71, .06); }
.btn--danger { color: var(--rosa-x); }
.btn--small { min-height: 38px; padding: 6px 14px; font-size: var(--fs-s); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-weight: 700;
  font-size: var(--fs-s);
  transition: transform .15s var(--ease), border-color .15s, background-color .15s;
}

.chip:hover { transform: scale(1.04); }
.chip__emoji { font-size: 1.4rem; line-height: 1; }

.chip[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--chip-on, var(--lavanda));
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%);
  padding: 12px 22px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-pill);
  opacity: 0;
  transition: transform .35s var(--ease), opacity .25s;
  z-index: 20;
  max-width: calc(100% - 40px);
  text-align: center;
}

.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 5. Tareas ---------- */
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.task {
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--lift);
  overflow: hidden;
  transition: box-shadow .2s, opacity .2s;
}

.task.is-done { background: rgba(255, 255, 255, .45); border-style: dashed; box-shadow: none; }
.task.is-done .task__text { text-decoration: line-through; color: var(--ink-soft); }
.task.is-dragging { opacity: .45; }
.task[draggable="true"] .task__title { cursor: grab; }

.task__head { display: flex; align-items: center; gap: 8px; padding: 10px 6px 10px 10px; }

.task__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 4px 2px;
  border-radius: var(--r-m);
}

.task__text { font-weight: 600; font-size: var(--fs-s); line-height: 1.3; overflow-wrap: anywhere; }
.task__meta { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }

.task__chevron {
  flex: none;
  font-size: 1.1rem;
  transition: transform .25s var(--ease);
}
.task.is-open .task__chevron { transform: rotate(180deg); }

/* Casilla redonda grande, fácil de pulsar */
.check {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-weight: 700;
  font-size: 1rem;
  color: transparent;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.check:hover { transform: scale(1.1); }
.check[aria-pressed="true"] { background: var(--menta-x); color: #fff; }
.check--small { width: 28px; height: 28px; font-size: .85rem; }

.icon-btn {
  flex: none;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  color: var(--ink-soft);
}
.icon-btn:hover { background: rgba(46, 42, 71, .08); color: var(--ink); }

.progress {
  height: 6px;
  margin: 0 12px 12px;
  background: var(--bg);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
  transition: width .4s var(--ease);
}

.task__body {
  background: var(--surface);
  border-top: var(--line);
  padding: 14px 12px 12px;
  animation: unfold .3s var(--ease);
}

@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.task__hint { font-size: var(--fs-s); color: var(--ink-soft); margin-bottom: 12px; }

.steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; counter-reset: step; }

.step {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 6px 6px;
  font-size: var(--fs-s);
  border-radius: var(--r-m);
  border: 2px solid transparent;
}

.step__text { flex: 1; overflow-wrap: anywhere; }
.step__text::before { content: counter(step) ". "; font-weight: 600; color: var(--ink-soft); }
.step.is-done .step__text { text-decoration: line-through; color: var(--ink-soft); }

/* El siguiente paso destaca: es lo único en lo que hay que fijarse */
.step.is-next {
  background: var(--lavanda);
  border-color: var(--ink);
  font-weight: 600;
}
.step.is-next .step__text::after {
  content: "Ahora";
  margin-left: 8px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  vertical-align: 2px;
}

.steps-empty {
  padding: 14px;
  margin-bottom: 14px;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--r-m);
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.task__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

.add-step { display: flex; gap: 6px; margin-bottom: 10px; }
.add-step input {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border: 2px solid var(--lvl-none);
  border-radius: var(--r-pill);
  background: var(--bg);
}
.add-step input:focus { border-color: var(--ink); outline: none; }

.empty-state {
  padding: 32px 20px;
  text-align: center;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--r-xl);
  color: var(--ink-soft);
}
.empty-state strong { display: block; font-size: 2.4rem; }


/* Barra superior del tablero */
.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 18px;
}
.board-bar .panel__title { margin: 0; }

/* Interruptor «Más detalle» */
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-s); color: var(--ink-soft); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative;
  width: 44px; height: 26px;
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  transition: background-color .2s;
}
.switch__track::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .25s var(--ease);
}
.switch input:checked + .switch__track { background: var(--menta-x); }
.switch input:checked + .switch__track::before { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--lavanda-x); outline-offset: 3px; }

/* Tablero: rompe el ancho de lectura para dar aire a las 3 columnas */
.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.column {
  position: relative; /* contiene las etiquetas .sr-only: evita que ensanchen la página en móvil */
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  padding: 14px 12px 12px;
  background: var(--col-bg);
  border-radius: var(--r-xl);
  outline: 3px dashed transparent;
  outline-offset: -6px;
  transition: outline-color .2s;
}
.column.is-drop { outline-color: var(--ink); }

.column__head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 4px; }
.column__emoji { font-size: 1.5rem; line-height: 1; }
.column__title { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.02em; }
.column__count {
  margin-left: auto;
  min-width: 28px;
  padding: 2px 8px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-s);
  background: rgba(255, 255, 255, .7);
  border-radius: var(--r-pill);
}
.column__empty { padding: 4px 8px; font-size: var(--fs-s); color: var(--ink-soft); }
.column__done {
  align-self: flex-start;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.column .task-list { gap: 10px; }

/* «+ Añadir» discreto al pie de cada columna */
.add-col input {
  width: 100%;
  padding: 10px 14px;
  border: 2px dashed rgba(46, 42, 71, .3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5);
  font-weight: 700;
  font-size: var(--fs-s);
}
.add-col input::placeholder { color: var(--ink-soft); }
.add-col input:focus { outline: none; border-style: solid; border-color: var(--ink); background: var(--surface); }

/* Mover entre columnas */
.move { display: flex; gap: 6px; }
.move__btn {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1rem;
  transition: transform .15s var(--ease);
}
.move__btn:hover { transform: scale(1.12) rotate(-6deg); }

/* ---------- 5b. Brain dump y nubes ---------- */
.dump {
  position: relative;
  margin-top: 18px;
  padding: 34px 24px 22px;
  background: linear-gradient(180deg, var(--cielo) 0%, var(--lavanda) 100%);
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
}
.dump .panel__lead { margin-bottom: 18px; }
.dump__form { display: grid; gap: 12px; }
.dump__form textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px 18px;
  border: var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-m);
  resize: vertical;
}
.dump__form textarea:focus { outline: none; box-shadow: var(--lift); }
.dump__form .btn { justify-self: end; }
.dump__whisper {
  min-height: 1.5em;
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s var(--ease);
}
.dump__whisper.is-visible { opacity: 1; transform: none; }
.dump__hint { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-soft); text-align: center; max-width: 52ch; margin-inline: auto; }

/* La nube que sale volando */
.cloud-fx {
  position: fixed;
  z-index: 40;
  padding: 16px 26px 14px;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: cloud-away 2.8s cubic-bezier(.3, .1, .3, 1) forwards;
}
.cloud-fx__shape {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: var(--r-pill);
  /* contorno de tinta alrededor de toda la nube (cuerpo + bultos) */
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
          drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))
          drop-shadow(3px 3px 0 var(--ink));
}
.cloud-fx__shape::before,
.cloud-fx__shape::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.cloud-fx__shape::before { width: 44px; height: 44px; top: -20px; left: 16%; }
.cloud-fx__shape::after  { width: 60px; height: 60px; top: -30px; right: 18%; }
.cloud-fx__text {
  position: relative;
  display: block;
  max-width: 240px;
  font-weight: 600;
  font-size: var(--fs-s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes cloud-away {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  12%  { transform: translate(-50%, -20px) scale(1.05); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--drift)), var(--rise)) scale(.75); opacity: 0; }
}

/* Nubes guardadas (plegadas por defecto) */
.clouds { margin-top: 18px; }
.clouds__toggle {
  padding: 8px 16px;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--r-pill);
  background: transparent;
  font-weight: 600;
  font-size: var(--fs-s);
  color: var(--ink-soft);
}
.clouds__toggle:hover { border-style: solid; color: var(--ink); }
.clouds__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cloud-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  background: rgba(255, 255, 255, .6);
  border: 1.5px dashed rgba(46, 42, 71, .2);
  border-radius: var(--r-pill);
}
.cloud-item__text { flex: 1; font-weight: 600; overflow-wrap: anywhere; color: var(--ink-soft); }
.cloud-item__go {
  flex: none;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cielo);
  font-weight: 600;
  font-size: var(--fs-xs);
  white-space: nowrap;
  transition: transform .15s var(--ease);
}
.cloud-item__go:hover { transform: translateY(-2px); }

/* ---------- 6. Check-in: asistente y emociones ---------- */
.wizard-steps {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
  counter-reset: wiz;
}

.wizard-steps li {
  counter-increment: wiz;
  flex: 1;
  padding: 8px 0 0;
  border-top: 5px solid var(--lvl-none);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
}
.wizard-steps li::before { content: counter(wiz) " · "; }
.wizard-steps li.is-current { border-color: var(--lavanda-x); color: var(--ink); }
.wizard-steps li.is-past { border-color: var(--ink); }

.emotion-families { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }

.family {
  padding: 16px;
  border-radius: var(--r-l);
  background: var(--family-bg);
  --chip-on: var(--surface);
}
.family__title { font-size: var(--fs-s); font-weight: 600; margin-bottom: 10px; }
.family__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.family .chip { background: rgba(255, 255, 255, .65); }

.chip--unknown { background: var(--surface); border: 2px dashed var(--ink-soft); }

.intensity {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--r-l);
}
.intensity__label { font-weight: 600; display: block; margin-bottom: 8px; }
.intensity input { width: 100%; accent-color: var(--lavanda-x); height: 28px; }
.intensity__scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }

.wizard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ---------- 7. Escaneo corporal ---------- */
.scan {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 20px;
  align-items: start;
}

.scan__figure {
  margin: 0;
  padding: 18px 12px 12px;
  background: var(--surface);
  border: var(--line);
  border-radius: 110px 110px var(--r-l) var(--r-l);
  box-shadow: var(--lift);
}

#body-svg { display: block; width: 100%; height: auto; max-height: 380px; }

.zone {
  fill: var(--lvl-none);
  stroke: var(--ink);
  stroke-width: 2;
  cursor: pointer;
  transition: fill .3s;
}
.zone:hover { fill: var(--lavanda); }
.zone[data-level="0"] { fill: var(--lvl-0); }
.zone[data-level="1"] { fill: var(--lvl-1); }
.zone[data-level="2"] { fill: var(--lvl-2); }
.zone[data-level="3"] { fill: var(--lvl-3); }
.zone.is-current { stroke: var(--lavanda-x); stroke-width: 4; stroke-dasharray: 6 4; animation: march 1.2s linear infinite; }

@keyframes march { to { stroke-dashoffset: -20; } }

.scan__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); margin-right: 4px; vertical-align: -1px; }
.dot--0 { background: var(--lvl-0); }
.dot--1 { background: var(--lvl-1); }
.dot--2 { background: var(--lvl-2); }
.dot--3 { background: var(--lvl-3); }

.scan__card {
  padding: 22px;
  background: var(--lavanda);
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
}
.scan__count { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.scan__zone { font-size: var(--fs-l); font-weight: 700; margin: 2px 0 8px; }
.scan__prompt { margin-bottom: 18px; max-width: 46ch; }

.levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.level {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: var(--line);
  border-radius: var(--r-m);
  background: var(--level-bg);
  font-weight: 600;
  text-align: left;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.level:hover { transform: translate(-2px, -2px); box-shadow: var(--lift); }
.level[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--ink); }
.level__emoji { font-size: 1.5rem; }

.scan__nav { display: flex; justify-content: space-between; margin-top: 12px; }

/* ---------- 8. Resultado ---------- */
.result { display: grid; gap: 16px; margin-top: 22px; }

.result__hero {
  padding: 24px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
}
.result__emojis { font-size: 2.6rem; letter-spacing: .1em; line-height: 1.2; margin-bottom: 8px; }
.result__title { font-size: var(--fs-l); font-weight: 700; margin-bottom: 6px; }
.result__text { color: var(--ink-soft); max-width: 60ch; }

.result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.result__box { padding: 18px; border-radius: var(--r-l); background: var(--box-bg, var(--cielo)); }
.result__box h3 { font-size: var(--fs-s); font-weight: 600; margin-bottom: 8px; }
.result__box ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

.meter { display: flex; gap: 4px; margin: 8px 0; }
.meter span { flex: 1; height: 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); }
.meter span.is-on { background: var(--ink); }

/* ---------- 9. Diario ---------- */
.history { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }

.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-l);
}
.entry__emojis { font-size: 1.8rem; min-width: 3.2ch; text-align: center; }
.entry__date { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }
.entry__labels { font-weight: 600; }
.entry__strip { display: flex; gap: 3px; margin-top: 6px; }
.entry__strip i { flex: 1; height: 8px; border-radius: 4px; background: var(--lvl-none); }
.entry__strip i[data-level="0"] { background: var(--menta-x); }
.entry__strip i[data-level="1"] { background: var(--mantequilla-x); }
.entry__strip i[data-level="2"] { background: var(--melocoton-x); }
.entry__strip i[data-level="3"] { background: var(--rosa-x); }

/* ---------- 10. Respiración ---------- */
.breath {
  width: min(420px, calc(100% - 32px));
  padding: 28px 24px;
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-hover);
  background: var(--cielo);
  color: var(--ink);
  text-align: center;
}
.breath::backdrop { background: rgba(46, 42, 71, .45); backdrop-filter: blur(3px); }
.breath__title { font-size: var(--fs-l); font-weight: 700; margin-bottom: 18px; }

.breath__circle {
  width: 180px; height: 180px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  align-content: center;
  border: var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-weight: 700;
  font-size: var(--fs-l);
  transform: scale(.6);
}
/* 4 s inhalar (40 %) + 6 s exhalar (60 %) = 10 s por ciclo */
.breath__circle {
  transition-property: transform, background-color;
  transition-timing-function: ease-in-out;
}
.breath__circle.is-in { transform: scale(1); background: var(--menta); }
.breath__circle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.breath__secs { font-size: var(--fs-m); color: var(--ink-soft); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.breath__hint { font-size: var(--fs-s); color: var(--ink-soft); margin-bottom: 6px; }
.breath__count { font-weight: 600; margin-bottom: 18px; }

.disclaimer { margin-top: 18px; font-size: var(--fs-xs); color: var(--ink-soft); text-align: right; }


/* ---------- 11. Gotas, jardín y calendario ---------- */

/* Contador de gotas en la cabecera */
.drops-pill {
  margin-left: 6px;
  white-space: nowrap;
  padding: 6px 14px;
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--cielo);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .2s var(--ease);
}
.drops-pill:hover { transform: rotate(-4deg) scale(1.05); }
.drops-pill.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25) rotate(-6deg); } }

/* Gota que cae al completar un paso */
.drop-fx {
  position: fixed;
  z-index: 30;
  font-size: 1.6rem;
  pointer-events: none;
  animation: drop-fly .9s cubic-bezier(.5, 0, .7, .4) forwards;
}
@keyframes drop-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}

/* Escena del jardín */
.garden {
  position: relative;
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
  overflow: hidden;
  background: var(--cielo);
}

.garden__sky {
  position: relative;
  height: 150px;
  background: linear-gradient(180deg, var(--cielo) 0%, var(--lavanda) 100%);
}

.garden__sun {
  position: absolute;
  top: 22px; right: 28px;
  width: 64px; height: 64px;
  border: var(--line);
  border-radius: 50%;
  background: var(--mantequilla);
}

.decor {
  position: absolute;
  font-size: 1.8rem;
  line-height: 1;
}
.decor--float { animation: float 4s ease-in-out infinite; }
.decor--float:nth-child(odd) { animation-duration: 5.5s; animation-delay: -1s; }
@keyframes float { 50% { transform: translate(6px, -8px) rotate(4deg); } }

.garden__pond {
  position: absolute;
  bottom: -18px; left: 8%;
  width: 120px; height: 38px;
  border: var(--line);
  border-radius: 50%;
  background: #BFE0FF;
}

/* Bancal: tierra pastel con un borde de césped */
.garden__bed {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 6px 4px;
  padding: 22px 16px 20px;
  background: #F2DCC4;
  border-top: 10px solid var(--menta-x);
  min-height: 140px;
}

.plant {
  position: relative;
  display: grid;
  place-items: end center;
  height: 82px;
}
/* Montículo de tierra */
.plant::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 46px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50% 50% 8px 8px;
  background: #D9B48F;
}
.plant__emoji {
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
  line-height: 1;
  transform-origin: bottom center;
  transition: font-size .4s var(--ease);
}
.plant[data-stage="0"] .plant__emoji { font-size: 0; }
.plant[data-stage="1"] .plant__emoji { font-size: 1.5rem; }
.plant[data-stage="2"] .plant__emoji { font-size: 2.1rem; }
.plant[data-stage="3"] .plant__emoji { font-size: 2.7rem; }
.plant.is-growing::before {
  content: "";
  position: absolute;
  inset: 4px 6px 0;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--r-m);
}
.plant.just-grew .plant__emoji { animation: sprout .8s var(--ease); }
@keyframes sprout {
  0%   { transform: scale(.2); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.garden-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.stat { padding: 16px; border-radius: var(--r-l); background: var(--stat-bg, var(--surface)); }
.stat__value { display: block; font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.stat__label { font-size: var(--fs-s); font-weight: 700; color: var(--ink-soft); }

.level-card {
  grid-column: 1 / -1;
  padding: 18px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-l);
}
.level-card__name { font-weight: 700; font-size: var(--fs-l); }
.level-card__next { font-size: var(--fs-s); color: var(--ink-soft); margin: 2px 0 10px; }
.level-card .progress { margin: 0; background: var(--bg); height: 12px; }

/* Calendario */
.calendar {
  padding: 18px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
  text-align: center;
}
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar__month { font-size: var(--fs-l); font-weight: 700; }
.icon-btn--line { border: var(--line); font-weight: 700; color: var(--ink); }

.calendar__weekdays, .calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar__weekdays { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 4px;
  border: 2px solid transparent;
  border-radius: var(--r-m);
  background: var(--bg);
  font-weight: 600;
  font-size: var(--fs-s);
  min-width: 0;
  overflow: hidden;
  transition: transform .15s var(--ease);
}
.day:hover { transform: scale(1.06); }
.day--empty { background: transparent; pointer-events: none; }
.day.has-data { background: var(--mantequilla); }
.day.is-today { border-color: var(--lavanda-x); }
.day.is-selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.day__marks { font-size: .8rem; line-height: 1.1; text-align: center; }

.day-detail { margin: 18px 0; }
.day-card {
  padding: 20px;
  background: var(--surface);
  border-radius: var(--r-xl);
}
.day-card__title { font-size: var(--fs-l); font-weight: 700; margin-bottom: 14px; }
.day-card__title::first-letter { text-transform: uppercase; }
.day-card__section { font-size: var(--fs-s); font-weight: 600; color: var(--ink-soft); margin: 16px 0 8px; }

.checkin-block {
  padding: 14px;
  margin-bottom: 10px;
  border-radius: var(--r-l);
  background: var(--lavanda);
}
.checkin-block__head { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 8px; }
.checkin-block__emojis { font-size: 1.6rem; flex: none; white-space: nowrap; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.timeline li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 10px;
  font-size: var(--fs-s);
}
.timeline time { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.timeline strong { font-weight: 600; }

.answers { margin-top: 4px; }
.answers summary { cursor: pointer; font-weight: 600; font-size: var(--fs-s); }
.answers .timeline { margin-top: 10px; }


/* ---------- 12. v0.4.0 ---------- */

.settings-btn { margin-left: 6px; width: 40px; height: 40px; background: var(--surface); }

.board-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.social-pill {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Etiquetas de la tarjeta: batería y personas */
.tags { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.energy-tag { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.energy-tag i { width: 5px; border-radius: 2px; background: rgba(46, 42, 71, .18); }
.energy-tag i:nth-child(1) { height: 6px; }
.energy-tag i:nth-child(2) { height: 10px; }
.energy-tag i:nth-child(3) { height: 14px; }
.energy-tag[data-level="1"] i:nth-child(-n+1),
.energy-tag[data-level="2"] i:nth-child(-n+2),
.energy-tag[data-level="3"] i:nth-child(-n+3) { background: var(--menta-x); }
.social-tag { font-size: .7rem; letter-spacing: -2px; }

/* Selectores de energía y gente */
.pickers {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed var(--lvl-none);
}
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.picker__label { width: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.picker__opt {
  padding: 4px 10px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--bg);
  font-weight: 700;
  font-size: var(--fs-xs);
}
.picker__opt[aria-pressed="true"] { border-color: var(--ink); background: var(--mantequilla); }
.picker__note { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }

/* Resultado del check-in: tareas sugeridas */
.result__box--wide { grid-column: 1 / -1; }
.result__hint { font-size: var(--fs-s); color: var(--ink-soft); margin-bottom: 10px; }
.result__box .matches { list-style: none; padding: 0; display: grid; gap: 8px; }
.match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--surface);
  border-radius: var(--r-pill);
}
.match .btn { flex: none; white-space: nowrap; }
.match__title { font-weight: 600; font-size: var(--fs-s); overflow-wrap: anywhere; }

/* Ventanas tipo hoja (recarga, ajustes) */
.sheet {
  width: min(460px, calc(100% - 32px));
  padding: 26px 24px 22px;
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-hover);
  background: var(--surface);
  color: var(--ink);
}
.sheet::backdrop { background: rgba(46, 42, 71, .4); backdrop-filter: blur(3px); }
.sheet__title { font-size: var(--fs-l); font-weight: 700; margin-bottom: 10px; }
.sheet__text { color: var(--ink-soft); margin-bottom: 14px; }
.sheet__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

#recharge-dialog { background: var(--menta); }
.recharge__timer {
  margin: 4px 0 14px;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.recharge__options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recharge__options li { padding: 10px 14px; background: rgba(255, 255, 255, .7); border-radius: var(--r-m); font-weight: 700; font-size: var(--fs-s); }
.link-btn { border: 0; padding: 0; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-align: left; }

.settings { display: grid; gap: 14px; }
.switch--row { color: var(--ink); font-size: var(--fs-m); }
.settings__range { display: grid; gap: 4px; padding-left: 52px; font-weight: 700; font-size: var(--fs-s); color: var(--ink-soft); }
.settings__range input { accent-color: var(--lavanda-x); }
.settings__range input:disabled { opacity: .4; }
.settings__note { font-size: var(--fs-xs); color: var(--ink-soft); padding-left: 52px; }

/* Modo «solo una cosa»: pantalla completa, un único paso */
.focus {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: linear-gradient(170deg, var(--cielo) 0%, var(--menta) 100%);
  color: var(--ink);
}
.focus[open] { display: grid; place-items: center; }
.focus::backdrop { background: var(--cielo); }
.focus__exit { position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); right: 20px; background: var(--surface); }
.focus__card { width: min(720px, 100%); text-align: center; }
.focus__card.is-new { animation: unfold .45s var(--ease); }
.focus__task { min-height: 1.5em; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }
.focus__step {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 36px;
  overflow-wrap: anywhere;
}
.focus__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.focus__done { min-height: 64px; padding: 14px 44px; font-size: var(--fs-l); background: var(--menta-x); }

/* Premios */
.rewards {
  margin-top: 18px;
  padding: 20px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-xl);
}
.rewards__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rewards__title { font-size: var(--fs-l); font-weight: 700; }
.token-pill { padding: 4px 12px; border-radius: var(--r-pill); background: var(--bg); font-weight: 700; }
.token-pill.has-tokens { background: var(--mantequilla); border: 2px solid var(--ink); animation: bump 1.4s var(--ease) 2; }
.rewards__lead { font-size: var(--fs-s); color: var(--ink-soft); margin: 6px 0 14px; }
.rewards__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.reward { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; background: var(--bg); border-radius: var(--r-pill); }
.reward__label { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.rewards__history { font-size: var(--fs-xs); color: var(--ink-soft); }
.day-card__note { font-size: var(--fs-s); font-weight: 700; margin-top: 10px; }

/* Patrones semanales */
.week {
  padding: 20px;
  margin-bottom: 18px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-xl);
}
.week__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.week__title { font-size: var(--fs-m); font-weight: 700; text-align: center; }
.week__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.week__box { padding: 14px; border-radius: var(--r-l); background: var(--box-bg); font-size: var(--fs-s); }
.week__box h4 { font-size: var(--fs-s); font-weight: 600; margin-bottom: 10px; }
.week__big { font-size: var(--fs-l); font-weight: 700; }
.week__big small { font-size: var(--fs-s); color: var(--ink-soft); }
.week__note { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); margin-top: 6px; }
.bar-row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: var(--fs-xs); }
.bar { height: 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 90px; align-items: end; }
.cols__item { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; font-size: var(--fs-xs); }
.cols__item i { width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--ink); }


/* ---------- 12b. «Me siento rara» ---------- */

/* Botón flotante, siempre a mano */
.sos-btn {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  padding: 12px 20px;
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--rosa);
  box-shadow: var(--lift);
  font-weight: 700;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.sos-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-hover); }

/* Pantalla completa y tranquila */
.trigger {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: linear-gradient(170deg, #E4F0FF 0%, #EEF0FF 50%, #F3EEFA 100%);
  color: var(--ink);
  overflow-y: auto;
}
.trigger::backdrop { background: #E4F0FF; }
.trigger__exit { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; background: var(--surface); z-index: 1; }
.trigger__inner { width: min(720px, 100%); margin: 0 auto; }
.trigger__pane { animation: unfold .35s var(--ease); }
.trigger__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; }
.trigger__lead { color: var(--ink-soft); margin-bottom: 20px; }
.trigger__groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trigger__unknown { grid-column: 1 / -1; }
.trigger__unknown .chip { border: 2px dashed var(--ink-soft); }
.trigger__q { display: block; font-size: var(--fs-m); font-weight: 600; margin: 22px 0 10px; }
.trigger__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.trigger__opts .picker__opt { padding: 8px 16px; font-size: var(--fs-s); background: var(--surface); }
.trigger__opts--big .picker__opt { padding: 12px 22px; font-size: var(--fs-m); }
.trigger__safety .picker__opt { background: var(--bg); }
.trigger__groups .chip { text-align: left; }
.trigger__safety {
  margin-top: 18px;
  padding: 4px 18px 18px;
  background: var(--surface);
  border-radius: var(--r-l);
}
.trigger__support { margin-top: 14px; padding: 14px 16px; background: var(--surface); border-radius: var(--r-l); font-weight: 700; }
.trigger__note {
  width: 100%;
  padding: 14px 16px;
  border: var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  font: inherit;
  resize: vertical;
}
.trigger__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 26px; }

/* Consejos */
.trigger__tips { display: grid; gap: 14px; }
.tip-card {
  padding: 18px;
  background: var(--card-bg, var(--surface));
  border: var(--line);
  border-radius: var(--r-xl);
}
.tip-card h3 { font-size: var(--fs-l); font-weight: 700; margin-bottom: 8px; }
.tip-card > p { margin-bottom: 12px; }
.tip-card--safety { background: var(--mantequilla); box-shadow: var(--lift); }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tip { display: grid; gap: 8px; padding: 12px 14px; background: var(--bg); border-radius: var(--r-l); }
.tip p { font-weight: 600; }
.tip > .btn { justify-self: start; }
.tip__script {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--r-m);
  font-style: italic;
  font-weight: 700;
}
.tip__script .btn { font-style: normal; }
.tip__dump { margin: 0; min-width: 0; }
.tip__dump input { width: 100%; }
.trigger__tips > *, .tip { min-width: 0; }

/* Registro en calendario y patrones */
.checkin-block--hard { background: var(--rosa); }
.week__box--wide { grid-column: 1 / -1; }
.week__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.week__chip { padding: 6px 12px; background: rgba(255, 255, 255, .75); border-radius: var(--r-pill); font-weight: 700; }
.week__chip b { margin-left: 4px; }


/* ---------- 12c. v0.6.0 ---------- */

/* Controles de la respiración */
.breath__controls { display: grid; gap: 8px; margin-bottom: 18px; }
.breath__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.breath__row .picker__opt { background: rgba(255, 255, 255, .7); }
.breath__row .picker__opt small { font-weight: 600; color: var(--ink-soft); margin-left: 2px; }

/* Tarro de calma */
.calm-jar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
}
.calm-jar__svg { flex: none; width: 84px; height: auto; }
.jar__lid { fill: var(--mantequilla-x); stroke: var(--ink); stroke-width: 3; }
.jar__body { fill: #F4FAFF; stroke: var(--ink); stroke-width: 3; }
.jar__shine { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .9; }
.bead { stroke: var(--ink); stroke-width: 2; }
.bead.is-new { animation: bead-drop .7s cubic-bezier(.3, 1.5, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes bead-drop {
  0%   { transform: translateY(-110px) scale(.8); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; }
}
.calm-jar__title { font-size: var(--fs-l); font-weight: 700; margin-bottom: 2px; }
.calm-jar__text p { font-size: var(--fs-s); }
.calm-jar__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; color: var(--ink-soft); font-weight: 700; }
.calm-jar__legend i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.calm-jar__shelf { margin-top: 6px; font-weight: 600; }


/* ---------- 12d. Modo marea ---------- */
.regulation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px 0 4px;
  padding: 12px 16px;
  background: linear-gradient(100deg, var(--cielo) 0%, #D8ECFA 100%);
  border: var(--line);
  border-radius: var(--r-l);
}
.regulation.is-expanded { border-radius: var(--r-xl); }
.regulation--check { background: var(--mantequilla); }
.regulation--after { background: rgba(255, 255, 255, .7); border-style: dashed; flex-wrap: nowrap; }
.regulation__line { flex: 1 1 220px; font-weight: 600; font-size: var(--fs-s); }
.regulation--after .regulation__line { font-weight: 700; color: var(--ink-soft); }
.regulation__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  flex: 1 1 200px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.regulation__chev { transition: transform .25s var(--ease); }
.regulation.is-expanded .regulation__chev { transform: rotate(180deg); }

/* La marea: una barra de agua con ondas que se va vaciando */
.tide {
  position: relative;
  flex: 1 1 160px;
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .8);
  overflow: hidden;
}
.tide i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 6px -2px, transparent 6px, #7FB8EE 6.5px) 0 0 / 12px 14px repeat-x,
    #7FB8EE;
  transition: width 1s ease;
  animation: tide-flow 3s linear infinite;
}
@keyframes tide-flow { to { background-position: 12px 0, 0 0; } }

.regulation__body { width: 100%; display: grid; gap: 10px; font-size: var(--fs-s); }
.regulation__tips { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.regulation__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.dysreg-quick { margin-top: 10px; }
.result__tide { margin-top: 10px; padding: 10px 14px; background: var(--cielo); border-radius: var(--r-m); font-weight: 700; font-size: var(--fs-s); }
.sheet--tide { background: var(--cielo); }
.sheet--tide .picker__opt, .trigger__estimate .picker__opt { background: var(--surface); }
.trigger__estimate { margin-top: 14px; }
.trigger__estimate .trigger__lead { margin-bottom: 10px; font-size: var(--fs-s); }


/* ---------- 12e. Señales de desconexión ---------- */
.zone[data-level="off"] { fill: var(--lvl-off); stroke-dasharray: 3 3; }
.dot--off { background: var(--lvl-off); border-style: dashed; }
.level[data-level="off"] { grid-column: 1 / -1; border-style: dashed; justify-content: center; }
.emotion-families .family:nth-child(5) { grid-column: 1 / -1; }
.result__box--fog { background: var(--lvl-off); border: 2px dashed var(--ink-soft); }
.result__box--fog > p { margin-bottom: 8px; }
.fog-tag {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--lvl-off);
  font-size: var(--fs-xs);
  white-space: nowrap;
}


/* ---------- 12f. Mar animado de la marea ---------- */
.regulation__sea-btn { flex: none; padding: 0; border: 0; background: none; border-radius: 14px; }
.regulation__sea-btn:hover .sea { transform: scale(1.04); }
.regulation__left { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.regulation__summary .regulation__line { flex: 1 1 100%; }

.sea {
  --wave-h: 8px;
  position: relative;
  overflow: hidden;
  /* cielo suave */
  background: linear-gradient(180deg, #EEF6FF 0%, #F6F2FF 100%);
  transition: transform .2s var(--ease);
}
.sea--mini { width: 104px; height: 52px; border: 2px solid var(--ink); border-radius: 14px; }
.sea--big {
  --wave-h: 30px;
  width: 100%;
  height: min(50vh, 420px);
  border: var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift);
}
/* sol tenue, solo en grande */
.sea--big::before {
  content: "";
  position: absolute;
  top: 9%; left: 9%;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--mantequilla);
  box-shadow: 0 0 0 14px rgba(255, 241, 184, .45);
}

/* Arena con conchas: se descubren cuando la marea baja */
.sea__sand { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #F2DCC4; }
.sea__shell { position: absolute; bottom: 42%; font-size: .7rem; line-height: 1; }
.sea--big .sea__shell { font-size: 1.6rem; bottom: 40%; }
.sea__shell--a { left: 14%; }
.sea__shell--b { left: 48%; }
.sea__shell--c { left: 78%; }

/* El agua: su altura sigue a --level con una transición lenta y lineal */
.sea__water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--level) * .86 + 3%);
  transition: height 5s linear;
}
.sea__body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #7FB8EE 0%, #6AA6E4 100%);
  opacity: .92;
}
.sea__wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: var(--wave-h);
  animation: wave-move 9s linear infinite, wave-bob 3.5s ease-in-out infinite alternate;
}
.sea__wave path { fill: currentColor; }
.sea__wave--back  { top: calc(var(--wave-h) * -1.45); color: #C7E3FA; animation-duration: 17s, 4.6s; }
.sea__wave--mid   { top: calc(var(--wave-h) * -1.2);  color: #A3CFF4; animation-duration: 12s, 4s; animation-direction: reverse, alternate; }
.sea__wave--front { top: calc(var(--wave-h) * -1 + 1px); color: #7FB8EE; animation-duration: 8s, 3.2s; }
@keyframes wave-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wave-bob  { from { margin-top: 0; } to { margin-top: 4px; } }

.sea__marks {
  position: absolute;
  top: 8%; bottom: 26%; right: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}
.sea__marks span { padding: 2px 8px; background: rgba(255, 255, 255, .7); border-radius: var(--r-pill); }

/* Vista a pantalla completa */
.tide-view {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: linear-gradient(175deg, #E6F1FE 0%, #EEF2FD 55%, #F4EFFB 100%);
  color: var(--ink);
  overflow-y: auto;
}
.tide-view[open] { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tide-view::backdrop { background: #E6F1FE; }
.tide-view > * { width: min(760px, 100%); }
.tide-view__exit { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; width: 40px !important; background: var(--surface); z-index: 1; }
.tide-view__head { text-align: center; }
.tide-view__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; }
.tide-view__since { color: var(--ink-soft); font-weight: 700; margin-top: 4px; }
.tide-view__left { font-size: var(--fs-l); font-weight: 700; margin-top: 6px; }
.tide-view__tip { min-height: 3em; text-align: center; font-weight: 700; color: var(--ink-soft); }
.tide-view__tip.is-in { animation: unfold .8s var(--ease); }
.tide-view__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }


/* ---------- 12g. Copia de seguridad ---------- */
.sheet { max-height: calc(100vh - 32px); overflow-y: auto; }
.backup {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--r-l);
}
.backup__title { font-size: var(--fs-m); font-weight: 700; margin-bottom: 6px; }
.backup__text { font-size: var(--fs-s); margin-bottom: 8px; }
.backup__info { font-size: var(--fs-s); font-weight: 600; margin-bottom: 12px; }
.backup__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.backup__actions label { cursor: pointer; }
.backup__actions input:focus-visible + label,
.backup__actions label:has(+ input:focus-visible) { outline: 3px solid var(--lavanda-x); outline-offset: 3px; }
.backup__note { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-soft); }

/* Punto discreto en el engranaje cuando hace tiempo que no hay copia */
.settings-btn { position: relative; }
.settings-btn.has-dot::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 12px; height: 12px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--melocoton-x);
}


/* ---------- 12h. Menos ruido visual ---------- */

/* «Cómo estoy» a dos columnas: asistente + columna lateral tranquila */
.panel[data-panel="checkin"] { max-width: 1080px; }
.checkin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 36px;
  align-items: start;
}
.checkin-layout.is-focus { grid-template-columns: minmax(0, 1fr); }
.checkin-layout.is-focus .checkin-aside { display: none; }
.checkin-aside {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

/* Tarro de calma, versión compacta y sin sombra dentro de la columna */
.checkin-aside .calm-jar {
  margin: 0;
  padding: 12px 14px;
  gap: 12px;
  border: 1.5px solid rgba(46, 42, 71, .18);
  box-shadow: none;
  border-radius: var(--r-l);
}
.checkin-aside .calm-jar__svg { width: 44px; }
.checkin-aside .calm-jar__title { font-size: var(--fs-m); }
.checkin-aside .calm-jar__text p { font-size: var(--fs-xs); color: var(--ink-soft); }
.checkin-aside .calm-jar__legend { margin-top: 4px; }

/* Tarjeta de regulación: texto y dos botones, sin mar */
.reg-card {
  position: relative;
  padding: 14px;
  background: var(--surface);
  border: 1.5px solid rgba(46, 42, 71, .18);
  border-radius: var(--r-l);
  font-size: var(--fs-s);
}
.reg-card--idle { padding: 0; background: none; border: 0; }
.reg-card--check { background: var(--mantequilla); }
.reg-card--after { background: rgba(255, 255, 255, .6); border-style: dashed; color: var(--ink-soft); padding-right: 40px; }
.reg-card__title { font-size: var(--fs-m); font-weight: 700; margin-bottom: 4px; }
.reg-card__left { font-weight: 600; }
.reg-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.reg-card__close { position: absolute; top: 6px; right: 6px; }

/* Enlaces discretos (marcar desregulación, ver calendario) */
.aside-link {
  width: 100%;
  padding: 10px 14px;
  border: 2px dashed rgba(46, 42, 71, .25);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5);
  font-weight: 600;
  font-size: var(--fs-s);
  color: var(--ink);
  text-align: center;
  transition: border-color .2s, background-color .2s;
}
.aside-link:hover { border-style: solid; border-color: var(--ink); background: var(--surface); }
.aside-link--center { display: block; width: auto; margin: 22px auto 0; padding-inline: 22px; }

/* Pastilla de marea en la cabecera, en el sitio del saludo */
.tide-pill {
  margin-top: 2px;
  padding: 2px 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--cielo);
  font-weight: 600;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.tide-pill:hover { background: var(--surface); }

.back-link {
  margin-top: 18px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--ink-soft);
}
.back-link:hover { color: var(--ink); text-decoration: underline; }

/* Algo menos de peso visual en las emociones */
.family { padding: 14px; }
.family .chip { padding: 6px 12px 6px 8px; }
.family .chip__emoji { font-size: 1.15rem; }
.emotion-families { gap: 10px; }


/* ---------- 12i. Estilo suave y tarjeta de tarea compacta ---------- */
.panel__title, .trigger__title, .tide-view__title { letter-spacing: -.01em; }
.brand__name { letter-spacing: -.02em; }

/* Pestaña activa en tono suave en vez de bloque oscuro */
.tab.is-active { background: var(--lavanda); color: var(--ink); }

/* Botones sin sombras duras */
.btn { border-color: rgba(46, 42, 71, .2); box-shadow: none; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--lift); }
.btn:active { transform: none; box-shadow: none; }
.btn--primary { border-color: transparent; }
.btn--ghost, .btn--ghost:hover { border-color: transparent; box-shadow: none; }
.trigger__opts--big { margin-top: 12px; }
.drops-pill, .tide-pill { box-shadow: none; border: 1.5px solid rgba(46, 42, 71, .2); }
.brand__logo { border: 1.5px solid rgba(46, 42, 71, .25); }

/* Selecciones marcadas con color, no con borde negro */
.chip[aria-pressed="true"] { border-color: var(--lavanda-x); box-shadow: none; }
.picker__opt[aria-pressed="true"] { border-color: var(--lavanda-x); }
.level { border-width: 1.5px; border-color: rgba(46, 42, 71, .15); }
.level[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--lavanda-x); }

/* Casillas más pequeñas y finas */
.check { width: 28px; height: 28px; border: 1.5px solid rgba(46, 42, 71, .4); font-size: .85rem; }
.check--small { width: 24px; height: 24px; font-size: .75rem; }

/* Tarjeta de tarea compacta */
.task__head { padding: 8px 6px 8px 10px; gap: 8px; }
.task__body { padding: 10px; border-top: 1px solid rgba(46, 42, 71, .1); }
.steps { gap: 2px; margin-bottom: 8px; }
.step { padding: 4px 4px 4px 6px; }
.step.is-next { border: 1.5px solid var(--lavanda-x); }
.add-step--compact { margin-bottom: 8px; }
.add-step--compact input { min-height: 36px; padding: 6px 12px; font-size: var(--fs-s); border-width: 1px; }
.task__tools { justify-content: flex-start; gap: 6px; }
.tool {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid rgba(46, 42, 71, .14);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  transition: background-color .15s;
}
.tool:hover { background: var(--lavanda); }
.tool--icon { width: 36px; padding: 0; display: inline-grid; place-items: center; font-size: .95rem; }
.tool-group { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.tool-group__part { display: flex; gap: 4px; }
.task__more { margin-top: 8px; }
.task__more summary {
  cursor: pointer;
  padding: 4px 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
}
.task__more .pickers { margin-top: 6px; padding-top: 8px; }

/* Dónde caerá la tarea al arrastrarla */
.task.drop-before { box-shadow: 0 -3px 0 var(--lavanda-x); }
.task.drop-after { box-shadow: 0 3px 0 var(--lavanda-x); }
.task[draggable="true"] { cursor: grab; }


/* ---------- 12j. Revisar mi perspectiva ---------- */
.persp-choices { display: grid; gap: 12px; margin-top: 8px; }
.persp-choice {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  text-align: left;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--r-l);
  transition: box-shadow .2s, transform .2s;
}
.persp-choice:hover { box-shadow: var(--lift-hover); transform: translateY(-1px); }
.persp-choice strong { font-size: var(--fs-m); font-weight: 600; }
.persp-choice span { font-size: var(--fs-s); color: var(--ink-soft); }
.persp-history { margin-top: 16px; font-size: var(--fs-s); color: var(--ink-soft); }

.glasses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.glass {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid rgba(46, 42, 71, .12);
  border-radius: var(--r-m);
}
.glass.is-on { border-color: var(--lavanda-x); background: var(--lavanda); }
.glass__title { font-weight: 600; font-size: var(--fs-s); }
.glass__hint { font-size: var(--fs-xs); color: var(--ink-soft); }

.persp-quote { margin: 4px 0 12px; font-size: var(--fs-l); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.persp-hints { margin: 0 0 6px; padding: 12px 16px 12px 32px; background: var(--surface); border-radius: var(--r-l); display: grid; gap: 6px; font-size: var(--fs-s); }

.share-list { display: grid; gap: 10px; }
.share-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--r-m);
}
.share-row__label { font-weight: 600; font-size: var(--fs-s); }
.share-row__opts { display: flex; flex-wrap: wrap; gap: 4px; }
.share-row__opts .picker__opt { background: var(--bg); }
.share-result { margin-top: 16px; }
.share-card { display: grid; gap: 10px; padding: 18px; background: var(--surface); border: var(--line); border-radius: var(--r-l); font-size: var(--fs-s); }
.share-card__big { font-size: var(--fs-l); font-weight: 700; }
.share-bar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--bg); }
.share-bar i, .share-legend i { display: block; }
.share-bar__yo { background: var(--melocoton-x); }
.share-bar__comp { background: var(--menta-x); }
.share-bar__otra { background: var(--cielo-x); }
.share-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: var(--ink-soft); }
.share-legend span { display: flex; align-items: center; gap: 5px; }
.share-legend i { width: 10px; height: 10px; border-radius: 3px; }
.share-card__mine, .share-card__prev { color: var(--ink-soft); }
.result__box--persp { background: var(--lavanda); }
.result__box--persp .btn { margin-top: 6px; }

/* ---------- 13. Temas sensoriales ---------- */
/* Colores más suaves: menos saturación, sin bordes oscuros ni sombras duras */
html.soft {
  --ink: #57546F;
  --ink-soft: #8C89A2;
  --lavanda: #EEEAFF; --lavanda-x: #A897E8;
  --menta: #E4F6EE;   --menta-x: #86C7AA;
  --melocoton: #FFEDE3; --melocoton-x: #F0AE8A;
  --rosa: #FFE8F0;    --rosa-x: #E79AB5;
  --mantequilla: #FFF7DC; --mantequilla-x: #E2C468;
  --cielo: #E8F2FF;   --cielo-x: #86B6E6;
  --bg: #F3F7FC;
  --line: 1.5px solid rgba(87, 84, 111, .28);
  --lift: 0 2px 6px rgba(87, 84, 111, .08);
  --lift-hover: 0 4px 10px rgba(87, 84, 111, .12);
}
html.soft body {
  background-image: linear-gradient(165deg, #EEF5FE 0%, #F1F8FA 50%, #F2F9F5 100%);
}

/* Menos movimiento: las animaciones terminan al instante (los efectos se limpian solos) */
html.calm-motion *, html.calm-motion *::before, html.calm-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.calm-motion .drop-fx, html.calm-motion .cloud-fx { opacity: 0; }

/* ---------- Accesibilidad y responsive ---------- */
:focus-visible { outline: 3px solid var(--lavanda-x); outline-offset: 3px; }
.zone:focus-visible { outline: none; stroke: var(--lavanda-x); stroke-width: 5; }

@media (max-width: 640px) {
  .brand { width: 100%; gap: 8px; }
  .brand__name { font-size: 1.45rem; white-space: nowrap; }
  .brand__logo { width: 40px; height: 40px; font-size: 20px; flex: none; }
  .version { margin-left: 2px; padding: 2px 7px; }
  .drops-pill { margin-left: auto; padding: 5px 10px; }
  .settings-btn { margin-left: 0; flex: none; }
  .app-header { padding-top: 18px; }
  .tabs { width: 100%; border-radius: var(--r-l); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: var(--fs-xs); border-radius: var(--r-m); }
  .tab span { font-size: 1.1rem; }
  .tab { font-size: .7rem; }
  .board {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
  }
  .column { flex: 0 0 86%; scroll-snap-align: start; }
  .dump { padding: 28px 16px 18px; }
  .week__grid { grid-template-columns: 1fr; }
  .trigger__groups { grid-template-columns: 1fr; }
  .glasses { grid-template-columns: 1fr; }
  .calm-jar { padding: 12px 14px; gap: 12px; }
  .checkin-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .checkin-aside { position: static; margin-top: 24px; }
  .sea--mini { width: 84px; height: 46px; }
  .sea--big { height: 44vh; }
  .calm-jar__svg { width: 64px; }
  .sos-btn { right: 14px; padding: 10px 16px; }
  .bar-row { grid-template-columns: 6.5rem 1fr auto; }
  .board-bar__tools { width: 100%; justify-content: space-between; }
  .settings-btn { width: 36px; height: 36px; }
  .garden-stats { gap: 8px; }
  .stat { padding: 12px 10px; }
  .stat__value { font-size: 1.35rem; }
  .stat__label { font-size: var(--fs-xs); }
  .day__marks { font-size: .62rem; }
  .day { padding: 4px 1px 3px; font-size: var(--fs-xs); }
  .garden__bed { --cols: 4 !important; padding-inline: 8px; }
  .calendar { padding: 14px 10px; }
  .calendar__weekdays, .calendar__grid { gap: 4px; }
  .emotion-families { grid-template-columns: 1fr; }
  .scan { grid-template-columns: 1fr; }
  .scan__figure { max-width: 220px; margin: 0 auto; }
  .result__grid { grid-template-columns: 1fr; }
  .wizard-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .drop-fx { display: none; }

}