/* ============================================================
   Plan de comidas — capa oscura sobre los tokens de tresipunt.
   El sistema de diseño es de marca clara (#333 sobre blanco); esta app se usa
   a las 6:30 y a las 22:00, así que redefine superficies y texto en oscuro y
   conserva del sistema lo que sí es marca: naranja, teal, tipografías, radios.
   ============================================================ */
:root {
  --bg:            #19191c;
  --bg-nav:        #1f1f23;
  --bg-card:       #232327;
  --bg-hover:      #2b2b30;
  --bg-input:      #19191c;
  --linea:         #2e2e33;
  --linea-suave:   #26262b;
  --linea-fuerte:  #3a3a40;

  --tx:            #ececee;
  --tx-2:          #c0c0c6;
  --tx-3:          #8a8a92;
  --tx-4:          #6a6a72;
  --tx-5:          #5a5a62;

  --marca:         var(--orange-500);   /* #F84015 */
  --marca-hover:   #d93812;
  --marca-tx:      #ff7a55;
  --marca-suave:   rgba(248, 64, 21, .14);
  --marca-borde:   rgba(248, 64, 21, .5);
  --teal:          var(--teal-500);     /* #00A6B0 */
  --aviso:         #f0952e;
  --aviso-suave:   rgba(240, 149, 46, .14);

  --d0: #8b8b92;
  --d1: #00a6b0;
  --d2: #f0952e;
  --d3: #f84015;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--marca); }

button, input, textarea, select {
  font-family: var(--font-body);
  color: inherit;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid rgba(248, 64, 21, .45);
  outline-offset: 1px;
}
::placeholder { color: var(--tx-4); }

h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 22px;
  letter-spacing: var(--ls-tight);
  margin: 0 0 6px;
}

/* ---------------------------------------------------------------- layout --- */
.app { display: flex; height: 100vh; overflow: hidden; }

.nav {
  width: 212px; flex: none;
  background: var(--bg-nav);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
  padding: 20px 12px; gap: 20px;
  overflow-y: auto;
}
.nav__marca { padding: 0 10px; }
.nav__wordmark {
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: 16px;
  letter-spacing: var(--ls-tight);
}
.nav__wordmark span { color: var(--marca); }
.nav__sub { font-size: 11px; color: var(--tx-3); margin-top: 2px; }
.nav__grupo { display: flex; flex-direction: column; gap: 2px; }
.nav__pie { margin-top: auto; padding: 0 10px; font-size: 10.5px; color: var(--tx-5); line-height: 1.5; }

.eyebrow {
  font-size: 10px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--tx-4);
}

.nav__item {
  display: flex; align-items: center; gap: 8px;
  text-align: left; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; background: transparent; color: var(--tx-2);
  transition: var(--transition-control);
}
.nav__item:hover { background: var(--bg-hover); }
.nav__item[aria-current="page"] {
  background: var(--marca-suave); color: var(--marca-tx); font-weight: var(--fw-semibold);
}
.nav__badge {
  margin-left: auto; font-size: 10px; font-weight: var(--fw-semibold);
  background: var(--aviso-suave); color: var(--aviso);
  border-radius: var(--radius-pill); padding: 1px 7px;
}

.main { flex: 1; overflow-y: auto; }
.pagina { padding: 32px 28px 48px; }
.pagina--ancha { max-width: 1400px; }
.pagina--media { max-width: 1200px; }
.pagina--estrecha { max-width: 980px; }
.columna {
  max-width: 460px; margin: 0 auto; padding: 36px 24px 48px;
  display: flex; flex-direction: column; gap: 14px;
}
.columna--hoy { max-width: 430px; gap: 16px; }
.columna--exp { max-width: 560px; gap: 16px; }
.subtitulo { font-size: 12.5px; color: var(--tx-3); margin-bottom: 20px; }
.pie-nota { font-size: 11.5px; color: var(--tx-5); margin-top: 16px; line-height: 1.5; }

/* ---------------------------------------------------------------- piezas --- */
.tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
}
.tarjeta--relleno { padding: 18px; display: flex; flex-direction: column; gap: 10px; }

