/* =====================================================================
   Hotbox · base visual do sistema (estilo "Grelha")
   ---------------------------------------------------------------------
   Toda tela usa só este arquivo. Regras de uso:

   BOTÕES (class="botao ...")
     .primario  laranja  → só a ação principal da tela (no máximo 1 por tela)
     .concluir  verde    → concluir, aprovar, ativar, receber, ligar
     .perigo    vermelho → excluir, cancelar, desconectar, refazer anúncio
                           (sempre com confirmação: data-confirmar="Pergunta?")
     .perigo.contorno    → atalho que leva a uma tela de confirmação
     (sem cor)  contorno → secundárias: voltar, filtrar, exportar, detalhes

   ETIQUETAS DE STATUS (class="selo ...") — sempre com texto, nunca só cor
     .verde    ativo, pago, concluído, sincronizado
     .amarelo  pausado, aguardando, em produção, estoque baixo, simulação
     .vermelho erro, atrasado, sem estoque, reconectar
     .azul     informação, em andamento, agendado
     .cinza    cancelado, finalizado, desligado

   MENSAGENS (class="aviso ...")  success | warning | error | info
   ===================================================================== */

:root {
  /* Marca */
  --laranja: #F16122;
  --laranja-hover: #FF7B31;
  --laranja-texto: #C44B12;          /* laranja legível em texto pequeno */
  --laranja-suave: rgba(241, 97, 34, .12);
  --preto: #141414;
  --cinza-escuro: #2B2B2B;

  /* Superfícies e texto (tema claro) */
  --fundo: #F4F4F5;
  --superficie: #FFFFFF;
  --superficie-2: #FAFAFA;
  --texto: #1C1C1C;
  --sutil: #6B6B6B;
  --borda: #E2E2E5;
  --borda-forte: #C9C9CE;
  --sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .04);
  --sombra-hover: 0 2px 6px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .07);

  /* Funções */
  --verde: #1F8A4C;     --verde-hover: #25A05A;   --verde-fundo: #E3F4EA;    --verde-texto: #146B39;
  --amarelo: #E5B800;                              --amarelo-fundo: #FFF6CC;  --amarelo-texto: #6E5600;
  --vermelho: #CF3427;  --vermelho-hover: #E0402F; --vermelho-fundo: #FBE6E4; --vermelho-texto: #A52319;
  --azul: #2563B8;                                 --azul-fundo: #E3EDFA;     --azul-texto: #1B4E94;
  --neutro-fundo: #ECECEE; --neutro-texto: #5A5A5F;

  /* Forma e movimento */
  --raio: 14px;
  --raio-campo: 10px;
  --rapido: .16s ease;
  --suave: .25s cubic-bezier(.2, .7, .3, 1);

  --titulos: Archivo, "Segoe UI", system-ui, sans-serif;
  --texto-fonte: Lato, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

