@layer legado{
  /* Tokens do design system SIS (packages/tui/tui-theme/brand). A moldura e clara,
     sempre: o produto e claro. So o palco do canvas troca de fundo, e por escolha da
     pessoa. Este arquivo e o prototipo aprovado mais as costuras do harness —
     _specs/maestro-visual/README.md. */
  :root {
    --y: #FAB600; --b: #50AFE3; --g: #6FAD2D; --w: #AD1840; --rose: #E08BA0;
    --fd: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --fb: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --fm: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --page: #F4F6FB; --card: #FFFFFF; --line: #E3E7F0; --soft: #EDF0F7;
    --t1: #171A2E; --t2: #3A4054; --t3: #5A6072; --t4: #8A90A3;
    --acc: #B58300; --accs: rgba(250,182,0,.12);
    --cv: #0B0E1A; --cvg: #151931; --node: #0F1220; --nchrome: #171A2E; --nline: #232838; --nline2: #2A3047; --ntext: #C7CCDA; --nfaint: #6B7283;
    --ntitulo: #FFFFFF; --ncromo: #A7ADBE; --npreset: #8A90A3; --nponto: #4C5468; --nperg: #E8EAF2; --nsombra: rgba(0,0,0,.8);
    --raia: rgba(255,255,255,.025); --raia-line: #1E2337; --raia-cab: rgba(23,26,46,.85); --raia-ativa: rgba(250,182,0,.06);
    --nota-bg: #1A1A0F; --nota-line: #3A3612; --nota-cromo: #23200F; --nota-t: #D9C46A; --nota-tx: #E8E0A8;
    --canal-bg: #0F1A16; --canal-line: #1F3A2E; --canal-cromo: #14261E; --canal-t: #8FD3A8;
    --con-bg: #10141F; --con-line: #2A3047; --con-cromo: #171A2E; --con-t: #9DB7FF;
    --ent-bg: #1A1224; --ent-line: #3E2A5A; --ent-cromo: #24183A; --ent-t: #D9B8FF; --ent-tx: #E8DDF5;
    --hud-bg: rgba(23,26,46,.92); --hud-t: #C7CCDA; --rot: #8A90A3;
    --l1: #FAB600; --l2: #50AFE3; --l3: #6FAD2D; --l4: #E08BA0; --l5: #AD1840; --l6: #8A90A3; --l7: #C9A7FF;
    /* Bordas e aneis de selecao: a mesma cor da marca, diluida. Eram rgba() literais
       repetidos, e um rgba literal nao acompanha quem muda a cor de origem. */
    --g-borda: color-mix(in srgb, var(--g) 50%, transparent); --y-borda: color-mix(in srgb, var(--y) 60%, transparent);
    --w-borda: color-mix(in srgb, var(--w) 50%, transparent); --b-borda: color-mix(in srgb, var(--b) 50%, transparent);
    --anel-b: color-mix(in srgb, var(--b) 18%, transparent); --anel-y: color-mix(in srgb, var(--y) 18%, transparent);
    --anel-g: color-mix(in srgb, var(--g) 25%, transparent);
  }
  .palco.claro {
    --cv: #F3F4F8; --cvg: #CFD3DF; --node: #FFFFFF; --nchrome: #EEF0F6; --nline: #D6DAE6; --nline2: #B9BFD1; --ntext: #2B3044; --nfaint: #7A8093;
    --ntitulo: #171A2E; --ncromo: #5A6072; --npreset: #7A8093; --nponto: #B9BFD1; --nperg: #171A2E; --nsombra: rgba(23,26,46,.18);
    --raia: rgba(23,26,46,.03); --raia-line: #D6DAE6; --raia-cab: rgba(255,255,255,.9); --raia-ativa: rgba(250,182,0,.10);
    --nota-bg: #FFFBE6; --nota-line: #E6D98A; --nota-cromo: #F7F0C4; --nota-t: #7A6A00; --nota-tx: #4A4200;
    --canal-bg: #F0FAF4; --canal-line: #B9DFC7; --canal-cromo: #DDF2E5; --canal-t: #1F6B3D;
    --con-bg: #F3F6FF; --con-line: #C3CFF0; --con-cromo: #E4EAFB; --con-t: #2B4BA8;
    --ent-bg: #F8F2FF; --ent-line: #D6C3EE; --ent-cromo: #EDE2FA; --ent-t: #5B2E9C; --ent-tx: #3A2758;
    --hud-bg: rgba(255,255,255,.94); --hud-t: #3A4054; --rot: #5A6072;
    --l1: #B58300; --l2: #1F86BD; --l3: #4E8A17; --l4: #B8506E; --l5: #AD1840; --l6: #6B7283; --l7: #7A4BC7;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--page); color: var(--t2); font-family: var(--fb); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }

  /* --- casca: navegação lateral + telas --- */
  .app { display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 100vh; }
  .lateral { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--card); min-height: 0; overflow: auto; }
  .lateral .marca { padding: 12px 14px 8px; font-size: 15px; white-space: nowrap; }
  .lateral .marca small { display: block; width: max-content; margin: 4px 0 0; }
  .lateral .sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); padding: 12px 14px 4px; }
  .lateral button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font-family: var(--fb); font-size: 12.5px; font-weight: 500; cursor: pointer; background: transparent; color: var(--t2); border: 0; border-left: 3px solid transparent; padding: 7px 14px; }
  .lateral button:hover { background: var(--soft); }
  .lateral button[aria-current="page"] { color: var(--t1); border-left-color: var(--y); background: var(--accs); font-weight: 600; }
  .lateral button .gl { font-family: var(--fm); width: 14px; color: var(--t4); text-align: center; }
  .lateral button[aria-current="page"] .gl { color: var(--acc); }
  .lateral button .n { margin-left: auto; font-family: var(--fm); font-size: 10px; color: var(--acc); background: var(--accs); border-radius: 8px; padding: 0 6px; }
  .lateral .rodape { margin-top: auto; padding: 12px 14px; font-family: var(--fm); font-size: 10px; color: var(--t4); border-top: 1px solid var(--line); line-height: 1.6; }
  .principal { min-height: 0; display: grid; }
  .tela { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
  .tela[hidden] { display: none; }

  /* --- telas de administração --- */
  .admin-topo { display: flex; align-items: baseline; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
  .admin-topo h1 { font-family: var(--fd); font-size: 17px; font-weight: 700; color: var(--t1); margin: 0; letter-spacing: -.01em; }
  .admin-topo .sub { font-size: 12.5px; color: var(--t3); }
  .admin-topo .onde { margin-left: auto; font-family: var(--fm); font-size: 10.5px; color: var(--t4); background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; }
  .admin-corpo { overflow: auto; padding: 18px 22px 40px; display: grid; grid-auto-rows: max-content; gap: 18px; align-content: start; }
  .bloco { min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); overflow: hidden; }
  .bloco > .cab { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
  .bloco > .cab h2 { font-family: var(--fd); font-size: 13px; font-weight: 700; color: var(--t1); margin: 0; }
  .bloco > .cab .dica { font-size: 11.5px; color: var(--t4); }
  .bloco > .cab .acoes { margin-left: auto; display: flex; gap: 6px; }
  .bloco > .miolo { padding: 12px 14px; }
  .bloco > .miolo.sem { padding: 0; }
  .duplo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 0; }
  .duplo > .esq { border-right: 1px solid var(--line); min-width: 0; }
  .duplo > .dir { padding: 12px 14px; min-width: 0; }
  @media (max-width: 1100px) { .duplo { grid-template-columns: 1fr; } .duplo > .esq { border-right: 0; border-bottom: 1px solid var(--line); } }
  table.tab { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.tab th { text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  table.tab td { padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--t2); vertical-align: top; }
  table.tab tr:last-child td { border-bottom: 0; }
  table.tab tr[data-chave] { cursor: pointer; }
  table.tab tr[data-chave]:hover td { background: var(--soft); }
  table.tab tr[aria-selected="true"] td { background: var(--accs); }
  table.tab td.mono, .mono { font-family: var(--fm); font-size: 11px; }
  table.tab td.fraco, .fraco { color: var(--t4); }
  .tag { display: inline-block; font-family: var(--fm); font-size: 10px; border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; color: var(--t3); white-space: nowrap; margin-right: 3px; }
  .tag.ok { color: var(--g); border-color: var(--g-borda); }
  .tag.aviso { color: var(--acc); border-color: var(--y-borda); }
  .tag.erro { color: var(--w); border-color: var(--w-borda); }
  .tag.azul { color: var(--b); border-color: var(--b-borda); }
  .tag.novo { color: var(--t3); border-style: dashed; }
  .cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
  .cartao { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--card); }
  .cartao .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
  .cartao .v { font-family: var(--fd); font-size: 22px; font-weight: 700; color: var(--t1); margin: 4px 0 2px; }
  .cartao .d { font-size: 11.5px; color: var(--t3); }
  .nota-backend { font-size: 11.5px; color: var(--t3); border-left: 3px solid var(--b); background: var(--soft); padding: 8px 12px; border-radius: 0 6px 6px 0; }
  .nota-backend b { color: var(--t1); }
  .nota-backend.novo { border-left-color: var(--rose); }
  .form .campo { margin-bottom: 10px; }
  .form .campo .ajuda { font-size: 11px; color: var(--t4); }
  .form .rodape { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  .chips.pequenos .chip { font-size: 10.5px; padding: 2px 8px; }
  .chip.escreve[aria-pressed="true"] { border-color: var(--w); color: var(--w); background: rgba(173,24,64,.08); }
  .linha-k { display: grid; grid-template-columns: 180px 1fr; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
  .linha-k .k { color: var(--t4); font-family: var(--fm); font-size: 11px; }
  pre.trecho { margin: 0; font-family: var(--fm); font-size: 11px; line-height: 1.55; background: var(--node); color: var(--ntext); border: 1px solid var(--nline); border-radius: 6px; padding: 10px 12px; white-space: pre; overflow: auto; }
  .busca { font-family: var(--fm); font-size: 12px; background: var(--soft); color: var(--t1); border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; min-width: 260px; }
  .tl { display: grid; grid-template-columns: 26px 1fr; gap: 0 10px; }
  .tl .p { width: 10px; height: 10px; border-radius: 50%; background: var(--line); margin: 5px auto; }
  .tl .p.ok { background: var(--g); } .tl .p.pend { background: var(--y); } .tl .p.falha { background: var(--w); }
  .tl .t { font-size: 12px; color: var(--t2); padding-bottom: 10px; }
  .tl .t small { display: block; color: var(--t4); font-family: var(--fm); font-size: 10.5px; }
  /* --- gestão e governança --- */
  .lateral .quem { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--t3); }
  .lateral .quem b { color: var(--t1); font-weight: 600; }
  .lateral .quem select { width: 100%; margin-top: 6px; font-family: var(--fm); font-size: 11px; background: var(--soft); color: var(--t1); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; }
  .matriz { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  .matriz th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; }
  .matriz th:first-child, .matriz td:first-child { text-align: left; font-family: var(--fm); font-size: 11px; }
  .matriz td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: center; }
  .matriz input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
  .filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
  .filtros label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
  .filtros select { font-family: var(--fm); font-size: 12px; background: var(--soft); color: var(--t1); border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; }
  .filtros .esp { flex: 1; }
  .medidor { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; margin-top: 6px; }
  .medidor i { display: block; height: 100%; background: var(--viz-1); }
  .medidor i.aviso { background: var(--viz-3); } .medidor i.critico { background: var(--viz-2); }
  .achado { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
  .achado .gl { font-family: var(--fm); text-align: center; }
  .achado .gl.ok { color: var(--g); } .achado .gl.aviso { color: var(--acc); } .achado .gl.serio { color: var(--w); }
  .achado small { display: block; color: var(--t4); font-family: var(--fm); font-size: 10.5px; }
  .cadeia { display: flex; gap: 0; align-items: stretch; overflow: auto; padding: 4px 0; }
  .cadeia .elo { flex: 1; min-width: 150px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-right: 18px; position: relative; background: var(--card); }
  .cadeia .elo::after { content: '›'; position: absolute; right: -14px; top: 8px; color: var(--t4); font-family: var(--fd); font-size: 18px; }
  .cadeia .elo:last-child::after { content: ''; }
  .cadeia .elo .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
  .cadeia .elo .v { font-family: var(--fm); font-size: 11px; color: var(--t1); margin-top: 3px; line-height: 1.5; }

  /* --- gráficos: tokens de visualização validados (azul, vinho, amarelo) --- */
  .admin-corpo, .viz { --viz-surface: var(--card); --viz-1: #1F86BD; --viz-2: #AD1840; --viz-3: #B58300; --viz-grid: var(--line); --viz-t1: var(--t1); --viz-t2: var(--t3); }
  .viz svg { width: 100%; height: auto; display: block; overflow: visible; }
  .viz .grade { stroke: var(--viz-grid); stroke-width: 1; }
  .viz .eixo { fill: var(--viz-t2); font-family: var(--fm); font-size: 10px; }
  .viz .rotulo { fill: var(--viz-t1); font-family: var(--fm); font-size: 10.5px; }
  .viz .s1 { fill: var(--viz-1); } .viz .s2 { fill: var(--viz-2); } .viz .s3 { fill: var(--viz-3); }
  .viz .alvo { fill: transparent; cursor: default; }
  .viz .alvo:hover + .marca, .viz .marca:hover { opacity: .85; }
  .legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--t3); margin: 4px 0 8px; }
  .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .legenda i.s1 { background: var(--viz-1); } .legenda i.s2 { background: var(--viz-2); } .legenda i.s3 { background: var(--viz-3); }
  .dica-viz { position: fixed; z-index: 30; pointer-events: none; font-family: var(--fm); font-size: 11px; color: var(--t1); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
  .dica-viz[hidden] { display: none; }
  .duas-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 1100px) { .duas-viz { grid-template-columns: 1fr; } }
  .topo { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
  .marca { font-family: var(--fd); font-weight: 700; font-size: 17px; color: var(--t1); letter-spacing: -.02em; margin-right: 6px; }
  .marca small { font-family: var(--fm); font-weight: 400; font-size: 10.5px; color: var(--acc); background: var(--accs); padding: 2px 7px; border-radius: 4px; margin-left: 8px; letter-spacing: .04em; vertical-align: middle; }
  .nome { font-family: var(--fm); font-size: 12.5px; color: var(--t1); background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 4px 8px; min-width: 16ch; }
  .nome:hover, .nome:focus { border-color: var(--line); outline: none; background: var(--soft); }
  .esp { flex: 1; }
  .grupo { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; }
  .grupo .rot { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); align-self: center; padding: 0 6px; }
  .btn { font-family: var(--fb); font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--t2); border-radius: 5px; padding: 6px 11px; }
  .btn:hover { background: var(--soft); }
  .btn.mini { padding: 4px 8px; font-size: 12px; border-color: transparent; }
  .btn.primario { background: var(--y); color: var(--t1); border-color: transparent; }
  .btn.primario:hover { filter: brightness(1.05); }
  .btn:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
  .btn[disabled] { opacity: .5; cursor: default; }
  .dica { font-size: 12px; color: var(--t4); }
  @media (max-width: 1700px) { .dica { display: none; } }

  .corpo { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; }
  @media (max-width: 900px) { .corpo { grid-template-columns: 1fr; grid-template-rows: 1fr 280px; } }

  /* --- canvas --- */
  .palco { position: relative; overflow: hidden; background: var(--cv); cursor: grab; }
  .palco.arrastando { cursor: grabbing; }
  .mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .grade { position: absolute; inset: -4000px; background-image: radial-gradient(var(--cvg) 1.2px, transparent 1.2px); background-size: 24px 24px; pointer-events: none; }
  svg.fios { position: absolute; left: -4000px; top: -4000px; width: 8000px; height: 8000px; overflow: visible; pointer-events: none; }
  svg.fios path.fio { fill: none; stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .65; pointer-events: stroke; cursor: pointer; }
  svg.fios path.fio.auto { stroke-dasharray: 2 4; opacity: .5; cursor: default; }
  svg.fios path.fio.sel { opacity: 1; stroke-width: 2.6; stroke-dasharray: none; }
  svg.fios path.fio.viva { opacity: 1; stroke-width: 2.4; stroke-dasharray: none; }
  svg.fios path.alvo { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
  svg.fios path.g-turno-termina { stroke: var(--l1); } svg.fios path.g-task-completed { stroke: var(--l2); } svg.fios path.g-mensagem { stroke: var(--l3); }
  svg.fios path.g-aprovado { stroke: var(--l3); } svg.fios path.g-reprovado { stroke: var(--l5); } svg.fios path.g-falha { stroke: var(--l5); }
  svg.fios path.g-pede-aprovacao { stroke: var(--l4); } svg.fios path.g-submetida { stroke: var(--l7); } svg.fios path.g-usa { stroke: var(--l6); }
  svg.fios text.rot { font-family: var(--fm); font-size: 10px; fill: var(--rot); pointer-events: none; paint-order: stroke; stroke: var(--cv); stroke-width: 5px; stroke-linejoin: round; }
  svg.fios path.rascunho { fill: none; stroke: var(--l1); stroke-width: 1.6; stroke-dasharray: 4 4; }

  /* raias = etapas do pipeline */
  .etapa { position: absolute; border: 1px solid var(--raia-line); border-radius: 12px; background: var(--raia); }
  .etapa.ativa { background: var(--raia-ativa); border-color: var(--l1); }
  .etapa.sel { border-color: var(--b); box-shadow: 0 0 0 3px var(--anel-b); }
  .etapa .cab { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--raia-line); border-radius: 12px 12px 0 0; background: var(--raia-cab); cursor: pointer; font-family: var(--fd); font-size: 13px; color: var(--ntitulo); }
  .etapa .cab .num { font-family: var(--fm); font-size: 10.5px; color: var(--l1); border: 1px solid var(--l1); border-radius: 10px; padding: 0 7px; }
  .etapa .cab .ent { margin-left: auto; font-family: var(--fm); font-size: 10.5px; color: var(--nfaint); }
  .etapa .cab .st { font-family: var(--fm); font-size: 10px; color: var(--nfaint); }
  .etapa.ativa .cab .st { color: var(--l1); }
  .etapa .portao { position: absolute; left: 10px; right: 10px; bottom: 10px; border: 1px dashed var(--nline2); border-radius: 8px; padding: 8px 10px; font-family: var(--fm); font-size: 10.5px; color: var(--ntext); background: var(--node); cursor: pointer; }
  .etapa .portao.antes { bottom: auto; top: 46px; }
  .etapa .portao .gl { color: var(--l4); margin-right: 4px; }
  .etapa .portao .via { color: var(--nfaint); }
  .etapa .portao.pendente { border-style: solid; border-color: var(--l1); background: rgba(250,182,0,.08); }
  .etapa .portao.ok { border-color: var(--l3); } .etapa .portao.ok .gl { color: var(--l3); }
  .etapa .portao.falha { border-color: var(--l5); } .etapa .portao.falha .gl { color: var(--l5); }
  .etapa .portao .pedido { margin-top: 6px; color: var(--nperg); }
  .etapa .portao .teclas { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .etapa .portao button { font-family: var(--fm); font-size: 10.5px; cursor: pointer; background: transparent; color: var(--nperg); border: 1px solid var(--nline2); border-radius: 3px; padding: 2px 8px; }
  .etapa .portao button:hover { border-color: var(--y); color: var(--y); }
  .etapa .portao .dossie { margin-top: 6px; color: var(--nfaint); font-size: 10px; line-height: 1.5; }
  .etapa .portao .dossie b { color: var(--ntext); font-weight: 500; }
  .instr { display: flex; gap: 4px; margin-top: 6px; }
  .instr input { flex: 1; min-width: 0; font-family: var(--fm); font-size: 10.5px; background: transparent; color: var(--nperg); border: 1px solid var(--nline2); border-radius: 3px; padding: 2px 6px; }
  .instr button { font-family: var(--fm); font-size: 10.5px; cursor: pointer; background: transparent; color: var(--nperg); border: 1px solid var(--nline2); border-radius: 3px; padding: 2px 7px; }
  .apr .instr input { color: var(--t1); border-color: var(--line); background: var(--card); } .apr .instr button { color: var(--t2); border-color: var(--line); background: var(--card); }
  .apr .dossie { font-family: var(--fm); font-size: 10.5px; color: var(--t3); margin-top: 6px; line-height: 1.55; }
  .apr .dossie b { color: var(--t1); font-weight: 500; }
  .faixa-noturna { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-family: var(--fm); font-size: 11px; color: var(--t1); background: var(--y); border-radius: 12px; padding: 3px 12px; pointer-events: none; }
  .faixa-noturna[hidden] { display: none; }
  .seta { position: absolute; font-family: var(--fd); font-size: 26px; color: var(--nfaint); pointer-events: none; }
  .seta.ativa { color: var(--l1); }

  .no { position: absolute; width: 270px; border-radius: 8px; border: 1px solid var(--nline); background: var(--node); user-select: none; box-shadow: 0 12px 30px -18px var(--nsombra); }
  .no.sel { border-color: var(--b); box-shadow: 0 0 0 3px var(--anel-b); }
  .no.ativo { border-color: var(--y); box-shadow: 0 0 0 3px var(--anel-y); }
  .no .cromo { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--nchrome); border-bottom: 1px solid var(--nline); border-radius: 8px 8px 0 0; font-family: var(--fm); font-size: 11px; color: var(--ncromo); cursor: move; }
  .no .cromo b { color: var(--ntitulo); font-weight: 700; }
  .no .cromo .papel { color: var(--y); }
  .no .cromo .preset { color: var(--npreset); }
  .no .cromo .inst { color: var(--l2); }
  .no .cromo .lead { color: var(--ntitulo); background: color-mix(in srgb, var(--y) 24%, transparent); border: 1px solid var(--y); border-radius: 4px; padding: 0 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .no .estado { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; }
  .no .estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--nponto); display: inline-block; }
  .no[data-status="running"] .estado i { background: var(--g); box-shadow: 0 0 0 3px var(--anel-g); }
  .no[data-status="provisioning"] .estado i { background: var(--y); }
  .no[data-status="failed"] .estado i { background: var(--w); }
  .no[data-status="waiting"] .estado i { background: var(--b); }
  .no pre { margin: 0; padding: 8px 10px; font-family: var(--fm); font-size: 10.5px; line-height: 1.5; color: var(--ntext); white-space: pre-wrap; word-break: break-word; min-height: 44px; max-height: 118px; overflow: hidden; }
  .no .meta { display: flex; gap: 9px; flex-wrap: wrap; padding: 5px 10px 7px; border-top: 1px solid var(--nline); font-family: var(--fm); font-size: 9.5px; color: var(--nfaint); }
  .porta { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--nchrome); border: 2px solid var(--nline2); transform: translateY(-50%); cursor: crosshair; }
  .porta.saida { right: -7px; }
  .porta.entrada { left: -7px; }
  .porta:hover, .porta.alvo { border-color: var(--y); background: var(--y); }

  .no.entrada { background: var(--ent-bg); border-color: var(--ent-line); }
  .no.entrada .cromo { background: var(--ent-cromo); border-color: var(--ent-line); color: var(--ent-t); }
  .no.entrada .cromo b { color: var(--ent-t); }
  .no.entrada textarea { width: 100%; min-height: 70px; resize: vertical; background: transparent; border: 0; color: var(--ent-tx); font-family: var(--fm); font-size: 10.5px; padding: 8px 10px; outline: none; }
  .no.entrada .acao { display: flex; gap: 6px; align-items: center; padding: 6px 10px 9px; border-top: 1px solid var(--ent-line); font-family: var(--fm); font-size: 10px; color: var(--nfaint); }
  .no.entrada .acao button { font-family: var(--fm); font-size: 10.5px; font-weight: 700; cursor: pointer; background: var(--y); color: var(--t1); border: 0; border-radius: 4px; padding: 4px 10px; }
  .no.nota { background: var(--nota-bg); border-color: var(--nota-line); }
  .no.nota .cromo { background: var(--nota-cromo); border-color: var(--nota-line); color: var(--nota-t); }
  .no.nota .cromo b { color: var(--nota-t); }
  .no.nota textarea { width: 100%; min-height: 90px; resize: vertical; background: transparent; border: 0; color: var(--nota-tx); font-family: var(--fm); font-size: 10.5px; padding: 8px 10px; outline: none; }
  .no.canal { width: 250px; background: var(--canal-bg); border-color: var(--canal-line); }
  .no.canal .cromo { background: var(--canal-cromo); border-color: var(--canal-line); color: var(--canal-t); }
  .no.canal .cromo b { color: var(--canal-t); }
  .no.canal .cromo .dest { margin-left: auto; font-size: 10px; color: var(--nfaint); max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .no.canal .msgs { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: auto; }
  .no.canal .msg { font-family: var(--fm); font-size: 10.5px; line-height: 1.45; color: var(--ntext); background: var(--node); border: 1px solid var(--canal-line); border-radius: 8px 8px 8px 2px; padding: 6px 8px; white-space: pre-wrap; word-break: break-word; }
  .no.canal .msg.aprovacao { border-left: 2px solid var(--y); }
  .no.canal .msg .de { color: var(--nfaint); font-size: 9.5px; display: block; margin-bottom: 2px; }
  .no.canal .msg .resp { color: var(--canal-t); display: block; margin-top: 4px; }
  .no.canal .msg .teclas { display: flex; gap: 6px; margin-top: 6px; }
  .no.canal .msg button, .no.conector button { font-family: var(--fm); font-size: 10.5px; cursor: pointer; background: transparent; color: var(--nperg); border: 1px solid var(--nline2); border-radius: 3px; padding: 2px 8px; }
  .no.canal .msg button:hover { border-color: var(--y); color: var(--y); }
  .no.canal .vazio, .no.conector .vazio, .no.quadro .vazio { padding: 10px; font-family: var(--fm); font-size: 10.5px; color: var(--nfaint); }
  .no.conector { width: 250px; background: var(--con-bg); border-color: var(--con-line); }
  .no.conector .cromo { background: var(--con-cromo); border-color: var(--con-line); color: var(--con-t); }
  .no.conector .cromo b { color: var(--con-t); }
  .no.conector .cromo .dest { margin-left: auto; font-size: 10px; color: var(--nfaint); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .no.conector pre { min-height: 30px; }
  .no.acionamento { width: 250px; background: var(--con-bg); border-color: var(--con-line); }
  .no.acionamento .cromo { background: var(--con-cromo); border-color: var(--con-line); color: var(--con-t); }
  .no.acionamento .cromo b { color: var(--con-t); }
  .no.acionamento .cromo .dest { margin-left: auto; font-size: 10px; color: var(--nfaint); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .no.acionamento pre { min-height: 30px; }
  .no.quadro .tarefa { display: grid; grid-template-columns: 3ch 1fr auto; gap: 7px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid var(--nline); font-family: var(--fm); font-size: 10.5px; color: var(--ntext); }
  .no.quadro .tarefa:last-child { border-bottom: 0; }
  .no.quadro .tarefa .id { color: var(--nfaint); }
  .no.quadro .st { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--nline); color: var(--ncromo); }
  .no.quadro .tarefa[data-st="completed"] .st { color: var(--g); border-color: var(--g-borda); }
  .no.quadro .tarefa[data-st="in_progress"] .st { color: var(--y); border-color: var(--y-borda); }
  .no.quadro .tarefa small { grid-column: 2 / 4; color: var(--nfaint); }
  .no.quadro .lista { max-height: 210px; overflow: auto; }

  .hud { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
  .hud button { font-family: var(--fm); font-size: 11px; cursor: pointer; background: var(--hud-bg); color: var(--hud-t); border: 1px solid var(--nline); border-radius: 4px; padding: 4px 9px; }
  .narrador { position: absolute; right: 12px; bottom: 12px; left: 320px; background: var(--hud-bg); border: 1px solid var(--nline); border-radius: 6px; padding: 8px 12px; font-family: var(--fm); font-size: 11.5px; color: var(--hud-t); display: flex; gap: 10px; align-items: baseline; pointer-events: none; }
  .narrador .ev { color: var(--l2); white-space: nowrap; }
  .narrador .ev::before { content: '⇢ '; color: var(--nfaint); }

  /* --- painel --- */
  .painel { border-left: 1px solid var(--line); background: var(--card); display: grid; grid-template-rows: auto 1fr; min-height: 0; }
  .abas { display: flex; border-bottom: 1px solid var(--line); }
  .abas button { flex: 1; font-family: var(--fb); font-size: 12px; font-weight: 600; cursor: pointer; background: transparent; color: var(--t4); border: 0; border-bottom: 2px solid transparent; padding: 10px 6px; }
  .abas button[aria-selected="true"] { color: var(--t1); border-bottom-color: var(--y); }
  .abas button .n { font-family: var(--fm); font-size: 10px; color: var(--acc); background: var(--accs); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
  .aba { display: none; overflow: auto; padding: 14px; }
  .aba.ativa { display: block; }
  pre.yaml { margin: 0; font-family: var(--fm); font-size: 11.5px; line-height: 1.55; background: var(--node); color: var(--ntext); border: 1px solid var(--nline); border-radius: 6px; padding: 12px; white-space: pre; overflow: auto; }
  pre.yaml .k { color: var(--b); } pre.yaml .v { color: var(--nperg); } pre.yaml .c { color: var(--nfaint); }
  .campo { display: grid; gap: 4px; margin-bottom: 10px; }
  .campo label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
  .campo input, .campo select, .campo textarea { font-family: var(--fm); font-size: 12px; background: var(--soft); color: var(--t1); border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; }
  .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--b); outline-offset: 1px; }
  .campo.linha { grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
  .campo.linha input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
  .campo.linha label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--t2); }
  .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .seg button { flex: 1; font-family: var(--fb); font-size: 12px; font-weight: 600; cursor: pointer; background: transparent; color: var(--t3); border: 0; padding: 7px 4px; }
  .seg button[aria-pressed="true"] { background: var(--y); color: var(--t1); }
  .lista { display: flex; flex-direction: column; gap: 8px; }
  .apr { border: 1px solid var(--line); border-left: 3px solid var(--y); border-radius: 5px; padding: 9px 11px; background: var(--soft); }
  .apr .q { font-family: var(--fm); font-size: 11.5px; color: var(--t1); }
  .apr .d { font-family: var(--fm); font-size: 10.5px; color: var(--t4); margin-top: 3px; }
  .apr .teclas { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .apr button { font-family: var(--fm); font-size: 11px; cursor: pointer; background: var(--card); border: 1px solid var(--line); color: var(--t2); border-radius: 4px; padding: 3px 9px; }
  .apr button:hover { border-color: var(--acc); color: var(--acc); }
  .apr .canais { font-family: var(--fm); font-size: 10.5px; color: var(--t3); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .apr .canais i { font-style: normal; color: var(--t4); }
  .hist { font-family: var(--fm); font-size: 10.5px; color: var(--t3); padding: 5px 0; border-bottom: 1px dashed var(--line); }
  .hist b { color: var(--t1); font-weight: 500; }
  .vazio { font-size: 12.5px; color: var(--t4); }
  .h { font-family: var(--fd); font-size: 14px; font-weight: 700; color: var(--t1); margin: 0 0 10px; }
  .h2 { font-family: var(--fd); font-size: 12.5px; font-weight: 700; color: var(--t1); margin: 16px 0 8px; }
  .p { font-size: 12.5px; color: var(--t3); margin: 0 0 12px; }
  .lig { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-family: var(--fm); font-size: 11px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 6px; }
  .lig button { font-size: 11px; cursor: pointer; background: transparent; border: 0; color: var(--t4); }
  .lig button:hover { color: var(--w); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-family: var(--fm); font-size: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 3px 10px; cursor: pointer; color: var(--t3); background: transparent; }
  .chip[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); background: var(--accs); }
  kbd { font-family: var(--fm); font-size: .85em; background: var(--soft); border: 1px solid var(--line); border-bottom-width: 2px; padding: 1px 5px; border-radius: 3px; }
  code { font-family: var(--fm); font-size: .92em; }
  /* CSP: classes para o que era estilo inline — a pagina servida so aceita estilo
     por nonce. `!important` reproduz a precedencia que o inline tinha. */
  .csp-mt6 { margin-top: 6px !important; } .csp-mt8 { margin-top: 8px !important; } .csp-mt10 { margin-top: 10px !important; }
  .csp-mt12 { margin-top: 12px !important; } .csp-mt18 { margin-top: 18px !important; }
  .csp-fw400 { font-weight: 400 !important; } .csp-fw400-t4 { font-weight: 400 !important; color: var(--t4) !important; }
  .csp-fw400-w { font-weight: 400 !important; color: var(--w) !important; } .csp-t4 { color: var(--t4) !important; }
  .csp-fs11 { font-size: 11px !important; } .csp-fs12 { font-size: 12px !important; } .csp-fs16 { font-size: 16px !important; }
  .csp-fs13-t4 { font-size: 13px !important; color: var(--t4) !important; }
  .csp-fs11-m4 { font-size: 11px !important; margin: 4px 0 0 !important; } .csp-fs115-ponteiro { font-size: 11.5px !important; cursor: pointer !important; }
  .csp-col2 { grid-column: 2 !important; } .csp-self-end { align-self: end !important; } .csp-minw200 { min-width: 200px !important; }
  .csp-linha-busca { display: flex !important; gap: 10px !important; align-items: center !important; border-bottom: 1px solid var(--line) !important; }
  .csp-grade-meta { stroke: var(--viz-t2) !important; stroke-width: 2 !important; }

  /* Ajustes da auditoria visual do front (12/09/2026). Ficam juntos e no fim do
     bloco de propósito: são correções sobre o desenho, não o desenho. Cada regra
     carrega o número do item que responde, para quem for conferir contra o
     relatório. */

  /* V17: a faixa cinza do cabeçalho do bloco só se justifica quando há dica ou
     ações nela. Sem elas, ela era uma tarja em cima de todo card. */
  .bloco > .cab:not(:has(.dica, .acoes)) { background: transparent; border-bottom: 0; padding: 12px 14px 4px; }

  /* V2: `{ sem: true }` zera o respiro do miolo para a tabela e o `.duplo`
     desenharem as próprias bordas — mas o mesmo miolo recebe parágrafo,
     `.linha-k` e formulário, e esses ficavam colados na borda do card. O respiro
     volta só para eles, e só uma vez em cada ponta. */
  .bloco > .miolo.sem > :not(table):not(.duplo) { padding-left: 14px; padding-right: 14px; }
  .bloco > .miolo.sem > :not(table):not(.duplo):first-child { padding-top: 12px; }
  .bloco > .miolo.sem > :not(table):not(.duplo):last-child { padding-bottom: 12px; }
  .bloco > .miolo.sem > table + :not(table):not(.duplo) { padding-top: 12px; }

  /* V2b: a regra acima para no `.duplo`, porque ele desenha as proprias bordas — mas
     dentro dele so a coluna da DIREITA tem respiro proprio. A da esquerda existe para a
     tabela encostar nas bordas, e quando o que cai la nao e tabela (o estado vazio, a
     linha-k de Arquivos, o formulario de credencial) o texto e o botao ficam colados na
     borda do card. O mesmo respiro, um nivel mais fundo, e pela mesma razao. */
  .bloco > .miolo.sem > .duplo > .esq > :not(table) { padding-left: 14px; padding-right: 14px; }
  .bloco > .miolo.sem > .duplo > .esq > :not(table):first-child { padding-top: 12px; }
  .bloco > .miolo.sem > .duplo > .esq > :not(table):last-child { padding-bottom: 12px; }
  .bloco > .miolo.sem > .duplo > .esq > table + :not(table) { padding-top: 12px; }

  /* V3: a coluna da chave era fixa em 180px e a do valor não tinha mínimo, então
     um UUID ou um JSON empurrava o texto para fora do `.bloco`, que recorta. */
  .linha-k { grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); }
  .linha-k > * { min-width: 0; overflow-wrap: anywhere; }

  /* V3b: o mesmo estouro do item V3, na outra grade. `1fr` nao encolhe abaixo do
     min-content, e a largura minima de um `<select>` e a da opcao mais longa — entao
     "principal — quem responde quando o agente..." empurrava os dois campos de "Qual
     modelo trabalha" 114px para fora do card, que recorta. Dava para ficar sem ver um
     controle inteiro. O `minmax(0,...)` deixa a coluna encolher, e o `max-width` impede
     que o controle passe do proprio trilho. */
  .duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .campo { min-width: 0; }
  .campo > input, .campo > select, .campo > textarea { min-width: 0; max-width: 100%; }

  /* V3c: a tabela nao encolhe abaixo do min-content das colunas, e `.bloco` recorta o que
     passa. Numa tela estreita isso nao era aperto: era SUMICO — a 390px, 28 pedacos de
     conteudo (o prazo de uma aprovacao, quem fez o que na auditoria, quando o convite
     chegou) ficavam fora do card sem rolagem e sem aviso, indistinguiveis de nao existir.
     O container rola; a tabela continua tabela, com as colunas alinhadas. Escolher QUAIS
     colunas importam num celular seria melhor, e e decisao de produto — esta regra so
     garante que nada fique inalcancavel enquanto ela nao e tomada. */
  .bloco > .miolo.sem:has(> table.tab) { overflow-x: auto; }
  .bloco > .miolo.sem > .duplo > .esq:has(> table.tab) { overflow-x: auto; }

  /* V4 e V5: `botao()` marca todo botão como `.mini`, e o `.mini` tirava a borda.
     A ação principal ficava a menor da tela e sem contorno sobre o card branco. */
  .btn.mini { border-color: var(--line); }
  .btn.mini.primario { padding: 7px 13px; font-size: 12.5px; }
  .btn:hover { background: var(--soft); border-color: var(--t4); }
  .btn.primario:hover { background: color-mix(in srgb, var(--t1) 12%, var(--y)); border-color: transparent; filter: none; }

  /* V8: dois botões numa célula ficavam separados por um espaço de texto; o resto
     da tela usa 6px. */
  table.tab td > .btn + .btn { margin-left: 3px; }

  /* V7: no rodapé do trilho, o botão de sair encostava no seletor de projeto. */
  .lateral .quem .btn { display: block; width: 100%; margin-top: 10px; }
  .lateral .quem .fraco { display: block; margin-top: 4px; }

  /* V22: a barra de rolagem do trilho. A barra do sistema é larga, tem trilho
     branco com borda e corta a coluna em duas — no meio de uma navegação que é
     toda espaçamento e cor discreta, ela é o elemento mais pesado da tela. Aqui
     ela vira um bastão de 4px, arredondado, tirado do próprio tom do texto mais
     fraco, sobre trilho transparente: a borda de 3px transparente com
     `background-clip: content-box` é o que dá o respiro sem inventar um segundo
     token de espaço. Ganha contraste quando o ponteiro está no trilho, para
     continuar agarrável, e some do caminho quando não está. A mesma regra serve
     a barra horizontal que o trilho deitado usa abaixo de 760px. */
  .lateral { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--t4) 34%, transparent) transparent; }
  .lateral::-webkit-scrollbar { width: 10px; height: 10px; }
  .lateral::-webkit-scrollbar-track { background: transparent; }
  .lateral::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--t4) 34%, transparent); background-clip: content-box; border: 3px solid transparent; border-radius: 999px; }
  .lateral::-webkit-scrollbar-corner { background: transparent; }
  .lateral:hover, .lateral:focus-within { scrollbar-color: color-mix(in srgb, var(--t4) 72%, transparent) transparent; }
  .lateral:hover::-webkit-scrollbar-thumb, .lateral:focus-within::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--t4) 72%, transparent); background-clip: content-box; }
  .lateral::-webkit-scrollbar-thumb:active { background: var(--acc); background-clip: content-box; }

  /* V10: um anel de foco só, e ele existe onde havia `outline: none` sem
     substituto — o nome da partitura e as áreas de texto dos nós. */
  :focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
  .nome:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
  .no.entrada textarea:focus-visible, .no.nota textarea:focus-visible { outline: 2px solid var(--b); outline-offset: -2px; }

  /* V12: o cabeçalho da tela em grade — título e subtítulo de um lado, a origem no
     backend do outro, sem que um texto longo empurre o outro para a linha de
     baixo. Subtítulo vazio não ocupa linha. */
  .admin-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
  .admin-topo h1 { grid-area: 1 / 1; }
  .admin-topo .sub { grid-area: 2 / 1; min-width: 0; overflow-wrap: anywhere; }
  .admin-topo .sub:empty { display: none; }
  .admin-topo .onde { grid-area: 1 / 2; align-self: center; margin-left: 0; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* V15: o último campo do formulário não precisa de respiro embaixo; o rodapé
     traz o dele. */
  .form .campo:last-of-type { margin-bottom: 0; }
  .form .rodape { margin-top: 14px; }

  /* V4c: leitura no ar. Abrir um projeto sao varias leituras em fila; ate elas chegarem a pagina
     parecia parada. A barra fica no topo, tem 3px, nao pega clique e nao tapa nada — um modal
     taparia justamente o conteudo que ja chegou. A largura e a fracao que ja voltou, nao enfeite. */
  #sv-progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
  #sv-progresso.ativo { opacity: 1; }
  #sv-progresso i { display: block; height: 100%; width: 0; background: var(--y); transition: width .25s ease; }
  @media (prefers-reduced-motion: reduce) { #sv-progresso, #sv-progresso i { transition: none; } }

  /* V4b: acao no ar. O botao nao dizia que estava trabalhando, e num projeto lento quem
     apertou nao sabia se tinha apertado. O giro entra AO LADO do rotulo, que continua a
     vista, e o clique repetido nao passa (ver `acoes`). Vale em qualquer largura. */
  .btn[aria-busy="true"], .btn.mini[aria-busy="true"] { cursor: progress; opacity: .82; }
  .btn[aria-busy="true"]::after {
    content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 7px; vertical-align: -1px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sv-gira .7s linear infinite;
  }
  @keyframes sv-gira { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; opacity: .5; } }

  /* V11: abaixo de 760px a casca não cabe em duas colunas. O trilho continua —
     decisão 1 da direção visual —, deitado no topo e rolando na horizontal. */
  @media (max-width: 760px) {
    body { overflow: auto; }
    .app { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; }
    .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .lateral .marca, .lateral .quem, .lateral .rodape { flex-basis: 100%; }
    .lateral .rodape { margin-top: 0; }
    .lateral .sec { display: none; }
    .lateral button { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
    .lateral button[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--y); }
    .duas, .linha-k { grid-template-columns: minmax(0, 1fr); }

    /* V3d: num celular a tabela deixa de ser tabela. Rolar de lado (V3c) garante que nada
       suma, mas ler uma trilha de auditoria arrastando a tela de lado nao e ler. O dono
       disse onde o celular importa — aprovacoes, auditoria e gestao —, e as tres sao
       justamente as de tabela larga. Entao cada linha vira um bloco, e cada celula leva o
       rotulo da propria coluna ao lado do valor: o cabecalho some porque cada valor passa
       a dizer o que e. A coluna sem rotulo (a dos botoes) ocupa a largura toda, e a linha
       de "nada cadastrado" continua uma frase. */
    table.tab, table.tab > thead, table.tab > tbody, table.tab > tbody > tr, table.tab > tbody > tr > td { display: block; }
    table.tab > thead { display: none; }
    table.tab > tbody > tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
    table.tab > tbody > tr:last-child { border-bottom: 0; }
    table.tab > tbody > tr > td { padding: 3px 0; border-bottom: 0; white-space: normal; }
    /* `justify-items` importa: num grid o filho `inline-block` e blocificado, e sem isto a
       etiqueta de estado esticava pela largura toda da celula, virando uma barra. */
    table.tab > tbody > tr > td[data-rot] { display: grid; grid-template-columns: minmax(88px, 32%) minmax(0, 1fr); gap: 10px; align-items: baseline; justify-items: start; }
    table.tab > tbody > tr > td[data-rot]::before { content: attr(data-rot); font-family: var(--fb); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); font-weight: 600; }
    table.tab > tbody > tr > td:not([data-rot]) { padding-top: 6px; }
    /* Rolar de lado deixa de ser preciso quando a linha empilha; sem isto o container
       ainda oferece uma rolagem que nao leva a lugar nenhum. */
    .bloco > .miolo.sem:has(> table.tab), .bloco > .miolo.sem > .duplo > .esq:has(> table.tab) { overflow-x: visible; }
    /* V3e: alvo de toque. A 390px o botao de uma tabela tinha 25px de altura, o chip 20 e o
       checkbox 14 — e e justamente em aprovacoes que se TOCA, para decidir. O checkbox
       estava abaixo do minimo de 24px do WCAG AA; os botoes passavam no AA e mesmo assim
       eram desconfortaveis no polegar. 44px e a recomendacao de quem faz sistema para
       celular, e e o que vale abaixo de 760px; no largo nada muda. */
    .btn, .btn.mini, .chip, .abas button { min-height: 44px; padding-top: 0; padding-bottom: 0; }
    .campo input, .campo select, .campo textarea { min-height: 44px; }
    .campo.linha input[type="checkbox"] { width: 24px; height: 24px; }
    .admin-topo { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
    .admin-topo .onde { grid-area: auto; max-width: 100%; }
    .admin-corpo { padding: 14px 14px 32px; }
  }
}
/* ==========================================================================
   SIS Innov & Tech v2 no Maestro: a folha inteira da interface.

   Fonte: o design system v2 do dono (artifact "SIS Innov & Tech v2", v2.4 de
   23/09/2026). O bloco :root abaixo sai do tokens.json dele, valor por valor e
   com os nomes originais (so o tema claro: o produto e claro). As receitas dos
   componentes vem do components/bundle.css dele: cada classe do Maestro leva a
   receita do componente v2 equivalente, escrita so com esses tokens.

   Como entra na pagina (ui-prototipo.ts): tudo o que veio antes — o CSS do
   prototipo, o tema do cliente, ESTILO_DOS_PASSOS e ESTILO_M6 — mora em
   @layer legado; esta folha vem por ultimo e sem camada, e por isso vence sem
   precisar de seletor mais forte. Hex so aqui e no prototipo: o gate de posse
   do tema (R1) cobre os .ts.
   ========================================================================== */
