/* ================================================================
   RAVIN SISTEMA ELITE — Arquivo de Estilos (style.css)
   ================================================================

   O QUE É ESTE ARQUIVO?
   Este arquivo controla a aparência visual de todas as páginas
   do sistema. Aqui você encontra cores, fontes, tamanhos,
   espaçamentos e animações.

   COMO ALTERAR ALGO?
   A maioria das mudanças visuais pode ser feita na seção
   "1. VARIÁVEIS GLOBAIS" abaixo. Cada variável está explicada
   em comentários. Você não precisa mexer no restante do arquivo.

   ESTRUTURA DO ARQUIVO:
   1. Variáveis Globais (cores, fontes, tamanhos)
   2. Reset (zera estilos padrão do navegador)
   3. Página (fundo e layout geral)
   4. Card de Login (caixa branca central)
   5. Cabeçalho do Card (topo vinho com logo)
   6. Corpo do Formulário (área de inputs)
   7. Campos de Input (caixas de texto)
   8. Toggle de Senha (botão de mostrar/ocultar)
   9. Opções (lembrar / esqueci a senha)
  10. Botão Entrar
  11. Mensagem de Erro
  12. Rodapé do Card
  13. Animações
  14. Responsivo (adaptação para celular)
   ================================================================ */


/* ================================================================
   1. VARIÁVEIS GLOBAIS
   ================================================================
   Estas são as configurações centrais do sistema visual.
   Altere aqui para mudar a aparência em todo o site de uma vez.

   COMO USAR:
   - Cada linha tem o formato:  --nome-da-variavel: valor;
   - O valor pode ser uma cor (ex: #72253d), um número (ex: 8px)
     ou uma fonte (ex: 'Poppins')
   ================================================================ */

:root {

  /* ------------------------------------------------------------
     CORES DA MARCA
     A cor principal da Ravin é um vinho escuro (#72253d).
     Versões mais escuras e mais claras são usadas para hover,
     gradientes e fundos suaves.
     ------------------------------------------------------------ */

  --color-brand:        #72253d;   /* Cor principal — vinho escuro (cabeçalho, botão, bordas em foco) */
  --color-brand-dark:   #471d2a;   /* Versão mais escura — usada no hover do botão */
  --color-brand-mid:    #9e2452;   /* Versão média — usada em gradientes */
  --color-brand-tint:   #eee4e7;   /* Versão bem clara — fundo de badges e hover suave */
  --color-brand-alpha:  rgba(114, 37, 61, 0.08); /* Cor da marca transparente — brilho ao focar input */

  /* ------------------------------------------------------------
     CORES DE AÇÃO (CTA = Call To Action)
     Verde usado no botão "Adicionar ao carrinho" e elementos
     de confirmação/sucesso.
     ------------------------------------------------------------ */

  --color-cta:          #9bc55c;   /* Verde principal — botões de ação positiva */
  --color-cta-hover:    #9fd946;   /* Verde hover — quando o mouse passa sobre o botão */
  --color-cta-dark:     #4c8356;   /* Verde escuro — estado de sucesso após login */

  /* ------------------------------------------------------------
     CORES DE TEXTO
     Usadas para títulos, parágrafos e textos auxiliares.
     ------------------------------------------------------------ */

  --color-text:         #0f0e0e;   /* Texto principal — quase preto (títulos) */
  --color-body:         #333434;   /* Texto do corpo — cinza escuro (parágrafos e labels) */
  --color-muted:        #72767e;   /* Texto suave — subtítulos e textos secundários */
  --color-placeholder:  #939393;   /* Texto placeholder — texto dentro dos inputs vazios */

  /* ------------------------------------------------------------
     CORES DE SUPERFÍCIE E BORDA
     Usadas para fundos de cards, páginas e divisores.
     ------------------------------------------------------------ */

  --color-surface:      #ffffff;   /* Branco — fundo do card e inputs */
  --color-bg:           #f5f5f5;   /* Cinza bem claro — fundo da página */
  --color-border:       #e2e2e2;   /* Cinza borda — contorno de inputs e divisores */

  /* ------------------------------------------------------------
     CORES DE FEEDBACK (erros e sucesso)
     ------------------------------------------------------------ */

  --color-error:        #f44f44;   /* Vermelho — borda e ícone de erro */
  --color-error-bg:     rgba(244, 79, 68, 0.08);  /* Vermelho transparente — fundo do alerta */
  --color-error-border: rgba(244, 79, 68, 0.25);  /* Vermelho suave — borda do alerta */
  --color-error-text:   #c0392b;   /* Vermelho texto — mensagem de erro */
  --color-success:      #4c8356;   /* Verde — fundo do botão após login com sucesso */

  /* ------------------------------------------------------------
     TIPOGRAFIA (fontes)
     O sistema usa duas fontes:
     - Bebas Neue: fonte de display, usada no logo RAVIN
     - Poppins: fonte principal, usada em todo o texto
     Ambas são carregadas do Google Fonts no HTML.
     ------------------------------------------------------------ */

  --font-display:  'Bebas Neue', sans-serif;   /* Fonte do logo e títulos grandes */
  --font-primary:  'Poppins', Arial, sans-serif; /* Fonte padrão de todo o sistema */

  /* ------------------------------------------------------------
     ARREDONDAMENTO DAS BORDAS (border-radius)
     Controla o quanto os cantos dos elementos são arredondados.
     Quanto maior o número, mais arredondado.
     ------------------------------------------------------------ */

  --radius-sm:    4px;    /* Pequeno — checkboxes e cantos sutis */
  --radius-md:    8px;    /* Médio — inputs e botões */
  --radius-lg:    16px;   /* Grande — card principal */
  --radius-pill:  999px;  /* Pílula — badges e tags completamente arredondadas */

  /* ------------------------------------------------------------
     SOMBRAS
     Dão profundidade aos elementos, como se estivessem
     "flutuando" sobre o fundo.
     ------------------------------------------------------------ */

  --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.10);   /* Sombra média — elementos levemente elevados */
  --shadow-lg:  0 12px 48px rgba(0, 0, 0, 0.15);  /* Sombra grande — card de login */

  /* ------------------------------------------------------------
     TRANSIÇÕES (velocidade das animações)
     Controla a suavidade das mudanças visuais (hover, foco etc.)
     Valores menores = mais rápido. Valores maiores = mais lento.
     ------------------------------------------------------------ */

  --transition: 0.25s ease; /* Velocidade padrão das animações — 0.25 segundos */
}


/* ================================================================
   2. RESET
   ================================================================
   Remove os estilos padrão que cada navegador aplica
   automaticamente (margens, paddings, tamanho de caixa).
   Isso garante que o layout seja igual em todos os navegadores.
   NÃO ALTERE esta seção.
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box; /* Inclui borda e padding no tamanho total do elemento */
  margin: 0;              /* Remove margens padrão */
  padding: 0;             /* Remove espaçamentos internos padrão */
}


/* ================================================================
   3. PÁGINA — Fundo e layout geral
   ================================================================
   Define a aparência do fundo da página e centraliza o card
   de login no meio da tela.
   ================================================================ */

/* Base comum a todas as páginas */
body {
  font-family: var(--font-primary);
  background: var(--color-bg);
  min-height: 100vh;
  margin: 0;
}

/* Layout específico da página de login — centraliza o card na tela */
body.login-page {
  display: flex;                    /* Ativa o modo flexbox para centralizar */
  align-items: center;              /* Centraliza verticalmente */
  justify-content: center;          /* Centraliza horizontalmente */
  position: relative;               /* Necessário para os elementos decorativos */
  overflow: hidden;                 /* Esconde partes dos círculos decorativos que saem da tela */
}

/* Gradiente suave de fundo (decorativo, não interfere no conteúdo) */
body.login-page::before {
  content: '';
  position: fixed;
  inset: 0; /* Cobre toda a tela */
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(114, 37, 61, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(155, 197, 92, 0.08) 0%, transparent 60%);
  pointer-events: none; /* Não interfere nos cliques */
  z-index: 0;
}

