/* Camada visual comum do Emissor NFS-e. Tokens alinhados ao DESENVOLVA FLOW.
   É aplicada a todas as páginas HTML por web_layout.py, depois dos estilos de cada tela. */
:root{
  --navy:#132a3a;--navy2:#1c3c50;--teal:#138a83;--teal-d:#0f6f69;--mint:#daf1ed;
  --bg:#f4f6f5;--ink:#17252f;--muted:#5f717b;--line:#dce4e3;--field:#c7d3d1;--white:#fff;
  --red:#b93b31;--red-bg:#fdecea;--amber:#9a6412;--amber-bg:#fff5dc;--green:#17663f;--green-bg:#e5f5ec;
  --radius:12px;--shadow:0 6px 22px rgba(22,48,62,.07);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--teal-d)}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid rgba(19,138,131,.35);outline-offset:2px}

/* Barra superior comum */
.nfse-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:0 max(16px,4%);min-height:52px;background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nfse-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap;min-width:0}
.nfse-brand:hover{color:#fff}
.nfse-simbolo{width:34px;height:34px;padding:3px;border-radius:9px;background:#fff;object-fit:contain;flex:none}
.nfse-brand span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.nfse-brand strong{font-size:14px}
.nfse-brand small{color:#9fb6c2;font-size:11.5px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.nfse-nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nfse-nav a{padding:8px 12px;border-radius:8px;color:#c9d8df;text-decoration:none;font-weight:600;white-space:nowrap}
.nfse-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nfse-nav a[aria-current=page]{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 -2px 0 var(--teal)}
.nfse-user{display:flex;align-items:center;gap:10px;white-space:nowrap;color:#c9d8df;font-size:13px}
.nfse-user a{color:#c9d8df;text-decoration:none}
.nfse-user a:hover{color:#fff;text-decoration:underline}
.nfse-user form{margin:0}
body .nfse-user button{margin:0;min-width:0;min-height:32px;padding:5px 12px;background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
body .nfse-user button:hover{background:rgba(255,255,255,.1);filter:none}
.nfse-aviso{padding:10px max(16px,4%);background:var(--amber-bg);border-bottom:1px solid #f1dca8;color:#5c4308;font-weight:600}
.painel-logo{position:absolute;right:max(16px,6%);top:50%;transform:translateY(-50%);padding:8px 14px;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);line-height:0}
.painel-logo img{height:84px;width:auto;max-width:220px;object-fit:contain;display:block}
/* Cabeçalho de página */
body>header,body>header[style]{background:linear-gradient(120deg,var(--navy),var(--navy2))!important;color:#fff;padding:26px max(16px,6%) 24px}
body>header h1{margin:0;font-size:24px;line-height:1.25;letter-spacing:-.2px}
body>header p{margin:6px 0 0;color:#c9d8df}
main{max-width:1180px;margin:0 auto;padding:20px 16px 48px}
h2{font-size:19px;line-height:1.3;margin:0 0 12px;color:var(--navy)}
h3{color:var(--navy)}
small,.muted{color:var(--muted)}

/* Superfícies */
.card,.caixa,.empresa{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:20px 22px;margin:16px 0}
.step{border-left:4px solid var(--teal)}
.card>h2:first-child,.card>summary+div>h2:first-child{margin-top:0}
.empresa{border-left:4px solid var(--teal)}
.empresas>.empty-state{grid-column:1/-1}
.empty-state{padding:18px;border:1px dashed var(--field);border-radius:10px;background:#f8fbfa;color:var(--muted)}

/* Campos */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea{
  min-height:40px;padding:8px 11px;border:1px solid var(--field);border-radius:8px;background:var(--white);max-width:100%;
  transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(19,138,131,.15);outline:none}
input[type=file]{max-width:100%;padding:6px 0}
input[type=checkbox],input[type=radio]{width:17px;height:17px;accent-color:var(--teal);vertical-align:-3px}
label{color:var(--ink)}
.grid:has(>input,>label,>select){display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-items:end}
.grid:has(>input,>label,>select)>*{margin:0;min-width:0;width:100%}
.grid>label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px}
.grid>small{grid-column:1/-1}
.grid>button{width:auto;justify-self:start}

/* Botões */
button,.button,.botao{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:8px;
  background:var(--teal);color:#fff;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.2;transition:background .15s,filter .15s}
button:hover,.button:hover,.botao:hover{background:var(--teal-d);color:#fff;filter:none}
button[type=button]:not(.ativo),.botao.sec,a.button{background:var(--white);color:var(--navy);border-color:var(--field)}
button[type=button]:not(.ativo):hover,.botao.sec:hover,a.button:hover{background:#eef4f3;color:var(--navy)}
button[style*="b42318"],button[style*="B42318"]{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
button[style*="b42318"]:hover{filter:brightness(.92)!important}
button:disabled,button[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.entrada-acoes{gap:6px!important;padding:4px;background:#eef3f2;border-radius:10px;width:max-content;max-width:100%}
.entrada-acoes button{min-height:34px;padding:6px 14px;border:0!important;background:transparent!important;color:var(--navy)!important}
.entrada-acoes button.ativo{background:var(--white)!important;color:var(--navy)!important;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.entrada-texto{border-color:var(--field)!important;border-radius:10px!important;font:14px/1.55 Inter,"Segoe UI",Arial,sans-serif!important}

/* Mensagens */
.warning,.error,.success{padding:11px 14px;border-radius:10px;border:1px solid transparent}
.warning{background:var(--amber-bg);border-color:#f1dca8;color:#5c4308}
.error{background:var(--red-bg);border-color:#f5c7c2;color:#8d261e}
.success{background:var(--green-bg);border-color:#bfe3cf;color:var(--green)}

/* Tabelas */
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:#f8faf9}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover td,table tr:hover td{background:#fafcfb}
.fila-vazia td{padding:22px;text-align:center;color:var(--muted);background:#fbfcfc}

/* Seções recolhíveis */
details>summary{cursor:pointer;list-style-position:inside}
details.card>summary{font-size:15px}
.secondary-step summary{color:var(--teal-d)!important}

/* Tela de acesso */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,var(--navy),var(--navy2) 55%,#1f5a60)}
.auth-card{width:100%;max-width:400px;margin:0;padding:30px 28px;background:var(--white);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.auth-brand{display:flex;justify-content:center;margin:-6px 0 18px}
.auth-logo-img{max-width:190px;max-height:150px;width:auto;height:auto}
.auth-brand strong{display:block;color:var(--navy);font-size:16px}
.auth-brand small{display:block}
.auth-card h1{margin:0 0 4px;font-size:22px;color:var(--navy)}
.auth-form{display:grid;gap:14px;margin-top:18px}
.auth-form label{display:grid;gap:6px;font-weight:600;font-size:13px}
.auth-form input{width:100%}
.auth-form button{width:100%;margin-top:4px}

/* Administração */
.admin .card{margin:0 0 18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 18px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.kpi span{color:var(--muted);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kpi strong{font-size:26px;color:var(--navy);line-height:1.2}
.kpi strong.alerta{color:var(--red)}
.card-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.card-topo h2{margin:0}
.acoes-linha{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
td.acoes-linha{display:table-cell}
td.acoes-linha>*{display:inline-flex;margin:0 6px 6px 0;vertical-align:middle}
td.acoes-linha>details[open]{display:block}
.acoes-linha form{margin:0}
.acoes-linha button,.acoes-linha .button,.acoes-linha .botao{min-height:34px;padding:6px 12px;font-size:13px}
.tabela-rolagem{overflow-x:auto}
tr.inativo td{opacity:.55}
tfoot th{background:#f3f7f6;color:var(--navy);font-size:13px;text-transform:none}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge-ativo{background:var(--green-bg);color:var(--green)}
.badge-teste{background:#e8f1fb;color:#1d4f86}
.badge-bloqueado{background:var(--red-bg);color:#8d261e}
.badge-cancelado{background:#eceff1;color:#56636b}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-items:end;margin-top:10px}
.form-grid label,label.bloco{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px}
.form-grid label.check{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1;font-weight:500}
.form-grid input:not([type=checkbox]),.form-grid select,label.bloco textarea{width:100%}
.form-acoes{grid-column:1/-1;display:flex;gap:8px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:6px 16px 16px;margin:0 0 14px}
legend{padding:0 6px;font-weight:700;color:var(--navy)}
label.bloco{margin-bottom:14px}
details.sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
details.sub>summary{font-weight:700;color:var(--teal-d)}
details.inline-form{display:inline-block}
details.inline-form>summary{list-style:none;min-height:34px;padding:6px 12px;font-size:13px}
details.inline-form>summary::-webkit-details-marker{display:none}
details.inline-form[open]{display:block;width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fafcfb}
form.inline{margin:0}
form.inline select{min-height:34px;padding:4px 8px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.acoes-situacao{display:flex;flex-direction:column;gap:10px}
.acoes-situacao form{margin:0}
.acao-motivo{display:flex;gap:8px;flex-wrap:wrap}
.acao-motivo input{flex:1;min-width:200px}
.resumo-empresa{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.resumo-empresa dt{color:var(--muted)}
.resumo-empresa dd{margin:0;font-weight:600}
.abas{display:flex;gap:4px;margin:12px 0;border-bottom:1px solid var(--line)}
.abas a{padding:8px 14px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.abas a[aria-current=page]{color:var(--navy);border-bottom-color:var(--teal)}
.logo-linha{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0 16px}
.logo-preview{width:200px;height:140px;border:1px dashed var(--field);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;padding:10px;overflow:hidden}
.logo-preview.simbolo{width:140px}
.logo-preview img{max-width:100%;max-height:118px;object-fit:contain}
.senha-temporaria dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center}
.senha-temporaria code{font-size:16px;padding:6px 10px;background:#f3f7f6;border:1px solid var(--line);border-radius:8px;user-select:all}
.senha-temporaria code.senha{font-size:20px;letter-spacing:1px;color:var(--navy)}
.conta-card{max-width:760px}

/* Telas estreitas */
@media (max-width:760px){
  .nfse-topbar{gap:10px;padding:0 12px}
  .nfse-brand span,.nfse-user a{display:none}
  .painel-logo{display:none}
  body>header,body>header[style]{padding:20px 16px}
  body>header h1{font-size:20px}
  main{padding:14px 12px 40px}
  .card{padding:16px 14px}
  input,select,button,textarea{min-width:0!important;max-width:100%}
  select{width:100%}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .entrada-acoes{width:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 14px}
  .kpi strong{font-size:20px}
  .entrada-acoes button{flex:1 1 auto}
}
@media print{.nfse-topbar{display:none}}

.mostrar-mais{margin:14px auto 0;display:flex}

.painel-ao-vivo{font-size:12px;font-weight:500;margin-left:6px}
@keyframes destaque-total{0%{box-shadow:0 0 0 3px rgba(19,138,131,.55)}100%{box-shadow:var(--shadow)}}
.empresa.mudou{animation:destaque-total 2.5s ease-out}