/* ==========================================================================
   KINOVA — Telas do sistema (login, painel, área do cliente)
   Usa as mesmas cores e fontes do site, definidas em style.css
   ========================================================================== */

body.app{
  background:var(--bg);
  min-height:100svh;
  display:flex; flex-direction:column;
}

/* ==========================================================================
   AVISOS
   ========================================================================== */
.aviso{
  display:none;
  padding:14px 18px; margin-bottom:20px;
  font-size:.88rem; line-height:1.5;
  border-left:3px solid var(--acento);
  background:rgba(143,180,196,.10); color:var(--texto);
}
.aviso.is-on{ display:block; }
.aviso--erro{ border-left-color:#E06B5E; background:rgba(224,107,94,.10); }
.aviso--ok{ border-left-color:#5FBF8A; background:rgba(95,191,138,.10); }

/* ==========================================================================
   LOGIN
   ========================================================================== */
.entrada{
  flex:1; display:grid; place-items:center; padding:40px 20px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(46,66,80,.35), transparent 70%),
    var(--bg);
  position:relative; overflow:hidden;
}
.entrada__mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  height:min(80vh,600px); opacity:.04; pointer-events:none;
}
.entrada__caixa{
  position:relative; z-index:2;
  width:100%; max-width:420px;
  padding:44px 38px;
  background:rgba(16,26,31,.82);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
          backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--linha);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 60px rgba(0,0,0,.5);
}
.entrada__logo{ height:28px; width:auto; margin-bottom:32px; }
.entrada__titulo{
  font-family:var(--f-display); font-weight:900; font-size:1.5rem;
  text-transform:uppercase; letter-spacing:-.02em; color:var(--branco);
  margin-bottom:6px;
}
.entrada__sub{ font-size:.88rem; color:var(--mudo); margin-bottom:30px; }
.entrada__rodape{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--linha-2);
  font-size:.82rem; color:var(--mudo); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.entrada__rodape a{ color:var(--acento); }
.entrada__rodape a:hover{ color:var(--acento-2); }
.entrada__voltar{ display:block; text-align:center; margin-top:22px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mudo); }
.entrada__voltar:hover{ color:var(--branco); }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.campo{ margin-bottom:18px; }
.campo label{
  display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mudo); margin-bottom:8px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 15px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--linha);
  color:var(--branco); font-family:var(--f-texto); font-size:.94rem; font-weight:400;
  transition:border-color .3s, background .3s;
}
.campo textarea{ min-height:90px; resize:vertical; line-height:1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--acento); background:rgba(255,255,255,.07);
}
.campo input::placeholder, .campo textarea::placeholder{ color:#5C6B75; }
.campo select option{ background:var(--bg-2); color:var(--branco); }
.campo__dica{ font-size:.76rem; color:var(--mudo); margin-top:6px; line-height:1.5; }

.linha-campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.btn--bloco{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ==========================================================================
   CABEÇALHO DO SISTEMA
   ========================================================================== */
.topo{
  border-bottom:1px solid var(--linha-2);
  background:var(--bg-2);
  padding:16px 0;
}
.topo__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topo__esq{ display:flex; align-items:center; gap:20px; }
.topo__logo img{ height:26px; width:auto; display:block; }
.topo__quem{ font-size:.8rem; color:var(--mudo); }
.topo__quem strong{ color:var(--branco); font-weight:500; }
.selo{
  display:inline-block; margin-left:8px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--acento); color:var(--acento);
}
.topo__acoes{ display:flex; align-items:center; gap:8px; }
.link-topo{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mudo); padding:9px 14px; border:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.link-topo:hover{ color:var(--branco); border-color:var(--linha); }

/* ==========================================================================
   ABAS
   ========================================================================== */
.abas{ display:flex; gap:2px; border-bottom:1px solid var(--linha-2); margin-bottom:36px; flex-wrap:wrap; }
.aba{
  padding:14px 22px; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mudo); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .3s, border-color .3s;
}
.aba:hover{ color:var(--branco); }
.aba.is-on{ color:var(--branco); border-bottom-color:var(--acento); }

/* ==========================================================================
   CORPO
   ========================================================================== */
.corpo{ flex:1; padding:40px 0 90px; }

.secao-topo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:26px; flex-wrap:wrap;
}
.secao-titulo{
  font-family:var(--f-display); font-weight:900; font-size:1.6rem;
  text-transform:uppercase; letter-spacing:-.02em; color:var(--branco);
}
.secao-sub{ font-size:.86rem; color:var(--mudo); margin-top:6px; }

.painel-grid{ display:grid; grid-template-columns:400px 1fr; gap:40px; align-items:start; }

.cartao{
  background:var(--bg-2); border:1px solid var(--linha-2); padding:28px 26px;
}
.cartao__titulo{
  font-family:var(--f-display); font-weight:800; font-size:1rem;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--branco);
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--linha-2);
}

/* ==========================================================================
   LISTAS
   ========================================================================== */
