/* componentes.css - as peças reutilizáveis das telas: botões, cartões, formulários, tabelas etc. */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 2.5rem; padding: .5rem var(--e-4);
  border: 1px solid transparent; border-radius: var(--raio-sm);
  font-weight: 600; font-size: var(--t-sm); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn--primario { background: var(--verde-escuro); color: #fff; }
.btn--primario:hover { background: var(--verde-escuro-2); color: #fff; }
.btn--destaque { background: var(--laranja); color: var(--texto); }
.btn--destaque:hover { background: #e4552a; color: var(--texto); }
.btn--secundario { background: var(--superficie); color: var(--verde-escuro); border-color: var(--borda-forte); }
.btn--secundario:hover { background: #eef3ec; color: var(--verde-escuro); }
.btn--fantasma { background: transparent; color: var(--verde-escuro); }
.btn--fantasma:hover { background: rgb(53 77 54 / .08); color: var(--verde-escuro); }
.btn--perigo { background: var(--perigo); color: #fff; }
.btn--perigo:hover { background: #8f1c12; color: #fff; }
.btn--pequeno { min-height: 2rem; padding: .25rem var(--e-3); font-size: var(--t-xs); }
.btn--icone { padding: .5rem; min-width: 2.5rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Cartões ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.cartao__cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borda); }
.cartao__cabecalho h2, .cartao__cabecalho h3 { margin: 0; }
.cartao__corpo { padding: var(--e-5); }
.cartao__rodape { padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borda);
  background: #fafcf9; border-radius: 0 0 var(--raio) var(--raio); }

/* Indicadores (números grandes do início) */
.indicador { padding: var(--e-4) var(--e-5); border-left: 4px solid var(--verde-vivo); }
.indicador--laranja { border-left-color: var(--laranja); }
.indicador__rotulo { font-size: var(--t-xs); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.indicador__valor { font-size: 1.5rem; white-space: nowrap; font-weight: 700; color: var(--verde-escuro); line-height: 1.2; font-variant-numeric: tabular-nums; }
.indicador__nota { font-size: var(--t-xs); color: var(--texto-suave); }

/* ---------- Selos (etiquetas de situação) ---------- */
.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .125rem .6rem; border-radius: var(--raio-pilula);
  font-size: var(--t-xs); font-weight: 600; background: #eef2ec; color: var(--texto); white-space: nowrap; }
.selo--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo--perigo  { background: var(--perigo-fundo);  color: var(--perigo); }
.selo--aviso   { background: var(--aviso-fundo);   color: var(--aviso); }
.selo--info    { background: var(--info-fundo);    color: var(--info); }
.selo--laranja { background: var(--laranja-fundo); color: var(--laranja-escuro); }

/* ---------- Avisos dentro da página ---------- */
.aviso { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border: 1px solid; border-radius: var(--raio-sm); font-size: var(--t-sm); }
.aviso--sucesso { background: var(--sucesso-fundo); color: var(--sucesso); border-color: #b8e0c6; }
.aviso--perigo  { background: var(--perigo-fundo);  color: var(--perigo);  border-color: #f2c1bd; }
.aviso--aviso   { background: var(--aviso-fundo);   color: var(--aviso);   border-color: #ecd596; }
.aviso--info    { background: var(--info-fundo);    color: var(--info);    border-color: #bcd5f0; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: var(--e-1); }
.campo > label { font-size: var(--t-sm); font-weight: 600; }
.campo__ajuda { font-size: var(--t-xs); color: var(--texto-suave); }
.campo__erro { font-size: var(--t-xs); color: var(--perigo); font-weight: 600; }
.entrada, .selecao, .area-texto {
  width: 100%; min-height: 2.5rem; padding: .5rem .75rem;
  background: #fff; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
}
/* Caixa de seleção: seta própria no lugar da seta do sistema (funciona em todo navegador) */
.selecao {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556256' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem;
}
.selecao:disabled { background-color: #f1f4ef; color: var(--texto-suave); cursor: not-allowed; }

/* Melhoria extra, só para computador com mouse e navegador compatível (Chrome, Edge):
   a lista que abre também ganha o visual do sistema. No celular continua a lista nativa
   do aparelho (mais confortável). Onde não houver suporte, nada muda. */
@media (hover: hover) and (pointer: fine) {
  @supports (appearance: base-select) {
    .selecao { appearance: base-select; background-image: none; padding-right: .75rem; }
    .selecao::picker(select) {
      appearance: base-select; padding: var(--e-1); margin-top: 4px; background: #fff;
      border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); box-shadow: var(--sombra-2);
    }
    .selecao::picker-icon { color: var(--texto-suave); }
    .selecao option { padding: .5rem .75rem; border-radius: var(--raio-sm); cursor: pointer; }
    .selecao option:hover, .selecao option:focus-visible { background: #eef3ec; box-shadow: none; }
    .selecao option:checked { background: var(--laranja-fundo); color: var(--laranja-escuro); font-weight: 600; }
  }
}
.entrada:hover, .selecao:hover, .area-texto:hover { border-color: var(--texto-suave); }
.entrada:focus-visible, .selecao:focus-visible, .area-texto:focus-visible { border-color: var(--verde-vivo); box-shadow: var(--foco); }
.entrada[aria-invalid="true"] { border-color: var(--perigo); }
.area-texto { min-height: 6rem; resize: vertical; }
.formulario { display: grid; gap: var(--e-4); }
.formulario--2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---------- Tabelas ---------- */
.tabela-rolavel { overflow-x: auto; }
.tabela { font-size: var(--t-sm); }
.tabela th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); font-weight: 600; padding: var(--e-3) var(--e-4);
  background: #f8faf7; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td.quebra { white-space: normal; }
.tabela tbody tr:hover { background: #f8fbf6; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela th.num, .tabela td.num { text-align: right; }

/* ---------- Abas ---------- */
.abas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); overflow-x: auto; }
.aba { background: none; border: 0; border-bottom: 3px solid transparent; padding: var(--e-3) var(--e-4);
  font-weight: 600; color: var(--texto-suave); cursor: pointer; white-space: nowrap; border-radius: 0; }
.aba:hover { color: var(--verde-escuro); }
.aba[aria-selected="true"] { color: var(--verde-escuro); border-bottom-color: var(--laranja); }
.painel-aba { padding-top: var(--e-4); }

/* ---------- Janela de diálogo ---------- */
.dialogo { border: 0; padding: 0; border-radius: var(--raio); box-shadow: var(--sombra-3); color: var(--texto);
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.dialogo::backdrop { background: rgb(28 38 29 / .55); }
.dialogo__cabecalho { 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); }
.dialogo__cabecalho h2 { margin: 0; font-size: var(--t-lg); }
.dialogo__corpo { padding: var(--e-5); }
.dialogo__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: #fafcf9; }

/* ---------- Avisos flutuantes (aparecem e somem sozinhos) ---------- */
.avisos-flutuantes { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 200; display: flex;
  flex-direction: column; gap: var(--e-2); max-width: min(24rem, calc(100vw - 2rem)); }
.aviso-flutuante { padding: var(--e-3) var(--e-4); border-radius: var(--raio-sm); box-shadow: var(--sombra-2);
  font-size: var(--t-sm); font-weight: 600; border-left: 5px solid; background: #fff; }
.aviso-flutuante--sucesso { border-left-color: var(--sucesso); color: var(--sucesso); }
.aviso-flutuante--perigo  { border-left-color: var(--perigo);  color: var(--perigo); }
.aviso-flutuante--aviso   { border-left-color: var(--laranja); color: var(--aviso); }
.aviso-flutuante--info    { border-left-color: var(--info);    color: var(--info); }

/* ---------- Paginação, vazio, carregando ---------- */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
  font-size: var(--t-sm); color: var(--texto-suave); }
.vazio { text-align: center; padding: var(--e-7) var(--e-4); color: var(--texto-suave); }
.carregando { display: inline-block; width: 1.25rem; height: 1.25rem; border: 3px solid var(--borda);
  border-top-color: var(--verde-vivo); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.texto-suave { color: var(--texto-suave); }

/* ---------- Ajudantes de organização (grades, pilhas e linhas) ---------- */
.grade { display: grid; gap: var(--e-4); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.pilha > * + * { margin-top: var(--e-4); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.linha--entre { justify-content: space-between; }


/* ---------- Texto corrido de documentos (Política de Privacidade etc.) ---------- */
.documento { max-width: 46rem; }
.documento h1 { font-size: var(--t-xl); }
.documento h2 { font-size: var(--t-lg); margin-top: var(--e-5); }
.documento ul, .documento ol { padding-left: 1.25rem; margin: 0 0 var(--e-3); }
.documento li { margin-bottom: var(--e-1); }
.documento code { background: #eef3ec; padding: .1rem .35rem; border-radius: var(--raio-sm); font-size: .9em; }