/* backend/static/css/core.css */

/* 
   Versão: 2.4.1 - Design System DNA (Hotfix: Layout Math & Full Viewport Stability)
   Status: ACESSIBILIDADE WCAG AA + DENSIDADE INTELIGENTE
   Objetivo: Escala fluida global (Auto-Zoom) para Laptops/Full HD e contraste DISC refinado.
*/

:root {
  /* ==========================================================================
       1. DESIGN TOKENS (A FONTE DA VERDADE)
       ========================================================================== */

  /* --- Dimensões de Layout --- */
  --navbar-height: 64px; /* Altura real do Header Fixo */

  /* --- Tipografia Premium (System Fonts) & DENSIDADE ADAPTATIVA --- */
  --font-family-sans-serif:
    -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-headings:
    -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial,
    sans-serif;

  /* 
       BASE FONT SIZE (O CORAÇÃO DA DENSIDADE)
       Define a escala de 1rem para todo o sistema.
    */
  --base-font-size: 14px; /* Padrão Mobile e Tablets */

  /* --- Cores de Marca (Brand) --- */
  --color-primary: #3037c5;
  --color-primary-darker: #0056b3;
  --color-primary-bs: #1332bc;
  --color-primary-bs-darker: rgb(50 115 220);
  --color-primary-bs-rgb: 13, 110, 253;
  --color-secondary: #6c757d;
  --color-secondary-darker: #5c636a;
  --color-accent-b2b: #764ba2;

  /* --- Cores DISC (Ajustadas para Acessibilidade/Contraste) --- */
  --color-disc-d: #dc2626; /* 5.0:1 AA */
  --color-disc-i: #d98f06; /* Laranja Ouro */
  --color-disc-s: #059669; /* Esmeralda Profundo */
  --color-disc-c: #2563eb; /* Royal Blue */

  /* --- Cores de Feedback (UI) --- */
  --color-success: #064729;
  --color-success-dark: #198754;
  --color-success-darker: #157347;
  --color-danger: #ff4c38;
  --color-danger-bs: #dc3545;
  --color-danger-border-light: #f3d9dc;
  --color-warning: #f1c40f;
  --color-warning-bs: #ffc107;
  --color-warning-text-bs: #000;
  --color-info: #17a2b8;
  --color-info-darker: #31d2f2;
  --color-info-bs: #0dcaf0;

  /* --- Cores de Texto --- */
  --color-text-default: #1e293b;
  --color-text-headings: #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #f8f9fa;
  --color-text-white: #fff;
  --color-text-link: var(--color-primary-darker);
  --color-text-strikethrough: #adb5bd;
  --color-text-apple-blue: rgb(50 115 220);

  /* --- Superfícies e Fundos --- */
  --color-bg-body: #f8fafc;
  --color-bg-container: #fff;
  --color-bg-light: #f1f5f9;
  --color-bg-dark: #0a0d13;
  --color-bg-subtle-blue: #eaf4ff;

  /* --- Sombras DNA (Premium & Profundas) --- */
  --shadow-dna-sm:
    0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --shadow-dna-md:
    0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --shadow-dna-lg:
    0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-dna-xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --shadow-dna-3d:
    0 4px 6px rgb(0 0 0 / 5%), 0 10px 20px rgb(0 0 0 / 8%),
    0 20px 40px rgb(0 0 0 / 12%);
  --shadow-hover: 0 18px 40px rgb(0 0 0 / 15%);

  /* --- Bordas e Raios --- */
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.5rem;
  --border-color-default: #e2e8f0;
  --border-color-light: #f1f5f9;

  /* --- Espaçamento --- */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* --- Animações e Transições --- */
  --transition-fast: all 0.15s ease-out;
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --btn-transition-premium: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ==========================================================================
       2. PONTE DE COMPATIBILIDADE (LEGACY BRIDGE)
       ========================================================================== */
  --brand-primary: var(--color-primary-bs);
  --brand-primary-hover: var(--color-primary-bs-darker);
  --brand-d: var(--color-disc-d);
  --brand-i: var(--color-disc-i);
  --brand-s: var(--color-disc-s);
  --brand-c: var(--color-disc-c);
  --brand-dark: var(--color-bg-dark);
  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);
  --shadow-sm: var(--shadow-dna-sm);
  --shadow-md: var(--shadow-dna-md);
  --shadow-lg: var(--shadow-dna-lg);
  --shadow-xl: var(--shadow-dna-xl);
  --shadow: var(--shadow-dna-md);
}

/* 
   ==========================================================================
   MEDIA QUERIES DE DENSIDADE (AUTO-ZOOM)
   ==========================================================================
*/

/* Laptops e Monitores Full HD (1280px - 1920px) */

/* Simula um zoom de ~92% para aumentar a área útil sem perder leitura */
@media (width >= 1280px) and (width <= 1920px) {
  :root {
    --base-font-size: 13px;
  }
}

/* Monitores 2K, 4K e Retina (> 1920px) */

/* Aumenta a base para compensar a alta densidade de pixels */
@media (width >= 1921px) {
  :root {
    --base-font-size: 16px;
  }
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;

  /* FIX CRÍTICO: Estabiliza a largura do layout contra o "pulo" da scrollbar */
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--navbar-height) + 10px);

  /* FIX CRÍTICO: Trava Suprema de Overflow Horizontal */
  overflow-x: hidden;

  width: 100%;
  height: 100%;

  font-size: var(--base-font-size);
}

body {
  /* Redundância de segurança */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 100vh;

  font-family: var(--font-family-sans-serif);
  line-height: 1.5;
  color: var(--color-text-default);

  background-color: var(--color-bg-body);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex-grow: 1;
  width: 100%;
  min-width: 0;

  /* Compensação para o Header Fixo */
  padding-top: var(--navbar-height);
}

.navbar-thin-wrapper + main {
  padding-top: 60px;
}


/* ==========================================================================
   4. ESCALA TIPOGRÁFICA BTOS
   ========================================================================== */
.display-hero {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.display-section {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.display-card {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.text-lead-lg {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.text-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (width >= 992px) {
  .display-hero {
    font-size: 4.5rem;
  }

  .display-section {
    font-size: 3.25rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-headings);
  font-weight: 700;
  color: var(--color-text-headings);
  letter-spacing: -0.025em;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   5. LIGHT GRID SYSTEM (RESPONSIVO COMPLETO)
   ========================================================================== */
.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
}

.container {
  max-width: 1280px;
}

.row {
  display: flex;
  flex-wrap: wrap;

  /* 
       FIX CRÍTICO: Removido width: 100% 
       Com margens negativas, width: 100% causava overflow de 32px (1rem + 1rem).
    */
  margin-right: calc(var(--spacing-md) * -1);
  margin-left: calc(var(--spacing-md) * -1);
}

.row > * {
  flex-shrink: 0;

  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
}

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Frações Globais */
.col-1 {
  flex: 0 0 8.3333%;
  width: 8.3333%;
}

.col-2 {
  flex: 0 0 16.6667%;
  width: 16.6667%;
}

.col-3 {
  flex: 0 0 25%;
  width: 25%;
}

.col-6 {
  flex: 0 0 50%;
  width: 50%;
}

/* Grid Breakpoints */
@media (width >= 768px) {
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }

  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }

  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (width >= 992px) {
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }

  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }
}

/* ==========================================================================
   6. UTILITÁRIOS GLOBAIS
   ========================================================================== */

/* Espaçamento de Seção */
.section-spacing {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-teaser-spacing {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (width >= 992px) {
  .section-spacing {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .section-teaser-spacing {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

/* Flex & Display */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

/* Dimensões Rápidas */
.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

/* 
   FIX CRÍTICO DE LAYOUT (CORRIGIDO): 
   Wrapper deve ocupar 100% da viewport.
   O Header é Fixed (fora do fluxo), então NÃO subtraímos sua altura aqui.
   A compensação visual é feita via padding-top no <main>.
*/
.min-vh-100 {
  min-height: 100vh !important;
}

/* Pesos de Fonte DNA Edition */
.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-extrabold {
  font-weight: 800 !important;
}

.fw-black {
  font-weight: 900 !important;
}

/* Margens e Paddings Rápidos */
.m-0 {
  margin: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

/* Glassmorphism */
.glass-btos {
  border: 1px solid rgb(255 255 255 / 30%) !important;
  background: rgb(255 255 255 / 12%) !important;
  backdrop-filter: blur(10px) saturate(160%);
}

/* Badges DISC (Atualizados para novas variáveis) */
.badge-btos {
  display: inline-flex;
  align-items: center;

  padding: 0.35rem 0.85rem;
  border-radius: 9999px;

  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-d {
  color: #fff;
  background-color: var(--color-disc-d);
}

.badge-i {
  color: #fff;
  background-color: var(--color-disc-i);
}

.badge-s {
  color: #fff;
  background-color: var(--color-disc-s);
}

.badge-c {
  color: #fff;
  background-color: var(--color-disc-c);
}

/* ==========================================================================
   7. COMPONENTES ESTRUTURAIS (DNA BTOS)
   ========================================================================== */

/* Card Padrão Retangular - Ultra Glass Global */
.card-btos-standard {
  display: flex;
  flex-direction: column;

  height: 100%;
  padding: var(--spacing-lg);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--border-radius-2xl);

  color: inherit;
  text-decoration: none;

  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: var(--shadow-dna-lg);

  transition: var(--transition-normal);
}

.card-btos-standard:hover {
  transform: translateY(-4px);
  background: rgb(255 255 255 / 20%);
  box-shadow: var(--shadow-hover);
}

/* Estrutura Interna de Cards */
.card-header {
  margin-bottom: 0;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color-default);
  background-color: transparent;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

/* Grid 2x2 Simétrico */
.grid-btos-2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (width >= 768px) {
  .grid-btos-2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Refinamento de Imagens nos Cards de Exploração */
.card-exploration {
  align-items: flex-start;
}

.card-exploration img {
  flex-shrink: 0;

  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-sm);

  object-fit: contain;
}

/* Overlay de Carregamento Global */
#loading-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(4px);
}