/* ============================================================
   CIUTEK 1 - VELVET NEXUS  |  ciutek-foundation.css
   Camada de fundacao e componentes proprios (prefixo .ctk-).
   Consome apenas tokens de ciutek-tokens.css.
   ============================================================ */

/* ---------- 1. Base ---------- */
html{ -webkit-text-size-adjust:100%; }

body.ctk-app{
  background:var(--ck-fundo);
  color:var(--ck-texto);
  font-family:var(--ck-fonte-texto);
  font-size:var(--ck-t-corpo);
  line-height:var(--ck-t-corpo-lh);
  font-weight:var(--ck-p-corpo);
  overflow-x:hidden;
}

.ctk-app h1,.ctk-app h2,.ctk-app h3,.ctk-app h4,.ctk-titulo{
  font-family:var(--ck-fonte-titulo);
  font-weight:var(--ck-p-titulo);
  color:var(--ck-texto);
}

/* ---------- 2. Foco visivel ---------- */
.ctk-app :focus-visible{
  outline:2px solid var(--ck-foco);
  outline-offset:2px;
  border-radius:var(--ck-r-int);
}
.ctk-app :focus:not(:focus-visible){ outline:none; }

/* ---------- 3. Escala tipografica ---------- */
.ctk-t-destaque{ font-family:var(--ck-fonte-titulo); font-size:var(--ck-t-destaque); line-height:var(--ck-t-destaque-lh); font-weight:var(--ck-p-destaque); }
.ctk-t-pagina  { font-family:var(--ck-fonte-titulo); font-size:var(--ck-t-pagina);   line-height:var(--ck-t-pagina-lh);   font-weight:var(--ck-p-titulo); }
.ctk-t-secao   { font-family:var(--ck-fonte-titulo); font-size:var(--ck-t-secao);    line-height:var(--ck-t-secao-lh);    font-weight:var(--ck-p-titulo); }
.ctk-t-cartao  { font-size:var(--ck-t-cartao);  line-height:var(--ck-t-cartao-lh);  font-weight:var(--ck-p-cartao); }
.ctk-t-corpo   { font-size:var(--ck-t-corpo);   line-height:var(--ck-t-corpo-lh);   font-weight:var(--ck-p-corpo); }
.ctk-t-apoio   { font-size:var(--ck-t-apoio);   line-height:var(--ck-t-apoio-lh);   color:var(--ck-texto-suave); }
.ctk-t-legenda { font-size:var(--ck-t-legenda); line-height:var(--ck-t-legenda-lh); font-weight:var(--ck-p-legenda); color:var(--ck-texto-fraco); }

/* ---------- 4. Area de toque minima ---------- */
.ctk-toque{ position:relative; }
.ctk-toque::after{
  content:''; position:absolute; left:50%; top:50%;
  width:max(100%,var(--ck-toque-min)); height:max(100%,var(--ck-toque-min));
  transform:translate(-50%,-50%);
}

/* ---------- 5. Superficies ---------- */
.ctk-cartao{
  background:var(--ck-superficie);
  border:1px solid var(--ck-borda);
  border-radius:var(--ck-r-cartao);
  padding:var(--ck-cartao-interno);
  box-shadow:var(--ck-sombra-2);
}
.ctk-painel{ background:var(--ck-superficie-2); border:1px solid var(--ck-borda); border-radius:var(--ck-r-painel); box-shadow:var(--ck-sombra-3); }

.ctk-vidro{
  background:var(--ck-vidro-fundo);
  border:1px solid var(--ck-vidro-borda);
  box-shadow:var(--ck-sombra-3);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ctk-vidro{
    -webkit-backdrop-filter:blur(var(--ck-vidro-padrao)) saturate(140%);
            backdrop-filter:blur(var(--ck-vidro-padrao)) saturate(140%);
  }
}

/* ---------- 6. Elevacao ---------- */
.ctk-elev-0{ box-shadow:var(--ck-sombra-0); }
.ctk-elev-1{ box-shadow:var(--ck-sombra-1); }
.ctk-elev-2{ box-shadow:var(--ck-sombra-2); }
.ctk-elev-3{ box-shadow:var(--ck-sombra-3); }
.ctk-elev-4{ box-shadow:var(--ck-sombra-4); }
.ctk-elev-5{ box-shadow:var(--ck-sombra-5); }

