/* ═══════════════════════════════════════════════════════════════════════
   WAGURI · Design system — componentes
   Botões, formulários, cartões, tabelas, avisos, modal, paginação.

   Toda cor derivada usa color-mix() sobre variável de acento, então o tema
   claro/escuro funciona sem duplicar valores. Ver base.css para os tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── botões ─────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--bg3);
  color: var(--txt);
  border: 1px solid var(--borda);
  padding: 8px 14px;
  border-radius: var(--r-p);
  cursor: pointer;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background var(--t-rapido), border-color var(--t-rapido),
              color var(--t-rapido), transform .08s ease, box-shadow var(--t-rapido);
}
.btn:hover {
  border-color: var(--borda2);
  background: var(--bg4);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--borda); background: var(--bg3); transform: none; }
.btn i { font-size: 16px; }

/* botão primário: sólido, sem glow colorido (enterprise) */
.btn-cheio {
  background: var(--roxo);
  color: var(--sobre-acento);
  font-weight: 620;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--roxo) 34%, transparent);
}
.btn-cheio:hover {
  background: color-mix(in srgb, var(--roxo) 88%, var(--txt));
  border-color: transparent;
  filter: none;
}
.btn-cheio:disabled:hover { background: var(--roxo); }

.btn-perigo:hover {
  border-color: color-mix(in srgb, var(--vermelho) 55%, transparent);
  color: var(--vermelho);
  background: color-mix(in srgb, var(--vermelho) 9%, var(--bg3));
}
.btn-ok:hover {
  border-color: color-mix(in srgb, var(--verde) 55%, transparent);
  color: var(--verde);
  background: color-mix(in srgb, var(--verde) 9%, var(--bg3));
}

.btn-mini { padding: 4px 9px; font-size: 11.5px; border-radius: 7px; gap: 5px; }
.btn-mini i { font-size: 13px; }

/* no celular, botão-mini só de ícone virava alvo de 33px de LARGURA:
   a altura já era 44, mas o dedo erra na horizontal do mesmo jeito */
@media (max-width: 720px) {
  .btn-mini { min-width: 44px; }
}
.btn-icone { width: 34px; height: 34px; padding: 0; flex-shrink: 0; }
.btn-icone i { font-size: 17px; }

/* ───────────────────────── formulários ──────────────────────────────── */

.campo { display: block; margin-bottom: 15px; }
.campo > .rotulo {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt2);
  margin-bottom: 6px;
  font-weight: 640;
}

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=date], input[type=url], select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: var(--r-p);
  padding: 10px 13px;
  color: var(--txt);
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido),
              background var(--t-rapido);
  max-width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--borda2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--txt3); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }

select {
  cursor: pointer;
  appearance: none;
  /* seta desenhada com currentColor-ish: usa --txt2 via fill fixo por tema */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2397a1b0'%3E%3Cpath d='M8 11L3.5 6h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 13px;
  padding-right: 32px;
}
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6472'%3E%3Cpath d='M8 11L3.5 6h9z'/%3E%3C/svg%3E");
}

.entrada-icone { position: relative; display: block; }
.entrada-icone > i:first-child {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--txt3);
  pointer-events: none;
  font-size: 17px;
}
.entrada-icone input { padding-left: 38px; }

.alternar-senha {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  color: var(--txt2);
  cursor: pointer;
  padding: 7px 9px;
  font-size: 17px;
  line-height: 1;
  border-radius: 6px;
  transition: color var(--t-rapido), background var(--t-rapido);
}
.alternar-senha:hover { color: var(--txt); background: var(--bg3); }

.caixa-marcar {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--txt2); font-size: 12.5px; cursor: pointer;
  white-space: nowrap;
}
.caixa-marcar input { width: auto; accent-color: var(--roxo); cursor: pointer; }

/* ─────────────────────────── cartões ────────────────────────────────── */

.bloco {
  background: var(--bg2);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
}
.bloco > h2 {
  font-size: 14px;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 9px;
  font-weight: 620;
  letter-spacing: -.015em;
}
.bloco > h2 i { color: var(--roxo); font-size: 19px; }
.bloco.destaque {
  border-color: color-mix(in srgb, var(--roxo) 42%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--roxo) 5%, transparent), transparent 62%),
    var(--bg2);
}

