@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Tipografia AmberfyFont (Mantida para compatibilidade local) */
@font-face {
    font-family: 'AmberfyFont';
    src: url("../fonts/CircularStd-Book.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'AmberfyFont';
    src: url("../fonts/CircularStd-Medium.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'AmberfyFont';
    src: url("../fonts/CircularStd-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
  --font-family-base: 'Plus Jakarta Sans', 'AmberfyFont', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Cores Temáticas Amberfy (Originais) */
  --color-primary: #01745E;          /* verde50 - Verde Principal */
  --color-primary-hover: #005a48;    /* verde50 Escurecido */
  --color-secondary: #02BF9D;        /* verde30 - Verde Secundário */
  --color-secondary-light: #DAEDEA;  /* verde30claro - Fundo Bolhas Outbound */
  --color-secondary-border: #9AE5D8; /* verde30claro2 */
  --color-bg-main: #F3F3F3;           /* fundo - Cor Geral das Páginas */
  --color-bg-dark: #303030;           /* cinza100 - Topbars / Menus */
  --color-bg-dark-hover: #1C1C1C;     /* preto80 */
  --color-bg-card: #FFFFFF;           /* branco */
  
  /* Textos (Originais Amberfy sem Azul Brega) */
  --color-text-main: #575756;         /* cinza2 */
  --color-text-title: #0F172A;        /* Slate 900 Grafite */
  --color-text-muted: #64748B;        /* Slate 500 */
  --color-text-dark: #191A15;         /* cinza100 alternativo */
  
  /* Utilitários Clean Tech (WOW Factor com Cores Amberfy) */
  --shadow-card: 0 4px 20px -2px rgba(1, 116, 94, 0.04), 0 2px 8px -1px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(1, 116, 94, 0.05);
  --shadow-hover: 0 10px 25px -5px rgba(1, 116, 94, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(1, 116, 94, 0.06);
  --border-radius-card: 10px;
  --border-radius-login: 16px;
  --border-radius-input: 6px;
  --border-subtle: 1px solid rgba(1, 116, 94, 0.08);
}

/* Regras Globais */
body {
  font-family: var(--font-family-base);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6, strong, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-base);
  color: var(--color-text-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Navbar de Cima */
.navbar, .bg-secondary, .bg-dark {
  background: var(--color-bg-dark) !important;
  border-bottom: var(--border-subtle) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.navbar-brand, .navbar-text, .nav-link {
  font-family: var(--font-family-base) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

/* Botões Primários / Sucesso - Cores Fidedignas Amberfy e Efeito 3D */
.btn-primary, .btn-success, .submit-amberfy {
  background-color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-base);
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(1, 116, 94, 0.1) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-success:hover, .btn-success:active, .btn-success:focus,
.submit-amberfy:hover, .submit-amberfy:active {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 116, 94, 0.2) !important;
}

/* Botões Outline */
.btn-outline-primary, .btn-outline-success {
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  font-family: var(--font-family-base);
  font-weight: 500;
  border-radius: 6px;
  background-color: transparent !important;
  transition: all 0.15s ease-in-out;
}

.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-primary:active, .btn-outline-success:active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* Inputs da Form */
.form-control, .form-select {
  border-radius: var(--border-radius-input) !important;
  border: 1px solid #CBD5E1 !important;
  font-family: var(--font-family-base);
  font-size: 14px;
  height: 38px;
  transition: all 0.15s ease-in-out;
  background-color: #F8FAFC;
}

.form-control:focus, .form-select:focus {
  background-color: #FFFFFF;
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(2, 191, 157, 0.15) !important;
}

/* Cards Estilizados com Sombra Premium */
.card, .stat-card, .login-amberfy-card {
  background-color: var(--color-bg-card) !important;
  border-radius: var(--border-radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  border: var(--border-subtle) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .stat-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

.login-amberfy-card {
  border-radius: var(--border-radius-login) !important;
  padding: 35px 45px !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), var(--shadow-card) !important;
}

/* Animação Pulsar para Badges e Status Online */
.badge-pulse {
  position: relative;
}
.badge-pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  opacity: 0.6;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Remove azul brega do Bootstrap e substitui pelo verde Amberfy */
.text-primary, .text-info {
  color: var(--color-primary) !important;
}
.bg-primary, .bg-info {
  background-color: var(--color-primary) !important;
}
.btn-outline-primary, .btn-outline-info {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-primary:active, .btn-outline-info:active {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}
.border-primary, .border-info {
  border-color: var(--color-primary) !important;
}
a {
  color: var(--color-primary);
  transition: color 0.15s ease-in-out;
}
a:hover {
  color: var(--color-primary-hover);
}