.btn {
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; border: 1px solid var(--linea-fuerte);
  background: transparent; color: var(--tx-2); padding: 8px 14px;
  transition: var(--transition-control);
}
.btn:hover { border-color: var(--tx-4); color: var(--tx); }
.btn--primario {
  background: var(--marca); border: none; color: #fff;
  font-size: 14.5px; font-weight: var(--fw-semibold); padding: 15px;
}
.btn--primario:hover { background: var(--marca-hover); box-shadow: var(--shadow-brand); }
.btn--compacto {
  background: var(--marca); border: none; color: #fff;
  font-size: 13px; font-weight: var(--fw-semibold); padding: 9px 16px;
}
.btn--compacto:hover { background: var(--marca-hover); }
.btn--sec {
  flex: 1; background: var(--bg-card); border: 1px solid var(--linea);
  color: var(--tx); padding: 12px;
}
.btn--sec:hover { background: var(--bg-hover); }
.btn:disabled { opacity: .4; cursor: default; }

.campo {
  background: var(--bg-input); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radius-sm); color: var(--tx);
  padding: 11px 12px; font-size: 13px;
}
.campo--num { width: 56px; padding: 6px 8px; text-align: center; border-radius: var(--radius-xs); }
.campo--peso { width: 76px; padding: 8px; text-align: center; }
.campo:disabled { opacity: .55; }
textarea.campo { width: 100%; font-size: 14px; line-height: 1.5; resize: vertical; }

.chip {
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tx-2);
  border-radius: var(--radius-pill); padding: 6px 13px; font-size: 12px;
  cursor: pointer; white-space: nowrap; transition: var(--transition-control);
}
.chip[aria-pressed="true"] {
  background: var(--marca-suave); color: var(--marca-tx); border-color: var(--marca-borde);
}
.pastilla {
  font-size: 10.5px; font-weight: var(--fw-semibold);
  padding: 2px 8px; border-radius: var(--radius-pill); justify-self: start;
}
.pastilla--aviso { background: var(--aviso-suave); color: var(--aviso); }

.aviso {
  border: 1px dashed var(--aviso); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 12.5px; color: var(--aviso);
  margin: 12px 0 20px; line-height: 1.5;
}
.nota-punteada {
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 12px; color: var(--tx-3); line-height: 1.6;
}
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- hoy --- */
.hoy__cab { display: flex; align-items: center; justify-content: space-between; }
.hoy__arq { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-semibold); }
.hoy__punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hoy__entreno { font-size: 12.5px; color: var(--tx-3); margin-top: -8px; }
.hoy__comida {
  background: var(--bg-card); border: 1px solid var(--linea);
  border-radius: var(--radius-md); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.hoy__momento {
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--marca);
}
.hoy__nombre {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 25px; line-height: 1.2; letter-spacing: var(--ls-tight); text-wrap: pretty;
}
.hoy__parte {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--linea);
}
.hoy__parte b { font-size: 15px; font-weight: var(--fw-semibold); white-space: nowrap; }
.hoy__paso { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hoy__rangos {
  font-size: 12px; color: var(--tx-3); border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radius-sm); padding: 10px 14px; text-align: center;
}