.dica { color: var(--txt2); font-size: 12.5px; margin-bottom: 14px; line-height: 1.6; }
.dica:last-child { margin-bottom: 0; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.grade-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 11px;
  margin-bottom: 14px;
}

.metrica {
  background: var(--bg2);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 15px 16px;
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--sombra);
  transition: border-color var(--t-rapido), transform var(--t-rapido),
              box-shadow var(--t-rapido);
}
.metrica:hover {
  border-color: var(--borda2);
  transform: translateY(-1px);
  box-shadow: var(--sombra-alta);
}
.metrica .simbolo {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 21px;
  background: color-mix(in srgb, var(--roxo) 13%, transparent);
  color: var(--roxo);
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--roxo) 20%, transparent);
}
.metrica .valor {
  font-size: 21px; font-weight: 660; line-height: 1.15;
  letter-spacing: -.03em;
  display: block;
}
.metrica .nome {
  color: var(--txt2); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 640;
  display: block; margin-top: 2px;
}

/* ───────────────────────── tabela simples ───────────────────────────── */

.tabela-dados { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-dados td {
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela-dados td:first-child { color: var(--txt2); width: 44%; padding-right: 12px; }
.tabela-dados td:last-child { text-align: right; font-weight: 520; }
.tabela-dados tr:last-child td { border-bottom: 0; }
.tabela-dados tr { transition: background var(--t-rapido); }

.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* ──────────────────────────── barras ────────────────────────────────── */

.barras { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.barra {
  display: grid; grid-template-columns: 118px 1fr 44px;
  gap: 11px; align-items: center; font-size: 12.5px;
}
.barra .rot { display: flex; align-items: center; gap: 8px; color: var(--txt2); }
.barra .rot i { color: var(--roxo); font-size: 17px; }
.barra .trilho {
  display: block;
  background: var(--bg3);
  border: 1px solid var(--borda);
  border-radius: 5px;
  height: 8px;
  overflow: hidden;
}
/* precisa ser block: largura em % não vale para span inline */
.barra .preenche {
  display: block; min-width: 3px; height: 100%;
  border-radius: 4px;
  background: var(--gradiente);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.barra .qtd { text-align: right; color: var(--txt2); font-size: 12px; font-weight: 560; }

/* ──────────────────────────── avisos ────────────────────────────────── */

.aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px;
  border-radius: var(--r-p);
  font-size: 12.5px;
  margin-bottom: 14px;
  border: 1px solid;
  line-height: 1.55;
}
.aviso i { flex-shrink: 0; font-size: 18px; margin-top: -1px; }
.aviso-atencao {
  background: color-mix(in srgb, var(--amarelo) 9%, transparent);
  border-color: color-mix(in srgb, var(--amarelo) 30%, transparent);
  color: color-mix(in srgb, var(--amarelo) 78%, var(--txt));
}
.aviso-erro {
  background: color-mix(in srgb, var(--vermelho) 9%, transparent);
  border-color: color-mix(in srgb, var(--vermelho) 30%, transparent);
  color: color-mix(in srgb, var(--vermelho) 78%, var(--txt));
}
.aviso-info {
  background: color-mix(in srgb, var(--azul) 8%, transparent);
  border-color: color-mix(in srgb, var(--azul) 28%, transparent);
  color: color-mix(in srgb, var(--azul) 78%, var(--txt));
}

.vazio {
  color: var(--txt2); padding: 38px 20px;
  text-align: center; font-size: 13px; line-height: 1.6;
}
.vazio i { display: block; font-size: 36px; margin-bottom: 11px; opacity: .38; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3);
  border: 1px solid var(--borda);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 560;
  color: var(--txt2);
  white-space: nowrap;
}
.etiqueta i { font-size: 12px; }
.etiqueta.azul {
  color: var(--azul);
  border-color: color-mix(in srgb, var(--azul) 28%, transparent);
  background: color-mix(in srgb, var(--azul) 9%, transparent);
}
.etiqueta.amarela {
  color: var(--amarelo);
  border-color: color-mix(in srgb, var(--amarelo) 30%, transparent);
  background: color-mix(in srgb, var(--amarelo) 9%, transparent);
}
.etiqueta.verde {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 28%, transparent);
  background: color-mix(in srgb, var(--verde) 9%, transparent);
}
.etiqueta.vermelha {
  color: var(--vermelho);
  border-color: color-mix(in srgb, var(--vermelho) 30%, transparent);
  background: color-mix(in srgb, var(--vermelho) 9%, transparent);
}
.etiqueta.roxa {
  color: var(--roxo);
  border-color: color-mix(in srgb, var(--roxo) 30%, transparent);
  background: color-mix(in srgb, var(--roxo) 10%, transparent);
}

/* ─────────────────────── recado flutuante (toast) ───────────────────── */

.recado {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg3);
  border: 1px solid var(--borda2);
  padding: 12px 18px;
  border-radius: var(--r-p);
  z-index: 200;
  box-shadow: var(--sombra-alta);
  font-size: 13.5px;
  font-weight: 520;
  max-width: min(92vw, 470px);
  display: flex; align-items: center; gap: 10px;
  animation: sobe .22s cubic-bezier(.4, 0, .2, 1);
}
.recado i { font-size: 19px; }
.recado.ok {
  border-color: color-mix(in srgb, var(--verde) 48%, transparent);
  color: var(--verde);
}
.recado.erro {
  border-color: color-mix(in srgb, var(--vermelho) 48%, transparent);
  color: var(--vermelho);
}
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (max-width: 720px) { .recado { bottom: calc(var(--barra-baixo) + 14px); } }

