:root {
  --ink: #1f1d1a;
  --muted: #625d55;
  --line: #ddd7cc;
  --paper: #faf8f4;
  --card: #ffffff;
  --accent: #3d5a4f;
  --accent-soft: #e7eeea;
  --warn: #8a4f0e;
  --warn-soft: #fbf1e3;
  --bad: #9b2c2c;
  --bad-soft: #f8e9e7;
  --good: #2f6b45;
  --good-soft: #e6f1ea;
  --focus: #1d5fbf;
  --tap: 44px;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; line-height: 1.2; }
h1 { font-size: 1.7rem; margin: 0.2rem 0 0.4rem; }
h2 { font-size: 1.25rem; margin: 0.2rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.1rem 0 0.4rem; }
code { font-size: 0.9em; background: #efebe3; padding: 0 0.25em; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; }

/* Cabecera y navegación ------------------------------------------------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
.brand { font-family: Georgia, serif; font-size: 1.35rem; letter-spacing: 0.02em; }
.brand-sub { display: block; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.session { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.sections, .subs { display: flex; gap: 0.15rem; padding: 0 1rem; overflow-x: auto; scrollbar-width: thin; }
.sections button, .subs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; min-height: var(--tap); padding: 0.55rem 0.85rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.sections button.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.subs { background: #f5f2ec; border-top: 1px solid var(--line); }
.subs button { min-height: 40px; font-size: 0.9rem; }
.subs button.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
/* Pestañas de trabajo (28-oct-2026): contador de pendientes y menú «Más» con las pantallas que hoy no tienen trabajo. */
.subs .count { display: inline-block; min-width: 1.3em; margin-left: 0.4em; padding: 0 0.35em; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.5; text-align: center; vertical-align: 1px; }
.subs-row { display: flex; align-items: stretch; background: #f5f2ec; border-top: 1px solid var(--line); }
.subs-row .subs { flex: 0 1 auto; min-width: 0; border-top: 0; }
.subs-more { position: relative; flex: none; padding-right: 1rem; }
.subs-more > summary { list-style: none; cursor: pointer; min-height: 40px; display: flex; align-items: center; padding: 0.55rem 0.85rem; color: var(--muted); font-size: 0.9rem; white-space: nowrap; border-bottom: 3px solid transparent; }
.subs-more > summary::-webkit-details-marker { display: none; }
.subs-more > summary::after { content: ' ▾'; font-size: 0.8em; }
.subs-more[open] > summary { color: var(--ink); }
.subs-menu { position: absolute; top: 100%; left: 0; z-index: 6; min-width: 15rem; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 29, 51, 0.12); padding: 0.3rem; }
.subs-menu button { border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; padding: 0.55rem 0.7rem; min-height: 40px; font-size: 0.9rem; white-space: nowrap; }
.subs-menu button:hover { background: var(--accent-soft); filter: none; }
.view { padding: 1.25rem; max-width: 1280px; margin: 0 auto; }
.view:focus { outline: none; }

/* Formularios ----------------------------------------------------------- */
label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
label.wide { width: 100%; }
label.check { flex-direction: row; align-items: center; gap: 0.45rem; font-size: 0.88rem; color: var(--ink); min-height: 36px; }
label.check input { width: 20px; height: 20px; }
input, select, textarea { font: inherit; color: var(--ink); padding: 0.5rem 0.6rem; border: 1px solid #c9c2b5; border-radius: 6px; background: var(--card); min-width: 0; min-height: var(--tap); }
textarea { min-height: 4.5rem; resize: vertical; width: 100%; }
button { font: inherit; min-height: var(--tap); padding: 0.45rem 0.95rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button.ghost { background: transparent; color: var(--accent-ink); }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
form.inline { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
form.stack { display: flex; flex-direction: column; gap: 0.75rem; }
form.stack > button { align-self: flex-start; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 0.6rem 0.8rem; }
legend { font-size: 0.8rem; color: var(--muted); padding: 0 0.3rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.2rem 1rem; max-height: 220px; overflow: auto; }
.allergens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.25rem 1rem; }
.allergen { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; border-bottom: 1px dotted var(--line); }
.allergen label.check:last-child { font-size: 0.75rem; color: var(--muted); }
.origins { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.2rem; }
.line-name { min-width: 160px; align-self: center; font-weight: 600; }
.segmented { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.segmented button.active { background: var(--accent); color: #fff; }

/* Maquetación ----------------------------------------------------------- */
.grid { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 1.25rem; align-items: start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1024px) { .grid { grid-template-columns: 1fr; } .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } .view { padding: 0.75rem; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 0.6rem 0.4rem; min-height: var(--tap); border-bottom: 1px solid var(--line); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.list li:hover, .list li.selected { background: #f2efe8; }
.list li.selected { box-shadow: inset 3px 0 0 var(--accent); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 0.8rem; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f2efe8; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Indicadores ----------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; margin: 0.25rem 0 1rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.85rem; }
.kpi-value { font-family: Georgia, serif; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 0.78rem; color: var(--muted); }
.kpi.bad { border-color: var(--bad); background: var(--bad-soft); }
.kpi.warn { border-color: var(--warn); background: var(--warn-soft); }
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.quadrant { border-radius: 8px; padding: 0.7rem 0.85rem; border: 1px solid var(--line); min-height: 96px; }
.quadrant ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.q-title { font-weight: 700; }
.quadrant.star { background: var(--good-soft); border-color: var(--good); }
.quadrant.plowhorse, .quadrant.puzzle { background: var(--warn-soft); border-color: var(--warn); }
.quadrant.dog { background: var(--bad-soft); border-color: var(--bad); }
.bar-track { height: 10px; background: #ece7de; border-radius: 999px; overflow: hidden; margin: 0.3rem 0 0.8rem; }
.bar-fill { height: 100%; background: var(--accent); transition: width 0.2s; }

/* Estados --------------------------------------------------------------- */
.tag { display: inline-block; font-size: 0.74rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; background: var(--card); }
.tag.good { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.tag.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.tag.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.chip { display: inline-flex; align-items: center; gap: 0.2rem; margin: 0 0.6rem 0.4rem 0; }
.muted { color: var(--muted); font-size: 0.88rem; }
.small { font-size: 0.82rem; }
.empty { padding: 0.5rem 0; }
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.notice { background: var(--warn-soft); border-left: 4px solid var(--warn); padding: 0.55rem 0.8rem; border-radius: 4px; color: var(--ink); }
.bullets { margin: 0.3rem 0; padding-left: 1.2rem; }
.bullets li { margin: 0.15rem 0; }
.actions { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: end; }
.issue { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
details { margin: 0.6rem 0; }
summary { cursor: pointer; color: var(--accent-ink); min-height: 32px; }
.toast { position: fixed; bottom: 1rem; right: 1rem; max-width: 460px; padding: 0.8rem 1rem; border-radius: 8px; background: var(--ink); color: #fff; font-size: 0.88rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 20; }
.toast.show { opacity: 0.96; }
.toast.error { background: var(--bad); }
.intro { padding: 2rem 0; }
.intro p { color: var(--muted); max-width: 64ch; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Inicio: pasos del trabajo ------------------------------------------- */
.steps { margin: 0; padding-left: 1.2rem; }
.steps li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .steps li { flex-direction: column; align-items: flex-start; } }

/* Hoja de coste: el formato de la cocina (producto, kg, €/kg, coste) ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hint { color: var(--muted); font-size: 0.82rem; }
.costsheet { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.4rem 0.4rem; margin-bottom: 1rem; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
.cs-title { font-size: 1.9rem; margin: 0; text-wrap: balance; }
.cs-meta { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; }
.cs-status { margin: 0.9rem 0 0.6rem; font-size: 0.92rem; color: var(--warn); font-weight: 600; }
.cs-status.ok { color: var(--good); }
.cs-ask { background: var(--warn-soft); border: 1px solid #ebd3ad; border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 0.8rem; }
.cs-ask p { margin: 0 0 0.5rem; }
.cs-ask .actions { align-items: center; }
.cs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.4rem; }
table.cs { font-size: 0.95rem; }
table.cs thead th { color: var(--ink); font-weight: 600; font-size: 0.8rem; border-bottom: 2px solid var(--ink); padding: 0.55rem 0.6rem; }
table.cs td, table.cs tbody th { padding: 0.7rem 0.6rem; }
table.cs td.num { width: 9.5rem; font-size: 1rem; }
table.cs .strong { font-weight: 600; }
.cs-product { min-width: 14rem; }
.cs-name { display: block; font-weight: 600; }
.cs-sub { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; max-width: 62ch; }
tr.cs-problem > td { background: var(--warn-soft); }
tr.cs-problem + tr.cs-problem > td { border-top: 1px solid #ebd3ad; }
tr.cs-missing > td { background: #f7f5f1; color: var(--muted); }
.cs-wait { margin: 0; font-size: 0.88rem; }
.cs-fix { vertical-align: middle; }
.cs-question { margin: 0 0 0.45rem; font-weight: 600; color: var(--warn); }
.cs-answers { display: flex; flex-wrap: wrap; gap: 0.45rem 0.6rem; align-items: center; }
.ask-form { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ask-field { flex-direction: row; align-items: center; gap: 0.35rem; color: var(--ink); font-size: 0.9rem; }
.ask-field input { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.ask-field input:not([inputmode='decimal']) { width: 10rem; text-align: left; }
.ask-field .unit { color: var(--muted); white-space: nowrap; }
table.cs tfoot th, table.cs tfoot td { padding: 0.65rem 0.6rem; border-bottom: 0; }
tr.cs-total > * { border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink); font-size: 1rem; }
tr.cs-rinde > th { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.cs-rinde-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.cs-rinde-value { font-weight: 600; font-variant-numeric: tabular-nums; }
tr.cs-perkg > * { background: var(--accent-soft); color: var(--accent-ink); }
tr.cs-perkg > th { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 1.15rem; border-radius: 8px 0 0 8px; }
tr.cs-perkg > td { font-family: Georgia, 'Times New Roman', serif; font-size: 1.6rem; border-radius: 0 8px 8px 0; }
details.more { margin: 0.5rem 0 1rem; }
details.more > summary { padding: 0.6rem 0; font-weight: 600; }

@media (max-width: 680px) {
  .costsheet { padding: 1rem 0.9rem 0.3rem; }
  .cs-title { font-size: 1.5rem; }
  table.cs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.cs tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  table.cs tbody td { border-bottom: 0; padding: 0.35rem 0.5rem; }
  table.cs tbody td.cs-product, table.cs tbody td.cs-fix { grid-column: 1 / -1; padding-top: 0.6rem; }
  table.cs tbody td.num { width: auto; text-align: left; font-size: 0.95rem; }
  table.cs tbody td.num::before { content: attr(data-label); display: block; color: var(--muted); font-size: 0.72rem; }
  .cs-product { min-width: 0; }
  tr.cs-perkg > td { font-size: 1.35rem; }
  /* El total, como las filas: nombre arriba, cifras debajo, sin columnas vacías. */
  table.cs tfoot tr.cs-total { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; }
  table.cs tfoot tr.cs-total > td:empty { display: none; }
}

/* Hoja de coste: la tabla para leer, el panel para hacer ---------------- */
.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; align-items: start; margin-top: 1rem; }
.cs-side { display: flex; flex-direction: column; gap: 0.9rem; position: sticky; top: 6.5rem; }
.cs-fromrecipe { color: var(--muted); }
.cs-none { color: var(--muted); font-weight: 400; }
.cs-pill { display: inline-block; font-size: 0.76rem; font-weight: 600; padding: 0.12rem 0.6rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.cs-pill.wait { color: #57524a; background: #f3f0ea; border-color: var(--line); }
.cs-pill.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
tr.cs-row-wait .cs-name { color: #57524a; }
.cs-total .cs-sub { font-weight: 400; }
.cs-result { background: var(--accent-soft); color: var(--accent-ink); border-radius: 10px; padding: 1rem 1.1rem; }
.cs-result.done { background: var(--good-soft); }
.cs-result-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.cs-result h2 { margin: 0; font-size: 1.15rem; }
.cs-result-value { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.9rem; font-variant-numeric: tabular-nums; text-align: right; }
.cs-result-value .cs-sub { font-family: ui-sans-serif, system-ui, sans-serif; color: var(--accent-ink); }
.cs-progress { display: flex; gap: 3px; margin: 0.8rem 0 0.5rem; }
.cs-progress .seg { flex: 1; height: 6px; border-radius: 3px; background: #c9c2b5; }
.cs-progress .seg.ok { background: var(--good); }
.cs-progress .seg.you { background: var(--warn); }
.cs-why { margin: 0; font-size: 0.86rem; }
/* Aplicar propuestas en bloque (28-oct-2026, lote 2). */
.batch-apply { margin: 0.4rem 0 0.8rem; }
.batch-result { margin-bottom: 0.8rem; }
.cs-task-inline .cs-task-name .cs-pill { margin-left: 0.35rem; }
/* Selector de archivos con etiqueta propia (28-oct-2026, lote 2): el control nativo queda accesible pero sin verse. */
.file-pick { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; cursor: pointer; }
.file-pick-btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0.45rem 0.95rem; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent-ink); background: transparent; }
.file-pick:hover .file-pick-btn { background: var(--accent-soft); }
.file-pick:focus-within .file-pick-btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.file-names { color: var(--muted); font-size: 0.9rem; max-width: 28rem; }
/* Rinde guardado: confirmación que se queda en el bloque (28-oct-2026). */
.cs-saved { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--good); }
.cs-result .cs-rinde { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid #c8d6cf; }
.cs-rinde-label { font-weight: 600; }
.cs-rinde-label .cs-sub { color: var(--accent-ink); font-weight: 400; }
.cs-todo { border-radius: 10px; padding: 0.95rem 1.1rem; }
.cs-todo h2 { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 0.6rem; }
.cs-todo ul { list-style: none; margin: 0; padding: 0; }
.cs-todo.you { background: var(--card); border: 1px solid #ebd3ad; }
.cs-todo.wait { background: #f3f0ea; color: #57524a; }
.cs-count { display: inline-block; min-width: 1.4rem; text-align: center; font-size: 0.78rem; font-weight: 700; color: #fff; background: var(--warn); border-radius: 999px; padding: 0.05rem 0.4rem; vertical-align: 0.1em; }
.cs-task { padding: 0.7rem 0; border-top: 1px solid #ebd3ad; }
.cs-todo h2 + .cs-task, .cs-todo h2 + ul > .cs-task:first-child { border-top: 0; padding-top: 0; }
.cs-task-name { margin: 0; font-weight: 600; }
.cs-task-text { margin: 0.15rem 0 0.5rem; font-size: 0.86rem; color: var(--warn); }
.cs-task .ask-field input { width: 5.5rem; }
.cs-task select { max-width: 100%; }
.cs-waitlist { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.cs-waitlist li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.cs-convert-name { width: min(28rem, 100%); }
.cs-line-actions { margin-top: 0.3rem; }
.cs-line-actions > .actions { align-items: center; }
.cs-remove { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.cs-change:not(:empty) { margin-top: 0.4rem; }
.cs-remove-btn { min-height: 36px; padding: 0.1rem 0.6rem; font-size: 0.8rem; }
.cs-line-actions button { min-height: 36px; }
.cs-convert .ask-field { flex-wrap: wrap; margin: 0.4rem 0; }
.cs-sub-details { margin: 0.35rem 0 0; }
.cs-sub-details > summary { font-size: 0.82rem; min-height: 28px; }
.cs-breakdown { margin: 0.3rem 0 0.2rem; padding: 0.5rem 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
table.cs-mini { font-size: 0.82rem; }
table.cs-mini td, table.cs-mini th { padding: 0.3rem 0.4rem; }
table.cs-mini td.num { width: auto; font-size: 0.82rem; }
@media (max-width: 1024px) {
  /* minmax(0, …): la columna no crece con la tabla y nada se sale por la derecha en el móvil. */
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-side { position: static; order: -1; }
}

/* Crear receta: la hoja de coste vacía ---------------------------------- */
.cs-newhead { display: flex; flex-direction: column; gap: 0.6rem; flex: 1 1 28rem; min-width: 0; }
.cs-namefield { width: 100%; }
.cs-title-input { font-family: Georgia, 'Times New Roman', serif; font-size: 1.6rem; width: 100%; max-width: 34rem; border-color: var(--line); }
.cs-qty { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.cs-product select { width: 100%; max-width: 26rem; }
.cs-product .ask-form { margin-top: 0.45rem; }
.cs-newproduct { padding: 0.2rem 0; }
.cs-newproduct input[name='name'] { width: 15rem; }

/* Familia, estado y parte aprovechable (ADR 0015) ----------------------- */
.is-hidden { display: none !important; }
.cs-inline-ask { margin: 0.5rem 0 0.2rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 0 8px 8px 0; }
.cs-inline-ask .cs-answers { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cs-reclassify > summary { font-size: 0.82rem; min-height: 28px; color: var(--muted); }
.cs-result-value.none { font-size: 1.35rem; color: var(--muted); }
@media (max-width: 680px) {
  /* minmax(0, …): ninguna cifra empuja la fila más allá del borde. */
  table.cs tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* Una tabla ancha (IVA, lotes) se desplaza dentro de su tarjeta, no la página entera. */
  .card { overflow-x: auto; }
}
.list li.inactive { color: var(--muted); }
.list li.inactive .tag { margin-left: 0.4rem; }
.fam-group { margin-top: 0.8rem; }
.fam-group > h3 { margin: 0.4rem 0 0.2rem; font-size: 0.95rem; color: var(--muted); }
.fam-group.pending > h3 { color: var(--warn); }

/* ======================================================================
   WeChef · fase 1 (dirección visual de la infografía): fondo claro, tarjetas
   limpias, azul marino en la navegación; azul, verde y terracota para
   acciones, resultados y avisos. Va al final: manda sobre lo anterior.
   ====================================================================== */
:root {
  /* Paleta «Grafito e índigo» (27-oct-2026, elegida por el asistente a petición de Vincenzo: «la que se vea más
     profesional»). Neutros grafito, un solo color de acción (índigo, de la familia del isotipo) y tres colores de
     estado que no se confunden con él ni entre sí: bien verde, aviso ámbar, problema rojo. El logo va en tinta
     sobre claro y en blanco sobre oscuro; el color lo pone el isotipo. */
  --ink: #17181c;
  --muted: #5b5e66;
  --line: #e5e4df;
  --paper: #f6f6f3;
  --card: #ffffff;
  --navy: #15171c;
  --navy-2: #24272f;
  --nav-text: #c7cad3;
  --brand: #3d34a5;
  --accent: #3d34a5;
  --accent-ink: #3d34a5;
  --accent-soft: #ecebf8;
  --focus: #3d34a5;
  /* 28-oct-2026 (lote 3): #a65c00 daba 4,42:1 sobre --bad-soft en los chips de 12 px; #945200 da 5,30:1 ahí y 5,51:1
     sobre --warn-soft, mismo naranja, un punto más oscuro. */
  --warn: #945200;
  --warn-soft: #fdf3e2;
  --bad: #b42318;
  --bad-soft: #fdecea;
  --good: #1e7a4c;
  --good-soft: #e6f3ec;
  --radius: 14px;
}
h1, h2, h3, .cs-title, .cs-result-value, .brand { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 650; letter-spacing: -0.01em; }
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: 0 1px 2px rgba(15, 29, 51, 0.04); }
button { border-radius: 10px; }

/* Armazón: barra lateral + contenido */
.shell { min-height: 100vh; }
.shell.in { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.main { min-width: 0; }
.side { background: var(--navy); color: var(--nav-text); display: flex; flex-direction: column; gap: 0.25rem; padding: 1.1rem 0.75rem; position: sticky; top: 0; height: 100vh; }
/* Antes de entrar no hay navegación: el display de .side no puede ganar a [hidden]. */
.side[hidden] { display: none; }
.nav-brand { font-weight: 700; font-size: 1.25rem; color: #fff; padding: 0.3rem 0.7rem 1.3rem; }
.nav-main { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-foot { margin-top: auto; }
/* Dentro de la app, en escritorio, la barra superior sobra: repetía el logo y el formulario de entrada. Lo que
   tenía (restaurante, cuenta, Salir) está en .nav-session, al pie del panel. En móvil la barra se queda. */
@media (min-width: 761px) { .shell.in .bar { display: none; } }
.nav-session { padding: 0.6rem 0.95rem 0.8rem; border-top: 1px solid var(--navy-2); margin-bottom: 0.25rem; min-width: 0; }
.nav-session-tenant { color: #fff; font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-session-user { color: var(--nav-text); opacity: 0.75; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem; }
.nav-session-actions { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.45rem; }
.nav-link { background: transparent; border: 0; padding: 0; min-height: 0; color: var(--nav-text); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.nav-link:hover:not(:disabled) { color: #fff; filter: none; }
.nav-item { display: flex; align-items: center; gap: 0.8rem; width: 100%; background: transparent; border: 0; color: var(--nav-text); text-align: left; padding: 0.8rem 0.95rem; border-radius: 10px; font-size: 1.0625rem; }
.nav-item:hover:not(:disabled) { background: var(--navy-2); filter: none; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bar { background: var(--card); }
.subnav .subs { background: transparent; border-bottom: 1px solid var(--line); padding: 0 1.25rem; }
.subs button[aria-selected='true'], .subs button.active { color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.view { max-width: 1120px; }

/* Cabeceras de página */
.page-head { margin: 0.4rem 0 1rem; }
.page-head.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; margin: 0; }
.page-head p { margin: 0.2rem 0 0; }
.section-title { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; }

/* Hoy */
.today-list { display: flex; flex-direction: column; gap: 0.8rem; }
.today-task { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.4rem 0.9rem; width: 100%; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.1rem; }
.today-task:hover:not(:disabled) { filter: none; box-shadow: 0 2px 8px rgba(15, 29, 51, 0.08); }
.today-task.high { border-left-color: var(--warn); background: #fff8f4; }
.today-task.medium { border-left-color: #d79a2b; background: #fffbf2; }
.today-task.info { border-left-color: var(--accent); background: var(--accent-soft); }
.today-task-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.today-task-title { font-weight: 650; font-size: 1.02rem; }
.today-task-detail { color: var(--muted); font-size: 0.88rem; }
.today-chip { font-size: 0.74rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.today-chip.high { background: var(--bad-soft); color: var(--warn); }
.today-chip.medium { background: #fdf3dc; color: #8a5a0b; }
.today-chip.info { background: var(--accent-soft); color: var(--accent-ink); }
.today-go { font-size: 1.5rem; color: var(--muted); line-height: 1; }
.today-more { margin-top: 0.9rem; }
.today-more > summary { cursor: pointer; color: var(--accent-ink); min-height: var(--tap); display: flex; align-items: center; }
.today-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.today-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; display: flex; flex-direction: column; }
.today-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--accent-ink); }
.today-kpi-label { color: var(--muted); font-size: 0.85rem; }

/* Mi cocina · recetas */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.filters input[type='search'] { flex: 1 1 16rem; min-width: 0; }
.recipe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.recipe-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.9rem; width: 100%; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem; }
.recipe-row:hover:not(:disabled) { filter: none; box-shadow: 0 2px 8px rgba(15, 29, 51, 0.08); }
.recipe-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.recipe-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.recipe-name { font-weight: 650; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.recipe-meta .chip { margin: 0; font-size: 0.74rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: #eef1f6; color: var(--muted); }
.recipe-meta .chip.good { background: var(--good-soft); color: var(--good); }
.recipe-meta .chip.warn { background: #fdf3dc; color: #8a5a0b; }
.recipe-meta .chip.bad { background: var(--bad-soft); color: var(--warn); }
.recipe-cost { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }

/* Móvil: la barra va abajo, con los tres sitios y Ajustes */
@media (max-width: 760px) {
  .shell.in { display: block; padding-bottom: 72px; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 0.3rem 0.4rem; z-index: 15; gap: 0; }
  .nav-brand { display: none; }
  .nav-session { display: none; }
  .nav-main { flex-direction: row; flex: 3; gap: 0; }
  .nav-foot { margin-top: 0; flex: 1; }
  .nav-item { flex-direction: column; gap: 0.15rem; font-size: 0.7rem; padding: 0.4rem 0.2rem; text-align: center; justify-content: center; }
  .nav-main .nav-item { flex: 1; }
  .nav-item.active { background: transparent; color: #fff; box-shadow: inset 0 2px 0 var(--accent); }
  .today-task { grid-template-columns: minmax(0, 1fr) auto; }
  .today-chip { display: none; }
  .today-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .today-kpi-value { font-size: 1.3rem; }
  .recipe-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .recipe-row .recipe-cost { grid-column: 2 / 3; align-items: flex-start; }
  .recipe-row .today-go { grid-row: 1; grid-column: 3; }
  .toast { bottom: 80px; }
}

/* Fase 1 · cierre: móvil (390 px) ------------------------------------------- */
@media (max-width: 680px) {
  /* La hoja de coste se apila al ancho de la pantalla: la tabla deja de crecer con su contenido (la
     pregunta de una línea o el pie con el rinde la ensanchaban y escondían la columna de coste). */
  table.cs, table.cs > tbody, table.cs > tfoot { display: block; width: 100%; }
  table.cs > tfoot > tr:not(.cs-total) { display: block; }
  table.cs > tfoot > tr:not(.cs-total) > td, table.cs > tfoot > tr:not(.cs-total) > th { display: block; width: auto; }
  table.cs select, table.cs input, .cs-inline-ask select { max-width: 100%; min-width: 0; }
  .cs-inline-ask .ask-form { flex-wrap: wrap; }
  /* Botones de cada línea: del tamaño de un dedo. */
  .cs-remove-btn, .cs-line-actions button, .cs-waitlist button, .cs-answers button { min-height: 44px; }
  /* Casillas del Recetario y de los formularios: la etiqueta entera es el destino, 44 px en táctil (lote 3). */
  label.check { min-height: 44px; }
  label.check input[type='checkbox'] { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
  /* Pestañas en varias líneas, nunca cortadas (también la que está abierta). */
  .subnav .subs { flex-wrap: wrap; overflow-x: visible; row-gap: 0.1rem; padding: 0 0.6rem; }
  .subnav .subs button { padding-left: 0.6rem; padding-right: 0.6rem; }
}
@media (max-width: 680px) {
  /* El total del pie: sus cifras sin el ancho fijo de escritorio (9,5 rem cada una no caben). */
  table.cs > tfoot td.num { width: auto; }
  /* La cabecera solo para lectores de pantalla no suma ancho. */
  table.cs > thead { overflow: hidden; }
}
@media (max-width: 680px) {
  /* La etiqueta de una línea puede partirse en dos; el botón de añadir, a lo ancho. */
  table.cs .cs-pill { white-space: normal; text-align: center; }
  .cs-addline button { width: 100%; }
}
.list li .tag { margin-left: 0.45rem; }
.inline details.wide { flex-basis: 100%; }
/* Logo WeChef (imagen SVG; la tipografía no se carga en la app). */
.logo { display: block; height: 22px; width: auto; }
.nav-brand .logo { height: 36px; }
.brand .logo { height: 26px; margin-bottom: 0.2rem; }

/* Fase A: bienvenida, IVA, TPV rápido, platos propuestos ------------------- */
.welcome-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.welcome-step:first-of-type { border-top: 0; }
.welcome-n { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.vat-card.pending { border-left: 5px solid var(--warn); }
.vat-card .ask-form { align-items: center; row-gap: 0.5rem; }
.pos-quick { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.pos-quick:first-of-type { border-top: 0; }
.recipe-row.static { cursor: default; }
.recipe-row.static:hover { box-shadow: none; }
.approve-block { align-items: center; }
@media (max-width: 680px) {
  .welcome-step { grid-template-columns: auto minmax(0, 1fr); }
  .welcome-step button { grid-column: 2; justify-self: start; }
}
.recipe-row.static { grid-template-columns: minmax(0, 1fr) auto; }
.recipe-row.static button { width: auto; }

/* Fase B · Hoy: tareas que se resuelven en la propia tarjeta y lo que WeChef resolvió solo. */
.today-task.static { cursor: default; }
.today-task.static .actions { margin-top: 0.4rem; }
.automation h3 { margin-top: 0; }
.automation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.automation-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
button.small { font-size: 0.82rem; padding: 0.3rem 0.7rem; min-height: 32px; }

/* Logo WeChef (archivos del 26-oct-2026): la palabra en la barra lateral; el isotipo queda disponible (favicon y
   pantallas que lo pidan) pero no se pinta en la barra, que en móvil va abajo y ya se oculta la marca. */
.nav-brand .logo-mark { display: none; height: 28px; }

/* Recetas: por qué el coste no está completo, con acceso al producto o a la subreceta. */
.recipe-causes { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; padding: 0 0.9rem 0.6rem 3.6rem; color: var(--muted); }
.recipe-cause strong { font-weight: 600; color: var(--ink); }
button.linklike { background: none; border: 0; padding: 0; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font: inherit; min-height: 0; }
/* Destinos de las causas en la lista de recetas (28-oct-2026, lote 3): medían 19 px de alto. En escritorio, 24 px de
   zona de pulsación sin mover el texto (relleno compensado con margen negativo, sin solaparse: las filas van a 0,2 rem
   y el extra es de 2,5 px por lado). En pantallas táctiles pasan a chips de 44 px con su propio borde. */
.recipe-causes { line-height: 24px; }
.recipe-causes .linklike { display: inline-block; line-height: 24px; padding: 0 0.15rem; margin: 0 -0.15rem; border-radius: 4px; }
@media (max-width: 760px) {
  .recipe-causes { gap: 0.4rem 0.5rem; }
  .recipe-causes .linklike { padding: 0.55rem 0.7rem; margin: 0; min-height: 44px; border: 1px solid var(--line); background: var(--card); text-decoration: none; }
}
@media (max-width: 760px) { .recipe-causes { padding-left: 0.9rem; } }

/* Restaurante de demostración: aviso fijo arriba. */
.demo-banner { background: #fff4d6; color: #5a4300; border-bottom: 1px solid #e8cf86; padding: 0.45rem 1rem; font-weight: 600; text-align: center; font-size: 0.9rem; }

/* Entrada: quién está dentro (Clerk) y la pantalla de entrada de Clerk dentro de la intro. */
.who { color: var(--muted); font-size: 0.92rem; align-self: center; }
.tenant-pick { display: flex; gap: 0.75rem; align-items: end; }
.signin { margin-top: 1rem; max-width: 440px; }
.new-tenant { margin-top: 1rem; max-width: 440px; display: grid; gap: 0.6rem; }
/* El atributo hidden gana a cualquier display (la entrada muestra u oculta piezas según cómo se entra). */
[hidden] { display: none !important; }