/* ============================================================
   CANTIERI — Páginas da plataforma (Início, Projetos, Fornecedores,
   Configurações, Ajuda, Assinatura). Estilo painel de SaaS.
============================================================ */

/* ---- cabeçalho de página ---- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px;}
.page-title{font-family:var(--display);font-size:26px;font-weight:700;margin:0;color:var(--text);
  letter-spacing:-.02em;text-wrap:balance;}
.page-sub{margin:6px 0 0;font-size:14px;color:var(--text-faint);max-width:65ch;}

.sec-title{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;color:var(--text-faint);margin:0 0 14px;}

/* entrada em cascata dos grids (o conteúdo chega em sequência, não pisca) */
@media (prefers-reduced-motion: no-preference){
  .proj-grid>*,.inicio-atalhos>*,.recentes-grid>*,.forn-grid>*,.planos-grid>*{
    animation:riseIn .5s var(--ease) both;}
  .proj-grid>*:nth-child(2),.inicio-atalhos>*:nth-child(2),.recentes-grid>*:nth-child(2),
  .forn-grid>*:nth-child(2),.planos-grid>*:nth-child(2){animation-delay:.06s;}
  .proj-grid>*:nth-child(3),.inicio-atalhos>*:nth-child(3),.recentes-grid>*:nth-child(3),
  .forn-grid>*:nth-child(3){animation-delay:.12s;}
  .proj-grid>*:nth-child(4),.inicio-atalhos>*:nth-child(4),.recentes-grid>*:nth-child(4),
  .forn-grid>*:nth-child(4){animation-delay:.18s;}
  .proj-grid>*:nth-child(5),.inicio-atalhos>*:nth-child(5){animation-delay:.24s;}
  .proj-grid>*:nth-child(n+6),.inicio-atalhos>*:nth-child(n+6){animation-delay:.3s;}
  @keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sec-head .sec-title{margin:0;}
.sec-link{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:var(--sans);}

/* ---- estado vazio ---- */
.empty-state{max-width:440px;margin:48px auto;text-align:center;}
.empty-ico{width:56px;height:56px;margin:0 auto 16px;color:var(--text-faint);opacity:.6;}
.empty-ico svg{width:100%;height:100%;}
.empty-state h3{font-size:18px;color:var(--text);margin:0 0 8px;}
.empty-state p{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0 0 20px;}

/* ============ PROJETOS ============ */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.proj-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.proj-card:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-pop);}
.proj-thumb-wrap{position:relative;aspect-ratio:4/3;background:var(--surface-2);cursor:pointer;overflow:hidden;}
.proj-thumb{width:100%;height:100%;object-fit:cover;display:block;}
.proj-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--text-faint);opacity:.4;}
.proj-thumb-empty svg{width:44px;height:44px;}
.proj-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;
  font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:20px;backdrop-filter:blur(4px);}
.proj-info{padding:13px 14px;display:flex;flex-direction:column;gap:3px;}
.proj-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.proj-date{font-size:11.5px;color:var(--text-faint);}
.proj-actions-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
.proj-open{flex:1;background:var(--accent);color:var(--ink);border:none;border-radius:8px;
  padding:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
.proj-open:hover{background:var(--accent-2);}
.proj-menu-wrap{position:relative;}
.proj-menu-btn{width:34px;height:34px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-dim);cursor:pointer;font-size:16px;line-height:1;}
.proj-menu-btn:hover{border-color:var(--accent-line);}
.proj-menu{position:absolute;right:0;bottom:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:none;flex-direction:column;min-width:140px;overflow:hidden;z-index:20;}
.proj-menu.open{display:flex;}
.proj-mi{background:none;border:none;text-align:left;padding:10px 14px;font-size:13px;color:var(--text);
  cursor:pointer;font-family:var(--sans);}
.proj-mi:hover{background:var(--surface-2);}
.proj-mi.danger{color:#e05252;}

/* ============ INÍCIO ============ */
.inicio-sec{margin-bottom:34px;}
.inicio-atalhos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.atalho-card{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:13px;padding:16px;cursor:pointer;font-family:var(--sans);
  box-shadow:var(--shadow-card);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.atalho-card:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-pop);}
.atalho-card:active{transform:scale(.98);}
.atalho-ico{width:42px;height:42px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.atalho-ico svg{width:22px;height:22px;}
.atalho-nome{font-size:14.5px;font-weight:600;color:var(--text);}
.atalho-desc{font-size:12px;color:var(--text-faint);line-height:1.4;margin-top:2px;}
.inicio-empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;
  padding:24px;text-align:center;color:var(--text-faint);font-size:13.5px;}
.recentes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.rec-card{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:.14s;font-family:var(--sans);}
.rec-card:hover{border-color:var(--accent-line);transform:translateY(-2px);}
.rec-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2);}
.rec-thumb-empty{background:var(--surface-2);}
.rec-info{padding:11px 13px;}
.rec-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rec-tool{font-size:11.5px;color:var(--text-faint);margin-top:2px;}

/* ============ FORNECEDORES ============ */
.forn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.forn-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px;
  display:flex;flex-direction:column;gap:10px;}
.forn-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.forn-nome{font-size:15.5px;font-weight:600;color:var(--text);}
.forn-tipo{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.forn-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);}
.forn-row svg{width:15px;height:15px;flex-shrink:0;color:var(--text-faint);}
.forn-obs{font-size:12.5px;color:var(--text-faint);line-height:1.5;border-top:1px solid var(--line-soft);
  padding-top:10px;white-space:pre-wrap;}
