/* style.css — Savere (web), reconstrução standalone do design do Claude Design.
   Sem dependência de support.js/_ds_bundle.js — só CSS e JS puro. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --beige:#F5F0E6; --white:#fff; --sand:#E3DCC9;
  --green-deep:#18362B; --green-mid:#36886A; --gold:#B8863B;
  --text-primary:#20281F; --text-secondary:#6C7566;
  --r-card:12px; --r-btn:6px;
  --mola:cubic-bezier(.34,1.56,.64,1); --suave:cubic-bezier(0,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--beige);color:var(--text-primary);
  -webkit-font-smoothing:antialiased}
.serif{font-family:'Playfair Display',serif}
button{font:inherit;border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--green-mid);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes rippleFx{from{transform:scale(0);opacity:.55}to{transform:scale(1);opacity:0}}
@keyframes glowPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.65;transform:scale(1.12)}}
@keyframes bgPan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(184,134,59,.45)}50%{box-shadow:0 0 0 5px rgba(184,134,59,0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(59,106,74,.35)}50%{box-shadow:0 0 0 10px rgba(59,106,74,0)}}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes shineSweep{from{background-position:0% 0}to{background-position:200% 0}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- telas ---------- */
/* ---------- CAPA ---------- */
#tela-capa{min-height:100vh;width:100%;background:linear-gradient(120deg,#162e22,var(--green-deep),#234a37,var(--green-deep));
  background-size:300% 300%;animation:fadeUp .5s var(--suave),bgPan 12s ease-in-out infinite;
  flex-direction:column;align-items:center;justify-content:center;padding:72px 24px;gap:56px}
.capa-brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.capa-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.capa-logo-glow{position:absolute;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,134,59,.55),transparent 70%);animation:glowPulse 3.2s ease-in-out infinite}
.capa-logo{position:relative;width:100px;height:100px;border-radius:50%;background:var(--gold);
  color:var(--green-deep);display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:40px;font-weight:600;animation:popIn .6s var(--suave) both}
.capa-nome{display:flex;flex-direction:column;align-items:center;gap:2px;animation:fadeUp .5s .15s var(--suave) both}
.capa-nome b{color:#fff;font-family:'Playfair Display',serif;font-size:28px;font-weight:600;letter-spacing:.06em}
.capa-nome span{color:var(--sand);font-size:13px}
.capa-titulo{text-align:center;display:flex;flex-direction:column;gap:10px;max-width:520px;animation:fadeUp .5s .25s var(--suave) both}
.capa-titulo h1{font-family:'Playfair Display',serif;font-weight:500;font-size:38px;color:#fff;letter-spacing:-.01em}
.capa-titulo p{font-size:15px;color:var(--sand)}
.capa-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;max-width:820px}

.tilt-card{cursor:pointer;position:relative;overflow:hidden;background:var(--beige);border-radius:var(--r-card);
  padding:40px;width:340px;display:flex;flex-direction:column;gap:16px;
  transform-style:preserve-3d;transform:perspective(700px) rotateX(0) rotateY(0);
  box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .15s var(--suave),box-shadow .25s var(--suave),border-color .2s}
.tilt-card:active{transform:scale(.97) !important}
.tilt-glow{position:absolute;inset:0;pointer-events:none;border-radius:var(--r-card);background:transparent;transition:background .2s var(--suave)}
.tilt-icon{width:44px;height:44px;border-radius:11px;background:var(--sand);display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--suave)}
.tilt-card h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--text-primary)}
.tilt-card p{color:var(--text-secondary);font-size:13.5px;line-height:1.6}
.tilt-cta{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-size:13px;font-weight:600}
.tilt-cta svg{transition:transform .25s var(--suave)}

.ripple{position:absolute;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:50%;
  background:rgba(31,59,45,.22);animation:rippleFx .6s ease-out forwards;pointer-events:none}
.ripple.claro{background:rgba(255,255,255,.4)}

/* ---------- FISCAL ---------- */
#tela-fiscal{min-height:100vh;background:var(--beige);flex-direction:column;align-items:center;justify-content:center;
  gap:24px;padding:24px;text-align:center;animation:fadeUp .45s var(--suave)}
#tela-fiscal .eyebrow2{font-size:11px;letter-spacing:.13em;color:var(--text-secondary);font-weight:600;text-transform:uppercase}
#tela-fiscal h2{font-family:'Playfair Display',serif;font-size:28px;max-width:480px}
#tela-fiscal p{color:var(--text-secondary);font-size:14px;line-height:1.6;max-width:440px}

