/* ══════════════════════════════════════════════════════════════════════
   CTEC — PADRÃO VISUAL ÚNICO  (ctec-ds.css)

   Camada de REFINAMENTO sobre o Elite. Não substitui o Elite: ajusta
   tokens e componentes para o padrão aprovado, de modo que as views
   existentes continuem funcionando sem reescrita.

   CARREGAR POR ÚLTIMO, depois do elite-compat.css.

   Hierarquia de cor — uma cor, um papel:
     azul   estrutura (topbar, títulos, links)
     chama  AÇÃO (só o botão principal e o item ativo do menu)
     teal   dado (progresso, indicadores)
     verde/vermelho  estado

   Temas: data-theme ausente = claro | "dark" | "elite-sacro"
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Marca — valores medidos no arquivo do logo */
  --ctec-azul-900:#003C78; --ctec-azul-800:#0C5484; --ctec-azul-700:#0C6090;
  --ctec-azul-600:#186C9C; --ctec-azul-500:#2484B4; --ctec-azul-300:#309CCC;
  --ctec-azul-200:#7FC4E6;
  --ctec-chama-1:#FCD800;  --ctec-chama-2:#FCB400;  --ctec-chama-3:#FC8400;
  --ctec-teal:#0FBFBF;
  --ctec-ok:#12A570; --ctec-alerta:#E0A008; --ctec-erro:#D64545;

  --ctec-display:'Sora',system-ui,-apple-system,sans-serif;
  --ctec-corpo:'Inter',system-ui,-apple-system,sans-serif;
  --ctec-t:.18s cubic-bezier(.4,0,.2,1);

  /* Tema claro (padrão) */
  --ctec-fundo:#F4F8FC; --ctec-fundo-2:#EDF4FA;
  --ctec-superficie:#FFFFFF; --ctec-superficie-2:#F7FBFE;
  --ctec-borda:#E1EDF6; --ctec-borda-forte:#CBDFEE;
  --ctec-texto:#0A2440; --ctec-texto-2:#51708F; --ctec-texto-3:#7D96B0;
  --ctec-sombra:0 12px 32px rgba(10,36,64,.10);
  --ctec-brilho:0 0 0 1px rgba(252,180,0,.35), 0 8px 22px rgba(252,132,0,.26);
  --ctec-topo:#0A1A2E;   /* topbar escura nos dois temas, como no AD Lidera */
}

[data-theme="dark"]{
  --ctec-fundo:#081221; --ctec-fundo-2:#0C1A2E;
  --ctec-superficie:#0F2138; --ctec-superficie-2:#16304E;
  --ctec-borda:rgba(127,196,230,.14); --ctec-borda-forte:rgba(127,196,230,.26);
  --ctec-texto:#EAF2F8; --ctec-texto-2:#9DB4CC; --ctec-texto-3:#6B839D;
  --ctec-sombra:0 18px 44px rgba(0,8,20,.55);
  --ctec-brilho:0 0 0 1px rgba(252,180,0,.28), 0 8px 26px rgba(252,132,0,.30);
  --ctec-topo:#0A1A2E;
}

/* Elite Sacro continua existindo: só recebe a chama como ação */
[data-theme="elite-sacro"]{
  --ctec-chama-2:#C8A35C; --ctec-chama-3:#A8853C;
  --ctec-brilho:0 0 0 1px rgba(200,163,92,.34), 0 8px 22px rgba(168,133,60,.28);
}

/* ─── Os tokens do Elite passam a apontar para os do CTEC ───
   Assim TODA a biblioteca existente muda junto, sem tocar nas views. */
:root,[data-theme="dark"],[data-theme="elite-sacro"]{
  --bg-primary:var(--ctec-fundo);
  --bg-secondary:var(--ctec-superficie);
  --bg-tertiary:var(--ctec-fundo-2);
  --bg-card:var(--ctec-superficie);
  --bg-hover:var(--ctec-superficie-2);
  --border-subtle:var(--ctec-borda);
  --border-default:var(--ctec-borda-forte);
  --text-primary:var(--ctec-texto);
  --text-secondary:var(--ctec-texto-2);
  --text-muted:var(--ctec-texto-3);
  --accent-primary:var(--ctec-azul-500);
  --accent-primary-soft:color-mix(in srgb,var(--ctec-azul-500) 14%,transparent);
  --accent-success:var(--ctec-ok);
  --accent-success-soft:color-mix(in srgb,var(--ctec-ok) 14%,transparent);
  --accent-danger:var(--ctec-erro);
  --accent-danger-soft:color-mix(in srgb,var(--ctec-erro) 14%,transparent);
  --accent-warning:var(--ctec-alerta);
  --accent-warning-soft:color-mix(in srgb,var(--ctec-alerta) 14%,transparent);
  --color-primary:var(--ctec-azul-900);
  --color-primary-light:var(--ctec-azul-500);
  --color-secondary:var(--ctec-chama-3);
  --shadow:var(--ctec-sombra);
  --shadow-lg:var(--ctec-sombra);
}