/* ────────────────────────────── modal ───────────────────────────────── */

.cortina {
  position: fixed; inset: 0;
  background: var(--cortina);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 150;
  padding: 18px;
  animation: aparece .16s ease;
}
@keyframes aparece { from { opacity: 0; } }

.modal {
  background: var(--bg2);
  border: 1px solid var(--borda2);
  border-radius: var(--r-g);
  padding: 24px;
  max-width: 480px; width: 100%;
  position: relative;
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto;
  box-shadow: var(--sombra-alta);
  animation: modal-sobe .2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes modal-sobe { from { opacity: 0; transform: translateY(8px) scale(.985); } }

.modal-fechar {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 0;
  color: var(--txt2);
  font-size: 20px;
  cursor: pointer;
  padding: 5px 8px;
  line-height: 1;
  border-radius: 7px;
  transition: color var(--t-rapido), background var(--t-rapido);
}
.modal-fechar:hover { color: var(--txt); background: var(--bg3); }

/* ─────────────────────────── paginação ──────────────────────────────── */

.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin-top: 18px;
  color: var(--txt2);
  font-size: 12.5px;
  flex-wrap: wrap;
}

.ferramentas { display: flex; gap: 9px; margin-bottom: 15px; flex-wrap: wrap; align-items: center; }
.ferramentas .cresce { flex: 1; min-width: 175px; }

/* ─────────────────────────── carregando ─────────────────────────────── */

.girando { display: inline-block; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.carregando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 34px; color: var(--txt2); font-size: 13px;
}
.carregando i { font-size: 21px; }

/* skeleton: feedback de carregamento mais profissional que um spinner */
.esqueleto {
  background: linear-gradient(90deg,
    var(--bg3) 25%,
    color-mix(in srgb, var(--bg4) 80%, var(--txt) 6%) 50%,
    var(--bg3) 75%);
  background-size: 200% 100%;
  animation: esqueleto 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
}
@keyframes esqueleto { to { background-position: -200% 0; } }

/* ─────────────────────────── responsivo ─────────────────────────────── */

@media (max-width: 860px) { .grade-2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .bloco { padding: 15px; }
  .metrica { padding: 13px; gap: 11px; }
  .metrica .simbolo { width: 34px; height: 34px; font-size: 19px; }
  .metrica .valor { font-size: 18px; }
  .barra { grid-template-columns: 96px 1fr 38px; font-size: 12px; }
  .grade-metricas { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
}