/* =====================================================================
   Sistema Linq — estilos gerais (baseados no protótipo aprovado)
   As cores e fontes vêm de Configurações › Aparência (variáveis em base.html)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--tam, 14px); }
body { margin: 0; font-family: var(--fonte); color: #0F1B2D; background: #F3F5F9; line-height: 1.5; }
a { color: var(--cor-principal); }
a:hover { filter: brightness(.85); }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.2; }
img { max-width: 100%; }
.oculto { position: absolute !important; left: -9999px; }

/* ---------- Estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.conteudo { flex: 1; min-width: 0; padding: 24px 32px 56px; display: flex; flex-direction: column; gap: 18px; }
.conteudo.estreito { max-width: 1100px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cabecalho h1 { margin: 0; font-size: 1.85rem; }
.subtitulo { color: #475569; font-size: .95rem; margin-top: 4px; }
.migalha { font-size: .93rem; color: #475569; }

/* ---------- Menu lateral (opção A + C) ---------- */
.menu { width: 256px; flex-shrink: 0; background: var(--cor-menu); border-right: 1px solid rgba(255,255,255,.06);
        display: flex; flex-direction: column; padding: 14px 10px; min-height: 100vh; position: sticky; top: 0;
        max-height: 100vh; transition: width .2s; color: #CBD5E1; }
.menu.recolhido { width: 72px; }
.menu.organizando { width: 300px; }
.menu-topo { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; min-height: 40px; }
.menu-marca { width: 34px; height: 34px; border-radius: 9px; background: #2563EB; color: #fff; display: inline-flex;
              align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-weight: 700; flex-shrink: 0; }
.menu-logo { max-width: 100%; object-fit: contain; }
.menu-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-nome strong { color: #fff; font-size: 15px; }
.menu-nome span { font-size: 11.5px; color: #94A3B8; }
.menu-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid #334155; background: transparent; color: #94A3B8;
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 13px var(--fonte); }
.menu-btn:hover { color: #fff; border-color: #64748B; }
.menu-grupos { flex: 1; min-height: 0; overflow-y: auto; }
.menu-grupo-cab { display: flex; align-items: center; gap: 4px; }
.menu-grupo-tit { flex: 1; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
                  font: 700 11px var(--fonte); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px;
                  text-align: left; color: #7D8FAD; }
.menu-grupo-tit:hover { color: var(--cor-menu-destaque); }
.menu-grupo-tit .chev { margin-left: auto; font-size: 12px; transition: transform .15s; }
.menu-grupo.fechado .chev { transform: rotate(-90deg); }
.menu-grupo.fechado .menu-itens { display: none; }
.menu-sep { display: none; height: 1px; background: #1E293B; margin: 10px 8px; }
.menu-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-itens li { display: flex; align-items: center; gap: 4px; }
.menu-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px;
             border-radius: 10px; text-decoration: none; color: #CBD5E1; font-weight: 500; font-size: 14px;
             transition: background .15s, color .15s; }
.menu-item .ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
                 flex-shrink: 0; background: rgba(255,255,255,.05); color: #94A3B8; transition: background .15s, color .15s; }
.menu-item .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item:hover { background: rgba(255,255,255,.08); color: #fff; filter: none; }
.menu-item:hover .ic { color: var(--cor-menu-destaque); background: rgba(255,255,255,.1); }
.menu-item.ativo { background: #2563EB; color: #fff; }
.menu-item.ativo .ic { background: rgba(255,255,255,.18); color: #fff; }
.menu-item .selo { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
                   background: rgba(255,255,255,.08); color: #94A3B8; }
.menu .org { display: none; gap: 4px; }
.menu .org button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #334155; background: transparent;
                    color: #CBD5E1; cursor: pointer; }
.menu-aviso-org { display: none; font-size: 12px; line-height: 1.45; color: #CBD5E1; background: #16213A; border-radius: 8px;
                  padding: 8px 10px; margin-bottom: 6px; }
.menu.organizando .org, .menu.organizando .org-acoes { display: flex; }
.menu.organizando .menu-aviso-org { display: block; }
.menu.organizando .menu-grupo.fechado .menu-itens { display: flex; }
.menu-rodape { padding-top: 12px; margin-top: 8px; border-top: 1px solid #1E293B; display: flex; flex-direction: column; gap: 8px; }
.org-acoes { display: none; gap: 6px; }
.org-acoes button { flex: 1; min-height: 34px; border-radius: 8px; border: 1px solid #334155; background: transparent;
                    color: #CBD5E1; font: 600 12.5px var(--fonte); cursor: pointer; }
.org-acoes button.pri { background: #2563EB; border-color: #2563EB; color: #fff; }
.menu-usuario { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #1E293B; color: #7DD3FC; display: inline-flex; align-items: center;
          justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; text-decoration: none; }
.avatar.ativo { background: #2563EB; color: #fff; }
.menu-usuario-nome { flex: 1; min-width: 0; text-decoration: none; display: flex; flex-direction: column; }
.menu-usuario-nome strong { color: #fff; font-size: 13px; }
.menu-usuario-nome span { color: #94A3B8; font-size: 11.5px; }
.menu-sair { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border: 0; border-radius: 10px;
             background: transparent; color: #94A3B8; font: 500 13.5px var(--fonte); cursor: pointer; }
.menu-sair:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-sair .ic { width: 30px; display: inline-flex; justify-content: center; }
.menu.recolhido .rot, .menu.recolhido .menu-grupo-cab { display: none !important; }
.menu.recolhido .menu-sep { display: block; }
.menu.recolhido .menu-grupo.fechado .menu-itens { display: flex; }
.menu.recolhido .menu-item, .menu.recolhido .menu-usuario, .menu.recolhido .menu-sair { justify-content: center; }
.menu.recolhido .menu-topo { flex-direction: column; }
/* Barras de ajuste (tamanho do logotipo, cantos, texto) */
input[type=range].inp-range { width: 100%; accent-color: var(--cor-principal); min-height: 28px; }

/* ---------- Componentes ---------- */
.card { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card h2 { margin: 0; font-size: 1.2rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
       border-radius: var(--raio); border: 1px solid var(--cor-botao2); background: #fff; color: #0F1B2D;
       font: 500 14px var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #F1F5F9; filter: none; }
.btn.pri { background: var(--cor-botao); border-color: var(--cor-botao); color: var(--cor-botao-texto); }
.btn.pri:hover { filter: brightness(.92); }
.btn.perigo { color: #B91C1C; border-color: #FECACA; }
.btn.perigo:hover { background: #FEF2F2; }
.btn.peq { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn.bloco { width: 100%; min-height: 48px; font-weight: 700; font-size: 15px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes.fim { justify-content: flex-end; }
.selo { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; white-space: nowrap; }
.selo.ok { background: #047857; } .selo.alerta { background: #B45309; } .selo.erro { background: #B91C1C; }
.selo.neutro { background: #475569; } .selo.azul { background: #1D4ED8; }
.aviso { border-radius: 10px; padding: 10px 14px; font-size: .95rem; border: 1px solid; }
.aviso.info { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; }
.aviso.sucesso { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.aviso.erro { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.aviso.alerta { background: #FFFBEB; border-color: #FCD34D; color: #78350F; }
.mensagens { display: flex; flex-direction: column; gap: 8px; }
.ajuda, .hint { font-size: 12.5px; color: #475569; font-weight: 400; }
.ajuda ul { margin: 4px 0 0; padding-left: 18px; }
.vazio { padding: 28px; text-align: center; color: #475569; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > label { font-size: 13px; font-weight: 600; color: #334155; }
.campo .erro { color: #B91C1C; font-size: 12.5px; }
.campo.com-erro .inp { border-color: #DC2626; }
.inp { min-height: 42px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; font: 15px var(--fonte); background: #fff;
       color: #0F1B2D; width: 100%; }
textarea.inp { padding: 10px 12px; min-height: 80px; resize: vertical; }
.inp:focus { outline: 2px solid #93C5FD; border-color: #1D4ED8; }
.inp-codigo { font-size: 22px; letter-spacing: .25em; text-align: center; }
input[type=color].inp-cor { width: 48px; height: 38px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.campo-cor { flex-direction: row; align-items: center; gap: 10px; }
.campo-cor > label { order: 2; font-weight: 500; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin-top: 2px; }
.lista-checks { display: flex; flex-direction: column; gap: 6px; }
.lista-checks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lista-checks label { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 400; }

/* ---------- Tabelas ---------- */
.tabela-caixa { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; }
.rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; min-width: 760px; }
.tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #475569; font-weight: 600; text-align: left;
             padding: 12px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid #F1F5F9; font-size: 14px; vertical-align: middle; }
.tabela tr:hover td { background: #FAFBFF; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #E2E8F0; flex-wrap: wrap; }
.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz input { width: 18px; height: 18px; }

/* ---------- Seções expansíveis (Configurações) ---------- */
details.acc { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; }
details.acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer;
                        font-weight: 600; font-size: 1.08rem; min-height: 56px; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: #475569; }
details.acc[open] > summary::after { content: "−"; }
details.acc > summary:hover { background: #F8FAFC; }
.acc-corpo { padding: 6px 20px 22px; border-top: 1px solid #F1F5F9; display: flex; flex-direction: column; gap: 16px; }
.subtitulo-secao { font-weight: 700; font-size: 14px; color: #334155; margin: 8px 0 -4px; }

/* ---------- Indicadores ---------- */
.kpi { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px; }
.kpi .rotulo { font-size: 12.5px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-family: var(--fonte-titulo); font-size: 2.2rem; font-weight: 700; margin-top: 4px; }
.kpi .det { font-size: 13px; color: #475569; }

/* ---------- MFA / Minha conta ---------- */
.linha { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F1F5F9; flex-wrap: wrap; }
.linha:last-child { border-bottom: 0; }
.linha .info { flex: 1 1 260px; }
.linha .info strong { display: block; }
.linha .info .hint { display: block; }
.qr svg { width: 240px; height: 240px; max-width: 100%; display: block; background: #fff; border: 1px solid #CBD5E1; border-radius: 8px; }
.codigos { background: #0F1B2D; color: #E2E8F0; border-radius: 10px; padding: 14px 16px; }
.codigos ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 0; padding-left: 22px;
              font: 600 15px ui-monospace, monospace; }
.nivel { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 18px; border: 1px solid; }
.nivel.bom { background: #EFF6FF; border-color: #BFDBFE; }
.nivel.otimo { background: #ECFDF5; border-color: #A7F3D0; }
.nivel.fraco { background: #FFFBEB; border-color: #FCD34D; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .menu, .menu.recolhido, .menu.organizando { width: 100%; min-height: 0; max-height: none; position: static; }
  .menu.recolhido .menu-grupos { display: none; }
  .conteudo { padding: 18px 16px 40px; }
  .login.dividido .login-lado { flex-basis: 100%; min-height: 0; padding: 28px 24px; }
  .login-frase h1 { font-size: 1.7rem; }
  .config-cartoes { grid-template-columns: 1fr !important; }
}

@media print {
  .menu, .acoes, .nao-imprimir { display: none !important; }
  body { background: #fff; }
}


/* ---------- Tela de login (mesmo formato do SGF) ---------- */
[hidden] { display: none !important; }
.login { min-height: 100vh; display: flex; flex-wrap: wrap; font-family: var(--fonte); }
.login-lado { flex: 1 1 50%; min-height: 100vh; padding: 56px 64px; display: flex; flex-direction: column; gap: 32px;
              background: var(--login-fundo); color: var(--login-texto); }
.login-logo-area { height: var(--login-logo-altura); display: inline-flex; align-items: center; align-self: flex-start;
                   max-width: 100%; }
.login-logo-area img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.login-logo-area.quadro { background: #fff; padding: 12px 16px; border-radius: 14px; box-sizing: border-box; }
.login-logo-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.4rem; }
.login-frase { margin-top: auto; margin-bottom: auto; max-width: 560px; }
.login-frase h1 { margin: 0 0 10px; font-size: 2.3rem; line-height: 1.2; color: inherit; }
.login-frase p { margin: 0; opacity: .85; font-size: .95rem; }
.login-protegido { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .8; }
.login-form-lado { flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
                   padding: 40px 24px; background: var(--login-painel); }
.cartao-login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; color: #0F1B2D; }
.cartao-login h2 { margin: 0; font-size: 1.5rem; }
.cartao-login .btn.bloco { background: var(--login-botao); border-color: var(--login-botao); color: var(--login-botao-texto); }
/* Layout centralizado: fundo em toda a tela e o cartão no meio */
.login.centralizado { background: var(--login-fundo); align-items: center; justify-content: center; flex-direction: column;
                      gap: 24px; padding: 40px 16px; }
.login.centralizado .login-lado { flex: none; min-height: 0; padding: 0; background: none; align-items: center; gap: 0; }
.login.centralizado .login-lado .login-frase, .login.centralizado .login-protegido { display: none; }
.login.centralizado .login-logo-area { align-self: center; }
.login.centralizado .login-form-lado { flex: none; width: 100%; max-width: 440px; border-radius: 16px; padding: 32px;
                                       box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.rodape-login { font-size: 12.5px; color: #475569; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 14px; }
.outros-metodos { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #F1F5F9; padding-top: 12px; }
.outros-metodos a { min-height: 34px; display: flex; align-items: center; font-weight: 600; text-decoration: none; }

/* ---------- Menu: logotipo (só a imagem, à esquerda) ---------- */
.menu-topo.com-logo { padding: 6px 4px 16px 6px; }
.menu-topo.com-logo .menu-logo { width: auto; max-width: 170px; object-fit: contain; object-position: left center; display: block; }
.menu-topo.com-logo .menu-btn { margin-left: auto; }
.so-recolhido { display: none !important; }
.menu.recolhido .so-recolhido { display: inline-flex !important; }

/* ---------- Configurações: seções (como no SGF) ---------- */
.config-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: #334155; }
.secao { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; }
.secao-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; }
.secao-cab:hover { background: #F8FAFC; border-radius: 16px; }
.secao-icone { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.secao-titulos { flex: 1; min-width: 0; }
.secao-titulos strong { display: block; font-size: 1.15rem; font-family: var(--fonte-titulo); }
.secao-titulos span { color: #475569; font-size: .93rem; }
.secao-cab .seta { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: #334155;
                   font-size: 16px; }
.secao-cab .seta:hover { background: #E2E8F0; }
.secao-cab .chev { transition: transform .15s; color: #475569; }
.secao:not(.aberta) .chev { transform: rotate(180deg); }
.secao:not(.aberta) .secao-corpo { display: none; }
.secao-corpo { border-top: 1px solid #F1F5F9; padding: 20px; display: flex; flex-direction: column; gap: 18px; }

/* Aparência: cartões Tela de login + Menu lateral */
.config-cartoes { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cartao { border: 1px solid #E2E8F0; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; background: #fff; }
.cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cartao-cab h3 { margin: 0; font-size: 1.15rem; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px; align-items: start; }
.segmentado ul, .segmentado > div { display: inline-flex; list-style: none; margin: 0; padding: 4px; gap: 4px; border: 1px solid #CBD5E1;
                                    border-radius: 10px; flex-wrap: wrap; }
.segmentado li { margin: 0; }
.segmentado label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; cursor: pointer;
                    font-weight: 600; color: #334155; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label:has(input:checked) { background: #EFF6FF; color: #1D4ED8; }
.cores-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cores-linha .campo { gap: 0; }
.cores-linha .campo > label { position: absolute; left: -9999px; }

/* Prévias */
.pv-login-caixa { position: relative; overflow: hidden; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; }
.pv-login-tela { width: 1280px; height: 720px; transform-origin: 0 0; pointer-events: none; }
.pv-login-tela .login { min-height: 720px; height: 720px; }
.pv-login-tela .login-lado { min-height: 0; }
.pv-menu-fundo { background: #F1F5F9; border-radius: 12px; padding: 24px; display: flex; justify-content: center; }
.pv-menu-fundo .menu { min-height: 0; max-height: none; position: static; border-radius: 14px; width: 256px; }
@media (max-width: 1200px) { .config-cartoes { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .login-frase h1 { font-size: 1.7rem; }
  .login-lado { padding: 28px 24px; }
}
.secao-alternar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 0;
                  text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rotulo-campo { font-size: 13px; font-weight: 600; color: #334155; }
.campo .segmentado { margin-top: 2px; }
.confirmar-inline { border: 1px solid #FCD34D; background: #FFFBEB; border-radius: 12px; padding: 14px 16px; display: flex;
                    flex-direction: column; gap: 12px; }

/* ---------- Pop-up de resultado ---------- */
dialog.popup { border: 0; border-radius: 18px; padding: 32px 28px 24px; width: min(440px, 92vw); text-align: center;
               box-shadow: 0 24px 60px rgba(15, 27, 45, .35); font-family: var(--fonte); color: #0F1B2D; }
dialog.popup::backdrop { background: rgba(15, 27, 45, .45); }
dialog.popup h2 { margin: 14px 0 8px; font-size: 1.45rem; }
dialog.popup p { margin: 0 0 20px; color: #334155; line-height: 1.55; }
dialog.popup .btn { min-width: 140px; }
.popup-icone { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;
               animation: popup-entrar .35s ease-out; }
dialog.popup.ok .popup-icone { background: #DCFCE7; color: #047857; box-shadow: 0 0 0 8px #F0FDF4; }
dialog.popup.falha .popup-icone { background: #FEE2E2; color: #B91C1C; box-shadow: 0 0 0 8px #FEF2F2; }
@keyframes popup-entrar { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Prévia do e-mail ---------- */
.pv-email { padding: 20px 14px; border-radius: 12px; font-family: Arial, Helvetica, sans-serif; }
.pv-email-cartao { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #E2E8F0; }
.pv-email-cab { padding: 20px 24px; }
.pv-email-cab img { width: auto; max-width: 100%; display: block; }
.pv-email-corpo { padding: 22px 24px; font-size: 14px; line-height: 1.6; color: #0F1B2D; }
.pv-email-corpo p { margin: 0 0 14px; }
.pv-email-botao { display: inline-block; padding: 11px 20px; border-radius: 8px; font-weight: bold; margin-bottom: 14px; }
.pv-email-rodape { padding: 16px 24px; background: #F8FAFC; border-top: 1px solid #E2E8F0; font-size: 12px; line-height: 1.6; color: #475569; }

/* ---------- Envio de arquivo (formato do SGF) ---------- */
.arquivo { display: flex; flex-direction: column; gap: 8px; }
.arquivo-atual { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%; padding: 6px 10px;
                 border: 1px solid #E2E8F0; border-radius: 10px; background: repeating-conic-gradient(#F1F5F9 0 25%, #fff 0 50%) 0 0 / 14px 14px;
                 text-decoration: none; color: #334155; font-size: 13px; }
.arquivo-atual img { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.arquivo-atual span { background: rgba(255, 255, 255, .85); padding: 1px 4px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.arquivo-acoes input[type=file] { font: 14px var(--fonte); max-width: 100%; }
.arquivo-nova { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; }
.arquivo-atual img { height: 48px; max-width: 200px; }

/* ---------- Cadastros ---------- */
.abas { display: flex; gap: 6px; border-bottom: 1px solid #E2E8F0; flex-wrap: wrap; }
.aba { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #475569;
       text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.aba.ativa { color: var(--cor-principal); border-bottom-color: var(--cor-principal); }
.bloco-condicao { border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.regras { display: flex; flex-direction: column; gap: 10px; }
.regra { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: #431407; line-height: 1.45; }
.regra .selo { flex-shrink: 0; margin-top: 2px; }
.dias-semana .lista-checks > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dias-semana .lista-checks label { border: 1px solid #CBD5E1; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.dias-semana .lista-checks label:has(input:checked) { background: #EFF6FF; border-color: var(--cor-principal); color: #1E3A8A; font-weight: 600; }

/* ---------- Campo de valor em R$ ---------- */
.campo-moeda { position: relative; display: block; }
.campo-moeda .prefixo { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #475569;
                        font-weight: 600; pointer-events: none; }
.campo-moeda .inp { padding-left: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Notificações (sininho) ---------- */
.barra-topo { display: flex; justify-content: flex-end; margin: -10px -12px -6px 0; }
.sino { position: relative; }
.sino-botao { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff;
              color: #334155; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
              transition: background .15s, color .15s, border-color .15s; }
.sino-botao:hover, .sino-botao[aria-expanded="true"] { background: #EFF6FF; color: var(--cor-principal); border-color: #BFDBFE; }
.sino-num { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
            background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
            border: 2px solid #F3F5F9; }
.sino-num.pulsar { animation: sino-pulsar .6s ease 2; }
@keyframes sino-pulsar { 50% { transform: scale(1.3); } }
.sino-painel { position: absolute; right: 0; top: 50px; width: 400px; max-width: calc(100vw - 32px); background: #fff;
               border: 1px solid #E2E8F0; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 27, 45, .18); z-index: 60;
               display: flex; flex-direction: column; overflow: hidden; }
.sino-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px;
            border-bottom: 1px solid #E2E8F0; }
.sino-lista { max-height: min(60vh, 460px); overflow-y: auto; }
.sino-vazio { padding: 28px 16px; text-align: center; color: #475569; }
.sino-rodape { display: block; text-align: center; padding: 12px; border-top: 1px solid #E2E8F0; font-weight: 600; text-decoration: none; }
.link-botao { border: 0; background: none; color: var(--cor-principal); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.link-botao:hover { text-decoration: underline; }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #F1F5F9; position: relative; }
.notif:last-child { border-bottom: 0; }
.notif.nova { background: #F8FAFF; }
.notif.nova::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; border-radius: 50%;
                      background: var(--cor-principal); transform: translateY(-50%); }
a.notif:hover, .notif-corpo:hover .notif-titulo { color: var(--cor-principal); }
a.notif { text-decoration: none; color: inherit; }
.notif-icone { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center;
               justify-content: center; background: #EFF6FF; color: #1D4ED8; }
.notif-icone.alerta { background: #FFF7ED; color: #C2410C; }
.notif-icone.erro { background: #FEF2F2; color: #B91C1C; }
.notif-icone.ok { background: #ECFDF5; color: #047857; }
.notif-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.notif-titulo { font-weight: 500; color: #0F1B2D; }
.notif.nova .notif-titulo { font-weight: 700; }
.notif-texto { color: #475569; font-size: .93rem; }
.sino-lista .notif-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-quando { color: #64748B; font-size: 12px; }
@media (max-width: 760px) { .barra-topo { margin: 0; } .sino-painel { right: -8px; } }

/* =====================================================================
   Relatórios (Etapa 3)
   ===================================================================== */
.selo-tipo { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px;
             border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--cor-rt);
             margin-right: 6px; vertical-align: middle; }
.selo-tipo.rc { background: var(--cor-rc); }
.btn.btn-rc { background: var(--cor-rc); border-color: var(--cor-rc); color: #fff; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
       line-height: 18px; background: #475569; color: #fff; white-space: nowrap; }
.tag-anexo { background: #E2E8F0; color: #1E293B; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.linha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }

/* ---- Listagem ---- */
.filtros { gap: 12px; }
.filtro-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-opcao { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tag-opcao input { width: 16px; height: 16px; accent-color: var(--cor-principal); }
.tag-opcao:has(input:not(:checked)) .tag { opacity: .55; }
.tag-opcao:has(input:checked) .tag { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15,27,45,.25); }
.segmentado.peq label { padding: 3px 10px; font-size: 13px; }
.tabela-rel td { vertical-align: top; }
.tabela-rel tr.selecionada td { background: #EFF6FF; }
.col-rel { min-width: 280px; }
.rel-codigo { font-weight: 700; color: #0F1B2D; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-assunto { display: block; color: #334155; margin-top: 2px; }
.col-acoes { width: 1%; white-space: nowrap; }
.acoes-icones { display: flex; gap: 2px; justify-content: flex-end; }
.acoes-icones a, .acoes-icones button, .acoes-icones .desligado { width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; color: #334155; border: 0; background: none; cursor: pointer; }
.acoes-icones a:hover, .acoes-icones button:hover { background: #EFF6FF; color: var(--cor-principal); }
.acoes-icones button.perigo:hover { background: #FEF2F2; color: #B91C1C; }
.acoes-icones .desligado { color: #CBD5E1; cursor: not-allowed; }
.barra-lote { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px;
              margin-bottom: 10px; background: #0F1B2D; color: #fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(15,27,45,.2); }
.barra-lote .inp { width: auto; min-width: 180px; }
.barra-lote strong { margin-right: 8px; }
.paginacao.solta { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; }

/* + tag por linha */
.tag-menu { position: relative; display: inline-block; }
.tag-menu > summary { list-style: none; }
.tag-menu > summary::-webkit-details-marker { display: none; }
.tag-mais { cursor: pointer; font-size: 12px; font-weight: 600; color: #475569; border: 1px dashed #94A3B8; border-radius: 999px;
            padding: 1px 9px; line-height: 18px; }
.tag-mais:hover { color: var(--cor-principal); border-color: var(--cor-principal); }
.tag-pop { position: absolute; z-index: 40; top: 26px; left: 0; width: 260px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
           box-shadow: 0 14px 30px rgba(15,27,45,.18); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tag-lista { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.tag-lista .tag-opcao { padding: 3px 4px; border-radius: 6px; }
.tag-lista .tag-opcao:hover { background: #F1F5F9; }

/* Janela de tags */
dialog.janela { border: 0; border-radius: 16px; padding: 22px; width: min(760px, calc(100vw - 32px)); max-height: 86vh;
                box-shadow: 0 24px 60px rgba(15,27,45,.3); }
dialog.janela::backdrop { background: rgba(15,27,45,.45); }
.janela-cab { display: flex; justify-content: space-between; align-items: center; }
.janela-cab h2 { margin: 0; }
.btn-icone { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: #475569;
             display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.btn-icone:hover { background: #F1F5F9; color: #B91C1C; }
.tags-lista { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.tag-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F1F5F9; }
.tag-linha .tag { min-width: 90px; justify-content: center; }
.tag-linha .inp { width: 200px; }
.tag-cores { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ed-cor { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #CBD5E1; cursor: pointer; padding: 0; }
.ed-cor:hover, .ed-cor.escolhida { box-shadow: 0 0 0 2px #0F1B2D; }
.tag-cores input[type="color"] { width: 30px; height: 26px; border: 1px solid #CBD5E1; border-radius: 6px; padding: 1px; background: #fff; cursor: pointer; }

/* ---- Formulário ---- */
.rel-form { display: flex; flex-direction: column; gap: 16px; }
.rel-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.rel-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rel-lateral { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1100px) { .rel-colunas { grid-template-columns: 1fr; } .rel-lateral { position: static; } }
.tipo-rel label:has(input[value="rt"]:checked) { background: var(--cor-rt); color: #fff; }
.tipo-rel label:has(input[value="rc"]:checked) { background: var(--cor-rc); color: #fff; }
.chips-escolha > div { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-escolha label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #CBD5E1; border-radius: 999px; padding: 5px 12px;
                       cursor: pointer; font-size: 14px; }
.chips-escolha input { accent-color: var(--cor-principal); }
.chips-escolha label:has(input:checked) { background: #EFF6FF; border-color: var(--cor-principal); color: #1E3A8A; font-weight: 600; }
.tags-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.totais .total-linha { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #F1F5F9; font-size: 1.05rem;
                       font-variant-numeric: tabular-nums; }
.totais .total-linha:last-child { border-bottom: 0; }
.totais .total-linha.adicional strong { color: #B91C1C; }
.contrato-caixa .regras { margin-top: 8px; font-size: .9rem; }
.contrato-num { margin: 0; }
.acoes-salvar { display: flex; flex-direction: column; gap: 8px; }
.acoes-salvar .btn { width: 100%; justify-content: center; }
.btn.grande { min-height: 48px; font-size: 1.05rem; }

.horarios td { vertical-align: top; }
.horarios .inp { min-width: 0; }
.horarios select.adicional { border-color: #FCA5A5; background-color: #FEF2F2; color: #991B1B; font-weight: 600; }
.horarios tr.madrugada [data-dur]::after { content: " ☾"; color: #6366F1; }
.horarios .sug { font-size: 12px; color: #64748B; margin-top: 4px; line-height: 1.35; }
.horarios .sug.divergente { color: #B45309; }
.horarios .dividir { margin-top: 6px; }
.horarios .linha-erro td { color: #B91C1C; font-size: 13px; padding-top: 0; }
.horarios [data-dur] { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Editor ---- */
.editor { position: relative; border: 1px solid #CBD5E1; border-radius: 12px; background: #fff; }
.editor:focus-within { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.editor-barra { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px;
                border-bottom: 1px solid #E2E8F0; background: #F8FAFC; border-radius: 12px 12px 0 0; }
.ed-btn { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: #334155; cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center; }
.ed-btn:hover { background: #E2E8F0; }
.ed-btn.ativo { background: #DBEAFE; color: #1D4ED8; }
.ed-sep { width: 1px; height: 22px; background: #CBD5E1; margin: 0 4px; }
.ed-espaco { flex: 1; }
.ed-estilo { height: 34px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; padding: 0 8px; font: inherit; font-size: 14px; }
.editor-area { min-height: 320px; max-height: 70vh; overflow-y: auto; padding: 16px 18px; outline: none; line-height: 1.6; }
.editor-area:empty::before { content: attr(data-placeholder); color: #94A3B8; }
.editor.cheia { position: fixed; inset: 12px; z-index: 100; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(15,27,45,.4); }
.editor.cheia .editor-area { flex: 1; max-height: none; }
body.sem-rolagem { overflow: hidden; }
.ed-pop { position: absolute; z-index: 30; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px; width: 280px;
          box-shadow: 0 14px 30px rgba(15,27,45,.18); display: flex; flex-direction: column; gap: 8px; }
.ed-pop > div { display: flex; flex-direction: column; gap: 8px; }
.ed-cores { display: grid; grid-template-columns: repeat(9, 22px); gap: 5px; }
.ed-linha { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.ed-linha .inp[type="number"] { width: 70px; }

/* Conteúdo do editor e do relatório */
.editor-area table, .doc-texto table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.editor-area th, .editor-area td, .doc-texto th, .doc-texto td { border: 1px solid #CBD5E1; padding: 6px 8px; text-align: left; vertical-align: top; }
.editor-area th, .doc-texto th { background: #F1F5F9; }
.editor-area blockquote, .doc-texto blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--cor-principal); background: #F8FAFC; }
.editor-area pre, .doc-texto pre { background: #0F1B2D; color: #E2E8F0; padding: 10px 14px; border-radius: 8px; white-space: pre-wrap;
                                   font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.editor-area h2, .doc-texto h2 { font-size: 1.3rem; margin: 16px 0 6px; }
.editor-area h3, .doc-texto h3 { font-size: 1.12rem; margin: 14px 0 4px; }
.editor-area h4, .doc-texto h4 { font-size: 1rem; margin: 12px 0 4px; }
.editor-area p, .doc-texto p { margin: 0 0 8px; }

/* ---- Visualizar (documento) ---- */
.barra-acoes-rel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.documento { --cor-tipo: var(--cor-rt); background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden;
             max-width: 900px; width: 100%; margin: 0 auto; box-shadow: 0 4px 18px rgba(15,27,45,.06); }
.documento.rc { --cor-tipo: var(--cor-rc); }
.doc-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-top: 6px solid var(--cor-tipo);
           border-bottom: 1px solid #E2E8F0; }
.doc-marca img { max-height: 56px; max-width: 220px; }
.doc-marca strong { font-family: var(--fonte-titulo); font-size: 1.5rem; }
.doc-titulo { text-align: right; display: flex; flex-direction: column; }
.doc-tipo { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-tipo); font-weight: 700; }
.doc-numero { font-family: var(--fonte-titulo); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.doc-data { color: #475569; }
.doc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; padding: 18px 28px; background: #F8FAFC;
            border-bottom: 1px solid #E2E8F0; }
.doc-info > div { display: flex; flex-direction: column; gap: 1px; }
.doc-info span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748B; font-weight: 600; }
.doc-info small { color: #475569; }
.doc-bloco { padding: 16px 28px 4px; }
.doc-bloco h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-tipo); margin: 0 0 8px; }
.doc-assunto { font-size: 1.1rem; font-weight: 600; margin: 0; }
.doc-texto { line-height: 1.65; }
.doc-horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-horarios th { text-align: left; font-size: 12px; color: #64748B; font-weight: 600; border-bottom: 2px solid #E2E8F0; padding: 6px 8px; }
.doc-horarios td { padding: 7px 8px; border-bottom: 1px solid #F1F5F9; }
.doc-horarios tfoot td { font-weight: 700; border-top: 2px solid #E2E8F0; border-bottom: 0; }
.doc-horarios .num { text-align: right; }
.selo-class { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #DCFCE7; color: #166534; }
.selo-class.adicional { background: #FEE2E2; color: #991B1B; }
.selo-mod { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 13px; background: #E0F2FE; color: #075985; }
.selo-mod.presencial { background: #EDE9FE; color: #5B21B6; }
.doc-assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 28px 20px; }
.doc-assinaturas > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.linha-ass { width: 100%; border-top: 1px solid #0F1B2D; margin-bottom: 6px; }
.doc-assinaturas small { color: #475569; }
.doc-rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 14px 28px; border-top: 1px solid #E2E8F0;
              font-size: 12px; color: #475569; background: #F8FAFC; }
.doc-validacao { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.doc-validacao code { font-size: 13px; color: #0F1B2D; }

/* Anexos */
.anexo-icone { width: 44px; height: 44px; border-radius: 10px; background: #F1F5F9; color: #475569; font-size: 11px; font-weight: 800;
               display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.anexo-icone img { width: 100%; height: 100%; object-fit: cover; }
.zona-upload { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; margin-top: 12px; border: 2px dashed #CBD5E1;
               border-radius: 14px; text-align: center; cursor: pointer; background: #F8FAFC; }
.zona-upload:hover, .zona-upload.sobre { border-color: var(--cor-principal); background: #EFF6FF; }
.zona-upload ul { list-style: none; padding: 0; margin: 6px 0 0; font-size: 13px; }
.zona-upload li.erro { color: #B91C1C; }

@media (max-width: 760px) {
  .doc-cab, .doc-info, .doc-bloco, .doc-rodape { padding-left: 16px; padding-right: 16px; }
  .doc-assinaturas { grid-template-columns: 1fr; gap: 36px; }
}
@media print {
  .barra-topo, .migalha, .mensagens, dialog { display: none !important; }
  .conteudo { padding: 0; }
  .documento { border: 0; box-shadow: none; border-radius: 0; max-width: none; }
  .doc-info, .doc-rodape { background: #fff; }
  .doc-horarios tr, .doc-assinaturas { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.validacao { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; }
.validacao dt { color: #64748B; font-size: 13px; }
.validacao dd { margin: 0; }

/* ---------- Barra de filtros dos relatórios ---------- */
.filtros-barra { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.barra-principal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.busca-campo { flex: 1 1 320px; position: relative; display: flex; align-items: center; height: 42px; border: 1px solid #CBD5E1;
               border-radius: 10px; background: #fff; padding: 0 10px; gap: 8px; color: #64748B; }
.busca-campo:focus-within { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.busca-campo input { flex: 1; border: 0; outline: 0; font: inherit; color: #0F1B2D; background: none; min-width: 0; height: 100%; }
.busca-campo .busca-limpar { color: #64748B; text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.busca-campo .busca-limpar:hover { background: #F1F5F9; color: #B91C1C; }
.seg-links { display: inline-flex; background: #F1F5F9; border-radius: 10px; padding: 3px; gap: 2px; }
.seg-links a { padding: 0 14px; height: 36px; display: inline-flex; align-items: center; border-radius: 8px; color: #334155;
               text-decoration: none; font-weight: 600; font-size: 14px; }
.seg-links a:hover { background: #E2E8F0; }
.seg-links a.ativo { background: #fff; color: #0F1B2D; box-shadow: 0 1px 3px rgba(15,27,45,.12); }
.seg-links a.rt.ativo { color: var(--cor-rt); }
.seg-links a.rc.ativo { color: var(--cor-rc); }
.btn-filtros { height: 42px; gap: 6px; }
.btn-filtros[aria-expanded="true"] { background: #EFF6FF; border-color: #BFDBFE; color: var(--cor-principal); }
.btn-filtros .contador { min-width: 20px; height: 20px; border-radius: 10px; background: var(--cor-principal); color: #fff; font-size: 12px;
                         display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.painel-filtros { border-top: 1px solid #E2E8F0; padding-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.painel-grade { display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(180px, .8fr) minmax(300px, 1.4fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .painel-grade { grid-template-columns: 1fr; } }
.periodo { display: flex; align-items: center; gap: 8px; }
.periodo .inp { flex: 1; min-width: 0; }
.periodo span { color: #64748B; font-size: 13px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.atalho { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid #CBD5E1; color: #334155; text-decoration: none; }
.atalho:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.atalho.ativo { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }
.modo-tags { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; margin-left: auto; }
.inp-peq { height: 32px; padding: 0 8px; width: auto; font-size: 13px; }
.painel-rodape { display: flex; justify-content: flex-end; gap: 8px; }
.chips-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #EFF6FF;
               border: 1px solid #BFDBFE; color: #1E3A8A; font-size: 13px; text-decoration: none; }
.chip-filtro span { color: #475569; }
.chip-filtro i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chip-filtro b { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                 font-size: 10px; color: #1E3A8A; }
.chip-filtro:hover { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.chip-filtro:hover b { background: #FECACA; }
.limpar-tudo { font-size: 13px; font-weight: 600; margin-left: 4px; }
.resultado-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; color: #334155; }
.destaque-erro { border-color: #F87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.3); }

/* ---------- Cliente: busca enquanto digita ---------- */
.busca-cliente { position: relative; }
.busca-cliente .inp { padding-left: 34px; padding-right: 32px; }
.busca-cliente .busca-icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #64748B; pointer-events: none; display: flex; }
.busca-cliente .busca-limpar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer;
                               color: #64748B; width: 26px; height: 26px; border-radius: 6px; }
.busca-cliente .busca-limpar:hover { background: #F1F5F9; color: #B91C1C; }
.busca-lista { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: #fff;
               border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 14px 30px rgba(15,27,45,.18); max-height: 320px; overflow-y: auto; }
.busca-lista li[role=option] { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; }
.busca-lista li[role=option] span { font-size: 12px; color: #64748B; }
.busca-lista li.ativo, .busca-lista li[role=option]:hover { background: #EFF6FF; }
.busca-lista .vazio-busca { padding: 10px; color: #64748B; font-size: 14px; }

/* Classificação dos horários: etiqueta automática (clique para trocar) */
.col-class .sel-class { display: none; }
.chip-class { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 8px;
              background: #DCFCE7; color: #166534; }
.chip-class.adicional { background: #FEE2E2; color: #991B1B; }
.chip-class:hover { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(15,27,45,.12); }
.horarios .sug .link-botao { padding: 0; font-size: 12px; }

/* Ordenação e destaque do relatório recém-criado */
a.ordenar { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
a.ordenar:hover { color: var(--cor-principal); }
a.ordenar.ativa { color: var(--cor-principal); }
a.ordenar span { font-size: 12px; }
tr.recem-criado td { animation: recem 3s ease-out 1; background: #F0FDF4; }
@keyframes recem { 0% { background: #BBF7D0; } 100% { background: #F0FDF4; } }

/* Contador de caracteres do editor */
.editor-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid #E2E8F0;
                 font-size: 12px; color: #64748B; background: #F8FAFC; border-radius: 0 0 12px 12px; }
.editor-rodape .barra-uso { width: 120px; height: 6px; border-radius: 3px; background: #E2E8F0; overflow: hidden; }
.editor-rodape .barra-uso i { display: block; height: 100%; background: #22C55E; }
.editor-rodape.perto .barra-uso i { background: #F59E0B; }
.editor-rodape.passou { color: #B91C1C; font-weight: 600; }
.editor-rodape.passou .barra-uso i { background: #DC2626; }

/* Filtros por coluna (texto no cabeçalho da tabela) */
.linha-filtros th { padding-top: 0; padding-bottom: 8px; background: inherit; }
.filtro-coluna { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 1px solid #CBD5E1; border-radius: 8px;
                 background: #fff; color: #94A3B8; font-weight: 400; max-width: 240px; }
.filtro-coluna:focus-within { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(37,99,235,.15); color: var(--cor-principal); }
.filtro-coluna.ativo { border-color: var(--cor-principal); background: #EFF6FF; color: var(--cor-principal); }
.filtro-coluna input { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; width: 100%; min-width: 0; color: #0F1B2D; }

/* Tela do relatório: barra de ações fixa no topo com “Fechar” */
.barra-acoes-rel { position: sticky; top: 0; z-index: 15; background: #F3F5F9; padding: 8px 0; }
.btn-fechar { gap: 6px; }

/* Filtro em tempo real */
.tabela-rel.atualizando tbody { opacity: .55; transition: opacity .15s; }
.carregando { font-size: 12px; color: var(--cor-principal); }
.tabela-rel mark { background: #FDE68A; color: inherit; border-radius: 3px; padding: 0 1px; }
.limpar-coluna { border: 0; background: none; color: #64748B; cursor: pointer; padding: 0 2px; font-size: 12px; }
.limpar-coluna:hover { color: #B91C1C; }
.tabela-rel tr.selecionada td { background-color: #DBEAFE !important; }

/* Janela “Colunas da lista” */
.colunas-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.coluna-linha { display: grid; grid-template-columns: 170px auto 1fr; align-items: center; gap: 14px; padding: 10px 6px;
                border-bottom: 1px solid #F1F5F9; }
.coluna-linha.oculta .coluna-nome strong { color: #94A3B8; text-decoration: line-through; }
.coluna-nome { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.coluna-nome input { width: 18px; height: 18px; accent-color: var(--cor-principal); }
.seg-alinhar { display: inline-flex; background: #F1F5F9; border-radius: 8px; padding: 2px; }
.seg-alinhar button { width: 34px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #475569;
                      display: inline-flex; align-items: center; justify-content: center; }
.seg-alinhar button[aria-pressed="true"] { background: #fff; color: var(--cor-principal); box-shadow: 0 1px 3px rgba(15,27,45,.15); }
.ed-cor.sem-cor { background: #fff linear-gradient(135deg, transparent 45%, #DC2626 45%, #DC2626 55%, transparent 55%); }
@media (max-width: 700px) { .coluna-linha { grid-template-columns: 1fr; } }

/* =====================================================================
   Lista de relatórios — visual mais limpo (3.4.1)
   ===================================================================== */
.tabela-rel { border-collapse: separate; border-spacing: 0; }
.tabela-rel thead tr:first-child th { padding-top: 12px; padding-bottom: 8px; font-size: 11.5px; letter-spacing: .06em; border-bottom: 0; }
.tabela-rel thead tr:first-child th .ordenar { color: inherit; }
.tabela-rel .linha-filtros th { padding: 0 12px 10px; border-bottom: 1px solid #E2E8F0; }
.tabela-rel td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid #EEF2F7; }
.tabela-rel tbody tr:last-child td { border-bottom: 0; }
/* destaque da linha ao passar o mouse, por cima da cor da coluna */
.tabela-rel tbody tr:hover td { background-image: linear-gradient(rgba(37, 99, 235, .045), rgba(37, 99, 235, .045)); }
.tabela-rel .c-sel { width: 44px; padding-right: 0; }
.tabela-rel .c-sel input { width: 17px; height: 17px; accent-color: var(--cor-principal); cursor: pointer; }

/* coluna Relatório: número + assunto na mesma linha; tags embaixo só quando existem */
.rel-bloco { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; min-width: 0; }
.rel-codigo { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 15px; }
.rel-codigo:hover { color: var(--cor-principal); }
.tabela-rel .rel-assunto { display: block; margin: 0; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                           max-width: 34ch; min-width: 0; }
.tabela-rel .linha-tags { flex-basis: 100%; margin-top: 0; gap: 5px; }
.tabela-rel .linha-tags:not(:has(.tag)) { flex-basis: auto; }
.tabela-rel .linha-tags .tag { font-size: 11.5px; padding: 1px 9px; line-height: 18px; }
.tabela-rel .tag-anexo { gap: 3px; background: #F1F5F9; color: #475569; }
/* “+ tag” aparece ao passar o mouse na linha (ou ao navegar pelo teclado) */
.tabela-rel .tag-menu { opacity: 0; transition: opacity .12s; }
.tabela-rel tr:hover .tag-menu, .tabela-rel .tag-menu:focus-within, .tabela-rel .tag-menu[open] { opacity: 1; }

/* filtros dentro do cabeçalho: largura da coluna, todos iguais */
.tabela-rel .filtro-coluna { max-width: none; width: 100%; height: 34px; background: rgba(255, 255, 255, .9); }

/* ações: ícones discretos, ficam fortes na linha em foco */
.tabela-rel .acoes-icones { gap: 0; }
.tabela-rel .acoes-icones a, .tabela-rel .acoes-icones button { width: 32px; height: 32px; color: #64748B; opacity: .75; }
.tabela-rel tr:hover .acoes-icones a, .tabela-rel tr:hover .acoes-icones button,
.tabela-rel .acoes-icones a:focus-visible, .tabela-rel .acoes-icones button:focus-visible { opacity: 1; color: #334155; }

/* barra de contagem / ordenar / itens por página mais compacta */
.resultado-cab .inp { height: 36px; font-size: 14px; padding: 0 30px 0 10px; }
.resultado-cab #ordem { max-width: 320px; }

/* =====================================================================
   Lista de relatórios — títulos em cor sólida e coluna de seleção (3.4.2)
   ===================================================================== */
/* Títulos: fundo sólido (cor escolhida em “Colunas” ou grafite padrão), texto em negrito com contraste automático */
.tabela-rel thead tr:first-child th { background-color: #1E293B; color: #FFFFFF; font-weight: 700; font-size: 12px;
                                      letter-spacing: .06em; padding-top: 13px; padding-bottom: 13px; box-shadow: none; }
.tabela-rel thead tr:first-child th:first-child { border-top-left-radius: 13px; }
.tabela-rel thead tr:first-child th:last-child { border-top-right-radius: 13px; }
.tabela-rel thead a.ordenar, .tabela-rel thead a.ordenar.ativa { color: inherit; font-weight: 700; }
.tabela-rel thead a.ordenar:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tabela-rel thead a.ordenar.ativa span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
                                         border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 11px; }
.tabela-rel .linha-filtros th { background-color: #F1F5F9; padding-top: 10px; }

/* Coluna de seleção: faixa própria, caixas maiores e arredondadas */
.tabela-rel .c-sel { width: 52px; text-align: center; padding-left: 0; padding-right: 0; }
.tabela-rel td.c-sel { background-color: #F8FAFC; border-right: 1px solid #E2E8F0; }
.tabela-rel .linha-filtros th.c-sel { border-right: 1px solid #E2E8F0; }
.tabela-rel .c-sel input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; vertical-align: middle; cursor: pointer;
  border: 2px solid #94A3B8; border-radius: 6px; background: #FFFFFF center / 14px no-repeat;
  transition: background-color .12s, border-color .12s, box-shadow .12s; }
.tabela-rel .c-sel input[type="checkbox"]:hover { border-color: var(--cor-principal); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.tabela-rel .c-sel input[type="checkbox"]:focus-visible { outline: 2px solid var(--cor-principal); outline-offset: 2px; }
.tabela-rel .c-sel input[type="checkbox"]:checked, .tabela-rel .c-sel input[type="checkbox"]:indeterminate {
  border-color: var(--cor-principal); background-color: var(--cor-principal); }
.tabela-rel .c-sel input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.tabela-rel .c-sel input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
/* no título escuro, a caixa “marcar todos” fica clara */
.tabela-rel thead tr:first-child th.c-sel input[type="checkbox"] { border-color: rgba(255, 255, 255, .75); background-color: rgba(255, 255, 255, .12); }
.tabela-rel thead tr:first-child th.c-sel input[type="checkbox"]:checked,
.tabela-rel thead tr:first-child th.c-sel input[type="checkbox"]:indeterminate { background-color: #FFFFFF; border-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.tabela-rel thead tr:first-child th.c-sel input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231E293B' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
/* linha marcada: faixa na lateral e fundo azul claro */
.tabela-rel tr.selecionada td.c-sel { box-shadow: inset 4px 0 0 var(--cor-principal); }
.tabela-rel tr:hover td.c-sel { background-color: #EEF2FF; }

/* Configurações › escolha visual do estilo do cabeçalho do PDF */
.estilos-cabecalho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .estilos-cabecalho { grid-template-columns: 1fr; } }
.estilo-cab { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid #E2E8F0; border-radius: 12px; cursor: pointer;
              font-size: 12.5px; color: #334155; position: relative; }
.estilo-cab input { position: absolute; opacity: 0; }
.estilo-cab:has(input:checked) { border-color: var(--cor-principal); background: #EFF6FF; }
.estilo-cab:has(input:focus-visible) { outline: 2px solid var(--cor-principal); outline-offset: 2px; }
.estilo-cab .mini { position: relative; height: 54px; border-radius: 6px; background: #fff; border: 1px solid #E2E8F0; overflow: hidden; }
.estilo-cab .mini i { position: absolute; display: block; border-radius: 2px; }
.estilo-cab .mini .faixa { left: 0; right: 0; top: 0; height: 5px; background: var(--cor-rt); }
.estilo-cab .mini .logo { left: 8px; top: 14px; width: 26px; height: 16px; background: #CBD5E1; }
.estilo-cab .mini .tit { right: 8px; top: 14px; width: 60px; height: 5px; background: var(--cor-rt); }
.estilo-cab .mini .num { right: 8px; top: 23px; width: 42px; height: 9px; background: #0F1B2D; }
.estilo-cab.faixa .mini .faixa { height: 40px; }
.estilo-cab.faixa .mini .logo { background: #fff; }
.estilo-cab.faixa .mini .tit, .estilo-cab.faixa .mini .num { background: #fff; }
.estilo-cab.centralizado .mini .logo { left: calc(50% - 13px); top: 9px; height: 12px; }
.estilo-cab.centralizado .mini .tit { right: auto; left: calc(50% - 30px); top: 26px; }
.estilo-cab.centralizado .mini .num { right: auto; left: calc(50% - 21px); top: 35px; }

/* Tela do relatório no mesmo formato do PDF: quadros */
.doc-quadro { margin: 14px 28px 0; border: 1px solid color-mix(in srgb, var(--cor-tipo) 35%, white); border-radius: 10px; overflow: hidden; }
.doc-quadro > h2 { margin: 0; padding: 7px 14px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-tipo);
                   background: color-mix(in srgb, var(--cor-tipo) 10%, white);
                   border-bottom: 1px solid color-mix(in srgb, var(--cor-tipo) 35%, white); }
.doc-quadro .doc-info { background: #fff; border-bottom: 0; padding: 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-quadro .doc-texto { padding: 12px 14px; min-height: 120px; }
.doc-quadro .doc-horarios { margin: 8px 0; }
.doc-quadro .doc-horarios th, .doc-quadro .doc-horarios td { padding-left: 14px; }
.doc-inferior { display: grid; grid-template-columns: 62fr 38fr; gap: 0 12px; margin: 14px 28px 0; }
.doc-inferior .doc-quadro { margin: 0; }
.doc-quadro .doc-assinaturas { grid-template-columns: 1fr; gap: 26px; padding: 30px 18px 14px; }
.documento .doc-rodape { margin-top: 16px; }
@media (max-width: 760px) { .doc-quadro, .doc-inferior { margin-left: 14px; margin-right: 14px; } .doc-inferior { grid-template-columns: 1fr; gap: 14px; }
                            .doc-quadro .doc-info { grid-template-columns: 1fr; } }

/* Configurações › Aparência dos relatórios (PDF) */
.pdf-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .pdf-config { grid-template-columns: 1fr; } }
.pdf-controles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.grupo-config { border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; }
.grupo-config > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; color: #0F1B2D; list-style: none; display: flex;
                          align-items: center; gap: 8px; }
.grupo-config > summary::before { content: "▸"; color: #64748B; transition: transform .15s; }
.grupo-config[open] > summary::before { transform: rotate(90deg); }
.grupo-config > summary::-webkit-details-marker { display: none; }
.grupo-config[open] { padding-bottom: 12px; }
.grupo-config > :not(summary) { margin: 0 14px 10px; }
.pdf-previa { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pdf-previa-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdf-previa-cab .seg-links a { height: 30px; font-size: 13px; }
.previa-pdf { width: 100%; aspect-ratio: 210 / 297; max-height: 82vh; border: 1px solid #CBD5E1; border-radius: 10px; background: #F1F5F9;
              box-shadow: 0 8px 24px rgba(15, 27, 45, .12); }

/* Cadastro do cliente › pessoas que recebem os relatórios */
.pessoas-lista { display: flex; flex-direction: column; gap: 8px; }
.pessoa-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 36px; gap: 8px; align-items: center; }
.pessoa-linha .erro { grid-column: 1 / -1; }
@media (max-width: 640px) { .pessoa-linha { grid-template-columns: 1fr 36px; } .pessoa-linha input[type=email] { grid-column: 1; } }

/* Envio por e-mail (conferência) */
.envio-form { display: flex; flex-direction: column; gap: 16px; }
.envio-grupo { border-left: 4px solid var(--cor-principal); }
.envio-grupo.desmarcado { border-left-color: #CBD5E1; }
.envio-grupo.desmarcado .envio-corpo { opacity: .45; pointer-events: none; }
.envio-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.envio-marcar span { font-size: 1.1rem; }
.envio-corpo { display: flex; flex-direction: column; gap: 12px; }
.envio-para { display: flex; flex-direction: column; gap: 6px; }
.envio-arquivos { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.envio-arquivos .arq { background: #F1F5F9; border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.tag-rel { background: var(--cor-rt); color: #fff; text-decoration: none; }
.tag-rel.rc { background: var(--cor-rc); }
.envio-acoes { position: sticky; bottom: 0; background: #F3F5F9; padding: 12px 0; }
.selo-enviado { background: #DCFCE7; color: #166534; }

/* ---- Relatório Complementar ---- */
.comp-mes { display: flex; align-items: center; gap: 6px; }
.comp-mes form { margin: 0; }
.comp-mes input[type=month] { width: auto; }
.comp-mes-titulo { font-weight: 500; color: #64748B; margin-left: 6px; }
.comp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 16px 0; }
.comp-kpis .kpi .valor { font-size: 1.9rem; }
.comp-acoes { flex-wrap: wrap; margin: 12px 0; align-items: flex-start; }
.comp-acoes form { margin: 0; }
.comp-reabrir summary { list-style: none; }
.comp-reabrir summary::-webkit-details-marker { display: none; }
.comp-reabrir[open] form { display: grid; gap: 8px; margin-top: 8px; max-width: 460px; }
.comp-hist { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.temas-comp { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.temas-comp .tema { font-size: 13px; padding: 5px 10px; gap: 4px; }
.temas-comp .tema i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.comp-atual { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: #334155; }
.comp-atual strong { font-size: 1.05rem; color: #0F172A; }
.comp-atual-nome { color: #64748B; }
.comp-seta-nav { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; border: 1px solid #CBD5E1; color: #334155; text-decoration: none; font-size: 17px; line-height: 1; }
.comp-seta-nav:hover { background: #F1F5F9; }
.btn.btn-periodo { background: var(--cor-periodo, #4C1D95); border-color: var(--cor-periodo, #4C1D95); color: #fff; }
.btn.btn-periodo:hover { filter: brightness(1.08); }
.comp-escolha summary.btn:not(.ativo) { opacity: .82; }
.comp-escolha summary.btn.ativo { box-shadow: 0 0 0 3px rgba(15, 23, 42, .12); }
.comp-escolha { position: relative; }
.comp-escolha summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.comp-escolha summary::-webkit-details-marker { display: none; }
.comp-escolha .comp-seta { font-size: 11px; transition: transform .15s; }
.comp-escolha[open] .comp-seta { transform: rotate(180deg); }
.comp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px; max-width: 90vw;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  padding: 6px; display: grid; gap: 1px; }
.comp-menu-titulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748B;
  padding: 10px 10px 4px; border-top: 1px solid #F1F5F9; }
.comp-menu-titulo:first-child { border-top: 0; padding-top: 6px; }
.comp-menu-item { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; color: #0F172A;
  text-decoration: none; font-size: 14px; }
.comp-menu-item:hover, .comp-menu-item:focus { background: #F1F5F9; }
.comp-menu-item.ativo { background: #EFF6FF; color: #1D4ED8; font-weight: 600; }
.comp-menu-form { display: flex; gap: 6px; align-items: flex-end; padding: 2px 10px 8px; margin: 0; }
.comp-menu-form .inp { flex: 1; min-width: 0; }
.comp-menu-datas { display: grid; grid-template-columns: 1fr 1fr; }
.comp-menu-datas label { display: grid; gap: 2px; }
.comp-menu-datas button { grid-column: 1 / -1; }
.comp-estat-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.comp-estat-grade > div { display: grid; gap: 2px; padding: 10px 12px; background: #F8FAFC; border-radius: 10px; }
.comp-estat-grade strong { font-size: 1.15rem; }
.comp-var { font-size: 13px; font-weight: 700; color: #475569; }
.comp-var.sobe { color: #047857; } .comp-var.desce { color: #B91C1C; }
.comp-barra { display: block; height: 8px; border-radius: 4px; background: #EEF2F7; overflow: hidden; }
.comp-barra i { display: block; height: 100%; border-radius: 4px; }

/* ---- Menu lateral: ícones coloridos ---- */
.menu-item .ic svg { width: 19px; height: 19px; }
.menu.ic-cores .menu-item .ic { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.menu.ic-cores .menu-item:hover .ic { color: var(--c); background: color-mix(in srgb, var(--c) 26%, transparent); }
.menu.ic-cores .menu-item.ativo .ic { color: #fff; background: color-mix(in srgb, var(--c) 70%, #0F172A);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 45%, transparent); }
.menu-item.ativo { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }

/* ---- Personalizar meu menu ---- */
dialog.janela-menu { color: #0F172A; width: min(640px, calc(100vw - 32px)); }
.pm-estilo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pm-grupos { display: grid; gap: 12px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.pm-grupo { border: 1px solid #E2E8F0; border-radius: 12px; padding: 8px; background: #F8FAFC; }
.pm-grupo.arrastando, .pm-item.arrastando { opacity: .45; }
.pm-grupo-cab { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; }
.pm-nome-grupo { flex: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.pm-sem-grupo { flex: 1; font-size: 12.5px; color: #64748B; font-weight: 600; }
.pm-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 36px; }
.pm-item { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
  padding: 5px 8px; }
.pm-item.oculto { opacity: .55; background: #F1F5F9; }
.pm-item.oculto .pm-nome { text-decoration: line-through; }
.pm-alca { cursor: grab; color: #94A3B8; font-size: 18px; line-height: 1; padding: 2px; user-select: none; touch-action: none; }
.pm-alca:active { cursor: grabbing; }
.pm-cor { position: relative; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; cursor: pointer; color: var(--c); background: #1E293B; }
.pm-cor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.pm-cor::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); border: 2px solid #fff; }
.pm-nome { flex: 1; min-width: 0; }
.pm-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #334155; white-space: nowrap; cursor: pointer; }
.pm-setas { display: inline-flex; gap: 3px; }
.pm-setas button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #CBD5E1; background: #fff; cursor: pointer; color: #334155; }
.pm-setas button:hover { background: #EFF6FF; }
.pm-acoes { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 560px) { .pm-ver span { display: none; } }
.pm-item .inp, .pm-grupo-cab .inp { min-height: 0; height: 34px; padding: 4px 10px; }
.pm-item { padding: 4px 8px; }