/* =========================================================
   Agência Pilar — identidade aplicada ao sistema
   Cores do manual: off-white #F4F2EC · preto #222222 · petróleo #153B45
   azul #1F95FF · laranja #FF730B. Tipografia: Articulat CF (quando
   instalada no computador ou carregada no servidor), com Instrument Sans
   como alternativa gratuita bem próxima.
   ========================================================= */
:root{
  --petrol:#153B45;--orange:#FF730B;--blue:#1F95FF;--offwhite:#F4F2EC;--black:#222222;
  --brand:#153B45;
  --bg:#F4F2EC;--surface:#FFFFFF;--surface-2:#EFECE4;--surface-3:#E4E0D6;
  --ink:#222222;--ink-2:#565C5F;--ink-3:#8B8F90;
  --line:#E4E0D6;--line-2:#CFCAC0;
  --accent:var(--brand);--accent-ink:#FFFFFF;
  --accent-soft:color-mix(in oklab,var(--accent) 9%,var(--surface));
  --accent-line:color-mix(in oklab,var(--accent) 30%,var(--surface));
  --pop:#C4550A;--pop-soft:#FFE9D9;
  --info:#1570C9;--info-soft:#DDEEFF;
  --ok:#0F7F5C;--ok-soft:#DCF2E9;--warn:#9A6400;--warn-soft:#FBEFD5;--bad:#C2304B;--bad-soft:#FBE2E7;
  --side-bg:#153B45;--side-ink:#F4F2EC;
  --display:'Articulat CF','Instrument Sans','Helvetica Neue','Segoe UI',system-ui,sans-serif;
  --body:'Articulat CF','Instrument Sans','Helvetica Neue','Segoe UI',system-ui,sans-serif;
  --shadow-1:0 1px 2px rgba(21,59,69,.07),0 1px 1px rgba(21,59,69,.03);
  --shadow-2:0 12px 32px rgba(21,59,69,.13);
  --shadow-3:0 28px 72px rgba(10,30,36,.32);
  --scrim:rgba(10,30,36,.48);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C2026;--surface:#11303A;--surface-2:#163C47;--surface-3:#1C4855;
  --ink:#F4F2EC;--ink-2:#B4C2C5;--ink-3:#7E9499;--line:#1E4450;--line-2:#2A5562;
  --accent:#FF8A33;--accent-ink:#1E1206;
  --accent-soft:color-mix(in oklab,#FF8A33 16%,var(--surface));--accent-line:color-mix(in oklab,#FF8A33 40%,var(--surface));
  --pop:#FF9A52;--pop-soft:#3D2614;--info:#6CB8FF;--info-soft:#15334B;
  --ok:#4FCB9F;--ok-soft:#133A30;--warn:#E8B451;--warn-soft:#3A2F18;--bad:#F27189;--bad-soft:#42202A;
  --side-bg:#0A1B20;--scrim:rgba(2,10,12,.66);color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0C2026;--surface:#11303A;--surface-2:#163C47;--surface-3:#1C4855;
  --ink:#F4F2EC;--ink-2:#B4C2C5;--ink-3:#7E9499;--line:#1E4450;--line-2:#2A5562;
  --accent:#FF8A33;--accent-ink:#1E1206;
  --accent-soft:color-mix(in oklab,#FF8A33 16%,var(--surface));--accent-line:color-mix(in oklab,#FF8A33 40%,var(--surface));
  --pop:#FF9A52;--pop-soft:#3D2614;--info:#6CB8FF;--info-soft:#15334B;
  --ok:#4FCB9F;--ok-soft:#133A30;--warn:#E8B451;--warn-soft:#3A2F18;--bad:#F27189;--bad-soft:#42202A;
  --side-bg:#0A1B20;--scrim:rgba(2,10,12,.66);color-scheme:dark;}

h1,.hello{font-weight:700;letter-spacing:-.02em}
h2,h3{font-weight:650}

/* ---------- menu lateral em petróleo ---------- */
.side{background:var(--side-bg);border-right:0;color:var(--side-ink)}
.side .nav-label{color:rgba(244,242,236,.5)}
.side .nav a{color:rgba(244,242,236,.78)}
.side .nav a svg{color:rgba(244,242,236,.62)}
.side .nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.side .nav a[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.side .nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
.side .nav a[aria-current="page"] svg{color:var(--orange)}
.side .nav .sub-nav{border-left-color:rgba(255,255,255,.12);max-height:min(46vh,460px);overflow-y:auto;scrollbar-width:thin}
.side .nav .sub-nav a{font-size:13.5px;gap:8px}
.side .nav .sub-nav a[aria-current="page"]::before{display:none}
.side .nav .sub-nav .dot{width:7px;height:7px}
.side .nav .badge{background:rgba(255,255,255,.12);color:#fff}
.side .nav .badge.bad{background:#C2304B;color:#fff}
.side .nav .badge.acc{background:var(--orange);color:#1E1206}
.side .nav a .lk{color:rgba(244,242,236,.45)}
.side .nav-label .btn{color:rgba(244,242,236,.7)}
.side .nav-label .btn:hover{background:rgba(255,255,255,.08);color:#fff}
.side-foot{border-top-color:rgba(255,255,255,.1)}
.side .me:hover{background:rgba(255,255,255,.06)}
.side .me .who b{color:#fff}
.side .me .who span{color:rgba(244,242,236,.6)}
.side .me > svg{color:rgba(244,242,236,.55)}
.side .avatars .avatar,.side .avatar{box-shadow:0 0 0 2px var(--side-bg)}
.brand-art{display:flex;flex-direction:column;gap:6px;padding:4px 2px 2px}
.brand-art .pilar-logo{height:30px;width:auto;display:block}
.brand-art > span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,242,236,.55);font-weight:600}
.logo{background:var(--petrol)}
.logo .logo-sym{width:58%;height:auto}
.mobile-top .logo{width:30px;height:30px;border-radius:9px}

/* botões e destaques com a marca */
.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.pop{background:var(--orange);border-color:var(--orange);color:#1E1206}
.chip.pop{background:var(--pop-soft);color:var(--pop)}
.summary a{border-bottom-color:color-mix(in oklab,var(--orange) 35%,transparent)}
.summary a:hover{border-color:var(--orange)}
.cal .day.is-today .dn{background:var(--orange);color:#1E1206}
.tabs [aria-selected="true"]{color:var(--ink);border-bottom-color:var(--orange)}
.seg button[aria-pressed="true"]{color:var(--ink)}
.proto-bar{border-color:color-mix(in oklab,var(--orange) 45%,var(--line-2))}

/* avatares com foto e de cliente */
.avatar.has-photo{background:var(--surface-3);overflow:hidden;padding:0}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sq{border-radius:28%}
.photo-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.photo-prev{width:64px;height:64px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-3);overflow:hidden;flex:none;border:1px solid var(--line)}
.photo-prev.sq{border-radius:18px}
.photo-prev img{width:100%;height:100%;object-fit:cover}
.photo-prev svg{width:26px;height:26px}

/* links do Canva e do Drive */
.link-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);padding:2px 2px 2px 10px;min-width:0}
.link-chip a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px;min-width:0;padding:4px 4px 4px 0}
.link-chip a:hover{color:var(--accent)}
.link-chip svg{width:16px;height:16px;flex:none}
.link-chip.lc-canva svg{color:#7D2AE8}
.link-chip.lc-docs svg,.link-chip.lc-slides svg{color:#1A73E8}
.link-chip.lc-sheets svg{color:#188038}
.link-chip.lc-drive svg,.link-chip.lc-folder svg{color:#F4B400}
.embed-frame{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- entrada ---------- */
.login{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:var(--petrol)}
.login-art{background:var(--petrol);color:var(--offwhite);padding:52px clamp(28px,5vw,72px);justify-content:space-between;gap:40px;isolation:isolate}
.login-art .rings{display:none}
.login-art .la-lines{position:absolute;inset:0;z-index:-1;opacity:.95}
.login-art .la-lines svg{width:100%;height:100%;display:block}
.login-art .la-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.login-art .la-top .pilar-logo{height:46px;width:auto}
.login-art .la-tag{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--orange);text-transform:uppercase}
.login-art .la-mid{max-width:600px}
.login-art h1{font-size:clamp(38px,4.6vw,64px);line-height:1.02;font-weight:700;letter-spacing:-.03em;margin:18px 0 0;max-width:13ch;color:var(--offwhite)}
.login-art h1 em{font-style:normal;color:var(--orange)}
.login-art p{font-size:17px;line-height:1.55;color:rgba(244,242,236,.78);max-width:42ch;margin-top:18px;opacity:1}
.login-art .la-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.login-art .la-foot small{font-size:13px;color:rgba(244,242,236,.6)}
.login-art .la-element{width:92px;height:auto;flex:none}
.login-art .la-element svg{width:100%;height:auto;display:block}
.login-panel{background:var(--offwhite);color:var(--black);position:relative;max-width:none;padding:52px clamp(22px,5vw,72px);overflow:hidden}
.login-panel > *{position:relative;max-width:620px}
.login-panel .lp-corner{position:absolute;right:-1px;top:-1px;width:150px;max-width:none;pointer-events:none;opacity:.95}
.login-panel .lp-corner svg{width:100%;height:auto;display:block}
.login-panel h2{font-size:30px;font-weight:700;color:var(--petrol)}
.login-panel .muted{color:#565C5F}
.login-panel .seg{background:#E7E3DA}
.login-panel .seg button{color:#565C5F}
.login-panel .seg button[aria-pressed="true"]{background:#fff;color:var(--petrol)}
.login-panel .pick{background:#fff;border-color:#E2DED4;color:var(--black)}
.login-panel .pick:hover{border-color:var(--orange);box-shadow:0 6px 18px rgba(21,59,69,.08)}
.login-panel .pick .who span{color:#7A7F80}
.login-panel .small.faint{color:#7A7F80}
.login-panel .chip.acc{background:#E1ECEE;color:var(--petrol)}
.login-panel .chip.info{background:#DDEEFF;color:#1570C9}
.login-panel .box{background:#fff;border-color:#E2DED4}
@media (max-width:860px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login-art .la-lines{opacity:.4}
  .login-art{min-height:auto;padding:28px 22px 34px;gap:26px}
  .login-art .la-top .pilar-logo{height:36px}
  .login-art h1{font-size:36px}
  .login-art .la-foot{display:none}
  .login-panel{padding:28px 18px 44px}
  .login-panel .lp-corner{width:96px}
}

/* tela de bloqueio com a marca */
.gate-card .ico{background:var(--petrol);color:var(--orange)}

/* bloco "Entregas do mês": sempre petróleo com barra laranja, nos dois temas */
.cli-prog{--accent:#153B45;--accent-ink:#F4F2EC;--pop:#FF730B;border:1px solid color-mix(in oklab,#F4F2EC 10%,transparent)}
.cli-prog .chip{background:rgba(244,242,236,.14);color:#F4F2EC}
.cli-prog .chip.ok{background:rgba(79,203,159,.22);color:#BFF0DD}
.cli-prog .chip.bad{background:rgba(242,113,137,.24);color:#FFD3DC}

/* modo publicado: entrada por e-mail e situação do salvamento */
.cl-form{max-width:420px}
.cl-form .btn{padding:11px 14px}
.cl-form h3{font-size:18px;color:var(--petrol)}
.cl-msg{max-width:460px;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:500}
.cl-msg.err{background:#FBE2E7;color:#9E2139}
.cl-msg.ok{background:#DCF2E9;color:#0B5E44}
.login-panel .fld input:not([type=checkbox]):not([type=radio]):not([type=color]){border:1px solid #CFCAC0;background:#fff;color:#222;border-radius:11px;padding:11px 13px;font-size:16px;color-scheme:light}
.login-panel .btn.primary{background:#153B45;border-color:#153B45;color:#fff}
.login-panel .btn.ghost{color:#565C5F}
.login-panel .btn.ghost:hover{background:#E7E3DA;color:#153B45}
.login-panel .fld label{color:#565C5F}
.cloud-foot{padding:0 8px 8px}
.cloud-foot .chip{background:rgba(255,255,255,.08);color:rgba(244,242,236,.8)}
.cloud-foot .chip.ok svg{color:#4FCB9F}
.cloud-foot .chip.warn{background:rgba(232,180,81,.18);color:#F5D38F}