:root {
  /* Cor (tokens.json color, tema claro) */
  --sis-amarelo: #fab600;
  --sis-azul: #50afe3;
  --sis-vinho: #ad1840;
  --sis-navy: #171a2e;
  --sis-grafite: #323232;
  --vinho-50: #fff4f4;
  --vinho-100: #ffe6e7;
  --vinho-200: #feccd0;
  --vinho-300: #faacb2;
  --vinho-400: #e78892;
  --vinho-500: #d36473;
  --vinho-600: #be3f56;
  --vinho-700: #ad1840;
  --vinho-800: #83052c;
  --vinho-900: #5f011d;
  --vinho-950: #410111;
  --azul-50: #eff8ff;
  --azul-100: #daf1ff;
  --azul-200: #b5e2fe;
  --azul-300: #7dcfff;
  --azul-400: #50afe3;
  --azul-500: #3a96c7;
  --azul-600: #207ca9;
  --azul-700: #09628a;
  --azul-800: #074b6a;
  --azul-900: #01354d;
  --azul-950: #002234;
  --amarelo-50: #fff6e6;
  --amarelo-100: #feeac7;
  --amarelo-200: #fed489;
  --amarelo-300: #fab600;
  --amarelo-400: #d69c15;
  --amarelo-500: #b38314;
  --amarelo-600: #936b0f;
  --amarelo-700: #765404;
  --amarelo-800: #5a4004;
  --amarelo-900: #402d03;
  --amarelo-950: #2b1c01;
  --slate-0: #ffffff;
  --slate-25: #f7f8fb;
  --slate-50: #eff1f6;
  --slate-100: #e2e5ee;
  --slate-200: #c9cedc;
  --slate-300: #a5acc2;
  --slate-400: #7a82a0;
  --slate-500: #5b6281;
  --slate-600: #454b68;
  --slate-700: #323751;
  --slate-750: #2a2f4a;
  --slate-800: #22263d;
  --slate-850: #1c2038;
  --slate-900: #171a2e;
  --slate-950: #0e1020;
  --ext-magenta: #e5005b;
  --ext-laranja: #f7a840;
  --ext-lima: #e8e100;
  --ext-roxo: #6d4b99;
  --ext-azul-medio: #455ba6;
  --ext-azul-royal: #234093;
  --ext-ocre: #ac8411;
  --ext-turquesa: #73c4ba;
  --ext-verde: #6fad2d;
  --ext-bordo: #470f10;
  --ext-coral: #e06660;
  --ext-pessego: #e6b289;
  --gradient-top: #3d6195;
  --gradient-mid: #272049;
  --gradient-bottom: #79164d;
  --bg: #ffffff;
  --bg-subtle: #f7f8fb;
  --surface: #ffffff;
  --surface-sunken: #eff1f6;
  --surface-inverse: #171a2e;
  --border: #d5dae4;
  --border-strong: #7a82a0;
  --fg: #171a2e;
  --fg-muted: #454b68;
  --fg-subtle: #5b6281;
  --fg-on-dark: #ffffff;
  --fg-inverse: #f7f8fb;
  --primary: #ad1840;
  --primary-hover: #83052c;
  --on-primary: #ffffff;
  --primary-subtle: #fff4f4;
  --primary-fg: #ad1840;
  --tech-fg: #09628a;
  --tech-subtle: #eff8ff;
  --highlight: #fab600;
  --highlight-hover: #fed489;
  --on-highlight: #171a2e;
  --link: #09628a;
  --focus-ring: #207ca9;
  --success-fg: #2f6a12;
  --success-subtle: #e8f6dd;
  --warning-fg: #8a5300;
  --warning-subtle: #fff2dc;
  --danger-fg: #c0103f;
  --danger-subtle: #fde8ee;
  --info-fg: #09628a;
  --info-subtle: #eff8ff;
  --chart-1: #3a96c7;
  --chart-2: #ad1840;
  --chart-3: #b38314;
  --chart-4: #6d4b99;
  --chart-5: #2f9c8f;
  --chart-6: #7a82a0;
  --glass-surface: rgba(255,255,255,0.72);
  --glass-surface-strong: rgba(255,255,255,0.80);
  --glass-border: rgba(255,255,255,0.75);
  --glass-highlight: rgba(255,255,255,0.90);
  --glass-on-brand: rgba(255,255,255,0.10);
  --glass-on-brand-border: rgba(255,255,255,0.22);
  --glass-tint-vinho: rgba(173,24,64,0.16);
  --glass-tint-azul: rgba(80,175,227,0.16);
  --glass-fallback: #f7f8fb;
  --overlay: rgba(14,16,32,0.56);
  --nav-navy-bg: #171a2e;
  --nav-navy-fg: #c9cedc;
  --nav-navy-fg-strong: #ffffff;
  --nav-navy-muted: #a5acc2;
  --nav-navy-hover: rgba(255,255,255,0.06);
  --nav-navy-active: rgba(255,255,255,0.10);
  --nav-navy-indicator: #d36473;
  --nav-navy-border: rgba(255,255,255,0.08);
  --nav-navy-focus: #7dcfff;
  --tint-azul: #e8f4fc;
  --tint-vinho: #fcecef;
  --tint-amarelo: #fff4dc;
  --tint-navy: #eceff7;
  /* Espaco */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Raio */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;
  /* Sombra (tema claro) */
  --shadow-xs: 0 1px 2px rgba(14,16,32,0.12);
  --shadow-sm: 0 1px 2px rgba(14,16,32,0.10), 0 3px 8px rgba(14,16,32,0.10);
  --shadow-md: 0 2px 4px rgba(14,16,32,0.08), 0 10px 24px -4px rgba(14,16,32,0.20);
  --shadow-lg: 0 4px 12px rgba(14,16,32,0.10), 0 28px 60px -12px rgba(14,16,32,0.32);
  --shadow-glass: 0 8px 32px -8px rgba(14,16,32,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  /* Forma */
  --slant-angle: -43deg;
  --slant-cut: 10px;
  --slant-cut-lg: 28px;
  --stripe-width: 6px;
  /* Largura */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --container-max: 1200px;
  /* Desfoque */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --glass-saturate: 160%;
  /* Camadas */
  --z-dropdown: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-tooltip: 1400;
  /* Familias */
  --font-display: "Roc Grotesk Compressed", "Roc Grotesk", "Barlow Condensed", Impact, sans-serif;
  --font-subtitle: Degular, "Degular Text", Montserrat, Arial, sans-serif;
  --font-sans: Montserrat, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Movimento (components/bundle.css) */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }

/* ==========================================================================
   Componentes: cada peca do Maestro na receita do componente v2 equivalente
   (components/bundle.css do design system). Nada aqui tem cor ou medida propria:
   so os tokens acima. A folha entra por ultimo e sem camada; o que veio antes
   (prototipo, M6, passos, tema do cliente) mora em @layer legado, entao a v2
   vence sem precisar de seletor mais forte.
   ========================================================================== */

/* --- Base: o que o prototipo chama de --fd/--fb/--fm e --page/--card/--t1.. passa a ser a v2 --- */
:root {
  --fd: var(--font-sans); --fb: var(--font-sans); --fm: var(--font-mono);
  --page: var(--bg-subtle); --card: var(--surface); --line: var(--border); --soft: var(--surface-sunken);
  --t1: var(--fg); --t2: var(--fg-muted); --t3: var(--fg-subtle); --t4: var(--fg-subtle);
  --acc: var(--primary-fg); --accs: var(--primary-subtle);
  --viz-1: var(--chart-1); --viz-2: var(--chart-2); --viz-3: var(--chart-3);
  --sis-icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --sis-icone-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --sis-icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18zM12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");
  --sis-icone-atencao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.6 17.5a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0zM12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --sis-icone-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body { font-family: var(--font-sans); color: var(--fg-muted); background: var(--bg-subtle); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--primary-subtle); color: var(--fg); }
code, kbd, .mono { font-family: var(--font-mono); }
kbd { font: 500 12px/16px var(--font-mono); color: var(--fg-muted); background: var(--surface-sunken); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 1px 5px; }
a { color: var(--link); text-underline-offset: 3px; }
.fraco { color: var(--fg-subtle); }
#sv-progresso i { background: var(--primary); }
.icone { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }

/* --- Casca: SideNav navy + conteudo em bg-subtle (recomendacao da v2 para apps) --- */
@media (min-width: 761px) { .app { grid-template-columns: 260px minmax(0, 1fr); } }
.lateral { gap: var(--space-1); padding: var(--space-6) var(--space-4) 0; background: var(--nav-navy-bg); color: var(--nav-navy-fg); border-right: 1px solid var(--nav-navy-border); font-family: var(--font-sans); scrollbar-color: rgba(255,255,255,.18) transparent; }
.lateral::-webkit-scrollbar-thumb, .lateral:hover::-webkit-scrollbar-thumb, .lateral:focus-within::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
.lateral :focus-visible { outline-color: var(--nav-navy-focus); }
.lateral .marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-2) var(--space-5); font-size: 0; white-space: nowrap; }
.lateral .marca img { display: block; height: 36px; width: auto; }
.lateral .marca small { display: block; width: auto; margin: 0; padding: 0; background: transparent; font: 600 11px/16px var(--font-subtitle); letter-spacing: .2em; text-transform: uppercase; color: var(--nav-navy-muted); }
.lateral .sec { padding: var(--space-4) var(--space-3) var(--space-2); font: 600 11px/16px var(--font-subtitle); letter-spacing: .2em; text-transform: uppercase; color: var(--nav-navy-muted); }
.lateral .quem { display: block; margin: 0 0 var(--space-4); padding: 0 var(--space-2) var(--space-5); border-top: 0; border-bottom: 1px solid var(--nav-navy-border); font: 400 12px/18px var(--font-sans); color: var(--nav-navy-fg); }
.lateral .quem b { color: var(--nav-navy-fg-strong); font-weight: 600; }
.lateral .quem label.svCampo { display: grid; gap: 6px; margin: var(--space-3) 0 0; }
.lateral .quem label.svCampo small { display: block; margin: 0; font: 600 11px/16px var(--font-subtitle); letter-spacing: .2em; text-transform: uppercase; color: var(--nav-navy-muted); }
.lateral .quem select { width: 100%; min-height: 36px; margin: 0; padding: 7px 36px 7px var(--space-3); font: 500 14px/20px var(--font-sans); color: var(--nav-navy-fg-strong); background-color: var(--nav-navy-hover); border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius-md); color-scheme: dark; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.lateral .quem select:hover { border-color: var(--nav-navy-fg-strong); }
/* O menu nativo abre claro (o color-scheme nao chega a ele no Windows), e as opcoes herdavam a letra branca do
   select navy: branco sobre branco. As opcoes levam as cores do Dropdown da v2, em qualquer select. */
