/* Componentes. Cada bloco corresponde a um módulo em js/ui/. */

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--alvo-min); padding: 0 var(--e-4); border-radius: var(--r-md); border: 1px solid var(--borda-forte); background: var(--sup); color: var(--texto); font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur), border-color var(--dur); }
.btn:hover { background: var(--sup-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.btn-primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.btn-perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn-perigo:hover { filter: brightness(.92); background: var(--erro); }
.btn-fantasma { border-color: transparent; background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--sup-2); color: var(--texto); }
.btn-pequeno { min-height: 30px; padding: 0 var(--e-3); font-size: var(--t-xs); }
.btn-icone { width: var(--alvo-min); padding: 0; }
.btn-icone.btn-pequeno { width: 30px; }
.btn .ico { width: 16px; height: 16px; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-color: var(--texto-3) transparent var(--texto-3) transparent; border-radius: 50%; animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Cartão ---------- */
.cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: var(--e-5); box-shadow: var(--sombra-1); min-width: 0; }
.cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); flex-wrap: wrap; }
.cartao-cab h3 { font-size: var(--t-md); }

/* ---------- Campos ---------- */
.form { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.form .campo-largo, .form .form-acoes, .form .form-erro { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.campo label, .campo legend, .rotulo { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto); }
.campo .obrig { color: var(--erro); margin-left: 2px; }
.campo .ajuda { font-size: var(--t-xs); color: var(--texto-3); }
.campo .msg-erro { font-size: var(--t-xs); color: var(--erro-texto); font-weight: var(--peso-medio); display: flex; gap: 4px; align-items: center; }
.campo .msg-erro::before { content: '!'; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--erro); color: #fff; font-size: 10px; font-weight: 700; }
.entrada, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo textarea {
  width: 100%; min-height: var(--alvo-min); padding: var(--e-2) var(--e-3); border: 1px solid var(--borda-forte); border-radius: var(--r-md); background: var(--sup); color: var(--texto); font: inherit; font-size: var(--t-md);
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, .entrada:focus-visible { box-shadow: var(--foco); border-color: var(--info); }
.campo [aria-invalid="true"] { border-color: var(--erro) !important; background: var(--erro-suave) !important; }
.campo .com-prefixo { position: relative; }
.campo .com-prefixo span { position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%); color: var(--texto-3); font-size: var(--t-sm); pointer-events: none; }
.campo .com-prefixo input { padding-left: 36px !important; text-align: right; font-variant-numeric: tabular-nums; }
.campo input[type=number], .campo input[inputmode=decimal] { font-variant-numeric: tabular-nums; }
.checkbox { display: flex; align-items: flex-start; gap: var(--e-2); min-height: var(--alvo-min); padding-top: var(--e-2); font-size: var(--t-md); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marca); flex-shrink: 0; }
.campo-arquivo { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.campo-arquivo img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--borda); background: var(--sup-2); }
.form-acoes { display: flex; gap: var(--e-2); justify-content: flex-end; flex-wrap: wrap; padding-top: var(--e-2); }
.form-erro { padding: var(--e-3); border-radius: var(--r-md); background: var(--erro-suave); color: var(--erro-texto); font-size: var(--t-sm); }