/* Tema escuro: segue o aparelho, a não ser que a pessoa tenha escolhido o claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --laranja-texto: #FF8A4C;
    --laranja-suave: rgba(241, 97, 34, .18);
    --fundo: #0E0E0F; --superficie: #1A1A1B; --superficie-2: #202022;
    --texto: #ECECEC; --sutil: #A3A3A8; --borda: #2E2E31; --borda-forte: #45454A;
    --sombra: none; --sombra-hover: 0 6px 20px rgba(0, 0, 0, .45);
    --verde: #2E9E5E; --verde-hover: #3DBE75; --verde-fundo: #16301F; --verde-texto: #6FD89B;
    --amarelo: #F2CC3D; --amarelo-fundo: #332A08; --amarelo-texto: #F5D65E;
    --vermelho: #D63B2D; --vermelho-hover: #E5493B; --vermelho-fundo: #3A1512; --vermelho-texto: #FF8A7E;
    --azul: #4C8EE6; --azul-fundo: #122640; --azul-texto: #8DB8F2;
    --neutro-fundo: #2A2A2D; --neutro-texto: #B4B4B9;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --laranja-texto: #FF8A4C;
  --laranja-suave: rgba(241, 97, 34, .18);
  --fundo: #0E0E0F; --superficie: #1A1A1B; --superficie-2: #202022;
  --texto: #ECECEC; --sutil: #A3A3A8; --borda: #2E2E31; --borda-forte: #45454A;
  --sombra: none; --sombra-hover: 0 6px 20px rgba(0, 0, 0, .45);
  --verde: #2E9E5E; --verde-hover: #3DBE75; --verde-fundo: #16301F; --verde-texto: #6FD89B;
  --amarelo: #F2CC3D; --amarelo-fundo: #332A08; --amarelo-texto: #F5D65E;
  --vermelho: #D63B2D; --vermelho-hover: #E5493B; --vermelho-fundo: #3A1512; --vermelho-texto: #FF8A7E;
  --azul: #4C8EE6; --azul-fundo: #122640; --azul-texto: #8DB8F2;
  --neutro-fundo: #2A2A2D; --neutro-texto: #B4B4B9;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 var(--texto-fonte);
  transition: background-color var(--suave), color var(--suave);
}
a { color: var(--laranja-texto); text-decoration: none; transition: color var(--rapido); }
a:hover { color: var(--laranja-hover); }
h1, h2, h3, h4 { font-family: var(--titulos); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 1.1rem; }
h1 .sutil { font-size: 1rem; font-weight: 600; }
h2 { font-size: 1.12rem; margin: 1.75rem 0 .7rem; }
.cartao h2 { margin-top: 0; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
::selection { background: var(--laranja-suave); }

/* Entrada suave do conteúdo */
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.conteudo, .tela-login .cartao-login { animation: surgir .35s cubic-bezier(.2, .7, .3, 1) both; }

