/* HorizonCTe — design system
   Marca Horizon: degradê lima → verde → esmeralda, tinta #0d221a. Claro é o padrão; escuro por preferência/alternância. */

:root {
  --tinta: #0b1324;
  --fundo: #edf3fa;
  --superficie: #ffffff;
  --superficie-2: #f3f7fc;
  --borda: #dbe4f0;
  --borda-forte: #c7d3e3;
  --texto: #0b1324;
  --texto-2: #475467;
  --texto-3: #8390a3;
  --marca: #10b981;
  --marca-forte: #059669;
  --marca-suave: #e8f8f1;
  --degrade: linear-gradient(120deg, #a3e635 0%, #22c55e 45%, #059669 100%);
  --botao: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  --marinho: #0b1324;
  --marinho-2: #111c33;
  --perigo: #dc2626; --perigo-suave: #fef1f1;
  --alerta: #d97706; --alerta-suave: #fff7e8;
  --info: #2563eb; --info-suave: #eef4ff;
  --sucesso: #059669; --sucesso-suave: #e7f8f0;
  --sombra-1: 0 1px 2px rgba(11,19,36,.06), 0 1px 3px rgba(11,19,36,.04);
  --sombra-2: 0 4px 16px rgba(11,19,36,.07), 0 1px 3px rgba(11,19,36,.05);
  --sombra-3: 0 24px 60px -12px rgba(11,19,36,.25);
  --raio: 12px; --raio-sm: 8px; --raio-lg: 18px;
  --lateral: 264px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Plus Jakarta Sans", var(--fonte);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fundo: #172033; --superficie: #1e293d; --superficie-2: #243149; --borda: #2f3d58; --borda-forte: #3d4d6b;
  --texto: #eaf0f8; --texto-2: #b3bfd1; --texto-3: #8190a8;
  --marca: #34d399; --marca-forte: #10b981; --marca-suave: rgba(16,185,129,.12);
  --perigo: #f87171; --perigo-suave: rgba(248,113,113,.1);
  --alerta: #fbbf24; --alerta-suave: rgba(251,191,36,.1);
  --info: #60a5fa; --info-suave: rgba(96,165,250,.1);
  --sucesso: #34d399; --sucesso-suave: rgba(52,211,153,.1);
  --sombra-1: 0 1px 2px rgba(5,10,20,.25); --sombra-2: 0 8px 24px rgba(5,10,20,.3); --sombra-3: 0 24px 60px -12px rgba(5,10,20,.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fonte); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fundo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .5rem; color: var(--texto); }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--marca-forte); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
