:root {
    --blue: #0a4a8f;
    --blue-dark: #083a73;
    --side: #2f78b4;
    --side-dark: #25679c;
    --ink: #222;
    --bg: #ececec;
    --line: #d4d4d4;
    --ok: #2e9e5b;
    --warn: #e07b1a;
    --err: #c0392b;
    --panel: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--bg); }

.topbar { position: fixed; inset: 0 0 auto 0; height: 56px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: 24px; padding-left: 90px; }
.logo { font-weight: 800; letter-spacing: 2px; font-style: italic; font-size: 20px; }
.logo.big { font-size: 34px; color: var(--blue); text-align: center; margin-bottom: 4px; }
.brand .app { font-weight: 600; opacity: .9; }
.who { display: flex; align-items: center; gap: 28px; }
.company { text-align: right; line-height: 1.15; }
.company small { display: block; opacity: .75; font-size: 12px; }
.user { display: flex; align-items: center; gap: 8px; }
.user svg { width: 22px; height: 22px; }
.user a { color: #fff; opacity: .8; margin-left: 6px; font-size: 12px; }

.sidebar { position: fixed; top: 56px; bottom: 0; left: 0; width: 70px; background: var(--side); z-index: 20; display: flex; flex-direction: column; }
.sidebar .item { width: 100%; height: 86px; border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font: inherit; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; padding: 0 4px; text-align: center; }
.sidebar .item:hover, .sidebar .on > .item, .sidebar a.item.on { background: var(--side-dark); }
.group { position: relative; }
.flyout { display: none; position: absolute; left: 70px; top: 0; min-width: 260px; background: #fff; box-shadow: 4px 4px 14px rgba(0,0,0,.25); }
.group.open .flyout { display: block; }
.flyout h4 { margin: 0; padding: 12px 18px; background: var(--side-dark); color: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.flyout a { display: block; padding: 11px 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #eee; }
.flyout a:hover, .flyout a.cur { background: #e8f1f9; color: var(--blue); }
.flyout em { float: right; font-size: 10px; color: #999; text-transform: uppercase; font-style: normal; }

.content { margin: 56px 0 0 70px; min-height: calc(100vh - 56px); }
.page-head { background: #2b2b2b; color: #fff; padding: 22px 32px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 600; color: #ddd; letter-spacing: .5px; }
.page-head small { opacity: .6; }

.panel { background: #fff; margin: 24px 32px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 3px; max-width: 1100px; }
.panel h2 { margin: 26px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--blue); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.panel h2:first-child { margin-top: 0; }
.muted { color: #777; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; }
.grid .span2 { grid-column: span 2; }
.grid .w3 { grid-column: span 3; }
.grid.addr { grid-template-columns: 150px repeat(3, 1fr); }
@media (max-width: 900px) { .grid, .grid.addr { grid-template-columns: 1fr 1fr; } .grid .w3 { grid-column: span 2; } }
label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; color: #666; letter-spacing: .4px; }
label.check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: 14px; color: var(--ink); }
input, select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #bbb; border-radius: 3px; background: #fff; color: var(--ink); text-transform: none; letter-spacing: 0; }
input:focus, select:focus { outline: 2px solid var(--side); border-color: var(--side); }
input:disabled { background: #f0f0f0; }
fieldset { border: 1px solid var(--line); border-radius: 3px; margin: 0 0 14px; padding: 10px 16px 16px; }
legend { padding: 0 8px; font-weight: 600; color: var(--blue); }

.actions { margin-top: 26px; text-align: right; }
.btn { font: inherit; padding: 10px 30px; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; letter-spacing: .5px; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }

.flash { margin: 16px 32px 0; padding: 12px 16px; border-radius: 3px; max-width: 1100px; }
.flash.ok { background: #e3f4ea; color: #1d6b3d; border: 1px solid #b6e0c5; }
.flash.err { background: #fbe7e4; color: #8e2a1f; border: 1px solid #efbdb6; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 28px 32px; max-width: 1200px; }
.card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--side); padding: 18px 20px; text-decoration: none; color: var(--ink); display: block; }
.card.ok { border-top-color: var(--ok); }
.card.warn { border-top-color: var(--warn); }
.card h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #777; }
.card p { margin: 0 0 14px; font-weight: 600; }
.card .link { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }

.login-body { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(135deg, var(--blue), var(--side)); }
.login-card { background: #fff; width: 360px; padding: 32px; border-radius: 4px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.login-card h1 { margin: 0 0 6px; font-size: 16px; text-align: center; color: #555; font-weight: 600; }
.login-card .flash { margin: 0; }

.panel.wide { max-width: 1300px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.toolbar input { flex: 1; max-width: 360px; }
a.btn { text-decoration: none; display: inline-block; background: #e3e3e3; color: var(--ink); }
a.btn.primary { background: var(--blue); color: #fff; }
.actions .btn { margin-left: 8px; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #777; padding: 8px 10px; border-bottom: 2px solid var(--line); }
table.list td { padding: 9px 10px; border-bottom: 1px solid #eee; }
table.list tbody tr:hover { background: #f5f9fd; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions form { display: inline; }
.row-actions a:not(.icon-btn), .link-danger { background: none; border: 0; font: inherit; cursor: pointer; color: var(--blue); margin-left: 12px; text-decoration: none; padding: 0; }
.link-danger { color: var(--err); }

textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #bbb; border-radius: 3px; background: #fff; color: var(--ink); resize: vertical; text-transform: none; letter-spacing: 0; }
textarea:focus { outline: 2px solid var(--side); border-color: var(--side); }
label small.muted { text-transform: none; letter-spacing: 0; font-size: 11px; }

table.items input, table.items select, #pags input, #pags select { width: 100%; }
table.items td, #pags td { padding: 5px 6px; }
.totais { display: flex; gap: 28px; justify-content: flex-end; margin-top: 22px; padding-top: 14px; border-top: 2px solid var(--line); color: #555; }
.totais .grande { font-size: 18px; color: var(--ink); }
button[disabled] { opacity: .5; cursor: not-allowed; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: #ddd; color: #444; }
.badge.autorizada { background: #d8f0e1; color: #1d6b3d; }
.badge.rejeitada, .badge.denegada { background: #f8dcd8; color: #8e2a1f; }
.badge.cancelada { background: #e4e4e4; color: #555; text-decoration: line-through; }
.badge.rascunho { background: #fdebc8; color: #8a5a00; }
.detail dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; margin: 0; }
.detail dt { color: #777; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
.detail dd { margin: 0; word-break: break-all; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.btns .btn { padding: 8px 18px; }
.btn.danger { background: #c0392b; color: #fff; }
.btn.danger:hover { background: #a93226; }
.btn.danger:focus-visible { outline: 3px solid rgba(192, 57, 43, .35); outline-offset: 2px; }
.inline-form { display: grid; gap: 8px; max-width: 560px; margin-top: 10px; }
[hidden] { display: none !important; }
.lookup-err { color: var(--err) !important; font-weight: 600; }
.brand-logo { height: 38px; max-width: 160px; object-fit: contain; background: #fff; border-radius: 3px; padding: 3px 6px; }

/* ---- Modal de mensagens e confirmações ---- */
body.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .55); animation: modal-fade .12s ease-out; }
.modal { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); border-top: 6px solid var(--side); overflow: hidden; animation: modal-pop .14s ease-out; }
.modal-ok { border-top-color: var(--ok); }
.modal-err { border-top-color: var(--err); }
.modal-warn { border-top-color: var(--warn); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 8px; }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.modal-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--side); }
.modal-ok .modal-icon { background: var(--ok); }
.modal-err .modal-icon { background: var(--err); }
.modal-warn .modal-icon { background: var(--warn); }
.modal-body { padding: 6px 22px 6px 64px; overflow-y: auto; line-height: 1.5; word-break: break-word; }
.modal-body p { margin: 4px 0; }
.modal-body ul { margin: 4px 0; padding-left: 18px; }
.modal-body li { margin: 4px 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }
.modal-foot .btn { min-width: 96px; padding: 9px 22px; }
.modal-foot .btn:focus-visible { outline: 3px solid rgba(47, 120, 180, .45); outline-offset: 2px; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) { .modal-body { padding-left: 22px; } }

/* ---- Botões de ícone (Editar / Excluir) com caixinha de texto ao passar o mouse ---- */
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px;
    padding: 0; border: 0; border-radius: 6px; background: none; color: var(--blue); cursor: pointer; text-decoration: none; vertical-align: middle; }
.icon-btn:hover, .icon-btn:focus-visible { background: #e8f1f9; }
.icon-btn:focus-visible { outline: 2px solid var(--side); outline-offset: 1px; }
.icon-btn.danger { color: var(--err); }
.icon-btn.danger:hover, .icon-btn.danger:focus-visible { background: #fbe7e4; }
.icon-btn.danger:focus-visible { outline-color: var(--err); }
.icon-btn.bordered { width: 38px; height: 38px; margin-left: 0; border: 1px solid var(--line); background: #fff; }
.icon-btn.bordered:hover, .icon-btn.bordered:focus-visible { background: #e8f1f9; }
.icon-btn.bordered.danger:hover, .icon-btn.bordered.danger:focus-visible { background: #fbe7e4; }

/* caixinha com o nome da ação (aparece acima do ícone) */
.icon-btn::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translate(-50%, 4px); z-index: 60;
    padding: 5px 10px; border-radius: 5px; background: #1f2937; color: #fff; font: 600 12px/1.3 "Segoe UI", Arial, sans-serif; letter-spacing: .2px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s, visibility .12s; }
.icon-btn::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px); z-index: 60;
    border: 5px solid transparent; border-top-color: #1f2937; border-bottom-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s, visibility .12s; }
.icon-btn:hover::after, .icon-btn:focus-visible::after, .icon-btn:hover::before, .icon-btn:focus-visible::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline-block; vertical-align: middle; }

/* ---- Filtro de período (Consulta de Documentos) ---- */
.toolbar { flex-wrap: wrap; align-items: flex-end; }
.toolbar label.filtro { gap: 3px; }
.toolbar input[type=date] { flex: none; width: 158px; max-width: none; }
.atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 13px; }
.pill { padding: 3px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--blue); text-decoration: none; background: #fff; }
.pill:hover { background: #e8f1f9; }
.pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.resumo { margin: 0 0 12px; color: #555; font-size: 13px; }

/* ícone de imagem do menu lateral (Cadastros) */
.menu-img { display: block; object-fit: contain; pointer-events: none; }

/* ---- ícone ao lado de cada item do submenu ---- */
.flyout a { display: flex; align-items: center; gap: 12px; }
.flyout a svg { flex: none; color: var(--side); }
.flyout a:hover svg, .flyout a.cur svg { color: var(--blue); }
.flyout em { float: none; margin-left: auto; }

/* botão de copiar: apagado quando não há o que copiar; verde por um instante depois de copiar */
.icon-btn.off { opacity: .35; cursor: not-allowed; }
.icon-btn.off:hover { background: none; }
.icon-btn.copiado { color: var(--ok); }
.detail dd .icon-btn { margin-left: 6px; vertical-align: middle; }

/* ---- Multiempresa: faixas de aviso e item de formulário no menu ---- */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 32px; font-size: 13px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.banner form { margin: 0; }
.banner .btn { padding: 5px 14px; font-size: 12px; }
.banner.info { background: #e3f0fa; color: #1d4e75; }
.banner.warn { background: #fdebc8; color: #7a4b00; }
.banner.err { background: #fbe7e4; color: #8e2a1f; font-weight: 600; }
.side-form { margin: 0; }
.side-form .item { width: 100%; }

/* ---- Painel do gestor: situações, selos e paginação ---- */
.badge.t-ativa { background: #d8f0e1; color: #1d6b3d; }
.badge.t-teste { background: #dcecf9; color: #1d4e75; }
.badge.t-suspensa { background: #fdebc8; color: #8a5a00; }
.badge.t-cancelada { background: #e4e4e4; color: #555; }
.st { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-ok { background: #d8f0e1; color: #1d6b3d; }
.st-warn { background: #fdebc8; color: #8a5a00; }
.st-err { background: #f8dcd8; color: #8e2a1f; }
.st-info { background: #dcecf9; color: #1d4e75; }
.st-off { background: #e4e4e4; color: #555; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cards.compact { padding: 20px 32px 0; }
.kpi { font-size: 26px; font-weight: 700; margin: 2px 0 4px; }
.kpi small { font-size: 12px; font-weight: 600; color: #777; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; padding: 0 32px 32px; max-width: 1300px; }
.grid-2 .panel { margin: 0; max-width: none; }
.grid-2 h2 { margin-top: 0; }

/* seletor de empresa (um acesso com vários CNPJs) */
.switcher select { max-width: 320px; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.switcher select option { color: #222; }

/* ---- Botão de tema (claro/escuro) ---- */
.tema-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.tema-btn:hover, .tema-btn:focus-visible { background: rgba(255, 255, 255, .18); }
.tema-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tema-btn svg { width: 20px; height: 20px; }
.tema-btn .i-sun { display: none; }
:root[data-theme="dark"] .tema-btn .i-sun { display: block; }
:root[data-theme="dark"] .tema-btn .i-moon { display: none; }
.tema-flutuante { position: fixed; top: 14px; right: 16px; z-index: 5; }
.tema-flutuante .tema-btn { background: rgba(0, 0, 0, .22); }

/* ---- Tema escuro ---- */
:root[data-theme="dark"] { --panel: #1b2027; color-scheme: dark; --blue: #6cb2f0; --blue-dark: #2a6fb5; --side: #1b4a73; --side-dark: #143a5c; --ink: #e3e8ee; --bg: #12161b; --line: #2c343e; }
:root[data-theme="dark"] a:where(:not([class])) { color: var(--blue); }
:root[data-theme="dark"] .topbar { background: #0d3560; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] a.btn.primary, :root[data-theme="dark"] .pill.on { background: #2468b0; border-color: #2468b0; color: #fff; }
:root[data-theme="dark"] .btn.primary:hover { background: #1d5a9b; }
:root[data-theme="dark"] .btn:not(.primary):not(.danger), :root[data-theme="dark"] a.btn:not(.primary):not(.danger) { background: #fff; color: #000; }
:root[data-theme="dark"] .btn:not(.primary):not(.danger):hover, :root[data-theme="dark"] a.btn:not(.primary):not(.danger):hover { background: #e4e7ea; }
:root[data-theme="dark"] .login-body { background: linear-gradient(135deg, #0d3560, #1b4a73); }
:root[data-theme="dark"] .flyout, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .modal { background: #1b2027; }
:root[data-theme="dark"] .flyout a { border-bottom-color: #2a313a; }
:root[data-theme="dark"] .flyout a:hover, :root[data-theme="dark"] .flyout a.cur { background: #243241; color: var(--blue); }
:root[data-theme="dark"] .flyout em { color: #8b96a3; }
:root[data-theme="dark"] .page-head { background: #0c0f13; }
:root[data-theme="dark"] .muted, :root[data-theme="dark"] .card h3, :root[data-theme="dark"] .kpi small, :root[data-theme="dark"] .detail dt, :root[data-theme="dark"] table.list th { color: #98a2ae; }
:root[data-theme="dark"] label { color: #9aa5b1; }
:root[data-theme="dark"] label.check { color: var(--ink); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #0f1318; border-color: #3b4551; color: var(--ink); }
:root[data-theme="dark"] input:disabled { background: #20262e; color: #8892a0; }
:root[data-theme="dark"] ::placeholder { color: #6b7684; }
:root[data-theme="dark"] .switcher select option { background: #1b2027; color: var(--ink); }
:root[data-theme="dark"] .login-card h1, :root[data-theme="dark"] .totais, :root[data-theme="dark"] .resumo { color: #c5ccd4; }
:root[data-theme="dark"] table.list td { border-bottom-color: #262d36; }
:root[data-theme="dark"] table.list tbody tr:hover { background: #202833; }
:root[data-theme="dark"] .card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .icon-btn:hover, :root[data-theme="dark"] .icon-btn:focus-visible, :root[data-theme="dark"] .icon-btn.bordered:hover { background: #243241; }
:root[data-theme="dark"] .icon-btn.danger:hover, :root[data-theme="dark"] .icon-btn.danger:focus-visible, :root[data-theme="dark"] .icon-btn.bordered.danger:hover { background: #4a1f1b; }
:root[data-theme="dark"] .icon-btn.bordered { background: #1b2027; }
:root[data-theme="dark"] .pill:not(.on) { background: #fff; color: #000; border-color: #fff; }
:root[data-theme="dark"] .pill:not(.on):hover { background: #e4e7ea; }
:root[data-theme="dark"] .badge { background: #333c47; color: #cdd5de; }
:root[data-theme="dark"] .badge.autorizada, :root[data-theme="dark"] .badge.t-ativa, :root[data-theme="dark"] .st-ok { background: #17402b; color: #8fe0b0; }
:root[data-theme="dark"] .badge.rejeitada, :root[data-theme="dark"] .badge.denegada, :root[data-theme="dark"] .st-err { background: #4a1f1b; color: #f2b2aa; }
:root[data-theme="dark"] .badge.cancelada, :root[data-theme="dark"] .badge.t-cancelada, :root[data-theme="dark"] .st-off { background: #2d333b; color: #9aa5b1; }
:root[data-theme="dark"] .badge.rascunho, :root[data-theme="dark"] .badge.t-suspensa, :root[data-theme="dark"] .st-warn { background: #4d3a10; color: #f0c870; }
:root[data-theme="dark"] .badge.t-teste, :root[data-theme="dark"] .st-info { background: #17344f; color: #9fcbf0; }
:root[data-theme="dark"] .flash.ok { background: #17402b; color: #8fe0b0; border-color: #25613f; }
:root[data-theme="dark"] .flash.err { background: #4a1f1b; color: #f2b2aa; border-color: #70302a; }
:root[data-theme="dark"] .banner { border-bottom-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .banner.info { background: #17344f; color: #9fcbf0; }
:root[data-theme="dark"] .banner.warn { background: #4d3a10; color: #f0c870; }
:root[data-theme="dark"] .banner.err { background: #4a1f1b; color: #f2b2aa; }
:root[data-theme="dark"] code { background: #0f1318; color: #c9d4e0; padding: 1px 5px; border-radius: 3px; }

/* ---- Barra Voltar/SALVAR fixa no topo dos formulários de cadastro (continua visível ao rolar) ---- */
.panel > .actions.fixas { position: sticky; top: 56px; z-index: 15; margin: -24px -28px 18px; padding: 10px 28px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 3px 8px rgba(0, 0, 0, .08); }
.panel > .actions.fixas .btn:first-child { margin-left: 0; }
:root[data-theme="dark"] .panel > .actions.fixas { box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }

/* logotipo flownfe no topo, com fundo transparente (versão clara do arquivo, para destacar sobre o azul da barra) */
.brand-app { height: 34px; width: auto; display: block; }

/* ícone flownfe no topo do painel do gestor (no lugar da palavra EMISSOR) */
.brand-icone { height: 42px; width: auto; display: block; }

/* ícone flownfe nas telas de acesso (login e recuperação de senha) */
.login-logo { display: block; height: 96px; width: auto; margin: 0 auto 4px; }

/* logotipo flownfe (texto) na tela de login: versão colorida no tema claro, versão clara no tema escuro */
.login-wordmark { margin: 0 0 6px; text-align: center; line-height: 0; }
.login-wordmark img { height: 44px; width: auto; }
.login-wordmark .wm-escuro { display: none; }
:root[data-theme="dark"] .login-wordmark .wm-escuro { display: inline; }
:root[data-theme="dark"] .login-wordmark .wm-escuro-nao { display: none; }

/* ---- Manual de uso (Ajuda → Manual) ---- */
.man-wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; padding: 24px 32px 48px; max-width: 1500px; align-items: start; }
.man-toc { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 14px 14px 16px; }
.man-busca { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.man-busca input { width: 100%; }
.man-toc ol { list-style: none; margin: 0 0 12px; padding: 0; }
.man-toc li a { display: block; padding: 6px 8px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.3; }
.man-toc li a:hover { background: rgba(47, 120, 180, .12); }
.man-toc li.atual a { background: rgba(47, 120, 180, .18); color: var(--blue); font-weight: 600; }
.man-toc .n, .man-cap h2 .n { display: inline-block; min-width: 1.6em; color: var(--side); font-weight: 700; }
.man-corpo { min-width: 0; }
.man-cap { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 22px 28px 12px; margin-bottom: 20px; scroll-margin-top: 76px; }
.man-cap[hidden], .man-toc li[hidden] { display: none; }
.man-cap h2 { margin: 0 0 14px; font-size: 21px; color: var(--blue); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.man-cap h3 { margin: 22px 0 8px; font-size: 16px; }
.man-cap p, .man-cap li { line-height: 1.6; }
.man-cap ol, .man-cap ul { padding-left: 22px; }
.man-cap li { margin: 4px 0; }
.man-cap table { border-collapse: collapse; margin: 10px 0 16px; width: 100%; font-size: 13.5px; }
.man-cap th, .man-cap td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.man-cap th { background: rgba(47, 120, 180, .10); }
.man-cap code { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 3px; font-size: 12.5px; }
.man-cap kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; font-size: 12px; }
.man-dica, .man-atencao, .man-info { border-left: 4px solid var(--side); background: rgba(47, 120, 180, .08); padding: 10px 14px; margin: 14px 0; border-radius: 0 4px 4px 0; }
.man-atencao { border-left-color: var(--warn); background: rgba(224, 123, 26, .10); }
.man-info { border-left-color: var(--ok); background: rgba(46, 158, 91, .09); }
.man-dica p, .man-atencao p, .man-info p { margin: 4px 0; }
.man-fig { margin: 16px 0 20px; text-align: center; }
.man-fig a { display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); cursor: zoom-in; }
.man-fig img { display: block; max-width: 100%; height: auto; }
.man-fig figcaption { font-size: 12.5px; color: #777; margin-top: 6px; }
mark.man-achado { background: #ffe58a; color: #222; border-radius: 2px; padding: 0 1px; }
.man-zoom { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .82); display: grid; place-items: center; padding: 20px; cursor: zoom-out; overflow: auto; }
.man-zoom img { max-width: min(96vw, 1400px); max-height: 94vh; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.man-topo { position: fixed; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--side); color: #fff; display: none; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); z-index: 40; }
.man-topo.on { display: flex; }
@media (max-width: 1000px) { .man-wrap { grid-template-columns: 1fr; padding: 16px; } .man-toc { position: static; max-height: none; } }
@media print {
    .topbar, .sidebar, .man-toc, .man-topo, .banner, .page-head small { display: none !important; }
    .content { margin: 0 !important; }
    .man-wrap { display: block; padding: 0; }
    .man-cap { break-inside: auto; border: 0; padding: 0 0 8px; margin-bottom: 10px; }
    .man-cap h2 { break-after: avoid; }
    .man-fig { break-inside: avoid; }
    .man-fig a { box-shadow: none; }
    body { background: #fff !important; }
}
:root[data-theme="dark"] .man-cap code { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .man-fig figcaption { color: #98a2ae; }
:root[data-theme="dark"] .man-fig a { border-color: #3b4551; }
:root[data-theme="dark"] .man-toc li a:hover { background: rgba(108, 178, 240, .12); }
:root[data-theme="dark"] .man-toc li.atual a { background: rgba(108, 178, 240, .18); }
:root[data-theme="dark"] .man-cap th { background: rgba(108, 178, 240, .10); }

:root[data-theme="dark"] .man-toc .n, :root[data-theme="dark"] .man-cap h2 .n { color: var(--blue); }