/* ============================================================
   COPAP TOKENS — Design System v1.0
   Camada de variáveis CSS globais para modernização visual.
   Criado no Lote DESIGN-SYSTEM.1 (Jun/2026).

   REGRAS DE USO:
   - Este arquivo define APENAS variáveis CSS (:root).
   - Não contém classes, resets globais ou overrides de body.
   - Deve ser carregado ANTES de copap_modern.css para que
     as variáveis estejam disponíveis na cascata.
   - Os tokens --cp-* são o novo padrão semântico.
   - Os tokens antigos (--primary, --accent, etc.) continuam
     definidos em base.html e são aliasados aqui para
     compatibilidade retroativa com copap_modern.css.

   NAMESPACE: --cp-* (COPAP visual design system)
   ============================================================ */

:root {

  /* ── Paleta Base Institucional ─────────────────────────── */
  --cp-primary:       #0a3d6b;   /* Azul naval — ações principais e marca */
  --cp-primary-hover: #082f54;   /* Azul naval escuro — hover dos primários */
  --cp-dark-bg:       #07192e;   /* Fundo dark — Portal de Módulos e Login */
  --cp-dark-surface:  #0c2040;   /* Superfície dark — cards do portal */
  --cp-light-bg:      #f4f7fb;   /* Fundo light — dashboards operacionais */
  --cp-surface:       #ffffff;   /* Superfície light — cards e tabelas */

  /* ── Semântica de Ação e Status ────────────────────────── */
  --cp-accent:  #0f9e52;   /* Verde  — sucesso, aprovação, ativo */
  --cp-danger:  #b01e24;   /* Vermelho — destrutivo, exclusão, erro */
  --cp-warn:    #a0620a;   /* Âmbar — alertas, atenção, pendente */
  --cp-info:    #0891b2;   /* Ciano — informativo, módulo ativo no portal */
  --cp-future:  #7c3aed;   /* Roxo — em estruturação, funcionalidade futura */

  /* ── Tipografia (System Font Stack — sem Google Fonts) ─── */
  --cp-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --cp-text-main:    #1e293b;   /* Texto principal — leitura de dados */
  --cp-text-muted:   #64748b;   /* Texto secundário — labels, metadados */
  --cp-text-inverse: #f8fafc;   /* Texto sobre fundos escuros */

  /* ── Bordas ─────────────────────────────────────────────── */
  --cp-border:        #e2e8f0;   /* Borda padrão — divisores, cards, inputs */
  --cp-border-strong: #cbd5e1;   /* Borda reforçada — hover, foco, destaque */

  /* ── Formas (Border Radius) ─────────────────────────────── */
  --cp-radius-sm: 6px;    /* Chips, badges, botões small */
  --cp-radius-md: 10px;   /* Inputs, botões padrão */
  --cp-radius-lg: 16px;   /* Cards, modais, containers */

  /* ── Sombras ────────────────────────────────────────────── */
  --cp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --cp-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10);

  /* ── Compatibilidade retroativa com variáveis legadas ───── */
  /* As variáveis abaixo são usadas por base.html e           */
  /* copap_modern.css. Elas ficam aliasadas para os novos     */
  /* tokens --cp-*, garantindo que futuras mudanças nos       */
  /* tokens se propaguem automaticamente para o sistema legado.*/
  --primary:  var(--cp-primary);
  --primary2: var(--cp-primary-hover);
  --accent:   var(--cp-accent);
  --danger:   var(--cp-danger);
  --warn:     var(--cp-warn);
  --bg:       var(--cp-light-bg);
  --card:     var(--cp-surface);
  --ink:      var(--cp-text-main);
  --muted:    var(--cp-text-muted);
  --line:     var(--cp-border);

}

/* ============================================================
   FIM DO ARQUIVO — Nenhuma classe ou regra abaixo desta linha.
   Este arquivo deve conter APENAS o bloco :root acima.
   ============================================================ */