.lateral select option, .lateral select optgroup, #tela-admin select option, #tela-admin select optgroup, #tela-maestro select option, #tela-servidor select option { color: var(--fg); background-color: var(--surface); }
.lateral select option:disabled, #tela-admin select option:disabled { color: var(--fg-subtle); }
.lateral .quem .btn { display: inline-flex; width: auto; margin: var(--space-3) 0 0; min-height: 32px; padding: 0 var(--space-3); gap: var(--space-2); font: 600 13px/20px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--nav-navy-fg-strong); background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius-md); box-shadow: none; }
.lateral .quem .btn:hover { background: var(--nav-navy-hover); border-color: var(--nav-navy-fg-strong); }
.lateral .quem .fraco { color: var(--nav-navy-muted); }
.lateral button[data-tela] { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px; padding: 10px var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--nav-navy-fg); font: 600 14px/20px var(--font-sans); text-align: left; transition: background-color var(--dur-fast), color var(--dur-fast); }
.lateral button[data-tela]:hover { background: var(--nav-navy-hover); color: var(--nav-navy-fg-strong); }
.lateral button[data-tela][aria-current="page"] { background: var(--nav-navy-active); color: var(--nav-navy-fg-strong); font-weight: 600; }
.lateral button[data-tela][aria-current="page"]::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 4px; background: var(--nav-navy-indicator); transform: skewY(-43deg); }
.lateral button[data-tela] .gl { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: inherit; font-family: var(--font-sans); }
.lateral button[data-tela] .gl svg { display: block; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lateral button[data-tela] .n { margin-left: auto; min-width: 20px; padding: 0 6px; border: 0; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font: 700 11px/20px var(--font-sans); text-align: center; }
.lateral .rodape { margin-top: auto; padding: var(--space-4) var(--space-2) var(--space-5); border-top: 1px solid var(--nav-navy-border); font: 400 12px/18px var(--font-sans); color: var(--nav-navy-muted); }
/* Notebook com pouca altura util (1366x650 medido em 27/09): Governanca e Ajustes ficavam 5 e 49 px abaixo da dobra,
   atras do bloco do topo (quem, organizacao, projeto, partitura, Sair — pedido do dono em 22/09). So os respiros encolhem;
   os controles ficam do tamanho da v2. */
@media (min-width: 761px) and (max-height: 700px) {
  .lateral { padding-top: var(--space-4); }
  .lateral .marca { padding-bottom: var(--space-3); }
  .lateral .quem { margin-bottom: var(--space-2); padding-bottom: var(--space-3); }
  .lateral .quem label.svCampo { margin-top: var(--space-2); gap: 4px; }
  .lateral .quem .btn { margin-top: var(--space-2); }
}
@media (max-width: 760px) {
  .lateral { padding: var(--space-3) var(--space-4); gap: var(--space-1); border-bottom: 1px solid var(--nav-navy-border); }
  .lateral .marca { padding: 0 0 var(--space-3); }
  .lateral .quem { margin: 0 0 var(--space-2); padding: 0 0 var(--space-3); }
  .lateral button[data-tela] { width: auto; min-height: 44px; }
  .lateral button[data-tela][aria-current="page"]::before { left: var(--space-3); right: var(--space-3); top: auto; bottom: 4px; width: auto; height: 3px; transform: skewX(-43deg); }
  .lateral .rodape { display: none; }
}

/* --- Cabecalho e corpo do lugar: title-l, frase em body-s, conteudo ate container-max --- */
#tela-admin .admin-topo { display: grid; gap: var(--space-1); padding: var(--space-8) var(--space-8) 0; border-bottom: 0; background: transparent; }
#tela-admin .admin-topo h1 { margin: 0; font: 700 24px/32px var(--font-sans); letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
#tela-admin .admin-topo h1::after { content: none; }
#tela-admin .admin-topo .sub { max-width: 65ch; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
/* O chip "onde vive no backend" do prototipo (rota e verbo HTTP) sai vazio nesta plataforma, e a ponte o esconde
   com hidden; mas a tela se redesenha sem o atributo, e o display: block antigo venceria o hidden de qualquer jeito.
   Sobrava um risco cinza de 18 x 8 px no canto de 23 telas (auditoria de 27/09). */
#tela-admin .admin-topo > .onde:empty, #tela-admin .admin-topo > .onde[hidden] { display: none; }
#tela-admin .admin-topo > *, #tela-admin .admin-corpo > * { max-width: var(--container-max); }
/* Uma coluna que pode encolher: sem ela, a coluna implicita crescia ate o conteudo (a grade de cartoes
   pedia 716 px numa tela de 597), e o corpo inteiro passava da borda no celular. */
#tela-admin .admin-corpo { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-8) var(--space-20); gap: var(--space-8); counter-reset: none; }
#tela-admin { color: var(--fg-muted); font: 400 14px/22px var(--font-sans); }
#tela-admin b, #tela-admin strong { color: var(--fg); font-weight: 600; }

/* --- Texto de apoio --- */
#tela-admin .p, #tela-admin .miolo > .p { margin: 0; max-width: 65ch; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .nota, #tela-admin .miolo > .nota, #tela-admin .m6-acoes .nota { margin: 0; max-width: 65ch; font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); }
#tela-admin .mono, #tela-admin table.tab td.mono { font: 400 13px/20px var(--font-mono); overflow-wrap: anywhere; }
#tela-admin .fraco { color: var(--fg-subtle); }
#tela-admin .vazio, #tela-admin .m6-vazio { margin: 0; padding: var(--space-8) var(--space-6); text-align: center; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-caixa .vazio, #tela-admin .m6-equipe .vazio { padding: var(--space-2) 0 0; text-align: left; }

/* --- Button: primary (vinho, um por tela), secondary, ghost, link; sm nas acoes de linha --- */
#tela-admin .btn, #tela-maestro .btn, #tela-servidor .btn { --h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--h); padding: 0 var(--space-5); font: 600 14px/20px var(--font-sans); letter-spacing: .005em; text-transform: none; white-space: nowrap; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-xs); cursor: pointer; text-decoration: none; transform: none; filter: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
#tela-admin .btn.mini, #tela-maestro .btn.mini { --h: 32px; padding: 0 var(--space-3); font-size: 13px; }
#tela-admin .btn:hover:not([disabled]), #tela-maestro .btn:hover:not([disabled]) { background: var(--surface); border-color: var(--fg); transform: none; box-shadow: var(--shadow-xs); }
#tela-admin .btn:active:not([disabled]), #tela-maestro .btn:active:not([disabled]) { transform: translateY(1px); }
#tela-admin .btn.primario, #tela-admin .btn.mini.primario, #tela-maestro .btn.primario { --h: 40px; padding: 0 var(--space-5); font-size: 14px; background: var(--primary); color: var(--on-primary); border-color: transparent; box-shadow: var(--shadow-xs); }
#tela-admin .btn.primario:hover:not([disabled]), #tela-maestro .btn.primario:hover:not([disabled]) { background: var(--primary-hover); border-color: transparent; }
#tela-admin .btn[disabled], #tela-maestro .btn[disabled] { opacity: .5; cursor: not-allowed; }
#tela-admin .btn[aria-busy="true"], #tela-maestro .btn[aria-busy="true"] { cursor: progress; opacity: .5; }
#tela-admin .btn[aria-busy="true"]::after, #tela-maestro .btn[aria-busy="true"]::after { width: 16px; height: 16px; margin-left: 0; border-width: 2px; }
#tela-admin .btn .icone, #tela-maestro .btn .icone { width: 16px; height: 16px; }
/* link: a acao ao lado do titulo da secao e o "mostrar mais" */
#tela-admin .m6-secao > .h .btn, #tela-admin .m6-mais > summary { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--link); font: 600 14px/20px var(--font-sans); }
#tela-admin .m6-secao > .h .btn:hover:not([disabled]) { background: none; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
/* ghost: fechar o painel, acoes de barra */
#tela-admin .m6-painel > .ph .btn { --h: 32px; padding: 0 var(--space-3); font-size: 13px; background: transparent; border-color: transparent; box-shadow: none; color: var(--fg-muted); }
#tela-admin .m6-painel > .ph .btn:hover:not([disabled]) { background: var(--surface-sunken); border-color: transparent; box-shadow: none; color: var(--fg); }

/* --- Tag: estado com ponto e palavra; categoria sem ponto --- */
#tela-admin .tag, #tela-maestro .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 100%; margin: 0; padding: 4px var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: .02em; text-transform: none; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; border: 0; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--fg-muted); }
#tela-admin .tag::before, #tela-maestro .tag::before { content: none; }
#tela-admin .tag.ok, #tela-admin .tag.aviso, #tela-admin .tag.atencao, #tela-admin .tag.erro, #tela-admin .tag.azul, #tela-maestro .tag.ok, #tela-maestro .tag.aviso, #tela-maestro .tag.erro, #tela-maestro .tag.azul { border: 0; }
#tela-admin .tag.ok::before, #tela-admin .tag.aviso::before, #tela-admin .tag.atencao::before, #tela-admin .tag.erro::before, #tela-admin .tag.azul::before, #tela-maestro .tag.ok::before, #tela-maestro .tag.aviso::before, #tela-maestro .tag.erro::before, #tela-maestro .tag.azul::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
#tela-admin .tag.ok, #tela-maestro .tag.ok { background: var(--success-subtle); color: var(--success-fg); }
#tela-admin .tag.aviso, #tela-admin .tag.atencao, #tela-maestro .tag.aviso { background: var(--warning-subtle); color: var(--warning-fg); }
#tela-admin .tag.erro, #tela-maestro .tag.erro { background: var(--danger-subtle); color: var(--danger-fg); }
#tela-admin .tag.azul, #tela-maestro .tag.azul { background: var(--info-subtle); color: var(--info-fg); }
#tela-admin .tag.novo, #tela-maestro .tag.novo { background: var(--primary-subtle); color: var(--primary-fg); border: 0; }

/* --- Card: surface, borda, radius-lg, shadow-sm; o que se clica eleva com shadow-md --- */
#tela-admin .m6-cartao, #tela-admin .m6-caixa, #tela-admin .m6-lista, #tela-admin .m6-checklist, #tela-admin .m6-opcoes, #tela-admin .m6-painel, #tela-admin .m6-rateio, #tela-admin .bloco > .miolo, #tela-admin .bloco > .miolo.sem, #tela-admin .cartao, #tela-admin .etapa-editavel, #tela-admin .m6-no, #tela-admin .ajustes { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--fg-muted); transform: none; }
#tela-admin .m6-cartao { gap: var(--space-2); padding: var(--space-5); font: 400 14px/22px var(--font-sans); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
#tela-admin .m6-cartao b { font: 600 17px/24px var(--font-sans); color: var(--fg); overflow-wrap: anywhere; }
#tela-admin .m6-cartao .d { font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-cartao:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
#tela-admin .m6-cartao:has(button):hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
#tela-admin .m6-cartao.sel { outline: 0; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-sm); }
#tela-admin .m6-cartao.novo, #tela-admin .cartao.novo { background: var(--bg-subtle); border-style: dashed; border-color: var(--border-strong); box-shadow: none; }
#tela-admin .m6-cartoes { gap: var(--space-6); }
#tela-admin .m6-caixa { gap: var(--space-2); padding: var(--space-5); font: 400 14px/22px var(--font-sans); color: var(--fg); }
#tela-admin .m6-caixa .q { color: var(--fg-muted); }
#tela-admin .bloco > .miolo { padding: var(--space-5); }
#tela-admin .bloco > .miolo.sem { padding: var(--space-2) 0; }

/* --- Stat (KPI): rotulo, valor em display tabular, legenda --- */
#tela-admin .m6-kpis { gap: var(--space-6); }
#tela-admin .m6-kpi, #tela-admin .cartao { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
#tela-admin .m6-kpi .k, #tela-admin .cartao .k { font: 600 12px/16px var(--font-sans); letter-spacing: .02em; text-transform: none; color: var(--fg-muted); }
#tela-admin .m6-kpi .v, #tela-admin .cartao .v { margin: 0; font: 700 36px/1.1 var(--font-display); letter-spacing: .005em; font-variant-numeric: tabular-nums; color: var(--fg); }
#tela-admin .m6-kpi .v small, #tela-admin .cartao .v small { margin-left: var(--space-1); font: 500 12px/16px var(--font-sans); letter-spacing: 0; color: var(--fg-subtle); }
#tela-admin .m6-kpi .d, #tela-admin .cartao .d { font: 500 12px/16px var(--font-sans); color: var(--fg-subtle); }
#tela-admin .m6-kpi .m6-barra-exata { margin: var(--space-2) 0 var(--space-1); }
#tela-admin .m6-grupo { display: grid; gap: var(--space-3); min-width: 0; }
#tela-admin .m6-grupo > h4 { margin: 0; font: 600 12px/16px var(--font-subtitle); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
#tela-admin .m6-kpis.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#tela-admin .m6-kpis.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tela-admin .m6-kpis.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#tela-admin .m6-numeros { container-type: inline-size; min-width: 0; }
@container (max-width: 949px) { #tela-admin .m6-kpis.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 707px) { #tela-admin .m6-kpis.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tela-admin .m6-kpis.n3 > .m6-kpi:last-child { grid-column: 1 / -1; } }
@container (max-width: 479px) { #tela-admin .m6-kpis.n3, #tela-admin .m6-kpis.n2, #tela-admin .m6-kpis.n4 { grid-template-columns: minmax(0, 1fr); } #tela-admin .m6-kpis.n3 > .m6-kpi:last-child { grid-column: auto; } }

/* --- ProgressBar: trilho surface-sunken, 8px, radius-full; valor em chart-1 --- */
#tela-admin .m6-barra-exata { display: block; width: 100%; height: 8px; min-width: 0; }
#tela-admin .m6-barra-exata .trilho { fill: var(--surface-sunken); }
#tela-admin .m6-barra-exata .valor { fill: var(--chart-1); }
#tela-admin .m6-barra, #tela-admin .m6-teto > i, .medidor { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); }
#tela-admin .m6-barra i, #tela-admin .m6-teto > i > b, .medidor i { height: 8px; border-radius: var(--radius-full); background: var(--chart-1); }
#tela-admin .m6-rateio { display: grid; grid-template-columns: fit-content(28ch) minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); padding: var(--space-5); font: 400 14px/22px var(--font-sans); }
#tela-admin .m6-rateio .linha { display: contents; }
#tela-admin .m6-rateio .r-nome { font-weight: 600; color: var(--fg); overflow-wrap: anywhere; min-width: 0; line-height: 20px; }
#tela-admin .m6-rateio .r-pct { text-align: right; font: 500 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
#tela-admin .m6-rateio .r-fim { text-align: right; font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-subtle); white-space: nowrap; }
@media (max-width: 760px) { #tela-admin .m6-rateio { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } #tela-admin .m6-rateio .linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; } #tela-admin .m6-rateio .m6-barra-exata { grid-column: 1 / -1; grid-row: 2; } #tela-admin .m6-rateio .r-fim { grid-column: 1 / -1; text-align: left; white-space: normal; } }

/* --- Secao: title-m em caixa de frase, a acao como link ao lado --- */
#tela-admin .m6-secao { display: grid; gap: var(--space-4); min-width: 0; }
#tela-admin .m6-secao > .h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
#tela-admin .m6-secao > .h h3 { display: block; margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -.005em; color: var(--fg); text-wrap: balance; }
#tela-admin .m6-secao > .h h3::before, #tela-admin .m6-secao > .h h3::after { content: none; }
#tela-admin .m6-secao > .h .m6-nota, #tela-admin .m6-secao > .h .fraco { font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-secao.navy { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: inherit; }
#tela-admin .m6-secao.navy .m6-lista, #tela-admin .m6-secao.navy .m6-caixa, #tela-admin .m6-secao.navy .m6-significa { color: inherit; }
#tela-admin .m6-secao.navy > .m6-lista, #tela-admin .m6-secao.navy > .m6-caixa { background: linear-gradient(150deg, var(--tint-vinho) 0%, var(--surface) 72%); border: 1px solid var(--border); }
#tela-admin .m6-secao.navy .m6-item, #tela-admin .m6-secao.navy .m6-item .texto, #tela-admin .m6-secao.navy .m6-caixa b { color: var(--fg); border-color: var(--border); }
#tela-admin .m6-secao.navy .m6-item .q, #tela-admin .m6-secao.navy .m6-vazio, #tela-admin .m6-secao.navy .m6-significa p { color: var(--fg-muted); }
#tela-admin .m6-secao.navy .m6-item .hora, #tela-admin .m6-secao.navy .m6-item .fim, #tela-admin .m6-secao.navy .m6-caixa .mono { color: var(--fg-subtle); }
#tela-admin .m6-secao.navy .btn:not(.primario) { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
#tela-admin .m6-secao.navy > .h h3 { color: var(--fg); }
#tela-admin .m6-secao.navy > .h .btn { color: var(--link); background: none; border: 0; }

/* --- Lista: linhas como as da DataTable --- */
#tela-admin .m6-lista { display: grid; overflow: hidden; }
#tela-admin .m6-item { display: grid; grid-template-columns: auto minmax(0, 1fr) fit-content(42%); gap: var(--space-4); align-items: center; min-height: 48px; padding: 14px var(--space-5); border-bottom: 1px solid var(--border); font: 400 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin .m6-item:last-child { border-bottom: 0; }
#tela-admin .m6-item .hora { font: 500 12px/16px var(--font-mono); color: var(--fg-subtle); white-space: nowrap; }
#tela-admin .m6-item .texto { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
#tela-admin .m6-item .texto b { font-weight: 600; }
#tela-admin .m6-item .texto .q { color: var(--fg-muted); }
#tela-admin .m6-item .fim { justify-self: end; justify-content: flex-end; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font: 500 13px/20px var(--font-mono); color: var(--fg-subtle); }
#tela-admin button.m6-item { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border); background: transparent; font-family: var(--font-sans); cursor: pointer; }
#tela-admin button.m6-item:last-child { border-bottom: 0; }
#tela-admin button.m6-item:hover { background: var(--bg-subtle); }
#tela-admin .m6-item.sel { background: var(--primary-subtle); }
#tela-admin button.m6-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
/* A lista mede a propria caixa (27/09, sessao do dono): com o trilho aberto, uma janela de 792 px deixa 361 px para a
   lista de Ajustes, e o texto do item ficava com 34 px entre a hora e dois botoes ("Claude Opus 5.5" quebrava letra a
   letra). A regra do celular olha a janela; esta olha a caixa, com a mesma forma. */
#tela-admin .m6-lista { container: lista / inline-size; }
@container lista (max-width: 479px) {
  #tela-admin .m6-item { grid-template-columns: auto minmax(0, 1fr); padding: 12px var(--space-4); }
  #tela-admin .m6-item .fim { grid-column: 2; justify-self: start; }
  #tela-admin .m6-item .fim:has(.btn) { grid-column: 1 / -1; }
}
/* Mais estreita ainda (a 375 px, a lista de Ajustes tem 251): o rotulo ao lado comia 65 px e deixava 96 para o texto.
   Aqui ele sobe para cima do texto, e os botoes seguem a leitura, a esquerda. O seletor leva a lista para vencer o
   bloco do celular, que vem depois no arquivo com a mesma forma. */
@container lista (max-width: 299px) {
  #tela-admin .m6-lista > .m6-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  #tela-admin .m6-lista > .m6-item .fim, #tela-admin .m6-lista > .m6-item .fim:has(.btn) { grid-column: 1; justify-self: stretch; justify-content: flex-start; }
}
#tela-admin .m6-sub { display: block; margin-top: 2px; font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); }
#tela-admin .m6-mais { margin-top: var(--space-3); }
#tela-admin .m6-mais > summary { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; cursor: pointer; list-style: none; }

/* --- Execucoes: a lista das issues do GitHub, na v2 (26/09). A caixa e o Card; o cabecalho leva as Abas
   (com a contagem) sobre bg-subtle, como o th da DataTable; cada linha e o botao que abre a ata logo
   abaixo dela, e a linha aberta gruda no topo enquanto a ata rola. A caixa corta com overflow: clip (e
   nao hidden) para o sticky da linha aberta continuar valendo contra o #adminCorpo. --- */
#tela-admin .m6-execs { container: execs / inline-size; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: clip; }
#tela-admin .m6-execs-topo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 var(--space-4); padding: 0 var(--space-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
#tela-admin .m6-aba { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; margin: 0; padding: 0 var(--space-1); border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 14px/20px var(--font-sans); color: var(--fg-muted); white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
#tela-admin .m6-aba:hover { color: var(--fg); }
#tela-admin .m6-aba[aria-pressed="true"] { color: var(--fg); }
#tela-admin .m6-aba[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); }
#tela-admin .m6-aba:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
#tela-admin .m6-aba-n { min-width: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--fg-muted); font: 600 12px/20px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; }
#tela-admin .m6-aba[aria-pressed="true"] .m6-aba-n { color: var(--fg); }
#tela-admin .m6-execs-linhas { display: block; margin: 0; padding: 0; list-style: none; }
#tela-admin .m6-xl { border-bottom: 1px solid var(--border); }
#tela-admin .m6-xl-ancora { display: block; height: 0; }
#tela-admin .m6-xl:last-child { border-bottom: 0; }
#tela-admin .m6-xl-cab { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; gap: var(--space-1) var(--space-3); align-items: start; width: 100%; min-height: 0; margin: 0; padding: var(--space-3) var(--space-5); border: 0; border-radius: 0; background: var(--surface); box-shadow: none; text-align: left; font: 400 14px/20px var(--font-sans); color: var(--fg); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
#tela-admin .m6-xl-cab:hover { background: var(--bg-subtle); }
#tela-admin .m6-xl-cab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
#tela-admin .m6-xl-st, #tela-admin .m6-xl-chev { display: flex; padding-top: 2px; }
#tela-admin .m6-xl-st .icone, #tela-admin .m6-xl-chev .icone { width: 16px; height: 16px; }
#tela-admin .m6-xl.ok .m6-xl-st { color: var(--success-fg); }
#tela-admin .m6-xl.erro .m6-xl-st { color: var(--danger-fg); }
#tela-admin .m6-xl.aviso .m6-xl-st { color: var(--warning-fg); }
#tela-admin .m6-xl.azul .m6-xl-st { color: var(--info-fg); }
#tela-admin .m6-xl.neutro .m6-xl-st { color: var(--fg-subtle); }
#tela-admin .m6-xl-texto { display: grid; gap: var(--space-1); min-width: 0; }
#tela-admin .m6-xl-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
#tela-admin .m6-xl-titulo { font: 600 15px/20px var(--font-sans); color: var(--fg); overflow-wrap: anywhere; }
#tela-admin .m6-xl-cab .tag { min-height: 20px; padding: 2px var(--space-2); font: 600 12px/16px var(--font-sans); }
#tela-admin .m6-xl-meta { font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); overflow-wrap: anywhere; }
#tela-admin .m6-xl-meta .mono { font: 500 12px/18px var(--font-mono); color: var(--fg-muted); }
#tela-admin .m6-xl-lado { padding-top: 2px; font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-subtle); white-space: nowrap; }
#tela-admin .m6-xl-chev { color: var(--fg-subtle); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
#tela-admin .m6-xl.aberta > .m6-xl-cab { position: sticky; top: calc(-1 * var(--space-6)); z-index: 1; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
#tela-admin .m6-xl.aberta > .m6-xl-cab .m6-xl-chev { transform: rotate(180deg); color: var(--fg); }
#tela-admin .m6-painel.m6-xl-corpo { position: static; max-height: none; overflow: visible; margin: 0; padding: var(--space-5) var(--space-5) var(--space-6) calc(var(--space-5) + 16px + var(--space-3)); border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
#tela-admin .m6-origem { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-execs > .m6-vazio { border-bottom: 0; }
/* A acao em lote da aba "Precisam de voce": a mesma faixa do rodape, no alto da lista. */
#tela-admin .m6-execs-lote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); background: var(--bg-subtle); border-bottom: 1px solid var(--border); font: 400 13px/20px var(--font-sans); color: var(--fg-subtle); }
#tela-admin .m6-execs-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); background: var(--bg-subtle); border-top: 1px solid var(--border); font: 400 13px/20px var(--font-sans); color: var(--fg-subtle); }
/* A caixa estreita (a lateral come a largura da janela, entao a regua e a da caixa): duracao e custo descem
   para baixo da frase e o titulo fica com a largura toda. */
@container execs (max-width: 719px) {
  #tela-admin .m6-xl-cab { grid-template-columns: 16px minmax(0, 1fr) 16px; }
  #tela-admin .m6-xl-lado { grid-column: 2; grid-row: 2; padding: 0; }
  #tela-admin .m6-xl-chev { grid-column: 3; grid-row: 1; }
}
@container execs (max-width: 479px) {
  #tela-admin .m6-execs-topo { gap: 0 var(--space-3); padding: 0 var(--space-3); }
  #tela-admin .m6-xl-cab { padding: var(--space-3) var(--space-4); }
  #tela-admin .m6-painel.m6-xl-corpo { padding: var(--space-4); }
  #tela-admin .m6-execs-rodape, #tela-admin .m6-execs-lote { padding: var(--space-3) var(--space-4); }
}
@media (max-width: 760px) {
  #tela-admin .m6-aba { min-height: 44px; }
  #tela-admin .m6-xl.aberta > .m6-xl-cab { top: calc(-1 * var(--space-5)); }
}

/* --- Formularios: TextField, Select, Checkbox (accent primary), FileUpload --- */
#tela-admin .campo, #tela-maestro .campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-4); min-width: 0; font-family: var(--font-sans); }
#tela-admin .campo label, #tela-maestro .campo label { font: 600 14px/20px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
#tela-admin .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), #tela-admin .campo select, #tela-admin .campo textarea, #tela-admin .busca, #tela-maestro .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), #tela-maestro .campo select, #tela-maestro .campo textarea, .filtros select { width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px var(--space-3); font: 400 15px/20px var(--font-sans); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
#tela-admin .campo input::placeholder, #tela-admin .campo textarea::placeholder, #tela-maestro .campo input::placeholder, #tela-maestro .campo textarea::placeholder { color: var(--fg-subtle); }
#tela-admin .campo input:hover, #tela-admin .campo select:hover, #tela-admin .campo textarea:hover, #tela-maestro .campo input:hover, #tela-maestro .campo select:hover, #tela-maestro .campo textarea:hover { border-color: var(--fg-muted); }
#tela-admin .campo input:focus, #tela-admin .campo select:focus, #tela-admin .campo textarea:focus, #tela-maestro .campo input:focus, #tela-maestro .campo select:focus, #tela-maestro .campo textarea:focus { outline: 0; box-shadow: none; }
#tela-admin .campo input:focus-visible, #tela-admin .campo select:focus-visible, #tela-admin .campo textarea:focus-visible, #tela-maestro .campo input:focus-visible, #tela-maestro .campo select:focus-visible, #tela-maestro .campo textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
#tela-admin .campo select, #tela-maestro .campo select, .filtros select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
#tela-admin .campo textarea, #tela-maestro .campo textarea { min-height: 96px; resize: vertical; line-height: 22px; }
#tela-admin .m6-pedido .campo textarea { min-height: 128px; box-shadow: var(--shadow-xs); }
#tela-admin .campo .ajuda, #tela-maestro .campo .ajuda { font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); }
#tela-admin .campo.linha, #tela-maestro .campo.linha { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
#tela-admin .campo.linha label, #tela-maestro .campo.linha label { font: 500 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin input[type=checkbox], #tela-admin input[type=radio], #tela-maestro input[type=checkbox], #tela-maestro input[type=radio], .matriz input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); cursor: pointer; }
#tela-admin input[type=file] { width: 100%; padding: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--fg-muted); background: var(--bg-subtle); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); box-shadow: none; }
#tela-admin input[type=file]::file-selector-button { margin-right: var(--space-3); min-height: 32px; padding: 0 var(--space-3); font: 600 13px/20px var(--font-sans); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); cursor: pointer; }
#tela-admin .form .rodape, #tela-admin .m6-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* A fileira nunca passa do cartao: sozinho na linha e ainda largo demais (o primario longo a 375 px), o
   rotulo quebra dentro do botao, que cresce pela altura minima. Em uma linha, o respiro nao muda nada. */
#tela-admin .m6-acoes > .btn { max-width: 100%; white-space: normal; padding-block: 6px; }
/* a opcao de Ajustes: titulo, uma frase e o controle a direita */
#tela-admin .m6-opcoes { overflow: hidden; container: opcoes / inline-size; }
#tela-admin .m6-opcao { display: grid; grid-template-columns: minmax(min(100%, 20ch), 1fr) minmax(0, auto); gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); font: 400 14px/22px var(--font-sans); }
#tela-admin .m6-opcao:last-child { border-bottom: 0; }
#tela-admin .m6-opcao b { display: block; font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin .m6-opcao small { display: block; max-width: 60ch; margin-top: 2px; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-opcao .campo { margin: 0; }
/* A opcao tambem mede a caixa: na mesma janela de 792 px, o seletor ficava com 117 px e mostrava "GitHub ·". Empilhada,
   o controle vem para a esquerda, como no celular (a camada legada o alinha a direita, ao lado do titulo). */
@container opcoes (max-width: 479px) {
  #tela-admin .m6-opcao { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  #tela-admin .m6-opcao .fim { justify-items: start; width: 100%; }
}
/* chips: alternancia (aria-pressed) com radius-sm */
#tela-admin .chip, #tela-maestro .chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; font: 500 13px/20px var(--font-sans); color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
#tela-admin .chip[aria-pressed="true"], #tela-maestro .chip[aria-pressed="true"], #tela-admin .chip.escreve[aria-pressed="true"], #tela-maestro .chip.escreve[aria-pressed="true"] { color: var(--primary-fg); background: var(--primary-subtle); border-color: var(--primary); }
#tela-admin .seg, #tela-maestro .seg { border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
#tela-admin .seg button, #tela-maestro .seg button { font: 600 13px/20px var(--font-sans); color: var(--fg-muted); }
#tela-admin .seg button[aria-pressed="true"], #tela-maestro .seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* --- DataTable --- */
#tela-admin table.tab, .matriz { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin table.tab th, .matriz th { padding: 10px var(--space-5); background: var(--bg-subtle); color: var(--fg-muted); font: 600 12px/16px var(--font-sans); letter-spacing: .02em; text-transform: none; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
#tela-admin table.tab td, .matriz td { padding: 14px var(--space-5); border-bottom: 1px solid var(--border); color: var(--fg); vertical-align: middle; }
#tela-admin table.tab tr:last-child td { border-bottom: 0; }
#tela-admin table.tab tr[data-chave]:hover td { background: var(--bg-subtle); }
#tela-admin table.tab tr[aria-selected="true"] td { background: var(--primary-subtle); }
#tela-admin table.tab td.fraco { color: var(--fg-muted); text-align: center; padding: var(--space-8) var(--space-5); }
.matriz th:first-child, .matriz td:first-child { font: 400 13px/20px var(--font-mono); }
.matriz th { text-align: center; }
/* linha chave-valor: rotulo como o do campo, valor como texto (mono so no dado) */
#tela-admin .linha-k { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: 12px var(--space-5); border-bottom: 1px solid var(--border); font: 400 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin .linha-k:last-child { border-bottom: 0; }
#tela-admin .linha-k .k { font: 600 12px/16px var(--font-sans); letter-spacing: .02em; color: var(--fg-muted); }
#tela-admin .m6-caixa .linha-k { padding: var(--space-2) 0; }

/* --- Alert: o que falta (atencao), o que significa e o portao (informacao) --- */
#tela-admin .falta, #tela-admin .miolo > .falta, #tela-admin .m6-significa, #tela-admin .portao, #tela-admin .m6-equipe .portao, .nota-backend { position: relative; display: block; margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 16px + var(--space-3)); border: 1px solid transparent; border-left-width: 1px; border-radius: var(--radius-md); font: 400 14px/22px var(--font-sans); color: var(--fg); max-width: none; }
#tela-admin .falta::before, #tela-admin .m6-significa::before, #tela-admin .portao::before, .nota-backend::before { content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-4) + 3px); width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--sis-icone-info) center / contain no-repeat; mask: var(--sis-icone-info) center / contain no-repeat; }
#tela-admin .falta, #tela-admin .miolo > .falta { background: var(--warning-subtle); }
#tela-admin .falta::before { color: var(--warning-fg); -webkit-mask-image: var(--sis-icone-atencao); mask-image: var(--sis-icone-atencao); }
#tela-admin .falta b { color: var(--warning-fg); font-weight: 700; }
#tela-admin .m6-significa, #tela-admin .portao, #tela-admin .m6-equipe .portao, .nota-backend { background: var(--info-subtle); }
#tela-admin .m6-significa::before, #tela-admin .portao::before, .nota-backend::before { color: var(--info-fg); }
#tela-admin .m6-significa { display: grid; gap: var(--space-2); }
#tela-admin .m6-significa h4 { margin: 0; font: 700 14px/22px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--info-fg); }
#tela-admin .m6-significa p { margin: 0; max-width: 80ch; font: 400 14px/22px var(--font-sans); color: var(--fg); }
#tela-admin .m6-significa b, #tela-admin .portao b, .nota-backend b { color: var(--fg); }
#tela-admin .miolo > .falta { margin: var(--space-3) var(--space-5) var(--space-1); }

/* --- Detalhes tecnicos: um acordeao pequeno, fechado --- */
#tela-admin details.tecnico > summary, #tela-admin .miolo > details.tecnico > summary, #tela-admin .m6-tec summary { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; list-style: none; font: 600 13px/20px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
#tela-admin details.tecnico > summary::-webkit-details-marker, #tela-admin .m6-tec summary::-webkit-details-marker, #tela-admin .m6-mais > summary::-webkit-details-marker { display: none; }
#tela-admin details.tecnico > summary::after, #tela-admin .m6-tec summary::after, #tela-admin .m6-mais > summary::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--sis-icone-chevron) center / contain no-repeat; mask: var(--sis-icone-chevron) center / contain no-repeat; transition: transform var(--dur-base) var(--ease-out); }
#tela-admin details.tecnico[open] > summary::after, #tela-admin .m6-tec[open] summary::after, #tela-admin .m6-mais[open] > summary::after { transform: rotate(180deg); }
#tela-admin details.tecnico > summary:hover, #tela-admin .m6-tec summary:hover { color: var(--fg); }
#tela-admin .m6-tec { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
#tela-admin .m6-tec .mono { display: grid; gap: 3px; margin: var(--space-2) 0; font: 400 13px/20px var(--font-mono); color: var(--fg-muted); word-break: break-all; }
#tela-admin .m6-tec .mono b { color: var(--fg); font-weight: 500; }
/* A previa do app (P5): o log da montagem, recolhivel, no cartao rebaixado; aberto quando a montagem falhou. */
#tela-admin .m6-log { margin: var(--space-2) 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); padding: var(--space-2) var(--space-3); }
#tela-admin .m6-log > summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; font: 600 13px/20px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-log > summary:hover { color: var(--fg); }
#tela-admin .m6-log > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
#tela-admin .m6-log > pre { margin: var(--space-2) 0 var(--space-1); max-height: 40vh; overflow: auto; font: 400 12px/18px var(--font-mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
#tela-admin .miolo > details.tecnico { padding: var(--space-2) var(--space-5) 0; }

/* --- Stepper: os passos de Configuracoes e o Comecar --- */
#tela-admin .bloco > .cab > .passo { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-sunken); font: 700 13px/1 var(--font-sans); color: var(--fg-muted); }
#tela-admin .bloco > .cab > .passo.feito { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
#tela-admin .bloco > .cab > .passo.atual { background: var(--surface); border-color: var(--primary); color: var(--primary-fg); box-shadow: 0 0 0 4px var(--primary-subtle); }
#tela-admin .m6-checklist { overflow: hidden; }
#tela-admin .m6-checklist > .top { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
#tela-admin .m6-checklist > .top h3 { margin: 0; font: 600 17px/24px var(--font-sans); color: var(--fg); }
#tela-admin .m6-checklist > .top .quanto { font: 500 13px/20px var(--font-mono); color: var(--fg-muted); white-space: nowrap; }
#tela-admin .m6-passo { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 56px; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); font: 400 14px/20px var(--font-sans); }
#tela-admin .m6-passo:last-child { border-bottom: 0; }
#tela-admin .m6-passo .c { display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-sunken); font: 700 13px/1 var(--font-sans); color: transparent; }
#tela-admin .m6-passo .c.ok { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
#tela-admin .m6-passo .t b { font-weight: 600; color: var(--fg); }
#tela-admin .m6-passo .t.feito b { text-decoration: none; color: var(--fg-muted); }
#tela-admin .m6-passo .t small { display: block; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }

/* --- Timeline: a linha das etapas na ata --- */
#tela-admin .m6-linha { border-left: 2px solid var(--border); margin-left: 5px; padding-left: var(--space-5); }
#tela-admin .m6-etapa::before { left: -27px; top: 6px; width: 10px; height: 10px; border: 0; box-shadow: 0 0 0 4px var(--surface); background: var(--primary-fg); }
#tela-admin .m6-etapa.ok::before { background: var(--success-fg); }
#tela-admin .m6-etapa.nunca::before { background: var(--border-strong); }
#tela-admin .m6-etapa .quem b { font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin .m6-etapa .quem span { font: 500 12px/16px var(--font-mono); color: var(--fg-subtle); }
#tela-admin .m6-etapa details, #tela-admin .m6-painel blockquote { border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); padding: var(--space-3) var(--space-4); font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-etapa details summary { cursor: pointer; font-weight: 600; color: var(--fg); }
#tela-admin .m6-etapa details pre { font: 400 13px/20px var(--font-mono); color: var(--fg-muted); }
.tl .p.ok { background: var(--success-fg); } .tl .p.pend { background: var(--warning-fg); } .tl .p.falha { background: var(--danger-fg); }

/* --- Painel ao lado (Drawer em linha) --- */
#tela-admin .m6-duplo { gap: var(--space-6); }
#tela-admin .m6-duplo > .esq { gap: var(--space-6); }
/* Uma coluna do tamanho do cartao: sem ela, a coluna implicita crescia ate o filho mais largo (o botao
   primario longo levava a ata inteira 41 px alem do cartao, e 8 px alem da tela, a 375 px). */
#tela-admin .m6-painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); background: var(--surface); box-shadow: var(--shadow-md); font: 400 14px/22px var(--font-sans); color: var(--fg); }
#tela-admin [data-sv-governanca] .m6-painel { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); }
#tela-admin [data-sv-governanca] .m6-painel > .ph h3, #tela-admin [data-sv-governanca] .m6-painel .m6-parte > h4 { color: var(--fg); }
#tela-admin [data-sv-governanca] .m6-painel p, #tela-admin [data-sv-governanca] .m6-painel .m6-significa b { color: var(--fg); }
#tela-admin [data-sv-governanca] .m6-painel .q, #tela-admin [data-sv-governanca] .m6-painel ul, #tela-admin [data-sv-governanca] .m6-painel .m6-significa p { color: var(--fg-muted); }
#tela-admin [data-sv-governanca] .m6-painel .btn:not(.primario) { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
#tela-admin [data-sv-governanca] .m6-painel .tag { background: var(--surface-sunken); color: var(--fg-muted); }
#tela-admin [data-sv-governanca] .m6-painel .m6-tec { border-color: var(--border); }
#tela-admin [data-sv-governanca] .m6-painel .m6-tec summary, #tela-admin [data-sv-governanca] .m6-painel .m6-tec .mono { color: var(--fg-muted); }
#tela-admin .m6-painel > .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
#tela-admin .m6-painel > .ph h3 { margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -.005em; color: var(--fg); text-wrap: balance; overflow-wrap: anywhere; }
#tela-admin .m6-painel .q { color: var(--fg-muted); }
#tela-admin .m6-painel ul { color: var(--fg-muted); font: 400 14px/22px var(--font-sans); }
#tela-admin .m6-parte { gap: var(--space-2); }
#tela-admin .m6-parte > h4 { margin: 0; font: 600 12px/16px var(--font-subtitle); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
#tela-admin .m6-fatos { gap: var(--space-2) var(--space-4); font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-fatos b { color: var(--fg); }

/* --- Lugares compostos: Ajustes com sub-navegacao (SideNav clara), secoes de Governanca --- */
#tela-admin .ajustes { overflow: hidden; }
#tela-admin .ajustes > .subnav, #tela-admin .subnav { gap: 2px; padding: var(--space-5) var(--space-3); background: var(--bg-subtle); border-right: 1px solid var(--border); }
#tela-admin .subnav h5 { margin: var(--space-4) var(--space-3) var(--space-2); font: 600 11px/16px var(--font-subtitle); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); overflow-wrap: anywhere; }
#tela-admin .subnav h5:first-child { margin-top: 0; }
#tela-admin .subnav button { position: relative; display: block; width: 100%; min-height: 40px; padding: 10px var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font: 600 14px/20px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
#tela-admin .subnav button:hover { background: var(--surface-sunken); color: var(--fg); }
#tela-admin .subnav button[aria-current="page"] { background: var(--primary-subtle); color: var(--fg); font-weight: 600; border: 0; }
#tela-admin .subnav button[aria-current="page"]::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 4px; background: var(--primary); transform: skewY(-43deg); }
#tela-admin .ajustes > .pagina { gap: var(--space-6); padding: var(--space-6) var(--space-6) var(--space-8); }
#tela-admin .ajustes > .pagina > .h, #tela-admin .pagina > .h, #tela-admin .secao-lugar > .h { margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -.005em; color: var(--fg); }
#tela-admin .ajustes > .pagina > .fraco, #tela-admin .pagina > .fraco, #tela-admin .secao-lugar > .fraco { margin: calc(-1 * var(--space-4)) 0 0; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .secao-lugar { gap: var(--space-4); }
#tela-admin .secao-lugar > .fraco { margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 820px) { #tela-admin .subnav { border-right: 0; border-bottom: 1px solid var(--border); } #tela-admin .subnav button[aria-current="page"]::before { display: none; } }

/* --- Blocos herdados (bloco + cabecalho): o titulo e title-m, o miolo e um card --- */
#tela-admin .bloco { display: grid; gap: var(--space-4); border: 0; background: transparent; overflow: visible; }
#tela-admin .bloco > .cab { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 0; border: 0; background: transparent; }
#tela-admin .bloco > .cab h2 { margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -.005em; color: var(--fg); }
#tela-admin .bloco > .cab .dica { font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-admin .bloco > .cab .acoes { margin-left: auto; display: flex; gap: var(--space-2); }
#tela-admin .bloco > .miolo.sem > :not(table):not(.duplo) { padding-left: var(--space-5); padding-right: var(--space-5); }
#tela-admin .bloco > .miolo.sem > :not(table):not(.duplo):first-child { padding-top: var(--space-4); }
#tela-admin .bloco > .miolo.sem > :not(table):not(.duplo):last-child { padding-bottom: var(--space-4); }
/* Os avisos com icone guardam o recuo da receita: a regra dos filhos do miolo sem respiro, mais especifica, os deixava com
   20 px, e o icone de 16 px (posto a 16 px) cobria a primeira letra de "Falta:" e "Não deu:" (medido em 27/09). */
#tela-admin .bloco > .miolo.sem > .falta:not(table):not(.duplo), #tela-admin .bloco > .miolo.sem > .m6-significa:not(table):not(.duplo), #tela-admin .bloco > .miolo.sem > .portao:not(table):not(.duplo) { padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 16px + var(--space-3)); }
#tela-admin .bloco > .miolo.sem > .m6-opcoes, #tela-admin .bloco > .miolo.sem > .m6-lista, #tela-admin .bloco > .miolo.sem > .linha-k { padding-left: 0; padding-right: 0; }
#tela-admin .bloco > .miolo.sem > .m6-opcoes, #tela-admin .bloco > .miolo.sem > .m6-lista { margin: var(--space-3) var(--space-5); }
#tela-admin .bloco-interno { display: grid; gap: var(--space-4); margin: var(--space-3) var(--space-5); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
#tela-admin .duplo > .esq { border-color: var(--border); }

/* --- Pedir: a equipe por etapa, os agentes e o portao --- */
#tela-admin .m6-pedido { display: grid; gap: var(--space-4); }
#tela-admin .m6-equipe { gap: var(--space-3); }
#tela-admin .m6-equipe > .fraco { font: 500 12px/16px var(--font-mono); color: var(--fg-subtle); }
#tela-admin .etapa-editavel { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-5); }
#tela-admin .etapa-editavel.sel { outline: 0; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-sm); }
#tela-admin .etapa-editavel > .lh .nome { font: 600 17px/24px var(--font-sans); color: var(--fg); border: 0; background: none; padding: 0; min-width: 0; }
#tela-admin .etapa-editavel > .lh small { font: 500 12px/16px var(--font-mono); color: var(--fg-subtle); }
#tela-admin .m6-no { gap: var(--space-1); padding: var(--space-4); background: var(--bg-subtle); box-shadow: none; }
#tela-admin .m6-no.sel { outline: 0; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface); }
#tela-admin .m6-no > b { font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-admin .m6-no .p { font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
#tela-admin .m6-no .e { font: 500 12px/16px var(--font-mono); color: var(--primary-fg); }
#tela-admin .m6-equipe .seta, #tela-admin .seta { position: static; margin: 0; padding-left: var(--space-5); font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); }

/* --- Pagina do agente: as seis abas --- */
#tela-admin .pagina-do-agente > .abas, .abas { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); border-bottom: 1px solid var(--border); }
#tela-admin .pagina-do-agente > .abas button, .abas button { position: relative; flex: 0 0 auto; min-width: 0; padding: var(--space-3) 0; background: none; border: 0; border-bottom: 0; font: 600 14px/20px var(--font-sans); color: var(--fg-muted); cursor: pointer; white-space: nowrap; }
#tela-admin .pagina-do-agente > .abas button:hover, .abas button:hover { color: var(--fg); }
#tela-admin .pagina-do-agente > .abas button[aria-selected="true"], .abas button[aria-selected="true"] { color: var(--fg); }
#tela-admin .pagina-do-agente > .abas button[aria-selected="true"]::after, .abas button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); }
.abas button .n { margin-left: 6px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-sunken); font: 600 12px/20px var(--font-sans); color: var(--fg-muted); }
#tela-admin .pagina-do-agente q { font-style: italic; color: var(--fg); }

/* --- Canvas (#tela-maestro): barra de ferramentas, painel, palco e nos --- */
#tela-maestro .topo { gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); }
#tela-maestro .topo .marca { font: 700 17px/24px var(--font-sans); color: var(--fg); letter-spacing: -.01em; }
#tela-maestro .nome { min-height: 32px; padding: 4px var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--fg); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; }
#tela-maestro .nome:hover, #tela-maestro .nome:focus { border-color: var(--border-strong); background: var(--surface); }
#tela-maestro .grupo { gap: var(--space-2); padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
#tela-maestro .grupo .rot { padding: 0 var(--space-2); font: 600 11px/16px var(--font-subtitle); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); }
#tela-maestro .grupo .btn { --h: 28px; padding: 0 var(--space-2); font-size: 13px; background: transparent; border-color: transparent; box-shadow: none; }
#tela-maestro .grupo .btn:hover:not([disabled]) { background: var(--surface); border-color: var(--border); }
#tela-maestro .painel { background: var(--surface); border-left: 1px solid var(--border); }
#tela-maestro .aba { padding: var(--space-5); font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-maestro .h { margin: 0 0 var(--space-3); font: 600 17px/24px var(--font-sans); color: var(--fg); }
#tela-maestro .h2 { margin: var(--space-5) 0 var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-maestro .p { font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-maestro .vazio { font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-maestro .apr { border: 1px solid var(--border); border-left-width: 1px; border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface); box-shadow: var(--shadow-sm); }
#tela-maestro .apr .q { font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-maestro .apr .d, #tela-maestro .apr .canais, #tela-maestro .hist { font: 500 12px/18px var(--font-mono); color: var(--fg-subtle); }
#tela-maestro .apr button, #tela-maestro .lig { font: 600 13px/20px var(--font-sans); border-radius: var(--radius-md); border-color: var(--border-strong); color: var(--fg); }
#tela-maestro .apr button:hover { border-color: var(--fg); color: var(--fg); }
#tela-maestro pre.yaml, #tela-maestro pre.trecho { border-radius: var(--radius-md); }
#tela-maestro .hud { gap: var(--space-2); }
#tela-maestro .hud button { min-height: 32px; padding: 0 var(--space-3); font: 600 13px/20px var(--font-sans); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
#tela-maestro .hud button:hover { border-color: var(--fg); }
#tela-maestro .narrador { padding: var(--space-3) var(--space-4); background: var(--surface-inverse); color: var(--fg-inverse); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font: 400 14px/20px var(--font-sans); }
#tela-maestro .narrador .ev { font: 500 12px/20px var(--font-mono); color: var(--azul-300); }
#tela-maestro .narrador .ev::before { content: none; }
#tela-maestro .faixa-noturna { background: var(--surface-inverse); color: var(--fg-inverse); border-radius: var(--radius-sm); font: 500 12px/16px var(--font-sans); }
/* o palco claro nos neutros da v2; as familias de no pelos tons de cada pilar */
.palco.claro {
  --cv: var(--bg-subtle); --cvg: var(--slate-200); --node: var(--surface); --nchrome: var(--slate-25); --nline: var(--border); --nline2: var(--border-strong);
  --ntext: var(--fg-muted); --nfaint: var(--fg-subtle); --ntitulo: var(--fg); --ncromo: var(--fg-muted); --npreset: var(--fg-subtle); --nponto: var(--slate-300); --nperg: var(--fg); --nsombra: rgba(14,16,32,.20);
  --raia: rgba(14,16,32,.02); --raia-line: var(--border); --raia-cab: rgba(255,255,255,.92); --raia-ativa: var(--primary-subtle);
  --nota-bg: var(--tint-amarelo); --nota-line: var(--amarelo-200); --nota-cromo: var(--amarelo-100); --nota-t: var(--amarelo-800); --nota-tx: var(--amarelo-900);
  --canal-bg: var(--success-subtle); --canal-line: var(--slate-200); --canal-cromo: var(--success-subtle); --canal-t: var(--success-fg);
  --con-bg: var(--tech-subtle); --con-line: var(--azul-200); --con-cromo: var(--azul-100); --con-t: var(--tech-fg);
  --ent-bg: var(--primary-subtle); --ent-line: var(--vinho-200); --ent-cromo: var(--vinho-100); --ent-t: var(--primary-fg); --ent-tx: var(--vinho-900);
  --hud-bg: var(--surface); --hud-t: var(--fg); --rot: var(--fg-subtle);
  --l1: var(--chart-3); --l2: var(--chart-1); --l3: var(--success-fg); --l4: var(--vinho-500); --l5: var(--chart-2); --l6: var(--chart-6); --l7: var(--chart-4);
}
.palco:not(.claro) {
  --cv: var(--slate-950); --cvg: var(--slate-750); --node: var(--slate-850); --nchrome: var(--slate-800); --nline: var(--slate-750); --nline2: var(--slate-700);
  --ntext: var(--slate-200); --nfaint: var(--slate-400); --ntitulo: var(--slate-0); --ncromo: var(--slate-300); --npreset: var(--slate-400); --nponto: var(--slate-600); --nperg: var(--slate-50);
  --raia-line: var(--slate-750); --raia-cab: rgba(23,26,46,.85);
  --l1: var(--amarelo-300); --l2: var(--azul-400); --l3: var(--ext-verde); --l4: var(--vinho-400); --l5: var(--vinho-500); --l6: var(--slate-400); --l7: var(--ext-roxo);
}
.palco .etapa { border-radius: var(--radius-lg); }
.palco .etapa .cab { border-radius: var(--radius-lg) var(--radius-lg) 0 0; font: 600 14px/20px var(--font-sans); }
.palco .etapa .cab .num { border-radius: var(--radius-xs); padding: 0 6px; font: 600 12px/16px var(--font-sans); }
.palco .etapa.sel, .palco .no.sel { border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 24%, transparent); }
.palco .etapa.ativa, .palco .no.ativo { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.palco .no { border-radius: var(--radius-lg); }
.palco .no .cromo { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.palco .no .cromo b { font-family: var(--font-sans); font-weight: 600; }
.palco .no .cromo .papel { color: var(--primary-fg); }
.palco:not(.claro) .no .cromo .papel { color: var(--vinho-300); }
.palco .porta:hover, .palco .porta.alvo { border-color: var(--primary); background: var(--primary); }
.palco .no.entrada .acao button { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-md); font: 600 12px/16px var(--font-sans); }
.palco .etapa .portao { border-radius: var(--radius-md); }
.palco .etapa .portao.pendente { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--node)); }
.palco .etapa .portao button:hover, .palco .no.canal .msg button:hover { border-color: var(--primary); color: var(--primary-fg); }
.palco .no[data-status="running"] .estado i { background: var(--success-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-fg) 24%, transparent); }
.palco .no[data-status="provisioning"] .estado i { background: var(--warning-fg); }
.palco .no[data-status="failed"] .estado i { background: var(--danger-fg); }
.palco .no[data-status="waiting"] .estado i { background: var(--info-fg); }