/* Círculo decorativo no canto superior direito */
body.login-page::after {
  content: '';
  position: fixed;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 80px solid var(--color-brand-tint); /* Anel na cor tint da marca */
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Blob (mancha circular) decorativo no canto inferior esquerdo */
.bg-shape {
  position: fixed;
  bottom: -80px;
  left: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 37, 61, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


/* ================================================================
   4. CARD DE LOGIN — Caixa branca central
   ================================================================
   O card é a caixa branca arredondada que contém todo o
   formulário de login. Ele aparece centralizado na tela.

   PARA ALTERAR A LARGURA DO CARD:
   Mude o valor de max-width (atualmente 420px).
   ================================================================ */

.login-card {
  position: relative;
  z-index: 1;                         /* Fica acima dos elementos decorativos de fundo */
  background: var(--color-surface);   /* Fundo branco */
  border-radius: var(--radius-lg);    /* Cantos arredondados (16px) */
  box-shadow: var(--shadow-lg);       /* Sombra para dar profundidade */
  width: 100%;                        /* Ocupa 100% no celular */
  max-width: 420px;                   /* Largura máxima no desktop — altere aqui se necessário */
  margin: 24px;                       /* Espaço nas laterais em telas pequenas */
  overflow: hidden;                   /* Impede que o conteúdo "vaze" pelos cantos arredondados */
  animation: slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; /* Animação de entrada */
}


/* ================================================================
   5. CABEÇALHO DO CARD — Topo vinho com logo
   ================================================================
   Área com fundo vinho (cor da marca) que contém o logo RAVIN,
   a tagline e o badge "Sistema Elite".

   PARA ALTERAR A COR DO CABEÇALHO:
   Mude --color-brand em "1. VARIÁVEIS GLOBAIS".

   PARA ALTERAR O ESPAÇAMENTO INTERNO:
   Mude o valor de padding (atualmente 36px 40px 32px =
   topo | laterais | baixo).
   ================================================================ */

.login-header {
  background: var(--color-brand); /* Fundo na cor principal da marca */
  padding: 36px 40px 32px;        /* Espaçamento interno: topo | lados | baixo */
  position: relative;
  overflow: hidden;
}

/* Círculo decorativo no canto inferior direito do cabeçalho */
.login-header::before {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); /* Branco bem transparente */
}

/* Círculo decorativo no centro superior do cabeçalho */
.login-header::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

/* Logo RAVIN */
.login-logo {
  font-family: var(--font-display); /* Fonte Bebas Neue */
  font-size: 48px;                  /* Tamanho do logo — altere aqui se necessário */
  color: #fff;                      /* Branco */
  letter-spacing: 4px;              /* Espaçamento entre letras */
  line-height: 1;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

/* Tagline "Vinho do seu jeito" */
.login-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7); /* Branco com 70% de opacidade */
  font-weight: 400;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

/* Badge "Sistema Elite" (pílula com fundo translúcido) */
.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;                              /* Espaço entre o ponto pulsante e o texto */
  background: rgba(255, 255, 255, 0.15); /* Branco translúcido */
  border-radius: var(--radius-pill);     /* Formato de pílula */
  padding: 5px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase; /* Texto em maiúsculas */
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

/* Ponto verde pulsante antes do texto do badge */
.login-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-cta);           /* Verde CTA */
  box-shadow: 0 0 6px var(--color-cta);   /* Brilho ao redor do ponto */
  animation: pulse 2s infinite;           /* Animação de pulso contínua */
}


/* ================================================================
   6. CORPO DO FORMULÁRIO — Área de inputs e botão
   ================================================================
   Área branca abaixo do cabeçalho que contém o título,
   subtítulo e o formulário.

   PARA ALTERAR O ESPAÇAMENTO INTERNO:
   Mude o valor de padding.
   ================================================================ */

.login-body {
  padding: 36px 40px 40px; /* Espaçamento interno: topo | lados | baixo */
}

/* Título "Bem-vindo de volta" */
.login-title {
  font-size: 22px;
  font-weight: 700;              /* Negrito */
  color: var(--color-text);      /* Cor quase preta */
  margin-bottom: 6px;
}

/* Subtítulo "Acesse sua conta para continuar" */
.login-subtitle {
  font-size: 13px;
  color: var(--color-muted);     /* Cinza suave */
  margin-bottom: 28px;           /* Espaço abaixo antes dos campos */
}


/* ================================================================
   7. CAMPOS DE INPUT — Caixas de texto (Usuário e Senha)
   ================================================================
   Estiliza os grupos de campo: label (rótulo), wrapper (container),
   ícone, input e mensagem de erro.
   ================================================================ */

/* Grupo completo de um campo (label + input + erro) */
.form-group {
  margin-bottom: 20px; /* Espaço entre um campo e outro */
}

/* Rótulo do campo (ex: "Usuário", "Senha") */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;           /* Semi-negrito */
  color: var(--color-body);   /* Cinza escuro */
  margin-bottom: 8px;         /* Espaço entre o rótulo e o input */
}

/* Container relativo — necessário para posicionar o ícone dentro */
.input-wrapper {
  position: relative;
}

/* Ícone dentro do input (lado esquerdo) */
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%); /* Centraliza verticalmente */
  color: var(--color-placeholder);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;        /* Não bloqueia cliques */
  transition: color var(--transition);
}

/* Ícone muda de cor quando o input está com o cursor dentro */
.input-wrapper:focus-within .input-icon {
  color: var(--color-brand);
}

/* O input em si (caixa de texto) */
.form-input {
  width: 100%;
  border: 1.5px solid var(--color-border); /* Borda cinza padrão */
  border-radius: var(--radius-md);         /* Cantos arredondados (8px) */
  padding: 13px 16px 13px 44px;           /* Espaço interno — o 44px à esquerda é para o ícone */
  font-size: 14px;
  font-family: var(--font-primary);
  color: var(--color-body);
  background: var(--color-surface);       /* Fundo branco */
  outline: none;                          /* Remove o outline azul padrão do navegador */
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Texto de placeholder (hint dentro do input vazio) */
.form-input::placeholder {
  color: var(--color-placeholder); /* Cinza claro */
  font-weight: 400;
}

/* Quando o input está em foco (cursor ativo dentro) */
.form-input:focus {
  border-color: var(--color-brand);     /* Borda vinho */
  box-shadow: 0 0 0 3px var(--color-brand-alpha); /* Brilho suave ao redor */
}

/* Quando o input tem erro de validação */
.form-input.error {
  border-color: var(--color-error);                   /* Borda vermelha */
  box-shadow: 0 0 0 3px rgba(244, 79, 68, 0.10);     /* Brilho vermelho suave */
}

/* Mensagem de erro abaixo do input (oculta por padrão) */
.form-error {
  font-size: 12px;
  color: var(--color-error); /* Vermelho */
  margin-top: 6px;
  display: none;             /* Escondida por padrão — o JS adiciona .visible para exibir */
  align-items: center;
  gap: 5px;
}

/* Classe que torna a mensagem de erro visível */
.form-error.visible {
  display: flex;
}


/* ================================================================
   8. TOGGLE DE SENHA — Botão mostrar/ocultar
   ================================================================
   Botão com ícone de olho posicionado no lado direito
   do campo de senha.
   ================================================================ */

.toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%); /* Centraliza verticalmente */
  background: none;
  border: none;
  cursor: pointer;             /* Cursor de mão ao passar o mouse */
  color: var(--color-placeholder);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color var(--transition);
}

/* Muda a cor do ícone ao passar o mouse */
.toggle-password:hover {
  color: var(--color-brand);
}


/* ================================================================
   9. OPÇÕES DO FORMULÁRIO
   ================================================================
   Linha com "Lembrar de mim" à esquerda e "Esqueci a senha"
   à direita, abaixo dos campos e acima do botão.
   ================================================================ */

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Um item em cada extremo */
  margin-bottom: 24px;
  margin-top: -4px;
}

/* Label + checkbox "Lembrar de mim" */
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none; /* Impede selecionar o texto ao clicar */
}

/* Checkbox customizado (substitui o visual padrão do navegador) */
.remember-me input[type="checkbox"] {
  appearance: none;                     /* Remove estilo padrão do navegador */
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);      /* Levemente arredondado */
  cursor: pointer;
  position: relative;
  flex-shrink: 0;                       /* Não encolhe em telas pequenas */
  transition: background var(--transition), border-color var(--transition);
}

/* Checkbox quando marcado — fundo vinho */
.remember-me input[type="checkbox"]:checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

/* Checkmark (✓) desenhado via CSS quando marcado */
.remember-me input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;    /* Traço branco */
  border-top: none;
  border-left: none;
  transform: rotate(45deg);  /* Rotaciona para formar o "V" do checkmark */
}

/* Texto ao lado do checkbox */
.remember-me span {
  font-size: 13px;
  color: var(--color-muted);
}

/* Link "Esqueci a senha" */
.forgot-link {
  font-size: 13px;
  color: var(--color-brand);  /* Vinho */
  text-decoration: none;      /* Sem sublinhado por padrão */
  font-weight: 500;
  transition: color var(--transition);
}

/* Hover do link — sublinha e escurece */
.forgot-link:hover {
  color: var(--color-brand-dark);
  text-decoration: underline;
}


/* ================================================================
   10. BOTÃO ENTRAR
   ================================================================
   Botão de submit do formulário. Ocupa toda a largura do card.

   PARA ALTERAR A COR DO BOTÃO:
   Mude --color-brand em "1. VARIÁVEIS GLOBAIS".

   PARA ALTERAR O TAMANHO DA FONTE:
   Mude o valor de font-size abaixo.
   ================================================================ */

.btn-login {
  width: 100%;                       /* Ocupa toda a largura disponível */
  background: var(--color-brand);    /* Fundo vinho */
  color: #fff;                       /* Texto branco */
  border: none;
  border-radius: var(--radius-md);   /* Cantos arredondados (8px) */
  padding: 15px 24px;                /* Altura do botão — altere o primeiro valor (15px) */
  font-family: var(--font-primary);
  font-size: 15px;                   /* Tamanho da fonte do botão */
  font-weight: 700;                  /* Negrito */
  letter-spacing: 0.8px;
  text-transform: uppercase;         /* Texto em maiúsculas */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

/* Brilho sutil no topo do botão (efeito de profundidade) */
.btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Hover — escurece, sobe levemente e adiciona sombra */
.btn-login:hover {
  background: var(--color-brand-dark);
  box-shadow: 0 6px 20px rgba(114, 37, 61, 0.35);
  transform: translateY(-1px); /* Sobe 1px */
}

/* Active (clicando) — volta ao lugar */
.btn-login:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Desabilitado (durante o carregamento) */
.btn-login:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Spinner (ícone giratório) exibido durante o carregamento */
.btn-login .btn-spinner {
  display: none;             /* Oculto por padrão */
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;   /* Parte do anel que aparece (cria o efeito giratório) */
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}

/* Quando o botão está carregando: esconde o texto e mostra o spinner */
.btn-login.loading .btn-text    { display: none; }
.btn-login.loading .btn-spinner { display: block; }


/* ================================================================
   11. MENSAGEM DE ERRO GERAL
   ================================================================
   Caixa vermelha com mensagem de erro exibida acima do formulário
   quando o login falha (usuário/senha incorretos, erro de rede etc.)
   ================================================================ */

.alert-error {
  background: var(--color-error-bg);       /* Fundo vermelho transparente */
  border: 1px solid var(--color-error-border);
  border-left: 4px solid var(--color-error); /* Barra vermelha à esquerda */
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--color-error-text);          /* Texto vermelho escuro */
  margin-bottom: 20px;
  display: none;                           /* Oculto por padrão */
  align-items: center;
  gap: 10px;
}