.mudo { color: var(--texto-2); }
.fraco { color: var(--texto-3); font-size: .85rem; }
.mono { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: .88em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 40px; padding: 0 1.1rem; border-radius: 10px; border: 1px solid transparent;
  font: 600 .92rem var(--fonte); cursor: pointer; white-space: nowrap; transition: .15s ease; text-decoration: none !important;
}
.btn svg { width: 18px; height: 18px; }
.btn-primario { background: var(--botao); color: #fff; box-shadow: 0 8px 22px -8px rgba(13,148,136,.7), inset 0 1px 0 rgba(255,255,255,.18); position: relative; overflow: hidden; }
.btn-primario::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.btn-primario:hover::after { transform: translateX(120%); }
.btn-primario:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(13,148,136,.8); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-secundario:hover { background: var(--superficie-2); border-color: var(--marca); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-grande { height: 48px; padding: 0 1.5rem; font-size: 1rem; border-radius: 12px; }
.btn-bloco { width: 100%; }
.btn-sm { height: 32px; padding: 0 .75rem; font-size: .84rem; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.girando { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo > label, .rotulo { font-size: .82rem; font-weight: 600; color: var(--texto-2); }
.campo .dica { font-size: .78rem; color: var(--texto-3); }
.entrada, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo textarea {
  width: 100%; height: 42px; padding: 0 .85rem; border-radius: 10px; border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto); font: 400 .95rem var(--fonte); transition: .15s;
}
.campo textarea { height: auto; min-height: 90px; padding: .6rem .85rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus {
  outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave);
}
.campo input.invalid, .campo select.invalid { border-color: var(--perigo); }
.validation-message { color: var(--perigo); font-size: .8rem; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
@media (max-width: 860px) { .grade > * { grid-column: span 12 !important; } }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--texto-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--marca-forte); margin-top: 2px; }
.segmentado { display: inline-flex; padding: 4px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 12px; gap: 4px; }
.segmentado label { padding: .45rem .9rem; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.segmentado input { display: none; }
.segmentado input:checked + span { color: var(--texto); }
.segmentado label:has(input:checked) { background: var(--superficie); box-shadow: var(--sombra-1); color: var(--texto); }
.acoes { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; align-items: center; }

/* ---------- avisos ---------- */
.aviso { display: flex; gap: .75rem; padding: .85rem 1rem; border-radius: var(--raio); border: 1px solid; font-size: .9rem; align-items: flex-start; }
.aviso svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.aviso strong { display: block; }
.aviso-perigo { background: var(--perigo-suave); border-color: color-mix(in srgb, var(--perigo) 30%, transparent); color: var(--perigo); }
.aviso-alerta { background: var(--alerta-suave); border-color: color-mix(in srgb, var(--alerta) 30%, transparent); color: var(--alerta); }
.aviso-info { background: var(--info-suave); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: var(--info); }
.aviso-sucesso { background: var(--sucesso-suave); border-color: color-mix(in srgb, var(--sucesso) 30%, transparent); color: var(--sucesso); }
.aviso > div { color: var(--texto); }
.aviso > div strong { color: inherit; }

/* ---------- cartões / etiquetas / tabelas ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); }
.cartao-corpo { padding: 1.4rem; }
.cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--borda); }
.cartao-cab h2 { margin: 0; font-size: 1.02rem; }
section.cartao + section.cartao, form + section.cartao { margin-top: 1.25rem; }
.etiqueta { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta svg { width: 12px; height: 12px; }
.etiqueta:has(svg)::before { display: none; }
.et-verde { background: var(--sucesso-suave); color: var(--sucesso); }
.et-amarelo { background: var(--alerta-suave); color: var(--alerta); }
.et-vermelho { background: var(--perigo-suave); color: var(--perigo); }
.et-azul { background: var(--info-suave); color: var(--info); }
.et-cinza { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 700; padding: .7rem 1.4rem; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.tabela td { padding: .85rem 1.4rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.vazio { text-align: center; padding: 3rem 1.5rem; color: var(--texto-2); }
.vazio .icone-grande { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-forte); }
.vazio .icone-grande svg { width: 28px; height: 28px; }

/* ---------- logo (versão clara/escura conforme o fundo) ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none !important; line-height: 0; }
.logo img { height: var(--logo-h, 46px); width: auto; display: block; }
.logo .l-escuro { display: none; }
:root[data-theme="dark"] .logo .l-claro { display: none; }
:root[data-theme="dark"] .logo .l-escuro { display: block; }
.logo.sobre-foto .l-claro { display: none !important; }
.logo.sobre-foto .l-escuro { display: block !important; }

/* ---------- layout do app ---------- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.1rem .9rem; background: var(--superficie); border-right: 1px solid var(--borda); overflow-y: auto;
}
.lateral .logo { --logo-h: auto; padding: .1rem 0 .8rem; }
.lateral .logo img { width: 100%; height: auto; }
.marca { display: flex; align-items: center; gap: .65rem; padding: .35rem .55rem 1rem; color: var(--texto); text-decoration: none !important; }
.marca-icone { width: 36px; height: 36px; border-radius: 11px; background: var(--degrade); display: grid; place-items: center; color: #06281a; box-shadow: 0 6px 16px -6px rgba(16,185,129,.6); font: 800 1.05rem var(--fonte-titulo); }
.marca-nome { font: 800 1.08rem var(--fonte-titulo); letter-spacing: -.02em; }
.marca-nome em { font-style: normal; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); font-weight: 700; padding: 1rem .7rem .35rem; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px;
  color: var(--texto-2); font-weight: 550; font-size: .92rem; text-decoration: none !important; transition: .12s;
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav-item:hover { background: var(--superficie-2); color: var(--texto); }
.nav-item.active { background: var(--marca-suave); color: var(--marca-forte); }
.nav-item.active svg { opacity: 1; }
.nav-item.breve { opacity: .5; cursor: default; }
.nav-item.breve:hover { background: none; color: var(--texto-2); }
.nav-item .selo { white-space: nowrap; margin-left: auto; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .4rem; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-3); }
.lateral-rodape { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: .5rem; }
.usuario-mini { display: flex; align-items: center; gap: .65rem; padding: .4rem .5rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--marca-suave); color: var(--marca-forte); flex: none; }
.usuario-mini .nome { font-weight: 650; font-size: .88rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-mini .papel { font-size: .75rem; color: var(--texto-3); }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; height: 64px; padding: 0 2rem;
  background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borda);
}
.topo .espaco { flex: 1; }
.conteudo { padding: 2rem; max-width: 1240px; width: 100%; margin: 0 auto; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina p { margin: .3rem 0 0; color: var(--texto-2); }
.menu-movel { display: none; }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 50; left: 0; width: var(--lateral); transform: translateX(-100%); transition: .2s; box-shadow: var(--sombra-3); }
  .app.menu-aberto .lateral { transform: none; }
  .menu-movel { display: inline-flex; }
  .topo, .conteudo { padding-left: 1rem; padding-right: 1rem; }
}

/* seletor de empresa */
.seletor { position: relative; }
.seletor { min-width: 0; flex: 0 1 auto; }
.seletor-botao {
  display: flex; align-items: center; gap: .65rem; height: 44px; padding: 0 .8rem 0 .5rem; min-width: 260px; max-width: 420px;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 12px; cursor: pointer; color: var(--texto); font: inherit;
}
.seletor-botao:hover { border-color: var(--marca); }
.seletor-botao .ini { width: 30px; height: 30px; border-radius: 8px; background: var(--degrade); color: #06281a; font-weight: 800; font-size: .78rem; display: grid; place-items: center; flex: none; }
.seletor-botao > svg { width: 16px; height: 16px; flex: none; color: var(--texto-3); }
.seletor-botao .txt { text-align: left; min-width: 0; flex: 1; line-height: 1.15; }
.seletor-botao .txt b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor-botao .txt small { color: var(--texto-3); font-size: .74rem; }
.seletor-lista { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-3); padding: .4rem; max-height: 360px; overflow-y: auto; }
.seletor-lista button { display: flex; width: 100%; gap: .6rem; align-items: center; padding: .55rem .6rem; border: 0; background: none; border-radius: 9px; text-align: left; cursor: pointer; color: var(--texto); font: inherit; }
.seletor-lista button:hover, .seletor-lista button.sel { background: var(--marca-suave); }

/* ---------- painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpis { grid-template-columns: 1fr; } }
.kpi { padding: 1.2rem 1.3rem; }
.kpi .rot { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--texto-2); font-weight: 600; }
.kpi .rot span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-forte); }
.kpi .rot svg { width: 16px; height: 16px; }
.kpi .val { font: 800 1.9rem var(--fonte-titulo); letter-spacing: -.03em; margin-top: .6rem; }
.kpi .sub { font-size: .8rem; color: var(--texto-3); }
.barra { height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; margin-top: .6rem; border: 1px solid var(--borda); }
.barra > i { display: block; height: 100%; background: var(--degrade); border-radius: 6px; }
.duas-colunas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; }
@media (max-width: 1000px) { .duas-colunas { grid-template-columns: 1fr; } }
.faixa-trial {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--raio-lg); margin-bottom: 1.25rem;
  background: linear-gradient(120deg, rgba(163,230,53,.18), rgba(5,150,105,.14)); border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent);
}
.faixa-trial .num { font: 800 1.6rem var(--fonte-titulo); background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lista-passos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.lista-passos li { display: flex; gap: .8rem; align-items: center; padding: .7rem .4rem; border-radius: 10px; }
.lista-passos .bola { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--borda-forte); color: var(--texto-3); font-size: .8rem; font-weight: 700; flex: none; }
.lista-passos li.feito .bola { background: var(--marca-forte); border-color: var(--marca-forte); color: #fff; }
.lista-passos li.feito .t { color: var(--texto-3); text-decoration: line-through; }
.lista-passos .bola svg { width: 15px; height: 15px; }
.lista-passos .t { flex: 1; font-weight: 550; }

/* upload */
.soltar {
  display: block;
  border: 2px dashed var(--borda-forte); border-radius: var(--raio-lg); padding: 1.6rem; text-align: center; position: relative;
  background: var(--superficie-2); transition: .15s; cursor: pointer;
}
.soltar:hover, .soltar.ativo { border-color: var(--marca); background: var(--marca-suave); }
.soltar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltar svg { width: 30px; height: 30px; color: var(--marca-forte); }
.cert-cartao { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie-2); }
.cert-cartao .selo-cert { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--degrade); color: #06281a; flex: none; }
.cert-cartao .selo-cert svg { width: 24px; height: 24px; }
.cert-cartao dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; margin: .35rem 0 0; font-size: .84rem; }
.cert-cartao dt { color: var(--texto-3); } .cert-cartao dd { margin: 0; font-weight: 550; }

/* diálogo simples */
.veu { position: fixed; inset: 0; z-index: 80; background: rgba(5,15,11,.5); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 1rem; animation: surge .15s ease; }
.dialogo { width: 100%; max-width: 520px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3); }
.dialogo .cartao-corpo { display: flex; flex-direction: column; gap: 1rem; }
@keyframes surge { from { opacity: 0; } }