/* --- Telas do cliente (#tela-servidor): login, MFA, convite, conta --- */
#tela-servidor {
  --page: var(--bg-subtle); --card: var(--surface); --sunken: var(--surface-sunken); --title: var(--fg); --body: var(--fg-muted); --muted: var(--fg-subtle);
  --accent: var(--primary); --link: var(--tech-fg); --focus: var(--focus-ring); --line: var(--border); --input: var(--border-strong); --error: var(--danger-fg);
  font: 400 14px/22px var(--font-sans); color: var(--fg-muted); background: var(--bg-subtle);
}
#tela-servidor main { padding: var(--space-8); }
#tela-servidor main > h1, #tela-servidor h1 { margin: 0 0 var(--space-4); font: 700 24px/32px var(--font-sans); letter-spacing: -.01em; color: var(--fg); background: transparent; border: 0; padding: 0; }
#tela-servidor main > h1 + p { margin: calc(-1 * var(--space-3)) 0 var(--space-6); padding: 0; background: transparent; border: 0; font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-servidor h2 { margin: 0 0 var(--space-3); font: 700 20px/28px var(--font-sans); letter-spacing: -.005em; color: var(--fg); }
#tela-servidor h3, #tela-servidor legend { margin: 0 0 var(--space-2); font: 600 17px/24px var(--font-sans); letter-spacing: 0; color: var(--fg); }
#tela-servidor p { font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
#tela-servidor .muted, #tela-servidor .hint { font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); }
#tela-servidor .card, #tela-servidor .item, #tela-servidor .project-files, #tela-servidor .workspace-context, #tela-servidor .project-summary, #tela-servidor .workspace-settings { background: var(--surface); background-image: none; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); }
#tela-servidor .card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
#tela-servidor .auth { max-width: 480px; margin: var(--space-12) auto; }
#tela-servidor button { min-height: 40px; padding: 0 var(--space-5); font: 600 14px/20px var(--font-sans); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-xs); transform: none; }
#tela-servidor button:hover { background: var(--surface); border-color: var(--fg); box-shadow: var(--shadow-xs); }
#tela-servidor button.primary { min-height: 40px; padding: 0 var(--space-5); background: var(--primary); border-color: transparent; color: var(--on-primary); box-shadow: var(--shadow-xs); }
#tela-servidor button.primary:hover { background: var(--primary-hover); border-color: transparent; box-shadow: var(--shadow-xs); }
#tela-servidor button.danger { color: var(--danger-fg); }
#tela-servidor button:disabled { opacity: .5; cursor: not-allowed; }
#tela-servidor .field { gap: 6px; font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-servidor input:not([type=checkbox]), #tela-servidor select, #tela-servidor textarea { min-height: 40px; padding: 9px var(--space-3); font: 400 15px/20px var(--font-sans); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
#tela-servidor input:not([type=checkbox]):hover, #tela-servidor select:hover, #tela-servidor textarea:hover { border-color: var(--fg-muted); }
#tela-servidor input:not([type=checkbox]):focus, #tela-servidor select:focus, #tela-servidor textarea:focus { border-color: var(--border-strong); box-shadow: none; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
#tela-servidor input[type=checkbox] { accent-color: var(--primary); }
#tela-servidor .badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: .02em; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--fg-muted); }
#tela-servidor .notice { padding: var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--info-subtle); color: var(--fg); font: 400 14px/22px var(--font-sans); }
#tela-servidor .notice.error, #tela-servidor .error { background: var(--danger-subtle); color: var(--danger-fg); border: 0; }
#tela-servidor .empty { padding: var(--space-8) var(--space-6); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--fg-muted); }
#tela-servidor .secret, #tela-servidor .digest { font: 400 13px/20px var(--font-mono); border-radius: var(--radius-md); background: var(--surface-sunken); border-color: var(--border); }
#tela-servidor fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); }
#tela-servidor dialog { border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); }
#tela-servidor dialog::backdrop { background: var(--overlay); }
/* No cliente, os botoes entram direto no cartao (ui.ts: c.append(button(...)); c.append(button(...))), sem espaco
   em branco entre eles: ficavam a 0 px. A v2 pede 8 px entre botoes e um respiro do texto de cima. */
