/* =========================================================================
   XP Grupos - identidade Cobalto / XP ADS
   Azul = acao e marca. Verde = SO positivo. Roboto. Escuro por padrao.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* Superficies - tema claro */
  --fundo: #f9fafb;         /* gray-50  */
  --superficie: #ffffff;
  --superficie-2: #f3f4f6;  /* gray-100 */
  --borda: #e5e7eb;         /* gray-200 */
  --borda-interna: #f3f4f6; /* gray-100 */

  /* Texto */
  --texto: #111827;         /* gray-900 */
  --texto-2: #6b7280;       /* gray-500 */
  --texto-3: #9ca3af;       /* gray-400 */
  --rotulo: #374151;        /* gray-700 */

  /* Campos */
  --campo-fundo: #ffffff;
  --campo-borda: #d1d5db;   /* gray-300 */
  --campo-texto: #111827;

  /* Acao e status */
  --azul: #2563eb;          /* blue-600 */
  --azul-forte: #1d4ed8;    /* blue-700 */
  --azul-anel: #3b82f6;     /* blue-500 */
  --verde: #16a34a;         /* green-600 */
  --verde-forte: #15803d;
  --vermelho: #dc2626;      /* red-600  */
  --vermelho-forte: #b91c1c;
  --ambar: #f59e0b;         /* amber-500 */
  --laranja: #f97316;       /* orange-500 */
  --roxo: #9333ea;          /* purple-600 */

  /* Fundos suaves dos icones de card */
  --azul-suave: #eff6ff;
  --verde-suave: #f0fdf4;
  --ambar-suave: #fffbeb;
  --roxo-suave: #faf5ff;
  --laranja-suave: #fff7ed;
  --vermelho-suave: #fef2f2;

  --sombra: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sombra-alta: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.dark {
  --fundo: #0f172a;         /* slate-900 */
  --superficie: #1e293b;    /* slate-800 */
  --superficie-2: #334155;  /* slate-700 */
  --borda: #334155;         /* slate-700 */
  --borda-interna: #334155;

  --texto: #ffffff;
  --texto-2: #94a3b8;       /* slate-400 */
  --texto-3: #64748b;       /* slate-500 */
  --rotulo: #cbd5e1;        /* slate-300 */

  --campo-fundo: #334155;   /* slate-700 */
  --campo-borda: #475569;   /* slate-600 */
  --campo-texto: #f1f5f9;   /* slate-100 */

  --azul-suave: rgb(30 58 138 / 0.35);
  --verde-suave: rgb(20 83 45 / 0.35);
  --ambar-suave: rgb(120 53 15 / 0.35);
  --roxo-suave: rgb(88 28 135 / 0.35);
  --laranja-suave: rgb(124 45 18 / 0.35);
  --vermelho-suave: rgb(127 29 29 / 0.35);

  --sombra: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --sombra-alta: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 14px/1.5 Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }

