/* ============================================================
   Embelezou · base.css
   Design tokens, reset, tipografia e componentes compartilhados.
   Carregado por TODAS as telas (cliente, pro e portal).
   Camadas: base.css  ->  cliente.css | pro.css
   ============================================================ */

:root{
  /* Rosa — identidade Cliente */
  --rose:#D4537E; --rose-light:#FBEAF0; --rose-mid:#F4C0D1;
  --rose-dark:#72243E; --rose-deep:#3d1020;

  /* Coral — acento Pro */
  --coral:#D85A30; --coral-light:#FAECE7; --coral-mid:#F5C4B3; --coral-dark:#712B13;

  /* Neutros */
  --text:#1a1a1a; --text-muted:#6b6b6b; --text-light:#a0a0a0;
  --bg:#fefcfd; --bg-soft:#fdf6f9; --white:#ffffff;

  /* Bordas / raios */
  --border:rgba(212,83,126,0.12); --border-strong:rgba(212,83,126,0.28);
  --radius:16px; --radius-sm:10px;

  /* Estados */
  --green:#3B6D11; --green-bg:#EAF3DE;
  --red:#A32D2D;   --red-bg:#FCEBEB;
  --amber:#633806; --amber-bg:#FAEEDA;
  --blue:#0C447C;  --blue-bg:#E6F1FB;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-soft);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}

/* ---------- Tipografia utilitária ---------- */
.serif{font-family:'Playfair Display',Georgia,serif;}

/* ---------- Botões ---------- */
.btn-primary,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:50px;
  font:500 15px/1 'DM Sans',sans-serif;
  text-decoration:none;cursor:pointer;border:none;white-space:nowrap;
  transition:opacity .2s,transform .15s,background .2s,border-color .2s,color .2s;
}
.btn-primary{background:var(--rose);color:var(--white);}
.btn-primary:hover{opacity:.88;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--rose);border:1.5px solid var(--rose-mid);}
.btn-outline:hover{background:var(--rose-light);border-color:var(--rose);}

/* Variante compacta usada nos painéis Pro (class="btn-sm btn-primary") */
.btn-sm{
  padding:9px 18px;border-radius:10px;
  font:500 13px/1 'DM Sans',sans-serif;
  cursor:pointer;border:none;
  transition:opacity .2s,border-color .2s,color .2s;
}
.btn-sm.btn-primary,.btn-sm.btn-outline{padding:9px 18px;border-radius:10px;font-size:13px;transform:none;}
.btn-sm.btn-primary:hover{transform:none;}
.btn-sm.btn-outline{background:var(--white);color:var(--text);border:1px solid var(--border-strong);}
.btn-sm.btn-outline:hover{border-color:var(--rose);color:var(--rose);}

/* ---------- Badges ---------- */
.badge{font:500 11px/1 'DM Sans',sans-serif;padding:3px 9px;border-radius:8px;display:inline-block;}
.badge-open{background:var(--green-bg);color:var(--green);}
.badge-closed{background:var(--red-bg);color:var(--red);}
.badge-dest{background:var(--amber-bg);color:var(--amber);}
.badge-novo{background:#E1F5EE;color:#085041;}
.badge-verified{background:var(--blue-bg);color:var(--blue);}

/* ---------- Toast (ver Embelezou.toast() em embelezou.js) ---------- */
.toast{
  position:fixed;bottom:28px;right:28px;z-index:400;
  background:var(--rose-deep);color:var(--white);
  padding:13px 18px;border-radius:12px;font-size:14px;
  border-left:4px solid var(--rose);
  display:flex;align-items:center;gap:10px;
  transform:translateY(80px);opacity:0;
  transition:transform .3s,opacity .3s;
}
.toast.show{transform:translateY(0);opacity:1;}

/* ---------- Modal ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(61,16,32,0.55);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.modal-overlay.open{display:flex;}
.modal{
  position:relative;background:var(--white);
  border-radius:24px;padding:32px;margin:16px;
  width:100%;max-width:420px;
}
.modal-close{
  position:absolute;top:14px;right:18px;
  background:none;border:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--text-muted);
}
.modal-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--text);margin-bottom:6px;}
.modal-sub{font-size:13px;color:var(--text-muted);font-weight:300;margin-bottom:22px;line-height:1.6;}

/* ---------- Formulário base ---------- */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  font:400 14px/1.5 'DM Sans',sans-serif;color:var(--text);
  background:var(--bg-soft);outline:none;transition:border-color .2s,background .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--rose);background:var(--white);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-light);}
.form-group textarea{resize:vertical;min-height:90px;}

/* ---------- Animação de entrada ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .5s ease forwards;}
.delay-1,.d1{animation-delay:.1s;opacity:0;}
.delay-2,.d2{animation-delay:.2s;opacity:0;}
.delay-3,.d3{animation-delay:.3s;opacity:0;}
.delay-4,.d4{animation-delay:.4s;opacity:0;}
.d5{animation-delay:.5s;opacity:0;}

/* ---------- Utilitários ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}