/* Componentes reutilizáveis. Cada bloco aparece em pelo menos duas telas. */

/* ═══════════════════ cartão ═══════════════════ */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: var(--e-5);
}
.cartao--compacto { padding: var(--e-4); }
.cartao--limpo { background: none; border-color: transparent; padding: 0; }
.cartao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.cartao__titulo { font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em; }

.grade { display: grid; gap: var(--e-4); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grade--kpi { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

/* ═══════════════════ KPI ═══════════════════ */

.kpi {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-1);
  position: relative; overflow: hidden;
  transition: border-color var(--rapido), transform var(--rapido);
}
.kpi:hover { border-color: var(--linha-forte); }
.kpi__rot { font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.kpi__val { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi__val--g { font-size: var(--t-2xl); }
.kpi__pe { font-size: var(--t-xs); color: var(--txt-3); display: flex; align-items: center; gap: 5px; }
.kpi__faisca { position: absolute; right: var(--e-3); bottom: var(--e-3); opacity: .5; }
.kpi--destaque { border-color: var(--acento); background: linear-gradient(160deg, var(--acento-fraco), transparent 60%); }
.kpi--ok { border-color: #12B88655; }
.kpi--erro { border-color: #F0475E55; }

/* ═══════════════════ botão ═══════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 var(--e-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--linha);
  background: var(--superficie-2);
  color: var(--txt);
  font-size: var(--t-sm); font-weight: 650;
  white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido), opacity var(--rapido);
}
.btn:hover { background: var(--superficie-3); border-color: var(--linha-forte); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn--acento { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn--acento:hover { background: var(--acento-2); border-color: var(--acento-2); }
.btn--ok { background: var(--ok); border-color: var(--ok); color: #04170F; }
.btn--erro { background: transparent; border-color: #F0475E55; color: var(--erro); }
.btn--erro:hover { background: var(--erro-fraco); }
.btn--fantasma { background: transparent; border-color: transparent; color: var(--txt-2); }
.btn--fantasma:hover { background: var(--superficie-2); color: var(--txt); }
.btn--sm { height: 27px; padding: 0 10px; font-size: var(--t-xs); }
.btn--lg { height: 42px; padding: 0 var(--e-6); font-size: var(--t-base); }
.btn--bloco { width: 100%; }
.btn--icone { width: 34px; padding: 0; }
.btn--icone.btn--sm { width: 27px; }

/* ═══════════════════ selo ═══════════════════ */

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px;
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700;
  background: var(--superficie-2); color: var(--txt-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.selo--ok    { background: var(--ok-fraco);    color: var(--ok);    border-color: #12B88633; }
.selo--aviso { background: var(--aviso-fraco); color: var(--aviso); border-color: #FFB02033; }
.selo--erro  { background: var(--erro-fraco);  color: var(--erro);  border-color: #F0475E33; }
.selo--info  { background: var(--info-fraco);  color: var(--info);  border-color: #4C8DF533; }
.selo--acento{ background: var(--acento-fraco);color: var(--acento);border-color: #FF5C3833; }
.selo__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ═══════════════════ avatar e bandeira ═══════════════════ */

.avatar {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%;
  font-weight: 800; color: #fff;
  object-fit: cover;
  border: 1.5px solid var(--superficie);
  letter-spacing: -.02em;
}
.pilha-avatar { display: flex; }
.pilha-avatar .avatar:not(:first-child) { margin-left: -8px; }

.bandeira { border-radius: 3px; flex: none; filter: drop-shadow(0 1px 2px #0006); }

.identidade { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.identidade__nome { font-weight: 650; font-size: var(--t-sm); }

/* ═══════════════════ formulário ═══════════════════ */

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo__rot { font-size: var(--t-xs); font-weight: 700; color: var(--txt-2); letter-spacing: .02em; }
.campo__rot span { color: var(--erro); }
.campo__dica { font-size: var(--t-xs); color: var(--txt-3); }

.entrada, .selecao, .area {
  width: 100%;
  min-height: 34px; padding: 7px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-size: var(--t-sm);
  transition: border-color var(--rapido), background var(--rapido);
}
.entrada::placeholder, .area::placeholder { color: var(--txt-3); }
.entrada:hover, .selecao:hover, .area:hover { border-color: var(--linha-forte); }
.entrada:focus, .selecao:focus, .area:focus { outline: none; border-color: var(--acento); box-shadow: var(--foco); }
.area { min-height: 84px; resize: vertical; line-height: 1.55; }
.selecao { appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AA5B8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.entrada--num { font-variant-numeric: tabular-nums; text-align: right; }

.grade-form { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grade-form--2 { grid-template-columns: 1fr 1fr; }
.col-cheia { grid-column: 1 / -1; }

.fieldset { border: 1px solid var(--linha); border-radius: var(--r); padding: var(--e-4); }
.fieldset legend { padding: 0 var(--e-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }

/* Escolha por chips — mais rápido que <select> para lista curta e visível. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px; border-radius: var(--r-full);
  border: 1px solid var(--linha); background: var(--superficie-2);
  font-size: var(--t-xs); font-weight: 650; color: var(--txt-2);
  transition: all var(--rapido);
}
.chip:hover { border-color: var(--linha-forte); color: var(--txt); }
.chip.is-ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
.chip[data-cor].is-ativo { color: #fff; }

.interruptor { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 0; }
.interruptor__pista {
  width: 36px; height: 20px; border-radius: var(--r-full);
  background: var(--superficie-3); border: 1px solid var(--linha);
  position: relative; transition: background var(--medio), border-color var(--medio); flex: none;
}
.interruptor__pista::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--txt-3);
  transition: transform var(--medio), background var(--medio);
}
.interruptor input:checked + .interruptor__pista { background: var(--ok); border-color: var(--ok); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(16px); background: #fff; }
.interruptor input:focus-visible + .interruptor__pista { box-shadow: var(--foco); }

/* ═══════════════════ tabela ═══════════════════ */

.tabela-rolagem { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--linha); }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th {
  text-align: left; padding: 9px var(--e-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--txt-3); background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.tabela td { padding: 9px var(--e-3); border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr { transition: background var(--rapido); }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tbody tr.is-clicavel { cursor: pointer; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela--fixa { table-layout: fixed; }

/* ═══════════════════ gráficos ═══════════════════ */

.barras-h { display: flex; flex-direction: column; gap: 9px; }
.barra-h { display: grid; grid-template-columns: minmax(80px, 130px) 1fr auto; align-items: center; gap: var(--e-3); font-size: var(--t-sm); }
.barra-h__rot { color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h__trilho { height: 8px; border-radius: var(--r-full); background: var(--superficie-2); overflow: hidden; }
.barra-h__preench { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--lento); }
.barra-h__val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; font-size: var(--t-xs); }

.colunas { display: flex; align-items: flex-end; gap: 6px; height: calc(var(--altura) + 42px); padding-top: 16px; }
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.coluna__barra {
  width: 100%; max-width: 46px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--acento) 0%, #FF5C3855 100%);
  transition: height var(--lento);
}
.coluna.is-destaque .coluna__barra { background: var(--brilho); box-shadow: 0 0 18px #FF5C3866; }
.coluna__val { font-size: 10px; font-weight: 700; color: var(--txt-3); font-variant-numeric: tabular-nums; margin-bottom: 5px; white-space: nowrap; transition: opacity var(--rapido); }
.coluna.is-destaque .coluna__val { color: var(--acento); }
/* Muitas colunas: o número só aparece no destaque e sob o ponteiro. */
.colunas--densas .coluna__val { opacity: 0; }
.colunas--densas .coluna.is-destaque .coluna__val,
.colunas--densas .coluna:hover .coluna__val { opacity: 1; }
.coluna__rot { font-size: 10.5px; color: var(--txt-3); margin-top: 7px; font-weight: 600; }
.coluna:hover .coluna__barra { filter: brightness(1.2); }

.anel__txt { fill: var(--txt); font-size: 25px; font-weight: 800; font-family: var(--fonte); }
.faisca { display: block; }

/* Barra de progresso simples, para meta em linha. */
.progresso { height: 7px; border-radius: var(--r-full); background: var(--superficie-2); overflow: hidden; }
.progresso__preench { height: 100%; border-radius: var(--r-full); background: var(--brilho-ok); transition: width var(--lento); }
.progresso--acento .progresso__preench { background: var(--brilho); }

/* ═══════════════════ abas ═══════════════════ */

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: var(--e-5); overflow-x: auto; }
.aba {
  padding: 9px var(--e-4); font-size: var(--t-sm); font-weight: 650; color: var(--txt-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--rapido), border-color var(--rapido);
}
.aba:hover { color: var(--txt); }
.aba.is-ativa { color: var(--acento); border-bottom-color: var(--acento); }

/* ═══════════════════ modal e gaveta ═══════════════════ */

.veu {
  position: fixed; inset: 0; z-index: 60;
  background: #000000AA; backdrop-filter: blur(3px);
  animation: aparecer var(--medio);
}
@keyframes aparecer { from { opacity: 0; } }

.modal {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--r-xl); box-shadow: var(--sombra-3);
  display: flex; flex-direction: column;
  animation: subir var(--medio);
}
.modal--largo { width: min(940px, calc(100vw - 32px)); }
@keyframes subir { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } }

.gaveta {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--superficie); border-left: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-3);
  display: flex; flex-direction: column;
  animation: deslizar var(--medio);
}
.gaveta--larga { width: min(760px, 100vw); }
@keyframes deslizar { from { transform: translateX(24px); opacity: 0; } }

.painel__cabeca {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-5); border-bottom: 1px solid var(--linha); flex: none;
}
.painel__corpo { padding: var(--e-5); overflow-y: auto; flex: 1; }
.painel__pe {
  padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linha);
  display: flex; gap: var(--e-2); justify-content: flex-end; flex: none;
  background: var(--superficie);
}
.painel__fechar { width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--txt-3); font-size: 17px; display: grid; place-items: center; flex: none; }
.painel__fechar:hover { background: var(--superficie-2); color: var(--txt); }

/* ═══════════════════ menu suspenso ═══════════════════ */

.menu {
  position: absolute; z-index: 70; min-width: 190px;
  background: var(--superficie-3); border: 1px solid var(--linha-forte);
  border-radius: var(--r); box-shadow: var(--sombra-3);
  padding: 5px; animation: subirMenu var(--rapido);
}
@keyframes subirMenu { from { opacity: 0; transform: translateY(-4px); } }
.menu__item {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--txt-2); text-align: left;
}
.menu__item:hover { background: var(--superficie-2); color: var(--txt); text-decoration: none; }
.menu__item--perigo { color: var(--erro); }
.menu__sep { height: 1px; background: var(--linha); margin: 5px 0; }

/* ═══════════════════ aviso flutuante ═══════════════════ */

.avisos { position: fixed; z-index: 90; bottom: var(--e-5); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--e-2); align-items: center; pointer-events: none; }
.aviso-flutuante {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 10px var(--e-4); border-radius: var(--r-full);
  background: var(--superficie-3); border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-3); font-size: var(--t-sm); font-weight: 600;
  animation: subirAviso var(--medio); pointer-events: auto; max-width: 90vw;
}
.aviso-flutuante--ok { border-color: #12B88666; }
.aviso-flutuante--erro { border-color: #F0475E66; }
@keyframes subirAviso { from { opacity: 0; transform: translateY(12px); } }

/* ═══════════════════ estado vazio ═══════════════════ */

.vazio-rico {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  padding: var(--e-12) var(--e-5); text-align: center;
  border: 1px dashed var(--linha); border-radius: var(--r-lg);
}
.vazio-rico__icone { font-size: 30px; opacity: .4; }
.vazio-rico__titulo { font-weight: 700; font-size: var(--t-md); }
.vazio-rico__txt { color: var(--txt-3); font-size: var(--t-sm); max-width: 44ch; }

/* ═══════════════════ pesquisa ═══════════════════ */

.busca { position: relative; flex: 1; max-width: 380px; }
.busca__icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--txt-3); font-size: 13px; pointer-events: none; }
.busca .entrada { padding-left: 31px; border-radius: var(--r-full); }

/* ═══════════════════ divisor rotulado ═══════════════════ */

.divisor { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-5) 0 var(--e-3); }
.divisor::after { content: ""; flex: 1; height: 1px; background: var(--linha); }