:root{
  --type-micro: 10px; --type-xs: 11px; --type-sm: 13px; --type-md: 15px;
  --type-lg: 19px; --type-xl: 26px; --type-huge: 44px;
  --pad-1: 4px; --pad-2: 8px; --pad-3: 12px; --pad-4: 16px; --pad-5: 24px; --pad-6: 36px;
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 18px; --gap-5: 28px;
  --rule: 1px; --tap: 44px;

  /* RUBI & LATÃO */
  --bg: #f4efe5; --bg-deep: #e9e1d2; --surface: #fbf8f1; --surface-2: #f0e8d9;
  --ink: #17130e; --ink-soft: #6b6153; --ink-faint: #776d5c;
  --line: #c6b99f; --line-soft: #e2d9c7;
  --accent: #9a7a22; --brass: #9a7a22; --laca: #a3271b; --neutro: #5f574a;
  --on-accent: #fbf8f1;
}
*{ box-sizing: border-box; }
body{
  /* O fundo escuro era o palco do mockup. Em produção o app É a página. */
  margin:0; font-family:'Jost',system-ui,sans-serif; background:var(--bg); color:var(--ink);
  font-size: var(--type-md);
}
button{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============ SHELL ============ */
/*
 * O app ocupa a janela inteira.
 *
 * O arquivo de design fixava 1280×860 com borda e sombra — era a moldura que
 * exibia o app como um "dispositivo" sobre fundo escuro numa apresentação. Em
 * produção isso deixava uma tarja preta em volta e desperdiçava tela.
 */
.app{
  display: grid; grid-template-columns: 226px 1fr;
  width: 100%; height: 100dvh; margin: 0; background: var(--bg);
  overflow: hidden; position: relative;
}

/*
 * Abaixo de 900px o rail vira barra superior rolável e o conteúdo ocupa tudo.
 *
 * O arquivo de design NÃO tinha media query nenhuma: os 375px do princípio 12
 * eram simulados pela moldura de celular, que é ilustração, não comportamento.
 * Sem isto, a Fila num telefone de verdade teria 149px de largura útil — o rail
 * come 226 dos 375.
 */
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; }
  .rail{
    flex-direction: row; align-items: center; gap: var(--gap-3);
    border-right: none; border-bottom: var(--rule) solid var(--line);
    padding: var(--pad-2) var(--pad-3); overflow-x: auto;
  }
  .rail-mark{ flex: none; }
  .rail-mark .rule-double{ display: none; }
  .wordmark{ font-size: var(--type-sm); letter-spacing: .18em; white-space: nowrap; }
  .nav{ display: flex; flex-direction: row; gap: 4px; flex: 1 1 auto; overflow-x: auto; }
  .nav button{ white-space: nowrap; min-height: 44px; }  /* alvo de toque */
  .rail-foot{ display: none; }
}
.rail{
  background: var(--surface); border-right: var(--rule) solid var(--line);
  display: flex; flex-direction: column; padding: var(--pad-5) 0 var(--pad-3);
}
.rail-mark{ text-align:center; padding: 0 var(--pad-4); }
/*
 * A marca empilha em duas linhas.
 *
 * `PULSO` tinha 5 letras; `CONTROLA TUDO` tem 13. Com o entreletra original de
 * .42em o nome transbordava o rail — e reduzir o espaçamento até caber mataria
 * justamente o que dá o ar Déco. Empilhar é como marca dessa família resolve
 * nome longo, e mantém o entreletra generoso.
 */