body{background:var(--ctec-fundo);color:var(--ctec-texto);font-family:var(--ctec-corpo)}
h1,h2,h3,h4,.page-title,.card-title,.stat-value,.modal-title{font-family:var(--ctec-display);letter-spacing:-.02em}

/* ══════════════════════════════════════════════════════════════════
   TOPBAR — menu no centro real
   Laterais de largura fixa: o menu não desloca conforme o tamanho do
   logo ou do nome do usuário.
   ══════════════════════════════════════════════════════════════════ */
.topbar{background:var(--ctec-topo)!important;border-bottom:1px solid rgba(127,196,230,.12);
  height:62px;box-shadow:none}
.topbar-logo{width:190px;flex-shrink:0}
.topbar-menu{flex:1!important;justify-content:center!important;min-width:0}
/* No admin (.topbar-centered) o menu sai do fluxo (position:absolute no
   topbar.css). O margin-left:auto e o UNICO apoio que mantem sino+usuario
   na direita — zera-lo joga o bloco do usuario para o lado do logo.
   No aluno (menu no fluxo, flex:1) o auto resolve para 0 e nada muda. */
.topbar-right{margin-left:auto!important}
.topbar-actions,.topbar-user{margin-left:0!important}
.topbar-link,.topbar-trigger{border-radius:8px;font-size:13.5px;font-weight:500;transition:var(--ctec-t)}
/* Hover/ativo em BRANCO só onde o fundo é a barra escura: triggers e
   links diretos. `.topbar-link` também é o item do MEGA-MENU (painel
   claro no tema light) — pintar de #fff ali some com o texto no hover
   e na página ativa. Dentro do dropdown, quem manda é o topbar.css,
   que já trata claro e escuro com as cores da área. */
.topbar-trigger:hover,.topbar-link-direct:hover{background:rgba(255,255,255,.07);color:#fff}
/* item ativo NA BARRA: a chama marca onde você está */
.topbar-item.active > .topbar-trigger,
.topbar-link-direct.active{background:rgba(255,255,255,.10)!important;color:#fff!important;
  box-shadow:inset 0 -2px 0 var(--ctec-chama-3)}

/* ══════════════════════════════════════════════════════════════════
   CARTÕES
   ══════════════════════════════════════════════════════════════════ */
.card{background:var(--ctec-superficie);border:1px solid var(--ctec-borda);
  border-radius:16px;box-shadow:var(--ctec-sombra);transition:var(--ctec-t)}
.card-header{border-bottom:1px solid var(--ctec-borda);padding:15px 18px}
.card-title{font-size:.95rem;font-weight:600}

/* stat-card: filete superior na cor do ícone + brilho no canto */
.stat-card{position:relative;background:var(--ctec-superficie);border:1px solid var(--ctec-borda);
  border-radius:16px;overflow:hidden;transition:var(--ctec-t)}
.stat-card:hover{transform:translateY(-2px);border-color:var(--ctec-borda-forte)}
.stat-value{font-family:var(--ctec-display);font-weight:700;letter-spacing:-.02em}
.stat-label{color:var(--ctec-texto-2)}
.stat-footer{color:var(--ctec-texto-3)}

/* ══════════════════════════════════════════════════════════════════
   BOTÕES — a chama é só da ação principal
   ══════════════════════════════════════════════════════════════════ */
.btn{font-family:var(--ctec-corpo);font-weight:600;border-radius:12px;transition:var(--ctec-t)}
.btn-primary{background:linear-gradient(135deg,var(--ctec-chama-2),var(--ctec-chama-3))!important;
  color:#3A2200!important;border-color:transparent!important;box-shadow:var(--ctec-brilho)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-secondary{background:var(--ctec-fundo-2);color:var(--ctec-texto);border-color:var(--ctec-borda)}
.btn-secondary:hover{background:var(--ctec-superficie-2);border-color:var(--ctec-borda-forte)}
.btn-outline{border-color:var(--ctec-borda-forte);color:var(--ctec-texto);background:transparent}
.btn-outline:hover{border-color:var(--ctec-azul-300);color:var(--ctec-azul-300)}
.btn-success{background:var(--ctec-ok);color:#fff;border-color:transparent}
.btn-danger{background:var(--ctec-erro);color:#fff;border-color:transparent}

/* ══════════════════════════════════════════════════════════════════
   FORMULÁRIO
   ══════════════════════════════════════════════════════════════════ */
.form-input,.form-select,.form-textarea,
.select2-container--default .select2-selection--single{
  background:var(--ctec-fundo-2)!important;border:1.5px solid var(--ctec-borda)!important;
  border-radius:12px!important;color:var(--ctec-texto)!important;transition:var(--ctec-t)}
.form-input:focus,.form-select:focus,.form-textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--ctec-azul-300)!important;background:var(--ctec-superficie)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ctec-azul-300) 18%,transparent)!important;outline:none}
.form-label{font-weight:600;color:var(--ctec-texto)}
.form-hint{color:var(--ctec-texto-3)}