/* Quando visível — exibe com animação de "chacoalhada" */
.alert-error.visible {
  display: flex;
  animation: shake 0.4s ease;
}


/* ================================================================
   12. RODAPÉ DO CARD
   ================================================================
   Área na parte inferior do card com o copyright.
   ================================================================ */

.login-footer {
  padding: 16px 40px 24px;
  border-top: 1px solid var(--color-border); /* Linha divisória acima */
  text-align: center;
}

/* Texto do rodapé */
.login-footer p {
  font-size: 12px;
  color: var(--color-placeholder); /* Cinza bem claro */
}


/* ================================================================
   13. ANIMAÇÕES
   ================================================================
   Definem os movimentos visuais usados no sistema.
   NÃO É NECESSÁRIO alterar esta seção para mudanças visuais básicas.
   ================================================================ */

/* Entrada do card — sobe suavemente do baixo para cima */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(28px); /* Começa 28px abaixo */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* Chega na posição normal */
  }
}

/* Pulso — efeito de piscar lento (usado no ponto do badge) */
@keyframes pulse {
  0%, 100% { opacity: 1; }   /* Totalmente visível */
  50%       { opacity: 0.4; } /* Semi-transparente no meio */
}

/* Spin — rotação contínua (usado no spinner do botão) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Shake — chacoalhada horizontal (usado no alerta de erro) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}


/* ================================================================
   14. RESPONSIVO — Adaptações para celular
   ================================================================
   Quando a tela tiver menos de 480px de largura (celular),
   reduzimos o espaçamento interno e o tamanho do logo para
   que o card caiba bem na tela.
   ================================================================ */

@media (max-width: 480px) {

  /* Reduz o espaçamento interno do cabeçalho */
  .login-header {
    padding: 28px 28px 24px;
  }

  /* Reduz o espaçamento interno do corpo */
  .login-body {
    padding: 28px 28px 32px;
  }

  /* Reduz o espaçamento interno do rodapé */
  .login-footer {
    padding: 16px 28px 20px;
  }

  /* Reduz o tamanho do logo no celular */
  .login-logo {
    font-size: 40px; /* Era 48px no desktop */
  }
}


/* ================================================================
   ██████████████████████████████████████████████████████████████
   PÁGINAS INTERNAS DO SISTEMA (app-page)
   ██████████████████████████████████████████████████████████████
   ================================================================

   Estilos compartilhados por todas as páginas do sistema após
   o login: navbar, área de conteúdo, cards, tabelas e botões.

   ESTRUTURA:
   A. Layout da Aplicação (navbar + área de conteúdo)
   B. Botões do Sistema
   C. Página: Gerenciamento de Clientes
   ================================================================ */


/* ================================================================
   A. LAYOUT DA APLICAÇÃO
   ================================================================
   Define a estrutura visual comum a todas as páginas internas:
   - Barra de navegação superior fixa
   - Área de conteúdo principal com largura máxima
   ================================================================ */

/* ------------------------------------------------------------------
   Corpo das páginas internas
   Diferente do login (que centraliza tudo), as páginas internas
   usam layout de bloco normal com o conteúdo fluindo de cima pra baixo.
   ------------------------------------------------------------------ */
body.app-page {
  display: block;
  background: var(--color-bg);
}

/* ------------------------------------------------------------------
   Barra de navegação superior
   Fica fixada no topo da tela enquanto o usuário rola o conteúdo.
   PARA ALTERAR A COR: mude --color-brand nas Variáveis Globais.
   ------------------------------------------------------------------ */
.app-header {
  background: var(--color-brand);         /* Fundo vinho */
  height: 56px;                           /* Altura da barra */
  position: sticky;                       /* Fica fixada no topo ao rolar */
  top: 0;
  z-index: 99;                            /* Fica acima de todos os outros elementos */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Container interno — centraliza e limita a largura */
.app-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo RAVIN na navbar */
.app-logo {
  font-family: var(--font-display);       /* Bebas Neue */
  font-size: 26px;
  color: #fff;
  letter-spacing: 3px;
  line-height: 1;
  flex-shrink: 0;                         /* Não encolhe em telas menores */
  text-decoration: none;
}

/* Links de navegação */
.app-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.app-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);       /* Branco com 75% de opacidade */
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition);
}

/* Link ativo (página atual) ou hover */
.app-nav-link:hover,
.app-nav-link.active {
  background: rgba(255, 255, 255, 0.15); /* Fundo translúcido */
  color: #fff;
}

/* Área do usuário logado (lado direito da navbar) */
.app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;                      /* Empurra para a direita */
}

.app-user-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* Avatar circular com a inicial do nome */
.app-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------
   Área de conteúdo principal
   Container que envolve todo o conteúdo da página.
   PARA ALTERAR O ESPAÇAMENTO LATERAL: mude o valor de padding.
   ------------------------------------------------------------------ */
.app-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px 56px; /* topo | lados | baixo */
}


/* ================================================================
   B. BOTÕES DO SISTEMA
   ================================================================
   Botões usados nas páginas internas (diferentes dos botões de login).

   PARA ALTERAR CORES DOS BOTÕES:
   Cada variante tem sua própria cor. Localize o botão pelo
   nome da classe (ex: .btn-adicionar) e mude o valor de background.
   ================================================================ */

/* Estilo base — comum a todos os botões do sistema */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);        /* Cantos arredondados (8px) */
  padding: 10px 18px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: filter var(--transition), transform var(--transition);
  white-space: nowrap;                    /* Impede quebra de linha no texto do botão */
}

/* Efeito hover — escurece levemente e sobe 1px */
.btn:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}

/* Efeito de clique — volta à posição original */
.btn:active {
  transform: translateY(0);
  filter: brightness(0.80);
}

/* Adicionar — verde CTA */
.btn-adicionar {
  background: var(--color-cta);           /* Verde #9bc55c */
  color: #fff;
}

/* Editar — vinho da marca */
.btn-editar {
  background: var(--color-brand);         /* Vinho #72253d */
  color: #fff;
}

/* Deletar — vermelho de erro */
.btn-deletar {
  background: var(--color-error);         /* Vermelho #f44f44 */
  color: #fff;
}

/* Limpar — botão neutro/fantasma */
.btn-limpar {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-body);
}

.btn-limpar:hover {
  background: var(--color-bg);
  filter: none;
}

/* Gerenciar Assinatura — vinho médio */
.btn-assinatura {
  background: var(--color-brand-mid);     /* #9e2452 */
  color: #fff;
}

/* Gerenciamento de Não Renovadas — âmbar */
.btn-renovacao {
  background: #e67e22;                    /* Âmbar — cor de alerta/atenção */
  color: #fff;
}

/* Relatórios — vinho da marca */
.btn-relatorio {
  background: var(--color-brand);
  color: #fff;
}

/* Buscar — vinho da marca */
.btn-buscar {
  background: var(--color-brand);
  color: #fff;
  flex-shrink: 0;
}

/* Todos — botão outline (borda vinho, sem preenchimento) */
.btn-todos {
  background: transparent;
  border: 1.5px solid var(--color-brand);
  color: var(--color-brand);
  flex-shrink: 0;
}

.btn-todos:hover {
  background: var(--color-brand-tint);
  filter: none;
}


/* ================================================================
   C. PÁGINA: GERENCIAMENTO DE CLIENTES (inicio.html)
   ================================================================
   Estilos exclusivos da tela de gerenciamento de clientes.

   ELEMENTOS DESTA PÁGINA:
   - Cabeçalho da página (título)
   - Card do formulário (cadastro/edição)
   - Grid de campos do formulário
   - Barra de ações (botões)
   - Barra de busca
   - Tabela de clientes
   - Barra de status
   ================================================================ */

/* ------------------------------------------------------------------
   Cabeçalho da página
   ------------------------------------------------------------------ */

/* Área com o título da página */
.page-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Título principal — usa a fonte display Bebas Neue */
.page-title {
  font-family: var(--font-display);       /* Bebas Neue */
  font-size: 36px;
  color: var(--color-brand);              /* Vinho */
  letter-spacing: 1.5px;
  line-height: 1;
}

/* ------------------------------------------------------------------
   Card do formulário (Novo / Editar Cliente)
   ------------------------------------------------------------------ */

/* Card branco com borda lateral vinho */
.form-card {
  background: var(--color-surface);      /* Fundo branco */
  border-radius: var(--radius-lg);       /* Cantos arredondados (16px) */
  box-shadow: var(--shadow-md);
  padding: 20px 24px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand); /* Barra lateral vinho */
}

/* Título interno do card (ex: "Novo / Editar Cliente") */
.form-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Linha decorativa ao lado do título */
.form-card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ------------------------------------------------------------------
   Grid de campos do formulário
   3 colunas no desktop, 2 no tablet, 1 no celular.

   PARA ALTERAR O NÚMERO DE COLUNAS:
   Mude o valor de grid-template-columns.
   Ex: repeat(2, 1fr) = 2 colunas, repeat(4, 1fr) = 4 colunas.
   ------------------------------------------------------------------ */

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 colunas iguais */
  gap: 14px 20px;                         /* Espaço vertical | horizontal entre campos */
}

