/* =========================================================================
   app.css — Estilos ESTRUCTURALES mínimos de la Fase 0.
   Objetivo: que el layout responsive sea verificable (sidebar en PC, tabbar
   en móvil). El diseño visual definitivo (paleta, componentes) es fase aparte.
   ========================================================================= */

:root {
  --sidebar-w: 232px;
  --tabbar-h: 56px;
  --header-h: 52px;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e3e3df;
  --text: #1f2328;
  --text-soft: #6b7280;
  --accent: #2563eb;
  --accent-soft: #eef2ff;
  --danger: #b91c1c;
  --ok: #15803d;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }

/* ---------- Layout app ---------- */
.layout-app { min-height: 100vh; }

.app-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-header__title { font-size: 17px; font-weight: 600; margin: 0; }
.app-header__kebab {
  border: 0; background: none; font-size: 20px; color: var(--text-soft);
  cursor: pointer; padding: 4px 8px; line-height: 1;
}

.app-content { padding: 24px; flex: 1; }

/* ---------- Sidebar (PC) ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}
.sidebar__brand { font-weight: 700; font-size: 16px; padding: 4px 8px 14px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar__group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-soft); padding: 12px 8px 4px;
}
.nav-item {
  padding: 8px 10px; border-radius: 8px; color: var(--text-soft);
  font-size: 14px;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar__divider { height: 1px; background: var(--border); margin: 8px 4px; }
.sidebar__footer {
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar__user { font-size: 13px; color: var(--text-soft); }
.sidebar__logout-form { margin: 0; }
.sidebar__logout {
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: 12px; padding: 4px 10px; border-radius: 6px; color: var(--text-soft);
}
.sidebar__logout:hover { color: var(--danger); border-color: var(--danger); }

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

/* ---------- Placeholder de Fase 0 ---------- */
.placeholder {
  max-width: 640px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.placeholder h2 { margin: 6px 0 10px; font-size: 22px; }
.placeholder__badge {
  display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft);
  padding: 3px 8px; border-radius: 999px; margin: 0;
}
.placeholder__hint { color: var(--text-soft); font-size: 14px; }

/* ---------- Flash ---------- */
.flash { margin: 12px 24px 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.flash--success { background: #ecfdf5; color: var(--ok); }
.flash--error { background: #fef2f2; color: var(--danger); }
.flash--info { background: var(--accent-soft); color: var(--accent); }

/* ---------- Layout auth ---------- */
.layout-auth, .layout-error {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card, .error-card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 28px;
}
.auth-card__brand { font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 18px; }
.auth-title { font-size: 20px; margin: 0 0 16px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 13px; color: var(--text-soft); }
.field__input {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  font-size: 15px; width: 100%;
}
.field__input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field--check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--text-soft); }
.btn {
  border: 0; border-radius: 8px; padding: 10px 14px; font-size: 15px;
  cursor: pointer; font-weight: 500;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(0.95); }
.auth-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 14px; }
.auth-links a { color: var(--accent); }

/* ---------- Error ---------- */
.error-card { text-align: center; }
.error-card__code { font-size: 48px; font-weight: 700; color: var(--text-soft); margin: 0; }
.error-card h1 { font-size: 20px; margin: 4px 0 10px; }
.error-card p { color: var(--text-soft); margin-bottom: 18px; }

/* =========================================================================
   Responsive: móvil → oculta sidebar, muestra tabbar inferior.
   ========================================================================= */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .app-main { margin-left: 0; padding-bottom: var(--tabbar-h); }
  .app-content { padding: 16px; }
  .flash { margin: 12px 16px 0; }

  .tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    height: var(--tabbar-h);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 20;
  }
  .tabbar__item {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--text-soft);
  }
  .tabbar__item.is-active { color: var(--accent); font-weight: 600; }
}

/* =========================================================================
   Añadidos de la Fase 1 (autenticación).
   Pegar al final de public_html/css/app.css (tras los estilos de auth).
   ========================================================================= */

/* Texto explicativo bajo el título de una pantalla de auth. */
.auth-hint {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: -6px 0 16px;
}
.auth-hint a { color: var(--accent); }

/* Pista pequeña bajo un campo de formulario (requisitos de contraseña, etc.). */
.field__hint {
  font-size: 12px;
  color: var(--text-soft);
}

/* =========================================================================
   Añadidos de la Fase 2 a app.css — Catálogo de productos y secciones.
   Pegar al final del app.css de la Fase 0. Reutiliza las variables :root
   ya definidas (--surface, --border, --text-soft, --accent, --danger…).
   ========================================================================= */

/* ---------- Utilidades compartidas ---------- */
.muted { color: var(--text-soft); }

