/* Fábrica de Monstros · Sala de comando — layout do PDF "hub-comando-fabrica" (capturado a 1440 px / 125 %: medidas em px de CSS = pixels da imagem ÷ 1,25).
   Barra lateral azul-marinho, área clara, títulos em serifa, dados em mono, dourado só no que é ação ou marca. Sem imagens de terceiros; logo vetorial oficial. */
:root {
  --navy: #0A1730; --navy-2: #0E1F3D; --navy-line: rgba(255, 255, 255, .09);
  --bg: #F1F3F7; --card: #FBFCFD; --line: #E2E6EE; --line-2: #D3D9E4;
  --ink: #0C1A33; --muted: #5B667A; --faint: #8792A6;
  --gold: #C9A227; --gold-hover: #D6B038; --gold-ink: #1B1608;
  --link: #1D4A8C;
  --ok: #1B6B3A; --ok-bg: #DCEFE3; --ok-line: #B9DDC6; --ok-dot: #2E9E5B;
  --warn: #7A5200; --warn-bg: #FBEBC8; --warn-line: #E8C874; --warn-dot: #D69A1D;
  --bad: #9B2C1F; --bad-bg: #FBE0DC; --bad-line: #EDB0A8; --bad-dot: #D8432F;
  --neutro: #4A556A; --neutro-bg: #E8EBF1; --neutro-line: #D3D8E2; --neutro-dot: #7B879B;
  --sans: "IBM Plex Sans", ui-sans-serif, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --lateral: 264px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.carregando { padding: 64px 24px; text-align: center; color: var(--muted); }
[hidden] { display: none !important; }
svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; background: var(--navy); color: #C9D2E4; display: flex; flex-direction: column; padding: 20px 16px 16px; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 12px; padding: 2px 4px 18px; border-bottom: 1px solid var(--navy-line); }
.marca img { width: 40px; height: 40px; display: block; flex: none; }
.marca .g { font-size: 11px; letter-spacing: .2em; font-weight: 600; color: var(--gold); line-height: 1.2; }
.marca .n { color: #E9EEF8; font-size: 14px; line-height: 1.3; }
.rotulo { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7D89A3; padding: 22px 8px 8px; }
.nav a, .nav button { display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-left: 2px solid transparent; border-radius: 8px; background: transparent; color: #C9D2E4; font-size: 14px; text-align: left; cursor: pointer; margin-bottom: 2px; }
.nav a:hover, .nav button:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #fff; border-left-color: var(--gold); border-radius: 4px 8px 8px 4px; font-weight: 500; }
.nav .cont { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #E9EEF8; font: 500 11px/22px var(--mono); text-align: center; }
.nav .cont.alerta { background: rgba(214, 154, 29, .25); color: #F2CF86; }
.lateral .vao { flex: 1; min-height: 16px; }
.gw { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--navy-line); border-radius: 10px; background: rgba(255, 255, 255, .03); margin-bottom: 14px; }
.gw .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--neutro-dot); flex: none; }
.gw.ok .pt { background: var(--ok-dot); } .gw.bad .pt { background: var(--bad-dot); }
.gw b { display: block; color: #E9EEF8; font-size: 13px; font-weight: 600; line-height: 1.25; } .gw span { font-size: 12px; color: #93A0BA; }
.gw svg { margin-left: auto; color: #7D89A3; }
.eu { display: flex; align-items: center; gap: 12px; padding: 12px 6px 0; border-top: 1px solid var(--navy-line); }
.eu .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1A2440; border: 1.5px solid #6B5A22; color: var(--gold); font: 600 12px/1 var(--sans); flex: none; }
.eu b { display: block; color: #F1F4FA; font-size: 13.5px; line-height: 1.25; font-weight: 600; } .eu span { font-size: 12px; color: #93A0BA; }
.eu .sair { margin-left: auto; height: 30px; padding: 0 8px; border: 0; background: transparent; color: #93A0BA; border-radius: 6px; cursor: pointer; font-size: 12px; } .eu .sair:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; height: 62px; padding: 0 32px; display: flex; align-items: center; gap: 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.topo .menu { display: none; }
.migalhas { font-size: 13px; color: var(--muted); white-space: nowrap; } .migalhas b { color: var(--ink); font-weight: 600; } .migalhas i { font-style: normal; color: var(--faint); margin: 0 6px; }
.topo .vao { flex: 1; }
.pilula { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.pilula .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--neutro-dot); }
.pilula.ok .pt { background: var(--ok-dot); } .pilula.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); } .pilula.bad .pt { background: var(--bad-dot); }
.pilula.amb { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.relogio { font: 500 13px var(--mono); color: var(--muted); }
.btn-topo { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn-topo:hover { background: #fff; border-color: #BFC8D8; } .btn-topo .n { font: 500 12px var(--mono); color: var(--muted); }
.btn-topo kbd { font: 500 11px var(--mono); background: var(--neutro-bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; color: var(--muted); }

.conteudo { width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 56px; }
.cabeca { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cabeca .texto { flex: 1; min-width: 280px; }
.olho { font: 500 11px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.olho::before { content: "— "; color: var(--faint); }
h1.titulo { font: 500 38px/1.12 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 6px 0 10px; }
.sub { color: var(--muted); font-size: 14.5px; max-width: 540px; }
.acoes { display: flex; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.btn:hover:not(:disabled) { background: #fff; border-color: #B7C1D3; } .btn:disabled { opacity: .5; cursor: default; }
.btn.ouro { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; } .btn.ouro:hover:not(:disabled) { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn.perigo { color: var(--bad); border-color: var(--bad-line); } .btn.perigo:hover:not(:disabled) { background: var(--bad-bg); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn.texto { border-color: transparent; background: transparent; color: var(--muted); } .btn.texto:hover:not(:disabled) { background: var(--neutro-bg); border-color: transparent; color: var(--ink); }
.btn .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(27, 22, 8, .16); font: 600 11px/20px var(--mono); text-align: center; }

/* ---------- cartões ---------- */
.cartao { background: var(--card); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.cartao > .cab { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--line); }
.cartao > .cab .t { flex: 1; min-width: 0; }
.cartao .eyebrow { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cartao h2 { font: 500 22px/1.2 var(--serif); color: var(--ink); margin-top: 2px; }
.cartao .lado { font: 400 12.5px var(--mono); color: var(--muted); padding-top: 4px; white-space: nowrap; }
.cartao .lado.lnk { font: 500 13px var(--sans); color: var(--link); cursor: pointer; background: none; border: 0; padding: 4px 0 0; }
.cartao .corpo { padding: 16px 20px; }
.grade { display: grid; gap: 16px; margin-top: 16px; }
.g-2-1 { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vazio { padding: 18px 20px; color: var(--muted); font-size: 13.5px; }

/* ---------- cartão escuro da máquina ---------- */
.maquina { position: relative; margin-top: 22px; border-radius: 16px; background: var(--navy); color: #DDE5F4; padding: 24px 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.maquina::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 25% 100%; pointer-events: none; }
.maquina > * { position: relative; }
.maquina .e { font: 500 10px/1.3 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: #8F9CB8; }
.maquina h2 { font: 500 30px/1.15 var(--serif); color: #fff; margin: 6px 0 12px; }
.maquina .esp { font: 400 12.5px/1.65 var(--mono); color: #A7B3CB; }
.maquina .chips { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 13px; color: #CBD5E8; }
.maquina .chips span { display: inline-flex; align-items: center; gap: 8px; } .maquina .chips i { width: 7px; height: 7px; border-radius: 50%; background: #5FC88A; } .maquina .chips i.a { background: #E9B44C; } .maquina .chips i.v { background: #F0705F; }
.met { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .09); }
.met > div { min-width: 0; }
.met .e { margin-bottom: 4px; } .met .v { font: 500 26px/1.15 var(--serif); color: #fff; } .met .v small { font: 400 12.5px var(--mono); color: #A7B3CB; margin-left: 4px; }
.met .d { font-size: 12.5px; color: #A7B3CB; margin-top: 4px; }
.met .barra { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .13); margin-top: 8px; overflow: hidden; } .met .barra i { display: block; height: 100%; background: #E7ECF7; }
.met .barra.a i { background: #E9B44C; } .met .barra.v i { background: #F0705F; }

/* ---------- linhas de serviço ---------- */
.linha { display: grid; grid-template-columns: minmax(0, 1.2fr) 132px minmax(0, 1.5fr) 36px; align-items: center; gap: 12px; min-height: 55px; padding: 8px 20px; border-top: 1px solid var(--line); }
.linha:first-child { border-top: 0; } .linha .nome { font: 500 14px var(--mono); color: var(--ink); overflow-wrap: anywhere; } .linha .desc { font-size: 13px; color: var(--muted); }
.estado { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .estado.ok::before { background: var(--ok-dot); }
.estado.neutro { background: var(--neutro-bg); border-color: var(--neutro-line); color: var(--neutro); }
.estado.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); } .estado.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.estado.sem::before { display: none; }
.ib { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .ib:hover:not(:disabled) { background: var(--neutro-bg); color: var(--ink); } .ib:disabled { opacity: .4; cursor: default; }
.ib.girando svg { animation: gira .8s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } }

/* ---------- pendências ---------- */
.pend { display: flex; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); } .pend:first-child { border-top: 0; }
.pend .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; } .pend .ico svg { width: 17px; height: 17px; }
.ico.amb { background: #FBEBC8; color: #A8741A; } .ico.azl { background: #E3ECF8; color: #2F5F9E; } .ico.lar { background: #FDE8D3; color: #C2631A; } .ico.cza { background: #EDF0F5; color: #6B778C; }
.pend b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .pend p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pend .lnk { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--link); font-weight: 600; font-size: 13.5px; cursor: pointer; } .pend .lnk:hover { text-decoration: underline; }

/* ---------- modelo, motor, atividade ---------- */
.chip { display: inline-block; font: 400 11.5px var(--mono); padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); background: #fff; }
.mod { font: 600 21px/1.3 var(--mono); color: var(--ink); margin-top: 12px; overflow-wrap: anywhere; } .mod-d { font-size: 13px; color: var(--muted); margin-top: 4px; }
.prog { height: 5px; border-radius: 3px; background: var(--neutro-bg); margin-top: 12px; overflow: hidden; } .prog i { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.rodape-cartao { display: flex; align-items: center; gap: 8px; padding: 0 20px 18px; flex-wrap: wrap; }
.seg { display: flex; padding: 3px; border-radius: 9px; background: #E4E8F0; } .seg button { flex: 1; height: 32px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13.5px; cursor: pointer; } .seg button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 500; }
.nota { font-size: 13px; color: var(--muted); } .nota.sep { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.ativ { padding: 4px 20px 6px; } .ativ li { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .ativ li:first-child { border-top: 0; }
.ativ time { font: 400 12px var(--mono); color: var(--muted); padding-top: 2px; flex: none; } .ativ .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-dot); margin-top: 8px; flex: none; } .ativ .pt.a { background: var(--warn-dot); } .ativ .pt.v { background: var(--bad-dot); }

/* ---------- tabelas e formulários ---------- */
.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tab th { text-align: left; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 20px; border-bottom: 1px solid var(--line); background: #F6F8FB; white-space: nowrap; }
.tab td { padding: 10px 20px; border-top: 1px solid var(--line); vertical-align: middle; } .tab tr:first-child td { border-top: 0; } .tab tbody tr:hover { background: #F6F8FB; } .tab .acoes-td { text-align: right; white-space: nowrap; } .rol { overflow-x: auto; }
label.campo { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; font-weight: 500; }
input.txt, select.txt, textarea.txt { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); }
textarea.txt { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; } input.txt:focus, select.txt:focus, textarea.txt:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, .25); }
.linha-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .linha-form > .f1 { flex: 1; min-width: 180px; }
.pre { background: #0C1A33; color: #D9E2F2; border-radius: 10px; padding: 14px 16px; font: 400 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; margin: 0; }
.msg { font-size: 13px; margin-top: 10px; color: var(--muted); } .msg.erro { color: var(--bad); } .msg.ok { color: var(--ok); }

/* ---------- mixagem ---------- */
.canal { display: flex; flex-direction: column; } .canal .corpo { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.canal .alt { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rascunho { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); padding: 2px 8px; border-radius: 5px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.cadeia { display: grid; gap: 8px; } .cadeia .item { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; } .cadeia .item.off { background: #F6F8FB; color: var(--faint); }
.cadeia .ord { font: 500 12px var(--mono); color: var(--muted); }
.cat { display: grid; gap: 10px; } .cat .it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; } .cat .it .tx { flex: 1; min-width: 0; } .cat .it b { display: block; font-size: 13.5px; } .cat .it small { color: var(--muted); font-size: 12px; display: block; }

/* ---------- janelas ---------- */
.veu { position: fixed; inset: 0; z-index: 60; background: rgba(8, 19, 43, .55); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow: auto; }
.jan { width: 100%; max-width: 520px; background: var(--card); border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(8, 19, 43, .35); }
.jan.larga { max-width: 760px; } .jan > header { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; } .jan > header h3 { font: 500 21px/1.25 var(--serif); flex: 1; } .jan > .c { padding: 16px 20px; } .jan > footer { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.paleta { max-width: 560px; padding: 0; overflow: hidden; } .paleta input { width: 100%; height: 50px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 15px; outline: none; }
.paleta li { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 42px; cursor: pointer; font-size: 14px; } .paleta li[aria-selected="true"] { background: #EEF2F9; } .paleta li small { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 11.5px; } .paleta ul { max-height: 340px; overflow: auto; }
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.aviso { padding: 12px 16px; border-radius: 10px; background: var(--navy); color: #F1F4FA; font-size: 13.5px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 10px 30px rgba(8, 19, 43, .3); } .aviso.erro { background: #5A1B14; } .aviso.ok { background: #14452A; }
.qr { display: block; margin: 8px auto; width: 240px; height: 240px; image-rendering: pixelated; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; padding: 8px; }

/* ---------- entrada (login e troca de senha) ---------- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--navy); }
.entrada .caixa { width: 100%; max-width: 410px; background: var(--card); border-radius: 16px; padding: 28px 26px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.entrada .marca { border: 0; padding: 0 0 18px; } .entrada .marca .n { color: var(--ink); font: 500 22px/1.15 var(--serif); }
.entrada h2 { font: 500 20px var(--serif); } .entrada .sub { font-size: 13.5px; margin: 4px 0 6px; }
.entrada label.campo { margin-top: 14px; } .entrada .senha { display: flex; gap: 8px; } .entrada .senha input { flex: 1; min-width: 0; } .entrada .btn.ouro { width: 100%; margin-top: 18px; height: 42px; }
.regras { margin-top: 12px; display: grid; gap: 3px; font-size: 13px; color: var(--muted); } .regras li { display: flex; gap: 8px; } .regras li.ok { color: var(--ok); }
.entrada .ver { font: 400 12px var(--mono); color: var(--faint); text-align: center; margin-top: 14px; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) { .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maquina { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .maquina .met:last-child { padding-left: 0; border-left: 0; } .maquina > :first-child { grid-column: 1 / -1; margin-bottom: 18px; } }
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 50; transform: translateX(-102%); transition: transform .18s; } .lateral.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(8, 19, 43, .5); }
  .topo { padding: 0 16px; } .topo .menu { display: inline-flex; } .conteudo { padding: 20px 16px 48px; } .g-2-1, .g-3, .g-2 { grid-template-columns: minmax(0, 1fr); }
  h1.titulo { font-size: 32px; } .linha { grid-template-columns: minmax(0, 1fr) auto 34px; } .linha .desc { grid-column: 1 / -1; order: 5; } .btn-topo kbd, .pilula.hide-sm, .relogio { display: none; }
}
@media (max-width: 620px) { .maquina { grid-template-columns: minmax(0, 1fr); padding: 20px; } .met { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); } .acoes { width: 100%; } .acoes .btn { flex: 1; } .btn-topo .rot { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.pagina { min-width: 0; }
.migalhas { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .migalhas .prefixo { display: none; } .topo { gap: 8px; } }
.tab .acoes-td .btn { vertical-align: middle; }
@media (max-width: 620px) { .topo .pilula { display: none; } }
.cat .it .tx b { overflow-wrap: anywhere; }