/* Nos campos do sistema (sem ícone à esquerda), o padding é menor */
.app-page .form-input {
  padding: 10px 12px;
}

/* Select (lista suspensa) — adiciona seta customizada */
.form-select {
  appearance: none;                       /* Remove a seta padrão do navegador */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2372767e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center; /* Posição da seta */
  padding-right: 36px;                    /* Espaço para a seta não sobrepor o texto */
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Barra de ações (botões Adicionar, Editar, Deletar...)
   ------------------------------------------------------------------ */

.actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;         /* Botões principais à esq, Relatórios à dir */
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;                        /* Quebra linha em telas pequenas */
}

/* Grupo de botões do lado esquerdo */
.actions-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Grupo de botões do lado direito */
.actions-right {
  display: flex;
  gap: 8px;
}

/* ------------------------------------------------------------------
   Barra de busca
   ------------------------------------------------------------------ */

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

/* Rótulo "Buscar:" */
.search-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-body);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Campo de texto da busca — ocupa todo o espaço disponível */
.search-input {
  flex: 1;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-size: 14px;
  font-family: var(--font-primary);
  color: var(--color-body);
  background: var(--color-surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-alpha);
}

/* ------------------------------------------------------------------
   Card da tabela de clientes
   ------------------------------------------------------------------ */

/* Container do card da tabela */
.table-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;                       /* Respeita o border-radius nas bordas da tabela */
  border: 1px solid var(--color-border);
  margin-bottom: 16px;
}

/* Título interno do card da tabela */
.table-card-title {
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* Wrapper com scroll — limita a altura da tabela e adiciona rolagem */
.table-wrapper {
  overflow-x: auto;                       /* Rolagem horizontal em telas pequenas */
  max-height: 440px;                      /* Altura máxima — altere aqui se necessário */
  overflow-y: auto;                       /* Rolagem vertical quando há muitos registros */
}

/* ------------------------------------------------------------------
   Tabela de dados
   ------------------------------------------------------------------ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* Cabeçalho fica fixo ao rolar verticalmente */
.data-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Células do cabeçalho */
.data-table thead th {
  background: var(--color-brand);         /* Fundo vinho */
  color: #fff;                            /* Texto branco */
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  user-select: none;                      /* Impede selecionar o texto ao clicar */
}

/* Linhas do corpo da tabela */
.data-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;                        /* Cursor de mão para indicar que é clicável */
  transition: background var(--transition);
}

/* Linhas pares com fundo levemente cinza (zebra) */
.data-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

/* Hover na linha */
.data-table tbody tr:hover {
  background: var(--color-brand-tint);   /* Rosa claro da marca */
}