/* ============================================================
   SGA-SHELL.1 — Tokens de Shell e Temas (localStorage)
   Adicionado em 2026-07-10. NAO remove tokens anteriores.
   ============================================================ */

/* -- Layout shell ------------------------------------------- */
:root {
  --sga-sidebar-w:           240px;
  --sga-sidebar-w-collapsed:  64px;
  --sga-topbar-h:             52px;
}

/* -- Tema padrao: light_operacional (default) --------------- */
:root,
[data-tema="light_operacional"] {
  --t-bg:              var(--cp-light-bg);
  --t-surface:         var(--cp-surface);
  --t-text:            var(--cp-text-main);
  --t-muted:           var(--cp-text-muted);
  --t-border:          var(--cp-border);
  --t-sidebar-bg:      var(--cp-primary);
  --t-sidebar-text:    #ffffff;
  --t-topbar-bg:       #ffffff;
  --t-accent:          var(--cp-primary);
  --t-accent-hover:    var(--cp-primary-hover);
  --t-glass-bg:        rgba(255,255,255,0.08);
  --t-glass-border:    rgba(255,255,255,0.15);
  --t-glass-blur:      12px;
}

/* -- Tema: dark_institucional ------------------------------- */
[data-tema="dark_institucional"] {
  --t-bg:              #0c1929;
  --t-surface:         #0f2235;
  --t-text:            #e2e8f0;
  --t-muted:           #64748b;
  --t-border:          rgba(255,255,255,0.10);
  --t-sidebar-bg:      #081424;
  --t-sidebar-text:    #e2e8f0;
  --t-topbar-bg:       rgba(8,20,36,0.97);
  --t-accent:          #0ea5e9;
  --t-accent-hover:    #38bdf8;
  --t-glass-bg:        rgba(255,255,255,0.06);
  --t-glass-border:    rgba(255,255,255,0.10);
  --t-glass-blur:      14px;
}

/* -- Tema: neutral_executivo -------------------------------- */
[data-tema="neutral_executivo"] {
  --t-bg:              #1e293b;
  --t-surface:         #263244;
  --t-text:            #f1f5f9;
  --t-muted:           #94a3b8;
  --t-border:          rgba(255,255,255,0.08);
  --t-sidebar-bg:      #151e2d;
  --t-sidebar-text:    #f1f5f9;
  --t-topbar-bg:       #1e293b;
  --t-accent:          #6366f1;
  --t-accent-hover:    #818cf8;
  --t-glass-bg:        rgba(255,255,255,0.05);
  --t-glass-border:    rgba(255,255,255,0.08);
  --t-glass-blur:      12px;
}

/* -- Tema: high_contrast ------------------------------------ */
[data-tema="high_contrast"] {
  --t-bg:              #000000;
  --t-surface:         #111111;
  --t-text:            #ffffff;
  --t-muted:           #cccccc;
  --t-border:          #ffffff;
  --t-sidebar-bg:      #000000;
  --t-sidebar-text:    #ffffff;
  --t-topbar-bg:       #000000;
  --t-accent:          #ffff00;
  --t-accent-hover:    #ffe000;
  --t-glass-bg:        rgba(255,255,255,0.05);
  --t-glass-border:    #ffffff;
  --t-glass-blur:      0px;
}

/* -- Tema: liquid_premium ----------------------------------- */
[data-tema="liquid_premium"] {
  --t-bg:              #0c1929;
  --t-surface:         rgba(255,255,255,0.06);
  --t-text:            #e2e8f0;
  --t-muted:           #64748b;
  --t-border:          rgba(255,255,255,0.10);
  --t-sidebar-bg:      #081424;
  --t-sidebar-text:    #e2e8f0;
  --t-topbar-bg:       rgba(8,20,36,0.96);
  --t-accent:          #0ea5e9;
  --t-accent-hover:    #38bdf8;
  --t-glass-bg:        rgba(255,255,255,0.08);
  --t-glass-border:    rgba(255,255,255,0.14);
  --t-glass-blur:      28px;
}

