/* VAMOS — powered by Venturini IP
   Identidade: azul-marinho #0A2B4D e laranja #EF6224 do logo da Venturini IP,
   Montserrat nos títulos (geométrica como o logotipo) e Inter no texto. */

:root {
  --marinho: #0A2B4D;
  --marinho-2: #123A63;
  --laranja: #EF6224;
  --laranja-claro: #FDEDE5;

  --fundo: #F3F5F8;
  --superficie: #FFFFFF;
  --superficie-2: #F7F9FB;
  --texto: #142235;
  --titulo: #0A2B4D;
  --sutil: #5B6B7F;
  --borda: #E1E6EC;
  --marca: #0A2B4D;
  --marca-claro: #EBF1F7;
  --botao: #0A2B4D;
  --botao-hover: #123A63;
  --botao-texto: #FFFFFF;
  --foco: rgba(239, 98, 36, .45);

  --ok: #15803D;     --ok-fundo: #E5F4EA;
  --info: #1D4F86;   --info-fundo: #E7EFF8;
  --aviso: #8A5A00;  --aviso-fundo: #FEF3D3;
  --alerta: #C2410C; --alerta-fundo: #FFEBDD;
  --perigo: #B42318; --perigo-fundo: #FDE6E4;
  --neutro: #4B5768; --neutro-fundo: #EEF1F5;

  --raio: 12px;
  --sombra: 0 1px 2px rgba(10, 43, 77, .06), 0 6px 20px rgba(10, 43, 77, .05);
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fonte-titulo: "Montserrat", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0A1420;
    --superficie: #101D2B;
    --superficie-2: #142436;
    --texto: #E4EAF2;
    --titulo: #F2F5F9;
    --sutil: #94A4B8;
    --borda: #22354B;
    --marca: #8DB6E6;
    --marca-claro: #172B42;
    --botao: #2C66A8;
    --botao-hover: #3574BD;
    --laranja-claro: #3A2116;
    --ok: #6BD39A;     --ok-fundo: #12301F;
    --info: #8DB6E6;   --info-fundo: #16283E;
    --aviso: #F2C55C;  --aviso-fundo: #36290C;
    --alerta: #F6A06E; --alerta-fundo: #3D2213;
    --perigo: #F58A80; --perigo-fundo: #40191A;
    --neutro: #B4BFCC; --neutro-fundo: #1E2B3B;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fundo); color: var(--texto);
  font-family: var(--fonte); line-height: 1.5; font-feature-settings: "cv11", "ss01";
}
a { color: var(--marca); text-underline-offset: 2px; }
a:hover { color: var(--laranja); }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--titulo); letter-spacing: -.01em; }
h1 { font-size: 1.7rem; font-weight: 700; margin: 0 0 .25rem; }
h2 { font-size: 1.08rem; font-weight: 700; margin: 0 0 .9rem; }
h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .6rem; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ cabeçalho */
.topo { background: var(--marinho); color: #fff; border-bottom: 3px solid var(--laranja); position: sticky; top: 0; z-index: 20; }
.topo-interno { max-width: 1320px; margin: 0 auto; padding: 0 1.25rem; min-height: 64px; display: flex; align-items: center; gap: 1.25rem; }
.marca { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.marca:hover { color: #fff; }
.marca-simbolo { width: 30px; height: 30px; }
.marca-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; letter-spacing: .16em; }
.powered { display: flex; align-items: center; gap: .45rem; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.18); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; }
.powered img { height: 32px; width: auto; }
.menu { display: flex; align-self: stretch; gap: .2rem; flex: 1; justify-content: center; }
.menu a { display: flex; align-items: center; padding: 0 .85rem; color: rgba(255,255,255,.75); text-decoration: none; font-weight: 500; font-size: .93rem; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.menu a:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu a.ativo { color: #fff; border-bottom-color: var(--laranja); font-weight: 600; }
.usuario { position: relative; }
.usuario summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; color: #fff; padding: .3rem .4rem; border-radius: 10px; }
.usuario summary::-webkit-details-marker { display: none; }
.usuario summary:hover { background: rgba(255,255,255,.08); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--laranja); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; letter-spacing: .02em; flex: none; }
.usuario-nome { display: flex; flex-direction: column; line-height: 1.2; font-size: .88rem; font-weight: 600; max-width: 190px; }
.usuario-nome small { color: rgba(255,255,255,.62); font-weight: 400; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-menu { position: absolute; right: 0; top: calc(100% + .5rem); background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: .4rem; min-width: 180px; box-shadow: 0 12px 32px rgba(10,43,77,.18); }
.usuario-menu a, .usuario-menu button { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: .9rem; }
.usuario-menu a:hover, .usuario-menu button:hover { background: var(--marca-claro); color: var(--texto); }

/* ------------------------------------------------------------ estrutura */
.conteudo { width: 100%; max-width: 1320px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; flex: 1; }
.cabecalho { margin-bottom: 1.4rem; }
.cabecalho.pasta { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.cabecalho > .sutil:first-child a { text-decoration: none; }
.titulo-invencao { font-size: 1.02rem; margin: .25rem 0 .6rem; max-width: 900px; color: var(--texto); }
.sutil { color: var(--sutil); font-size: .87rem; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.vazio { color: var(--sutil); padding: 1.25rem; text-align: center; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.25rem 1.35rem; margin-bottom: 1.25rem; }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.cartao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cartao-topo a { font-size: .88rem; font-weight: 600; text-decoration: none; }

.rodape { max-width: 1320px; width: 100%; margin: 0 auto; padding: 1.1rem 1.25rem 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--borda); color: var(--sutil); font-size: .8rem; }
.rodape strong { font-family: var(--fonte-titulo); letter-spacing: .12em; color: var(--titulo); }
.rodape-powered { display: flex; align-items: center; gap: .5rem; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; }
.rodape-powered img { height: 30px; width: auto; }
.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) { .logo-claro { display: none; } .logo-escuro { display: inline; } }

/* ------------------------------------------------------------ indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.indicador { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.1rem 1rem 1.25rem; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; gap: .15rem; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.indicador::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--marinho); }
@media (prefers-color-scheme: dark) { .indicador::before { background: var(--marca); } }
.indicador .valor { font-family: var(--fonte-titulo); font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: var(--titulo); }
.indicador .rotulo { color: var(--sutil); font-size: .85rem; }
.indicador.aviso::before { background: #E3A008; }
.indicador.alerta::before { background: var(--laranja); }
.indicador.perigo::before { background: var(--perigo); }
.indicador.perigo .valor { color: var(--perigo); }
a.indicador:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,43,77,.10); color: var(--texto); }

/* ------------------------------------------------------------ tabelas */
/* As tabelas se ajustam à largura da tela: nada de barra de rolagem horizontal.
   Cabeçalhos e células quebram linha e os números longos (nº da GRU) quebram
   quando o espaço aperta, em vez de empurrar a largura. */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela td { overflow-wrap: anywhere; }
.tabela td .botao { overflow-wrap: normal; }  /* rótulos de botão só quebram no espaço, não no meio da palavra */
.tabela .nowrap { white-space: normal; }
.tabela th { text-align: left; font-weight: 600; color: var(--sutil); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: .7rem .8rem; background: var(--superficie-2); border-bottom: 1px solid var(--borda); white-space: normal; }
.tabela td { padding: .7rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--marca-claro); }
.tabela tr.destaque td:first-child { box-shadow: inset 3px 0 0 var(--laranja); }
.cartao:not(.sem-padding) .tabela th:first-child, .cartao:not(.sem-padding) .tabela td:first-child { padding-left: .4rem; }
.acoes { white-space: normal; }  /* botões empilham quando a largura aperta, em vez de forçar rolagem */
.acoes .botao, .acoes form { margin: 0 .2rem .3rem 0; }

/* ------------------------------------------------------------ chips */
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; margin: .12rem 0; line-height: 1.5; }
.chip.ok { background: var(--ok-fundo); color: var(--ok); }
.chip.info { background: var(--info-fundo); color: var(--info); }
.chip.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.chip.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.chip.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.chip.neutro { background: var(--neutro-fundo); color: var(--neutro); }
.chip.venturini { background: var(--laranja); color: #fff; }
.chip.cliente { background: var(--botao); color: var(--botao-texto); }

/* ------------------------------------------------------------ botões e formulários */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; background: var(--botao); color: var(--botao-texto); border: 1px solid var(--botao); border-radius: 8px; padding: .5rem 1rem; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.botao:hover { background: var(--botao-hover); border-color: var(--botao-hover); color: var(--botao-texto); }
.botao.secundario { background: var(--superficie); color: var(--marca); border-color: var(--borda); }
.botao.secundario:hover { background: var(--marca-claro); border-color: var(--marca); color: var(--marca); }
.botao.destaque { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.botao.destaque:hover { background: #D9531A; border-color: #D9531A; }
.botao.mini { padding: .22rem .6rem; font-size: .78rem; border-radius: 6px; }
.botao.largo { width: 100%; padding: .7rem 1rem; }
button.link { background: none; border: 0; color: var(--marca); cursor: pointer; padding: .15rem 0; font: inherit; font-size: .87rem; text-decoration: underline; text-underline-offset: 2px; }
button.link.perigo { color: var(--perigo); }
form.inline { display: inline; }

.filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.filtros label { display: flex; flex-direction: column; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sutil); gap: .3rem; }
.filtros-botoes { display: flex; gap: .5rem; margin-left: auto; }
input, select, textarea { font: inherit; font-size: .92rem; padding: .5rem .65rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); max-width: 100%; text-transform: none; letter-spacing: normal; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px var(--foco); }
input[type=checkbox], input[type=radio] { accent-color: var(--laranja); width: 1rem; height: 1rem; }
/* sem o halo quadrado laranja em volta de rádios/checkboxes; foco de teclado discreto */
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
textarea { width: 100%; }
.formulario label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; font-size: .88rem; font-weight: 600; }
.formulario label.checkbox { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; }
.formulario label small { font-weight: 400; color: var(--sutil); }
.formulario.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; margin-top: .9rem; }
.formulario.grade .botoes { grid-column: 1 / -1; }
.formulario-recolhido { margin-top: .9rem; }
.formulario-recolhido > summary { list-style: none; }
.formulario-recolhido > summary::-webkit-details-marker { display: none; }
.formulario-recolhido[open] > summary { margin-bottom: .7rem; }
.erro { color: var(--perigo); font-weight: 400; }
.botoes { display: flex; gap: .5rem; justify-content: flex-end; }