/* Linha selecionada (após clicar em um registro) */
.data-table tbody tr.selecionada {
  background: var(--color-brand-tint);
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

/* Células do corpo */
.data-table tbody td {
  padding: 10px 16px;
  color: var(--color-body);
  white-space: nowrap;                    /* Impede quebra de linha nas células */
}

/* ------------------------------------------------------------------
   Badges de Tipo de Cliente (na tabela)
   ------------------------------------------------------------------ */

/* Base do badge */
.badge-tipo {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Ravin Elite — fundo vinho, texto branco */
.badge-elite {
  background: var(--color-brand);
  color: #fff;
}

/* Consumidor Final — fundo rosa claro, texto vinho */
.badge-consumidor {
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

/* ------------------------------------------------------------------
   Barra de status (rodapé da página)
   ------------------------------------------------------------------ */

/* Mensagem "Sistema pronto. Total de clientes: X" */
.status-bar {
  font-size: 13px;
  color: var(--color-success);           /* Verde — indica que o sistema está OK */
  font-weight: 500;
  padding: 4px 2px;
}

body.modal-aberto {
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Modal de Gerenciamento de Não Renovadas
   ------------------------------------------------------------------ */

.modal-nao-renovadas-box {
  max-width: 1180px;
}

.modal-nao-renovadas-box .modal-titulo {
  color: var(--color-brand-mid);
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
}

.modal-nao-renovadas-body {
  padding: 18px 22px 22px;
}

.nao-renovadas-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 0;
}

.nao-renovadas-tab {
  border: 1px solid var(--color-border);
  border-bottom: none;
  background: var(--color-surface);
  color: var(--color-body);
  padding: 10px 14px;
  min-height: 42px;
  font-family: var(--font-primary);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.nao-renovadas-tab.active {
  background: #fff;
  color: var(--color-brand);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.nao-renovadas-tab:hover {
  background: var(--color-brand-tint);
}

.nao-renovadas-section {
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 16px;
}

.nao-renovadas-config {
  border: 1px solid var(--color-border);
  background: #fff;
  margin-bottom: 22px;
  padding: 26px 22px 20px;
  position: relative;
}

.nao-renovadas-config[hidden] {
  display: none;
}

.nao-renovadas-config-title {
  position: absolute;
  top: -12px;
  left: 14px;
  background: #fff;
  padding: 0 8px;
  color: var(--color-brand);
  font-size: 0.9rem;
  font-weight: 600;
}

.nao-renovadas-config-row {
  display: grid;
  grid-template-columns: auto 120px 1fr;
  align-items: center;
  gap: 16px 24px;
}

.nao-renovadas-dias-input {
  max-width: 120px;
  border-color: #69bda7;
  box-shadow: 0 0 0 2px rgba(105, 189, 167, 0.16);
  text-align: center;
  font-weight: 600;
}

.btn-buscar-prestes {
  justify-self: end;
  background: #67bfd2;
  color: #fff;
  min-width: 300px;
}

.nao-renovadas-section-title {
  display: inline-flex;
  transform: translateY(-28px);
  background: #fff;
  padding: 0 8px;
  color: var(--color-brand);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: -16px;
}

.nao-renovadas-table-wrapper {
  max-height: 440px;
  overflow: auto;
  border: 1.5px solid #e67e22;
}

.nao-renovadas-table {
  min-width: 1260px;
}

.nao-renovadas-table thead th {
  background: #e67e22;
  text-align: center;
}

.modal-nao-renovadas-overlay.modo-prestes .nao-renovadas-table-wrapper {
  border-color: #f5bd31;
}

.modal-nao-renovadas-overlay.modo-prestes .nao-renovadas-table thead th {
  background: #f7c85a;
}

.nao-renovadas-table tbody tr {
  cursor: default;
}

.nao-renovadas-table tbody td {
  padding: 8px 10px;
}

.nao-renovadas-check-col {
  width: 52px;
  text-align: center;
}

.nao-renovadas-check {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.nao-renovadas-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-placeholder);
}

.nao-renovadas-status {
  font-weight: 700;
  white-space: nowrap;
}

.nao-renovadas-status.status-vencido {
  color: var(--color-error);
}

.nao-renovadas-status.status-a-vencer {
  color: #e67e22;
}

.nao-renovadas-action {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px 20px;
  border: 1px solid var(--color-border);
  background: #fff;
  margin-top: 18px;
  padding: 18px 22px;
}

.nao-renovadas-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-body);
  white-space: nowrap;
}

.nao-renovadas-select {
  min-width: 220px;
}

.btn-nao-renovadas-atualizar {
  background: var(--color-cta);
  color: #fff;
  min-width: 260px;
}

.btn-nao-renovadas-atualizar:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.nao-renovadas-footer-info {
  padding: 16px 2px 0;
  color: #ef5b6d;
  font-size: 0.95rem;
  font-weight: 500;
}

.modal-email-nao-renovadas-box {
  max-width: 1220px;
}

.modal-email-nao-renovadas-box .modal-titulo {
  color: var(--color-brand-mid);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 1px;
}

.modal-email-nao-renovadas-body {
  display: grid;
  gap: 14px;
  padding: 20px 24px 24px;
}

.email-preview-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-email-abrir {
  background: var(--color-cta);
  color: #fff;
}

.btn-email-copiar {
  background: var(--color-brand);
  color: #fff;
}

.email-preview {
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 24px;
  max-height: 56vh;
  overflow: auto;
  color: #24272d;
  font-size: 1rem;
  line-height: 1.35;
}

.email-preview p {
  margin: 0 0 18px;
}

.email-preview strong {
  font-weight: 800;
}

.email-preview mark {
  background: #fff0a8;
  color: inherit;
  padding: 0 2px;
}

.email-clientes-table {
  width: 100%;
  min-width: 1220px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.email-clientes-table th,
.email-clientes-table td {
  border: 1.5px solid #333;
  padding: 8px 10px;
  vertical-align: middle;
}

.email-clientes-table th {
  background: #f3f3f3;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.email-clientes-table td {
  white-space: nowrap;
}

.email-clientes-table td:first-child {
  white-space: normal;
  min-width: 220px;
}

/* ------------------------------------------------------------------
   Responsivo — Gerenciamento de Clientes
   ------------------------------------------------------------------ */

/* Tablet (até 1024px) — 2 colunas no formulário */
@media (max-width: 1024px) {
  .app-content {
    padding: 20px 20px 40px;
  }

  .field-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nao-renovadas-action {
    grid-template-columns: 1fr;
  }

  .nao-renovadas-config-row {
    grid-template-columns: 1fr;
  }

  .btn-buscar-prestes {
    justify-self: stretch;
    min-width: 0;
  }

  .btn-nao-renovadas-atualizar {
    min-width: 0;
  }

  .email-preview-toolbar {
    justify-content: stretch;
  }

  .email-preview-toolbar .btn {
    flex: 1;
  }
}

/* Celular (até 640px) — 1 coluna, botões empilhados */
@media (max-width: 640px) {
  .app-content {
    padding: 16px 12px 32px;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .actions-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-left,
  .actions-right {
    flex-wrap: wrap;
  }

  .app-header-inner {
    padding: 0 16px;
  }

  .app-nav {
    display: none;                        /* Oculta a nav no celular — implemente um menu hamburguer se necessário */
  }

  .modal-nao-renovadas-box .modal-titulo {
    font-size: 24px;
  }

  .modal-nao-renovadas-body {
    padding: 14px;
  }

  .nao-renovadas-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .nao-renovadas-tab {
    border: 1px solid var(--color-border);
  }

  .nao-renovadas-section-title {
    transform: none;
    margin-bottom: 10px;
  }

  .modal-email-nao-renovadas-body {
    padding: 14px;
  }

  .email-preview {
    padding: 14px;
  }
}


/* ================================================================
   PÁGINA DE ASSINATURA — assinatura.html
   ================================================================

   Esta seção cuida do layout e dos componentes exclusivos da
   página de gerenciamento de assinatura de um cliente.

   ESTRUTURA DA PÁGINA:
   A. Cabeçalho da página (voltar + título)
   B. Grade do formulário (2 colunas: esquerda e direita)
   C. Campos individuais do formulário
   D. Indicadores calculados (renovação, dias, status)
   E. Botões de ação centralizados
   F. Tabela de histórico de assinaturas (cabeçalho verde)
   G. Responsivo (tablet e celular)
   ================================================================ */


/* ----------------------------------------------------------------
   A. CABEÇALHO DA PÁGINA — voltar + título
   ---------------------------------------------------------------- */

/* Container do cabeçalho com botão de voltar e título */
.page-header-assinatura {
  display: flex;                         /* Coloca botão e título lado a lado */
  align-items: center;                   /* Alinha verticalmente ao centro */
  gap: 16px;                             /* Espaço entre o botão e o título */
}

/* Botão "← Voltar" */
.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1.5px solid var(--color-brand);
  color: var(--color-brand);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-voltar:hover {
  background: var(--color-brand);
  color: #fff;
}


/* ----------------------------------------------------------------
   B. GRADE DO FORMULÁRIO — 2 colunas lado a lado
   ----------------------------------------------------------------
   O formulário de assinatura usa 2 colunas de igual tamanho.
   Dentro de cada coluna, os campos são empilhados verticalmente.
   ---------------------------------------------------------------- */

.ass-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;        /* Duas colunas iguais */
  gap: 0 48px;                           /* Espaço entre as colunas */
}

/* Cada coluna do formulário */
.ass-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* ----------------------------------------------------------------
   C. CAMPOS INDIVIDUAIS — label à esquerda, input à direita
   ----------------------------------------------------------------
   Cada campo é uma linha com label e input lado a lado.
   ---------------------------------------------------------------- */

/* Linha de um campo (label + input) */
.ass-field {
  display: grid;
  grid-template-columns: 200px 1fr;      /* Label fixo + input flexível */
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border);
}

.ass-field:last-child {
  border-bottom: none;
}

/* Rótulo do campo */
.ass-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

/* Input do campo */
.ass-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.875rem;
  height: 34px;
}

/* Linha do Vendedor (select + botão "...") */
.ass-vendedor-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ass-select-vendedor {
  flex: 1;                               /* Ocupa o espaço disponível */
}

/* Botão "..." de gerenciar vendedores */
.btn-gerenciar-vendedor {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #f0f0f0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-gerenciar-vendedor:hover {
  background: var(--color-brand-tint);
  border-color: var(--color-brand);
  color: var(--color-brand);
}


/* ----------------------------------------------------------------
   D. INDICADORES CALCULADOS
   ----------------------------------------------------------------
   Mostram: Próxima Renovação (azul), Dias para Vencer (laranja),
   Status (vermelho). São calculados automaticamente pelo JS.
   ---------------------------------------------------------------- */

/* Container dos 3 indicadores */
.ass-indicadores {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Linha de um indicador */
.ass-indicador {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Rótulo do indicador */
.ass-indicador-label {
  font-weight: 600;
}

/* Valor do indicador */
.ass-indicador-valor {
  font-weight: 500;
}

/* Próxima Renovação — azul */
.ass-indicador-renovacao .ass-indicador-label,
.ass-indicador-renovacao .ass-indicador-valor {
  color: #2196f3;
}

/* Dias para Vencer — laranja */
.ass-indicador-vencer .ass-indicador-label,
.ass-indicador-vencer .ass-indicador-valor {
  color: #e6a817;
}

/* Status — cor dinâmica via JS (ativo=verde, vencer=laranja, vencido=vermelho) */
.ass-indicador-status .ass-indicador-label {
  color: #e53935;                        /* Rótulo sempre vermelho */
}

.ass-indicador-status .ass-indicador-valor {
  color: #e53935;                        /* Padrão vermelho; JS troca a cor conforme o status */
}

.ass-indicador-status .ass-indicador-valor.status-ativo {
  color: #43a047;                        /* Verde — assinatura em dia */
}

.ass-indicador-status .ass-indicador-valor.status-vencer {
  color: #e6a817;                        /* Laranja — vence em breve (até 30 dias) */
}

.ass-indicador-status .ass-indicador-valor.status-vencido {
  color: #e53935;                        /* Vermelho — já venceu */
}

.ass-indicador-status .ass-indicador-valor.status-cancelada {
  color: #9f1d35;
}


/* ----------------------------------------------------------------
   E. BOTÕES DE AÇÃO CENTRALIZADOS
   ----------------------------------------------------------------
   Variante da actions-bar com os botões no centro da tela.
   ---------------------------------------------------------------- */

.actions-bar-center {
  justify-content: center;              /* Centraliza os botões */
}

/* Salvar Assinatura — verde */
.btn-salvar-ass {
  background: #43a047;
  color: #fff;
  border: none;
}

.btn-salvar-ass:hover {
  background: #2e7d32;
}

/* Editar Assinatura — azul */
.btn-editar-ass {
  background: #1976d2;
  color: #fff;
  border: none;
}

.btn-editar-ass:hover {
  background: #1565c0;
}

/* Deletar — laranja-avermelhado */
.btn-deletar-ass {
  background: #e64a19;
  color: #fff;
  border: none;
}

.btn-deletar-ass:hover {
  background: #bf360c;
}

/* Cancelar Assinatura — vermelho escuro */
.btn-cancelar-ass {
  background: #9f1d35;
  color: #fff;
  border: none;
}

.btn-cancelar-ass:hover {
  background: #7d1328;
}

/* Limpar — rosa/salmão */
.btn-limpar-ass {
  background: #e57373;
  color: #fff;
  border: none;
}

.btn-limpar-ass:hover {
  background: #c62828;
}

/* Renovar Assinatura — verde escuro */
.btn-renovar-ass {
  background: #43a047;
  color: #fff;
  border: none;
}

.btn-renovar-ass:hover {
  background: #2e7d32;
}


/* ----------------------------------------------------------------
   F. TABELA DE HISTÓRICO — cabeçalho verde
   ----------------------------------------------------------------
   A tabela de assinaturas usa um cabeçalho verde, diferente da
   tabela de clientes que usa o vinho da marca.
   ---------------------------------------------------------------- */

.table-assinatura thead tr {
  background: #5a9e7c;                   /* Verde suave para o cabeçalho */
}

.table-assinatura thead th {
  color: #fff;
  background: transparent;
  border-bottom: none;
}

/* Linhas clicáveis para selecionar uma assinatura para editar/deletar */
.table-assinatura tbody tr {
  cursor: pointer;
}

.table-assinatura tbody tr.selecionado {
  background: #e8f5e9;                   /* Verde claro na linha selecionada */
  outline: 2px solid #43a047;
  outline-offset: -2px;
}

.table-assinatura tbody tr.assinatura-cancelada {
  background: #fff1f3;
}

.ass-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.ass-status-badge.cancelada {
  background: #9f1d35;
  color: #fff;
}


/* ----------------------------------------------------------------
   G. RESPONSIVO — adaptação para tablet e celular
   ---------------------------------------------------------------- */

@media (max-width: 1024px) {
  .ass-grid {
    grid-template-columns: 1fr;          /* Uma coluna só no tablet */
  }

  .ass-field {
    grid-template-columns: 160px 1fr;
  }
}

@media (max-width: 640px) {
  .ass-field {
    grid-template-columns: 1fr;          /* Label acima do input no celular */
  }

  .page-header-assinatura {
    flex-direction: column;
    align-items: flex-start;
  }

  .actions-bar-center {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ================================================================
   MODAL DE RENOVAÇÃO DE ASSINATURA
   ================================================================

   Este modal abre quando o usuário seleciona uma assinatura na
   tabela e clica em "Renovar Assinatura". Ele é pré-preenchido
   com os dados da assinatura selecionada.

   ESTRUTURA:
   A. Overlay escuro que cobre a página
   B. Caixa do modal (modal-box)
      - Cabeçalho com título e botão fechar (✕)
      - Corpo com grade 3 colunas e indicador de renovação
      - Rodapé com botões Salvar Renovação e Cancelar
   ================================================================ */


/* ----------------------------------------------------------------
   A. OVERLAY — fundo escuro semitransparente
   ---------------------------------------------------------------- */

.modal-overlay {
  position: fixed;                       /* Fica sobre tudo na tela */
  inset: 0;                              /* Ocupa toda a tela (top/right/bottom/left = 0) */
  background: rgba(0, 0, 0, 0.55);      /* Escurece o fundo */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;                         /* Sempre por cima dos outros elementos */
  padding: 16px;
}

/* Quando tem o atributo "hidden", o overlay fica invisível */
.modal-overlay[hidden] {
  display: none;
}


/* ----------------------------------------------------------------
   B. CAIXA DO MODAL
   ---------------------------------------------------------------- */

.modal-box {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 900px;                      /* Largura máxima do modal */
  max-height: 90vh;                      /* Nunca ultrapassa 90% da tela */
  overflow-y: auto;                      /* Rola se o conteúdo for grande */
  display: flex;
  flex-direction: column;
}


/* ----------------------------------------------------------------
   CABEÇALHO DO MODAL
   ---------------------------------------------------------------- */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Botão ✕ para fechar o modal */
.modal-fechar {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: #888;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.modal-fechar:hover {
  background: #f0f0f0;
  color: var(--color-text);
}


/* ----------------------------------------------------------------
   CORPO DO MODAL
   ---------------------------------------------------------------- */

.modal-body {
  padding: 20px 24px 8px;
  flex: 1;
}

/* Título da seção dentro do modal (ex: "Dados da Nova Assinatura - ...") */
.modal-secao-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-brand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-bottom: 16px;
  background: var(--color-brand-tint);
}


/* ----------------------------------------------------------------
   GRADE 3 COLUNAS DO MODAL
   ---------------------------------------------------------------- */

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* Três colunas iguais */
  gap: 8px 24px;
}

/* Campo individual: label acima + input abaixo */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
}

.modal-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.875rem;
  height: 34px;
}

.modal-field-full {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
  line-height: 1.4;
}

.modal-cancelar-ass-box {
  max-width: 620px;
}

.btn-confirmar-cancelamento-ass {
  background: #9f1d35;
  color: #fff;
  border: none;
  min-width: 190px;
}

.btn-confirmar-cancelamento-ass:hover {
  background: #7d1328;
}

.btn-confirmar-cancelamento-ass:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* O select do vendedor no modal ocupa o espaço disponível */
.modal-select-vendedor {
  flex: 1;
}


/* ----------------------------------------------------------------
   INDICADOR: PRÓXIMA RENOVAÇÃO
   ---------------------------------------------------------------- */

.modal-indicador {
  text-align: center;
  margin-top: 14px;
  padding: 8px 0;
}

.modal-indicador-texto {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2196f3;                        /* Azul — igual ao da página principal */
}


/* ----------------------------------------------------------------
   RODAPÉ DO MODAL — botões
   ---------------------------------------------------------------- */

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Salvar Renovação — verde */
.btn-salvar-renovacao {
  background: #43a047;
  color: #fff;
  border: none;
  min-width: 160px;
}

.btn-salvar-renovacao:hover {
  background: #2e7d32;
}

/* Cancelar — laranja/coral */
.btn-cancelar-renovacao {
  background: #e64a19;
  color: #fff;
  border: none;
  min-width: 120px;
}

.btn-cancelar-renovacao:hover {
  background: #bf360c;
}


/* ----------------------------------------------------------------
   RESPONSIVO DO MODAL
   ---------------------------------------------------------------- */

@media (max-width: 768px) {
  .modal-grid {
    grid-template-columns: 1fr 1fr;      /* Duas colunas no tablet */
  }
}

@media (max-width: 480px) {
  .modal-grid {
    grid-template-columns: 1fr;          /* Uma coluna no celular */
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ================================================================
   PÁGINA DE RELATÓRIO — relatorio.html
   ================================================================

   Esta seção cuida do layout e componentes exclusivos da página
   de relatórios/dashboard.

   ESTRUTURA DA PÁGINA:
   A. Variáveis de cor do relatório
   B. Body base da página
   C. Header (logo cursiva + abas + filtro de data)
   D. Hero section (fundo vinho + título + toggles)
   E. KPI cards (6 métricas)
   F. Grid de gráficos (2×2)
   G. Responsivo
   ================================================================ */


/* ----------------------------------------------------------------
   A. VARIÁVEIS ESPECÍFICAS DO RELATÓRIO
   ---------------------------------------------------------------- */

:root {
  --rel-bg:          #ffffff;                    /* Branco — fundo da página (design system Ravin) */
  --rel-hero-dark:   var(--color-brand-dark);    /* Vinho escuro — igual ao sistema (#471d2a) */
  --rel-hero-mid:    var(--color-brand);         /* Vinho principal — igual ao sistema (#72253d) */
  --rel-card-bg:     var(--color-surface);       /* Branco — fundo dos cards (design system) */
  --rel-text-muted:  var(--color-muted);         /* Cinza — textos secundários (design system) */
}


/* ----------------------------------------------------------------
   B. BODY DA PÁGINA DE RELATÓRIO
   ---------------------------------------------------------------- */

body.relatorio-page {
  background: var(--rel-bg);
  min-height: 100vh;
  font-family: var(--font-primary);     /* Poppins — fonte padrão do design system */
  color: var(--color-text);
  margin: 0;
  padding: 0;
}


/* ----------------------------------------------------------------
   C. HEADER — logo + tabs + filtro de data
   ---------------------------------------------------------------- */

.rel-header {
  background: var(--color-surface);      /* Branco — igual ao restante do sistema */
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.rel-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Logo — usa Bebas Neue, igual ao restante do sistema Ravin */
.rel-logo {
  font-family: var(--font-display);     /* Bebas Neue — fonte padrão da marca */
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  color: var(--color-brand);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.rel-logo:hover {
  opacity: 0.8;
}

/* Abas de navegação */
.rel-nav {
  display: flex;
  gap: 0;
  height: 100%;
  flex: 1;
}

.rel-nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-muted);            /* Cinza do design system */
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  height: 100%;
}

.rel-nav-tab:hover {
  color: var(--color-brand);
}

.rel-nav-tab.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
  font-weight: 600;
}

/* Filtro de data — caixa vinho no topo direito */
.rel-date-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.rel-date-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--rel-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rel-date-inputs {
  display: flex;
  gap: 4px;
}

.rel-date-input {
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  /* Cor do ícone de calendário e texto — depende do navegador */
  color-scheme: dark;
}

.rel-date-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}


/* ----------------------------------------------------------------
   D. HERO SECTION — fundo vinho + formas decorativas
   ---------------------------------------------------------------- */

.rel-hero {
  background: linear-gradient(135deg, var(--rel-hero-dark) 0%, var(--rel-hero-mid) 60%, #9e2452 100%);
  padding: 28px 32px 24px;
  position: relative;
  overflow: hidden;
}

/* Formas decorativas abstratas (círculos grandes translúcidos) */
.rel-hero-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.rel-hero-shape-1 {
  width: 500px;
  height: 500px;
  top: -200px;
  right: -100px;
}

.rel-hero-shape-2 {
  width: 300px;
  height: 300px;
  bottom: -150px;
  right: 200px;
  background: rgba(255, 255, 255, 0.03);
}

.rel-hero-shape-3 {
  width: 200px;
  height: 200px;
  top: -80px;
  left: 300px;
  background: rgba(255, 255, 255, 0.02);
}

/* Layout interno do hero */
.rel-hero-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  position: relative;               /* Fica sobre as formas decorativas */
  z-index: 1;
}

/* Lado esquerdo: título + data */
.rel-hero-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rel-hero-title {
  font-family: var(--font-display);   /* Bebas Neue */
  font-size: 2.8rem;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1;
}

.rel-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rel-hero-meta span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}