/* Caixa alta nos titulos: marca registrada da identidade. */
h1, h2, h3 {
  margin: 0 0 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texto);
}
h1 { font-size: 24px; }
h2 { font-size: 14px; color: var(--texto-2); }
h3 { font-size: 13px; }
.dark h2 { color: #fff; }

/* ------------------------------------------------------------- layout --- */
.painel { display: flex; min-height: 100vh; }

.lateral {
  width: 240px; flex-shrink: 0;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: transform .3s;
}
.dark .lateral { background: #0f172a; }

.lateral .marca {
  padding: 18px 16px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}
.lateral .marca .logo { display: block; height: 30px; width: auto; }

/* Seletor de area: a plataforma tem dois lados (Rifas e Grupos). */
.areas {
  display: flex; gap: 4px; margin: 14px 12px 0;
  padding: 4px; border-radius: 10px; background: var(--superficie-2);
}
.areas .area {
  flex: 1; text-align: center; padding: 7px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--texto-2); text-decoration: none;
  font: 700 12px Roboto, sans-serif; text-transform: uppercase; letter-spacing: .03em;
  cursor: pointer; transition: background-color .15s, color .15s;
}
.areas .area:hover { color: var(--texto); }
.areas .area.ativa { background: var(--azul); color: #fff; box-shadow: var(--sombra); }

.lateral nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lateral nav button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--texto-2);
  font: 500 14px Roboto, sans-serif; cursor: pointer;
  text-align: left; transition: background-color .15s, color .15s;
}
.lateral nav button:hover { background: var(--superficie-2); color: var(--texto); }
.lateral nav button.ativo { background: var(--azul-suave); color: var(--azul); }
.dark .lateral nav button.ativo { color: #60a5fa; }
.lateral nav button svg { flex-shrink: 0; }

.lateral .rodape { padding: 12px; border-top: 1px solid var(--borda); }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20;
}
.dark .topo { background: #0f172a; }
.espaco { flex: 1; }

main { padding: 24px; max-width: 1280px; width: 100%; }
main > .aba { display: none; }
main > .aba.ativa { display: block; }

.hamburguer { display: none; }

/* ------------------------------------------------------------- cartao --- */
.grade { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 1100px) { .g4 { grid-template-columns: repeat(4, 1fr); } }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 20px;
}

/* Card de metrica: rotulo em caixa alta, valor grande, icone colorido. */
.kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi .texto { flex: 1; min-width: 0; }
.kpi .rotulo {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--texto-2); letter-spacing: .02em;
}
.dark .kpi .rotulo { color: #fff; }
.kpi .valor { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--texto); }
.kpi .valor.bom { color: var(--verde); }
.kpi .valor.alerta { color: var(--ambar); }
.kpi .valor.ruim { color: var(--vermelho); }
.kpi .nota { font-size: 12px; color: var(--texto-3); margin-top: 2px; }

.icone {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icone.azul    { background: var(--azul-suave);     color: var(--azul); }
.icone.verde   { background: var(--verde-suave);    color: var(--verde); }
.icone.ambar   { background: var(--ambar-suave);    color: var(--ambar); }
.icone.roxo    { background: var(--roxo-suave);     color: var(--roxo); }
.icone.laranja { background: var(--laranja-suave);  color: var(--laranja); }
.icone.vermelho{ background: var(--vermelho-suave); color: var(--vermelho); }
.dark .icone.azul { color: #60a5fa; }
.dark .icone.verde { color: #4ade80; }
.dark .icone.roxo { color: #c084fc; }

/* ------------------------------------------------------------ tabelas --- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 12px 16px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  color: var(--texto-2); border-bottom: 1px solid var(--borda); white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--borda-interna); color: var(--texto); }
tbody tr:hover, table tr:hover { background: var(--superficie-2); }
.dark table tr:hover { background: rgb(51 65 85 / 0.5); }
tr:last-child td { border-bottom: 0; }
.rolar { overflow-x: auto; }

/* ---------------------------------------------------------- controles --- */
input, select, textarea, button { font-family: Roboto, system-ui, sans-serif; font-size: 14px; }

input[type=text], input[type=password], input[type=number],
input[type=datetime-local], input[type=file], select, textarea {
  display: block; width: 100%; height: 40px;
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--campo-borda);
  background: var(--campo-fundo); color: var(--campo-texto);
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 80px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-anel);
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.35);
}
.dark input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #334155 inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

label { display: block; margin-bottom: 14px; }
label .t {
  display: block; margin-bottom: 4px;
  font-size: 14px; font-weight: 500; color: var(--rotulo);
}
label.linha { display: flex; align-items: center; gap: 8px; }
label.linha input { width: auto; height: auto; display: inline-block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border: 0; border-radius: 6px;
  background: var(--azul); color: #fff;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color .15s;
}
.btn:hover { background: var(--azul-forte); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--azul-anel); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.fantasma {
  background: var(--campo-fundo); color: var(--rotulo);
  border: 1px solid var(--campo-borda);
}
.btn.fantasma:hover { background: var(--superficie-2); }
.btn.perigo { background: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-forte); }
.btn.sucesso { background: var(--verde); }
.btn.sucesso:hover { background: var(--verde-forte); }
.btn.mini { height: 32px; padding: 0 12px; font-size: 12px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.tema {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-2); cursor: pointer; box-shadow: var(--sombra);
  transition: background-color .15s, color .15s;
}
.tema:hover { background: var(--superficie-2); color: var(--texto); }