/* interruptor com a chama */
.toggle-input:checked + .toggle-slider{
  background:linear-gradient(135deg,var(--ctec-chama-2),var(--ctec-chama-3))!important}
.form-check-input:checked + .checkbox-mark{
  background:linear-gradient(135deg,var(--ctec-chama-2),var(--ctec-chama-3))!important;border-color:transparent!important}

/* ══════════════════════════════════════════════════════════════════
   TABELA
   ══════════════════════════════════════════════════════════════════ */
.data-table thead th{background:var(--ctec-fundo-2);color:var(--ctec-texto-3);
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  border-bottom:1px solid var(--ctec-borda)}
.data-table td{border-bottom:1px solid var(--ctec-borda);color:var(--ctec-texto)}
.data-table tbody tr{transition:var(--ctec-t)}
.data-table tbody tr:hover{background:var(--ctec-superficie-2)}
.action-btn{border:1px solid var(--ctec-borda);border-radius:7px;color:var(--ctec-texto-2);
  background:transparent;transition:var(--ctec-t)}
.action-btn:hover{border-color:var(--ctec-azul-300);color:var(--ctec-azul-300)}
.action-btn.delete:hover,.action-btn.danger:hover{border-color:var(--ctec-erro);color:var(--ctec-erro)}

/* ══════════════════════════════════════════════════════════════════
   SELOS — estado, nunca ação
   ══════════════════════════════════════════════════════════════════ */
.badge{border-radius:99px;font-weight:600;letter-spacing:.04em;border:1px solid transparent}
.badge-success,.badge-ativo,.badge-pago{
  background:color-mix(in srgb,var(--ctec-ok) 14%,transparent);color:var(--ctec-ok);
  border-color:color-mix(in srgb,var(--ctec-ok) 30%,transparent)}
.badge-warning,.badge-pendente,.badge-aguardando{
  background:color-mix(in srgb,var(--ctec-alerta) 14%,transparent);color:var(--ctec-alerta);
  border-color:color-mix(in srgb,var(--ctec-alerta) 30%,transparent)}
.badge-danger,.badge-cancelado,.badge-expirado{
  background:color-mix(in srgb,var(--ctec-erro) 14%,transparent);color:var(--ctec-erro);
  border-color:color-mix(in srgb,var(--ctec-erro) 30%,transparent)}
.badge-info,.badge-primary{
  background:color-mix(in srgb,var(--ctec-teal) 14%,transparent);color:var(--ctec-teal);
  border-color:color-mix(in srgb,var(--ctec-teal) 30%,transparent)}
.badge-neutral,.badge-default,.badge-inativo{
  background:color-mix(in srgb,var(--ctec-texto-2) 12%,transparent);color:var(--ctec-texto-2);
  border-color:var(--ctec-borda)}

/* ══════════════════════════════════════════════════════════════════
   PROGRESSO — aqui entra o teal
   ══════════════════════════════════════════════════════════════════ */
.progress,.progress-bar-bg{background:var(--ctec-fundo-2);border-radius:99px;overflow:hidden}
.progress-bar,.progress-fill,.progress > div{
  background:linear-gradient(90deg,var(--ctec-teal),var(--ctec-azul-300))!important;border-radius:99px}

/* ══════════════════════════════════════════════════════════════════
   MODAIS E PAGINAÇÃO
   ══════════════════════════════════════════════════════════════════ */
.modal,.modal-container{background:var(--ctec-superficie);border-radius:22px;
  border:1px solid var(--ctec-borda);box-shadow:var(--ctec-sombra)}
.modal-header,.modal-footer{border-color:var(--ctec-borda)}
.pagination-btn{border:1px solid var(--ctec-borda);border-radius:10px;color:var(--ctec-texto-2);
  background:var(--ctec-superficie);transition:var(--ctec-t)}