/* Lado direito: grupos de botões de filtro */
.rel-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  max-width: 100%;
}

.rel-filter-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  max-width: 100%;
}

.rel-filter-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  max-width: 100%;
}

.rel-filter-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0;
  line-height: 1;
}

.rel-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.rel-filter-control,
.rel-filter-action {
  min-height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.76rem;
  font-weight: 500;
  outline: none;
}

.rel-filter-control {
  width: 132px;
  padding: 0 9px;
}

select.rel-filter-control {
  width: 112px;
}

.rel-filter-control:focus,
.rel-filter-action:focus {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.rel-filter-control option {
  color: var(--color-text);
  background: var(--color-surface);
}

.rel-filter-action {
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.rel-filter-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.rel-filter-action-primary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.58);
  font-weight: 700;
}

.rel-filter-action-primary:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Grupo de botões (toggle) */
.rel-toggle-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  max-width: 100%;
}

/* Botão individual do toggle */
.rel-toggle-btn {
  min-width: 104px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  text-align: center;
}

.rel-toggle-btn:last-child {
  border-right: none;
}

.rel-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Estado ativo — fundo escuro sólido */
.rel-toggle-btn.active {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 600;
}


/* ----------------------------------------------------------------
   E. KPI CARDS — 6 indicadores em linha
   ---------------------------------------------------------------- */

.rel-kpi-section {
  padding: 24px 32px 0;
  max-width: 1400px;
  margin: 0 auto;
}

.rel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 6 colunas iguais */
  gap: 16px;
}

/* Card individual */
.rel-kpi-card {
  background: var(--rel-card-bg);
  border-radius: var(--radius-lg);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s;
}

.rel-kpi-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Ícone do card */
.rel-kpi-icon {
  color: var(--color-brand);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rótulo do indicador */
.rel-kpi-label {
  font-size: 0.78rem;
  color: var(--rel-text-muted);
  text-align: center;
  line-height: 1.3;
}

/* Valor principal */
.rel-kpi-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand);
  text-align: center;
  line-height: 1.2;
}