#tela-servidor :is(.card, .item, .notice, .workspace-context) > :is(button, a.button) { margin: var(--space-2) var(--space-2) 0 0; }
/* O Modal da v2: o corpo em coluna com espaco, e o rodape numa linha a direita — Fechar (secundario) e a
   acao (primario). O Fechar e filho do <dialog>, depois do formulario (ui.ts, modal()): o formulario vira
   display:contents, e o botao dele e o Fechar dividem a ultima linha da grade (grid-auto-flow dense poe o
   Fechar no buraco a esquerda do botao). Sem isto os dois encostavam um embaixo do outro. */
#tela-servidor dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: row dense; gap: var(--space-4) var(--space-3); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
#tela-servidor dialog[open] > *, #tela-servidor dialog[open] > form > * { grid-column: 1 / -1; margin: 0; }
#tela-servidor dialog[open] > form { display: contents; }
#tela-servidor dialog[open] button { justify-self: start; }
#tela-servidor dialog[open] > form > button[type="submit"] { grid-column: 3; justify-self: end; }
#tela-servidor dialog[open] > button:last-child { grid-column: 2; justify-self: end; }
#tela-servidor dialog[open] > h2 { font: 700 20px/28px var(--font-sans); }
#tela-servidor details { border-top: 1px solid var(--border); }
#tela-servidor summary { font: 600 14px/20px var(--font-sans); color: var(--fg); }
#tela-servidor a { color: var(--link); }

