/* ===========================================================
   HortiPro — identidade visual "Feira Vibrante"
   Fundo branco, verde-folha + vermelho-tomate de destaque,
   Fredoka (títulos, arredondada) + Nunito (texto), mobile-first.
   Visual deliberadamente diferente dos outros apps da família.
   =========================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F3FAF3;
  --ink:#20321F;
  --ink-invert:#FFFFFF;
  --muted:#6B7A67;
  --line:#E3EEE2;
  --green:#3CB043;
  --green-dark:#2E9E3D;
  --green-ink:#FFFFFF;
  --tomato:#E84C3D;
  --shadow: rgba(32,50,31,0.10);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Nunito', Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.hidden{display:none !important;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

/* ---------- TOPBAR ---------- */
.topbar{
  background:var(--green);
  color:var(--ink-invert);
  padding:14px 18px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:30;
  box-shadow:0 4px 18px rgba(60,176,67,0.25);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:32px;width:32px;object-fit:cover;border-radius:10px;background:#fff;}
.brand-logo.hidden{display:none;}
.brand-name{font-family:'Fredoka', Arial, sans-serif; font-weight:600; font-size:1.2rem; letter-spacing:0.01em;}

.tabs{display:flex;flex-wrap:wrap;gap:6px;}
.tab-btn{
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.28);
  color:#EAFBE9;
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size:0.78rem;
  white-space:nowrap;
}
.tab-btn:hover{background:rgba(255,255,255,0.24);}
.tab-btn.active{background:#fff; color:var(--green-dark); border-color:#fff;}
.tab-badge{
  display:inline-block; min-width:18px; padding:1px 6px; margin-left:4px;
  border-radius:999px; background:var(--tomato); color:#fff;
  font-size:0.68rem; font-weight:800; line-height:1.4;
}
.tab-btn.active .tab-badge{background:var(--tomato); color:#fff;}
#logoutBtn{border-color:rgba(255,255,255,0.28); color:#FFE3DF;}
#logoutBtn:hover{background:rgba(232,76,61,0.35); border-color:#fff;}

/* ---------- LAYOUT ---------- */
.content{padding:22px 16px 100px; max-width:1100px; margin:0 auto;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

h1{font-family:'Fredoka', Arial, sans-serif; font-weight:600; font-size:1.55rem; margin:0 0 16px; color:var(--green-dark);}
h2{font-family:'Fredoka', Arial, sans-serif; font-weight:600; font-size:1.1rem; margin-top:28px; margin-bottom:12px; color:var(--green-dark);}

/* ---------- CARDS / STATS ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px;}
.card{background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:6px;}
.card-label{color:var(--muted); font-size:0.7rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;}
.card-value{font-family:'Fredoka', Arial, sans-serif; font-weight:600; font-size:1.7rem; color:var(--green-dark);}

/* ---------- FORMS ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; background:var(--surface-2); border:1px solid var(--line); padding:18px; border-radius:18px;}
.form-grid label{display:flex; flex-direction:column; gap:6px; font-size:0.78rem; font-weight:700; letter-spacing:0.02em; color:var(--muted);}
.form-grid input, .form-grid select{padding:12px 12px; border:1.5px solid var(--line); border-radius:12px; font-size:1rem; font-family:'Nunito',sans-serif; background:#fff; color:var(--ink); min-height:44px;}
.form-grid input:focus, .form-grid select:focus{border-color:var(--green);}
.form-grid button{grid-column:1 / -1;}
.form-grid label.checkbox-label{flex-direction:row; align-items:center; gap:8px; justify-content:flex-start;}
.form-grid label.checkbox-label input[type="checkbox"]{min-height:auto; width:18px; height:18px; accent-color:var(--green);}

.form-inline{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; align-items:center;}
.form-inline input{padding:11px 12px; border:1.5px solid var(--line); border-radius:12px; min-height:44px; background:#fff; color:var(--ink); font-family:'Nunito',sans-serif;}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--green); color:#fff; border:none;
  padding:13px 22px; border-radius:999px; cursor:pointer; min-height:46px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:0.92rem;
  box-shadow:0 6px 16px rgba(60,176,67,0.35);
}
.btn-primary:hover{background:var(--green-dark);}
.btn-secondary{
  background:#fff; color:var(--green-dark); border:1.5px solid var(--line);
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:0.8rem; font-weight:700;
  font-family:'Nunito',sans-serif;
}
.btn-secondary:hover{border-color:var(--green);}
.btn-danger{
  background:#fff; color:var(--tomato); border:1.5px solid rgba(232,76,61,0.4);
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:0.8rem; font-weight:700;
  font-family:'Nunito',sans-serif;
}
.btn-danger:hover{border-color:var(--tomato);}
.btn-whats{
  background:#25D366; color:#0A2E1B; border:none;
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:0.8rem; font-weight:800;
  text-decoration:none; display:inline-block; font-family:'Nunito',sans-serif;
}

/* ---------- PEDIDOS ---------- */
.appointment-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.appointment-item{
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.row-actions{display:flex; gap:8px; flex-wrap:wrap;}

.status-badge{
  padding:4px 12px; border-radius:999px; font-size:0.65rem; font-weight:800;
  letter-spacing:0.03em; text-transform:uppercase; font-family:'Nunito',sans-serif;
}
.status-pendente{background:#FFF3E0; color:#B9770E;}
.status-pago{background:#E3F6E4; color:var(--green-dark);}
.status-cancelado{background:#FCE8E6; color:var(--tomato);}

/* ---------- LISTAS ---------- */
.list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.list-item{background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.list-item code{word-break:break-all; font-size:0.82rem; background:#fff; padding:4px 8px; border-radius:8px; border:1px solid var(--line);}

.hint{color:var(--muted); font-size:0.85rem; margin-top:14px;}

.sponsor-banner{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px dashed var(--line); border-radius:16px; padding:10px 14px; margin-bottom:20px;}
.sponsor-banner img{height:28px; width:auto; border-radius:6px;}
.sponsor-banner .label{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:700;}

/* ---------- LOGIN / SIGNUP ---------- */
.auth-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#E8F8E9,#FFFFFF 60%); padding:20px;
}
.auth-wrap{
  display:flex; align-items:stretch; justify-content:center;
  width:100%; max-width:860px; border-radius:26px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(32,50,31,0.25);
}
.auth-photo{
  flex:1 1 46%; min-height:560px; position:relative;
  background:url('https://images.pexels.com/photos/1656663/pexels-photo-1656663.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover no-repeat;
}
.auth-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,50,31,0) 35%, rgba(20,60,20,0.82) 100%);
}
.auth-photo-caption{
  position:absolute; left:26px; right:26px; bottom:24px; color:#fff; z-index:1;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.4rem; line-height:1.2;
}
.auth-card{
  background:#fff; color:var(--ink); border-radius:26px; padding:32px;
  width:100%; max-width:400px; box-shadow:0 30px 60px -20px rgba(32,50,31,0.25);
}
.auth-wrap .auth-card{ border-radius:0; box-shadow:none; flex:1 1 54%; }
@media (max-width:760px){
  .auth-photo{display:none;}
  .auth-wrap{box-shadow:none; max-width:400px;}
  .auth-wrap .auth-card{border-radius:26px; box-shadow:0 30px 60px -20px rgba(32,50,31,0.25);}
}
.auth-card h1{font-family:'Fredoka',sans-serif; font-weight:600; color:var(--green-dark); font-size:1.9rem; margin-bottom:6px;}
.auth-form{display:flex; flex-direction:column; gap:12px; margin-top:14px;}
.auth-form label{display:flex; flex-direction:column; gap:5px; font-size:0.75rem; font-weight:700; letter-spacing:0.02em; color:var(--muted);}
.auth-form input{padding:12px; border:1.5px solid var(--line); border-radius:12px; font-size:1rem; min-height:44px; font-family:'Nunito',sans-serif; background:#fff; color:var(--ink);}
.auth-card hr{border:none; border-top:1px solid var(--line); margin:22px 0;}

/* ---------- MOBILE ---------- */
@media (max-width:760px){
  body{padding-bottom:76px;}
  .topbar{padding:12px 14px;}
  .tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--green-dark); padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    overflow-x:auto; flex-wrap:nowrap; gap:8px;
  }
  .tab-btn{flex:none;}
  #logoutBtn{margin-left:auto;}
  .content{padding:18px 14px 24px;}
  .cards{grid-template-columns:repeat(2,1fr);}
}