/* CaseFlow: shared presentation layer. Existing component and permission hooks
   remain in styles.css and app.js; this file owns the common visual language. */
:root {
  --bg: #f6f7f9;
  --bg2: #eef1f5;
  --surface: #fff;
  --surface-solid: #fff;
  --text: #172539;
  --muted: #5b697b;
  --line: #e2e7ed;
  --line-strong: #c4cdd9;
  --primary: #234f82;
  --primary2: #234f82;
  --accent: #217568;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(23,37,57,.03);
  --shadow-strong: 0 12px 36px rgba(23,37,57,.14);
}
html, body { background: var(--bg); }
body { font-size: 14px; line-height: 1.5; background-image: none; }
button, input, select, textarea { font-family: inherit; }
button, .btn, label, strong { font-weight: 600; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #4787cb;
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.btn { border-radius: 6px; font-weight: 600; box-shadow: none; transition: background .15s, border-color .15s; }
.btn:hover { transform: none; }
.btn.primary, .btn.ghost.active { background: var(--primary); box-shadow: none; }
.btn.primary:hover { background: #1b416d; }
.btn.small { border-radius: 5px; font-size: 12px; }
.btn.subtle { background: #f1f4f7; color: #34445a; }
input, select, textarea { border-radius: 6px; box-shadow: none; font-weight: 400; }
input::placeholder, textarea::placeholder { color: #697789; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; backdrop-filter: none; box-shadow: none; }
.panel-head { gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.panel-head h2, .panel-head-summary h2 { font-size: 18px; letter-spacing: -.02em; }
.panel-head p { font-size: 13px; line-height: 1.5; max-width: 72ch; }
.badge { border-radius: 4px; font-weight: 500; font-size: 11.5px; }
.badge.gray { background: #f0f3f7; color: #475569; border-color: #e2e7ed; }
.empty-state { border-radius: 6px; background: #f8fafc; color: var(--muted); line-height: 1.6; }
.notice { background: #fff9ed; border: 1px solid #eadbbd; border-radius: 6px; box-shadow: none; }
.form-grid { gap: 18px; }
.form-actions { gap: 10px; }
.form-section-title { font-size: 15px; }
.view.active { animation: none; }
table th { font-weight: 600; }
dialog { border-radius: 10px; max-width: min(960px, calc(100vw - 28px)); }
dialog::backdrop { background: rgba(15,28,44,.45); backdrop-filter: blur(2px); }
.dialog-card { padding: 24px; }
.prompt-preview, .artifact-section, .evidence-card, .task-card, .agent-card { border-radius: 8px; box-shadow: none; }
/* Cartão de documento: a linha de ações tinha flex-shrink: 0 e, com dez botões,
   empurrava o cartão para trás do painel ao lado; e palavra comprida (hash,
   número de processo colado no texto) não quebrava. Agora as ações quebram
   linha dentro do cartão e o cartão nunca passa da coluna. */
.cards > * { min-width: 0; }
.evidence-card { min-width: 0; overflow-wrap: anywhere; }
.evidence-card header { flex-wrap: wrap; }
.evidence-card header > div:first-child { flex: 1 1 240px; min-width: 0; }
.evidence-card header > .card-actions { flex: 0 1 auto; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; row-gap: 6px; }
.evidence-card .card-actions .modo-do-modelo { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.evidence-card .card-actions .modo-do-modelo select { max-width: 260px; }
.markdown-body, .markdown-body p { line-height: 1.65; }

/* Office navigation stays separate from the active case. */
#app-shell { grid-template-columns: 216px minmax(0, 1fr); }
.sidebar { background: #15283e; padding: 26px 16px 18px; gap: 24px; border: 0; box-shadow: none; }
.brand { border: 0; gap: 11px; padding: 0 7px 9px; }
.brand strong { font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
.brand span { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.brand-mark, .brand-mark.large { filter: none; }
.brand-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: #2457e6; }
.brand-mark.large { width: 60px; height: 60px; border-radius: 15px; }
.brand-signature { display: block; width: 100%; height: 76px; object-fit: cover; }
.sidebar .brand { padding: 0; }
.brand-emblem { width: 40px; height: 40px; flex-shrink: 0; border-radius: 3px; }
.brand .brand-lettering strong { font-family: Georgia, 'Times New Roman', serif; font-size: 23px; font-weight: 400; letter-spacing: -.055em; color: #f6f2e9; }
.brand .brand-lettering span { font-size: 9px; letter-spacing: .27em; color: #deded7; margin-top: 5px; }
.auth-brand { background: #101f30; border-radius: 8px; overflow: hidden; }
.auth-brand .brand-signature { height: 112px; }
.nav { gap: 4px; }
.nav button { font-weight: 500; font-size: 13px; border-radius: 6px; padding: 10px 12px; min-height: 40px; }
.nav button:hover { transform: none; background: #ffffff0c; }
.nav button.active { background: #ffffff16; border-color: transparent; box-shadow: none; color: #fff; }
.nav-group { margin: 0; }
.nav-group-summary { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; background: transparent; color: #cbd5e1; padding: 10px 12px; border-radius: 6px; }
.nav-group-summary::after { background: transparent; color: #a9b9cd; }
.nav-group-items { margin: 0 0 6px 12px; gap: 2px; border-left: 1px solid #ffffff20; }
.nav-group-label { margin: 17px 12px 6px; font-size: 10px; color: #a4b4c8; font-weight: 500; }
.sidebar-user-chip { padding: 0; background: none; border-radius: 0; }
.sidebar-user-chip span { font-weight: 500; }
.sidebar-foot { padding: 15px 8px 0; }
.main { padding: 0 30px 32px; background: var(--bg); display: flex; flex-direction: column; }
.topbar-actions { order: -1; padding: 16px 0; margin: 0 0 25px; border-bottom: 1px solid var(--line); justify-content: space-between; box-shadow: none; }
#mfa-required-banner { order: -2; margin-top: 12px; }
/* A busca por significado e o diferencial do produto: ocupa a linha inteira,
   nao meia. O max-width de 520px daqui vencia a regra do styles.css, que e
   carregado antes — duas copias da mesma regra contando historias diferentes. */
.global-search { flex: 1 1 auto; min-width: 0; background: #fff; box-shadow: none; border: 1px solid var(--line); border-radius: 6px; }
.global-search:focus-within { border-color: var(--primary); }
.global-search input { font-weight: 400; padding: 9px 12px; font-size: 13px; }
.global-search input::placeholder { font-weight: 400; }
.global-search .btn.icon-only { width: 40px; min-height: 38px; }
.topbar { margin-bottom: 23px; align-items: center; }
.topbar h1 { font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -.03em; }
.topbar p { font-size: 13px; max-width: 74ch; }
.notif-bell { box-shadow: none; }
.case-context { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.case-context label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.case-selector { min-width: 0; width: min(480px, 100%); max-width: 100%; font-size: 13px; font-weight: 400; box-shadow: none; border-color: var(--line); }

/* One quiet workspace header; additional statistics are disclosed on demand. */
.case-ribbon { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 20px 20px 0; box-shadow: none; margin-bottom: 20px; }
.case-ribbon-main > span { display: none; }
.case-ribbon-main h2 { font-size: 21px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.025em; }
.case-ribbon-main p { color: var(--muted); line-height: 1.5; }
.case-module-tabs { display: flex; flex-wrap: wrap; gap: 0 22px; padding-top: 12px; border: 0; }
.case-module-tabs > button, .case-menu > summary { color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: 13px; font-weight: 500; padding: 12px 0; cursor: pointer; }
.case-module-tabs > button.active, .case-module-tabs > button:hover, .case-menu.has-active > summary { background: transparent; color: var(--primary); border-bottom-color: var(--primary); }
.case-menu { position: relative; }
.case-menu > summary::marker { font-size: 10px; }
.case-menu > div { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px; box-shadow: var(--shadow-strong); }
.case-menu:last-child > div { left: auto; right: 0; }
.case-menu button { display: block; width: 100%; text-align: left; border: 0; background: #fff; color: var(--text); border-radius: 4px; padding: 10px; font-weight: 500; }
.case-menu button:hover, .case-menu button.active { background: #eaf1f9; color: var(--primary); }
.case-overview-details { border-top: 1px solid var(--line); padding: 10px 0; }
.case-overview-details > summary, .case-summary-panel > summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.case-overview-details[open] > summary { margin-bottom: 15px; }
.case-ribbon-stats { gap: 8px; }
.case-ribbon-stats div { background: #f5f7fa; border: 0; border-radius: 4px; }
.case-ribbon-stats div.warn { background: #fff2dd; }
.case-ribbon-stats strong { font-size: 16px; font-weight: 600; }
.case-ribbon-stats span { color: var(--muted); font-size: 10px; font-weight: 500; }
.case-next-action { background: #f0f5fb; border-color: #dce7f2; color: #334a65; border-radius: 6px; }
.case-next-action.urgent { background: #fff5e7; border-color: #edd7b5; color: #774b18; }
.case-next-action strong, .checklist-summary strong { color: var(--text); }
.case-ribbon-checklist { border-color: var(--line); }
.checklist-summary { color: var(--muted); }
.checklist-bar { background: #e5eaf0; }
.checklist-bar-fill { background: #4a8a7e; }
.checklist-chip { border-color: var(--line); background: #f6f8fa; color: #43556a; font-weight: 500; border-radius: 5px; }
.checklist-chip:hover { background: #eaf1f9; }
.checklist-chip.done { background: #edf7f1; color: #25634b; border-color: #d4e9db; }
.checklist-chip.done:hover { background: #deeee5; }
.case-summary-panel { margin-bottom: 18px; }
.case-summary-panel[open] > summary { margin-bottom: 15px; }

/* Portfolio metrics and rows use only office-wide data. */
#metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
#metrics .metric { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0 22px; box-shadow: none; }
#metrics .metric:first-child { padding-left: 0; }
#metrics .metric:last-child { border: 0; }
.metric::after { display: none; }
.metric span { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; }
.metric strong { font-weight: 500; letter-spacing: -.025em; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.day-context { color: var(--muted); font-size: 12px; margin: -8px 0 20px; }
.day-context::first-letter { text-transform: uppercase; }
.day-action-row { display: flex; gap: 14px; align-items: flex-start; padding: 17px 0; border-bottom: 1px solid var(--line); }
.day-action-row:last-child { border-bottom: 0; }
.day-action-row > div { flex: 1; min-width: 0; }
.day-action-row strong { font-size: 14px; overflow-wrap: anywhere; }
.day-action-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.day-action-row p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.day-action-row p.day-warning { color: #865000; }
.day-action-row .btn { flex-shrink: 0; }
.day-more { margin-top: 12px; }
.day-more summary { color: var(--primary); cursor: pointer; font-size: 13px; padding: 8px 0; }
@media (min-width: 1200px) {
  .dashboard-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dashboard-layout .deadline-row { flex-wrap: wrap; gap: 10px; }
  .dashboard-layout .day-action-row { flex-wrap: wrap; }
  .dashboard-layout .day-action-row > div { flex-basis: 230px; }
}
@media (max-width: 550px) { .day-action-row { flex-wrap: wrap; } .day-action-row > div { flex-basis: 100%; } }
.case-list { gap: 0; }
.case-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; padding: 18px 0; cursor: default; }
.case-card:last-child { border: 0; }
.case-card:hover, .case-card.active { transform: none; box-shadow: none; background: transparent; }
.case-card.active { border-color: var(--line); }
.case-card::before { display: none; }
.case-row-main { min-width: 0; }
.case-card h3 { font-size: 14px; }
/* O título é o link principal da carteira — a coisa que a pessoa procura e
   clica. Em 14px ele tinha o mesmo peso da linha de cliente logo abaixo, e a
   lista virava um bloco uniforme. Sobe para 17px, com entrelinha para títulos
   longos de duas linhas. */
.case-title-button { background: transparent; border: 0; padding: 2px 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text); text-align: left; overflow-wrap: anywhere; }
.case-title-button:hover { color: var(--primary); text-decoration: underline; }
.case-card p { font-size: 12px; margin: 4px 0 0; }
.case-owner { color: var(--muted); font-size: 11.5px; }
.case-row-status { display: grid; gap: 7px; justify-items: end; flex-shrink: 0; }
.case-row-status small { color: var(--muted); font-size: 12px; }
.case-search-label { font-size: 12px; color: var(--muted); width: min(360px, 100%); }
.deadline-row { display: flex; gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.deadline-row:last-child { border: 0; }
.deadline-row time { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deadline-row > div { flex: 1; min-width: 0; }
.deadline-row small { display: block; color: var(--muted); font-size: 12px; }
.deadline-row .badge { white-space: nowrap; }

/* Batch workflow: every original operation remains available in its step. */
.lote-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lote-steps button { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--muted); font-weight: 500; font-size: 13px; text-align: left; }
.lote-steps span { width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.lote-steps button[aria-current="step"] { color: var(--primary); }
.lote-steps button[aria-current="step"] span { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Conector entre as etapas: uma seta curta, centrada no espaço entre uma etapa
   e a seguinte. Duas versões anteriores erraram por motivos opostos — a
   primeira era um chevron de 9px que sumia na tela; a segunda, um fio de 128px
   atravessando a barra, com a ponta em espessura diferente do traço, o que faz
   a ponta parecer colada. Aqui traço e ponta são O MESMO desenho, com a mesma
   espessura e extremidades arredondadas, em largura fixa: a seta é sinal de
   leitura, não elemento gráfico competindo com o rótulo.
   `margin: 0 auto` centra a seta na folga que sobra, seja qual for o rótulo.
   Cor única e discreta de propósito: quem conta em que etapa a pessoa está é o
   círculo numerado, que já fica cheio na cor do sistema. Repetir esse estado
   no conector foi o que deixou a versão anterior berrante. */
.lote-steps button:not(:last-child)::after {
  content: '';
  flex: 0 0 auto;
  width: 38px;
  height: 12px;
  margin: 0 auto;
  background: var(--line-strong);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h36M32.5 2 37 6l-4.5 4'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h36M32.5 2 37 6l-4.5 4'/%3E%3C/svg%3E");
  pointer-events: none;
}
.lote-summary { margin: 0 0 22px; gap: 10px; }
.lote-options { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.lote-options > summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.lote-options[open] > summary { margin-bottom: 14px; }
.lote-stage-note { padding: 14px 16px; background: #f4f7fa; border-radius: 6px; line-height: 1.6; }
.lote-table { min-width: 720px; }
.lote-table th { text-transform: none; letter-spacing: 0; background: #f7f9fb; }
.lote-table td { padding: 15px 10px; }
.lote-table td:first-child { min-width: 180px; max-width: 320px; }
.lote-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lote-table .card-actions { min-width: 130px; }
.lote-alerts { line-height: 1.6; }
#lote-download { background: var(--primary); border-color: var(--primary); color: #fff; }

/* A shorter, quieter sign-in screen. */
.auth-screen { background: #f6f7f9; color: var(--text); padding: 55px max(28px, 6vw); gap: 65px; grid-template-columns: minmax(300px, 440px) minmax(280px, 1fr); align-items: center; }
.auth-orb { display: none; }
.auth-card { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 34px; backdrop-filter: none; box-shadow: var(--shadow); }
.auth-brand strong { color: var(--text); font-weight: 600; }
.auth-brand span { color: var(--muted); font-size: 12px; }
.auth-card h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.035em; }
.auth-card p, .auth-switch { color: var(--muted); font-size: 13px; }
.login-form label { color: #34445a; }
.login-form input { background: #fff; color: var(--text); border-color: var(--line-strong); }
.auth-screen .link-btn { color: var(--primary); font-weight: 500; }
.auth-screen .link-btn:hover { color: #163759; }
.auth-preview { background: transparent; box-shadow: none; border: 0; padding: 0; min-height: 0; color: var(--text); }
.preview-top { display: none; }
.auth-preview h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.035em; max-width: 420px; }
.auth-intro { color: var(--muted); max-width: 360px; margin: 0 0 26px; }
.auth-features > summary { cursor: pointer; color: var(--primary); font-size: 13px; }
.auth-features[open] > summary { margin-bottom: 18px; }
.preview-features li { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; }
.preview-features li strong { color: var(--text); font-weight: 600; }
.preview-features li strong::before { content: none; }
.preview-features li span { color: var(--muted); }
.app-loading-spinner { border-color: #e2e7ed; border-top-color: var(--primary); }

@media (min-width: 1440px) { .main { padding-left: 42px; padding-right: 42px; } }
@media (max-width: 1100px) {
  #app-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .main { padding-left: 22px; padding-right: 22px; }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .case-module-tabs { gap: 0 15px; }
  .auth-screen { gap: 30px; }
}
@media (max-width: 760px) {
  #app-shell { display: block; }
  .main { padding: 64px 16px 24px; }
  .sidebar { padding: 25px 18px 20px; }
  .nav { display: grid; grid-template-columns: 1fr; }
  .mobile-nav-toggle { background: #15283e; box-shadow: none; border-radius: 6px; top: 12px; left: 16px; }
  .topbar-actions { margin-bottom: 20px; padding: 10px 0 15px; flex-wrap: nowrap; gap: 9px; }
  .global-search input { font-size: 13px; }
  .global-search input { font-size: 16px; }
  .topbar { display: flex; gap: 12px; }
  .topbar h1 { font-size: 24px; }
  .panel { padding: 17px; }
  #metrics .metric { padding: 0 12px; }
  #metrics .metric strong { font-size: 26px; }
  #metrics .metric em { font-size: 11px; }
  .case-context { flex-wrap: wrap; gap: 9px; }
  .case-context .case-selector { flex: 1 1 200px; }
  .case-ribbon { padding: 16px 16px 0; }
  .case-ribbon-main h2 { font-size: 19px; }
  .case-module-tabs { display: flex; flex-wrap: wrap; gap: 0 15px; }
  .case-module-tabs > button, .case-menu > summary { min-height: 44px; }
  .case-menu > div { max-width: calc(100vw - 65px); }
  .case-card { gap: 10px; align-items: flex-start; }
  .case-row-status { max-width: 145px; }
  .deadline-row { gap: 12px; flex-wrap: wrap; }
  .deadline-row > div { flex-basis: 140px; }
  .lote-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 15px; }
  /* Em duas colunas, a seta do segundo item apontaria para o fim da linha, e
     não para a etapa seguinte — que está na linha de baixo. Some. */
  .lote-steps button:nth-child(2n)::after { display: none; }
  .lote-steps button { min-height: 44px; }
  .lote-steps button:nth-child(2)::after { display: none; }
  .lote-table { min-width: 0; display: block; }
  .lote-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lote-table tbody { display: block; }
  .lote-table tbody tr { display: block; padding: 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; }
  .lote-table td, .lote-table td:first-child { display: block; min-width: 0; max-width: none; width: auto; border: 0; padding: 5px 0; overflow-wrap: anywhere; }
  .lote-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-bottom: 3px; }
  .lote-table td:first-child { margin-bottom: 8px; }
  .lote-table td:first-child strong { font-size: 14px; }
  .lote-table td.card-actions { display: flex; min-width: 0; margin-top: 9px; gap: 8px; }
  .lote-table td.card-actions::before { flex-basis: 100%; }
  .form-grid > .span-2 { grid-column: 1 / -1; }
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .btn, .btn.small { min-height: 44px; }
  .auth-screen { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 26px; }
  .auth-card { padding: 24px; }
  .auth-card h1, .auth-preview h2 { font-size: 26px; }
  .auth-preview { padding: 8px; }
}
@media (max-width: 420px) {
  .topbar-actions { flex-wrap: wrap; }
  .global-search { flex-basis: 100%; }
  #metrics .metric { padding-right: 8px; padding-left: 8px; }
  .case-card { flex-direction: column; }
  .case-row-status { max-width: none; display: flex; align-items: center; flex-wrap: wrap; justify-items: start; }
  .panel-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Helena no mesmo idioma visual do resto do app. O tema navy + dourado nasceu
   para contrastar com a interface antiga; com a interface clara e sóbria ele
   passou a parecer outro produto colado dentro deste. Aqui ela mantém a
   identidade (o rosto e o nome) e adota a paleta, os cantos e o peso do
   CaseFlow. As regras espelham os seletores de styles.css, que carrega antes. */
.helena-avatar { border: 1px solid var(--line-strong); background: var(--surface); color: var(--primary); font-family: inherit; font-weight: 700; }
.helena-identity strong { color: var(--text); font-size: 14px; font-weight: 600; }
.helena-status { color: var(--muted); font-size: 11.5px; }
.helena-status-dot { background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.14); }
.helena-tagline { color: var(--muted); font-size: 12.5px; }

.helena-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

.support-widget-launcher {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--shadow-strong);
}
.support-widget-launcher:hover { background: #1b416d; filter: none; }
.support-widget-launcher .helena-avatar { border-color: rgba(255,255,255,.5); background: #fff; }

.support-widget-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
}
.support-widget-panel-head { border-bottom: 1px solid var(--line); }
.support-widget-panel-head .icon-btn { background: #f1f4f7; border-color: var(--line); color: #34445a; font-weight: 600; }
.support-widget-panel-head .icon-btn:hover { background: #e4e9ef; filter: none; }

.support-chat-messages { color: var(--text); }
.support-chat-messages .empty-state { color: var(--muted); }
.support-chat-msg { border-radius: var(--radius); font-size: 13px; }
.support-chat-msg.user { background: var(--primary); color: #fff; }
.support-chat-msg.assistant { background: #f1f4f7; color: var(--text); border: 1px solid var(--line); }

/* O texto da resposta vem embrulhado em .markdown-body, que declara a própria
   cor; sem repetir estes seletores, sobraria o claro-sobre-escuro do tema antigo. */
.support-chat-messages .markdown-body { color: var(--text); }
.support-chat-messages .markdown-body h2,
.support-chat-messages .markdown-body h3,
.support-chat-messages .markdown-body h4,
.support-chat-messages .markdown-body h5 { color: var(--text); }
.support-chat-messages .markdown-body strong { color: var(--text); }
.support-chat-messages .markdown-body em { color: var(--muted); }
.support-chat-messages .markdown-body a { color: var(--primary); }
.support-chat-messages .markdown-body blockquote { background: #f1f4f7; color: var(--text); border-left-color: var(--primary); }
.support-chat-messages .markdown-body code { background: #f1f4f7; border-color: var(--line); color: #34445a; }
.support-chat-messages .markdown-body .md-code { background: #f6f7f9; color: var(--text); }

.helena-panel .mini-help-inline, .support-widget-panel .mini-help-inline { color: var(--muted); }
.helena-panel .mini-help-inline strong, .support-widget-panel .mini-help-inline strong { color: var(--text); }
.helena-panel .btn.primary, .support-widget-panel .btn.primary { background: var(--primary); color: #fff; box-shadow: none; }
.helena-panel .btn.primary:hover, .support-widget-panel .btn.primary:hover { background: #1b416d; }

.helena-suggestion-chip { border: 1px solid var(--line); background: #f1f4f7; color: #34445a; border-radius: 999px; font-size: 12px; font-weight: 500; }
.helena-suggestion-chip:hover { background: #e4e9ef; }

/* A mensagem de quem pergunta também passa por renderMarkdown, e .markdown-body
   declara a própria cor (escura, do app claro). Dentro do balão azul isso vira
   texto escuro sobre azul escuro. Aqui o balão do usuário força branco em tudo
   que está dentro dele. */
.support-chat-msg.user,
.support-chat-msg.user strong,
.support-chat-msg.user small,
.support-chat-msg.user .markdown-body,
.support-chat-msg.user .markdown-body h2,
.support-chat-msg.user .markdown-body h3,
.support-chat-msg.user .markdown-body h4,
.support-chat-msg.user .markdown-body h5,
.support-chat-msg.user .markdown-body strong,
.support-chat-msg.user .markdown-body em,
.support-chat-msg.user .markdown-body li,
.support-chat-msg.user .markdown-body p,
.support-chat-msg.user .markdown-body a { color: #fff; }
.support-chat-msg.user .markdown-body a { text-decoration: underline; }
.support-chat-msg.user .markdown-body code { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); color: #fff; }
.support-chat-msg.user .markdown-body blockquote { background: rgba(255,255,255,.14); color: #fff; border-left-color: rgba(255,255,255,.55); }
.support-chat-msg.user .markdown-body .md-code { background: rgba(0,0,0,.24); color: #fff; }

/* Prévia da peça gerada: uma folha de papel com a página, as margens, as fontes
   e o timbre do modelo do escritório — o documento como ele sai. */
.lote-preview-dialog { max-width: min(980px, calc(100vw - 24px)); }
#lote-preview-corpo {
  max-height: 68vh;
  overflow: auto;
  background: #eef1f5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  justify-content: center;
}
.docx-folha {
  background: #fff;
  box-shadow: 0 2px 14px rgba(23,37,57,.16);
  color: #111;
  line-height: 1.4;
  max-width: 100%;
}
.docx-folha p { margin: 0; }
.docx-folha p.docx-vazio { min-height: 1em; }
.docx-folha img { max-width: 100%; height: auto; }
.docx-folha .docx-tab { display: inline-block; width: 42px; }
/* Caixa de texto do Word (a ementa do modelo vem numa). Sem isto o conteúdo
   dela sairia solto no meio da peça, como se fosse parágrafo comum. */
.docx-folha .docx-caixa { margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(15,23,42,.18); }
.docx-folha hr.docx-quebra { border: 0; border-top: 1px dashed #b9c4d2; margin: 26px 0; }
.docx-folha .docx-timbre { margin-bottom: 10px; }
.docx-folha .docx-rodape { margin-top: 18px; border-top: 1px solid #e6e9ee; padding-top: 6px; }
.docx-tabela { border-collapse: collapse; width: 100%; margin: 8px 0; }
.docx-tabela td { border: 1px solid #9aa5b4; padding: 4px 6px; vertical-align: top; }
.docx-tabela.sem-borda td { border: 0; }
@media (max-width: 900px) {
  #lote-preview-corpo { padding: 8px; }
  .docx-folha { width: 100% !important; padding: 24px 18px !important; }
}

/* Ícones do conjunto (public/icons.js) dentro de botões e etiquetas. */
.btn .ico, .badge .ico { display: inline-flex; align-items: center; }
.btn .ico svg, .badge .ico svg { width: 15px; height: 15px; }
.btn.icon-only svg { width: 16px; height: 16px; }
.btn.small.icon-only { width: 30px; height: 30px; padding: 0; }
td.card-actions .btn.icon-only + .btn.icon-only { margin-left: 2px; }

/* Peças e análises agrupadas pelo que cada uma lê: o que sai do dossiê, o que
   sai dos documentos, o que sai da leitura já feita e o que não lê o caso. */
.artefato-grupos { display: grid; gap: 16px; }
.artefato-grupo { border-left: 2px solid var(--line); padding-left: 14px; }
.artefato-grupo-titulo { display: block; font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.artefato-grupo-nota { margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
.artefato-grupo .toolbar { margin: 0; gap: 8px; }

/* Menu lateral com ícone em cada item, e um indicador de submenu que se vê.
   A seta antes era o caractere "▾", pequeno e apagado; agora é o mesmo traço
   do conjunto, maior, e gira quando o grupo abre. */
.nav button, .nav-group-summary { display: flex; align-items: center; gap: 10px; }
.nav .ico { display: inline-flex; flex-shrink: 0; opacity: .78; }
.nav .ico svg { width: 17px; height: 17px; }
.nav button.active .ico, .nav-group-summary .ico { opacity: 1; }
.nav-group-summary { justify-content: flex-start; }
.nav-group-summary::after {
  content: '';
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  opacity: .85;
  transition: transform .18s ease;
  -webkit-mask: no-repeat center/contain 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='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask: no-repeat center/contain 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='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.nav-group[open] > .nav-group-summary::after { transform: rotate(180deg); }
/* O grupo fechado precisa parecer clicável: fundo próprio e realce no hover. */
.nav-group-summary { background: #ffffff10; color: #dbe4ef; }
.nav-group-summary:hover { background: #ffffff1c; color: #fff; }
.nav-group-items { padding-left: 8px; }

/* Rodapé do app: identifica produto e escritório, lembra em uma frase o limite
   de uso da IA e leva ao que precisa estar à mão — ajuda e encarregado de dados.
   Discreto: fecha a página sem competir com o conteúdo. */
.app-footer {
  margin: 34px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  display: grid;
  gap: 6px;
}
.app-footer-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-footer-produto { font-weight: 600; color: var(--text); }
.app-footer-sep { width: 1px; height: 12px; background: var(--line-strong); }
.app-footer-aviso { margin: 0; max-width: 70ch; line-height: 1.45; }
.app-footer-links { gap: 16px; }
.app-footer-link {
  border: 0; background: transparent; padding: 0;
  color: var(--primary); font: inherit; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.app-footer-link:hover { color: #1b416d; }
.app-footer a { color: var(--primary); }
@media (max-width: 720px) { .app-footer { margin-top: 26px; } }

/* Detalhe de cada plano: os números que o sistema aplica de verdade e as duas
   capacidades que dependem do plano, com o que falta marcado sem alarde. */
.plan-card-detalhe { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.plan-card-detalhe li { padding-left: 18px; position: relative; line-height: 1.4; }
.plan-card-detalhe li::before { content: '·'; position: absolute; left: 6px; color: var(--line-strong); font-weight: 700; }
.plan-card-detalhe li strong { color: var(--text); font-weight: 600; }
.plan-card-detalhe li.tem::before { content: ''; left: 2px; top: 5px; width: 11px; height: 11px; background: #1f9d55; -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.plan-card-detalhe li.nao-tem { color: #8b97a6; }
.plan-card-detalhe li.nao-tem::before { content: ''; left: 3px; top: 9px; width: 9px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.plan-comum { grid-column: 1 / -1; margin-top: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #f6f8fa; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.plan-comum .mini-help-inline { margin: 8px 0 0; color: var(--muted); }

/* Novo caso: linha de arquivo com dois botões (Usar para extrair / Remover) */
.uploaded-file-row .inline-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
#new-case-dialog .file-options { margin: 6px 0 0; }

/* Código de ativação em Configurações → Escritório: campo e botão na mesma linha */
.org-codigo-form { display: flex; gap: 8px; align-items: flex-end; margin: 0 0 12px; flex-wrap: wrap; }
.org-codigo-form label { flex: 1 1 260px; margin: 0; }
.org-codigo-form input { width: 100%; }
#codigos-ativacao-lista code { font-weight: 600; letter-spacing: 0.04em; }

/* Editor de pacotes de agentes (Painel da Plataforma) */
.pacote-catalogo details summary { cursor: pointer; }
.pacote-catalogo .inline-check { display: inline-flex; gap: 8px; align-items: center; width: auto !important; flex-wrap: wrap; }
.pacote-catalogo .inline-check input[type="checkbox"] { width: auto !important; margin: 0; }
.pacote-historico, .pacote-historico ul { margin: 6px 0 0 16px; padding: 0; }
.pacote-atualizacao ul { margin: 6px 0 8px 18px; }
#pacotes-lista tr.ativa td { background: rgba(37, 99, 235, .06); }
#pacotes-lista .inline-actions { display: flex; gap: 6px; }

/* Acesso MCP: token mostrado uma vez e lista de ferramentas */
.mcp-token { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; word-break: break-all; background: rgba(15, 23, 42, .06); padding: 10px 12px; border-radius: 8px; margin: 8px 0; user-select: all; }
.mcp-ferramentas { margin: 8px 14px 14px; padding-left: 18px; }
.mcp-ferramentas li { margin: 4px 0; }
#org-mcp-box table { margin-top: 6px; }

/* Citação de origem nas peças geradas: chips por tipo de fonte */
.cita { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 0 6px; margin: 0 2px; border-radius: 999px; vertical-align: baseline; text-decoration: none; letter-spacing: .02em; }
.cita-doc { background: #e8eef7; color: #1f2a44; border: 1px solid #c9d5e8; cursor: pointer; }
.cita-doc:hover { background: #d8e2f2; }
.cita-jur { background: #eef7ee; color: #1f5a2a; border: 1px solid #c8e2cc; cursor: help; }
.cita-verificar { background: #fbf6e9; color: #7a5a12; border: 1px solid #ead9a8; cursor: help; }
.cita-invalida { background: #fdecec; color: #8a1f1f; border: 1px solid #f0c2c2; text-decoration: line-through; cursor: help; }
.fontes-do-artefato { margin: 14px 0 8px; padding: 10px 14px; border-left: 3px solid #1f2a44; background: #f4f6fa; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.fontes-do-artefato.com-pendencia { border-left-color: #b08d3c; background: #fbf6e9; }
.fontes-do-artefato .fontes-titulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b6470; margin-bottom: 4px; }
.fontes-do-artefato .fontes-balanco { margin-top: 6px; color: #5b6470; }
.evidence-card.destacado { outline: 3px solid #b08d3c; outline-offset: 2px; transition: outline-color .6s ease; }

/* Painel lateral do documento citado: confere a fonte sem sair da peça */
.doc-drawer-fundo { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .28); z-index: 1190; }
body.doc-drawer-aberto .doc-drawer-fundo { display: block; }
.doc-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 48vw); background: var(--surface-solid, #fff); box-shadow: -18px 0 40px rgba(15, 23, 42, .18); z-index: 1200; display: flex; flex-direction: column; animation: doc-drawer-entra .18s ease-out; }
.doc-drawer[hidden] { display: none; }
@keyframes doc-drawer-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.doc-drawer-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; border-bottom: 1px solid var(--line, #e5e7eb); }
.doc-drawer-cabecalho h3 { margin: 6px 0 2px; font-size: 17px; line-height: 1.3; }
.doc-drawer-fechar { flex-shrink: 0; }
.doc-drawer-abas { padding: 6px 18px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.doc-drawer-corpo { flex: 1; overflow: auto; padding: 14px 18px; background: #f8fafc; }
.doc-drawer-texto { white-space: normal; line-height: 1.6; font-size: 14px; background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 14px 16px; }
.doc-realce { background: #fde68a; color: inherit; padding: 0 2px; border-radius: 3px; }
.doc-drawer-iframe { width: 100%; height: calc(100vh - 220px); border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: #fff; }
.docx-folha-painel { width: auto !important; max-width: 100%; min-height: 0 !important; margin: 0; }
.doc-drawer-dados { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.doc-drawer-dados th, .doc-drawer-dados td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #e5e7eb); font-size: 13px; vertical-align: top; }
.doc-drawer-dados th { width: 38%; color: var(--muted, #64748b); font-weight: 600; }
.doc-drawer-rodape { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid var(--line, #e5e7eb); }
@media (max-width: 900px) { .doc-drawer { width: 100vw; } }

/* Verificação automática: trechos sem fonte, julgados um a um */
.autocheck-sem-fonte { margin-top: 8px; }
.autocheck-sem-fonte ol { margin: 6px 0 0 18px; padding: 0; }
.autocheck-sem-fonte li { margin: 6px 0; line-height: 1.5; }
.autocheck-trecho { color: #334155; }

/* Cartão "Na carteira" no topo da Busca Inteligente */
.carteira-card { border-left: 3px solid #1f2a44; }
.carteira-card h3 { margin: 6px 0 0; }
.carteira-linhas div { margin: 4px 0; line-height: 1.5; font-size: 13.5px; }
.carteira-caso { font-weight: 600; color: #1f2a44; text-decoration: underline dotted; }

/* Desfecho da decisão no cartão do documento */
.desfecho-bloco { margin: 10px 0; padding: 10px 12px; border: 1px solid #dbe2ea; border-left: 3px solid #1f2a44; border-radius: 8px; background: #f8fafc; font-size: 13.5px; }
.desfecho-bloco.vazio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #475569; border-left-color: #94a3b8; }
.desfecho-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.desfecho-teses { margin: 8px 0 0; padding-left: 18px; }
.desfecho-teses li { margin: 4px 0; line-height: 1.5; }
.desfecho-resumo { margin: 8px 0 0; color: #334155; }
.desfecho-acoes { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.desfecho-form { margin: 10px 0; padding: 12px; border: 1px solid #dbe2ea; border-left: 3px solid #1f2a44; border-radius: 8px; background: #f8fafc; display: grid; gap: 10px; }
.desfecho-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.desfecho-grid label { display: grid; gap: 4px; font-size: 13px; }
.desfecho-grid label.inline-check { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.desfecho-teses-editor ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
.desfecho-teses-editor li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.desfecho-teses-editor li:last-child { border-bottom: 0; }
.desfecho-teses-editor li select { width: auto; min-width: 140px; }
.desfecho-teses-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.desfecho-teses-cabeca input[type="search"] { width: auto; min-width: 180px; }
.desfecho-form textarea { width: 100%; }
.placar-da-tese { margin-top: 4px; }

/* Sentinela local do DJEN (Configurações → Escritório) */
.sentinela-estado { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #dbe2ea; border-left: 3px solid #94a3b8; border-radius: 8px; background: #f8fafc; font-size: 13.5px; line-height: 1.6; }
.sentinela-estado.ok { border-left-color: #15803d; }
.sentinela-erros { margin: 6px 0 0; padding-left: 18px; color: #7f1d1d; }
.sentinela-passos { margin: 10px 0 0; padding-left: 20px; }
.sentinela-passos li { margin: 8px 0; line-height: 1.6; }
.sentinela-passos pre { margin: 6px 0 0; padding: 8px 10px; background: #0f172a; color: #e2e8f0; border-radius: 6px; font-size: 12.5px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* Publicações: filtro e contagem acima da lista */
.publications-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.publications-filtro input[type="search"] { flex: 1 1 260px; min-width: 200px; width: auto; }
.publications-filtro .inline-check { display: flex; align-items: center; gap: 6px; }
.publications-filtro .inline-check input { width: auto !important; }

#publications-fora-das-oabs { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#publications-fora-das-oabs[hidden] { display: none; }

/* Publicações: vínculo manual a um caso, inline no cartão */
.publication-vincular { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #dbe2ea; border-left: 3px solid #1f2a44; border-radius: 8px; background: #f8fafc; display: grid; gap: 8px; }
.publication-vincular label { display: grid; gap: 4px; font-size: 13px; }
.publication-vincular select { width: 100%; }

/* Desfecho sugerido pela publicação do DJEN */
.desfecho-bloco.sugestao { border-left-color: #b45309; background: #fffbeb; }
.desfecho-trecho { margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid #f59e0b; color: #334155; font-style: italic; font-size: 13px; }

/* Confirmar prazo estimado (publicação e tabela do Planejamento) */
.prazo-controles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: 6px; }
.prazo-controles input[type="date"] { width: auto; min-width: 140px; padding: 4px 6px; font-size: 12.5px; }

/* Edição da peça gerada: trechos, versões, ações por trecho */
.peca-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }
.peca-editavel { display: grid; gap: 4px; }
.peca-bloco { position: relative; padding: 6px 44px 6px 10px; border-radius: 8px; border: 1px solid transparent; }
.peca-bloco:hover { border-color: #dbe2ea; background: #f8fafc; }
.peca-bloco > .peca-editar { position: absolute; right: 8px; top: 6px; opacity: 0; }
.peca-bloco:hover > .peca-editar, .peca-bloco > .peca-editar:focus { opacity: 1; }
.peca-bloco.editando { border-color: #1f2a44; background: #f8fafc; padding: 10px; display: grid; gap: 8px; }
.peca-bloco.editando textarea { width: 100%; font: inherit; line-height: 1.55; }
/* O aviso do trecho ampliado fica ENTRE o editor e os botoes: e o que a pessoa
   precisa ler antes de salvar, e ninguem le o que esta depois do botao. */
/* O raio-x de páginas (B4). Lista alta de propósito: com processo de 340
   páginas, o que importa é varrer depressa e marcar. */
.lista-de-paginas { list-style: none; margin: 10px 0; padding: 0; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pagina-do-doc { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.pagina-do-doc:last-child { border-bottom: none; }
.pagina-do-doc .inline-check { flex: 0 0 auto; margin: 0; }
.pagina-previa { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
/* Página sem texto não é erro: é digitalização sem OCR. Fica visível e
   apagada, para a pessoa entender por que não dá para marcá-la. */
.pagina-sem-texto { background: #fafbfc; }
.pagina-sem-texto strong { color: var(--muted); }
.filtro-de-materias { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.filtro-de-materias input { flex: 1; min-width: 0; }
.filtro-de-materias .mini-help-inline { white-space: nowrap; }
.peca-bloco.editando .trecho-ampliado { margin: 0; }
.peca-bloco.editando .trecho-ampliado .form-actions { margin-top: 6px; }

/* O PROXIMO PASSO, no lugar do clique. Depois de aprovar o roteiro, a tela so
   oferecia caminhos para tras (reabrir, preparar de novo, descartar) e quem
   aprovou ficava sem saber o que fazer. */
.proximo-passo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: #f8fafc; }
.proximo-passo > div { display: grid; gap: 3px; min-width: 240px; flex: 1; }
.proximo-passo strong { font-size: 13.5px; }
.proximo-passo .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .proximo-passo { flex-direction: column; align-items: stretch; }
  .proximo-passo .btn { width: 100%; }
}
.peca-bloco > p:first-child, .peca-bloco > h3:first-child, .peca-bloco > h4:first-child { margin-top: 0; }
.peca-bloco > p:last-of-type { margin-bottom: 0; }
.peca-versoes { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #dbe2ea; border-left: 3px solid #1f2a44; border-radius: 8px; background: #f8fafc; font-size: 13px; }
.peca-versoes tr.is-current td { font-weight: 600; }
.peca-diff { margin-top: 10px; display: grid; gap: 6px; }
.peca-diff-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.peca-diff-rem { padding: 6px 10px; border-left: 3px solid #b91c1c; background: #fef2f2; color: #7f1d1d; white-space: pre-wrap; }
.peca-diff-add { padding: 6px 10px; border-left: 3px solid #15803d; background: #f0fdf4; color: #14532d; white-space: pre-wrap; }
.autocheck-acoes { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.autocheck-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.trecho-form { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #dbe2ea; border-left: 3px solid #1f2a44; border-radius: 8px; background: #fff; display: grid; gap: 8px; font-size: 13px; }
.trecho-form label { display: grid; gap: 4px; }
.trecho-fontes { display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.trecho-fontes .inline-check { display: flex; align-items: center; gap: 6px; }
.trecho-fontes .inline-check input { width: auto !important; }

/* Diff por palavras e placar de qualidade por agente */
.peca-diff-palavras { padding: 8px 10px; border-left: 3px solid #1f2a44; background: #f8fafc; line-height: 1.7; white-space: pre-wrap; }
.peca-diff-palavras del { background: #fee2e2; color: #7f1d1d; text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.peca-diff-palavras ins { background: #dcfce7; color: #14532d; text-decoration: none; padding: 0 2px; border-radius: 3px; }
.qualidade-pecas { margin-top: 16px; }
.qualidade-pecas .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.qualidade-trechos { margin: 8px 0; }
.qualidade-trechos ul { margin: 4px 0 0; padding-left: 18px; }
.qualidade-trechos li { margin: 4px 0; line-height: 1.5; font-size: 13px; }

/* Prazos por tipo, propostas do MCP e sugestão de prompt */
.prazos-editor input, .prazos-editor select { width: 100%; min-width: 90px; }
.prazos-acoes { white-space: nowrap; }
.propostas-mcp { margin-bottom: 14px; }
.sugestao-prompt { margin-top: 12px; }
.sugestao-prompt ul { margin: 6px 0; padding-left: 18px; }

/* Layout das peças: cartões dos modelos e miniaturas */
.layout-modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; }
.layout-card { text-align: left; border: 2px solid #dbe2ea; border-radius: 10px; background: #fff; padding: 10px; cursor: pointer; display: grid; gap: 6px; font: inherit; color: inherit; }
.layout-card:hover { border-color: #94a3b8; }
.layout-card.ativo { border-color: #1f2a44; box-shadow: 0 0 0 3px rgba(31, 42, 68, 0.12); }
.layout-card.base { border-style: dashed; border-color: #1f2a44; }
.layout-card strong { font-size: 14px; }
.layout-card span { font-size: 12.5px; color: #475569; line-height: 1.45; }
.layout-card[disabled] { cursor: default; opacity: 0.85; }
.layout-mini { aspect-ratio: 210 / 150; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-family: Calibri, Arial, sans-serif; overflow: hidden; }
.layout-mini.serif { font-family: Georgia, 'Times New Roman', serif; }
.layout-mini-cab { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid; padding-bottom: 3px; margin-bottom: 3px; }
.layout-mini-logo { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.layout-mini-nome { flex: 1; height: 4px; background: #94a3b8; border-radius: 2px; max-width: 60px; }
.layout-mini-titulo { font-size: 8px; font-weight: 700; margin: 2px 0; }
.layout-mini-titulo.centro { text-align: center; }
.layout-mini-ficha { display: grid; gap: 2px; border: 1px solid #e2e8f0; padding: 3px; }
.layout-mini-ficha span { height: 3px; background: #e2e8f0; border-radius: 2px; }
.layout-mini-secao { font-size: 6.5px; font-weight: 700; margin-top: 2px; }
.layout-mini-linha { height: 3px; background: #cbd5e1; border-radius: 2px; position: relative; }
.layout-mini-linha b { position: absolute; left: -8px; top: -4px; font-size: 6px; }
.layout-mini-rod { margin-top: auto; height: 2px; background: #e2e8f0; border-radius: 2px; }
#org-layout-form label { display: grid; gap: 4px; font-size: 13px; }
#org-layout-form label.inline-check { display: flex; align-items: center; gap: 6px; }
#org-layout-form label.inline-check input { width: auto !important; }

/* Configurações: índice lateral agrupado (Geral / Pessoas / Conexões / Conformidade /
   Plataforma) no lugar da fileira de pílulas; em tela estreita vira uma faixa rolável. */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; }
.settings-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.settings-nav-group { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 12px; margin: 16px 0 6px; }
.settings-nav-group:first-child { margin-top: 0; }
.settings-nav .settings-tab { text-align: left; border: 0; background: transparent; box-shadow: none; border-radius: 8px; padding: 9px 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.settings-nav .settings-tab:hover { background: rgba(29,78,216,.07); }
.settings-nav .settings-tab.active { background: rgba(29,78,216,.12); color: var(--primary); font-weight: 750; }
.settings-nav .settings-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.settings-content { min-width: 0; }
@media (max-width: 900px) {
  .settings-layout { display: block; }
  .settings-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 0 10px; margin-bottom: 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .settings-nav-group { display: none; }
  .settings-nav .settings-tab { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: #fff; flex: 0 0 auto; }
  .settings-nav .settings-tab.active { background: rgba(29,78,216,.12); border-color: rgba(29,78,216,.35); }
}

/* RF-37 — franquia de IA medida em tokens: aviso de 80%, franquia esgotada e a
   lista de pacotes contratados no ciclo. */
.aviso-tokens-atencao { border-left: 3px solid #b45309; background: rgba(180,83,9,.07); }
.aviso-tokens-esgotada { border-left: 3px solid #b91c1c; background: rgba(185,28,28,.07); }
.aviso-tokens-erro { color: #b91c1c; }
.pacotes-de-tokens { margin-top: 14px; }
.pacotes-de-tokens h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.lista-pacotes { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: 13px; }
.lista-pacotes li { margin-bottom: 4px; }

/* RF-28 — andamento da geração em lote: barra, recibo e falhas por peça. */
.lote-job { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lote-job-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.lote-job-linha span { color: var(--muted); }
.lote-job-barra { margin-top: 10px; height: 6px; border-radius: 999px; background: rgba(100,116,139,.18); overflow: hidden; }
.lote-job-barra > span { display: block; height: 100%; background: var(--primary); transition: width .3s ease; }
.lote-job-concluido .lote-job-barra > span { background: #15803d; }
.lote-job-cancelado .lote-job-barra > span, .lote-job-interrompido .lote-job-barra > span { background: #b45309; }
.lote-job-falhou .lote-job-barra > span { background: #b91c1c; }
.lote-job-falhas { margin-top: 8px; font-size: 13px; color: var(--muted); }
.lote-job-falhas ul { margin: 6px 0 0; padding-left: 18px; }

/* RF-22 — estimativa antes de gastar, e o aviso de entrega que não veio da IA. */
.estimativa-consumo { display: flex; flex-direction: column; gap: 3px; margin: 10px 14px 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 6px; background: rgba(29,78,216,.04); font-size: 13px; }
.estimativa-consumo strong { font-size: 14px; }
.estimativa-consumo span { color: var(--muted); }
.estimativa-estoura { border-left-color: #b45309; background: rgba(180,83,9,.06); }
.estimativa-base { font-size: 12px; }
.alerta-entrega-simulada { border-left: 3px solid #b91c1c; background: rgba(185,28,28,.07); margin-bottom: 12px; }

/* RF-01 — cobertura da leitura do documento e aviso de leitura parcial. */
.cobertura-leitura { margin: 6px 0; font-size: 13px; color: var(--muted); }
.cobertura-parcial { color: #b45309; }
.aviso-leitura-parcial { border-left: 3px solid #b45309; background: rgba(180,83,9,.07); margin: 10px 14px 0; }
.aviso-leitura-parcial ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.aviso-leitura-parcial li { margin-bottom: 3px; }

/* RF-07 — página de origem da citação: régua no texto extraído e destaque ao chegar. */
.doc-pagina { padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 12px; scroll-margin-top: 12px; }
.doc-pagina:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.doc-pagina-regua { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.doc-pagina-citada { background: rgba(29,78,216,.08); border-radius: 6px; }
.cita-doc[data-cita-pagina] { font-variant-numeric: tabular-nums; }

/* Modo molde — propostas de alteração do modelo, decididas uma a uma. */
.molde-propostas { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.molde-proposta { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 8px; padding: 12px 14px; background: #fff; }
.molde-proposta header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.molde-aceita { border-left-color: #15803d; }
.molde-recusada { border-left-color: #b91c1c; opacity: .72; }
.molde-pendente { border-left-color: #b45309; }
.molde-justificativa { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.molde-original { font-size: 13px; color: var(--muted); padding: 8px 10px; background: rgba(100,116,139,.07); border-radius: 6px; }
.molde-removido { text-decoration: line-through; }
.molde-novo { font-size: 13px; margin-top: 6px; padding: 8px 10px; background: rgba(21,128,61,.08); border-radius: 6px; }
.molde-diff { font-size: 13px; line-height: 1.5; }

/* Roteiro da peça — seções combinadas antes de escrever. */
.roteiro-lista { margin: 6px 0 14px; padding-left: 20px; }
.roteiro-lista li { margin-bottom: 10px; }
.roteiro-lista p { margin: 3px 0; color: var(--muted); font-size: 13px; }
.roteiro-sugerir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; padding: 8px 10px; border: 1px dashed var(--line, #cbd5e1); border-radius: 8px; }
.roteiro-sugerir input { flex: 1 1 200px; min-width: 160px; }
.roteiro-sugerir .mini-help-inline { flex-basis: 100%; }
.roteiro-topico [data-roteiro-remover] { padding: 0 6px; font-size: 11px; }
.roteiro-fora { opacity: .55; }
.roteiro-fora strong { text-decoration: line-through; }
#roteiro-da-peca h4 { margin: 14px 0 4px; font-size: 14px; }

/* RF-20 — onde está cada coisa: etapas da produção, cada uma abrindo a lista. */
.producao-etapa { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.producao-etapa > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.producao-lista { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.producao-lista li { margin-bottom: 4px; }

/* Resumo consultável do documento: linha com origem é clicável e some do resto;
   linha sem origem fica marcada como inferência, no mesmo lugar e visível. */
.resumo-documento { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--surface, #fff); }
.resumo-documento > summary { cursor: pointer; font-weight: 600; }
.resumo-campo { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.resumo-lista { margin: 0; padding-left: 0; list-style: none; }
.resumo-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.resumo-linha:last-child { border-bottom: 0; }
.resumo-inferencia { background: rgba(255, 193, 7, .08); }
.resumo-origem { cursor: pointer; border: 0; font: inherit; }
.resumo-citacao, .resumo-motivo { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.resumo-motivo { font-style: italic; }

/* Quadros de apoio no Word: escolha do humano, montada de dado do caso. */
.blocos-visuais { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.blocos-visuais > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.blocos-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.blocos-lista li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.blocos-lista li:last-child { border-bottom: 0; }
.bloco-sem-dado { opacity: .72; }

/* Extração em tabela: célula com origem é clicável; sem fonte fica marcada. */
.tabela-campo { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.tabela-campo input { flex: 1 1 180px; }
.tabela-docs { list-style: none; margin: 6px 0; padding: 0; max-height: 220px; overflow-y: auto; }
.tabela-docs li { padding: 2px 0; }
.tabela-extraida { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.tabela-extraida > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tabela-rolagem { overflow-x: auto; margin: 10px 0; }
.tabela-extraida-grade { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabela-extraida-grade th, .tabela-extraida-grade td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.celula-ausente { opacity: .6; }
.celula-sem-fonte { background: rgba(255, 193, 7, .10); }

/* Estilo da casa: medido, proposto e — separado — o que foi recusado. */
.estilo-lista { list-style: none; margin: 6px 0 12px; padding: 0; }
.estilo-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.estilo-item:last-child { border-bottom: 0; }
.estilo-descartes { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.estilo-descartes > summary { cursor: pointer; font-weight: 600; }
.estilo-descartada { display: block; text-decoration: line-through; opacity: .7; }

/* Documento que fala com a IA: o aviso fica no cartão, com página e trecho. */
.injecao-aviso { border: 1px solid var(--danger, #d92d20); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: rgba(217, 45, 32, .06); }
.injecao-aviso > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.injecao-lista { list-style: none; margin: 8px 0; padding: 0; font-size: 13px; }
.injecao-lista li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.injecao-lista li:last-child { border-bottom: 0; }
.injecao-trecho { color: var(--muted); font-style: italic; }
.aviso-injecao { border-left: 4px solid var(--danger, #d92d20); }

/* Política de provedor: a regra do contrato aparece antes da configuração. */
.aviso-politica { border-left: 4px solid var(--accent, #1570ef); }

/* Motor processual: o ponto reconhecido, a evidência e o que cabe dali. */
.motor-lista { list-style: none; margin: 8px 0 14px; padding: 0; }
.motor-candidato, .motor-ato { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.motor-escolhido { border-color: var(--accent, #1570ef); background: rgba(21, 112, 239, .05); }
.motor-ato { border-left: 3px solid var(--accent, #1570ef); }

/* Abas dentro de uma tela longa. Horizontais, ao contrário do índice vertical
   de Configurações, que resolve outro problema. */
.abas-da-tela { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.abas-da-tela .aba { border: 0; background: transparent; box-shadow: none; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; }
.abas-da-tela .aba:hover { color: var(--text); background: rgba(29,78,216,.05); }
.abas-da-tela .aba.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 750; }
.abas-da-tela .aba:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.aba-painel { display: none; }
.aba-painel.active { display: block; }

/* --- Revisão do catálogo processual ------------------------------------- */
/* Duas colunas: a fila à esquerda, sempre visível, e a ficha à direita. A fila
   fica com rolagem própria para que validar cinquenta fichas em sequência não
   vire cinquenta rolagens até o topo. */
/* minmax(0, 1fr) e min-width: 0 nas colunas: com "1fr" puro, o mínimo da
   coluna é o min-content dela — a lista de peças empurrava a página para 596px
   num celular de 375px, e a tela inteira rolava de lado. */
.catalogo-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.catalogo-layout > * { min-width: 0; }
.catalogo-fila { max-height: 70vh; overflow-y: auto; border: 1px solid var(--line, #e2e7ed); border-radius: 8px; }
.catalogo-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line, #eef2f6); }
.catalogo-linha:last-child { border-bottom: none; }
.catalogo-linha.ativa { background: #eef4ff; }
.catalogo-marcar { margin: 0; }
.catalogo-marcar input { width: auto !important; margin: 0; }
.catalogo-abrir { text-align: left; background: none; border: none; cursor: pointer; padding: 2px 0; font: inherit; color: inherit; display: block; }
.catalogo-abrir strong { display: block; font-size: 12.5px; font-weight: 600; }
.catalogo-abrir small { color: #64748b; font-size: 11px; }
.catalogo-secoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.catalogo-secao { text-align: left; border: 1px solid var(--line, #e2e7ed); border-radius: 8px; background: #fff; padding: 8px 10px; cursor: pointer; font: inherit; }
.catalogo-secao.ativa { border-color: #2563eb; background: #eef4ff; }
.catalogo-secao strong { display: block; font-size: 12px; font-weight: 600; }
.catalogo-secao span { font-size: 11px; color: #64748b; }
.catalogo-editor { border: 1px solid var(--line, #e2e7ed); border-radius: 8px; padding: 14px; min-height: 200px; }
.catalogo-editor-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.catalogo-editor-cabeca h3 { margin: 0; font-size: 15px; }
.catalogo-editor-cabeca p { margin: 2px 0 0; font-size: 11.5px; color: #64748b; }
.catalogo-grupo { border: 1px solid var(--line, #eef2f6); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.catalogo-grupo legend { font-size: 11.5px; font-weight: 600; color: #475569; padding: 0 6px; }
.catalogo-grupo label.falta > select, .catalogo-grupo label.falta > input, .catalogo-grupo label.falta > textarea { border-color: #e0a94a; background: #fffdf6; }
.catalogo-grupo .obrigatorio { color: #b45309; }
.catalogo-artigos { border: 1px solid var(--line, #eef2f6); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; background: #fbfcfe; max-height: 46vh; overflow-y: auto; }
.catalogo-artigos summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.catalogo-artigos article { border-top: 1px solid var(--line, #eef2f6); padding: 8px 0; }
.catalogo-artigos h4 { margin: 0 0 4px; font-size: 12px; }
.catalogo-artigos p { margin: 0; font-size: 12px; white-space: pre-wrap; }
.catalogo-artigos small { color: #64748b; font-size: 10.5px; }
.catalogo-lote { border: 1px solid #cbd8ef; background: #f6f9ff; border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.catalogo-lote-cabeca { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
@media (max-width: 900px) {
  .catalogo-layout { grid-template-columns: minmax(0, 1fr); }
  .catalogo-fila { max-height: 40vh; }
}
.catalogo-proposta { border: 1px solid #cbd8ef; background: #f6f9ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.catalogo-proposta-cabeca { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.catalogo-proposta-cabeca small { color: #64748b; font-size: 10.5px; }
.catalogo-proposta-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.catalogo-proposta-lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; border-top: 1px solid #e3ebf8; font-size: 12px; }
.catalogo-proposta-lista li small { color: #64748b; font-size: 10.5px; }

/* Entrada guiada do catálogo: três passos, um botão e uma barra de progresso.
   A tela antiga abria com números e 224 linhas, e não dizia o que fazer. */
.catalogo-passos { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; padding: 0; }
.catalogo-passos li { border: 1px solid var(--line, #e2e7ed); border-left: 3px solid #2563eb; border-radius: 6px; padding: 8px 12px; background: #fbfcfe; }
.catalogo-passos strong { display: block; font-size: 12.5px; }
.catalogo-passos span { font-size: 11.5px; color: #64748b; }
.catalogo-comecar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.catalogo-progresso { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; }
.catalogo-barra { display: inline-block; width: 160px; height: 7px; border-radius: 4px; background: #e6ebf2; overflow: hidden; }
.catalogo-barra > span { display: block; height: 100%; background: #2563eb; }
.catalogo-coluna-fila { display: flex; flex-direction: column; gap: 8px; }
.catalogo-busca { font-size: 11.5px; color: #475569; }
.catalogo-convite { padding: 18px; }
.catalogo-convite h3 { margin: 0 0 8px; font-size: 15px; }
.catalogo-convite p { font-size: 12.5px; color: #475569; margin: 0 0 8px; }
.catalogo-atalho { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid #cbd8ef; background: #f6f9ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; }
.catalogo-rotulo { display: block; font-size: 12px; font-weight: 600; }
.catalogo-rotulo em { font-style: normal; color: #b45309; font-weight: 700; }
.catalogo-ajuda { display: block; color: #64748b; font-size: 10.5px; margin-top: 2px; }
.catalogo-avancado > summary { cursor: pointer; padding: 12px 14px; }
.catalogo-avancado > summary span { display: block; font-size: 11.5px; color: #64748b; font-weight: 400; }
.catalogo-avancado-corpo { padding: 0 14px 14px; }
.catalogo-avancado-corpo h3 { font-size: 12.5px; margin: 14px 0 6px; }

/* Folha de conferência: a peça escrita para ler, não para preencher. */
.catalogo-bloco { font-size: 11.5px; color: #475569; min-width: 280px; }
.catalogo-peca { border: 1px solid var(--line, #e2e7ed); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.catalogo-peca.incompleta { border-color: #e0a94a; background: #fffdf6; }
.catalogo-peca > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.catalogo-peca > header h3 { margin: 0; font-size: 14.5px; }
.catalogo-peca > header p { margin: 2px 0 0; font-size: 11.5px; color: #64748b; }
.catalogo-peca-linhas { list-style: none; margin: 10px 0; padding: 0; }
.catalogo-peca-linhas li { padding: 4px 0 4px 10px; border-left: 2px solid #e6ebf2; font-size: 12.5px; }
.catalogo-peca-linhas li.da-ia { border-left-color: #2563eb; }
.catalogo-peca-linhas .rotulo { font-weight: 600; color: #334155; }
.catalogo-peca-linhas small { display: block; color: #64748b; font-size: 10.5px; }
.catalogo-peca > footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.catalogo-peca .catalogo-artigos { max-height: 34vh; }
.catalogo-paginacao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: #64748b; padding: 6px 0 2px; }
.catalogo-momento-novo { border: 1px dashed #2563eb; background: #f6f9ff; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }
.catalogo-momento-novo em { font-style: normal; background: #e6edfb; padding: 0 3px; border-radius: 3px; }
details.catalogo-proposta > summary { cursor: pointer; list-style: revert; }
.catalogo-titulo-passo { font-size: 13px; margin: 18px 0 4px; }
.catalogo-ritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.catalogo-rito { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #e0a94a; background: #fffdf6; border-radius: 8px; padding: 8px 10px; }
.catalogo-rito.pronta { border-color: var(--line, #e2e7ed); background: #fff; }
.catalogo-rito strong { display: block; font-size: 12.5px; }
.catalogo-rito small { display: block; font-size: 11px; color: #64748b; margin-bottom: 3px; }
.catalogo-tudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid #2563eb; background: #f2f7ff; border-radius: 8px; padding: 12px 14px; margin: 14px 0 6px; }
.catalogo-tudo strong { display: block; font-size: 13px; }
.catalogo-tudo span { display: block; font-size: 11.5px; color: #475569; max-width: 62ch; }
.catalogo-peca.com-duvida { border-color: #2563eb; }
.catalogo-duvida { border-left: 3px solid #2563eb; background: #f2f7ff; border-radius: 0 6px 6px 0; padding: 6px 10px; font-size: 12px; margin: 8px 0; }
.catalogo-agora { border: 1px solid #cbd8ef; background: #f6f9ff; border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.catalogo-agora > strong { font-size: 13px; }
.catalogo-agora ol { margin: 6px 0 0; padding-left: 18px; }
.catalogo-agora li { font-size: 12.5px; margin-bottom: 4px; }
.catalogo-agora em { font-style: normal; font-weight: 600; }
.motor-papel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; font-size: 11.5px; color: #475569; }
.motor-ato-outro { opacity: .82; }
.motor-outros > summary { cursor: pointer; font-size: 12.5px; margin: 10px 0 4px; }
.motor-adiante { border-left: 3px solid #94a3b8; background: #fbfcfe; }
.motor-adiante em { font-style: normal; background: #eef2f7; padding: 0 3px; border-radius: 3px; }
/* A evolução da peça: o que passou, o que corre agora e o que vem. */
.barra-etapas { height: 6px; border-radius: 999px; background: #e7ecf3; overflow: hidden; margin: 10px 0; }
.barra-etapas-cheia { height: 100%; background: linear-gradient(90deg, #2563eb, #38bdf8); transition: width .4s ease; }
.peca-etapas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.peca-etapas li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.peca-etapas .etapa-marca { display: inline-flex; justify-content: center; color: #2563eb; }
.peca-etapas li.etapa-feita { color: #475569; }
.peca-etapas li.etapa-feita .etapa-marca { color: #16a34a; }
.peca-etapas li.etapa-agora { font-weight: 600; }
.peca-etapas li.etapa-depois { opacity: .55; }

/* Tela publicada antes do servidor (ou depois): dizer, em vez de deixar a
   pessoa procurar um recurso que não está na versão que ela carregou. */
.aviso-tela-velha { position: fixed; left: 50%; transform: translateX(-50%); top: 0; z-index: 2000; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: min(920px, calc(100vw - 24px)); padding: 10px 16px; border-radius: 0 0 12px 12px; background: #7a2e0e; color: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.35); font-size: 12.5px; }
.aviso-tela-velha .aviso-fechar { background: transparent; border: 0; color: #fff; font-size: 14px; line-height: 1; padding: 4px 6px; cursor: pointer; opacity: .8; }
.aviso-tela-velha .aviso-fechar:hover { opacity: 1; }
@media (max-width: 720px) { .aviso-tela-velha { font-size: 11.5px; padding: 8px 10px; gap: 8px; } }
.aviso-tela-velha code { background: rgba(255,255,255,.16); padding: 1px 5px; border-radius: 4px; }

/* O preparo do ato, passo a passo. O selo "preparando este ato" não dizia o que
   estava preparado nem o que faltava, e o usuário ficou esperando um
   processamento que nunca existiu. */
.motor-preparo { border-left: 3px solid #2563eb; }
/* No lugar do clique: o que aconteceu, o que falta e o botão do próximo passo. */
.motor-proximo-passo { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; }
.motor-passos { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 6px; }
.motor-passos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line, #e2e7ed); border-radius: 6px; padding: 7px 10px; background: #fff; font-size: 12.5px; }
.motor-passos li.passo-feito { opacity: .72; }
.motor-passos li.passo-agora { border-color: #2563eb; box-shadow: inset 3px 0 0 #2563eb; }
.motor-passos li.passo-depois { opacity: .6; }
.motor-passos .mini-help-inline { display: inline; }

.motor-cenario { border-left: 3px solid #2563eb; background: #f8fbff; padding: 8px 12px; border-radius: 0 8px 8px 0; margin-bottom: 8px; }
.motor-cenario-outro { border-left-color: #cbd5e1; background: #fbfcfe; }
.motor-cenario em { font-style: normal; background: #eef2f7; padding: 0 3px; border-radius: 3px; }
.motor-cenario-atos { font-size: 12.5px; margin: 6px 0; }
.motor-cenario-ato { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 0; }

/* "O que está acontecendo": a barra de 2px no topo avisava que ALGO rodava, e o
   usuário ficava sem saber o quê. Esta caixa nomeia a ação, conta o tempo e
   explica quando passa do normal. */
.processando { position: fixed; right: 18px; bottom: 96px; z-index: 110; display: flex; align-items: flex-start; gap: 10px;
  background: #0f2544; color: #fff; border-radius: 10px; padding: 10px 14px; max-width: 340px;
  box-shadow: 0 10px 28px rgba(15, 37, 68, .28); font-size: 12.5px; }
/* O botão clicado acusa o próprio clique: roda girando, rótulo do que está
   fazendo e trava contra clique duplo. Sem isto, a resposta ficava só na caixa
   do canto da tela — longe de onde o olho está. */
/* Botão travado: cara de indisponível, mas ainda clicável — o clique responde
   com o motivo, em vez de o navegador engolir o evento. */
.btn-travado { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-travado:hover { filter: none; }

.btn-ocupado { position: relative; cursor: progress; opacity: 1 !important; white-space: nowrap; }
.btn-ocupado > span { display: inline-flex; align-items: center; vertical-align: middle; }
.btn-roda { width: 12px; height: 12px; margin-right: 7px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: processando-gira .7s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn-roda { animation-duration: 2.4s; } }

.processando.demorando { background: #7a4a10; }
.processando-texto strong { display: block; font-size: 13px; }
.processando-texto span { display: block; opacity: .85; font-size: 11.5px; }
.processando-texto small { display: block; margin-top: 4px; opacity: .8; font-size: 10.5px; line-height: 1.35; }
.processando-roda { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: processando-gira .8s linear infinite; }
@keyframes processando-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .processando-roda { animation-duration: 2.4s; } }
@media (max-width: 720px) { .processando { left: 12px; right: 12px; bottom: 86px; max-width: none; } }
.prova-documento { border-left: 3px solid #7c3aed; }
.prova-lista { list-style: none; margin: 8px 0; padding: 0; }
.prova-ficha { border-top: 1px solid var(--line, #eef2f6); padding: 8px 0; }
.prova-detalhe > summary { cursor: pointer; font-size: 11.5px; color: #475569; margin-top: 4px; }
.prova-detalhe p { font-size: 12px; margin: 6px 0; }
.prova-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* Áreas e segmentos do escritório: etiquetas que ligam advogado a caso. */
.areas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.areas-lista .empty-state { width: 100%; }
.etiqueta-area { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--cor-area, #2f6fed) 14%, #fff); color: #172539; border: 1px solid color-mix(in srgb, var(--cor-area, #2f6fed) 45%, #fff); }
.etiqueta-area::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-area, #2f6fed); }
.etiqueta-area .icon-btn { width: 18px; height: 18px; font-size: 12px; line-height: 1; padding: 0; }
.etiqueta-area.mini { font-size: 11px; padding: 1px 8px 1px 6px; }
.case-card .etiquetas-do-caso { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.case-search-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.areas-do-usuario { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }

/* Cálculo em massa (agente de regras) em Peças em lote */
.lote-calculo { margin: 10px 0 14px; padding: 12px 14px 14px; border: 1px solid #d9dee7; border-radius: 12px; background: #fff; }
.lote-calculo .panel-head { margin-bottom: 8px; align-items: flex-start; }
.lote-calculo .panel-head h3 { margin: 0 0 2px; font-size: 1.05rem; }
.lote-calculo .form-grid.compact label span.mini-help-inline { display: block; margin-top: 2px; }
.lote-calculo .form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calc-table td.num, .calc-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-table td small { color: #5b6573; }

/* Homologação: faixa fina no topo para nunca confundir com a produção */
body.ambiente-homolog::before { content: 'HOMOLOGAÇÃO — ambiente de testes, não é o do cliente'; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #b4541a; color: #fff; text-align: center; font: 600 12px/22px system-ui, Segoe UI, Arial, sans-serif; letter-spacing: .02em; pointer-events: none; }
body.ambiente-homolog { padding-top: 22px; }

/* Biblioteca de modelos do escritório (Configurações → Peças e Visual Law) */
.modelos-lista .data-table td { vertical-align: top; }
.modelos-lista .card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.modelos-lista .card-actions label.btn { margin: 0; cursor: pointer; }

/* A MONTAGEM DO MODELO POR SEÇÕES (Onda 1 / T4). A lista abre dentro da linha
   do modelo e é curta de propósito: montar é dizer o que vem primeiro, e uma
   lista que precisa de rolagem para isso já perdeu a batalha. */
.montagem-do-modelo > summary { cursor: pointer; }
.lista-de-secoes { list-style: decimal; margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.lista-de-secoes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.35; }
.lista-de-secoes li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* As setas só aparecem com o ponteiro ou com o foco do teclado: em repouso a
   lista é o que a pessoa lê, e não uma parede de botões. */
.acoes-da-secao { display: flex; gap: 2px; flex-shrink: 0; opacity: .35; transition: opacity .12s ease-in-out; }
.lista-de-secoes li:hover .acoes-da-secao,
.acoes-da-secao:focus-within { opacity: 1; }
.acoes-da-secao .icon-btn[disabled] { opacity: .3; cursor: default; }
.acoes-da-montagem { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 10px; }
.acoes-da-montagem label { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) {
  /* Alvo pequeno em tela de toque não se acerta: aqui as ações ficam sempre
     visíveis e com folga, em vez de dependerem de um ponteiro que não existe. */
  .acoes-da-secao { opacity: 1; gap: 6px; }
  .lista-de-secoes li { flex-wrap: wrap; }
}
.modelos-lista details summary { cursor: pointer; }

/* Matérias: painel em Configurações e bloco "Matérias desta peça" na CecilIA */
.materias-lista { display: grid; gap: 10px; }
.materia-card { padding: 10px 12px; border: 1px solid #d9dee7; border-radius: 10px; background: #fff; }
.materia-card.materia-rascunho { background: #fbfaf6; border-style: dashed; }
.materia-card .meta-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.materia-card .card-actions { display: flex; gap: 6px; margin-top: 6px; }
.materias-da-peca .materias-opcoes { display: grid; gap: 6px; margin-top: 8px; }
.materia-opcao { display: flex; gap: 8px; align-items: flex-start; }
.materia-opcao small { display: block; color: #5b6573; }
.notice.ok { border-color: #9ad0a8; background: #f1faf3; }

/* Sugestões: matérias para o caso e precedentes do banco para a matéria */
.materia-sugestao { margin-top: 8px; padding: 8px 10px; border: 1px dashed #c9d2df; border-radius: 8px; background: #fff; }
.materia-sugestao .meta-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.materia-sugestao em { color: #3b4657; font-style: normal; }
.materia-opcao-sugerida { background: #f1faf3; border-radius: 6px; padding: 2px 4px; }

/* Atalhos na caixa de instrução (# @ /) */
.atalhos-dica { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.atalhos-dica kbd { font: 600 11px/1 ui-monospace, Consolas, monospace; background: #eef1f5; border: 1px solid #cfd6df; border-radius: 4px; padding: 2px 5px; }
.atalhos-lista { margin-top: 4px; border: 1px solid #c9d2df; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(23,37,57,.12); max-height: 240px; overflow: auto; }
.atalho-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; cursor: pointer; font: inherit; }
.atalho-item + .atalho-item { border-top: 1px solid #eef1f5; }
.atalho-item.ativo, .atalho-item:hover { background: #f1f5fb; }
.atalho-item strong { display: block; font-size: .92rem; }
.atalho-item small { display: block; color: #5b6573; }
.atalho-vazio { padding: 8px 10px; color: #5b6573; font-size: .85rem; }

/* Modo do modelo (rigoroso / flexível / molde) */
.modo-do-modelo { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; color: #5b6573; }
.modo-do-modelo select { font-size: .8rem; padding: 2px 6px; width: auto; }

/* Perfil de redação por pessoa */
.perfil-redacao-lista { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.perfil-redacao-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff; }
.perfil-redacao-lista li.desligada { opacity: .6; }