/* ---------------------------------------------------------------- semana --- */
.semana__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: start; }
.dia { background: var(--bg-card); border: 1px solid var(--linea); border-radius: var(--radius-md); overflow: hidden; }
.dia--hoy { border-color: var(--marca-borde); }
.dia--fuera { opacity: .45; }
.dia__cab { padding: 12px 12px 10px; border-bottom: 1px solid var(--linea); }
.dia__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.dia__dow { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 14px; }
.dia__fecha { font-weight: var(--fw-regular); color: var(--tx-3); font-size: 11.5px; }
.dia__arq {
  font-size: 11.5px; font-weight: var(--fw-bold); background: none; border: none;
  cursor: pointer; padding: 0 2px;
}
.dia__carga { display: flex; gap: 3px; margin-top: 8px; }
.dia__carga span { flex: 1; height: 4px; border-radius: 2px; }
.dia__entreno {
  font-size: 10.5px; color: var(--tx-3); margin-top: 7px; line-height: 1.35;
  background: none; border: none; padding: 0; text-align: left; width: 100%; cursor: text;
}
.dia__entreno:hover { color: var(--tx-2); }
.dia__hc { font-size: 10px; color: var(--tx-5); margin-top: 4px; }
.dia__hc--corto { color: var(--aviso); }
.dia__comidas { display: flex; flex-direction: column; padding: 6px; }
.dia__comida {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 7px 6px; border-radius: var(--radius-xs); color: var(--tx);
}
.dia__comida:hover { background: var(--bg-hover); }
.dia__mom {
  display: block; font-size: 9.5px; font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx-4);
}
.dia__mom--entreno { color: var(--teal); }
.dia__plato { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
.dia__pie { padding: 8px 12px; border-top: 1px solid var(--linea); }
.dia__fuera { background: none; border: none; cursor: pointer; font-size: 10.5px; color: var(--tx-4); padding: 0; }
.dia__fuera:hover { color: var(--aviso); }
.dia--fuera .dia__plato { text-decoration: line-through; }
.dia--fuera .dia__fuera { color: var(--aviso); }

.leyenda { display: flex; gap: 18px; margin-top: 16px; font-size: 11.5px; color: var(--tx-3); flex-wrap: wrap; }

/* ------------------------------------------------------------------ swap --- */
.velo { position: fixed; inset: 0; background: rgba(10, 10, 12, .55); z-index: 40; border: none; }
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw;
  background: var(--bg-card); border-left: 1px solid var(--linea-fuerte); z-index: 41;
  padding: 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.cajon__cab { display: flex; justify-content: space-between; align-items: center; }
.cajon__titulo { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 16px; }
.cajon__x { background: none; border: none; color: var(--tx-3); font-size: 18px; cursor: pointer; padding: 4px; }
.cajon__nota { font-size: 12px; color: var(--tx-3); line-height: 1.5; margin-top: -6px; }
.opcion {
  text-align: left; background: var(--bg-input); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; color: var(--tx);
  transition: var(--transition-control);
}
.opcion:hover { border-color: var(--marca); }
.opcion[aria-current="true"] { background: rgba(248, 64, 21, .1); border-color: var(--marca-borde); }
.opcion b { display: block; font-size: 13.5px; font-weight: var(--fw-semibold); }
.opcion small { display: block; font-size: 11.5px; color: var(--tx-3); margin-top: 3px; }
.opcion small em { color: var(--aviso); font-style: normal; }

/* ---------------------------------------------------------------- compra --- */
.compra__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.lista__cab {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--linea);
}
.lista__tienda { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 16px; }
.lista__n { font-size: 12px; color: var(--tx-3); }
.lista__cuerpo { padding: 8px 18px 16px; }
.lista__seccion { padding: 14px 0 4px; }
.lista__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 6px 0; color: var(--tx);
}
.lista__box {
  width: 16px; height: 16px; flex: none; border-radius: var(--radius-xs);
  border: 1.5px solid #4a4a52; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px;
}
.lista__item[aria-pressed="true"] .lista__box { background: var(--marca); border-color: var(--marca); }
.lista__item[aria-pressed="true"] .lista__txt { color: var(--tx-4); text-decoration: line-through; }
.lista__txt { font-size: 13px; }
.lista__vacia { padding: 24px 18px; font-size: 12.5px; color: var(--tx-3); line-height: 1.6; }

