:root{
  --preto:#111;
  --branco:#fff;
  --marfim:#f7f5f2;
  --cinza-linha:#e6e3de;
  --cinza-texto:#4a4a4a;
  --cinza-suave:#8a8580;
  --champagne:#c9a66b;
  --champagne-esc:#a3854e;
  --verde:#1f7a4d;
  --vermelho:#b3261e;
  --azul:#254e70;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Lato',system-ui,-apple-system,sans-serif;
  color:var(--preto);
  background:var(--marfim);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ============ LOGIN ============ */
.login-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:linear-gradient(180deg,var(--marfim) 0%, var(--branco) 100%);
}
.login-card{
  background:var(--branco);
  border:1px solid var(--cinza-linha);
  padding:44px 36px;
  width:100%; max-width:400px;
  box-shadow:0 20px 60px -30px rgba(0,0,0,0.15);
}
.login-card h1{
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  font-size:1.5rem;
  letter-spacing:0.06em;
  margin:0 0 8px;
}
.login-sub{
  color:var(--cinza-texto);
  font-size:0.92rem;
  margin:0 0 26px;
}

/* ============ TOPBAR ============ */
.topbar{
  background:var(--branco);
  border-bottom:1px solid var(--cinza-linha);
  position:sticky; top:0; z-index:10;
}
.topbar-inner{
  max-width:1200px; margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand-mm{
  width:44px; height:44px;
  border:1px solid var(--preto);
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat', sans-serif;
  font-weight:300; font-size:1rem;
  letter-spacing:0.14em;
}
.brand-name{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:0.82rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:0;
}
.brand-sub{
  font-size:0.78rem;
  color:var(--cinza-suave);
  margin:2px 0 0;
}
.topbar-actions{ display:flex; gap:8px; }

/* ============ FILTERS ============ */
.filters{
  background:var(--branco);
  border-bottom:1px solid var(--cinza-linha);
}
.filters-inner{
  max-width:1200px; margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:end; gap:14px; flex-wrap:wrap;
}
.field{ display:flex; flex-direction:column; min-width:0; }
.field-inline{ min-width:150px; }
.field label{
  font-family:'Montserrat', sans-serif;
  font-size:0.68rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  margin-bottom:6px;
}
.field input,
.field select,
.field textarea{
  font-family:'Lato', sans-serif;
  font-size:0.98rem;
  padding:10px 12px;
  border:1px solid var(--cinza-linha);
  background:var(--branco);
  color:var(--preto);
  border-radius:0;
  transition:border-color .15s ease;
  width:100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--preto);
}
.field textarea{ resize:vertical; }
.filters-count{
  margin:0 0 0 auto;
  font-family:'Montserrat', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cinza-suave);
}

/* ============ LISTA ============ */
.lista-wrap{
  max-width:1200px; margin:0 auto;
  padding:24px;
}
.lista{
  display:grid; gap:12px;
}
.empty{
  text-align:center; padding:56px 20px;
  color:var(--cinza-suave);
  font-family:'Montserrat', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.card{
  background:var(--branco);
  border:1px solid var(--cinza-linha);
  padding:18px 20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
}
.card-data{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-width:80px;
  padding-right:20px;
  border-right:1px solid var(--cinza-linha);
}
.card-data .dia{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.6rem;
  line-height:1;
  color:var(--preto);
}
.card-data .mes{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cinza-suave);
  margin-top:4px;
}
.card-data .hora{
  font-family:'Montserrat', sans-serif;
  font-size:0.85rem;
  color:var(--champagne-esc);
  margin-top:8px;
  font-weight:500;
}
.card-info h3{
  margin:0 0 4px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:1.02rem;
  letter-spacing:0.02em;
}
.card-info .servico{
  color:var(--cinza-texto);
  font-size:0.94rem;
  margin:0 0 6px;
}
.card-info .servico strong{
  color:var(--preto);
}
.card-info .meta{
  font-size:0.85rem;
  color:var(--cinza-suave);
  margin:0;
  display:flex; gap:14px; flex-wrap:wrap;
}
.card-info .meta a{
  color:var(--azul);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.card-info .meta a:hover{ border-color:var(--azul); }
.card-info .obs{
  font-size:0.85rem;
  color:var(--cinza-texto);
  margin:6px 0 0;
  font-style:italic;
}
.badge{
  font-family:'Montserrat', sans-serif;
  font-size:0.68rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid;
  margin-left:8px;
  display:inline-block;
  vertical-align:middle;
}
.badge.origem-manual{ color:var(--champagne-esc); border-color:var(--champagne); background:#faf4e9; }
.badge.origem-site{ color:var(--azul); border-color:#b7c9d9; background:#eff4f8; }
.status{
  font-family:'Montserrat', sans-serif;
  font-size:0.68rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  display:inline-block;
}
.status-pendente{  background:#fff5db; color:#7a5b00; }
.status-confirmado{background:#e2f4e9; color:var(--verde); }
.status-cancelado{ background:#fce7e5; color:var(--vermelho); }
.status-realizado{ background:#eee; color:var(--cinza-texto); }
.card-actions{
  display:flex; flex-direction:column; gap:8px;
  align-items:stretch;
  min-width:170px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:11px 20px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .1s ease, background .15s ease, color .15s ease, border-color .15s ease;
  border:1px solid transparent;
  text-align:center;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--preto); color:var(--branco); border-color:var(--preto); }
.btn-primary:hover{ background:#000; color:var(--branco); }
.btn-primary:disabled{ opacity:0.55; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--preto); border-color:var(--preto); }
.btn-ghost:hover{ background:var(--preto); color:var(--branco); }
.btn-danger{ background:transparent; color:var(--vermelho); border-color:var(--vermelho); }
.btn-danger:hover{ background:var(--vermelho); color:var(--branco); }
.btn-sm{ padding:8px 14px; font-size:0.7rem; }
.btn-block{ display:block; width:100%; }

.form-status{ min-height:1.2em; font-size:0.9rem; margin:8px 0 0; }
.form-status.ok{ color:var(--verde); }
.form-status.err{ color:var(--vermelho); }

/* ============ MODAL ============ */
.modal{
  position:fixed; inset:0;
  z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.5);
}
.modal-card{
  position:relative;
  background:var(--branco);
  border:1px solid var(--cinza-linha);
  width:100%; max-width:640px;
  max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
}
.modal-header{
  padding:20px 24px;
  border-bottom:1px solid var(--cinza-linha);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h2{
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.modal-close{
  background:none; border:none;
  font-size:1.6rem; line-height:1;
  color:var(--cinza-suave); cursor:pointer;
}
.modal-body{ padding:22px 24px; overflow-y:auto; }
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field-full{ grid-column:span 2; }
.modal-footer{
  padding:16px 24px;
  border-top:1px solid var(--cinza-linha);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 720px){
  .card{ grid-template-columns:1fr; gap:14px; }
  .card-data{
    flex-direction:row; gap:14px;
    padding-right:0; padding-bottom:12px;
    border-right:none; border-bottom:1px solid var(--cinza-linha);
    justify-content:flex-start;
  }
  .card-data .hora{ margin-top:0; }
  .card-actions{ min-width:0; flex-direction:row; flex-wrap:wrap; }
  .grid-2{ grid-template-columns:1fr; }
  .field-full{ grid-column:span 1; }
  .filters-count{ margin:0; }
}