/* =====================================================================
   BLOCO DE CUSTOMIZAÇÕES EXCLUSIVAS - APP CLIENTE
   Todas as configurações de cor, float, padding, borda, etc. específicas
   do app_cliente devem ser centralizadas aqui. O restante do código deve
   usar apenas Bootstrap puro e as variáveis semânticas.
   ===================================================================== */

/*
  Cor da borda do bloco do formulário de cadastro do cliente
  (Usa o verde institucional do sistema)
*/
.appcliente-form-wrapper {
  border: 2.5px solid var(--ff-success) !important;
  border-radius: 18px;
  background: #e6faed !important; /* Fundo verde clarinho uniforme */
  box-shadow: 0 6px 32px 0 rgba(34,187,51,0.13), 0 1.5px 6px 0 rgba(0,0,0,0.07);
  padding: 40px;
}

/*
  Ajuste de float para botões ou elementos que precisam alinhamento à direita
  Exemplo de uso: <button class="float-end appcliente-float-ajuste">...</button>
*/
.appcliente-float-ajuste {
  float: right !important;
  margin-left: 8px;
}

/*
  Padding extra para espaçamento entre blocos do app_cliente
*/
.appcliente-padding-extra {
  padding: 24px 0 !important;
}

/*
  Exemplo de uso de cor de texto institucional no app_cliente
*/
.appcliente-text-success {
  color: var(--ff-success) !important;
}

/*
  Outros ajustes específicos do app_cliente podem ser adicionados abaixo
  (ex: margens, espaçamentos, responsividade, etc)
*/
/*
  CSS de Cores Padrão Semânticas - Feira Fideliza
  Este arquivo define variáveis e classes para padronizar as cores do sistema, mantendo total compatibilidade com Bootstrap.
  Use as variáveis em seus próprios componentes ou sobrescreva utilitários Bootstrap para dar identidade visual ao sistema.
*/

:root {
  /* Paleta principal */
  /*
    --ff-success: Verde institucional principal do sistema.
    Usado como:
      - Cor da borda do bloco do formulário de cadastro do cliente
      - Cor da borda dos campos do formulário
      - Cor do botão principal de ação
  */
  --ff-primary: #0d6efd;      /* Azul institucional */
  --ff-secondary: #6c757d;    /* Cinza escuro */
  --ff-success: #22bb33;      /* Verde sucesso (borda e botões do formulário de cadastro) */
  --ff-danger: #e74c3c;       /* Vermelho alerta */
  --ff-warning: #ffc107;      /* Amarelo alerta */
  --ff-info: #17a2b8;         /* Azul claro informativo */
  --ff-light: #f8f9fa;        /* Fundo claro */
  --ff-dark: #212529;         /* Texto escuro */
  /*
    Fundo do bloco do formulário de cadastro do cliente:
    #e6faed (verde clarinho uniforme)
    (Definido diretamente no style.css do app_cliente para garantir contraste e harmonia)
  */
  --ff-bg-gradient: linear-gradient(135deg, #e3f0ff 60%, #f8f9fa 100%); /* Não usado no formulário, mas disponível para cards/info */

  /* Extras */
  --ff-card-shadow: 0 6px 32px 0 rgba(13,110,253,0.13), 0 1.5px 6px 0 rgba(0,0,0,0.07);
  --ff-border-radius: 14px;
}

/* Classes utilitárias para uso rápido */
.bg-ff-primary    { background-color: var(--ff-primary) !important; color: #fff !important; }
.bg-ff-secondary  { background-color: var(--ff-secondary) !important; color: #fff !important; }
.bg-ff-success    { background-color: var(--ff-success) !important; color: #fff !important; }
.bg-ff-danger     { background-color: var(--ff-danger) !important; color: #fff !important; }
.bg-ff-warning    { background-color: var(--ff-warning) !important; color: #212529 !important; }
.bg-ff-info       { background-color: var(--ff-info) !important; color: #fff !important; }
.bg-ff-light      { background-color: var(--ff-light) !important; color: #212529 !important; }
.bg-ff-dark       { background-color: var(--ff-dark) !important; color: #fff !important; }

.text-ff-primary    { color: var(--ff-primary) !important; }
.text-ff-secondary  { color: var(--ff-secondary) !important; }
.text-ff-success    { color: var(--ff-success) !important; }
.text-ff-danger     { color: var(--ff-danger) !important; }
.text-ff-warning    { color: var(--ff-warning) !important; }
.text-ff-info       { color: var(--ff-info) !important; }
.text-ff-light      { color: var(--ff-light) !important; }
.text-ff-dark       { color: var(--ff-dark) !important; }

/* Exemplo de card com identidade visual do sistema */
.ff-card {
  border-radius: var(--ff-border-radius);
  box-shadow: var(--ff-card-shadow);
  background: var(--ff-bg-gradient);
  border: 2px solid var(--ff-primary);
}

/* Exemplo de botão institucional */
.btn-ff-primary {
  background: var(--ff-primary);
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 8px 0 rgba(13,110,253,0.10);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-ff-primary:hover, .btn-ff-primary:focus {
  background: #084298;
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(13,110,253,0.18);
}

/* Use as variáveis em outros arquivos para manter a identidade visual */