/* ---------- Selos ---------- */
.selo { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: var(--peso-forte); letter-spacing: .02em; white-space: nowrap; line-height: 1; border: 1px solid transparent; vertical-align: middle; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.selo-estimativa { color: var(--d-estimativa); background: var(--d-estimativa-bg); border-style: dashed; border-color: var(--d-estimativa); }
.selo-anunciado { color: var(--d-anunciado); background: var(--d-anunciado-bg); }
.selo-cotado { color: var(--d-cotado); background: var(--d-cotado-bg); }
.selo-pago { color: var(--d-pago); background: var(--d-pago-bg); }
.selo-confirmado { color: var(--d-confirmado); background: var(--d-confirmado-bg); }
.selo-real { color: var(--d-pago); background: var(--d-pago-bg); }
.selo-projecao { color: var(--d-projecao); background: var(--d-projecao-bg); border-style: dashed; border-color: currentColor; }
.selo-exemplo { color: var(--info-texto); background: var(--info-suave); border-style: dashed; border-color: currentColor; text-transform: uppercase; }
.selo-sucesso { color: var(--sucesso-texto); background: var(--sucesso-suave); }
.selo-alerta { color: var(--alerta-texto); background: var(--alerta-suave); }
.selo-erro { color: var(--erro-texto); background: var(--erro-suave); }
.selo-info { color: var(--info-texto); background: var(--info-suave); }
.selo-neutro { color: var(--texto-2); background: var(--sup-2); }
.selo-simulado { color: var(--simulado); background: var(--simulado-bg); border: 2px solid #111; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; height: 22px; }
.selo-simulado::before { width: 10px; height: 10px; border-radius: 2px; background: var(--simulado-listra); }
.faixa-simulado { background: var(--simulado-listra); padding: 3px; border-radius: var(--r-md); }
.faixa-simulado > * { background: var(--simulado-bg); color: #111; font-weight: 700; padding: var(--e-1) var(--e-3); border-radius: var(--r-sm); display: block; text-align: center; letter-spacing: .04em; font-size: var(--t-sm); }
.selo-integracao { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--borda); background: var(--sup); font-size: var(--t-xs); color: var(--texto-2); white-space: nowrap; }
.selo-integracao b { font-weight: var(--peso-forte); color: var(--texto); }
.selo-integracao.simulador { border: 2px solid #111; background: var(--simulado-bg); color: #111; }
.selo-integracao.simulador b { color: #111; }
.selo-integracao.sandbox { border-color: var(--alerta); background: var(--alerta-suave); color: var(--alerta-texto); }
.selo-integracao.producao { border-color: var(--sucesso); color: var(--sucesso-texto); }

/* ---------- Tabela ---------- */
.tabela-wrap { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-1); min-width: 0; }
.tabela-barra { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3); border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.tabela-barra .busca { position: relative; flex: 1 1 220px; max-width: 320px; }
.tabela-barra .busca input { width: 100%; min-height: 34px; padding: 0 var(--e-3) 0 32px; border: 1px solid var(--borda-forte); border-radius: var(--r-md); background: var(--sup); color: var(--texto); font: inherit; font-size: var(--t-sm); }
.tabela-barra .busca .ico { position: absolute; left: 9px; top: 8px; width: 16px; height: 16px; color: var(--texto-3); }
.tabela-barra select { min-height: 34px; border: 1px solid var(--borda-forte); border-radius: var(--r-md); background: var(--sup); color: var(--texto); font: inherit; font-size: var(--t-sm); padding: 0 var(--e-2); max-width: 100%; }
.tabela-barra .espaco { flex: 1; }
.tabela-barra .selecao-info { font-size: var(--t-sm); color: var(--texto-2); }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.tabela th, .tabela td { padding: 0 var(--e-3); height: 40px; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td.quebra { white-space: normal; min-width: 200px; }
.tabela thead th { position: sticky; top: 0; background: var(--sup-2); color: var(--texto-2); font-weight: var(--peso-forte); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; height: 36px; }
.tabela th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tabela th button:focus-visible { box-shadow: var(--foco); border-radius: var(--r-sm); }
.tabela th .seta { opacity: .35; font-size: 10px; }
.tabela th[aria-sort] .seta { opacity: 1; color: var(--marca); }
.tabela .n, .tabela th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th.n button { flex-direction: row-reverse; }
.tabela td.cod { font-family: var(--fonte-mono); font-size: var(--t-xs); color: var(--texto-2); }
.tabela td.sel, .tabela th.sel { width: 40px; padding-right: 0; }
.tabela input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--marca); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--sup-2); }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:focus-visible { box-shadow: inset 0 0 0 2px var(--info); outline: none; }
.tabela tbody tr[aria-selected="true"] td { background: var(--marca-suave); }
.tabela tfoot td { font-weight: var(--peso-forte); background: var(--sup-2); border-top: 1px solid var(--borda-forte); }
.tabela-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-3); border-top: 1px solid var(--borda); font-size: var(--t-sm); color: var(--texto-2); flex-wrap: wrap; }
.paginacao { display: flex; gap: var(--e-1); align-items: center; }
.tabela-wrap .estado { border: 0; box-shadow: none; }