.forn-actions{display:flex;gap:8px;margin-top:2px;}
.forn-actions .proj-mi{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:12.5px;}

/* ============ CONFIGURAÇÕES ============ */
.config-form{max-width:720px;}
.config-sec{margin-bottom:30px;}
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.config-field{display:flex;flex-direction:column;gap:6px;}
.cfg-inp{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  font-size:14px;color:var(--text);font-family:var(--sans);width:100%;box-sizing:border-box;}
.cfg-inp:focus{outline:none;border-color:var(--accent);}
.cfg-logo-row{display:flex;align-items:center;gap:14px;}
.cfg-logo-preview{width:88px;height:52px;border:1px solid var(--line);border-radius:9px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.cfg-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;}
.cfg-logo-ph{font-size:11px;color:var(--text-faint);}
.config-actions{margin-top:8px;}

/* ============ AJUDA ============ */
.ajuda-sec{margin-bottom:32px;max-width:820px;}
.faq-list{display:flex;flex-direction:column;gap:8px;}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:none;padding:15px 18px;font-size:14px;font-weight:500;color:var(--text);
  cursor:pointer;text-align:left;font-family:var(--sans);}
.faq-chev{color:var(--text-faint);transition:.2s;flex-shrink:0;}
.faq-item.open .faq-chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease;padding:0 18px;
  font-size:13.5px;color:var(--text-dim);line-height:1.6;}
.faq-item.open .faq-a{max-height:240px;padding:0 18px 16px;}
.comousar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.comousar-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;}
.cu-nome{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:6px;}
.cu-desc{font-size:13px;color:var(--text-dim);line-height:1.55;}
.tut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.tut-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.tut-thumb{aspect-ratio:16/9;background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);opacity:.5;}
.tut-thumb svg{width:38px;height:38px;}
.tut-t{padding:12px 14px 4px;font-size:13.5px;font-weight:600;color:var(--text);}
.tut-soon{padding:0 14px 13px;font-size:11px;color:var(--text-faint);}

/* ============ ASSINATURA ============ */
.assina-hero{text-align:center;padding:8px 0 30px;}
.assina-title{font-family:var(--display);font-size:38px;font-weight:700;margin:0;
  color:var(--text);letter-spacing:-.02em;}
.assina-sub{margin:10px 0 0;font-size:15px;color:var(--text-dim);}
/* toggle mensal/anual */
.bill-seg{display:inline-flex;align-items:center;gap:3px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:3px;margin-top:20px;}
.bill-seg button{border:none;background:none;color:var(--text-dim);font-family:var(--sans);
  font-size:12.5px;padding:8px 20px;border-radius:8px;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.bill-seg button.on{background:var(--accent);color:var(--ink);font-weight:600;}
.bill-save{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);padding:0 12px 0 8px;}
/* grid assimétrico: o Pro é maior de propósito */
.planos-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start;
  max-width:820px;margin:0 auto;}
@media (max-width:640px){.planos-grid{grid-template-columns:1fr;}}
.plano-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:28px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);}
.plano-card.destaque{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-accent);
  overflow:hidden;}
/* spotlight: um realce quente segue o cursor dentro do card Pro (hierarquia) */
.plano-card.destaque::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 70%);
  transition:opacity .35s var(--ease);}
@media (prefers-reduced-motion: no-preference){
  .plano-card.destaque:hover::before{opacity:1;}
}
.plano-nome{font-family:var(--display);}
.pl-valor{font-family:var(--display);display:inline-block;}
/* pop do preço ao trocar mensal/anual (feedback da mudança) */
@media (prefers-reduced-motion: no-preference){
  .pl-valor.pop{animation:pricePop .35s var(--ease);}
  @keyframes pricePop{0%{transform:scale(.9);}60%{transform:scale(1.05);}100%{transform:none;}}
}
.plano-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);
  color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:20px;}
.plano-nome{font-size:17px;font-weight:700;color:var(--text);}
.plano-preco{margin:10px 0 20px;}
.pl-valor{font-size:32px;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.pl-periodo{font-size:13px;color:var(--text-faint);}
.pl-recursos{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px;flex:1;}
.pl-recursos li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text);line-height:1.4;}
.pl-recursos li.off{color:var(--text-faint);}
.pl-ic{width:17px;height:17px;flex-shrink:0;margin-top:1px;}
.pl-ic.on{color:var(--accent);}
.pl-ic.off{color:var(--text-faint);opacity:.6;}
.pl-cta{width:100%;justify-content:center;padding:12px;}
.pl-cta:disabled{opacity:.5;cursor:default;}
.assina-nota{text-align:center;color:var(--text-faint);font-size:12px;margin-top:24px;}

/* ---- modal grande (fornecedor) + confirmação ---- */
.modal-box.modal-lg{max-width:560px;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.modal-field{display:flex;flex-direction:column;gap:5px;}
.modal-field.modal-full{grid-column:1 / -1;}
.modal-area{resize:vertical;min-height:64px;font-family:var(--sans);}
.modal-msg{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0 0 4px;}
.btn-danger{background:#d64545;}
.btn-danger:hover{background:#c23a3a;}

@media (max-width:620px){
  .config-grid,.modal-grid{grid-template-columns:1fr;}
}