/* Encabezado ---------------------------------------------------------------- */

.header {
  position: relative;
  z-index: 1;
  flex: none;
  padding: var(--sp-14) var(--sp-18) var(--sp-12);
  border-bottom: 1px solid var(--rule-30);
  overflow: hidden;
}

/* Banda ilustrada con su velo, detrás del texto del encabezado */
.header__band {
  position: absolute;
  inset: 0;
  background:
    var(--veil-header),
    url("../assets/backgrounds/fondo-encabezado.jpg") center / cover no-repeat;
  pointer-events: none;
}

.header__content { position: relative; }

.header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-top: var(--sp-6);
}

.header__title {
  margin: 0;
  font-size: var(--size-screen);
  font-weight: 400;
  line-height: 1.05;
}

.header__date {
  margin-top: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--mono-meta);
  letter-spacing: var(--track-kicker);
  color: var(--ink-60);
}

.header__summary {
  font-family: var(--mono);
  font-size: var(--mono-meta);
  line-height: 1.5;
  color: var(--ink-55);
  text-align: right;
  flex: none;
}

/* Navegación por día: para completar lo que se olvidó anotar */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-3);
}

.day-step {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-30);
  background: transparent;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
}

.day-step:disabled { color: var(--ink-40); border-color: var(--rule-20); cursor: default; }

.header__nav .header__date { margin-top: 0; }

.header__back-today {
  margin-top: var(--sp-4);
  border: 1px solid var(--rule-35);
  background: transparent;
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-nav);
  color: var(--ink-70);
  padding: 2px var(--sp-6);
}

.repeat-day { margin-top: var(--sp-10); }

/* Comidas ------------------------------------------------------------------- */

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

.meal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-top: var(--sp-9);
  border-top: 1px solid var(--rule-30);
}

.meal__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-10);
}

.meal__time {
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-60);
}

.meal__name {
  margin: 0;
  font-size: var(--size-option);
  font-weight: 400;
}

.meal__count {
  font-family: var(--mono);
  font-size: var(--mono-meta);
  color: var(--ink-55);
  flex: none;
}

/* Fila de alimento ---------------------------------------------------------- */

.food {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-9) 0;
  border-top: 1px dotted var(--rule-22);
}

.food:first-child { border-top: 0; }

.food__stamp {
  width: 32px;
  height: 40px;
  flex: none;
  border: 1px solid var(--rule-22);
  background: var(--paper-thumb);
  object-fit: cover;
}

.food__body { flex: 1; min-width: 0; }

.food__line {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}

.food__name {
  font-size: var(--size-food);
  line-height: 1.2;
}

.food.is-logged .food__name { color: var(--ink-78); }

.food__check {
  font-family: var(--mono);
  font-size: var(--mono-md);
  color: var(--green);
  flex: none;
}

.food__swapped {
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-tight);
  border: 1px solid var(--rust);
  color: var(--rust);
  padding: 1px 4px;
  flex: none;
}

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

.food__actions {
  display: flex;
  gap: var(--sp-6);
  flex: none;
}

/* Fuera de plan ------------------------------------------------------------- */

.off-plan {
  border: 1px solid var(--rule-25);
  background: var(--paper-card);
  padding: var(--sp-14) 15px;
}

.off-plan__text {
  margin: var(--sp-7) 0 var(--sp-12);
  font-size: var(--size-body);
  line-height: 1.45;
  color: var(--ink-78);
}

.off-plan__actions {
  display: flex;
  gap: var(--sp-7);
}

.off-plan__logged {
  margin-top: var(--sp-12);
  border-top: 1px dotted var(--rule-25);
}

.off-plan__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-9) 0 0;
}

/* Pantallas pendientes ------------------------------------------------------ */

.screen--pending { padding-top: var(--sp-22); }

.pending__text {
  margin: var(--sp-10) 0 0;
  font-size: var(--size-body);
  line-height: 1.45;
  color: var(--ink-78);
}

.app__loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  letter-spacing: var(--track-kicker);
  color: var(--ink-55);
  text-align: center;
  padding: var(--sp-26);
}

/* Barra de pestañas --------------------------------------------------------- */

.tabs {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--paper-nav);
  border-top: 1px solid var(--rule-30);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: 11px 0 13px;
  border: 0;
  background: transparent;
  color: var(--ink-60);
}

.tab.is-active { color: var(--ink); }

.tab__mark {
  width: 18px;
  height: 2px;
  background: transparent;
}

.tab.is-active .tab__mark { background: var(--ink); }

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