/* toast */
.toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; min-width: 280px; max-width: 420px; animation: sobe .2s ease; box-shadow: var(--sombra-3); background: var(--superficie); }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } }

/* reconexão do Blazor */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: grid; }
#components-reconnect-modal .r-falhou, #components-reconnect-modal .r-rejeitado { display: none; }
#components-reconnect-modal.components-reconnect-failed .r-tentando,
#components-reconnect-modal.components-reconnect-rejected .r-tentando { display: none; }
#components-reconnect-modal.components-reconnect-failed .r-falhou { display: block; }
#components-reconnect-modal.components-reconnect-rejected .r-rejeitado { display: block; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: .8rem 1.25rem; background: var(--perigo); color: #fff; font-weight: 600; }
#blazor-error-ui a { color: #fff; text-decoration: underline; margin-left: .8rem; }

@media (max-width: 640px) {
  .topo { gap: .6rem; height: 60px; }
  .seletor { flex: 1 1 auto; }
  .seletor-botao { min-width: 0; width: 100%; max-width: none; }
  .seletor-lista { right: auto; width: min(92vw, 360px); }
  .topo .etiqueta { padding: .18rem .45rem; font-size: .7rem; }
  .topo .etiqueta .longo { display: none; }
  .conteudo { padding-top: 1.25rem; }
  .cabecalho-pagina h1 { font-size: 1.45rem; }
  .cartao-corpo { padding: 1.1rem; } .cartao-cab { padding: 1rem 1.1rem; }
  .tabela th, .tabela td { padding: .7rem .9rem; }
  .faixa-trial { flex-wrap: wrap; }
}