/* ============================================================
   FIM SGA-SHELL.1 tokens
   ============================================================ */


/* ============================================================
   SGA-SKILL-BASE.1 — Tokens de Skill Base Visual
   Adicionado em 2026-07-10. Referência: protótipo aprovado
   prototipo_sga_liquid_sidebar_offline_v1.html
   NAO sobrescreve tokens existentes. Alias seguro.
   ============================================================ */

:root {

  /* ── Aliases de fundo → sistema de temas ───────────────── */
  --bg-app:     var(--t-bg, var(--cp-light-bg));
  --bg-sb:      var(--t-sidebar-bg, var(--cp-primary));
  --bg-topbar:  var(--t-topbar-bg, #ffffff);
  --bg-surface: var(--t-surface, var(--cp-surface));
  --bg-hover:   rgba(255,255,255,0.07);
  --bg-active:  rgba(14,165,233,0.14);

  /* ── Glass — alias → tema (existem no shell) ───────────── */
  --g-bg:     var(--t-glass-bg,     rgba(255,255,255,0.08));
  --g-border: var(--t-glass-border, rgba(255,255,255,0.15));
  --g-blur:   var(--t-glass-blur,   12px);
  --g-shadow: 0 4px 24px rgba(0,0,0,0.35);

  /* ── Acento interativo (skill base = sky blue dos temas dark) */
  /* NOTA: --accent já é usado com semântica de "verde sucesso". */
  /* Para elementos interativos usamos --t-accent do tema ativo. */
  --accent-h:    var(--t-accent-hover, var(--cp-primary-hover));
  --accent-glow: rgba(14,165,233,0.25);

  /* ── Texto — aliases → tema ─────────────────────────────── */
  --tx-main:  var(--t-text,  var(--cp-text-main));
  --tx-muted: var(--t-muted, var(--cp-text-muted));
  --tx-dim:   #94a3b8;
  --tx-white: #ffffff;

  /* ── Chips de tipo de processo ──────────────────────────── */
  /* Valores sólidos — funcionam em light e dark              */
  --sapro-bg:  #dbeafe;  --sapro-tx:  #1e40af;
  --sindec-bg: #dcfce7;  --sindec-tx: #166534;
  --sei-bg:    #fef3c7;  --sei-tx:    #92400e;

  /* ── Status operacional ─────────────────────────────────── */
  --ok-bg:     #dcfce7;  --ok-tx:     #166534;
  --warn-bg:   #fef3c7;  --warn-tx:   #92400e;
  --danger-bg: #fee2e2;  --danger-tx: #991b1b;

  /* ── Layout — aliases → variáveis shell existentes ─────── */
  --sbw:  var(--sga-sidebar-w,           240px);
  --sbwc: var(--sga-sidebar-w-collapsed,  64px);
  --tbh:  var(--sga-topbar-h,             52px);

  /* ── Radii institucionais ───────────────────────────────── */
  --r2:  4px;   --r4:  8px;   --r6:  10px;  --r8:  14px;
  --r10: 18px;  --r12: 22px;  --r16: 26px;

  /* Transição padrão */
  --tr: 0.22s ease;
}

/* ── Overrides para temas dark: chips com transparência ── */
[data-tema="dark_institucional"],
[data-tema="liquid_premium"],
[data-tema="neutral_executivo"] {
  --sapro-bg:  rgba(59,130,246,0.15);  --sapro-tx:  #93c5fd;
  --sindec-bg: rgba(34,197,94,0.12);   --sindec-tx: #86efac;
  --sei-bg:    rgba(251,191,36,0.12);  --sei-tx:    #fcd34d;
  --ok-bg:     rgba(34,197,94,0.15);   --ok-tx:     #4ade80;
  --warn-bg:   rgba(245,158,11,0.14);  --warn-tx:   #fbbf24;
  --danger-bg: rgba(239,68,68,0.12);   --danger-tx: #fca5a5;
  --bg-hover:  rgba(255,255,255,0.07);
  --bg-active: rgba(14,165,233,0.14);
}

/* ============================================================
   FIM SGA-SKILL-BASE.1 tokens
   ============================================================ */


/* ============================================================
   SGA-DARK-BASE.1 — Tokens Dark Base e aliases --sga-*
   Adicionado em 2026-07-10.
   Estratégia: [data-tema] tem maior especificidade que :root,
   logo sobrescreve os valores hardcoded de sga_design.css.
   ============================================================ */

/* Override para temas dark — sobrescreve valores de sga_design.css :root */
[data-tema="dark_institucional"],
[data-tema="liquid_premium"],
[data-tema="neutral_executivo"] {
  --sga-accent:         var(--t-accent);
  --sga-bg-body:        var(--t-bg);
  --sga-bg-surface:     var(--t-surface);
  --sga-bg-hover:       rgba(255,255,255,0.07);
  --sga-bg-subtle:      rgba(255,255,255,0.03);
  --sga-text-main:      var(--t-text);
  --sga-text-muted:     var(--t-muted);
  --sga-text-light:     #94a3b8;
  --sga-border:         var(--t-border);
  --sga-border-strong:  rgba(255,255,255,0.15);
  --sga-border-focus:   rgba(14,165,233,0.50);
  /* Status dark */
  --sga-success-bg:     rgba(34,197,94,0.12);
  --sga-success-text:   #4ade80;
  --sga-success-border: rgba(34,197,94,0.25);
  --sga-warning-bg:     rgba(245,158,11,0.12);
  --sga-warning-text:   #fbbf24;
  --sga-warning-border: rgba(245,158,11,0.25);
  --sga-danger-bg:      rgba(239,68,68,0.12);
  --sga-danger-text:    #fca5a5;
  --sga-danger-border:  rgba(239,68,68,0.25);
  --sga-info-bg:        rgba(14,165,233,0.12);
  --sga-info-text:      #7dd3fc;
  --sga-info-border:    rgba(14,165,233,0.25);
  /* Sombras dark */
  --sga-shadow-sm:      0 1px 2px rgba(0,0,0,0.30);
  --sga-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.40);
  --sga-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.50);
  --sga-shadow-drawer:  -4px 0 24px rgba(0,0,0,0.50);
}