/* ---------- KPI ---------- */
.kpi { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: var(--e-4) var(--e-4) var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); box-shadow: var(--sombra-1); min-width: 0; position: relative; }
.kpi.projecao { border-style: dashed; }
.kpi.simulado { border: 2px solid #111; }
.kpi-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.kpi-rotulo { font-size: var(--t-sm); color: var(--texto-2); font-weight: var(--peso-medio); display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.kpi-valor { font-size: var(--t-2xl); font-weight: var(--peso-forte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.kpi-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-3); min-height: 24px; flex-wrap: wrap; }
.variacao { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.variacao.boa { color: var(--sucesso-texto); } .variacao.ruim { color: var(--erro-texto); } .variacao.neutra { color: var(--texto-3); }
.kpi .sparkline { width: 88px; height: 24px; }
.dica { position: relative; display: inline-flex; }
.dica-botao { all: unset; cursor: help; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--borda-forte); color: var(--texto-3); font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; }
.dica-botao:focus-visible { box-shadow: var(--foco); }
.dica-texto { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; background: var(--texto); color: var(--sup); padding: var(--e-2) var(--e-3); border-radius: var(--r-md); font-size: var(--t-xs); font-weight: var(--peso-normal); line-height: 1.45; z-index: 20; box-shadow: var(--sombra-2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--dur); }
.dica:hover .dica-texto, .dica:focus-within .dica-texto { opacity: 1; visibility: visible; }

/* ---------- Estados ---------- */
.estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-2); padding: var(--e-10) var(--e-4); border: 1px dashed var(--borda-forte); border-radius: var(--r-lg); background: var(--sup); }
.estado h3 { font-size: var(--t-md); }
.estado p { color: var(--texto-2); font-size: var(--t-sm); max-width: 48ch; margin: 0; }
.estado .estado-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sup-2); color: var(--texto-3); margin-bottom: var(--e-1); }
.estado .estado-ico .ico { width: 20px; height: 20px; }
.estado.erro .estado-ico { background: var(--erro-suave); color: var(--erro); }
.estado.sucesso .estado-ico { background: var(--sucesso-suave); color: var(--sucesso); }
.estado.construcao .estado-ico { background: var(--alerta-suave); color: var(--alerta); }
.estado .btn { margin-top: var(--e-2); }
.esqueleto { display: flex; flex-direction: column; gap: var(--e-2); }
.esq { background: linear-gradient(90deg, var(--sup-2) 0, var(--sup-3) 50%, var(--sup-2) 100%); background-size: 200% 100%; animation: brilho 1.3s ease-in-out infinite; border-radius: var(--r-sm); height: 14px; }
.esq.linha-tab { height: 36px; }
.esq.bloco { height: 96px; border-radius: var(--r-lg); }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Toast ---------- */
.toasts { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--e-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); background: var(--texto); color: var(--sup); box-shadow: var(--sombra-3); font-size: var(--t-sm); border-left: 4px solid var(--info); animation: entrar 180ms ease-out; }
.toast.sucesso { border-left-color: var(--sucesso); } .toast.erro { border-left-color: var(--erro); } .toast.alerta { border-left-color: var(--alerta); }
.toast p { margin: 0; flex: 1; }
.toast button { all: unset; cursor: pointer; opacity: .7; padding: 0 4px; font-size: 16px; line-height: 1; }
.toast button:focus-visible { box-shadow: var(--foco); }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 767px) { .toasts { bottom: 72px; right: var(--e-4); } }