/* ============================================================
   7. Botoes
   Estados: normal, hover, foco, pressionado, carregando,
            sucesso, erro, desativado.
   ============================================================ */
.ctk-bt{
  --ctk-bt-h:var(--ck-bt-padrao);
  --ctk-bt-r:var(--ck-r-campo);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--ck-e-2);
  min-height:var(--ctk-bt-h);
  min-width:var(--ck-toque-min);
  padding:0 var(--ck-e-5);
  border:1px solid transparent;
  border-radius:var(--ctk-bt-r);
  font-family:var(--ck-fonte-texto);
  font-size:var(--ck-t-botao); line-height:var(--ck-t-botao-lh);
  font-weight:var(--ck-p-botao);
  cursor:pointer;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--ck-mov-rapido) var(--ck-curva),
             box-shadow var(--ck-mov-rapido) var(--ck-curva),
             background-color var(--ck-mov-rapido) var(--ck-curva),
             border-color var(--ck-mov-rapido) var(--ck-curva);
}
.ctk-bt--compacto { --ctk-bt-h:var(--ck-bt-compacto);  --ctk-bt-r:10px; padding:0 var(--ck-e-4); }
.ctk-bt--principal{ --ctk-bt-h:var(--ck-bt-principal); --ctk-bt-r:14px; padding:0 var(--ck-e-6); font-size:var(--ck-t-cartao); }
.ctk-bt--largo    { width:100%; }

/* --- variante primaria, com profundidade --- */
.ctk-bt--primario{
  color:var(--ck-sobre-primaria);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(168deg, var(--ck-roxo-400) 0%, var(--ck-roxo-500) 42%, var(--ck-roxo-700) 100%);
  border-top-color:rgba(255,255,255,.34);
  border-bottom-color:rgba(0,0,0,.28);
  box-shadow:0 2px 0 rgba(0,0,0,.22), 0 6px 16px rgba(101,40,212,.34);
}
.ctk-bt--primario:hover{
  transform:translateY(calc(-1px * var(--ck-mov-fator,1)));
  box-shadow:0 3px 0 rgba(0,0,0,.22), 0 10px 22px rgba(101,40,212,.42);
}
.ctk-bt--primario:active{
  transform:translateY(calc(1px * var(--ck-mov-fator,1)));
  box-shadow:0 1px 0 rgba(0,0,0,.22), 0 4px 10px rgba(101,40,212,.28);
}

/* --- variante secundaria --- */
.ctk-bt--secundario{
  color:var(--ck-texto);
  background:var(--ck-superficie-2);
  border-color:var(--ck-borda-forte);
}
.ctk-bt--secundario:hover{ background:var(--ck-superficie-3); }
.ctk-bt--secundario:active{ transform:translateY(calc(1px * var(--ck-mov-fator,1))); }

/* --- variante discreta --- */
.ctk-bt--discreto{ color:var(--ck-texto-suave); background:transparent; }
.ctk-bt--discreto:hover{ background:var(--ck-superficie-2); color:var(--ck-texto); }

/* --- estados --- */
.ctk-bt[disabled],.ctk-bt[aria-disabled="true"],.ctk-bt--desativado{
  opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:var(--ck-sombra-0) !important;
}

.ctk-bt[data-ctk-state="carregando"]{ cursor:progress; pointer-events:none; }
.ctk-bt[data-ctk-state="carregando"] .ctk-bt__texto{ visibility:hidden; }
.ctk-bt[data-ctk-state="carregando"]::after{
  content:''; position:absolute; width:18px; height:18px;
  border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:ctk-girar 720ms linear infinite;
}
@keyframes ctk-girar{ to{ transform:rotate(360deg); } }

.ctk-bt[data-ctk-state="sucesso"]{ background:var(--ck-sucesso); color:var(--ck-sobre-sucesso); border-color:transparent; box-shadow:var(--ck-sombra-1); }
.ctk-bt[data-ctk-state="erro"]   { background:var(--ck-erro);   color:var(--ck-sobre-erro);   border-color:transparent; box-shadow:var(--ck-sombra-1); }