/* Mostra o icone do tema para o qual o clique vai levar. */
.so-claro { display: none; }
.dark .so-claro { display: block; }
.so-escuro { display: block; }
.dark .so-escuro { display: none; }

/* ---------------------------------------------------------- etiquetas --- */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tag.azul     { background: #dbeafe; color: #1e40af; }
.tag.verde    { background: #dcfce7; color: #166534; }
.tag.ambar    { background: #fef9c3; color: #854d0e; }
.tag.vermelho { background: #fee2e2; color: #991b1b; }
.tag.cinza    { background: var(--superficie-2); color: var(--texto-2); }
.dark .tag.azul     { background: rgb(30 58 138 / 0.4); color: #93c5fd; }
.dark .tag.verde    { background: rgb(20 83 45 / 0.4); color: #86efac; }
.dark .tag.ambar    { background: rgb(113 63 18 / 0.4); color: #fde047; }
.dark .tag.vermelho { background: rgb(127 29 29 / 0.4); color: #fca5a5; }

/* -------------------------------------------------------------- barra --- */
.barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; min-width: 90px; }
.barra i { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.barra i.cheio { background: var(--ambar); }
.barra i.lotado { background: var(--vermelho); }

/* -------------------------------------------------------------- modal --- */
.fundo-modal {
  position: fixed; inset: 0; z-index: 50; padding: 20px;
  background: rgb(0 0 0 / 0.5);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra-alta);
  padding: 24px; width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
}
.modal.estreito { max-width: 420px; }
.modal h2 { font-size: 18px; font-weight: 600; text-transform: none; color: var(--texto); }
.oculto { display: none !important; }

/* -------------------------------------------------------------- login --- */
#tela-login {
  background: linear-gradient(to bottom right, #eff6ff, #e0e7ff);
}
.dark #tela-login { background: linear-gradient(to bottom right, #0f172a, #1e293b); }
#tela-login .modal { max-width: 420px; border-radius: 16px; padding: 32px; }

/* ------------------------------------------------------------- avisos --- */
.aviso {
  padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
  background: var(--ambar-suave); color: #92400e; border: 1px solid #fde68a;
}
.dark .aviso { color: #fcd34d; border-color: rgb(217 119 6 / 0.4); }
.info {
  padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
  background: var(--azul-suave); color: #1d4ed8;
}
.dark .info { color: #93c5fd; }
.dica { color: var(--texto-3); font-size: 12px; margin-top: 4px; }
.vazio { color: var(--texto-3); text-align: center; padding: 32px; font-size: 14px; }

#recado {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  padding: 12px 16px; border-radius: 8px; max-width: 380px;
  box-shadow: var(--sombra-alta); color: var(--texto);
}
#recado.erro { border-left-color: var(--vermelho); }

.qr { background: #fff; padding: 12px; border-radius: 12px; display: block; margin: 0 auto 12px; }
.mono { font-family: 'Roboto Mono', ui-monospace, Consolas, monospace; font-size: 13px; }

.link-captacao {
  display: flex; gap: 8px; align-items: center;
  background: var(--superficie-2); border: 1px dashed var(--campo-borda);
  padding: 10px 12px; border-radius: 8px; margin: 12px 0;
}
.link-captacao .url { flex: 1; overflow: auto; white-space: nowrap; color: var(--texto-2); }

/* ------------------------------------------------------------- celular -- */
@media (max-width: 860px) {
  .lateral {
    position: fixed; z-index: 40; transform: translateX(-100%);
    box-shadow: var(--sombra-alta);
  }
  .lateral.aberta { transform: translateX(0); }
  .hamburguer { display: flex; }
  main { padding: 16px; }
  .topo { padding: 12px 16px; }
}