/* Banda de demostración ----------------------------------------------------- */

.demo-band {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  background: var(--rust);
  color: var(--paper);
  padding: var(--sp-6) var(--sp-16);
}

.demo-band__text {
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-kicker);
}

.demo-band__exit {
  border: 1px solid rgba(243, 236, 218, .6);
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-nav);
  padding: 3px var(--sp-9);
}

/* Editor de plan ------------------------------------------------------------ */

.editor {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.editor__cancel {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--ink-60);
  padding: 0;
}

.screen--editor { display: flex; flex-direction: column; gap: var(--sp-22); }

.editor__name { margin-top: var(--sp-6); font-family: var(--serif); font-size: var(--size-body); }

.edit-meal {
  border: 1px solid var(--rule-25);
  background: var(--paper-card);
  padding: var(--sp-12) var(--sp-14) var(--sp-14);
}

.edit-meal__head {
  display: flex;
  align-items: center;
  gap: var(--sp-9);
}

.edit-meal__time {
  width: 92px;
  flex: none;
  border: 1px solid var(--rule-30);
  border-radius: var(--radius);
  background: transparent;
  padding: var(--sp-6) var(--sp-7);
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink);
}

.edit-meal__name {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--rule-30);
  border-radius: var(--radius);
  background: transparent;
  padding: var(--sp-6) 2px;
  font-family: var(--serif);
  font-size: var(--size-option);
  color: var(--ink);
}

.edit-meal__empty,
.editor__note {
  margin: var(--sp-12) 0 0;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  line-height: 1.6;
  color: var(--ink-50);
}

.edit-foods { margin-top: var(--sp-10); }

.edit-food {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  width: 100%;
  padding: var(--sp-9) 0;
  border: 0;
  border-top: 1px dotted var(--rule-22);
  background: transparent;
  text-align: left;
  font-family: var(--serif);
}

.edit-food:hover,
.edit-food:active { background: rgba(35, 32, 26, .04); }

.edit-food__edit {
  font-family: var(--mono);
  font-size: var(--mono-meta);
  letter-spacing: var(--track-tight);
  color: var(--green);
  flex: none;
}

/* Ficha del alimento -------------------------------------------------------- */

.food-form { margin-top: var(--sp-14); }
.food-form__label { margin-top: var(--sp-22); }

.food-form__hint {
  margin: var(--sp-7) 0 0;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  line-height: 1.6;
  color: var(--ink-55);
}

.food-form__pair {
  display: flex;
  gap: var(--sp-9);
}

.food-form__field { flex: 1; min-width: 0; }

.food-form__caption {
  display: block;
  margin-top: var(--sp-14);
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--ink-60);
}

.food-form__field .field { margin-top: var(--sp-6); }

/* El resultado de la equivalencia, a la vista mientras se captura */
.equivalence__preview {
  margin-top: var(--sp-16);
  border: 1px solid var(--rule-30);
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--size-body);
  color: var(--green-dark);
  text-align: center;
}

.edit-food__body { flex: 1; min-width: 0; }
.edit-food__name { font-size: var(--size-food); }

.edit-food__detail {
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
  margin-top: 2px;
}

.edit-meal__add { margin-top: var(--sp-12); width: 100%; flex: none; }

.problems {
  border: 1px solid var(--rust);
  padding: var(--sp-12) var(--sp-14);
}

.problems__list {
  margin: var(--sp-7) 0 0;
  padding-left: var(--sp-18);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--rust-dark);
}

/* El botón de guardar queda siempre a la vista, sin tener que bajar hasta el
   final de un plan largo */
.editor__footer {
  position: relative;
  z-index: 1;
  flex: none;
  padding: var(--sp-12) var(--sp-18) calc(var(--sp-12) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-30);
  background: var(--paper-nav);
}

.editor__footer .button--block { margin: 0; }

/* Botón que borra: el óxido avisa antes de tocarlo */
.button--danger {
  background: var(--rust);
  border-color: var(--rust);
}

.button--danger:hover,
.button--danger:active {
  background: var(--rust-dark);
  border-color: var(--rust-dark);
}

/* Bifurcación de la portada -------------------------------------------------- */

.fork { display: flex; flex-direction: column; gap: var(--sp-9); }

.fork__hint {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  line-height: 1.6;
  color: var(--ink-55);
}

.profile__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
  margin-top: var(--sp-10);
}

.profile__actions .button--block { margin: 0; }

/* Captura a mano en la hoja de alimento ------------------------------------- */

.manual { margin-top: var(--sp-16); }
.manual__label { margin-top: var(--sp-14); }

.manual__pair {
  display: flex;
  gap: var(--sp-9);
}

.manual__pair .field { flex: 1; min-width: 0; }