/* o texto guarda a propria largura para o botao nao encolher ao carregar */
.ctk-bt__texto{ display:inline-block; }

/* ============================================================
   8. Campos de formulario
   ============================================================ */
.ctk-campo{ display:flex; flex-direction:column; gap:var(--ck-e-2); }
.ctk-campo__rotulo{ font-size:var(--ck-t-apoio); font-weight:var(--ck-p-cartao); color:var(--ck-texto); }
.ctk-campo__obrigatorio{ color:var(--ck-erro); margin-left:2px; }
.ctk-campo__ajuda{ font-size:var(--ck-t-legenda); color:var(--ck-texto-fraco); }
.ctk-campo__contador{ font-size:var(--ck-t-legenda); color:var(--ck-texto-fraco); align-self:flex-end; }

.ctk-entrada{
  width:100%;
  min-height:var(--ck-campo-altura);
  padding:0 var(--ck-e-4);
  background:var(--ck-superficie-2);
  color:var(--ck-texto);
  border:1px solid var(--ck-borda);
  border-radius:var(--ck-r-campo);
  font-family:var(--ck-fonte-texto);
  font-size:var(--ck-t-corpo);
  transition:border-color var(--ck-mov-rapido) var(--ck-curva),
             background-color var(--ck-mov-rapido) var(--ck-curva);
}
textarea.ctk-entrada{ min-height:var(--ck-campo-longo-min); padding:var(--ck-e-3) var(--ck-e-4); line-height:var(--ck-t-corpo-lh); resize:vertical; }
.ctk-entrada::placeholder{ color:var(--ck-texto-fraco); }
.ctk-entrada:hover{ border-color:var(--ck-borda-forte); }
.ctk-entrada:focus{ outline:none; border-color:var(--ck-foco); box-shadow:0 0 0 2px color-mix(in srgb, var(--ck-foco) 34%, transparent); }
.ctk-entrada[aria-invalid="true"]{ border-color:var(--ck-erro); }
.ctk-entrada[data-ctk-state="sucesso"]{ border-color:var(--ck-sucesso); }
.ctk-entrada[disabled]{ opacity:.55; cursor:not-allowed; }

.ctk-campo__erro{ font-size:var(--ck-t-legenda); color:var(--ck-erro); }
.ctk-campo__sucesso{ font-size:var(--ck-t-legenda); color:var(--ck-sucesso); }

/* ============================================================
   9. Carregamento (esqueletos)
   ============================================================ */
.ctk-esqueleto{
  position:relative; overflow:hidden;
  background:var(--ck-esqueleto-a);
  border-radius:var(--ck-r-int);
}
.ctk-esqueleto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, var(--ck-esqueleto-b) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:ctk-brilho 1200ms var(--ck-curva) infinite;
}
@keyframes ctk-brilho{ to{ transform:translateX(100%); } }
.ctk-esqueleto--texto{ height:12px; margin:6px 0; }
.ctk-esqueleto--titulo{ height:18px; margin:8px 0; width:52%; }
.ctk-esqueleto--avatar{ width:var(--ck-av-4); height:var(--ck-av-4); border-radius:var(--ck-r-capsula); }
.ctk-esqueleto--midia{ width:100%; aspect-ratio:4/5; border-radius:var(--ck-r-cartao); }

/* reserva de espaco: a estrutura nao salta quando a imagem chega */
.ctk-midia{ display:block; width:100%; height:auto; background:var(--ck-superficie-2); }
.ctk-midia--capa{ object-fit:cover; }
.ctk-midia--inteira{ object-fit:contain; }

/* ============================================================
   10. Utilidades controladas
   ============================================================ */
.ctk-oculto-visual{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.ctk-rolagem-h{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.ctk-sem-quebra{ white-space:nowrap; }
.ctk-uma-linha{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctk-duas-linhas{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* areas seguras */
.ctk-seguro-baixo{ padding-bottom:calc(var(--ck-e-4) + var(--ck-seguro-baixo)); }
.ctk-seguro-topo{ padding-top:calc(var(--ck-e-4) + var(--ck-seguro-topo)); }