/* ---------- Layout e menu ---------- */
.layout { display: flex; min-height: 100vh; }
.menu {
  width: 232px; flex-shrink: 0; background: var(--preto); color: #C9C9CC;
  padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.menu-topo { display: flex; align-items: center; justify-content: space-between; }
.menu .marca { display: block; padding: 4px 8px 18px; }
.menu .marca img { width: 158px; height: auto; display: block; transition: transform var(--suave); }
.menu .marca:hover img { transform: scale(1.03); }
.menu-abrir { display: none; }
.menu-links { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-links > a, .menu .futuro, .menu-item {
  color: #C9C9CC; padding: 8px 14px; border-radius: 999px; font-size: .94rem;
  transition: background-color var(--rapido), color var(--rapido), transform var(--rapido);
}
.menu-links > a:hover, .menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-links > a:active { transform: scale(.98); }
.menu-links > a.ativo { background: rgba(241, 97, 34, .16); color: #FF9A62; font-weight: 700; }
.menu .grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: #7C7C80; margin: 16px 14px 4px; }
.menu .futuro { opacity: .4; cursor: default; }
.rodape-menu { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 12px; }
.rodape-menu > a { color: #C9C9CC; padding: 8px 14px; border-radius: 999px; font-size: .94rem; transition: background-color var(--rapido), color var(--rapido); }
.rodape-menu > a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rodape-menu .quem { padding: 6px 14px 0; font-size: .82rem; color: #7C7C80; }
.menu-item { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }

.conteudo { flex: 1; padding: 28px 32px 48px; max-width: 1180px; min-width: 0; }
.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.cabecalho h1 { margin: 0; }
.cabecalho > div { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.voltar { display: inline-flex; align-items: center; gap: .3rem; color: var(--sutil); font-size: .92rem; margin: 0 0 .8rem; }
.voltar:hover { color: var(--laranja-texto); }

/* ---------- Cartões e números ---------- */
.cartao {
  background: var(--superficie); border: 1px solid transparent; border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.15rem 1.3rem;
  transition: box-shadow var(--suave), transform var(--suave), border-color var(--suave), background-color var(--suave);
}
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-top: 1rem; }
.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.numero {
  background: var(--superficie); border: 1px solid transparent; border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 1rem 1.2rem; color: var(--texto); display: flex; flex-direction: column;
  transition: box-shadow var(--suave), transform var(--suave), border-color var(--suave);
}
a.numero:hover { color: var(--texto); transform: translateY(-2px); box-shadow: var(--sombra-hover); border-color: var(--laranja-suave); }
.numero strong { font-family: var(--titulos); font-weight: 800; font-size: 1.85rem; line-height: 1.15; }
.numero span { color: var(--sutil); font-size: .9rem; }
.numero.alerta { box-shadow: inset 0 3px 0 var(--amarelo), var(--sombra); }
.numero.alerta strong { color: var(--amarelo-texto); }

.linha { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .55rem 0 0; }
.sutil { color: var(--sutil); }
.pequeno { font-size: .85rem; margin-top: .1rem; }
.vermelho { color: var(--vermelho-texto); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--borda-forte); background: transparent; color: var(--texto);
  padding: .55rem 1.15rem; border-radius: 999px; font: 700 .92rem/1.2 var(--texto-fonte);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.botao:hover { color: var(--texto); border-color: var(--sutil); background: var(--superficie); }
.botao:active { transform: translateY(1px) scale(.98); }
.botao.primario { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.botao.primario:hover { background: var(--laranja-hover); border-color: var(--laranja-hover); box-shadow: 0 4px 14px rgba(241, 97, 34, .35); transform: translateY(-1px); }
.botao.concluir { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao.concluir:hover { background: var(--verde-hover); border-color: var(--verde-hover); box-shadow: 0 4px 14px rgba(31, 138, 76, .3); transform: translateY(-1px); }
.botao.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.botao.perigo:hover { background: var(--vermelho-hover); border-color: var(--vermelho-hover); box-shadow: 0 4px 14px rgba(207, 52, 39, .3); transform: translateY(-1px); }
.botao.perigo.contorno { background: transparent; color: var(--vermelho-texto); border-color: var(--vermelho); box-shadow: none; transform: none; }
.botao.perigo.contorno:hover { background: var(--vermelho-fundo); }
.botao[disabled] { opacity: .5; pointer-events: none; }
form.inline { display: inline; }

/* ---------- Tabelas ---------- */
.tabela-caixa { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.tabela-caixa .tabela { box-shadow: none; }
.tabela th, .tabela td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sutil); background: var(--superficie-2); }
.tabela tbody tr { transition: background-color var(--rapido); }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td > a:first-child { font-weight: 700; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ---------- Etiquetas de status ---------- */
.selo {
  display: inline-flex; align-items: center; gap: .38rem; padding: .14rem .62rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  background: var(--neutro-fundo); color: var(--neutro-texto);
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.selo.verde, .selo.sucesso { background: var(--verde-fundo); color: var(--verde-texto); }
.selo.amarelo, .selo.aviso-selo { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.selo.vermelho, .selo.erro { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.selo.azul, .selo.andamento { background: var(--azul-fundo); color: var(--azul-texto); }
.selo.cinza, .selo.neutro { background: var(--neutro-fundo); color: var(--neutro-texto); }

/* ---------- Mensagens ---------- */
.aviso {
  display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1.05rem; border-radius: 12px; margin-bottom: 1rem;
  background: var(--azul-fundo); color: var(--azul-texto); font-weight: 600;
  animation: surgir .3s ease both;
}
.aviso::before { content: "ℹ"; font-weight: 800; }
.aviso.success { background: var(--verde-fundo); color: var(--verde-texto); }
.aviso.success::before { content: "✓"; }
.aviso.warning { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.aviso.warning::before { content: "⚠"; }
.aviso.error { background: var(--vermelho-fundo); color: var(--vermelho-texto); }
.aviso.error::before { content: "✕"; }
.errorlist { list-style: none; padding: .8rem 1.05rem; margin: 0 0 1rem; border-radius: 12px; background: var(--vermelho-fundo); color: var(--vermelho-texto); font-weight: 600; }

/* ---------- Formulários ---------- */
input, select, textarea {
  font: inherit; padding: .58rem .8rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-campo);
  background: var(--superficie); color: var(--texto); max-width: 100%;
  transition: border-color var(--rapido), box-shadow var(--rapido), background-color var(--suave);
}
input:hover, select:hover, textarea:hover { border-color: var(--sutil); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave); }
input::placeholder, textarea::placeholder { color: var(--sutil); opacity: .8; }
input[type=checkbox], input[type=radio] { padding: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--laranja); cursor: pointer; box-shadow: none; }
.formulario { max-width: 640px; }
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.05rem; }
.campo label { font-weight: 700; font-size: .92rem; }
.campo.caixa label { font-weight: 400; display: flex; gap: .55rem; align-items: center; cursor: pointer; }
.campo small { color: var(--sutil); font-size: .84rem; }
.campo small.erro { color: var(--vermelho-texto); font-weight: 600; }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--vermelho); }
.campo.com-erro input:focus, .campo.com-erro select:focus { box-shadow: 0 0 0 3px var(--vermelho-fundo); }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1.1rem .1rem; margin: 0 0 1.1rem; }
legend { font-family: var(--titulos); font-weight: 700; padding: 0 .4rem; }
.lado-a-lado { display: flex; gap: 1rem; flex-wrap: wrap; }
.lado-a-lado .campo { flex: 1; min-width: 140px; }
.parametros { border-left: 3px solid var(--laranja); padding-left: 1rem; margin-bottom: 1rem; }
.acoes { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.filtros { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
.filtros input[name=q] { flex: 1; min-width: min(100%, 260px); max-width: 380px; }
.filtros label { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }

/* ---------- Diversos ---------- */
.ficha { display: grid; grid-template-columns: 180px 1fr; gap: .6rem 1rem; margin: 0 0 1rem; }
.ficha dt { color: var(--sutil); }
.ficha dd { margin: 0; }
.log { background: #111; color: #D6D6D6; padding: 1rem 1.1rem; border-radius: 12px; overflow-x: auto; white-space: pre-wrap; font-size: .85rem; }
.paginas { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1.2rem; }
.grade-canais { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.canal h2 { margin-bottom: .6rem; }
.canal:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }

/* ---------- Login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--fundo); }
.cartao-login { width: 100%; max-width: 380px; background: var(--superficie); border-radius: 18px; box-shadow: var(--sombra-hover); overflow: hidden; }
.cartao-login .topo-login { background: var(--preto); padding: 28px 24px 22px; display: grid; place-items: center; }
.cartao-login .topo-login img { width: 200px; max-width: 80%; height: auto; }
.cartao-login form { padding: 24px; display: flex; flex-direction: column; gap: 1rem; }
.cartao-login h1 { font-size: 1.25rem; margin: 0; }
.cartao-login label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .92rem; }
.cartao-login .botao { width: 100%; padding: .7rem; margin-top: .25rem; }
.cartao-login .aviso { margin: 0; }

/* ---------- Tema escuro: ajustes de cartão ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cartao, :root:not([data-theme="light"]) .numero,
  :root:not([data-theme="light"]) .tabela, :root:not([data-theme="light"]) .tabela-caixa { border-color: var(--borda); }
}
:root[data-theme="dark"] .cartao, :root[data-theme="dark"] .numero,
:root[data-theme="dark"] .tabela, :root[data-theme="dark"] .tabela-caixa { border-color: var(--borda); }

/* ---------- Celular ---------- */
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .menu { width: auto; height: auto; position: sticky; top: 0; z-index: 10; padding: 10px 16px; overflow: visible; }
  .menu .marca { padding: 4px 0; }
  .menu .marca img { width: 118px; }
  .menu-abrir {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: rgba(255, 255, 255, .08); color: #fff; border: 0; font-size: 1.2rem; cursor: pointer;
    transition: background-color var(--rapido);
  }
  .menu-abrir:hover { background: rgba(255, 255, 255, .15); }
  .menu-links { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--suave), opacity var(--suave), padding-top var(--suave); }
  .menu.aberto .menu-links { max-height: 80vh; opacity: 1; overflow-y: auto; padding-top: 8px; }
  .menu .futuro, .menu .grupo { display: none; }
  .numeros { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .numero { padding: .85rem 1rem; }
  .conteudo { padding: 18px 16px 40px; }
  h1 { font-size: 1.35rem; }
  .ficha { grid-template-columns: 1fr; gap: .15rem; }
  .ficha dd { margin-bottom: .6rem; }
  .tabela { display: block; overflow-x: auto; }
  .cabecalho > div { width: 100%; }
}

/* Quem prefere menos movimento no aparelho */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}