.btn--ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover { background: var(--bg); }
.btn--sm { padding: 6px 10px; font-size: 13px; }
.btn--danger-ghost { background: none; color: var(--danger); border: 1px solid transparent; }
.btn--danger-ghost:hover { background: #fdecec; }

.icon-btn {
  border: 0; background: none; cursor: pointer; font-size: 15px;
  color: var(--text-soft); padding: 4px 6px; line-height: 1; border-radius: 6px;
}
.icon-btn:hover { background: var(--bg); color: var(--text); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 5px;
  background: var(--bg); color: var(--text-soft); vertical-align: middle;
}
.pill--season { background: #e7f3ea; color: #2f6b40; }
.pill--inactive { background: #fcebeb; color: var(--danger); text-transform: uppercase; letter-spacing: 0.04em; }
.pill--ok { background: var(--accent-soft); color: var(--accent); }

/* ---------- Toolbar de productos ---------- */
.prod__toolbar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 12px;
}
.prod__search { flex: 1; min-width: 200px; }
.prod__toolbar-actions { display: flex; gap: 8px; }

/* ---------- Chips de filtro ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.chips__sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.chip:hover { border-color: var(--text-soft); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Tabla / lista de productos ---------- */
.prod-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.prod-table__section {
  padding: 7px 14px; background: var(--bg); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.prod-row {
  display: grid; grid-template-columns: 1fr 80px 80px; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.prod-row:last-child { border-bottom: 0; }
.prod-row:hover, .prod-row:focus { background: var(--accent-soft); outline: none; }
.prod-row__name { font-weight: 500; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.modal__panel {
  position: relative; width: 100%; max-width: 520px; max-height: 90vh;
  background: var(--surface); border-radius: var(--radius); display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal__head, .modal__foot {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
}
.modal__head { border-bottom: 1px solid var(--border); }
.modal__foot { border-top: 1px solid var(--border); }
.modal__foot-spacer { flex: 1; }
.modal__title { font-size: 17px; margin: 0; }
.modal__close { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--text-soft); margin-left: auto; }
.modal__body { overflow-y: auto; padding: 4px 18px; }

/* ---------- Formulario ---------- */
.form__group { border: 0; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--border); }
.form__group:last-child { border-bottom: 0; }
.form__legend { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); padding: 0; margin-bottom: 8px; }
.form__row { display: flex; gap: 12px; }
.form__row .field { flex: 1; }
.field__error { color: var(--danger); font-size: 12px; min-height: 1em; }
.field__hint { color: var(--text-soft); font-size: 12px; }

.toggle-line { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 4px 0; }

/* ---------- Rejilla de meses ---------- */
.months__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.month {
  border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  padding: 7px 0; font-size: 13px; cursor: pointer; color: var(--text);
}
.month:hover { border-color: var(--accent); }
.month.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.months__summary { font-size: 13px; margin: 4px 0 0; }
@media (min-width: 600px) { .months__grid { grid-template-columns: repeat(12, 1fr); } }

/* ---------- Precios ---------- */
.prices { list-style: none; margin: 0; padding: 0; }
.price-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-soft);
}
.price-row.is-current { color: var(--text); font-weight: 500; }
.price-row__value { margin-left: auto; }
.price-row__date { font-size: 12px; }
.prices__add { margin-top: 10px; }
.prices__add summary { display: inline-block; list-style: none; }
.prices__add summary::-webkit-details-marker { display: none; }
.prices__form { display: grid; gap: 8px; margin-top: 10px; padding: 10px; background: var(--bg); border-radius: 8px; }

/* ---------- Secciones ---------- */
.sections__lede { margin: 0 0 16px; }
.sec-list { list-style: none; margin: 0 0 16px; padding: 0; max-width: 520px; }
.sec-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  margin-bottom: 8px;
}
.sec-item.is-dragging { opacity: 0.5; }
.sec-item__grip { cursor: grab; color: var(--text-soft); user-select: none; }
.sec-item__pos {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.sec-item__name { flex: 1; font-weight: 500; }
.sec-item__count { color: var(--text-soft); font-size: 13px; min-width: 24px; text-align: right; }
.sec-item__acts { display: flex; gap: 2px; }

.sections__footer { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 520px; }
.sec-add { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.sec-add .field__input { flex: 1; }

@media (max-width: 768px) {
  .prod-row { grid-template-columns: 1fr 60px; }
  .prod-row__pkg { display: none; }
}

/* ============================================================================
   FASE 3a — Catálogo de platos: listado, ficha (scroll único), ingredientes,
   coste en vivo y autocompletado. Reutiliza variables y clases base (.btn,
   .chip, .field, .modal) de fases anteriores; aquí solo lo específico.
   ========================================================================== */

/* ---------- Listado de platos ---------- */
.dishes__toolbar {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap;
}
.dishes__search { flex: 1 1 240px; }
.dishes__toolbar-actions { display: flex; gap: 8px; }

.dish-list { display: flex; flex-direction: column; }

.dish-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto 16px;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 8px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dish-row:hover { border-color: var(--accent); }
.dish-row--inactive { opacity: .55; }
.dish-row__name { font-weight: 600; }
.dish-row__meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-soft); font-size: 13px; flex-wrap: wrap;
}
.dish-row__cost { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish-row__chev { color: var(--text-soft); font-size: 18px; }
.stars { color: #d97706; letter-spacing: 1px; }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 500;
}
.tag--base { background: #f0fdf4; color: var(--ok); }

.empty {
  padding: 40px 20px; text-align: center; color: var(--text-soft);
  border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ---------- Ficha de plato (scroll único) ---------- */
.dish-form { max-width: 720px; }
.dish-form__topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.dish-form__block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 20px; margin-bottom: 16px;
}
.dish-form__block--soon { opacity: .7; }
.dish-form__block-title { margin: 0 0 14px; font-size: 16px; }
.dish-form__actions {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.dish-form__cooked { font-size: 13px; }
.form__spacer { flex: 1; }

/* ---------- Líneas de ingrediente ---------- */
.ing-list { list-style: none; margin: 0 0 14px; padding: 0; }
.ing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.ing-row__name { font-weight: 500; min-width: 120px; flex: 1 1 auto; }
.ing-row__opt {
  font-size: 11px; color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px;
}
.field__input--xs { width: 84px; padding: 4px 6px; }
.ing-row__unit { color: var(--text-soft); font-size: 13px; min-width: 28px; }
.ing-row__optbox {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-soft);
}
.ing-row__cost { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.ing-row__noprice { font-size: 11px; color: var(--danger); }
.ing-row__x {
  border: none; background: none; color: var(--text-soft);
  cursor: pointer; font-size: 15px; padding: 2px 6px;
}
.ing-row__x:hover { color: var(--danger); }
.ing-empty { padding: 12px 4px; }

/* ---------- Buscador de ingredientes + autocompletado ---------- */
.ing-add { position: relative; margin-bottom: 14px; }
.ing-add__search { position: relative; }
.autocomplete {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 280px; overflow-y: auto;
}
.ac-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: none; background: none; cursor: pointer;
  text-align: left; font: inherit; color: var(--text);
}
.ac-item:hover { background: var(--accent-soft); }
.ac-item__sec { margin-left: auto; color: var(--text-soft); font-size: 12px; }
.ac-item--create { color: var(--accent); border-top: 1px solid var(--border); }

/* ---------- Coste en vivo ---------- */
.cost-live {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 12px 16px;
}
.cost-live__amount { font-size: 22px; font-weight: 700; color: var(--accent); }
.cost-live__label { color: var(--text-soft); }
.cost-live__per { margin-left: auto; color: var(--text-soft); font-size: 13px; }
.cost-live__missing { flex-basis: 100%; color: var(--danger); font-size: 12px; }

/* ---------- Responsive: ficha y listado en móvil ---------- */
@media (max-width: 640px) {
  .dish-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name cost" "meta meta";
  }
  .dish-row__name { grid-area: name; }
  .dish-row__cost { grid-area: cost; }
  .dish-row__meta { grid-area: meta; }
  .dish-row__chev { display: none; }
  .ing-row { gap: 8px; }
}

/* ============================================================================
   FASE 3b — Catálogo de platos: etiquetas (chips editables + autocompletado) y
   platos base (subrecetas). Pegar al final de app.css (no reemplaza nada).
   Reutiliza .autocomplete / .ac-item (Fase 3a) y variables base.
   ========================================================================== */

.dish-form__hint { margin: 0 0 14px; font-size: 13px; }

/* ---------- Etiquetas ---------- */
.tags-edit { display: flex; flex-direction: column; gap: 12px; }

.tag-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-empty, .subrecipe-empty { font-size: 13px; }

.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 500;
}
.tag-chip__x {
  border: none; background: none; cursor: pointer;
  color: var(--accent); font-size: 13px; line-height: 1;
  padding: 0 2px; opacity: .7;
}
.tag-chip__x:hover { opacity: 1; }

