/* Management (design 3.5): laptop 1280 to 1440, left navigation 240 px, density high but every control
   keeps the service floor. Catalogue editor: list with tiles beside the picture editor. Wholly inside
   @layer app. */
@layer app {
  .manage-body { display: flex; flex: 1; align-items: flex-start; }
  .side { display: flex; flex-direction: column; width: 240px; flex: none; gap: var(--space-1); padding: var(--space-3); }
  .side .tab { text-align: left; padding: 0 var(--space-3); border-top: 0; border-left: 3px solid transparent; }
  .side .tab.is-on { border-left-color: var(--accent); }
  .catalog { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: var(--space-5); }
  .catalog-row .tile-media { width: 72px; flex: none; }
  .catalog-row.has-image .swatch { display: none; }
  .media-wrap { max-width: 480px; }
  .media-wrap.has-image .swatch { display: none; }
  .media-card { aspect-ratio: 16 / 10; }
  .dropzone { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: var(--touch-primary);
    padding: var(--space-4); margin: var(--space-3) 0; border: 2px dashed var(--border); border-radius: var(--radius-m); background: var(--panel); }
  .dropzone.is-over { border-color: var(--accent); }
  .preview-img { display: block; max-width: 320px; max-height: 240px; border-radius: var(--radius-s); }
  .editor { padding: var(--space-4); background: var(--surface); border-radius: var(--radius-m); border: 1px solid var(--border); }
  .card-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m);
    border: 1px solid var(--border); background: var(--surface); }
  .stepup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
  .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); font-size: var(--font-size-200); }
  .kv dd { margin: 0; overflow-wrap: anywhere; }
  /* Menu icons (batch E): library grid, the category colour chips (category.<name>.fill and .ink tokens) and
     the current icon on the neutral tile background. */
  .icon-editor { margin-top: var(--space-4); }
  .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(--touch-gap); margin: var(--space-2) 0; }
  .icon-pick { flex-direction: column; gap: var(--space-1); min-height: var(--touch-primary); 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; }
  .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); }
  .fleet-row { flex-wrap: wrap; }
  .fleet-flag { font-weight: 700; }
  /* Batch F (f7): Sala, Carta, Tickets and Impresoras. The room plan is an inline SVG whose pieces are placed by
     their x, y, width and height attributes in grid cells; colours come from the floor tokens (f0). */
  .rooms, .carta-editor, .designer, .printers { display: flex; flex-direction: column; gap: var(--space-2); }
  .zone-tabs { margin: var(--space-2) 0; }
  .field-inline { flex-direction: row; align-items: center; margin: 0; }
  .zone-panel, .add-row, .box-fields, .preview-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
  .box-fields .field { width: 88px; }
  .palette { margin: var(--space-2) 0; }
  .room-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-4); align-items: start; }
  .room-canvas { min-width: 0; }
  .room-grid { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--floor-zone-bg); touch-action: none; }
  .room-grid:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .zone-bg { fill: var(--floor-zone-bg); }
  .grid-line { fill: none; stroke: var(--border); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .piece { cursor: grab; }
  .piece-body { stroke: var(--floor-zone-bg); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .piece-square, .piece-round { fill: var(--floor-table-fill); }
  .piece-stool { fill: var(--floor-stool-fill); }
  .piece-wall { fill: var(--floor-wall-fill); }
  .piece-door { fill: var(--floor-door-fill); }
  .piece-plant { fill: var(--floor-plant-fill); }
  .piece-label { fill: var(--floor-table-ink); font-family: var(--font-family-ui); font-weight: 700; pointer-events: none; }
  .piece.is-sel .piece-body { stroke: var(--focus); stroke-width: 4px; }
  .piece.is-bad .piece-body { stroke: var(--accent); stroke-width: 3px; stroke-dasharray: 6 3; }
  .room-side { display: flex; flex-direction: column; gap: var(--space-2); }
  .inspector .field { margin: var(--space-1) 0; }
  .issues, .warnings { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .cat-list { counter-reset: none; }
  .cat-row { cursor: grab; }
  .cat-row .field { min-width: 140px; }
  .carta-items { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
  .row.is-off { opacity: 0.6; }
  .allergens, .fields-box, .logo-box { border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-3); margin: var(--space-2) 0; }
  .designer-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .designer-preview { position: sticky; top: var(--space-3); min-width: 0; }
  .paper-wrap { margin: var(--space-3) 0; overflow-x: auto; }
  .paper { margin: 0; padding: var(--space-4) var(--space-3); background: var(--paper-bg); color: var(--paper-ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--font-size-200); line-height: var(--font-lineHeight-normal); white-space: pre; border: 1px solid var(--border); border-radius: var(--radius-s); }
  .paper-cols-48 { width: 50ch; }
  .paper-cols-32 { width: 34ch; }
  .paper-cols-other { max-width: 100%; }
  .logo-preview { display: block; max-width: 100%; image-rendering: pixelated; border: 1px solid var(--border); background: var(--paper-bg); }
  .legal-list { margin: 0; padding-left: var(--space-5); columns: 2; }
  .printer-editor, .enrol { margin-top: var(--space-3); }
  .printer-status { align-items: flex-start; }
  .jobs { width: 100%; }
  .job-row { background: var(--panel); }
  .advanced { margin: var(--space-2) 0; }
  .advanced summary { cursor: pointer; font-weight: 700; padding: var(--space-2) 0; }
  /* Batch G (g7): Personal's permission matrix (a table scrolled sideways on a narrow screen, the switches keep
     the check floor), Hoy (the caja, today's lists, the Zs and one Z as its sections), Cuentas y recibos (the
     day's documents and the Factura completa form) and Sala's zone supplement and season. */
  .perm-wrap { overflow-x: auto; margin: var(--space-2) 0; }
  .perm-matrix { border-collapse: collapse; font-size: var(--font-size-200); }
  .perm-matrix th, .perm-matrix td { border: 1px solid var(--border); padding: var(--space-1) var(--space-2); vertical-align: middle; text-align: center; }
  .perm-matrix thead th { background: var(--panel); font-weight: 700; max-width: 120px; }
  .perm-matrix .perm-who { text-align: left; min-width: 220px; }
  .perm-who .field { margin: var(--space-1) 0; }
  .perm-note { display: block; font-weight: 400; }
  .perm-cell .check { justify-content: center; }
  .perm-fixed { background: var(--panel); }
  .perm-mark { margin-top: var(--space-1); }
  .perm-mark.is-custom { outline: 2px solid var(--accent); outline-offset: 1px; }
  .perm-actions { min-width: 200px; text-align: left; }
  .perm-actions .btn { margin: var(--space-1) 0; }
  .hoy, .invoices { display: flex; flex-direction: column; gap: var(--space-3); }
  .hoy-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); }
  .hoy-list .rows { margin: 0; }
  .hoy-row, .doc-row, .z-row { flex-wrap: wrap; }
  .z-variance { font-weight: 700; }
  .z-section { margin: var(--space-3) 0; }
  .z-table { border-collapse: collapse; font-size: var(--font-size-200); }
  .z-table th, .z-table td { border-bottom: 1px solid var(--border); padding: var(--space-1) var(--space-3); text-align: left; }
  .doc-row.is-selected { outline: 3px solid var(--focus); outline-offset: 1px; }
  .inv-form { max-width: 560px; }
  .inv-form .field { margin: var(--space-2) 0; }
  .zone-settings { margin-top: var(--space-2); }
  @media (max-width: 900px) {
    .manage-body { flex-direction: column; }
    .side { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .catalog { grid-template-columns: 1fr; }
    .room-layout, .carta-items, .designer-layout { grid-template-columns: 1fr; }
  }
  /* Ajustes (batch H, h7): the day theme and the PIN switch, one block each. */
  .settings-block { margin: var(--space-4) 0; }
}