/**
 * ChatGuru Design System - CSS Variables
 * 
 * Este arquivo centraliza todas as cores, tipografia e espaçamentos da plataforma
 * em variáveis CSS para facilitar manutenção e consistência.
 * 
 * Versão: 2.0
 * Data: 2025-11-12
 */

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

/* ============================================ */
/* ========== ROOT VARIABLES (LIGHT) ========= */
/* ============================================ */

:root {
    /* ===== CORES BOOTSTRAP PADRÃO ===== */
    --color-primary: #4e73df;
    --color-secondary: #6c757d;
    --color-success: #1cc88a;
    --color-danger: #dc3545;
    --color-warning: #f6c23e;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-white: #ffffff;
    --color-black: #000000;

    /* ===== CORES CHATGURU CUSTOMIZADAS ===== */
    /* Verde Institucional */
    --cg-green: #229954;
    --cg-green-dark: #196f3d;
    --cg-green-light: #1fbd89;
    --cg-green-lighter: #a9dfbf;
    --cg-green-lightest: #f0faf8;

    /* Vermelho ChatGuru */
    --cg-red: #c70039;
    --cg-red-dark: #dc2e56;
    --cg-red-light: #e74a3b;

    /* Azul ChatGuru */
    --cg-blue: #4e73df;
    --cg-blue-light: #36b9cc;
    --cg-blue-accent: #4d91b2;

    /* Amarelo ChatGuru */
    --cg-yellow: #eac645;
    --cg-yellow-light: #f6c23e;
    --cg-yellow-medium: #FECD54;
    --cg-yellow-accent: #fff27d;

    /* Cinza ChatGuru */
    --cg-gray-dark: #333333;
    --cg-gray-medium: #646D82;
    --cg-gray-light: #CBD1D9;

    /* Verde Status */
    --cg-status-green: #1cc88a;

    /* ===== CORES TIPOS DE PHONES ===== */
    --cg-phone-color-cgweb: #8e42c1;
    --cg-phone-color-gupshup: #1cc88a;
    --cg-phone-color-messagefyweb: #4e73df;

    /* ===== BACKGROUNDS LIGHT THEME ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-light-gray: #f6f6f6;
    --bg-ededed: #ededed;
    --bg-border: #dfe1e5;

    /* ===== TEXTO LIGHT THEME ===== */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #787878;
    --text-light: #a8a8a8;

    /* ===== TIPOGRAFIA ===== */
    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-secondary: Roboto, sans-serif;
    --font-nunito: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-lato: Lato, sans-serif;

    /* Font Sizes */
    --fs-1: 2.5rem;     /* 40px */
    --fs-2: 0.65rem;    /* ~10px */
    --fs-3: 0.75rem;    /* 12px */
    --fs-4: 0.85rem;    /* ~14px */
    --fs-5: 0.95rem;    /* ~15px */
    --fs-6: 1rem;       /* 16px - Base */
    --fs-65: 1.1rem;    /* ~18px */
    --fs-7: 1.25rem;    /* 20px */
    --fs-8: 1.5rem;     /* 24px */
    --fs-9: 1.75rem;    /* 28px */
    --fs-10: 2rem;      /* 32px */
    --fs-image: 3rem;   /* 48px */

    /* Font Weights */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ===== ESPAÇAMENTOS ===== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 1rem;      /* 16px */
    --spacing-4: 1.5rem;    /* 24px */
    --spacing-5: 3rem;      /* 48px */

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.2rem;    /* 3.2px */
    --radius-md: 0.25rem;   /* 4px */
    --radius-lg: 0.3rem;    /* 4.8px */
    --radius-xl: 0.5rem;    /* 8px */
    --radius-pill: 50rem;   /* Pill shape */
    --radius-circle: 50%;   /* Circle */

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-cg: 0 1px 1px 0 rgba(127, 127, 127, 0.2),
                 0 2px 3px 0px rgba(127, 127, 127, 0.1),
                 0 5px 8px 0px rgba(127, 127, 127, 0.1),
                 0 13px 21px 0 rgba(127, 127, 127, 0.1);
}

/* ============================================ */
/* ========== DARK THEME VARIABLES =========== */
/* ============================================ */