.pagination-btn:hover{border-color:var(--ctec-azul-300);color:var(--ctec-azul-300)}
.pagination-btn.active{background:linear-gradient(135deg,var(--ctec-chama-2),var(--ctec-chama-3));
  color:#3A2200;border-color:transparent}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA E DIVERSOS
   ══════════════════════════════════════════════════════════════════ */
.page-title{font-weight:700}
.page-subtitle{color:var(--ctec-texto-2)}
/* ── Filtros: alinhamento e ritmo ──────────────────────────────
   Tres causas de desalinhamento corrigidas aqui:
   1. o .form-hint sob a busca entrava no fluxo da coluna e descolava
      o campo dos vizinhos (o form alinha por flex-end) → sai do fluxo;
   2. .filter-actions herdava flex-direction:column do .filter-group e
      o align-items:flex-end (eixo cruzado) jogava o botao para a
      DIREITA de um grupo esticado por flex:1 → grupo compacto, em
      linha, colado ao ultimo campo;
   3. o Select2 renderiza 42px e os inputs 48px → mesma altura.     */
.filters-card{background:var(--ctec-superficie);border:1px solid var(--ctec-borda);
  border-radius:16px;padding:16px 20px;margin-bottom:20px}
.filters-form{align-items:flex-end;gap:14px}
.filters-form .filter-group{position:relative;gap:6px}
.filters-form .form-hint{position:absolute;top:calc(100% + 3px);left:2px;
  margin:0;min-height:0!important;line-height:1.3;white-space:nowrap}
@media(min-width:769px){
  .filters-form .filter-actions{flex:0 0 auto!important;min-width:0!important;
    flex-direction:row!important;align-items:flex-end;position:static}
}
.filter-actions .btn{height:48px}
.select2-container--default .select2-selection--single{height:48px!important;
  display:flex!important;align-items:center!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%!important}
.empty-state,.empty-message{color:var(--ctec-texto-2)}
/* marcador da marca antes dos títulos de seção */
.page-icon{border-radius:12px}
:focus-visible{outline:2px solid var(--ctec-chama-3);outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══════════════════════════════════════════════════════════════════
   UTILITÁRIOS usados pelas views e ausentes no Elite
   (levantados com references/verifica-classes.js)
   ══════════════════════════════════════════════════════════════════ */
.text-sm{font-size:13px}
.text-xs{font-size:11.5px}
.fw-600{font-weight:600}
.mt-1{margin-top:8px}
.mb-1{margin-bottom:8px}
.w-auto,.auto{width:auto}
.fill{flex:1}
.amber{color:var(--ctec-alerta)}
.stat-info{color:var(--ctec-texto-2);font-size:12.5px}
.form-grid.cols-1{grid-template-columns:1fr}
.tab-pane{display:none}
.tab-pane.active{display:block}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  color:var(--ctec-texto-2);font-size:13.5px;transition:var(--ctec-t)}
.sidebar-link:hover{background:var(--ctec-superficie-2);color:var(--ctec-texto)}
.sidebar-link.active{background:color-mix(in srgb,var(--ctec-azul-500) 14%,transparent);color:var(--ctec-azul-300)}

/* ══════════════════════════════════════════════════════════════════
   LINKS

   Nenhuma folha do sistema definia text-decoration, entao valia o
   padrao do navegador: sublinhado. Como cards inteiros sao <a>, TODO
   o texto dentro deles aparecia sublinhado.

   Regra: link nao vem sublinhado por padrao. O sublinhado volta so
   onde ele informa — links dentro de texto corrido.
   ══════════════════════════════════════════════════════════════════ */
a{text-decoration:none;color:inherit}
a:hover{text-decoration:none}

/* Link textual de verdade: azul, e sublinha ao passar o mouse */
.link,.texto-rico a,.prose a,.descricao a{color:var(--ctec-azul-500)}
.link:hover,.texto-rico a:hover,.prose a:hover,.descricao a:hover{text-decoration:underline}

/* Nada de sublinhado herdado em botao, selo ou card */
.btn,.badge,.selo,.card a,.stat-card,.action-btn,.pagination-btn,
.topbar-link,.topbar-trigger,.dropdown-item{text-decoration:none!important}

/* O foco continua visivel — acessibilidade nao depende do sublinhado */
a:focus-visible{outline:2px solid var(--ctec-chama-3);outline-offset:2px;border-radius:4px}

/* ══════════════════════════════════════════════════════════════════
   COR DE TEXTO — garantia nos tres temas

   No escuro alguns titulos ficavam quase invisiveis: o card fica
   translucido (rgba branco 2,5%) e o texto herdava uma cor fixa clara
   definida fora dos tokens. Aqui todo titulo e texto de card volta a
   seguir --ctec-texto, que muda com o tema.
   ══════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6{color:var(--ctec-texto)}
.card,.card-body,.stat-card,.modal,.filters-card{color:var(--ctec-texto)}
.card h1,.card h2,.card h3,.card h4,
.card-title,.page-title,.modal-title,
.course-card-title,.curso-nome,.stat-value{color:var(--ctec-texto)!important}

/* textos de apoio */
.card-subtitle,.page-subtitle,.stat-label,.course-card-meta,
.curso-sub,.text-muted,.empty-message{color:var(--ctec-texto-2)!important}
.stat-footer,.text-xs,.form-hint{color:var(--ctec-texto-3)!important}

/* categoria acima do titulo: azul que funciona nos dois fundos */
.course-card-category,.curso-cat,.cartao-cat{color:var(--ctec-azul-300)!important}

/* Superficies: no escuro o card do Elite e quase transparente.
   Damos fundo proprio, para o conteudo ter contraste real. */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .filters-card,
[data-theme="dark"] .modal{background:var(--ctec-superficie)!important;
  border-color:var(--ctec-borda)!important;backdrop-filter:none}
[data-theme="dark"] .card-header{background:transparent;border-bottom-color:var(--ctec-borda)}

/* ══════════════════════════════════════════════════════════════════
   VARREDURA DE REFINAMENTO
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Interruptor: geometria da bola RELATIVA ao trilho ──
   A base do Elite fixa a bola em 20px e o deslize em translateX(22px),
   medidos para o trilho 48x26. Qualquer trilho redimensionado inline
   (36x20 no topbar, na biblioteca...) estourava a bola para fora.
   Aqui a bola se ancora nas bordas do trilho: 3px de folga em cima e
   embaixo, quadrada por aspect-ratio, e no estado ligado encosta na
   borda direita — funciona em QUALQUER tamanho, sem medida fixa.   */
.toggle-slider{position:relative;flex-shrink:0}
.toggle-slider::before{width:auto!important;height:auto!important;
  top:3px!important;bottom:3px!important;left:3px!important;
  aspect-ratio:1/1;transform:none;
  transition:left var(--ctec-t),transform var(--ctec-t),background var(--ctec-t)}
.toggle-input:checked+.toggle-slider::before{
  left:calc(100% - 3px)!important;transform:translateX(-100%)}

/* ── 2. Alertas respiram ──
   Mensagem flash vinha colada no bloco seguinte. A margem só existe
   quando algo vem depois: alerta sozinho no fim não abre buraco.   */
.alert:not(:last-child){margin-bottom:18px}
.alert+.alert{margin-top:-6px}

/* ── 3. Stat-card (padrão ícone + stat-info): hierarquia do valor ──
   O h4 do valor herdava o tamanho cru do navegador: número pequeno,
   colado no ícone, menor que o próprio rótulo merecia. O valor é a
   informação — o ícone é apoio.                                    */
.stat-card>.stat-icon{margin-bottom:14px}
.stat-card .stat-info h4{font-family:var(--ctec-display);font-size:26px;
  font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 3px;
  color:var(--ctec-texto)}
.stat-card .stat-info p{font-size:13px;color:var(--ctec-texto-2);margin:0}
@media(max-width:768px){.stat-card .stat-info h4{font-size:20px}}

/* ── 4. Campo de arquivo moderno ──
   Sai o controle nativo cru ("Escolher arquivo | Nenhum arquivo
   escolhido" num caixote); entra área compacta tracejada com botão
   no padrão do sistema — sem tocar em nenhuma view.                */
input[type="file"]{width:100%;height:auto;padding:8px;cursor:pointer;
  font-family:var(--ctec-corpo);font-size:13px;color:var(--ctec-texto-2);
  background:var(--ctec-fundo-2)!important;
  border:1.5px dashed var(--ctec-borda-forte)!important;border-radius:12px!important;
  transition:var(--ctec-t)}
input[type="file"]:hover{border-color:var(--ctec-azul-300)!important;
  color:var(--ctec-texto)}
input[type="file"]::file-selector-button{font-family:var(--ctec-corpo);
  font-weight:600;font-size:13px;color:var(--ctec-texto);
  background:var(--ctec-superficie);border:1px solid var(--ctec-borda-forte);
  border-radius:9px;padding:8px 14px;margin-right:12px;cursor:pointer;
  transition:var(--ctec-t)}
input[type="file"]::file-selector-button:hover{border-color:var(--ctec-azul-300);
  color:var(--ctec-azul-300)}
input[type="file"]:focus-visible{outline:2px solid var(--ctec-chama-3);outline-offset:2px}