.lista{ border-top:1px solid var(--linha-2); }
.item{
  display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--linha-2);
}
.item--simples{ grid-template-columns:1fr auto; }
.item__capa{
  width:64px; aspect-ratio:2/3; object-fit:cover;
  background:var(--petroleo); border:1px solid var(--linha-2);
}
.item__nome{
  font-family:var(--f-display); font-weight:700; font-size:.98rem;
  color:var(--branco); letter-spacing:-.01em; line-height:1.25;
}
.item__meta{ font-size:.78rem; color:var(--mudo); margin-top:4px; }
.item__acoes{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.mini{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--linha); color:var(--mudo);
  transition:all .3s var(--ease); background:none; cursor:pointer;
}
.mini:hover{ color:var(--branco); border-color:rgba(255,255,255,.4); }
.mini--perigo:hover{ color:#E06B5E; border-color:#E06B5E; }
.mini--forte{ color:var(--bg); background:var(--branco); border-color:var(--branco); font-weight:600; }
.mini--forte:hover{ background:var(--acento-2); border-color:var(--acento-2); color:var(--bg); }

.etiqueta{
  display:inline-block; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border:1px solid var(--linha); color:var(--mudo);
}
.etiqueta--ok{ border-color:#5FBF8A; color:#5FBF8A; }
.etiqueta--espera{ border-color:var(--acento); color:var(--acento); }
.etiqueta--rascunho{ border-color:#8A6A3C; color:#C9975A; }

.vazio{
  padding:44px 24px; text-align:center;
  border:1px dashed var(--linha); color:var(--mudo); font-size:.9rem;
}
.carregando{ padding:34px 0; color:var(--mudo); font-size:.86rem; }

/* ==========================================================================
   ÁREA DO CLIENTE
   ========================================================================== */
.projeto-capa{
  padding:56px 0 44px; border-bottom:1px solid var(--linha-2);
  background:
    radial-gradient(800px 380px at 20% 0%, rgba(46,66,80,.35), transparent 70%),
    var(--bg-2);
}
.projeto-capa__status{ margin-bottom:16px; }
.projeto-capa__titulo{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(1.7rem,4vw,3rem); line-height:1;
  text-transform:uppercase; letter-spacing:-.03em; color:var(--branco);
}
.projeto-capa__desc{ margin-top:16px; max-width:60ch; color:var(--mudo); font-size:.98rem; }

.entregas{ display:grid; gap:44px; margin-top:44px; }
.entrega__cabeca{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:16px; flex-wrap:wrap;
}
.entrega__titulo{
  font-family:var(--f-display); font-weight:800; font-size:1.15rem;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--branco);
}
.entrega__obs{ font-size:.86rem; color:var(--mudo); margin-top:6px; max-width:70ch; }
.entrega__player{
  width:100%; aspect-ratio:16/9; border:1px solid var(--linha-2);
  background:var(--petroleo);
}
.entrega__player iframe{ width:100%; height:100%; border:0; display:block; }

.baixar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; border:1px solid var(--linha-2); background:var(--bg-2);
  transition:border-color .3s, background .3s;
}
.baixar:hover{ border-color:var(--acento); background:#16232A; }
.baixar__seta{ color:var(--acento); font-size:1.2rem; }

/* ==========================================================================
   MODAL DE CONFIRMAÇÃO
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:24px;
  background:rgba(6,10,12,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.modal.is-on{ display:grid; }
.modal__caixa{
  width:100%; max-width:420px; padding:34px 30px;
  background:var(--bg-2); border:1px solid var(--linha);
}
.modal__titulo{
  font-family:var(--f-display); font-weight:800; font-size:1.1rem;
  text-transform:uppercase; color:var(--branco); margin-bottom:12px;
}
.modal__texto{ font-size:.9rem; color:var(--mudo); margin-bottom:24px; }
.modal__acoes{ display:flex; gap:10px; justify-content:flex-end; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:900px){
  .painel-grid{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:768px){
  .entrada__caixa{ padding:34px 24px; }
  .linha-campos{ grid-template-columns:1fr; gap:0; }

  .topo__inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .topo__esq{ width:100%; justify-content:space-between; }
  .topo__acoes{ width:100%; }
  .link-topo{ padding:9px 10px; }

  .item{ grid-template-columns:52px 1fr; row-gap:12px; }
  .item--simples{ grid-template-columns:1fr; }
  .item__capa{ width:52px; }
  .item__acoes{ grid-column:1/-1; justify-content:flex-start; }

  .baixar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .secao-topo{ flex-direction:column; align-items:flex-start; }

  /* ---- Legibilidade e toque no celular ---- */
  .etiqueta        { font-size:.7rem; padding:5px 11px; }
  .campo label     { font-size:.72rem; }
  .campo__dica     { font-size:.8rem; }
  .mini            { padding:11px 14px; font-size:.7rem; }
  .aba             { padding:16px 18px; font-size:.76rem; }
  .link-topo       { padding:12px 12px; font-size:.76rem; }
  .contact-row__label { font-size:.72rem; }

  /* campos com 16px evitam o zoom automático do iPhone ao tocar */
  .campo input,
  .campo select,
  .campo textarea  { font-size:16px; }
}