.msg { padding: .75rem 1rem; border-radius: 10px; margin-bottom: .9rem; border: 1px solid transparent; font-size: .92rem; }
.msg-success { background: var(--ok-fundo); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.msg-warning { background: var(--aviso-fundo); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 25%, transparent); }
.msg-error { background: var(--perigo-fundo); color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 25%, transparent); }
.msg-info { background: var(--info-fundo); color: var(--info); }

/* ------------------------------------------------------------ pasta */
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.lista li:last-child { border-bottom: 0; }
.lista li.apagado { opacity: .55; }
.historico { max-height: 480px; overflow-y: auto; padding-right: .3rem; }
.nota { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .7rem; }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.dados { display: grid; grid-template-columns: 140px 1fr; gap: .45rem .9rem; margin: 0; }
.dados dt { color: var(--sutil); font-size: .85rem; }
.dados dd { margin: 0; }

.abas-ancora { display: flex; gap: .4rem; margin: 0 0 1.1rem; flex-wrap: wrap; }
.abas-ancora a { padding: .38rem .9rem; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; font-size: .86rem; font-weight: 500; color: var(--texto); }
.abas-ancora a:hover { border-color: var(--laranja); color: var(--laranja); }
section[id] { scroll-margin-top: 84px; }

details.mais { display: inline-block; font-size: .84rem; }
details.mais summary { cursor: pointer; color: var(--sutil); }
details.mais form { display: flex; flex-direction: column; align-items: flex-start; padding: .3rem 0; }
.mais-despachos { margin-top: .4rem; }
.mais-despachos > summary { cursor: pointer; color: var(--marca); font-size: .9rem; font-weight: 600; padding: .35rem 0; }

