/* A oficina · the maker's desk (/oficina). Loaded after styles.css and before shell.css: the shell gives the bar, the sidebar and the theme tokens
   (--wall the page, --paper surfaces, --tone chips and hover, --grout, --ink, --muted, --cobalt accents, --r the corner), so only those are used here. */
body.oficina-pg { margin: 0; font-family: var(--f); font-size: var(--t-body); line-height: 1.45; -webkit-tap-highlight-color: transparent; }
.oficina-pg [hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.of { max-width: 1120px; margin: 0 auto; padding: 18px var(--m) 64px; display: grid; gap: 18px; }
.of-titulo { margin: 0; font-size: var(--t-h2); font-weight: 700; line-height: 1.1; }
.of-bloco { background: var(--paper); border-radius: var(--r); padding: 20px clamp(14px, 2.4vw, 28px) 24px; display: grid; gap: 14px; align-content: start; }
.of-bloco h2 { margin: 0; font-size: var(--t-lead); line-height: 1.2; }
.of-bloco p { margin: 0; max-width: 70ch; }
.of-nota { background: var(--tone); border-radius: var(--r); padding: 12px 16px; font-size: var(--t-small); max-width: none !important; }
.of-dica { font-size: var(--t-small); color: var(--muted); }
.of-estado { font-size: var(--t-small); min-height: 1.4em; }
.of-erro { color: var(--red-t, #FF8277); font-size: var(--t-small); }

.of-linha { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.of-acoes { align-items: center; }
.of-linha label { display: grid; gap: 4px; font-size: var(--t-small); }
.of-linha > label > input, .of-linha > label > select { min-width: 0; }
.of input[type="text"], .of input[type="number"], .of select { font: 500 var(--t-body)/1.2 var(--f); color: var(--ink); background: var(--wall); border: 2px solid var(--grout); border-radius: 10px; padding: 9px 12px; min-height: 46px; }
.of input[type="number"] { width: 6.5em; }
.of input:focus-visible, .of select:focus-visible, .of button:focus-visible, .of summary:focus-visible, .of-ficheiro:focus-within { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.of-porta input[type="text"] { width: min(20em, 100%); }

.of-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--tone); color: var(--ink); font: 600 var(--t-small)/1.2 var(--f); border: 0; border-radius: 999px; cursor: pointer; text-align: center; }
.of-btn:hover { background: var(--grout); }
.of-btn-forte { background: var(--ink); color: var(--wall); }
.of-btn-forte:hover { background: var(--cobalt); }
.of-btn[disabled] { opacity: .5; cursor: default; }
.of-ficheiro { position: relative; overflow: hidden; }
.of-ficheiro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }

/* the toggle chips: filled when on */
.of-fichas { display: flex; flex-wrap: wrap; gap: 10px; }
.of-ficha { min-height: 52px; padding: 0 22px; background: var(--tone); color: var(--ink); font: 600 var(--t-body)/1.1 var(--f); border: 0; border-radius: 999px; cursor: pointer; }
.of-ficha:hover { background: var(--grout); }
.of-ficha[aria-checked="true"] { background: var(--ink); color: var(--wall); }
.of-ficha[aria-checked="true"]::before { content: "✓ "; }

/* the orders */
.of-ordens { display: grid; gap: 10px; }
.of-ordem { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; background: var(--wall); border-radius: var(--r); padding: 12px; }
.of-ordem canvas { width: 96px; height: 96px; background: #050608; display: block; border-radius: 50%; }
.of-campos { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 14px; }
.of-campos label { display: grid; gap: 3px; font-size: var(--t-small); }
.of-campos input[type="text"] { width: 12em; }
.of-campos .of-codigo { width: 6.2em; text-transform: uppercase; }
.of-campos input[type="range"] { width: 8.5em; accent-color: var(--cobalt); }
.of-luz { min-height: 46px; padding: 0 16px; background: var(--tone); color: var(--ink); font: 600 var(--t-small)/1.1 var(--f); border: 0; border-radius: 999px; cursor: pointer; }
.of-luz[aria-pressed="true"] { background: var(--ink); color: var(--wall); }
.of-tirar { min-height: 44px; padding: 0 14px; background: none; color: var(--red-t, #FF8277); font: 600 var(--t-small)/1 var(--f); border: 2px solid var(--red-t, #FF8277); border-radius: 999px; cursor: pointer; }
.of-vazio { color: var(--muted); padding: 12px 0; }
.of-estoque { font-size: var(--t-small); align-items: center; }
.of-estoque label { display: flex; align-items: center; gap: 8px; }

/* the plates */
.of-impressora { font-size: var(--t-small); }
.of-outra summary { cursor: pointer; font-size: var(--t-small); font-weight: 600; padding: 6px 0; }
.of-tabela-pai { overflow-x: auto; border-radius: var(--r); }
.of-tabela { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: var(--t-small); }
.of-tabela th { text-align: left; font-weight: 600; background: var(--tone); padding: 10px 12px; }
.of-tabela th:first-child, .of-tabela td:first-child { border-radius: 10px 0 0 10px; }
.of-tabela th:last-child, .of-tabela td:last-child { border-radius: 0 10px 10px 0; }
.of-tabela td { padding: 10px 12px; vertical-align: top; background: var(--wall); }
.of-tabela tfoot td { background: var(--tone); font-weight: 600; }
.of-tabela .of-nome { font-weight: 600; overflow-wrap: anywhere; min-width: 13em; }
.of-tabela .of-num { white-space: nowrap; }
.of-peq { min-height: 40px; padding: 0 14px; background: var(--tone); color: var(--ink); font: 600 var(--t-small)/1 var(--f); border: 0; border-radius: 999px; cursor: pointer; }
.of-peq:hover { background: var(--grout); }

@media (max-width: 720px) {
  .of-ordem { grid-template-columns: 76px minmax(0, 1fr); }
  .of-ordem canvas { width: 76px; height: 76px; }
  .of-ordem .of-tirar { grid-column: 2; justify-self: start; }
  .of-titulo { font-size: var(--t-lead); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }