/* Visual do HF OS, copiado de docs/prototipo_referencia.html.
   As familias de fonte do prototipo (Source Serif 4, IBM Plex) ficam como
   primeira escolha, mas a folha nao busca nada na internet: as alternativas do
   sistema entram no lugar quando as fontes nao estiverem instaladas, e assim a
   plataforma abre igual sem conexao.

   O prototipo monta o menu lateral com <button>; aqui o menu e feito de links
   <a>, porque cada tela tem endereco proprio e o HTML e gerado no servidor. Por
   isso as regras da lateral valem para os dois. */
:root{
  --bg:#F2F4F7; --surface:#FFFFFF; --ink:#16202B; --muted:#5F6E7D; --line:#DCE2E9;
  --brand:#1F4E79; --brand-ink:#163A5B; --ai:#EEF3FA; --ai-line:#C9D8EA;
  --ok:#2E7D5B; --ok-bg:#E6F2EC; --warn:#B7791F; --warn-bg:#FBF1DC; --late:#B3261E; --late-bg:#FBE7E5;
  --chip:#EEF1F4; --radius:10px;
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
a{color:var(--brand)}
h1,h2,h3,h4{margin:0;font-weight:600}

/* top bar */
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.wordmark{font-family:var(--font-display);font-size:22px;letter-spacing:.01em;color:var(--brand-ink)}
.module{font-weight:500}
.tag{font-family:var(--font-mono);font-size:11px;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:2px 8px;white-space:nowrap}
.viewer{display:flex;align-items:center;gap:10px}
.viewer label{color:var(--muted);font-size:13px}
.viewer select{border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--surface)}
.clock{font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}

/* frame */
.app{display:grid;grid-template-columns:208px 1fr;min-height:calc(100% - 56px)}
/* Entrar e trocar senha nao tem barra lateral, e por isso nao podem herdar a
   coluna dela: sem a <nav class="rail">, o <main> vira o PRIMEIRO item do grid
   e cai nos 208px reservados ao menu. A caixa pedia 420px e nunca os alcancava.
   Sao as duas unicas telas que se veem antes de entrar — a porta da frente. */
.app-publico{grid-template-columns:1fr}
.rail{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.rail button,.rail a{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--ink);text-decoration:none}
.rail button:hover,.rail a:hover{background:var(--chip)}
.rail button.on,.rail a.on{background:var(--ai);color:var(--brand-ink);font-weight:600}
.rail .badge{font-family:var(--font-mono);font-size:11px;background:var(--chip);border-radius:999px;padding:1px 7px;color:var(--muted)}
.rail .badge.late{background:var(--late-bg);color:var(--late)}
.rail .foot{margin-top:auto;font-size:12px;color:var(--muted);padding:8px 12px;line-height:1.6;display:block}
.rail .foot b{color:var(--ink)}
main{padding:22px 24px 40px;min-width:0}
.screen-title{font-family:var(--font-display);font-size:26px;color:var(--brand-ink);letter-spacing:.005em}
.screen-sub{color:var(--muted);margin:4px 0 16px;max-width:900px}
.note{background:var(--ai);border:1px solid var(--ai-line);border-radius:var(--radius);padding:10px 14px;margin:0 0 16px;font-size:13px}
.note b{color:var(--brand-ink)}