/* ----------------------------------------------------------------
   F. GRÁFICOS — grade 2×2
   ---------------------------------------------------------------- */

.rel-charts-section {
  padding: 20px 32px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.rel-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* Duas colunas */
  gap: 16px;
}

/* Card de gráfico */
.rel-chart-card {
  background: var(--rel-card-bg);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cabeçalho do card de gráfico */
.rel-chart-header {
  margin-bottom: 8px;
}

.rel-chart-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.rel-chart-subtitle {
  font-size: 0.78rem;
  color: var(--rel-text-muted);
}

/* Container do canvas — altura fixa para o Chart.js */
.rel-chart-wrapper {
  position: relative;
  height: 200px;                       /* Altura dos gráficos — altere aqui se quiser maiores */
  overflow-x: auto;                    /* Permite rolar horizontalmente se houver muitas barras */
  overflow-y: hidden;
}

.rel-chart-wrapper canvas {
  min-width: 100%;
}

/* Variante de altura para o gráfico horizontal TOP 10 */
.rel-chart-wrapper-top10 {
  height: 340px;                       /* Mais alto para acomodar as 10 barras horizontais */
  overflow-x: visible;
}


/* ----------------------------------------------------------------
   SEÇÃO INFERIOR — TOP 10 + Tabela por Estado
   ---------------------------------------------------------------- */

/* Grade de 2 colunas (igual à grade de gráficos principal) */
.rel-bottom-section {
  padding: 0 32px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.rel-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Wrapper da tabela com scroll se necessário */
.rel-estado-wrapper {
  overflow-y: auto;
  overflow-x: auto;
  max-height: 360px;
}

/* Tabela de estados */
.rel-estado-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Cabeçalho da tabela */
.rel-estado-th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--color-brand);            /* Vinho — destaque do cabeçalho */
  border-bottom: 2px solid var(--color-brand-tint);
  white-space: nowrap;
}

/* Ícone de ordenação (▼) ao lado do cabeçalho ativo */
.rel-estado-th-sort {
  cursor: default;
}

.rel-sort-icon {
  font-size: 0.65rem;
  margin-left: 4px;
  opacity: 0.7;
}

/* Linhas de dados */
.rel-estado-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.rel-estado-table tbody tr:hover {
  background: var(--color-brand-tint);
}

.rel-estado-table td {
  padding: 10px 12px;
  color: var(--color-body);
}

/* Linha de totais (rodapé da tabela) */
.rel-estado-total td {
  padding: 12px 12px;
  font-weight: 700;
  color: var(--color-brand);
  border-top: 2px solid var(--color-brand-tint);
}

/* Responsivo da seção inferior */
@media (max-width: 900px) {
  .rel-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rel-bottom-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ================================================================
   PÁGINA RAVIN ELITE — ravin-elite.html
   ================================================================

   ESTRUTURA:
   A. Hero (fundo vinho escuro com logo e data/hora)
   B. KPI cards (Ativos, Inativos, Totais)
   C. Tabela de assinaturas (sortável, filtro por ano)
   D. Rodapé de navegação
   E. Responsivo
   ================================================================ */


/* ----------------------------------------------------------------
   A. HERO — fundo vinho, logo e data/hora
   ---------------------------------------------------------------- */

body.elite-page {
  background: var(--color-bg);
  font-family: var(--font-primary);
  color: var(--color-text);
  min-height: 100vh;
  margin: 0;
}

.elite-hero {
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand) 70%, var(--color-brand-mid) 100%);
  padding: 28px 40px 32px;
  position: relative;
  overflow: hidden;
}

/* Formas decorativas */
.elite-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.04);
}

.elite-hero-shape-1 {
  width: 600px;
  height: 600px;
  top: -300px;
  right: -150px;
}

.elite-hero-shape-2 {
  width: 300px;
  height: 300px;
  bottom: -200px;
  left: 100px;
  background: rgba(255, 255, 255, 0.03);
}

.elite-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Logo "Ravin Elite" */
.elite-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  margin-bottom: 6px;
}

.elite-logo-ravin {
  font-family: var(--font-display);    /* Bebas Neue */
  font-size: 2.6rem;
  color: #fff;
  letter-spacing: 0.03em;
}

.elite-logo-elite {
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}

/* Data e hora abaixo do logo */
.elite-hero-datetime {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

/* Botão Analítico (canto superior direito) */
.btn-analitico {
  background: #fff;
  color: var(--color-brand);
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 28px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.01em;
}

.btn-analitico:hover {
  background: var(--color-brand-tint);
}


/* ----------------------------------------------------------------
   B. KPI CARDS — 3 colunas
   ---------------------------------------------------------------- */

.elite-kpi-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 40px 0;
}

.elite-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                               /* Sem gap — cards encostados com divisor visual */
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Card individual */
.elite-kpi-card {
  padding: 24px 32px;
  text-align: center;
  border-right: 1px solid var(--color-border);
}

.elite-kpi-card:last-child {
  border-right: none;
}

/* Último card — "Totais" — com fundo sutilmente diferente */
.elite-kpi-card-total {
  background: var(--color-brand-tint);
}

.elite-kpi-label {
  font-size: 0.875rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.elite-kpi-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-text);
}


/* ----------------------------------------------------------------
   C. TABELA DE ASSINATURAS
   ---------------------------------------------------------------- */

.elite-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px 48px;
}

.elite-table-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Cabeçalho da tabela card */
.elite-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}

.elite-table-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.elite-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 24px 18px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #fff 0%, #fbf8f9 100%);
  flex-wrap: wrap;
}

.elite-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 190px;
}

.elite-filter-search {
  flex: 1.25 1 240px;
}

.elite-filter-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.elite-filter-input {
  min-width: 190px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0 14px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--color-body);
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.elite-filter-input:disabled {
  background: #f3f1f2;
  color: #9a9599;
  cursor: not-allowed;
}

.elite-filter-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-brand) 50%),
    linear-gradient(135deg, var(--color-brand) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.elite-filter-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px var(--color-brand-alpha);
}

.elite-filter-clear {
  height: 40px;
  border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-brand);
  padding: 0 16px;
  font-family: var(--font-primary);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.elite-filter-apply {
  height: 40px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: #fff;
  padding: 0 18px;
  font-family: var(--font-primary);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}

.elite-filter-apply:hover {
  background: var(--color-brand-dark);
}

.elite-filter-clear:hover {
  background: var(--color-brand);
  color: #fff;
}

/* Controles de ano */
.elite-year-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Botão de navegação < > */
.btn-year-nav {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-brand);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-year-nav:hover {
  background: var(--color-brand-tint);
}

/* Botão do ano atual (pílula preenchida) */
.btn-year-active {
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 20px;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 72px;
}

/* Wrapper com scroll horizontal se necessário */
.elite-table-wrapper {
  overflow-x: auto;
}

/* Tabela */
.elite-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Cabeçalho */
.elite-th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-brand);
  border-bottom: 2px solid var(--color-brand-tint);
  background: var(--color-surface);
  position: sticky;
  top: 0;
}

.elite-th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.elite-th.sortable:hover {
  background: var(--color-brand-tint);
}

/* Indicador de ordenação */
.sort-indicator {
  font-size: 0.65rem;
  margin-left: 4px;
  opacity: 0.5;
}

.elite-th.sort-asc .sort-indicator::after  { content: '▲'; opacity: 1; }
.elite-th.sort-desc .sort-indicator::after { content: '▼'; opacity: 1; }
.elite-th.sort-asc  .sort-indicator,
.elite-th.sort-desc .sort-indicator { opacity: 0; }

/* Linhas de dados */
.elite-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s;
}

.elite-table tbody tr:last-child {
  border-bottom: none;
}

.elite-table tbody tr:hover {
  background: var(--color-brand-tint);
}

.elite-table td {
  padding: 12px 16px;
  color: var(--color-body);
}

/* Coluna Nome — negrito */
.elite-table td:first-child {
  font-weight: 500;
  color: var(--color-text);
  min-width: 220px;
  white-space: normal;
}

/* Badge de Status */
.elite-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
}

.elite-status-ativo {
  background: #e8f5e9;
  color: #2e7d32;
}

.elite-status-inativo {
  background: #fce4e4;
  color: #c62828;
}

.elite-status-renovou {
  background: #e8f5e9;
  color: #2e7d32;
}

.elite-status-nao-renovou {
  background: #fce4e4;
  color: #c62828;
}