/* --- A pagina da plataforma (/superadmin): o mesmo cliente, na casca da v2 ---
   Servida pelo shell do cliente (ui.ts, renderServerPage), sem o prototipo: o conteudo mora em #tela-servidor
   (as receitas acima) e a moldura e a SideNav navy do produto — o logo negativo e a overline (as regras de
   .lateral .marca acima), a navegacao da plataforma e quem esta conectado embaixo. Sem sessao a navegacao fica
   vazia e a lateral some: fica o cartao de entrada, como na pagina principal. */
#tela-servidor.plataforma { min-height: 100vh; }
#tela-servidor.plataforma .layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: none; min-height: 100vh; margin: 0; }
#tela-servidor.plataforma .layout:has(nav:empty) { display: block; }
#tela-servidor.plataforma .layout:has(nav:empty) > .lateral { display: none; }
#tela-servidor.plataforma .lateral { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: auto; }
#tela-servidor.plataforma .lateral nav { position: static; display: flex; flex-direction: column; align-self: stretch; gap: var(--space-1); min-height: 0; padding: 0; border: 0; background: transparent; }
#tela-servidor.plataforma .lateral nav button { position: relative; display: flex; align-items: center; width: 100%; min-height: 40px; margin: 0; padding: 10px var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; color: var(--nav-navy-fg); font: 600 14px/20px var(--font-sans); text-align: left; }
#tela-servidor.plataforma .lateral nav button:hover { border: 0; background: var(--nav-navy-hover); box-shadow: none; color: var(--nav-navy-fg-strong); }
#tela-servidor.plataforma .lateral nav button[aria-current="page"] { background: var(--nav-navy-active); color: var(--nav-navy-fg-strong); }
#tela-servidor.plataforma .lateral nav button[aria-current="page"]::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 4px; background: var(--nav-navy-indicator); transform: skewY(-43deg); }
#tela-servidor.plataforma .lateral .identity { margin-top: auto; padding: var(--space-4) var(--space-2) var(--space-5); border-top: 1px solid var(--nav-navy-border); border-left: 0; font: 400 12px/18px var(--font-sans); text-align: left; color: var(--nav-navy-muted); overflow-wrap: anywhere; }
/* O atalho "Ir para o conteudo", o primeiro Tab da pagina: fora da tela ate receber o foco, e entao um botao da v2
   (o anel de foco e o global). Sem isto ele aparecia com a regra antiga: Montserrat 15 px sublinhada, sem raio. */