body.dark-theme,
.dark-theme {
    /* ===== BACKGROUNDS DARK THEME ===== */
    --bg-primary: #2e2e2e;
    --bg-secondary: #363636;
    --bg-tertiary: #3f3f3f;
    --bg-quaternary: #3a3a3a;
    --bg-modal: #292929;
    --bg-border: #464646;
    --bg-select: #666666;
    --bg-hover: #555555;

    /* ===== TEXTO DARK THEME ===== */
    --text-primary: #ffffff;
    --text-secondary: #dbdbdb;
    --text-muted: #bbbbbb;
    --text-light: #f1f1f1;

    /* ===== CORES BOOTSTRAP DARK OVERRIDE ===== */
    --color-secondary: #363636;
    --color-light: #3f3f3f;

    /* Mantém cores Bootstrap originais no dark theme */
    /* --color-primary: #007bff; */
    /* --color-success: #28a745; */
    /* --color-warning: #ffc107; */
    /* --color-danger: #e74a3b; */
}

/* ============================================ */
/* =========== LEGACY CLASSES (CG) =========== */
/* ============================================ */ 

.cg {
  background-color: #f0faf8;
  font-family: "Nunito", sans-serif;
}

.cg h1, .cg h2, .cg h3, .cg h4, .cg h5, .cg h6 {
  font-family: "Lato", sans-serif;
}

.cg--module {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 1px 0 rgba(127, 127, 127, 0.2),
  0 2px 3px 0px rgba(127, 127, 127, 0.1),
  0 5px 8px 0px rgba(127, 127, 127, 0.1),
  0 13px 21px 0 rgba(127, 127, 127, 0.1);
}

.cg--module p{
  text-align: center;
  margin-top: 20px;
  text-transform: uppercase;
}

.cg--header{
  width: 100%;
  height: 80px;
  background-color: #a9dfbf;
  padding-top: 15px;
  padding-left: 15px;
}

.cg--header h1 {
  font-size: 22px;
  line-height: 24px;
  margin: 0;
  padding: 0;
  color: #196f3d;
}

.cg--header h2 {
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  padding: 0;
  color: #196f3d;
}

.cg--list {
  margin-top:30px;
}

.cg--list h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    color: #646D82;
}

.cg--list table {
  margin: 0;
  padding: 0;
  margin-top:40px;
}

.cg--list table th {
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 300;
}

.cg--list table td {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 300;
}

.cg .btn-success {
  color: #fff;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 34px;
  background-color: #196f3d;
  border-color: #196f3d;
}

.cg .btn-secondary {
  color: #fff;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 34px;
  background-color: #333333 !important;
  border-color: #333333;
}

.cg .btn-danger {
  color: #fff;
  background-color: #c70039;
  border-color: #c70039;
}

.cg-badge-cgweb {
  color: #fff;
  background-color: var(--cg-phone-color-cgweb);
  line-height: normal;
}

.cg-badge-gupshup {
  color: #fff;
  background-color: var(--cg-phone-color-gupshup);
  line-height: normal;
}

.cg-badge-messagefyweb {
  color: #fff;
  background-color: var(--cg-phone-color-messagefyweb);
  line-height: normal;
}

/* ============================================ */
/* ====== TARJA DE RECONEXÃO (TECH-4597) ===== */
/* ============================================ */

.reconnection-banner {
  position: fixed;
  top: 45px;
  left: 0;
  right: 0;
  background-color: #f86a6b;
  color: white;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(248, 106, 107, 0.3);
  animation: slideDown 0.3s ease-out;
  padding-left: 70px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.reconnection-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.reconnection-banner-content:hover {
  background: rgba(0, 0, 0, 0.1);
}

.reconnection-banner .banner-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reconnection-banner .banner-text svg {
  flex-shrink: 0;
}

.reconnection-banner .banner-text strong {
  font-weight: 700;
  text-decoration: underline;
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reconnection-banner .banner-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.reconnection-banner .banner-close:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* Ajuste para quando a tarja estiver ativa */
body.has-reconnection-banner #block_content > .row.no-gutters > .col-12 {
  padding-top: var(--reconnection-banner-height, 48px);
}

/* Responsivo - Mobile */
@media (max-width: 768px) {
  .reconnection-banner {
    top: 50px;
    left: 0;
  }
  
  .reconnection-banner-content {
    padding: 0.6rem 1rem;
  }
  
  .reconnection-banner .banner-text {
    font-size: 0.85rem;
    gap: 0.5rem;
  }
  
  .reconnection-banner .banner-close {
    font-size: 1.25rem;
  }
}