.tags-add { position: relative; max-width: 320px; }

/* ---------- Platos base (subrecetas) ---------- */
.subrecipe-list { list-style: none; margin: 0 0 12px; padding: 0; }
.subrecipe-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.subrecipe-row__name { font-weight: 500; text-decoration: none; color: var(--text); }
.subrecipe-row__name:hover { color: var(--accent); text-decoration: underline; }
.subrecipe-row__inactive {
  font-size: 11px; color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px;
}
.subrecipe-row__x {
  margin-left: auto; border: none; background: none; color: var(--text-soft);
  cursor: pointer; font-size: 15px; padding: 2px 6px;
}
.subrecipe-row__x:hover { color: var(--danger); }

.subrecipe-add { position: relative; max-width: 320px; }

/* ============================================================================
   FASE 5 — Despensa: listado agrupado por urgencia, edición en línea de
   cantidad/caducidad, y modal de alta manual con buscador de producto. Pegar al
   final de app.css (no reemplaza nada). Reutiliza variables y clases base
   (.btn, .chip, .field, .modal, .autocomplete, .ac-item, .empty) y .field__input--xs
   (Fase 3a).
   ========================================================================== */

/* ---------- Barra de herramientas ---------- */
.pantry__toolbar {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap;
}
.pantry__search { flex: 1 1 240px; }
.pantry__toolbar-actions { display: flex; gap: 8px; }

/* ---------- Grupos por urgencia ---------- */
.pantry-group { margin-bottom: 22px; }
.pantry-group__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 14px; font-weight: 600;
  color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em;
}
.pantry-group__count {
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  background: var(--accent-soft); border-radius: 999px; padding: 0 8px;
}
.pantry-group--urgente .pantry-group__title { color: var(--danger); }
.pantry-group--pronto  .pantry-group__title { color: #b45309; }

/* ---------- Filas ---------- */
.pantry-list { list-style: none; margin: 0; padding: 0; }
.pantry-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto 16px;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 8px;
}
.pantry-group--urgente .pantry-row { border-left: 3px solid var(--danger); }
.pantry-group--pronto  .pantry-row { border-left: 3px solid #d97706; }

.pantry-row__name { font-weight: 600; }
.pantry-row__sec { font-size: 13px; }
.pantry-row__qty { display: inline-flex; align-items: center; gap: 6px; }
.pantry-row__unit { font-size: 13px; }
.pantry-row__date { display: inline-flex; align-items: center; gap: 8px; }
.field__input--date { width: 150px; padding: 4px 6px; }
.pantry-row__exp { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pantry-row__exp--urgente { color: var(--danger); font-weight: 600; }
.pantry-row__exp--pronto  { color: #b45309; }
.pantry-row__x {
  border: none; background: none; color: var(--text-soft);
  cursor: pointer; font-size: 15px; padding: 2px 6px;
}
.pantry-row__x:hover { color: var(--danger); }
.pantry-row__note { grid-column: 1 / -1; font-size: 12px; }

/* ---------- Estado vacío con CTA ---------- */
.pantry__results .empty .btn { margin-top: 12px; }

/* ---------- Modal de alta: selector de producto ---------- */
.pantry-pick { position: relative; }
.pantry-pick__search { position: relative; }
.pantry-pick__chosen {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent); font-weight: 500;
}
.pantry-pick__x {
  border: none; background: none; color: var(--accent);
  cursor: pointer; font-size: 13px; padding: 0 2px; opacity: .7;
}
.pantry-pick__x:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .pantry-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name x"
      "sec sec"
      "qty date";
    row-gap: 8px;
  }
  .pantry-row__name { grid-area: name; }
  .pantry-row__sec  { grid-area: sec; }
  .pantry-row__qty  { grid-area: qty; }
  .pantry-row__date { grid-area: date; justify-self: end; }
  .pantry-row__x    { grid-area: x; justify-self: end; }
  .field__input--date { width: 130px; }
}

/* ===========================================================================
   Fase 4 — Menú semanal. Pegar al final de app.css (no reemplaza nada).
   Rejilla 7×2 en PC; vista de un día en móvil. Panel de platos lateral en PC,
   hoja inferior en móvil. Variables de color/espaciado heredadas de app.css.
   =========================================================================== */

.menu { display: flex; flex-direction: column; gap: var(--space-3, 16px); }

/* Barra superior: cambiar de semana + acciones. */
.menu__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2, 12px); flex-wrap: wrap;
}
.menu__week { display: flex; align-items: center; gap: 8px; }
.menu__week-nav { font-size: 20px; line-height: 1; padding: 4px 10px; }
.menu__week-label { text-align: center; min-width: 150px; }
.menu__week-range { font-weight: 600; }
.menu__week-today {
  display: block; margin: 2px auto 0; font-size: 11px; border: 0; background: none;
  color: var(--color-accent, #2563eb); cursor: pointer;
}
.menu__toolbar-actions { display: flex; gap: 8px; }

/* Layout principal: tablero + panel. */
.menu__layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-3, 16px); align-items: start; }
.menu__board { min-width: 0; }