/* Novos tokens --sga-* para dark base (não existem em sga_design.css) */
:root {
  --sga-bg-app:            var(--t-bg,          var(--cp-light-bg));
  --sga-bg-sidebar:        var(--t-sidebar-bg,  var(--cp-primary));
  --sga-bg-topbar:         var(--t-topbar-bg,   #ffffff);
  --sga-glass-bg:          var(--t-glass-bg,    rgba(255,255,255,0.08));
  --sga-glass-border:      var(--t-glass-border, rgba(255,255,255,0.15));
  --sga-glass-blur:        var(--t-glass-blur,  12px);
  --sga-glass-shadow:      0 4px 24px rgba(0,0,0,0.35);
  --sga-accent-hover:      var(--t-accent-hover, var(--cp-primary-hover));
  --sga-accent-glow:       rgba(14,165,233,0.25);
  --sga-text-dim:          #94a3b8;
  --sga-text-white:        #ffffff;
  --sga-sidebar-width:     240px;
  --sga-sidebar-collapsed: 64px;
  --sga-topbar-height:     52px;

  /* ── SGA Institutional Pro — paleta fixo (LOGIN-PORTAL.2) ── */
  --sga-navy-900: #0A1F38;
  --sga-navy-800: #0C2440;
  --sga-navy-700: #123457;
  --sga-blue:     #1E5A96;
  --sga-blue-hov: #174A7E;
  --sga-blue-soft:#E8F0F8;
  /* SGA-EVOLUCAO-ESTRUTURAL.V1 (Fase 15) — azul no papel de TEXTO/BORDA sobre
     superficie, separado do azul no papel de FUNDO. No tema claro os dois sao
     a mesma cor, e por isso o valor aqui e literalmente var(--sga-blue): nada
     na renderizacao clara aprovada muda. A separacao existe para o tema Dark,
     onde um fundo de botao com texto branco e um texto sobre fundo escuro nao
     podem ser a mesma cor sem que um dos dois perca contraste. */
  --sga-blue-ink: var(--sga-blue);
  --sga-ice:      #F4F6F9;
  --sga-surface:  #FFFFFF;
  --sga-text:     #16283C;
  --sga-text-2:   #44586C;
  --sga-muted:    #7C8CA0;
  --sga-teal:     #0E8A7B;
  --sga-teal-soft:#E3F2F0;
  --sga-gold:     #B8912F;
  --sga-gold-soft:#F6EFDD;
  --sga-amber:    #C07A1E;
  --sga-amber-soft:#F9F0DF;
  --sga-red:      #C03A3A;
  --sga-red-soft: #F9E9E9;
  --sga-radius-sm: 6px;
  --sga-radius-md: 8px;
  --sga-radius-lg: 12px;
  --sga-font: "Lato", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --sga-mono: "Noto Sans Mono", "Consolas", "Courier New", monospace;
  /* ── fim tokens institucionais ── */

}

/* ============================================================
   FIM SGA-DARK-BASE.1 tokens
   ============================================================ */


/* ============================================================
   SGA-EVOLUCAO-ESTRUTURAL.V1 — FASE 15
   Tema Dark alcanca a paleta institucional
   ------------------------------------------------------------
   O design claro continua sendo o oficial: ele e o valor de
   :root, e nada acima desta linha foi alterado a nao ser pela
   inclusao de --sga-blue-ink (que no claro e o proprio
   --sga-blue). O bloco abaixo so entra quando o usuario escolhe
   um tema alternativo.

   POR QUE AQUI, E NAO EM CADA TELA
   O bloco SGA-DARK-BASE.1 acima ja dava valor escuro a familia
   --sga-bg-*/--sga-text-main/--sga-border, que e a que
   sga_design.css usa nas telas antigas. A familia institucional
   (--sga-surface, --sga-text, --sga-ice, --sga-blue, --sga-teal,
   --sga-gold, --sga-amber, --sga-red e os *-soft) nasceu depois,
   no lote LOGIN-PORTAL.2, e ficou sem contraparte escura. E ela
   que templates/_base_modulo.html usa — ou seja, todas as telas
   das Fases 3 a 14. Sem este bloco, escolher Dark deixava a
   casca escura e os cartoes brancos.

   CONTRASTE
   Os valores escuros foram escolhidos contra a superficie
   escura (#10243A) e verificados: texto >= 4,5:1, elementos de
   interface >= 3:1. --sga-blue permanece escuro o bastante para
   servir de fundo com texto branco (4,88:1); quem precisa de
   azul legivel SOBRE o escuro usa --sga-blue-ink (8,1:1).

   NAO ENTRA AQUI
   Raio de borda, fonte e espacamento. Forma e tipografia nao
   sao tema: mudar o raio no escuro faria o sistema parecer
   outro produto, e nao o mesmo produto com outra luz.
   ============================================================ */

[data-tema="dark_institucional"],
[data-tema="liquid_premium"],
[data-tema="neutral_executivo"] {
  /* Estrutura */
  --sga-navy-900: #050D18;
  --sga-navy-800: #081424;
  --sga-navy-700: #0E2038;
  --sga-surface:  #10243A;   /* cartao — um degrau acima do fundo da pagina */
  --sga-ice:      #16304B;   /* faixa sutil: hover de linha, chip inerte */

  /* Azul institucional — ver nota sobre os dois papeis */
  --sga-blue:     #2F6FD0;   /* fundo de acao; branco por cima = 4,88:1 */
  --sga-blue-hov: #3E80E4;
  --sga-blue-ink: #8FBEF5;   /* texto/borda sobre escuro = 8,14:1 */
  --sga-blue-soft:rgba(47,111,208,0.20);

  /* Texto */
  --sga-text:     #E6EDF5;   /* 13,4:1 */
  --sga-text-2:   #B4C4D6;   /*  8,9:1 */
  --sga-muted:    #8798AC;   /*  5,3:1 — ainda legivel, nao apenas decorativo */

  /* Semantica — nestes tokens a cor so aparece como texto, borda ou
     fundo translucido, nunca como fundo solido com texto branco. */
  --sga-teal:      #4ECBA5;  --sga-teal-soft:  rgba(78,203,165,0.16);
  --sga-gold:      #E0B75A;  --sga-gold-soft:  rgba(224,183,90,0.16);
  --sga-amber:     #E9A445;  --sga-amber-soft: rgba(233,164,69,0.16);
  --sga-red:       #F08A8A;  --sga-red-soft:   rgba(240,138,138,0.16);
}

/* Alto contraste — tema de acessibilidade, nao de gosto. Preto puro,
   branco puro e amarelo de foco. Mantido aqui porque, sem ele, a
   familia institucional voltaria a impor cartoes brancos sobre a
   casca preta, que e exatamente o problema que este lote resolve. */
[data-tema="high_contrast"] {
  --sga-navy-900: #000000;
  --sga-navy-800: #000000;
  --sga-navy-700: #000000;
  --sga-surface:  #000000;
  --sga-ice:      #1A1A1A;
  --sga-blue:     #0033CC;
  --sga-blue-hov: #0044FF;
  --sga-blue-ink: #FFFF00;
  --sga-blue-soft:#1A1A1A;
  --sga-text:     #FFFFFF;
  --sga-text-2:   #FFFFFF;
  --sga-muted:    #E0E0E0;
  --sga-teal:     #00FF9C;  --sga-teal-soft:  #0A1A14;
  --sga-gold:     #FFD700;  --sga-gold-soft:  #1A1600;
  --sga-amber:    #FFB300;  --sga-amber-soft: #1A1200;
  --sga-red:      #FF6B6B;  --sga-red-soft:   #1A0A0A;
}

/* ------------------------------------------------------------
   Impressao — o papel nao tem tema.
   Quem estiver com o tema escuro na tela nao deve imprimir um
   relatorio de fundo preto: gasta tinta, borra e fica ilegivel
   em fotocopia. O bloco devolve a paleta clara oficial no
   momento da impressao, seja qual for o tema escolhido. E so
   valor de token — nenhuma tela precisa saber que isto existe.
   ------------------------------------------------------------ */
@media print {
  [data-tema] {
    --sga-navy-900: #0A1F38;
    --sga-navy-800: #0C2440;
    --sga-navy-700: #123457;
    --sga-surface:  #FFFFFF;
    --sga-ice:      #F4F6F9;
    --sga-blue:     #1E5A96;
    --sga-blue-hov: #174A7E;
    --sga-blue-ink: #1E5A96;
    --sga-blue-soft:#E8F0F8;
    --sga-text:     #16283C;
    --sga-text-2:   #44586C;
    --sga-muted:    #7C8CA0;
    --sga-teal:     #0E8A7B;  --sga-teal-soft:  #E3F2F0;
    --sga-gold:     #B8912F;  --sga-gold-soft:  #F6EFDD;
    --sga-amber:    #C07A1E;  --sga-amber-soft: #F9F0DF;
    --sga-red:      #C03A3A;  --sga-red-soft:   #F9E9E9;
    --t-bg:         #FFFFFF;
    --t-surface:    #FFFFFF;
    --t-text:       #16283C;
    --t-muted:      #7C8CA0;
    --t-border:     #DCE3EC;
  }
  body { background: #FFFFFF !important; color: #16283C !important; }
}

/* ------------------------------------------------------------
   Movimento reduzido — preferencia declarada do sistema
   operacional. Vale para o sistema inteiro, em qualquer tema.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   FIM SGA-EVOLUCAO-ESTRUTURAL.V1 — FASE 15 tokens
   ============================================================ */