body > a.skip { position: absolute; left: var(--space-4); top: -80px; z-index: 20; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); color: var(--fg); font: 600 14px/20px var(--font-sans); text-decoration: none; }
body > a.skip:focus { top: var(--space-4); }
@media (max-width: 760px) {
  #tela-servidor.plataforma .layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  #tela-servidor.plataforma .lateral { position: static; height: auto; padding: var(--space-4) var(--space-4) 0; }
  #tela-servidor.plataforma .lateral nav { flex-direction: row; flex-wrap: wrap; }
  #tela-servidor.plataforma .lateral nav button { width: auto; min-height: 44px; }
  #tela-servidor.plataforma .lateral .identity { margin-top: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-4); }
}

/* --- A pagina de erro da navegacao (ui-erro.ts): endereco que nao existe, link velho, servidor fora ---
   Um cartao so, no centro, com o logo em cor, a frase, o caminho de volta (o primario) e o codigo do pedido. */
body.erro-servidor { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: var(--space-6) var(--space-4); box-sizing: border-box; background: var(--bg-subtle); }
.erro-servidor .cartao-erro { width: min(480px, 100%); box-sizing: border-box; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.erro-servidor .cartao-erro img { display: block; width: 136px; height: auto; margin: 0 0 var(--space-6); }
.erro-servidor h1 { margin: 0 0 var(--space-2); font: 700 24px/32px var(--font-sans); letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.erro-servidor p { margin: 0 0 var(--space-6); font: 400 14px/22px var(--font-sans); color: var(--fg-muted); }
.erro-servidor .acao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); font: 600 14px/20px var(--font-sans); text-decoration: none; box-shadow: var(--shadow-xs); }
.erro-servidor .acao:hover { background: var(--primary-hover); }
.erro-servidor .codigo { margin: var(--space-6) 0 0; font: 400 12px/18px var(--font-sans); color: var(--fg-subtle); }
.erro-servidor .codigo code { font: 400 12px/18px var(--font-mono); overflow-wrap: anywhere; }
@media (max-width: 760px) { .erro-servidor .cartao-erro { padding: var(--space-6); } }

