/* Sala, Tickets and Impresoras inside the back office's shell (batch BO, bo6; BO-2.0-DESIGN 4.1, 4.7, 5.3, 7; BO-D27,
   BO-D35, BO-D38, BO-D43). bo3 created this file with the rules of web/manage/app.css at HEAD 6ee02b6; bo6 rewrote it.
   Wholly inside @layer app, tokens only. The controls use the Management floor classes of web/platform/shell.css and
   web/platform/editor/editor.css (bo-btn, bo-chip, bo-input, bo-check, bo-link, bo-row); this file never styles those
   classes themselves (one source, manage.test.mjs), only the layout around them.
   - Where the pieces sit follows the content pane, not the viewport: the views set is-beside or is-below (Sala's
     inspector), is-beside or is-tabs (the ticket preview) and the list and panel split (Impresoras) from
     editor.panelMode(state.ui.paneWidth), 880 px (design 4.1). A 1024 px window with the expanded sidebar leaves a 784 px
     pane, so no media query on the viewport decides it.
   - The room plan is an inline SVG whose pieces are placed by their x, y, width and height attributes in grid cells;
     its colours come from the floor tokens (f0). The plan's wrapper is the focus stop (a 3 px --focus ring).
   - The floor bar's wrapper is display: contents, so the save bar inside it stays sticky at the bottom of the page. */
@layer app {
  /* ---- Sala ---------------------------------------------------------------------------------------------------------- */
  .rooms { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .room-zones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .room-zone { text-decoration: none; }
  .room-zone[aria-current="true"] { font-weight: 700; }
  .room-unknown, .room-note { margin: 0; font-weight: 700; font-size: var(--font-size-200); }
  .room-empty { margin: 0; font-size: var(--font-size-300); }
  .room-editor { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .room-editor.is-beside { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-panel); align-items: start; }
  .room-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .room-palette { margin: 0; }
  .room-hint, .room-keys { margin: 0; color: var(--text-muted); font-size: var(--font-size-100); }
  .room-plan { display: block; min-width: 0; border-radius: var(--radius-m); }
  .room-plan:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .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; }
  .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-pieces { display: flex; flex-direction: column; gap: var(--space-1); }
  .room-subtitle { margin: 0; font-size: var(--font-size-300); font-weight: 700; }
  .room-inspector { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--border);
    border-radius: var(--radius-m); background: var(--surface); }
  .room-editor.is-beside .room-inspector { position: sticky; top: calc(var(--bo-sticky-top) + var(--space-3)); overflow-y: auto;
    max-height: calc(100vh - var(--bo-sticky-top) - var(--size-savebar) - 2 * var(--space-3)); overscroll-behavior: contain; }
  .room-inspector .bo-field { margin: 0; }
  .room-pair, .room-box, .room-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
  .room-pair .bo-field { flex: 1 1 8rem; }
  .room-box .bo-field { flex: 1 1 4.5rem; }
  .room-settings { display: flex; flex-direction: column; gap: var(--space-2); }
  .room-issues { margin: 0; padding-left: var(--space-4); font-size: var(--font-size-200); font-weight: 700; }
  .room-unplaced { margin: 0; font-weight: 700; font-size: var(--font-size-200); }
  .room-wide-only { margin: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--panel);
    font-size: var(--font-size-200); }
  .room-list { list-style: none; margin: 0; padding: 0; font-size: var(--font-size-200); }
  .room-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--panel); }
  .room-bar { display: contents; }
  .room-bar > .bo-savebar { margin-top: calc(-1 * var(--size-savebar)); }

  /* ---- Tickets ------------------------------------------------------------------------------------------------------- */
  .designer { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .designer-layout { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
  .designer-layout.is-beside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .designer-form { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .designer-block { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--panel); }
  .designer-heading { margin: 0; font-size: var(--font-size-300); font-weight: 700; }
  .designer-hint { margin: 0; color: var(--text-muted); font-size: var(--font-size-100); }
  .designer-block textarea { padding: var(--space-2) var(--space-3); resize: vertical; }
  .designer-issues { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
  .designer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .designer-file { max-width: 100%; font-size: var(--font-size-200); }
  .designer-note { margin: 0; font-weight: 700; font-size: var(--font-size-200); }
  .designer-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .designer-preview { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .designer-layout.is-beside .designer-preview { position: sticky; top: calc(var(--bo-sticky-top) + var(--space-3)); }
  .designer-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .preview-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
  .preview-bar .bo-field { margin: 0; }
  .paper-wrap { margin: 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%; }
  .paper-caption { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--font-size-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; font-size: var(--font-size-200); }
  .designer-warnings { margin: 0; padding-left: var(--space-4); color: var(--text-muted); font-size: var(--font-size-200); }

  /* ---- Impresoras ---------------------------------------------------------------------------------------------------- */
  .printers { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .printers-split { min-width: 0; }
  .printers-split.is-list { display: flex; flex-direction: column; gap: var(--space-4); }
  .printers-list { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .printers-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .printers-title { margin: 0 auto 0 0; font-size: var(--font-size-300); font-weight: 700; }
  .printers-read { margin: 0; color: var(--text-muted); font-size: var(--font-size-100); font-variant-numeric: tabular-nums; }
  .printers-unknown, .printer-result { margin: 0; font-weight: 700; font-size: var(--font-size-200); }
  .printers-block { display: flex; flex-direction: column; gap: var(--space-2); }
  .printers-block-title { margin: 0; font-size: var(--font-size-300); font-weight: 700; }
  .printers-actions, .printer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .printers-hint, .printer-hint { margin: 0; color: var(--text-muted); font-size: var(--font-size-100); }
  .printer-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-200); }
  .printer-section { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--panel); }
  .printer-section-title { margin: 0; font-size: var(--font-size-300); font-weight: 700; }
  .printer-fields .bo-field { margin: 0; }
  .printer-grid { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .printer-grid .bo-field { flex: 1 1 9rem; }
  .printer-values { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--font-size-200); }
  .printer-values dt { color: var(--text-muted); }
  .printer-values dd { margin: 0; overflow-wrap: anywhere; }
  .printer-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .printer-job { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--panel);
    border-radius: var(--radius-m); background: var(--surface); font-size: var(--font-size-200); }
  .printer-job-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .printer-job-meta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .printer-enrolled { margin: 0; font-size: var(--font-size-200); overflow-wrap: anywhere; }
}