/* Carta (batch BO, bo4; BO-2.0-DESIGN 4.1 to 4.6, 5.1 to 5.4, 7): Productos, Categorías and Modificadores in the editor
   pattern of web/platform/editor/editor.css, and the product panel's "Foto e icono" block. bo3 created this file with the
   rules of web/manage/app.css at HEAD 6ee02b6; bo4 owns it. Wholly inside @layer app, tokens only. The Management
   floor classes (bo-btn, bo-chip, bo-check, bo-input, bo-link, bo-row) keep one source, shell.css and editor.css: no
   rule here ends in one of them (web/tests/manage.test.mjs), so the page's own classes carry what differs. */
@layer app {
  /* The tab's header: the list search, then the primary action at the right (design 4.1). */
  .carta-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
    margin: var(--space-2) 0; }
  .carta-search { flex: 1 1 240px; max-width: 420px; display: flex; }
  .carta-search input { flex: 1; min-width: 0; }
  .carta-unknown { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: var(--size-meter) solid var(--accent);
    background: var(--surface); font-size: var(--font-size-200); }
  .carta-list { min-width: 0; }
  .carta-note { margin: var(--space-1) 0; color: var(--text-muted); font-size: var(--font-size-100); }
  .carta-note-error { color: var(--text); font-weight: 700; }
  .carta-h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-300); font-weight: 700;
    scroll-margin-top: calc(var(--bo-sticky-top) + 16px); }
  .carta-h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-size-200); font-weight: 700; }
  .carta-h4 { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-size-200); font-weight: 700; }
  .carta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
  .carta-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }

  /* A product row: the 28 px picture or icon beside the name (design 5.3). */
  .carta-thumb { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
    margin-right: var(--space-2); vertical-align: middle; overflow: hidden; border-radius: var(--radius-s);
    font-size: var(--font-size-100); font-weight: 700; }
  .carta-thumb img { display: block; width: 28px; height: 28px; object-fit: cover; }
  .carta-switch { justify-content: flex-start; }

  /* Fields: money with the euro after it, the message under a field that can be wrong (design 4.3). */
  .carta-money { display: flex; align-items: center; gap: var(--space-2); }
  .carta-money input { flex: 1; min-width: 0; max-width: 160px; }
  .carta-unit { color: var(--text-muted); }
  .carta-field-msg { margin: 0 0 var(--space-2); color: var(--text); font-size: var(--font-size-100); font-weight: 700;
    padding-left: var(--space-2); border-left: var(--size-meter) solid var(--accent); }
  .carta-allergens { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); padding: 0; border: 0; }

  /* The pickers of design 3.2 (modifiers on a product, products on a modifier). */
  .carta-pick { list-style: none; margin: var(--space-1) 0; padding: 0; display: flex; flex-direction: column; }
  .carta-pick .num { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

  /* Categorías: the order column (the drag handle, Subir and Bajar), the colour as text on its chip, Estaciones. */
  .carta-order { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .carta-grip { display: inline-flex; align-items: center; color: var(--text-muted); cursor: grab; padding: 0 var(--space-1); }
  .carta-move { padding: 0 var(--space-2); }
  .carta-swatch { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-s); font-size: var(--font-size-100); }
  .carta-station-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .carta-station { font-weight: 700; }

  /* The bulk bar's three actions with a target (design 5.4). */
  .carta-bulk-choice { display: inline-flex; align-items: center; gap: var(--space-1); }

  /* Foto e icono (design 4.6): the picture, Elegir foto as a button over a hidden file input (the browser's own
     "Choose File" never shows), the drop zone, the icon. */
  .carta-media { display: flex; flex-direction: column; gap: var(--space-1); }
  .carta-media-pic { max-width: 320px; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-m); overflow: hidden; background: var(--panel); }
  .carta-media-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .carta-media-pic.has-image .carta-media-swatch { display: none; }
  .carta-media-swatch { font-size: var(--font-size-400); }
  .carta-drop { padding: var(--space-2) var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-m); }
  .carta-drop.is-over { border-color: var(--accent); background: var(--panel); }
  .carta-file { position: relative; }
  .carta-file:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
  .carta-file.is-disabled { opacity: 0.6; cursor: not-allowed; }
  .carta-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

  /* Menu icons (batch E): the library grid, the category colour chips (category.<name>.fill and .ink tokens) and the
     current icon on the neutral tile background. */
  .icon-current { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
  .icon-preview { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-primary); height: var(--touch-primary);
    border-radius: var(--radius-m); background: var(--panel); border: 3px solid var(--border); }
  .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
  .icon-pick { flex-direction: column; gap: var(--space-1); padding: var(--space-2); background: var(--panel); }
  .icon-pick.is-on { outline: 3px solid var(--accent); outline-offset: 1px; }
  .icon-img { display: block; width: 40px; height: 40px; object-fit: contain; }
  .icon-label { font-size: var(--font-size-100); line-height: var(--font-lineHeight-normal); text-align: center; }
  .carta-colors { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .cat-chip.is-on { outline: 3px solid var(--accent); outline-offset: 1px; }
  .cat-mint { background: var(--category-mint-fill); color: var(--category-mint-ink); border-color: var(--category-mint-fill); }
  .cat-sky { background: var(--category-sky-fill); color: var(--category-sky-ink); border-color: var(--category-sky-fill); }
  .cat-iris { background: var(--category-iris-fill); color: var(--category-iris-ink); border-color: var(--category-iris-fill); }
  .cat-amber { background: var(--category-amber-fill); color: var(--category-amber-ink); border-color: var(--category-amber-fill); }
  .cat-coral { background: var(--category-coral-fill); color: var(--category-coral-ink); border-color: var(--category-coral-fill); }
  .cat-green { background: var(--category-green-fill); color: var(--category-green-ink); border-color: var(--category-green-fill); }
  .cat-magenta { background: var(--category-magenta-fill); color: var(--category-magenta-ink); border-color: var(--category-magenta-fill); }
  .cat-neutral { background: var(--category-neutral-fill); color: var(--category-neutral-ink); border-color: var(--category-neutral-fill); }
  .icon-preview.cat-mint, .icon-preview.cat-sky, .icon-preview.cat-iris, .icon-preview.cat-amber, .icon-preview.cat-coral,
  .icon-preview.cat-green, .icon-preview.cat-magenta, .icon-preview.cat-neutral { background: var(--panel); }
}