/* ------------------------------------------------------------ diálogos */
dialog { border: 0; border-top: 4px solid var(--laranja); border-radius: 14px; padding: 1.4rem 1.5rem; width: min(480px, 92vw); background: var(--superficie); color: var(--texto); box-shadow: 0 24px 60px rgba(10,43,77,.3); }
dialog::backdrop { background: rgba(10, 27, 45, .55); backdrop-filter: blur(2px); }
dialog h3 { font-size: 1.1rem; margin-bottom: .2rem; }
dialog label { display: flex; flex-direction: column; gap: .3rem; margin: .55rem 0; font-size: .88rem; font-weight: 600; }
dialog .campos label { margin-bottom: .75rem; }
.opcoes-instrucao { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; }
.opcoes-instrucao .opcao { flex-direction: row; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; font-weight: 400; margin: 0; }
.opcoes-instrucao .opcao:has(input:checked) { border-color: var(--laranja); background: var(--laranja-claro); }

/* ------------------------------------------------------------ login */
.pagina-login .conteudo { max-width: none; padding: 0; display: flex; }
.login { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.login-marca { position: relative; overflow: hidden;
  /* o símbolo do VAMOS (moldura aberta do logo da Venturini IP) em grande escala, translúcido */
  background: url("img/vamos-fundo.8a822011bb15.svg") no-repeat right -70px bottom -70px / 440px auto,
              radial-gradient(120% 90% at 0% 0%, #164675 0%, var(--marinho) 55%, #061B31 100%); color: #fff; padding: 3.5rem 3.5rem 2.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.login-marca-topo { position: relative; z-index: 1; max-width: 460px; margin-top: 8vh; }
.login-simbolo { width: 64px; height: 64px; }
.login-nome { font-family: var(--fonte-titulo); color: #fff; font-size: 3.4rem; font-weight: 800; letter-spacing: .18em; margin: 1.2rem 0 .4rem; }
.login-lema { font-size: 1.2rem; color: rgba(255,255,255,.88); margin: 0 0 2rem; }
.login-pontos { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; color: rgba(255,255,255,.78); }
.login-pontos li { padding-left: 1.4rem; position: relative; }
.login-pontos li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7rem; height: 3px; background: var(--laranja); }
.login-powered { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.6); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.login-powered img { height: 44px; width: auto; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: var(--superficie); }
.login-form form { width: 100%; max-width: 360px; }
.login-form h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.login-form input { width: 100%; padding: .7rem .8rem; }
.login-form .botao { margin-top: .6rem; }
.login-ajuda { margin-top: 1.4rem; }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1080px) {
  .powered { display: none; }
}
@media (max-width: 860px) {
  .duas-colunas { grid-template-columns: 1fr; }
  .topo-interno { flex-wrap: wrap; gap: .5rem 1rem; padding: .5rem 1rem 0; }
  .menu { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; min-height: 44px; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: 0 .7rem; white-space: nowrap; }
  .usuario { margin-left: auto; }
  .usuario-nome { display: none; }
  .login { grid-template-columns: 1fr; }
  .login-marca { padding: 2rem 1.5rem 1.5rem; background-size: 220px auto, auto; background-position: right -40px bottom -50px, 0 0; }
  .login-marca-topo { margin-top: 0; }
  .login-nome { font-size: 2.4rem; }
  .login-pontos { display: none; }
  .login-lema { margin-bottom: 1.5rem; }
  .login-form { padding: 2rem 1rem 3rem; }
}
@media (max-width: 640px) {
  .conteudo { padding: 1.2rem 1rem 2.5rem; }
  .filtros label, .filtros input, .filtros select { width: 100%; }
  .filtros-botoes { margin-left: 0; width: 100%; }
  .filtros-botoes .botao { flex: 1; }
  .dados { grid-template-columns: 1fr; gap: .1rem; }
  .dados dd { margin-bottom: .5rem; }
  .indicadores { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .indicador { padding: .8rem .8rem .8rem 1rem; }
  .indicador .valor { font-size: 1.7rem; }
  .indicador .rotulo { font-size: .8rem; }
  .rodape { justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------ titulares e número INPI */
.campos-gru { display: none; margin: .2rem 0 .6rem; padding: .8rem .9rem; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
form:has(input[name=instrucao][value=pagar]:checked) .campos-gru,
form:has(input[name=instrucao][value=gerar_gru]:checked) .campos-gru { display: block; }
.campos-gru p { margin: 0 0 .4rem; }
label.checkbox-linha { flex-direction: row !important; align-items: center; gap: .5rem; font-weight: 400 !important; }
.filtros label.filtro-check { text-transform: none; letter-spacing: normal; font-size: .88rem; color: var(--texto); padding-bottom: .55rem; }
.destaque-gru { background: var(--laranja-claro); border-radius: 8px; padding: .55rem .7rem; margin: .4rem 0 .6rem; }
.numero-inpi { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.numero-inpi input[type=text] { width: 12rem; padding: .32rem .55rem; font-variant-numeric: tabular-nums; }
.titular { padding: .45rem 0; border-bottom: 1px dashed var(--borda); }
.titular:last-child { border-bottom: 0; }
.titular .numero-inpi { margin-top: .3rem; }
.titular.pagador > div:first-child strong { color: var(--titulo); }

/* ------------------------------------------------------------ cor do número do processo por fase */
/* A cor fica só no número do processo (uma pílula), não na linha inteira. */
.num-fase { display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-weight: 700; text-decoration: none; }
.num-verde    { background: var(--ok-fundo); color: var(--ok); }
.num-laranja  { background: var(--alerta-fundo); color: var(--alerta); }
.num-vermelha { background: var(--perigo-fundo); color: var(--perigo); }
a.num-verde:hover, a.num-laranja:hover, a.num-vermelha:hover { filter: brightness(.95); }
.legenda { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; margin: 0 .1rem; }
.legenda.verde    { background: var(--ok-fundo); color: var(--ok); }
.legenda.laranja  { background: var(--alerta-fundo); color: var(--alerta); }
.legenda.vermelha { background: var(--perigo-fundo); color: var(--perigo); }

/* ------------------------------------------------------------ painel: tabela compacta que cabe na tela */
/* Poucas linhas (teto no servidor) e colunas que se ajustam à largura disponível, sem
   rolagem horizontal — o conteúdo quebra linha quando aperta (ver bloco "tabelas"). */
.painel-tabela .tabela { font-size: .85rem; }
.painel-tabela .tabela th, .painel-tabela .tabela td { padding: .5rem .55rem; }
.painel-tabela .acoes { white-space: normal; }
.painel-tabela .acoes .botao.mini { padding: .18rem .5rem; }
.painel-tabela .acoes .botao.mini, .painel-tabela .acoes form.inline { display: inline-block; margin: 0 .25rem .3rem 0; vertical-align: top; }
.painel-tabela td:nth-child(2) { max-width: 180px; }     /* Titular */
.painel-tabela td:nth-child(5) { max-width: 200px; }     /* Status */
.painel-tabela td:nth-child(5) .chip { white-space: normal; }
.painel-tabela td:nth-child(7) { min-width: 200px; }     /* Ações */
.prazos-cel .sutil { display: inline-block; min-width: 4.6rem; }

/* ------------------------------------------------------------ paginação */
.paginacao { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; padding: 1rem 1.2rem .4rem; }
.paginacao a, .paginacao span { min-width: 2.3rem; text-align: center; padding: .4rem .55rem; border: 1px solid var(--borda); border-radius: 7px; text-decoration: none; font-size: .9rem; color: var(--texto); }
.paginacao a:hover { border-color: var(--marca); color: var(--marca); }
.paginacao .pag-atual { background: var(--botao); color: var(--botao-texto); border-color: var(--botao); font-weight: 700; }
.paginacao .pag-reticencias, .paginacao .desabilitado { border-color: transparent; color: var(--sutil); }

/* ------------------------------------------------------------ excluir pasta (zona de perigo) */
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao.perigo:hover { background: #9a1f15; border-color: #9a1f15; color: #fff; }
.excluir-pasta { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--borda); display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

/* ------------------------------------------------------------ instrução em lote (pasta) */
.barra-lote { display: flex; align-items: center; gap: .7rem; padding: .6rem 1.2rem .2rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ tabelas em telas estreitas */
/* Quando a janela estreita, as colunas de largura fixa cedem e a tabela encolhe para
   caber na tela, em vez de o Painel/Programação rolarem de lado. (Fica no fim do
   arquivo de propósito: precisa vir depois das larguras-base para prevalecer.) */
@media (max-width: 900px) {
  .painel-tabela td:nth-child(2),
  .painel-tabela td:nth-child(5) { max-width: none; }
  .painel-tabela td:nth-child(7) { min-width: 0; }
  .painel-tabela .tabela th, .painel-tabela .tabela td { padding: .45rem .4rem; }
  .tabela { font-size: .82rem; }
}