/* ---------- botões ---------- */
.btn{position:relative;overflow:hidden;padding:12px 22px;border-radius:var(--r-btn);background:var(--green-mid);
  color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .18s var(--suave),box-shadow .18s var(--suave),transform .16s var(--suave)}
.btn:hover:not(:disabled){background-image:linear-gradient(100deg,var(--green-deep) 0%,var(--green-mid) 25%,#4a8563 50%,var(--green-mid) 75%,var(--green-deep) 100%);
  background-size:250% 100%;animation:shineSweep 1.3s linear infinite;box-shadow:0 8px 20px -8px rgba(54,136,106,.5)}
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{background:#9DB5AB;cursor:default}
.btn.secundario{background:#fff;color:var(--text-primary);border:1px solid var(--sand)}
.btn.secundario:hover:not(:disabled){background:var(--beige);animation:none;box-shadow:none}

/* ---------- CONTÁBIL (app) ---------- */
#tela-contabil{min-height:100vh;animation:fadeUp .4s var(--suave)}
.side{width:248px;flex-shrink:0;background:var(--green-deep);padding:32px 0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:10;animation:slideInLeft .45s var(--suave) both}
.brand{cursor:pointer;padding:0 24px;margin-bottom:44px;display:flex;flex-direction:column;gap:3px}
.brand b{color:#fff;font-size:18px;font-weight:600;letter-spacing:.14em}
.brand span{color:var(--gold);font-size:9px;font-weight:600;letter-spacing:.3em}
.nav{display:flex;flex-direction:column;gap:1px;padding:0 12px;position:relative}
.nav button{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;padding:11px 14px;width:100%;
  text-align:left;border-radius:8px;color:#B9CCC3;font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .2s var(--suave),color .2s var(--suave)}
.nav button:hover:not(:disabled){background:rgba(255,255,255,.08);color:#E4EEE9}
.nav button.on{background:var(--green-mid);color:#fff;font-weight:600}
.nav button:disabled{opacity:.45;cursor:default}
.nav button .soon{margin-left:auto;font-size:9px;font-weight:700;color:#8FA99C;background:rgba(255,255,255,.08);
  padding:2px 6px;border-radius:99px;animation:badgePulse 2.4s ease-in-out infinite}
.divisor{height:1px;background:rgba(255,255,255,.08);margin:12px 22px}
.foot{margin-top:auto;padding:0 24px;color:#547567;font-size:10.5px}

.main{flex:1;padding:40px 56px;overflow:auto;max-width:1180px}
.view{display:none}
.view.on{display:block;animation:fadeUp .4s var(--suave)}
.greet{font-size:29px;font-weight:600;letter-spacing:-.02em}
.greet b{color:var(--green-mid)}
.date{color:var(--text-secondary);font-size:14px;margin-top:5px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary);margin:40px 0 24px}

.shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shortcut{background:#fff;border:1px solid var(--sand);border-radius:var(--r-card);padding:24px;
  display:flex;flex-direction:column;gap:16px}
.shortcut.disabled{opacity:.55}
.shortcut h3{font-size:15.5px;font-weight:600}
.shortcut p{color:var(--text-secondary);font-size:12.5px;line-height:1.55;flex:1}
.badge-soon{display:inline-block;font-size:10px;font-weight:700;color:var(--gold);background:#F4ECDD;
  padding:2px 8px;border-radius:99px;width:fit-content;animation:badgePulse 2.2s ease-in-out infinite}

.basewrap{display:flex;align-items:center;gap:40px;background:#fff;border:1px solid var(--sand);border-radius:var(--r-card);
  padding:18px 24px;flex-wrap:wrap}
.basewrap .metric{display:flex;align-items:baseline;gap:9px}
.basewrap .n{font-size:22px;font-weight:600;color:var(--green-deep)}
.basewrap .l{font-size:13px;color:var(--text-secondary)}
.basewrap .sep{width:1px;height:26px;background:var(--sand)}

.hist{background:#fff;border:1px solid var(--sand);border-radius:var(--r-card);padding:16px 16px 8px}
.hist h3{font-size:14px;font-weight:600;padding:8px 14px 16px}
.row{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:9px;transition:background .15s var(--suave);
  animation:rowIn .35s var(--suave) both}
.row:hover{background:var(--beige)}
.tag{font-size:10px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--green-mid);padding:4px 0;
  border-radius:5px;width:98px;text-align:center;text-transform:uppercase}
.vazio{color:var(--text-secondary);font-size:13px;padding:24px 14px;text-align:center}
.note{color:var(--text-secondary);font-size:11.5px;margin-top:40px;text-align:center}

.painel{background:#fff;border:1px solid var(--sand);border-radius:var(--r-card);padding:32px;
  display:flex;flex-direction:column;gap:24px}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.campo{display:flex;flex-direction:column;gap:6px;position:relative}
.campo label{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.campo input[type=number]{padding:10px 12px;border:1px solid var(--sand);border-radius:var(--r-btn);font-size:13.5px;
  color:var(--text-primary);transition:border-color .18s var(--suave),box-shadow .18s var(--suave)}
.campo input:focus{border-color:var(--green-mid);box-shadow:0 0 0 4px rgba(59,106,74,.18);outline:none}

.selectfake{padding:10px 12px;border:1px solid var(--sand);border-radius:var(--r-btn);font-size:13.5px;color:var(--text-primary);
  background:#fff;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:border-color .18s var(--suave),box-shadow .18s var(--suave)}
.selectfake.aberto{border-color:var(--green-mid);box-shadow:0 0 0 4px rgba(59,106,74,.18)}
.selectfake svg{transition:transform .2s var(--suave)}
.selectfake.aberto svg{transform:rotate(180deg)}
.opcoes{position:absolute;top:64px;left:0;right:0;z-index:20;background:#fff;border:1px solid var(--sand);border-radius:8px;
  box-shadow:0 12px 32px -8px rgba(24,54,43,.25);overflow:hidden;animation:fadeUp .18s var(--suave) both}
.opcoes div{padding:10px 14px;font-size:13.5px;cursor:pointer;transition:background .15s var(--suave)}
.opcoes div:hover{background:var(--beige)}
.opcoes div.sel{background:var(--beige);color:var(--green-deep);font-weight:600}
.mask-fechar{position:fixed;inset:0;z-index:19}

.drop{border:2px dashed var(--sand);border-radius:10px;padding:32px;text-align:center;color:var(--text-secondary);
  font-size:13px;cursor:pointer;position:relative;transition:border-color .2s,background .2s}
.drop:hover{border-color:var(--green-mid);background:var(--beige)}
.drop.arrastando{border-color:var(--green-mid);background:var(--beige);animation:pulseGlow 1s ease-in-out infinite}
.drop.ok{border-color:var(--green-mid);border-style:solid;background:var(--beige)}
.drop.pequeno{padding:20px}
.drop .df{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.drop.pequeno .df{font-size:13px}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

.barra{height:6px;border-radius:99px;background:var(--sand);overflow:hidden}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-mid),var(--gold));
  border-radius:99px;transition:width .5s var(--suave)}
.passo{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary);transition:color .25s var(--suave)}
.passo.ok{color:var(--text-primary)}
.passo .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--sand);flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:11px;color:#fff;transition:all .3s var(--mola)}
.passo.ok .dot{background:var(--green-mid);border-color:var(--green-mid)}

.resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.resumo .mini{background:var(--beige);border-radius:8px;padding:14px 16px;animation:popIn .4s var(--suave) both}
.resumo .mini .n{font-size:20px;font-weight:700;color:var(--green-deep)}
.resumo .mini .l{font-size:11.5px;color:var(--text-secondary);margin-top:2px}
.aviso{background:#F4ECDD;border:1px solid #E8D3A8;border-radius:8px;padding:12px 16px;font-size:12.5px;color:#7A5A1E}

table.prev{width:100%;border-collapse:collapse;font-size:12.5px}
table.prev th{text-align:left;color:var(--text-secondary);font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--sand)}
table.prev td{padding:9px 10px;border-bottom:1px solid var(--beige);white-space:nowrap}
table.prev tbody tr{animation:rowIn .3s var(--suave) both;transition:background .12s}
table.prev tbody tr:hover{background:var(--beige)}

.toast{position:fixed;bottom:28px;right:28px;background:var(--green-deep);color:#fff;padding:14px 20px;border-radius:10px;
  display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;box-shadow:0 16px 40px -12px rgba(0,0,0,.35);
  z-index:50;opacity:0;pointer-events:none}
.toast.on{opacity:1;pointer-events:auto;animation:toastIn .38s var(--mola) both}
.toast.on.erro{animation:toastIn .3s var(--suave) both, shakeX .4s var(--suave) .3s}
.toast.erro{background:#A1442E}

@media (max-width:860px){
  #tela-contabil{flex-direction:column}
  .side{width:100%;height:auto;position:relative}
  .main{padding:24px}
  .shortcuts,.grade{grid-template-columns:1fr}
  .resumo{grid-template-columns:repeat(2,1fr)}
  .capa-cards{flex-direction:column;align-items:center}
}