/* Texto de dias para vencer */
.elite-dias-ativo   { color: #2e7d32; font-weight: 500; }
.elite-dias-vencer  { color: #e6a817; font-weight: 500; }  /* Menos de 30 dias */
.elite-dias-vencido { color: #c62828; font-weight: 500; }

/* Rodapé da tabela */
.elite-table-footer {
  padding: 12px 24px;
  font-size: 0.8rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}


/* ----------------------------------------------------------------
   D. NAVEGAÇÃO DE VOLTA
   ---------------------------------------------------------------- */

.elite-nav-links {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.elite-nav-link {
  font-size: 0.875rem;
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s;
}

.elite-nav-link:hover {
  opacity: 0.7;
}


/* ----------------------------------------------------------------
   E. RESPONSIVO
   ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .elite-hero,
  .elite-kpi-section,
  .elite-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .elite-kpi-grid {
    grid-template-columns: 1fr;
  }

  .elite-kpi-card {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

@media (max-width: 640px) {
  .elite-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .elite-filter-bar {
    align-items: stretch;
  }

  .elite-filter-input,
  .elite-filter-apply,
  .elite-filter-clear {
    width: 100%;
  }

  .elite-logo-ravin { font-size: 2rem; }
  .elite-logo-elite { font-size: 1.2rem; }
}


/* ----------------------------------------------------------------
   G. RESPONSIVO
   ---------------------------------------------------------------- */

@media (max-width: 1200px) {
  .rel-kpi-grid {
    grid-template-columns: repeat(3, 1fr);  /* 3 colunas no tablet */
  }
}

@media (max-width: 900px) {
  .rel-charts-grid {
    grid-template-columns: 1fr;            /* Uma coluna no tablet estreito */
  }

  .rel-hero-content {
    flex-direction: column;
    gap: 16px;
  }

  .rel-hero-right {
    align-items: flex-start;
  }

  .rel-filter-block {
    align-items: flex-start;
  }

  .rel-filter-row {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dash-vendedor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rel-kpi-grid {
    grid-template-columns: repeat(2, 1fr);  /* 2 colunas no celular */
  }

  .rel-header-inner {
    gap: 16px;
    padding: 0 16px;
  }

  .rel-nav-tab {
    padding: 0 12px;
    font-size: 0.82rem;
  }

  .rel-hero {
    padding: 20px 16px 16px;
  }

  .rel-kpi-section,
  .rel-charts-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .rel-toggle-btn {
    min-width: auto;
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .rel-date-range {
    flex-wrap: wrap;
  }

  .rel-filter-control {
    width: 126px;
  }

  .rel-date-inputs {
    flex-direction: column;
  }

  .dash-mensal-filters {
    align-items: flex-start;
  }

  .dash-filter-sep {
    display: none;
  }
}


/* ==============================================================
   PÁGINA: ELITE ANALÍTICO (elite-analitico.html)
   Prefixo: elta-
   ============================================================== */

/* Hero — fundo vinho degradê com logo e botões de ano */
.elta-hero {
  background: linear-gradient(120deg, var(--color-brand-dark) 0%, var(--color-brand) 60%, var(--color-brand-mid) 100%);
  padding: 2rem 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Brilho decorativo no hero */
.elta-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 85% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.elta-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

/* Logo "Ravin Elite" no hero */
.elta-logo-ravin {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1;
}

.elta-logo-elite {
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 1.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
}

.elta-hero-meta {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.76rem;
  margin-top: 0.4rem;
}

/* Botões de ano dentro do hero (estilo claro) */
.elta-year-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.elta-year-btn {
  padding: 0.45rem 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.elta-year-btn:hover,
.elta-year-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
}

/* Botões de ano no rodapé (estilo vinho sobre branco) */
.elta-year-group-dark {
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.elta-bottom-year-btn {
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--color-brand);
  background: transparent;
  color: var(--color-brand);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.elta-bottom-year-btn:hover,
.elta-bottom-year-btn.active {
  background: var(--color-brand);
  color: #fff;
}

/* Seção de filtro de clientes */
.elta-filter-section {
  background: #fff;
  padding: 0.85rem 2.5rem;
  border-bottom: 1px solid #e8e0e4;
}

.elta-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Botão de filtro de cliente */
.elta-filter-btn {
  padding: 0.32rem 1rem;
  border: 1.5px solid var(--color-brand);
  background: transparent;
  color: var(--color-brand);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.elta-filter-btn:hover,
.elta-filter-btn.active {
  background: var(--color-brand);
  color: #fff;
}

/* Área de conteúdo */
.elta-main {
  background: #fff;
}

.elta-section {
  padding: 1.5rem 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.elta-section-bottom {
  padding-top: 0.5rem;
}

/* Card que envolve cada tabela */
.elta-table-card {
  background: #f8f4ef;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5ddd0;
}

.elta-table-card-sm {
  margin-top: 1rem;
}

/* Tabela */
.elta-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 0.84rem;
}

/* Cabeçalho da tabela */
.elta-th {
  padding: 0.75rem 1.1rem;
  color: var(--color-brand);
  font-weight: 600;
  font-size: 0.78rem;
  border-bottom: 2px solid #e5ddd0;
  text-align: center;
  white-space: nowrap;
}

/* Coluna "Indicador" / "Assinaturas" — alinhada à esquerda */
.elta-th-label {
  text-align: left;
  min-width: 180px;
}

/* Células */
.elta-td {
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid #e5ddd0;
  color: #555;
  text-align: center;
}

.elta-td-label {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #333;
}

/* Remove borda da última linha */
.elta-tr:last-child .elta-td {
  border-bottom: none;
}

/* Percentual em destaque vinho */
.elta-pct {
  font-weight: 700;
  color: var(--color-brand);
}


/* ==============================================================
   PÁGINA: DASHBOARD (dashboard.html)
   Prefixo: dash-
   ============================================================== */

.dash-main {
  background: #f5f5f5;
  min-height: calc(100vh - 56px);
  padding: 2rem 2.5rem;
}

/* Centraliza blocos na página */
.dash-center {
  margin-left: auto;
  margin-right: auto;
}

/* ---- KPI cards (Ativos / Inativos / Total) ---- */
.dash-kpi-section {
  margin-bottom: 2.5rem;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
}

.dash-kpi-card {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
}

/* Faixa de título do card */
.dash-kpi-header {
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  padding: 0.55rem 1rem;
  letter-spacing: 0.5px;
}

/* Valor numérico do card */
.dash-kpi-value {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  text-align: center;
  padding: 1rem;
}

/* ---- Seção "Ravin Elite por Vendedor" ---- */
.dash-vendedor-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Título da seção */
.dash-section-title {
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: 4px 4px 0 0;
  letter-spacing: 0.6px;
  margin-bottom: 1.25rem;
}

/* Grade de 3 tabelas lado a lado */
.dash-vendedor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Card de cada tabela */
.dash-vtable-wrap {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}

/* Cabeçalho da tabela */
.dash-vtable-header {
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 0.75rem;
  letter-spacing: 0.4px;
}

/* Tabela */
.dash-vtable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 0.83rem;
  table-layout: fixed;
}

.dash-vtable tbody tr td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #ebebeb;
  color: #333;
  word-break: break-word;
}

/* Coluna de valor alinhada à direita */
.dash-vtable tbody tr td:last-child {
  text-align: right;
  font-weight: 500;
  width: 88px;
}

/* Linha de total no rodapé */
.dash-vtable-total td {
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  color: #111;
  border-top: 2px solid #d0d0d0;
  background: #f7f7f7;
}

.dash-vtable-total td:last-child {
  text-align: right;
}

/* ---- Seção 3: dois gráficos anuais lado a lado ---- */
.dash-anual-section {
  max-width: 1100px;
  margin: 2.5rem auto 0;
}

/* Grade de dois cards de gráfico */
.dash-anual-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1100px;
}

/* Card individual de cada gráfico */
.dash-anual-card {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
}

/* Título do card reaproveita .dash-section-title sem margin-bottom */
.dash-anual-card .dash-section-title {
  border-radius: 0;
  margin-bottom: 0;
}

/* Área do canvas */
.dash-anual-chart-wrap {
  padding: 1.25rem;
  height: 300px;
  position: relative;
}

/* ---- Seção 4: Ravin Elite Mensal ---- */
.dash-mensal-section {
  max-width: 1100px;
  margin: 2.5rem auto 2rem;
}

.dash-mensal-card {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
  max-width: 1100px;
}

/* Título reutiliza .dash-section-title sem border-radius */
.dash-mensal-card .dash-section-title {
  border-radius: 0;
  margin-bottom: 0;
}

/* Barra de filtros */
.dash-mensal-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}

.dash-filter-label {
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dash-filter-group {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

/* Botão pequeno de filtro (ano / mês) */
.dash-filter-btn-sm {
  padding: 0.22rem 0.65rem;
  border: 1.5px solid var(--color-brand);
  background: transparent;
  color: var(--color-brand);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
}

.dash-filter-btn-sm:hover,
.dash-filter-btn-sm.active {
  background: var(--color-brand);
  color: #fff;
}

/* Separador vertical entre grupos de filtro */
.dash-filter-sep {
  width: 1px;
  height: 18px;
  background: #ccc;
  margin: 0 0.25rem;
}

.dash-mensal-chart-wrap {
  padding: 1.25rem;
  height: 340px;
  position: relative;
}

/* ---- Seção 4: Analítico de Assinaturas ---- */
.dash-analytics-section {
  max-width: 1100px;
  margin: 2.5rem auto 2rem;
}

.dash-analytics-wrap {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  overflow: hidden;
  max-width: 1100px;
}

.dash-analytics-wrap .dash-section-title {
  border-radius: 0;
  margin-bottom: 0;
}

.dash-analytics-wrap .elta-year-group {
  padding: 1rem 1.25rem 0;
}

.dash-analytics-wrap .elta-year-btn {
  border: 1.5px solid var(--color-brand);
  color: var(--color-brand);
}

.dash-analytics-wrap .elta-year-btn:hover,
.dash-analytics-wrap .elta-year-btn.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.dash-elta-filter-section {
  padding: 1rem 1.25rem 0.25rem;
  border-bottom: none;
}

.dash-analytics-wrap .elta-filter-group {
  max-width: none;
  margin: 0;
  max-height: 132px;
  overflow-y: auto;
  align-content: flex-start;
}

.dash-analytics-wrap .elta-section {
  padding: 1rem 1.25rem;
  max-width: none;
}

.dash-analytics-wrap .elta-section-bottom {
  padding-top: 0;
}