/* queue */
.fila-layout{display:grid;grid-template-columns:minmax(380px,460px) 1fr;gap:18px;align-items:start}
.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px;font-size:13px}
.filters select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--surface)}
.filters label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:1fr 128px;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 10px;cursor:pointer;text-align:left;width:100%}
.row:hover{border-color:#B9C6D4}
.row.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--ai)}
.row-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px}
.who{font-weight:600}
.ctype,.chan{font-size:11px;color:var(--muted)}
.chan::before{content:"·";margin-right:6px}
.resumo{margin:0 0 6px;color:#2C3A48;font-size:13px}
.row-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.cat{font-size:11px;font-weight:500;border-radius:999px;padding:2px 8px;background:var(--chip);color:#2C3A48}
.cat-lead{background:#E7EEF7;color:var(--brand-ink)}
.cat-reclamacao{background:var(--late-bg);color:var(--late)}
.cat-fato{background:var(--warn-bg);color:#7A5210}
.cat-ruido{background:#F0F0F0;color:#8A8A8A}
.cat-parte{background:#F1E9F7;color:#5B3A7A}
.urg{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.urg-alta{color:var(--late)}.urg-media{color:var(--warn)}

/* SLA — elemento-assinatura */
.sla{display:flex;flex-direction:column;justify-content:center;gap:3px;padding-left:10px;border-left:1px solid var(--line)}
.sla-label{font-size:11px;color:var(--muted)}
.sla-val{font-family:var(--font-mono);font-size:14px;font-weight:500}
.sla .bar{height:4px;background:var(--chip);border-radius:2px;overflow:hidden;margin-top:2px}
.sla .bar i{display:block;height:100%;background:var(--ok);width:0}
.sla-ok .sla-val{color:var(--ok)}
.sla-warn .sla-val{color:var(--warn)}.sla-warn .bar i{background:var(--warn)}
.sla-late .sla-val{color:var(--late)}.sla-late .bar i{background:var(--late);width:100%}
.sla-done .sla-val{color:var(--ok)}.sla-done .bar i{background:var(--ok);width:100%}
.sla-latedone .sla-val{color:var(--late)}.sla-latedone .bar i{background:var(--late);width:100%}
.sla-none .sla-val{color:var(--muted)}

/* detail */
.detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.detail-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.detail-head h2{font-family:var(--font-display);font-size:22px;color:var(--brand-ink)}
.detail-head .id{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.status{font-size:12px;font-weight:500;border-radius:999px;padding:3px 10px;background:var(--chip)}
.status-aberta{background:var(--ai);color:var(--brand-ink)}
.status-aprovacao{background:var(--warn-bg);color:#7A5210}
.status-respondida{background:var(--ok-bg);color:var(--ok)}
.status-encerrada{background:#F0F0F0;color:#6B6B6B}
/* Prazo estourado, envio que falhou, conta bloqueada. Faltava, e o selo mais
   grave da plataforma saia sem cor nenhuma — igual a "encerrada". */
.status-estourado{background:var(--late-bg);color:var(--late)}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px;font-size:13px;margin-bottom:16px}
.dl div span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.masked{font-family:var(--font-mono);letter-spacing:.04em}
.lock{font-size:11px;color:var(--muted);margin-left:6px}
.cols{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.conv{display:flex;flex-direction:column;gap:8px}
.conv h3,.side h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
/* white-space:pre-wrap preserva as quebras de linha das mensagens: o assistente
   escreve listas ("1) nome completo") e sem isso tudo sai emendado. */
.msg{max-width:92%;padding:9px 12px;border-radius:12px;font-size:13.5px;position:relative;white-space:pre-wrap}
.msg .meta{display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:4px}
.msg-cliente{background:#EEF1F4;align-self:flex-start;border-bottom-left-radius:3px}
.msg-equipe{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.msg-equipe .meta{color:#C9D8EA}
.msg-ia{background:var(--surface);border:1px dashed var(--ai-line);align-self:flex-end;border-bottom-right-radius:3px}
.msg-ia .auto{font-family:var(--font-mono);font-size:10.5px;color:var(--brand);display:block;margin-bottom:2px}
.msg-interno{background:var(--warn-bg);border:1px dashed #E5C98F;align-self:center;max-width:100%;font-size:12.5px;color:#5B3D0A}
.quote{border-left:3px solid #B9C6D4;padding:4px 8px;margin:0 0 6px;color:var(--muted);font-size:12.5px;background:#F7F8FA}
.side{display:flex;flex-direction:column;gap:14px}
.ai-panel{background:var(--ai);border:1px solid var(--ai-line);border-radius:var(--radius);padding:12px 14px}
.ai-panel h4{font-size:13px;color:var(--brand-ink);display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kv{display:grid;grid-template-columns:118px 1fr;gap:4px 10px;font-size:13px}
.kv b{color:var(--muted);font-weight:500;font-size:12px}
.conf{display:flex;align-items:center;gap:8px}
.conf i{display:block;height:6px;width:120px;background:#fff;border:1px solid var(--ai-line);border-radius:3px;overflow:hidden}
.conf i b{display:block;height:100%;background:var(--brand)}
.ai-foot{font-family:var(--font-mono);font-size:11px;color:var(--muted);border-top:1px solid var(--ai-line);margin-top:10px;padding-top:8px}
.fonte{background:#fff;border:1px solid var(--ai-line);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-top:8px}
.fonte b{color:var(--brand-ink)}
.draft{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.draft textarea{width:100%;min-height:130px;border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical;line-height:1.45;font-size:13.5px}
.draft textarea[disabled]{background:#F7F8FA;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:500;font-size:13px}
.btn:hover{background:var(--chip)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-danger{color:var(--late);border-color:#E9B8B4}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.action-box{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.action-box h4{font-size:13px;margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);flex:1;min-width:140px}
.field select,.field input{border:1px solid var(--line);border-radius:8px;padding:7px 8px;background:var(--surface);color:var(--ink);font-size:13px}
.fields{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.trail{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.trail ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.trail li{display:grid;grid-template-columns:96px 1fr;gap:10px}
.trail li span{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.back{display:none;margin-bottom:10px}
.empty{color:var(--muted);padding:40px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius)}

/* dashboard */
.hero{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:18px;align-items:stretch;margin-bottom:18px}
.hero-num{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.hero-num .big{font-family:var(--font-display);font-size:64px;line-height:1;color:var(--brand-ink)}
.hero-num .big small{font-size:28px}
.hero-num p{margin:6px 0 0;color:var(--muted);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi .num{font-family:var(--font-mono);font-size:24px;font-weight:500}
.kpi .num.late{color:var(--late)}.kpi .num.ok{color:var(--ok)}
.kpi p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.barrow{display:grid;grid-template-columns:150px 1fr 34px;gap:10px;align-items:center;font-size:13px;margin-bottom:6px}
.barrow .track{height:10px;background:var(--chip);border-radius:5px;overflow:hidden}
.barrow .track i{display:block;height:100%;background:var(--brand)}
.barrow em{font-family:var(--font-mono);font-style:normal;font-size:12px;text-align:right}
.late-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.late-list li{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13px;padding:8px 10px;border-radius:8px;background:var(--late-bg);cursor:pointer}
.late-list li em{font-family:var(--font-mono);font-style:normal;color:var(--late);font-size:12px;white-space:nowrap}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13px}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.tbl th{background:#F7F9FB;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl input,.tbl select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--surface);width:100%}
.tbl input[disabled],.tbl select[disabled]{background:#F7F8FA;color:var(--muted)}
.tbl .mono{font-family:var(--font-mono);font-size:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.proto{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.proto h3{font-size:14px;margin-bottom:8px}
.proto ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.proto.no h3{color:var(--late)}
.proto.yes h3{color:var(--ok)}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .rail{flex-direction:row;overflow-x:auto;padding:8px;gap:6px;border-right:0;border-bottom:1px solid var(--line)}
  .rail .foot{display:none}
  .fila-layout,.cols,.panels,.hero,.two{grid-template-columns:1fr}
  .fila-layout.has-sel .list,.fila-layout.has-sel .filters{display:none}
  .fila-layout.has-sel .back{display:inline-flex}
  .topbar{height:auto;flex-wrap:wrap;padding:10px 14px}
  main{padding:14px}
  .hero-num .big{font-size:48px}
}

/* lista de etapas da pagina inicial — nao existe no prototipo */
.etapas{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;max-width:900px}
.etapas li{display:grid;grid-template-columns:96px 1fr;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px}
.etapas li span{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.etapas li.feita span{color:var(--ok)}

/* formularios das telas geradas no servidor */
.filters form{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.acoes-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.aviso{background:var(--ok-bg);border:1px solid #BFDCCB;border-radius:var(--radius);padding:10px 14px;margin:0 0 16px;font-size:13px;color:#1F5B41}
.erro{background:var(--late-bg);border:1px solid #E9B8B4;border-radius:var(--radius);padding:10px 14px;margin:0 0 16px;font-size:13px;color:var(--late)}
.row-link{color:inherit;text-decoration:none;display:block;min-width:0}
.row-link:hover .who{text-decoration:underline}
.trail li b{font-weight:600}

/* Erro de preenchimento: a mensagem mora ao lado do campo, e nao no topo da
   tela. Numa lista de seis tarefas, uma frase no topo nao diz de qual delas
   ela fala. */
.erro-campo{margin:4px 0 0;font-size:12px;color:var(--late);font-weight:500}
.campo-reprovado{border-color:var(--late) !important;background:var(--late-bg)}

/* A faixa da simulacao (DEC-046 passo D). Permanente, e impossivel de ignorar:
   quem esquece que esta simulando le a fila de outra pessoa e conclui coisas
   erradas sobre o proprio trabalho. */
.faixa-simulacao {
  background: #7A2E2E;
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
.faixa-simulacao .btn { background: #fff; color: #7A2E2E; border-color: #fff; }