/* --- Sentence case: a frase comeca com maiuscula mesmo quando a tela a escreve minuscula ---
   Os titulos ja vem certos das telas; aqui e o texto corrido que vem de frases compostas (a dica, o vazio,
   a nota, o rotulo do numero, o cabecalho da tabela). ::first-letter so vale em bloco: o .d do cartao vira bloco. */
#tela-admin .admin-topo .sub::first-letter, #tela-admin .nota::first-letter, #tela-admin .vazio::first-letter, #tela-admin .m6-vazio::first-letter,
#tela-admin .m6-kpi .k::first-letter, #tela-admin .m6-kpi .d::first-letter, #tela-admin .m6-opcao small::first-letter, #tela-admin .m6-cartao .d::first-letter,
#tela-admin .m6-passo .t small::first-letter, #tela-admin .m6-significa p::first-letter, #tela-admin .falta::first-letter, #tela-admin .portao::first-letter,
#tela-admin table.tab th::first-letter { text-transform: uppercase; }
#tela-admin .m6-cartao .d { display: block; }

/* O cartao de projeto nao e numero: o nome sai no titulo do cartao, nunca na display do Stat. */
#tela-admin .cartao.projeto .v { font: 600 17px/24px var(--font-sans); letter-spacing: 0; overflow-wrap: anywhere; }

/* O selecionado (aria-pressed) e estado, nao acao: o desenho do cartao marcado da v2, nunca o vinho cheio do primario. */
#tela-admin .btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary-fg); box-shadow: inset 0 0 0 1px var(--primary); }

/* Botao em linha de texto (celula de tabela, o seletor de vista, a nota): o espaco em branco dava 4 px de
   lado e 0 quando quebrava a linha. Margem de 4 px completa os 8 da v2 nos dois sentidos. */
#tela-admin :is(td, .linha-k > span, .nota) > :is(.btn, a.btn) { margin: 4px 4px 4px 0; }
#tela-admin .linha-k { row-gap: var(--space-2); }
#tela-admin .chips { gap: var(--space-2); }

/* O botao so de icone (subir, descer) leva o nome para o leitor de tela, fora da vista. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Celular: alvo de toque de 44px, como o prototipo ja exigia --- */
@media (max-width: 760px) {
  #tela-admin .admin-topo { padding: var(--space-6) var(--space-4) 0; }
  #tela-admin .admin-corpo { padding: var(--space-5) var(--space-4) var(--space-20); gap: var(--space-6); }
  #tela-admin .btn, #tela-admin .btn.mini, #tela-admin .btn.primario, #tela-maestro .btn { min-height: 44px; }
  #tela-admin .m6-item { grid-template-columns: auto minmax(0, 1fr); padding: 12px var(--space-4); }
  #tela-admin .m6-item .fim { grid-column: 2; justify-self: start; }
  /* Botoes no fim do item ocupam a linha inteira: na segunda coluna, depois de uma hora longa ("trinta minutos"), um rotulo de
     169 px passava da lista e era cortado (Conectores, medido em 27/09). Texto no fim fica onde estava. */
  #tela-admin .m6-item .fim:has(.btn) { grid-column: 1 / -1; }
  /* O link do cabecalho da secao e texto (20 px); a area de toque chega a 44 px sem mudar o desenho, pela margem negativa. */
  #tela-admin .m6-secao > .h .btn { min-height: 44px; margin: -12px 0; }
  #tela-admin .subnav button { min-height: 44px; }
  #tela-admin .m6-passo { grid-template-columns: 28px minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  #tela-admin .m6-passo .fim { grid-column: 2; justify-self: start; }
  #tela-admin .m6-opcao { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  #tela-admin .m6-kpi .v { font-size: 32px; }
  #tela-admin .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), #tela-admin .campo select, #tela-admin .campo textarea { min-height: 44px; }
  #tela-admin input[type=checkbox] { width: 24px; height: 24px; }
  #tela-admin table.tab > tbody > tr { padding: var(--space-3) var(--space-4); }
  #tela-admin table.tab > tbody > tr > td[data-rot]::before { font: 600 12px/16px var(--font-sans); letter-spacing: .02em; text-transform: none; color: var(--fg-muted); }
  #tela-admin .linha-k { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  #tela-servidor main { padding: var(--space-5) var(--space-4); }
  /* As telas do cliente (entrada, MFA, conta, a pagina da plataforma) seguem o mesmo alvo: ficaram em 40 px ate 26/09. */
  #tela-servidor button, #tela-servidor button.primary, #tela-servidor input:not([type=checkbox]):not([type=radio]):not([type=file]), #tela-servidor select { min-height: 44px; }
  #tela-servidor input[type=checkbox] { width: 24px; height: 24px; }
}