/* ---------- Diálogo e gaveta ---------- */
dialog.dialogo, dialog.gaveta { border: 0; padding: 0; background: var(--sup); color: var(--texto); box-shadow: var(--sombra-3); max-width: calc(100vw - 32px); }
dialog.dialogo { border-radius: var(--r-lg); width: 520px; max-height: calc(100dvh - 64px); }
dialog.dialogo.largo { width: 760px; }
dialog::backdrop { background: rgb(20 22 20 / .45); }
dialog.gaveta { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: 520px; border-radius: 0; }
dialog.gaveta[open] { animation: deslizar 200ms ease-out; display: flex; flex-direction: column; }
dialog.dialogo[open] { display: flex; flex-direction: column; animation: entrar 160ms ease-out; }
@keyframes deslizar { from { transform: translateX(24px); opacity: .4; } }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borda); }
.dlg-cab h2 { font-size: var(--t-lg); }
.dlg-corpo { padding: var(--e-5); overflow-y: auto; flex: 1; }
.dlg-rodape { display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borda); background: var(--sup-2); flex-wrap: wrap; }
.dlg-perigo .dlg-cab h2 { color: var(--erro-texto); }
.detalhes { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-2) var(--e-4); margin: 0; font-size: var(--t-sm); }
.detalhes dt { color: var(--texto-3); }
.detalhes dd { margin: 0; font-weight: var(--peso-medio); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  dialog.gaveta { width: 100vw; max-width: 100vw; }
  dialog.dialogo { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 90dvh; }
}

/* ---------- Abas ---------- */
.abas-lista { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e-4); overflow-x: auto; scrollbar-width: thin; }
.abas-lista [role=tab] { all: unset; cursor: pointer; padding: var(--e-2) var(--e-3); min-height: 24px; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.abas-lista [role=tab]:hover { color: var(--texto); }
.abas-lista [role=tab][aria-selected=true] { color: var(--marca-forte); border-bottom-color: var(--marca); }
.abas-lista [role=tab]:focus-visible { box-shadow: var(--foco); border-radius: var(--r-sm); }
.contagem { font-size: 11px; background: var(--sup-2); color: var(--texto-2); padding: 1px 6px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }

/* ---------- Filtro de período ---------- */
.periodo { display: inline-flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.segmentado { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--r-md); overflow: hidden; background: var(--sup); }
.segmentado button { all: unset; cursor: pointer; padding: 0 var(--e-3); min-height: 32px; display: inline-flex; align-items: center; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto-2); border-right: 1px solid var(--borda); }
.segmentado button:last-child { border-right: 0; }
.segmentado button[aria-pressed=true] { background: var(--marca); color: var(--marca-texto); }
.segmentado button:focus-visible { box-shadow: inset 0 0 0 2px var(--info); }
.periodo-personalizado { display: inline-flex; gap: var(--e-2); align-items: center; font-size: var(--t-sm); flex-wrap: wrap; }
.periodo-personalizado input { min-height: 32px; border: 1px solid var(--borda-forte); border-radius: var(--r-md); padding: 0 var(--e-2); font: inherit; font-size: var(--t-sm); background: var(--sup); color: var(--texto); }
.periodo-rotulo { font-size: var(--t-xs); color: var(--texto-3); }