.wordmark{
  font-family:'Poiret One',serif; font-size: var(--type-lg); letter-spacing:.30em;
  text-transform: uppercase; margin:0; padding-left:.30em; line-height:1.25;
}
.rule-double{
  display:block; height:5px; margin: var(--pad-3) auto; width: 100%;
  border-top: var(--rule) solid var(--line); border-bottom: var(--rule) solid var(--line); position: relative;
}
.rule-double::before{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  background: var(--accent); transform: translate(-50%,-50%) rotate(45deg);
}
.nav{ display:flex; flex-direction:column; margin-top: var(--pad-2); }
.nav button{
  display:flex; align-items:center; justify-content:space-between; gap: var(--gap-2);
  min-height: var(--tap); padding: var(--pad-2) var(--pad-4); background:transparent; border:0;
  border-left: 3px solid transparent; cursor:pointer; text-align:left;
  font-size: var(--type-sm); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav button:hover{ background: var(--surface-2); color: var(--ink); }
.nav button[aria-current="page"]{ background: var(--ink); color: #f7f2e7; border-left-color: var(--accent); }
.nav .pill{
  font-size: var(--type-micro); font-variant-numeric: tabular-nums; padding: 1px 6px;
  border: var(--rule) solid currentColor; opacity:.75;
}
.rail-foot{ margin-top:auto; padding: var(--pad-3) var(--pad-4) 0; border-top: var(--rule) solid var(--line-soft); }
.rail-foot .k{ font-size: var(--type-micro); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }
.rail-foot .v{ font-size: var(--type-sm); }
.dot{ display:inline-block; width:7px; height:7px; transform: rotate(45deg); background: var(--neutro); margin-right:5px; }
.dot.ok{ background: #2f7a55; } .dot.bad{ background: var(--laca); }

.main{ overflow: auto; position: relative; }
.screen{ display:none; padding: var(--pad-5) var(--pad-6) var(--pad-6); }
.screen.on{ display:block; animation: fadeUp 240ms ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.head{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--gap-4); margin-bottom: var(--pad-3); }
.head h2{
  font-family:'Poiret One',serif; font-size: var(--type-xl); letter-spacing:.24em;
  text-transform:uppercase; margin:0; line-height:1;
}
.head p{ margin: 6px 0 0; font-size: var(--type-sm); color: var(--ink-soft); max-width: 62ch; }

/* ============ CONTROLES ============ */
.btn{
  min-height: 38px; padding: 0 var(--pad-4); background: transparent; border: var(--rule) solid var(--line);
  cursor:pointer; font-size: var(--type-sm); letter-spacing:.1em; text-transform:uppercase;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover{ background: var(--surface-2); }
.btn:active{ transform: translateY(1px); }
.btn.primary{ background: var(--ink); color:#f7f2e7; border-color: var(--ink); }
.btn.primary:hover{ background:#2b241b; }
.btn.danger{ border-color: var(--laca); color: var(--laca); }
.btn.danger:hover{ background: var(--laca); color: var(--on-accent); }
.btn.small{ min-height: 30px; padding: 0 var(--pad-3); font-size: var(--type-xs); }

.field{ display:flex; flex-direction:column; gap: var(--gap-1); }
.field label{ font-size: var(--type-micro); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }
.field input, .field select, .field textarea{
  font: inherit; font-size: var(--type-sm); padding: var(--pad-2) var(--pad-3);
  background: var(--surface); border: var(--rule) solid var(--line); color: var(--ink); min-height: 38px;
}
.field textarea{ min-height: 74px; resize: vertical; }
.field .err{ font-size: var(--type-xs); color: var(--laca); min-height: 15px; }
.field.invalid input, .field.invalid select{ border-color: var(--laca); background: #fdf3f1; }

.tag{
  font-size: var(--type-micro); letter-spacing:.1em; text-transform:uppercase; padding: 2px 6px;
  border: var(--rule) solid var(--line); color: var(--ink-soft); white-space: nowrap;
}
.tag.is-origin{ border-color: var(--accent); color: var(--accent); }
.tag.is-origin.is-unknown{ border-style: dashed; color: var(--ink-faint); border-color: var(--ink-faint); }
.tag.is-stage{ background: var(--surface-2); border-color: transparent; }

.tone-neutro{ --tone: var(--neutro); } .tone-brass{ --tone: var(--brass); } .tone-laca{ --tone: var(--laca); }
.ziggurat{ display:flex; align-items:flex-end; gap:2px; height:18px; }
.ziggurat i{ display:block; width:5px; background: var(--line); }
.ziggurat i:nth-child(1){height:5px} .ziggurat i:nth-child(2){height:8px} .ziggurat i:nth-child(3){height:11px}
.ziggurat i:nth-child(4){height:14px} .ziggurat i:nth-child(5){height:18px}
.ziggurat i.on{ background: var(--tone); }

/* ============ FILA (celular) ============ */
/*
 * A Fila continua desenhada primeiro para 375px (princípio 12) — mas deixou de
 * fingir ser uma captura de celular. Sem a moldura escura e sem altura fixa:
 * ela cresce até o limite de leitura confortável e ocupa a altura disponível.
 */
.phone-wrap{ display:flex; gap: var(--gap-5); align-items:stretch; min-height:0; height:100%; }
.phone{
  width:100%; max-width:520px; flex:1 1 auto; min-height:0;
  border: var(--rule) solid var(--line);
}
.phone-screen{
  width:100%; height:100%; overflow:hidden; background: var(--bg);
  display:flex; flex-direction:column;
}
.statusbar{
  height:40px; flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 var(--pad-5) var(--pad-1); font-size: var(--type-xs); font-weight:500; font-variant-numeric: tabular-nums;
}
.phone-head{ flex:none; padding: var(--pad-2) var(--pad-4) 0; text-align:center; }
.phone-head .wordmark{ font-size: var(--type-lg); }
.tabs{ flex:none; display:grid; grid-template-columns:1fr 1fr; border: var(--rule) solid var(--line); margin: 0 var(--pad-4); }
.tab{
  font-size: var(--type-micro); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  min-height: var(--tap); background:transparent; border:0; cursor:pointer; color: var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition: background 180ms ease, color 180ms ease;
}
.tab + .tab{ border-left: var(--rule) solid var(--line); }
.tab[aria-selected="true"]{ background: var(--ink); color:#f7f2e7; }
.tab-count{ font-size: var(--type-sm); font-weight:600; font-variant-numeric: tabular-nums; }
.qlist{ flex:1 1 auto; overflow-y:auto; padding: var(--pad-3) var(--pad-4) var(--pad-4); display:flex; flex-direction:column; }
.qlist::-webkit-scrollbar{ width:0 }
.qrow{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"who timer" "tags timer";
  gap: var(--gap-1) var(--gap-3); align-items:start; padding: var(--pad-3) 0;
  border-bottom: var(--rule) solid var(--line-soft); background:transparent; border-left:0; border-right:0; border-top:0;
  text-align:left; width:100%; cursor:pointer; transition: background 160ms ease;
  animation: fadeUp 240ms ease both;
}
.qrow:hover{ background: var(--surface); }
.qrow.late{ padding-left: var(--pad-3); box-shadow: inset 3px 0 0 var(--laca); }
.qname{ grid-area:who; font-size: var(--type-md); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qtags{ grid-area:tags; display:flex; flex-wrap:wrap; gap: var(--gap-1); }
.qtimer{ grid-area:timer; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.qtimer b{ font-size: var(--type-xl); font-weight:400; line-height:.9; font-variant-numeric: tabular-nums; color: var(--tone); }
.qtimer b span{ font-size: var(--type-xs); color: var(--ink-soft); margin-left:1px; }
.phone-foot{
  flex:none; border-top: var(--rule) solid var(--line); padding: var(--pad-3) var(--pad-4);
  display:flex; justify-content:space-between; background: var(--surface);
}
.fs{ display:flex; flex-direction:column; }
.fs .k{ font-size: var(--type-micro); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }
.fs .v{ font-size: var(--type-sm); font-weight:500; font-variant-numeric: tabular-nums; }
.fs .v.warn{ color: var(--laca); }

/* estado vazio */
.empty{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--gap-3); padding: var(--pad-6) var(--pad-5); text-align:center; }
.empty-mark{ width:34px; height:34px; border: var(--rule) solid var(--accent); transform: rotate(45deg); }
.empty h3{ font-family:'Poiret One',serif; font-size: var(--type-lg); letter-spacing:.18em; text-transform:uppercase; margin:0; }
.empty p{ font-size: var(--type-sm); color: var(--ink-soft); margin:0; line-height:1.6; max-width: 34ch; }

.aside{ flex:1; min-width:0; }
.note-card{ border: var(--rule) solid var(--line); background: var(--surface); padding: var(--pad-4); }
.note-card h4{ margin:0 0 var(--pad-2); font-size: var(--type-sm); letter-spacing:.14em; text-transform:uppercase; }
.note-card p{ margin:0 0 var(--pad-2); font-size: var(--type-sm); color: var(--ink-soft); line-height:1.6; }
.note-card p:last-child{ margin-bottom:0; }

/* ============ PAINEL (kanban) ============ */
.filters{ display:flex; gap: var(--gap-2); flex-wrap:wrap; margin-bottom: var(--pad-4); }
.filters select{ font: inherit; font-size: var(--type-sm); padding: var(--pad-2) var(--pad-3); background: var(--surface); border: var(--rule) solid var(--line); min-height:38px; }
.board{ display:flex; gap: var(--gap-3); overflow-x:auto; padding-bottom: var(--pad-4); }
.col{ flex: 0 0 208px; border: var(--rule) solid var(--line); background: var(--surface); display:flex; flex-direction:column; max-height: 560px; }
.col-head{ padding: var(--pad-2) var(--pad-3); border-bottom: var(--rule) solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap: var(--gap-2); }
.col-head b{ font-size: var(--type-micro); letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
.col-head i{ font-style:normal; font-size: var(--type-sm); font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.col.terminal .col-head{ background: var(--surface-2); }
.col-body{ padding: var(--pad-2); display:flex; flex-direction:column; gap: var(--gap-2); overflow-y:auto; }
.card{
  border: var(--rule) solid var(--line-soft); background: var(--bg); padding: var(--pad-2) var(--pad-3);
  cursor:pointer; text-align:left; width:100%; display:flex; flex-direction:column; gap:5px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.card:hover{ border-color: var(--accent); transform: translateX(2px); }
.card b{ font-size: var(--type-sm); font-weight:500; }
.card .ct{ display:flex; flex-wrap:wrap; gap:3px; }
.col-empty{ font-size: var(--type-xs); color: var(--ink-faint); padding: var(--pad-3); text-align:center; }

/* ============ FICHA ============ */
.ficha{ display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap-5); align-items:start; }
.thread{ border: var(--rule) solid var(--line); background: var(--surface); max-height: 600px; overflow-y:auto; padding: var(--pad-4); display:flex; flex-direction:column; gap: var(--gap-3); }
.msg{ max-width: 82%; padding: var(--pad-2) var(--pad-3); border: var(--rule) solid var(--line-soft); font-size: var(--type-sm); line-height:1.55; }
.msg .who{ display:block; font-size: var(--type-micro); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:3px; }
.msg.lead{ align-self:flex-start; background: var(--bg); }
.msg.ia{ align-self:flex-end; background: var(--surface-2); border-color: var(--accent); }
.msg.humano{ align-self:flex-end; background: var(--ink); color:#f7f2e7; border-color: var(--ink); }
.msg.humano .who{ color:#bfae8a; }
.msg.audio{ display:flex; align-items:center; gap: var(--gap-2); }
.msg .transcricao{ font-style: italic; color: var(--ink-soft); }
.timeline{ border: var(--rule) solid var(--line); background: var(--surface); padding: var(--pad-4); }
.timeline h4, .actions h4{ margin:0 0 var(--pad-3); font-size: var(--type-sm); letter-spacing:.14em; text-transform:uppercase; }
.tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.tl li{ display:grid; grid-template-columns: 62px 1fr; gap: var(--gap-2); padding: var(--pad-2) 0; border-bottom: var(--rule) solid var(--line-soft); font-size: var(--type-sm); }
.tl li:last-child{ border-bottom:0 }
.tl time{ font-size: var(--type-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tl em{ font-style:normal; color: var(--ink-soft); font-size: var(--type-xs); display:block; }
.actions{ border: var(--rule) solid var(--line); background: var(--surface); padding: var(--pad-4); margin-top: var(--gap-3); }
.actions .grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap-2); }
.ident{ display:flex; flex-wrap:wrap; gap: var(--gap-2); align-items:center; margin-bottom: var(--pad-3); }

/* ============ AUDITORIA ============ */
.audit-row{ border: var(--rule) solid var(--line); background: var(--surface); padding: var(--pad-3) var(--pad-4); margin-bottom: var(--gap-2); display:grid; grid-template-columns: 1fr auto; gap: var(--gap-3); align-items:center; }
.audit-row .ctx{ font-size: var(--type-sm); color: var(--ink-soft); margin:0 0 6px; }
.audit-row .resp{ font-size: var(--type-sm); margin:0; }
.audit-row .meta{ font-size: var(--type-micro); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-top:6px; }
.judge{ display:flex; gap: var(--gap-1); }
.judge button{ width:40px; height:40px; border: var(--rule) solid var(--line); background:transparent; cursor:pointer; font-size:15px; transition: background 160ms ease, border-color 160ms ease; }
.judge button:hover{ background: var(--surface-2); }
.judge button[aria-pressed="true"].ok{ background:#2f7a55; border-color:#2f7a55; color:#fff; }
.judge button[aria-pressed="true"].no{ background: var(--laca); border-color: var(--laca); color:#fff; }

/* ============ TABELAS ============ */
table{ width:100%; border-collapse: collapse; background: var(--surface); border: var(--rule) solid var(--line); }
th, td{ text-align:left; padding: var(--pad-2) var(--pad-3); border-bottom: var(--rule) solid var(--line-soft); font-size: var(--type-sm); }
th{ font-size: var(--type-micro); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); font-weight:500; }
tr:last-child td{ border-bottom:0 }
td.num, th.num{ text-align:right; font-variant-numeric: tabular-nums; }
.off td{ color: var(--ink-faint); }

/* ============ NÚMEROS ============ */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-3); margin-bottom: var(--gap-4); }
.stat{ border: var(--rule) solid var(--line); background: var(--surface); padding: var(--pad-4); }
.stat .k{ font-size: var(--type-micro); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }
.stat .v{ font-size: var(--type-huge); font-weight:300; line-height:1.05; font-variant-numeric: tabular-nums; margin-top:6px; }
.stat .v small{ font-size: var(--type-sm); color: var(--ink-soft); }
.two{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap-4); align-items:start; }
.barline{ display:grid; grid-template-columns: 150px 1fr 54px; gap: var(--gap-2); align-items:center; font-size: var(--type-sm); padding: 5px 0; }
.barline .track{ display:block; height:12px; background: var(--surface-2); }
.barline .fill{ display:block; height:100%; background: var(--accent); transition: width 420ms ease; }
.barline .fill.alt{ background: var(--neutro); }
.barline .n{ text-align:right; font-variant-numeric: tabular-nums; }
.skel{ background: linear-gradient(90deg,var(--surface-2) 25%,var(--bg) 50%,var(--surface-2) 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }
.skel-line{ height:12px; margin:8px 0; }
.skel-big{ height:44px; margin-top:6px; }

/* ============ CONFIG ============ */
.panel{ border: var(--rule) solid var(--line); background: var(--surface); padding: var(--pad-4); margin-bottom: var(--gap-3); }
.panel h4{ margin:0 0 var(--pad-3); font-size: var(--type-sm); letter-spacing:.14em; text-transform:uppercase; }
.cad{ display:grid; grid-template-columns: 190px repeat(3, 92px); gap: var(--gap-2); align-items:end; justify-content:start; margin-bottom: var(--gap-2); }
.cad > span{ font-size: var(--type-sm); }
.banner{ display:flex; align-items:center; justify-content:space-between; gap: var(--gap-3); padding: var(--pad-3) var(--pad-4); border: var(--rule) solid var(--line); background: var(--surface-2); font-size: var(--type-sm); }
.banner.bad{ border-color: var(--laca); background:#fdf3f1; color: var(--laca); }
.banner.ok{ border-color:#2f7a55; background:#f1f7f3; color:#22684a; }

/* ============ DIÁLOGO + TOAST ============ */
.scrim{ position:absolute; inset:0; background: rgba(20,15,10,.55); display:none; align-items:center; justify-content:center; z-index:20; }
.scrim.on{ display:flex; animation: fadeUp 180ms ease both; }
.dialog{ width: 420px; background: var(--surface); border: var(--rule) solid var(--ink); padding: var(--pad-5); }
.dialog h3{ font-family:'Poiret One',serif; font-size: var(--type-lg); letter-spacing:.18em; text-transform:uppercase; margin:0 0 var(--pad-2); }
.dialog > p{ font-size: var(--type-sm); color: var(--ink-soft); margin:0 0 var(--pad-4); line-height:1.6; }
.dialog .row{ display:flex; gap: var(--gap-2); justify-content:flex-end; margin-top: var(--pad-4); }
.toast{
  position:absolute; left:50%; bottom: 26px; transform: translate(-50%, 20px); opacity:0; pointer-events:none;
  background: var(--ink); color:#f7f2e7; padding: var(--pad-3) var(--pad-5); font-size: var(--type-sm);
  border-left: 3px solid var(--accent); z-index:30; transition: opacity 220ms ease, transform 220ms ease;
}
.toast.on{ opacity:1; transform: translate(-50%,0); }
.hidden{ display:none !important; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }