/* ============================================================
   O2 Inc. — Design System (Guia de Definições Técnicas v01)
   Fonte única de identidade para as telas da plataforma.
   Paleta: Vivid Green #6BF169 · Intense Gray #494949
   Tipografia: Montserrat (fallback de Tusker Grotesk / Codec Pro)
   Hierarquia: O2 Inc. > Unidade Tributária > O2 Tax > Performance Tributária
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* --- Paleta oficial --- */
  --o2-green: #6BF169;        /* Vivid Green — cor principal, CTAs, destaques */
  --o2-green-d: #3fce4a;      /* hover do verde */
  --o2-gray: #494949;         /* Intense Gray — texto/fundos escuros/títulos */
  --o2-green-light: #E8FBE8;
  --o2-green-medium: #A8F5A6;
  --o2-gray-light: #F2F2F2;
  --o2-gray-medium: #787878;  /* textos secundários, rodapés */
  --o2-gray-dark: #333333;
  --o2-white: #FFFFFF;
  --o2-black: #000000;
  --o2-border: #CCCCCC;

  /* --- Superfícies do tema escuro (ancoradas no Intense Gray) --- */
  --o2-bg:    #15201d;        /* fundo app (charcoal esverdeado, base #1c1c1c+verde) */
  --o2-surface:  #1d2421;     /* cards */
  --o2-surface-2:#26302c;     /* cards elevados / inputs */
  --o2-line:  #2f3a35;        /* divisórias no escuro */
  --o2-txt:   #eaf2ea;        /* texto sobre escuro */
  --o2-txt-2: #a7b3ad;        /* texto secundário no escuro */

  /* --- Sinalização (uso restrito, fora da paleta só p/ alertas) --- */
  --o2-ok:   #6BF169;
  --o2-warn: #ffb44d;
  --o2-fail: #ff5d5d;
  --o2-info: #6ad0ff;
}

/* --- Tipografia base (Tusker→Montserrat 800 / Codec→Montserrat 400) --- */
body, p, span, td, input, select, button, textarea, a, li {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, .o2-display {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.4px;
}

/* --- Lockup da marca (cabeçalho) --- */
.o2-logo {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--o2-green); color: #06210a;
  display: grid; place-items: center; font-weight: 900; font-size: 19px;
  flex-shrink: 0;
}
.o2-brand b { font-size: 15px; font-weight: 800; }
.o2-brand small {
  display: block; color: var(--o2-txt-2);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.o2-brand .o2-hier { color: var(--o2-green); font-weight: 700; }

/* --- Navegação unificada (header) — fonte única via o2-nav.js --- */
header nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
header nav a { font-size: 12.5px; color: var(--o2-txt-2); text-decoration: none;
  border: 1px solid var(--o2-line); border-radius: 8px; padding: 7px 12px; white-space: nowrap; }
header nav a:hover { border-color: var(--o2-green); color: var(--o2-txt); }
header nav a.active { color: #06210a; background: var(--o2-green); border-color: var(--o2-green); font-weight: 700; }

/* --- Assinatura institucional (rodapé) — OBRIGATÓRIA --- */
.o2-signature {
  margin-top: 34px; padding: 18px 0 6px;
  border-top: 1px solid var(--o2-line);
  color: var(--o2-gray-medium); font-size: 11.5px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.o2-signature .sig b { color: var(--o2-green); }
.o2-signature .tagline { color: var(--o2-txt-2); font-weight: 600; letter-spacing: .04em; }

/* --- Componentes utilitários on-brand --- */
.o2-cta {
  background: var(--o2-green); color: #06210a; border: none; border-radius: 10px;
  font-weight: 700; cursor: pointer;
}
.o2-cta:hover { background: var(--o2-green-d); }
.o2-pill { font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 6px; }

/* --- Foco visível (a11y) — teclado vê onde está --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--o2-green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Empty state amigável --- */
.o2-empty {
  text-align: center; color: var(--o2-txt-2); font-size: 13px;
  padding: 22px 16px; border: 1px dashed var(--o2-line); border-radius: 12px;
  background: rgba(107, 241, 105, .03);
}
.o2-empty .ico { font-size: 22px; display: block; margin-bottom: 6px; opacity: .8; }

/* --- Loading: spinner + shimmer --- */
@keyframes o2-spin { to { transform: rotate(360deg); } }
.o2-spinner {
  display: inline-block; width: 16px; height: 16px; vertical-align: middle;
  border: 2px solid var(--o2-line); border-top-color: var(--o2-green);
  border-radius: 50%; animation: o2-spin .7s linear infinite;
}
.o2-loading { color: var(--o2-txt-2); font-size: 13px; display: flex; align-items: center; gap: 9px; padding: 16px; }
@keyframes o2-shimmer { 100% { background-position: -200% 0; } }
.o2-skeleton {
  height: 14px; border-radius: 6px; margin: 7px 0;
  background: linear-gradient(90deg, var(--o2-surface-2) 25%, var(--o2-line) 37%, var(--o2-surface-2) 63%);
  background-size: 200% 100%; animation: o2-shimmer 1.3s linear infinite;
}