/* ----------------------------------------------------------------- batch --- */
.barra { height: 5px; border-radius: 3px; background: var(--linea); margin-bottom: 20px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--marca); border-radius: 3px; transition: width var(--dur-base) var(--ease-out); }
.tarea {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: var(--bg-card); border: 1px solid var(--linea); border-radius: var(--radius-md);
  padding: 16px; cursor: pointer; color: var(--tx); width: 100%;
}
.tarea[aria-pressed="true"] { border-color: rgba(248, 64, 21, .4); opacity: .55; }
.tarea[aria-pressed="true"] .tarea__t { text-decoration: line-through; }
.tarea__n {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold); background: var(--linea); color: var(--tx-2);
}
.tarea[aria-pressed="true"] .tarea__n { background: var(--marca); color: #fff; }
.tarea__t { display: block; font-size: 14.5px; font-weight: var(--fw-semibold); }
.tarea__d { display: block; font-size: 12px; color: var(--tx-3); margin-top: 3px; line-height: 1.45; }
.tarea__min { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; }

/* -------------------------------------------------------------- catálogo --- */
.tabla { background: var(--bg-card); border: 1px solid var(--linea); border-radius: var(--radius-md); overflow-x: auto; }
.tabla__fila {
  display: grid;
  grid-template-columns: 52px minmax(160px, 1fr) 96px 52px 40px 40px 40px 56px 56px 104px 116px;
  min-width: 900px; gap: 0 8px; align-items: center;
  padding: 5px 14px; border-bottom: 1px solid var(--linea-suave); font-size: 12.5px;
}
.tabla__cab {
  padding: 10px 14px; border-bottom: 1px solid var(--linea);
  font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-4);
}
.tabla__id { color: var(--tx-4); font-size: 11px; }
.tabla__tipo { color: var(--tx-3); font-size: 11.5px; }
.celda {
  background: none; border: none; color: var(--tx); font-size: 12.5px;
  padding: 4px 6px; border-radius: 5px; width: 100%;
}
.celda:hover { background: var(--bg-hover); }
.celda--num { color: var(--tx-2); font-size: 12px; padding: 4px 2px; font-variant-numeric: tabular-nums; }
.select {
  background: var(--bg-input); border: 1px solid var(--linea-fuerte); color: var(--tx-2);
  border-radius: var(--radius-xs); font-size: 11px; padding: 3px 4px; width: 100%;
}
.select--pendiente { border-color: var(--aviso); color: var(--aviso); }
.buscador { flex: 1; min-width: 160px; max-width: 260px; padding: 6px 12px; font-size: 12px; }

.rango__fecha { width: auto; padding: 7px 8px; font-size: 12.5px; }

/* ------------------------------------------------------------ arquetipos --- */
.arq__fila {
  background: var(--bg-card); border: 1px solid var(--linea); border-radius: var(--radius-md);
  padding: 16px 18px; display: grid; grid-template-columns: 170px 1fr 1fr; gap: 16px; align-items: center;
}
.arq__id { font-family: var(--font-heading); font-weight: var(--fw-extra); font-size: 17px; }
.arq__punto { width: 10px; height: 10px; border-radius: 50%; }
.rango { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* -------------------------------------------------------------- registro --- */
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 13px 6px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: var(--bg-input); color: var(--tx-2);
  transition: var(--transition-control);
}
.seg button:hover:not(:disabled) { border-color: var(--tx-4); }
.seg button[aria-pressed="true"] { background: rgba(248, 64, 21, .16); border-color: var(--marca); color: var(--marca-tx); }
.seg--num button { padding: 13px 0; font-size: 14px; font-weight: var(--fw-bold); }
.fila-etiqueta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fila-etiqueta b { font-size: 12.5px; font-weight: var(--fw-semibold); }
.fila-etiqueta small { font-size: 11px; color: var(--tx-3); }
.apagado { opacity: .45; }

/* ---------------------------------------------------------- experimento --- */
.exp__dots { display: flex; gap: 6px; }
.exp__dots span { flex: 1; height: 6px; border-radius: 3px; background: var(--linea); }
.exp__dots span.on { background: var(--marca); }

/* ------------------------------------------------------------------ toast -- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-hover); border: 1px solid var(--linea-fuerte); color: var(--tx);
  border-radius: var(--radius-pill); padding: 10px 22px; font-size: 13px; z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); max-width: 90vw; text-align: center;
}

/* --------------------------------------------------------------- móvil ----- */
.tabbar { display: none; }