/* ── Rejilla (PC) ───────────────────────────────────────────────────────────── */
.menu__grid { display: flex; flex-direction: column; gap: 6px; }
.menu__grid-head, .menu__row {
  display: grid; grid-template-columns: 56px 1fr 1fr; gap: 6px; align-items: stretch;
}
.menu__grid-corner { }
.menu__col-head, .menu__row-head {
  font-size: 12px; color: var(--color-text-secondary, #64748b); font-weight: 600;
}
.menu__col-head { padding: 4px 8px; }
.menu__row-head {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-surface-2, #f1f5f9); border-radius: 8px; padding: 6px 0;
}
.menu__row-dow { font-size: 12px; }
.menu__row-date { font-size: 16px; color: var(--color-text-primary, #0f172a); }

.menu__cell {
  position: relative; min-height: 64px; padding: 8px; border-radius: 8px;
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0);
  transition: border-color .12s, background .12s;
}
.menu__cell.is-drop, .menu__cell.is-target {
  border-color: var(--color-accent, #2563eb);
  background: var(--color-accent-soft, #eff6ff);
}
.menu__cell.is-external { background: var(--color-surface-2, #f1f5f9); }
.menu__cell-ext {
  position: absolute; top: 4px; right: 4px; border: 0; background: none; cursor: pointer;
  color: var(--color-text-tertiary, #94a3b8); font-size: 13px; line-height: 1; padding: 2px;
  opacity: 0; transition: opacity .12s;
}
.menu__cell:hover .menu__cell-ext { opacity: 1; }
.menu__cell-empty { font-size: 13px; }
.menu__cell-external {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--color-text-secondary, #64748b);
}

.menu__cell-dishes { display: flex; flex-direction: column; gap: 4px; }
.menu__chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 6px;
  background: var(--color-surface-2, #f8fafc); padding: 4px 8px; font-size: 13px;
}
.menu__chip:hover { border-color: var(--color-accent, #2563eb); }
.menu__chip.is-archived { opacity: .55; }
.menu__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__chip-serv {
  flex: none; font-size: 11px; color: var(--color-text-secondary, #64748b);
  background: var(--color-surface, #fff); border-radius: 10px; padding: 1px 6px;
}
.menu__add {
  margin-top: 4px; width: 100%; border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: 6px; background: none; cursor: pointer; padding: 6px;
  color: var(--color-text-secondary, #64748b); font-size: 13px;
}
.menu__add:hover { border-color: var(--color-accent, #2563eb); color: var(--color-accent, #2563eb); }

/* ── Panel de platos (PC) ───────────────────────────────────────────────────── */
.menu__panel {
  position: sticky; top: var(--space-3, 16px);
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 120px); overflow: hidden;
}
.menu__panel-title { font-size: 15px; margin: 0; }
.menu__panel-hint { font-size: 12px; }
.menu__dishlist { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.menu__dcard {
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; padding: 8px 10px;
  background: var(--color-surface, #fff); cursor: grab; user-select: none;
}
.menu__dcard:hover { border-color: var(--color-accent, #2563eb); }
.menu__dcard:active { cursor: grabbing; }
.menu__dcard-name { display: block; font-size: 14px; }
.menu__dcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.menu__dcard-tag {
  font-size: 10px; color: var(--color-text-secondary, #64748b);
  background: var(--color-surface-2, #f1f5f9); border-radius: 8px; padding: 1px 6px;
}

/* ── Resumen ────────────────────────────────────────────────────────────────── */
.menu__summary {
  border-top: 1px solid var(--color-border, #e2e8f0); padding-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.menu__summary-cost { font-size: 20px; font-weight: 700; }
.menu__summary-note, .menu__summary-shared { font-size: 13px; }
.menu__summary-shared { color: var(--color-text-secondary, #64748b); }
.menu__summary-warn { font-size: 13px; color: var(--color-warning, #b45309); }

/* ── Navegación de día + vista de día (móvil) ───────────────────────────────── */
.menu__day-nav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface-2, #f1f5f9); border-radius: 10px; padding: 8px 12px;
  margin-bottom: 12px;
}
.menu__day-arrow {
  border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--color-text-secondary, #64748b); padding: 0 8px;
}
.menu__day-label { text-align: center; }
.menu__day-dow { display: block; font-size: 15px; font-weight: 600; }
.menu__day-date { font-size: 12px; color: var(--color-text-tertiary, #94a3b8); }

.menu__day { display: flex; flex-direction: column; gap: 12px; }
.menu__day-meal {
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px;
  padding: 12px; background: var(--color-surface, #fff);
}
.menu__day-meal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; margin-bottom: 8px;
}
.menu__ext-toggle {
  border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px;
  background: none; cursor: pointer; font-size: 12px; padding: 3px 10px;
  color: var(--color-text-secondary, #64748b);
}
.menu__ext-toggle.is-on {
  background: var(--color-surface-2, #f1f5f9); border-color: var(--color-text-tertiary, #94a3b8);
  color: var(--color-text-primary, #0f172a);
}

/* ── Hoja inferior (móvil) ──────────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .4); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh;
  background: var(--color-surface, #fff); border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; padding: 12px 16px 20px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.15);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet__title { font-size: 15px; margin: 0; }
.sheet__close { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--color-text-secondary, #64748b); }
.sheet__body { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

/* ── Modal de raciones: stepper ─────────────────────────────────────────────── */
.stepper { display: inline-flex; align-items: center; gap: 0; }
.stepper__btn {
  width: 36px; height: 36px; border: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface-2, #f8fafc); cursor: pointer; font-size: 18px; line-height: 1;
}
.stepper__btn:first-child { border-radius: 8px 0 0 8px; }
.stepper__btn:last-child { border-radius: 0 8px 8px 0; }
.stepper__input {
  width: 56px; height: 36px; text-align: center; border: 1px solid var(--color-border, #e2e8f0);
  border-left: 0; border-right: 0; font-size: 15px;
}
.menu__dishmodal-slot { font-size: 13px; margin: 0 0 12px; }
.btn--danger-ghost { background: none; border: 0; color: var(--color-danger, #dc2626); cursor: pointer; }

/* ── Responsive: por debajo de 860px, una sola columna (vista de un día) ──── */
@media (max-width: 859px) {
  .menu__layout { grid-template-columns: 1fr; }
  .menu__panel { display: none; }            /* en móvil el picker vive en la hoja */
  .menu__toolbar-actions .btn { padding: 6px 10px; }
}
@media (min-width: 860px) {
  .sheet { display: none; }                  /* la hoja es solo móvil */
  .menu__day-nav { display: none; }
}

/* >>> PEGAR ESTE BLOQUE AL FINAL DE public_html/css/app.css (no reemplaza nada) <<< */
/* ============================================================================
   FASE 6a — Lista de la compra y modo súper. Pegar al final de app.css (no
   reemplaza nada). Reutiliza variables y clases base (.btn, .btn--primary,
   .btn--ghost, .field, .modal, .autocomplete, .ac-item, .pantry-pick, .empty,
   .muted). Aporta: layout de la lista (cuerpo denso "en casa" + panel lateral
   en PC), filas de item con check / pastilla de despensa / badge de extra,
   modo súper táctil (solo móvil), hoja de acciones móvil y estados vacíos
   enriquecidos.
   ============================================================================ */

/* ---------- Contenedor y subcabecera ---------- */
.shopping { display: block; }
.shopping__subhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.shopping__week { display: flex; flex-direction: column; gap: 2px; }
.shopping__week-label { font-size: 16px; font-weight: 600; }
.shopping__week-count { font-size: 12px; }

/* Toggle En casa / En el súper (solo móvil, lo muestra/oculta el JS) */
.shopping__toggle {
  display: inline-flex; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px; font-size: 13px;
}
.shopping__toggle[hidden] { display: none; }
.shopping__toggle-btn {
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 6px 12px; border-radius: 7px; color: var(--text-soft);
}
.shopping__toggle-btn.is-on {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ---------- Layout: cuerpo + panel lateral (PC) ---------- */
.shopping__layout { display: flex; gap: 20px; align-items: flex-start; }
.shopping__main { flex: 1 1 auto; min-width: 0; }
.shopping__results { display: block; }

.shopping__side {
  flex: 0 0 260px; width: 260px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 16px 18px; position: sticky; top: 16px;
}
.shopping__side[hidden] { display: none; }
.shopping__side-title { margin: 0 0 10px; font-size: 14px; }
.shopping__side-title + .shopping__side-title { margin-top: 18px; }
.shopping__side-hint { font-size: 11px; margin: 8px 0 0; line-height: 1.5; }
.shop-stat { font-size: 13px; margin-bottom: 8px; display: flex; flex-direction: column; }
.shop-stat strong { font-size: 15px; }

/* ---------- Cabecera de sección ---------- */
.shop-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; margin-top: 10px;
  background: var(--bg); border-radius: 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft); font-weight: 600;
}
.shop-section:first-child { margin-top: 0; }
.shop-section__count { font-weight: 400; text-transform: none; letter-spacing: 0; }
.shop-section--super { font-size: 13px; padding: 10px 8px; }

/* ---------- Fila de item (vista "en casa") ---------- */
.shop-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.shop-item__meta { flex: 1; min-width: 0; }
.shop-item__line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.shop-item__name { font-size: 14px; color: var(--text); }
.shop-item__qty { font-size: 13px; color: var(--text-soft); }
.shop-item.is-checked .shop-item__name { color: var(--text-soft); }

/* Check redondo (marca "cogido" también en vista casa) */
.shop-check {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--border); border-radius: 50%;
  background: var(--surface); cursor: pointer; position: relative; padding: 0;
}
.shop-check:hover { border-color: var(--accent); }
.shop-item.is-checked .shop-check { background: var(--accent); border-color: var(--accent); }
.shop-item.is-checked .shop-check::after {
  content: "✓"; position: absolute; inset: 0; color: #fff;
  font-size: 13px; line-height: 18px; text-align: center;
}

/* Pastilla "tenías X en despensa" (descuento parcial) */
.shop-pill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 11px; color: var(--text-soft);
  background: var(--accent-soft); border-radius: 999px; padding: 2px 8px;
}
.shop-pill__i { font-size: 11px; }

/* Distintivo "Extra" */
.shop-badge-extra {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 4px; padding: 1px 6px; margin-left: 4px;
}

/* Acciones por item */
.shop-item__actions { display: flex; gap: 2px; align-items: center; }
.shop-ic {
  border: 0; background: none; cursor: pointer; color: var(--text-soft);
  font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.shop-ic:hover { background: var(--bg); color: var(--text); }
.shop-ic--danger:hover { background: #fdecec; color: var(--danger); }

/* Atajo "Añadir extra a esta sección" (móvil) */
.shop-add-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px dashed var(--border); background: none; cursor: pointer;
  border-radius: 8px; padding: 9px 12px; margin: 8px 0 4px;
  color: var(--text-soft); font: inherit; font-size: 13px; text-align: left;
}
.shop-add-row:hover { border-color: var(--accent); color: var(--accent); }
.shop-add-row__plus { font-weight: 700; }

/* ---------- CTA inferior (móvil) ---------- */
.shopping__footer {
  position: sticky; bottom: 0; padding: 12px 0 14px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.shopping__footer[hidden] { display: none; }
.shopping__cta { width: 100%; padding: 13px; font-size: 15px; }

/* ---------- Modo súper (táctil, solo móvil) ---------- */
.shop-super-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: 0; border-bottom: 1px solid var(--border); background: none;
  cursor: pointer; font: inherit; text-align: left;
  padding: 16px 6px; color: var(--text);
}
.shop-super-check {
  flex: 0 0 auto; width: 34px; height: 34px;
  border: 2px solid var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; background: var(--surface);
}
.shop-super-item.is-checked .shop-super-check { background: var(--ok); border-color: var(--ok); }
.shop-super-meta { display: flex; flex-direction: column; gap: 2px; }
.shop-super-name { font-size: 16px; }
.shop-super-qty { font-size: 13px; color: var(--text-soft); }
.shop-super-item.is-checked .shop-super-name { color: var(--text-soft); text-decoration: line-through; }

/* ---------- Hoja de acciones (móvil) ---------- */
.sheet { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.sheet__panel {
  position: relative; width: 100%; background: var(--surface);
  border-radius: 16px 16px 0 0; padding: 8px; display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
.sheet__title {
  font-size: 13px; color: var(--text-soft); padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.sheet__action {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px;
  text-align: left; padding: 14px 12px; border-radius: 8px; color: var(--text);
}
.sheet__action:hover { background: var(--bg); }
.sheet__action--danger { color: var(--danger); }

/* ---------- Estados vacíos enriquecidos ---------- */
.empty__icon { font-size: 34px; margin-bottom: 6px; }
.empty h3 { margin: 4px 0 6px; font-size: 17px; color: var(--text); }
.empty__actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* Botón a ancho completo (panel lateral) */
.btn--block { display: block; width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .shopping__layout { display: block; }
  .shopping__side { display: none !important; }
}
@media (min-width: 769px) {
  /* En PC el toggle y la CTA/hoja móviles no existen. */
  .shopping__toggle, .shopping__footer { display: none !important; }
  /* En PC las acciones por item se ven al pasar el ratón por la fila. */
  .shop-item__actions { opacity: 0; transition: opacity .12s; }
  .shop-item:hover .shop-item__actions { opacity: 1; }
}

/* Fragmento de la Fase 6b. PEGAR AL FINAL del public_html/css/app.css
   existente (después del bloque de la Fase 6a). NO reemplaza el fichero. */

/* ============================================================================
   FASE 6b — Resumen de compra ("compra realizada"). Pegar al final de app.css
   (no reemplaza nada). Aporta: botón "Compra realizada" del panel lateral (PC),
   overlay de resumen a pantalla completa con líneas editables (cantidad inline,
   caducidad como input date, desmarcar = no ingresar).
   ============================================================================ */

/* Botón "Compra realizada" del panel lateral (PC). Separado del resto del panel. */
.shopping__side-complete { margin-top: 16px; }
.shopping__side-complete:disabled { opacity: .5; cursor: not-allowed; }

/* Bloquea el scroll del fondo mientras el overlay está abierto. */
body.is-summary-open { overflow: hidden; }

/* ---------- Overlay de resumen (pantalla completa) ---------- */
.summary {
  position: fixed; inset: 0; z-index: 60;
  background: var(--surface);
  display: flex; flex-direction: column;
}
.summary[hidden] { display: none; }

.summary__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.summary__cancel {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--text-soft); padding: 4px 6px; border-radius: 6px;
}
.summary__cancel:hover { background: var(--bg); color: var(--text); }
.summary__title { font-size: 15px; font-weight: 600; }
.summary__head-spacer { width: 64px; }

.summary__intro { padding: 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.summary__intro-title { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.summary__intro-text { font-size: 12px; line-height: 1.5; margin: 0; }

.summary__body {
  flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px;
  /* Centra el contenido en PC, donde el overlay es ancho. */
  width: 100%; max-width: 640px; margin: 0 auto;
}

.summary__foot {
  flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  /* Respeta el área segura en móviles con notch inferior. */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.summary__foot .btn { flex: 1; padding: 13px; font-size: 15px; }
.summary__foot .btn:first-child { flex: 0 0 auto; }

/* ---------- Línea del resumen ---------- */
.summary-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.summary-item__check {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px;
  border: 2px solid var(--accent); border-radius: 7px;
  background: var(--accent); color: #fff; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.summary-item.is-off .summary-item__check {
  background: transparent; color: var(--text-soft); border-color: var(--border);
}
.summary-item__meta { flex: 1; min-width: 0; }
.summary-item__name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.summary-item.is-off .summary-item__name { color: var(--text-soft); }
.summary-item__line {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-soft);
}

/* Cantidad editable inline. */
.summary-item__qty { display: inline-flex; align-items: center; gap: 5px; }
.summary-item__qtyinput {
  width: 78px; padding: 5px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
  color: var(--text);
}
.summary-item__qtyinput:disabled { opacity: .5; }

/* Caducidad editable (input date) o etiqueta "sin caducidad". */
.summary-item__expiry { display: inline-flex; align-items: center; gap: 5px; }
.summary-item__date {
  padding: 5px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
  color: var(--text);
}
.summary-item__date:disabled { opacity: .5; }
.summary-item__no-expiry { font-style: italic; }

/* En PC, el botón "Cancelar" del pie sobra (ya hay ✕ en cabecera) pero no
   estorba; se mantiene por consistencia con móvil. */

/* =========================================================================
   FASE 7 — Costes, ajustes y pulido.
   AÑADIR AL FINAL de public_html/css/app.css (no reemplaza nada).

   Incluye: tema oscuro (override de las variables de :root), un PUENTE de
   variables --color-* → variables base (la vista del menú semanal de la Fase 4
   usaba nombres --color-* que nunca se definieron y caían a fallbacks claros,
   por eso se veía con fondos blancos en modo oscuro), la promoción de los dos
   fondos de flash a variables, y los estilos de las páginas nuevas (ajustes,
   cuenta, costes).
   ========================================================================= */

/* ---- Variables de flash (faltaban como tales en la Fase 0) ----
   Se redefinen .flash--success/.flash--error usando variables, de modo que el
   tema oscuro pueda sobreescribirlas. Como van DESPUÉS en la hoja, ganan a las
   reglas hardcodeadas de la Fase 0 sin tener que tocar aquel bloque. */
:root {
  --flash-success-bg: #ecfdf5;
  --flash-error-bg:   #fef2f2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);

  /* ---- Puente de variables ----
     Varias vistas (menú semanal de la Fase 4, y otras) usan un set de nombres
     `--color-*` que NUNCA se definió en :root, así que caían siempre al fallback
     hardcodeado claro (#fff, #e2e8f0…) e ignoraban el tema → fondos blancos en
     modo oscuro. Aquí se mapean a las variables reales del sistema base, de modo
     que esas vistas heredan el tema sin tocar su CSS. En claro reproducen los
     valores previos; el bloque de tema oscuro los redefine más abajo.
     Se añaden además --surface-2 y --warning, que el base no tenía. */
  --surface-2: #f1f5f9;
  --warning: #b45309;

  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-soft: var(--accent-soft);
  --color-danger: var(--danger);
  --color-warning: var(--warning);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-soft);
  --color-text-tertiary: var(--text-soft);
}
.flash--success { background: var(--flash-success-bg); color: var(--ok); }
.flash--error   { background: var(--flash-error-bg);   color: var(--danger); }

/* Transición suave al alternar tema (solo color/fondo, no layout). */
body,
.app-header,
.sidebar,
.tabbar,
.placeholder,
.card,
.field__input,
.btn--ghost {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* ---- Tema oscuro ----
   Solo redefine las variables; todos los componentes ya las consumen, así que
   heredan el modo oscuro sin cambios. El atributo lo pone el layout en <html>. */
html[data-theme="dark"] {
  --bg: #16181d;
  --surface: #1f2228;
  --surface-2: #262a31;
  --border: #2e323b;
  --text: #e6e8ec;
  --text-soft: #9aa1ac;
  --accent: #6ea8fe;
  --accent-soft: #232a3a;
  --danger: #f87171;
  --ok: #4ade80;
  --warning: #fbbf24;
  --flash-success-bg: #14271c;
  --flash-error-bg:   #2a1717;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35);
  /* Las variables --color-* definidas en :root referencian a las de arriba
     (--surface, --border, …), así que no hace falta repetirlas aquí: heredan
     automáticamente los valores oscuros. */
}
html[data-theme="dark"] .btn--primary { color: #0d1b33; }
html[data-theme="dark"] body { color-scheme: dark; }

/* ===========================================================================
   Piezas compartidas de las páginas de la Fase 7
   =========================================================================== */

.page-intro { max-width: 720px; margin-bottom: 18px; }
.page-intro p { color: var(--text-soft); font-size: 14px; margin: 4px 0 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.card__hint { color: var(--text-soft); font-size: 13px; margin: 0 0 16px; }

.stack { max-width: 560px; display: flex; flex-direction: column; gap: 18px; }

.btn--ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.form-status { font-size: 13px; min-height: 18px; margin-top: 4px; }
.form-status.is-error { color: var(--danger); }
.form-status.is-ok { color: var(--ok); }
.field__error { color: var(--danger); font-size: 12px; min-height: 14px; }

/* ---- Ajustes: filas de preferencia ---- */
.setting-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 0; border-top: 1px solid var(--border);
}
.setting-row:first-of-type { border-top: 0; }
.setting-row__text { flex: 1; }
.setting-row__label { font-weight: 500; font-size: 15px; }
.setting-row__desc { color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.setting-row__control { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.setting-row__control input[type="number"] {
  width: 72px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px;
}

/* Interruptor (toggle) accesible, construido sobre un checkbox real. */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  position: absolute; inset: 0; background: var(--border); border-radius: 999px;
  transition: background-color 0.16s ease; pointer-events: none;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: var(--surface); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.16s ease;
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Selector de tema (dos opciones tipo segmented control). */
.theme-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.theme-toggle button {
  border: 0; background: none; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; color: var(--text-soft); font-weight: 500;
}
.theme-toggle button.is-active { background: var(--accent); color: #fff; }
html[data-theme="dark"] .theme-toggle button.is-active { color: #0d1b33; }

/* ---- Cuenta: lista de datos ---- */
.data-list { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; font-size: 14px; }
.data-list dt { color: var(--text-soft); }
.data-list dd { margin: 0; font-weight: 500; }

/* ===========================================================================
   Costes
   =========================================================================== */
.cost-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.cost-tabs button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
}
.cost-tabs button.is-active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.cost-panel { display: none; }
.cost-panel.is-active { display: block; }

.chart-wrap { position: relative; height: 320px; margin-top: 8px; }
.chart-empty, .chart-loading {
  color: var(--text-soft); font-size: 14px; text-align: center; padding: 48px 16px;
}

.cost-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cost-controls label { font-size: 13px; color: var(--text-soft); }
.cost-controls select, .cost-controls input[type="number"] {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 14px;
}
.cost-note { color: var(--text-soft); font-size: 12px; margin-top: 10px; }

/* ===========================================================================
   Pulido: estado vacío reutilizable (coherente entre secciones)
   =========================================================================== */
.empty-state {
  max-width: 520px; text-align: center; margin: 32px auto; padding: 32px 24px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty-state h3 { margin: 0 0 6px; font-size: 17px; }
.empty-state p { color: var(--text-soft); font-size: 14px; margin: 0 0 16px; }

@media (max-width: 768px) {
  .setting-row { flex-direction: column; }
  .setting-row__control { align-self: flex-start; }
  .data-list { grid-template-columns: 1fr; gap: 2px 0; }
  .data-list dd { margin-bottom: 8px; }
  .chart-wrap { height: 260px; }
}

/* ── Fase 8 · Importación masiva ─────────────────────────────────────────── */

.import { max-width: 760px; }
.import__intro { margin-bottom: 20px; line-height: 1.5; }

.import__step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px;
}
.import__step-title {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-soft); margin: 0 0 14px;
}

.import__source {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.import__formats { display: flex; gap: 16px; }
.radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.import__file { cursor: pointer; }

.import__raw {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5; resize: vertical; min-height: 200px;
}

.import__actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px;
}

/* Resumen en tarjetas */
.import__summary { display: flex; flex-wrap: wrap; gap: 12px; }
.import__card {
  flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.import__card-num { font-size: 26px; font-weight: 700; line-height: 1; }
.import__card-label { font-size: 12px; color: var(--text-soft); }
.import__card.is-dup .import__card-num { color: var(--danger); }
.import__sections-list {
  flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--text-soft);
}

/* Errores por fila */
.import__errors {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--radius);
  background: #fcebeb; border: 1px solid var(--danger);
}
.import__errors h3 { margin: 0 0 8px; font-size: 14px; color: var(--danger); }
.import__errors ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }

/* Estrategia ante duplicados */
.import__dup {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border);
}
.import__dup-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.import__dup .radio { display: flex; margin-bottom: 4px; }

/* Resultado final */
.import__done-card {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 18px 20px;
}
.import__done-card h3 { margin: 0 0 10px; color: var(--accent); }
.import__done-card ul { margin: 0; padding-left: 18px; line-height: 1.6; }

@media (max-width: 600px) {
  .import__source { flex-direction: column; align-items: stretch; }
  .import__card { flex-basis: calc(50% - 6px); }
}

/* ── Fase 8 · Panel "Más" (móvil) ────────────────────────────────────────── */
/* Hoja inferior abierta con el checkbox #moreToggle (CSS-only, sin JS).        */

.more { display: none; }            /* oculto en PC: allí navega la sidebar */

.tabbar__more { cursor: pointer; }

@media (max-width: 768px) {
  .more {
    display: block; position: fixed; inset: 0; z-index: 50;
    pointer-events: none; visibility: hidden;
  }
  .more__backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4);
    opacity: 0; transition: opacity 0.18s ease;
  }
  .more__sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-top-left-radius: 16px;
    border-top-right-radius: 16px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform 0.22s ease;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  }

  /* Abierto: el checkbox marcado activa el panel. */
  #moreToggle:checked ~ .more { pointer-events: auto; visibility: visible; }
  #moreToggle:checked ~ .more .more__backdrop { opacity: 1; }
  #moreToggle:checked ~ .more .more__sheet { transform: translateY(0); }

  .more__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px 6px;
  }
  .more__title {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-soft);
  }
  .more__close {
    font-size: 18px; line-height: 1; color: var(--text-soft);
    padding: 4px 8px; cursor: pointer;
  }

  .more__list { display: flex; flex-direction: column; }
  .more__item {
    display: block; padding: 14px 18px; font-size: 15px; color: var(--text);
    text-decoration: none; border-top: 1px solid var(--border);
  }
  .more__item:first-child { border-top: none; }
  .more__item.is-active { color: var(--accent); font-weight: 600; }
  .more__item:active { background: var(--bg); }

  .more__logout-form { border-top: 1px solid var(--border); margin-top: 4px; }
  .more__logout {
    width: 100%; text-align: left; padding: 14px 18px; font-size: 15px;
    color: var(--danger); background: none; border: none; cursor: pointer;
  }
  .more__logout:active { background: var(--bg); }
}

/* ===========================================================================
   Fase 9a · Configuración del generador de menús
   APPEND al final de public_html/css/app.css.

   Reutiliza variables de tema (--surface, --border, --accent, --accent-soft,
   --text, --text-soft, --danger, --radius) y componentes ya existentes
   (.card, .switch, .months__grid/.month, .btn--*, .field__*, .form-status).
   No redefine ninguno de ellos; solo añade el layout propio del panel.
   =========================================================================== */

.gen { max-width: 980px; }

/* ── Plantilla 7×2 ─────────────────────────────────────────────────────────── */
.gen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .gen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .gen-grid { grid-template-columns: repeat(3, 1fr); }
}

.gen-day {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface-2, var(--surface));
  padding: 10px;
}
.gen-day__name {
  font-weight: 600; font-size: 14px; margin: 2px 4px 10px;
}

.gen-slot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
}
.gen-slot + .gen-slot { margin-top: 8px; }
.gen-slot.is-off { opacity: 0.55; }
.gen-slot.is-off .gen-slot__body { display: none; }

.gen-slot__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gen-slot__meal { font-size: 13px; font-weight: 600; color: var(--text); }

/* Switch compacto (variante del .switch de la Fase 7). */
.switch--sm { width: 38px; height: 22px; }
.switch--sm .switch__track::after { width: 16px; height: 16px; top: 3px; left: 3px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(16px); }

.gen-slot__body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.gen-slot__field { display: flex; flex-direction: column; gap: 4px; }
.gen-slot__label { font-size: 12px; color: var(--text-soft); font-weight: 500; }
.gen-slot__diff { padding: 6px 8px; font-size: 13px; }

.gen-slot__tags { display: flex; flex-direction: column; gap: 6px; }

.gen-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gen-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 4px 3px 9px; border-radius: 999px;
  border: 1px solid var(--border);
}
.gen-tag--req {
  background: var(--accent-soft, #eef2ff);
  border-color: transparent;
  color: var(--accent);
}
.gen-tag--excl {
  background: #fcebeb;            /* mismo fondo que .pill--inactive (Fase 2) */
  border-color: transparent;
  color: var(--danger);
}
html[data-theme="dark"] .gen-tag--excl { background: #3a2526; }
.gen-tag__txt { line-height: 1.4; }
.gen-tag__x {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 12px; color: inherit; opacity: 0.7; padding: 2px;
}
.gen-tag__x:hover { opacity: 1; }

.gen-tags__add { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.gen-tags__input { padding: 6px 8px; font-size: 13px; min-width: 0; }
.gen-tags__mode { padding: 6px 8px; font-size: 13px; }

/* ── Listas (cuotas y vetos) ──────────────────────────────────────────────── */
.gen-list { list-style: none; margin: 0 0 4px; padding: 0; }
.gen-list__row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px; border-top: 1px solid var(--border);
}
.gen-list__row:first-child { border-top: 0; }
.gen-list__tag { font-weight: 600; font-size: 14px; }
.gen-list__detail { flex: 1; color: var(--text-soft); font-size: 13px; }
.gen-list__empty { font-size: 13px; margin: 2px 0 8px; }

.gen-add {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.gen-add .field__input { padding: 7px 10px; font-size: 14px; }
#quotaTag { flex: 1 1 160px; }
#quotaMin, #quotaMax { width: 84px; }

.gen-add--blackout { flex-direction: column; align-items: stretch; }
.gen-add--blackout #blackoutTag { max-width: 280px; }
.gen-add--blackout .months__grid { margin: 4px 0; }
.gen-add--blackout .btn { align-self: flex-start; }

@media (max-width: 520px) {
  .gen-tags__add { grid-template-columns: 1fr; }
  .gen-list__row { flex-wrap: wrap; }
  .gen-list__detail { flex-basis: 100%; order: 3; }
}

/* ===========================================================================
   Fase 9b — Generador de menús: estilo de las líneas-SOBRAS en la rejilla.
   Una línea-sobras (cena reutilizada como comida del día siguiente) se distingue
   del plato normal con un borde discontinuo y una pastilla "♻ Sobras". No es
   editable como un plato cualquiera para raciones (se gestiona desde su cena de
   origen), pero el chip sigue siendo pulsable para ver/quitar.
   =========================================================================== */

.menu__chip--leftover {
  border-style: dashed;
  background: var(--color-surface, #fff);
}
.menu__chip-left {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-text-secondary, #64748b);
  background: var(--color-surface-2, #f1f5f9);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  padding: 1px 6px;
  white-space: nowrap;
}


/* ============================================================================
   FASE 10 — Cestas de compra (físico / online). Pegar al final de app.css (no
   reemplaza nada). Pestañas de cestas (móvil), columnas (PC) — rediseñadas con
   fecha y botones grandes —, hoja "mover a…", control "usar lo de la despensa"
   en el resumen, segmento tipo de cesta.
   ============================================================================ */

/* ---------- Pestañas de cestas (móvil) ---------- */
.baskets-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.baskets-tabs[hidden] { display: none; }
.baskets-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px;
  color: var(--text-soft); white-space: nowrap;
}
.baskets-tab.is-on {
  border-color: var(--accent); color: var(--text); font-weight: 600;
  background: var(--accent-soft);
}
.baskets-tab.is-closed { opacity: .65; }
.baskets-tab__icon { font-size: 14px; }
.baskets-tab__count {
  font-size: 11px; background: var(--bg); border-radius: 999px; padding: 1px 7px;
}
.baskets-tab.is-on .baskets-tab__count { background: var(--surface); }
.baskets-tab__check { color: var(--ok); font-weight: 700; }
.baskets-tab--add {
  font-size: 18px; line-height: 1; padding: 7px 14px; color: var(--accent);
  border-style: dashed;
}

/* ---------- Columnas de cestas (PC) — rediseño ---------- */
.baskets-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 2px 12px;
}

.basket-col {
  flex: 1 1 0;
  min-width: 320px;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  overflow: hidden;
}
.basket-col.is-closed { opacity: .72; }

/* Banda de color por tipo, para distinguir física / online de un vistazo. */
.basket-col.is-physical { border-top: 3px solid var(--accent); }
.basket-col.is-online   { border-top: 3px solid #7c3aed; }

.basket-col__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.basket-col__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.basket-col__icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.basket-col__titletext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.basket-col__name {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.basket-col__date {
  font-size: 12px;
  color: var(--text-soft);
}
.basket-col__count {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg);
  border-radius: 999px;
  padding: 3px 10px;
}
.basket-col__closed {
  font-size: 13px;
  font-weight: 600;
  color: var(--ok);
  display: inline-flex;
  align-items: center;
}

/* Botones de cabecera: grandes, etiquetados, con buen área táctil. */
.basket-col__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.basket-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 8px;
  min-height: 38px;
  transition: background .12s, border-color .12s, color .12s;
}
.basket-btn:hover { background: var(--bg); border-color: var(--text-soft); }
.basket-btn__i { font-size: 14px; line-height: 1; }

.basket-btn--ok {
  border-color: var(--accent);
  color: var(--accent);
}
.basket-btn--ok:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.basket-btn--icon { padding: 9px 11px; }
.basket-btn--danger { color: var(--danger); }
.basket-btn--danger:hover { background: #fdecec; border-color: var(--danger); }

.basket-col__body { padding: 6px 8px 0; }
.basket-col__empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 14px;
}

/* Filas con más aire dentro de la columna. */
.basket-col__body .shop-item {
  padding: 12px 8px;
  border-radius: 8px;
}
.basket-col__body .shop-item + .shop-item {
  border-top: 1px solid var(--border);
}
.basket-col__body .shop-item:hover { background: var(--bg); }

/* Tarjeta "Nueva cesta": grande y obvia, no un botoncito. */
.basket-col--add {
  flex: 0 0 220px;
  min-width: 220px;
  align-self: stretch;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border);
  background: none;
  cursor: pointer;
  border-radius: var(--radius);
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: border-color .12s, background .12s;
}
.basket-col--add:hover { border-color: var(--accent); background: var(--accent-soft); }
.basket-col--add__plus {
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
}

/* ---------- Segmento tipo de cesta (modal nueva cesta) ---------- */
.seg { display: inline-flex; gap: 6px; }
.seg__opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 14px; font-size: 13px;
}
.seg__opt input { accent-color: var(--accent); }
.seg__opt:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); font-weight: 600;
}

/* ---------- Control "usar lo de la despensa" (resumen de cierre) ---------- */
.summary-item__pantry {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; color: var(--text-soft);
}
.summary-item__pantry input { accent-color: var(--accent); }
.summary-item.is-off .summary-item__pantry { opacity: .5; }

/* Botón borrar fantasma reutilizado en estados vacíos de cesta. */
.btn--danger { color: var(--danger); }
.btn--danger:hover { background: #fdecec; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .baskets-cols { display: none; }
}
@media (min-width: 769px) {
  /* En PC mandan las columnas; pestañas, toggle y CTA móviles se ocultan. */
  .baskets-tabs { display: none !important; }
}