/* ---------- Gráficos ---------- */
.grafico { margin: 0; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: var(--e-4); box-shadow: var(--sombra-1); position: relative; min-width: 0; }
.grafico-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-2); flex-wrap: wrap; }
.grafico-cab h3 { font-size: var(--t-md); }
.grafico-cab .meta { font-size: var(--t-xs); color: var(--texto-3); }
.grafico-area { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--fonte); }
.grafico .eixo text { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .grade-linha { stroke: var(--borda); stroke-width: 1; }
.grafico .base { stroke: var(--borda-forte); }
.grafico .marca-foco { outline: none; cursor: pointer; }
.grafico .marca-foco:focus-visible .alvo, .grafico .marca-foco:hover .alvo { stroke: var(--texto); stroke-width: 2; }
.grafico .ponto { stroke: var(--sup); stroke-width: 2; }
.grafico .hoje { stroke: var(--texto-3); stroke-dasharray: 2 3; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-top: var(--e-3); padding: 0; list-style: none; }
.grafico-legenda button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--texto-2); padding: 2px 4px; border-radius: var(--r-sm); }
.grafico-legenda button:focus-visible { box-shadow: var(--foco); }
.grafico-legenda button[aria-pressed=false] { opacity: .45; text-decoration: line-through; }
.grafico-legenda .amostra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.grafico-legenda .amostra.tracejada { background: none !important; border: 2px dashed; height: 0; width: 14px; border-radius: 0; }
.grafico-dica { position: absolute; pointer-events: none; background: var(--texto); color: var(--sup); border-radius: var(--r-md); padding: var(--e-2) var(--e-3); font-size: var(--t-xs); line-height: 1.5; box-shadow: var(--sombra-2); z-index: 10; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translate(-50%, calc(-100% - 10px)); }
.grafico-dica b { font-weight: var(--peso-forte); }
.grafico-dados { margin-top: var(--e-2); font-size: var(--t-xs); }
.grafico-dados summary { cursor: pointer; color: var(--texto-3); }
.grafico-dados table { margin-top: var(--e-2); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grafico-dados th, .grafico-dados td { padding: 2px 8px; border-bottom: 1px solid var(--borda); text-align: right; }
.grafico-dados th:first-child, .grafico-dados td:first-child { text-align: left; }
.rosca-centro { font-size: 18px; font-weight: 600; fill: var(--texto); font-variant-numeric: tabular-nums; }
.rosca-centro-sub { font-size: 11px; fill: var(--texto-3); }
.gantt-rolagem { overflow-x: auto; }

/* ---------- Leitor de código ---------- */
.leitor { display: flex; flex-direction: column; gap: var(--e-2); }
.leitor-linha { display: flex; gap: var(--e-2); }
.leitor-linha input { flex: 1; min-width: 0; min-height: var(--alvo-min); padding: 0 var(--e-3); border: 1px solid var(--borda-forte); border-radius: var(--r-md); background: var(--sup); color: var(--texto); font-family: var(--fonte-mono); font-size: var(--t-md); letter-spacing: .04em; }
.leitor video { width: 100%; max-height: 260px; background: #000; border-radius: var(--r-md); object-fit: cover; }
.leitor-status { font-size: var(--t-xs); color: var(--texto-3); min-height: 1.5em; }

/* ---------- Catálogo ---------- */
.amostras-cor { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e-2); }
.amostra-cor { border: 1px solid var(--borda); border-radius: var(--r-md); overflow: hidden; font-size: var(--t-xs); background: var(--sup); }
.amostra-cor div { height: 44px; }
.amostra-cor span { display: block; padding: 4px 8px; font-family: var(--fonte-mono); color: var(--texto-2); }
.aviso-exemplo { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-3) var(--e-4); border: 1px dashed var(--info); background: var(--info-suave); color: var(--info-texto); border-radius: var(--r-md); font-size: var(--t-sm); margin-bottom: var(--e-6); }
.aviso { padding: var(--e-3) var(--e-4); border-radius: var(--r-md); font-size: var(--t-sm); border-left: 4px solid; }
.aviso.info { background: var(--info-suave); color: var(--info-texto); border-color: var(--info); }
.aviso.alerta { background: var(--alerta-suave); color: var(--alerta-texto); border-color: var(--alerta); }
.aviso.erro { background: var(--erro-suave); color: var(--erro-texto); border-color: var(--erro); }
.aviso.sucesso { background: var(--sucesso-suave); color: var(--sucesso-texto); border-color: var(--sucesso); }

/* Ajustes de celular */
.segmentado { max-width: 100%; overflow-x: auto; }
.segmentado button { white-space: nowrap; flex-shrink: 0; }
.kpi-cab { flex-wrap: wrap; align-items: flex-start; }
.kpi-valor { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 767px) {
  .kpi { padding: var(--e-3); }
  .kpi-valor { font-size: var(--t-lg); }
}
@media (max-width: 400px) {
  .grade-kpi { grid-template-columns: minmax(0, 1fr) !important; }
  .kpi-valor { font-size: var(--t-xl); }
}