@media (max-width: 860px) {
  .app { display: block; height: auto; min-height: 100vh; overflow: visible; }
  .nav { display: none; }
  .main { overflow: visible; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  .pagina { padding: 24px 16px 32px; }
  .columna { padding: 24px 16px 32px; }
  .semana__rejilla { grid-template-columns: 1fr; }
  .compra__rejilla { grid-template-columns: 1fr; }
  .arq__fila { grid-template-columns: 1fr; gap: 12px; }
  /* .cajon.cajon--ancho: especificidad doble a propósito — la regla de
     escritorio de .cajon--ancho va después en el fichero y ganaría por orden. */
  .cajon, .cajon.cajon--ancho { width: 100%; max-width: 100%; top: auto; border-left: none; border-top: 1px solid var(--linea-fuerte); max-height: 82vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* iOS hace zoom al enfocar campos con letra <16px y deja la página
     descuadrada: en móvil todos los campos de texto van a 16px. */
  .campo, .celda, .select, .buscador, textarea.campo { font-size: 16px; }
  .campo--num { width: 64px; }

  /* Banner del reloj y cabecera: botones a fila completa, nada aplastado. */
  .sync > div:first-child { flex: 1 1 100%; }
  .sync .btn, .sync .btn--compacto { flex: 1 1 auto; }
  .cabecera__acciones { width: 100%; }
  .cabecera__acciones .btn, .cabecera__acciones .btn--compacto { flex: 1 1 auto; }

  /* Selector de compra: fechas en su fila (selects elásticos), atajos debajo. */
  .rango__fechas { width: 100%; }
  .rango__fechas .select { flex: 1; min-width: 0; }
  .rango__atajos { width: 100%; }

  /* Línea del día: mejor dos líneas legibles que una recortada. */
  .linea__txt {
    white-space: normal; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--bg-nav); border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar button {
    background: none; border: none; color: var(--tx-4); cursor: pointer;
    padding: 10px 2px 12px; font-size: 10.5px; font-weight: var(--fw-semibold);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .tabbar button[aria-current="page"] { color: var(--marca-tx); }
  .tabbar em { font-style: normal; font-size: 15px; line-height: 1; }
  .hoja {
    position: fixed; inset: 0; z-index: 55; background: rgba(10, 10, 12, .6);
    display: flex; align-items: flex-end;
  }
  .hoja__panel {
    width: 100%; background: var(--bg-card); border-top: 1px solid var(--linea-fuerte);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 4px;
  }
}

/* ------------------------------------------------------- línea del día ----- */
.linea {
  background: var(--bg-card); border: 1px solid var(--linea);
  border-radius: var(--radius-md); padding: 8px 10px;
  display: flex; flex-direction: column;
}
.linea__fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left; color: var(--tx-2);
  padding: 6px 8px; border-radius: var(--radius-xs); font-size: 12px;
  cursor: pointer;
}
.linea__fila:hover { background: var(--bg-hover); }
.linea__fila[aria-current="true"] { background: var(--marca-suave); color: var(--tx); }
.linea__fila--sesion { cursor: default; font-weight: var(--fw-semibold); }
.linea__fila--sesion:hover { background: none; }
.linea__hora { flex: none; width: 44px; font-size: 11px; color: var(--tx-4); text-align: right; }
.linea__punto { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--linea-fuerte); }
.linea__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea__txt b { font-weight: var(--fw-semibold); }
.linea__ahora {
  flex: none; font-size: 9.5px; font-weight: var(--fw-semibold);
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--marca-suave); color: var(--marca-tx);
  border-radius: var(--radius-pill); padding: 2px 8px;
}

/* --------------------------------------------------------- plan del reloj -- */
.sync {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--linea);
  border-radius: var(--radius-md); padding: 12px 16px; margin: 12px 0 16px;
}
.sync .btn, .sync .btn--compacto { white-space: nowrap; }
.sync--viejo { border-color: var(--aviso); }

/* ------------------------------------------------------ cabecera de página - */
.cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 16px; margin-bottom: 6px; flex-wrap: wrap;
}
.cabecera__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------- rango de compra --- */
.rango--compra { flex-wrap: wrap; gap: 10px 14px; }
.rango__fechas { display: flex; align-items: center; gap: 6px; }
.rango__atajos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cajon--ancho { width: 380px; }

/* ------------------------------------------------------- ficha de comida --- */
/* Cabecera del cajón de swap: qué lleva el plato (escalado al día) y cómo se
   monta, antes de la lista de alternativas. */
.ficha {
  background: var(--bg-input); border: 1px solid var(--linea);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.ficha__nombre {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 15px; line-height: 1.3;
}
.ficha__parte {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--linea-suave); font-size: 12.5px;
}
.ficha__parte b { font-weight: var(--fw-semibold); white-space: nowrap; }
.ficha__receta {
  margin-top: 10px; padding: 9px 12px;
  background: var(--bg-card); border-left: 2px solid var(--marca);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 12px; color: var(--tx-2); line-height: 1.55;
}