/* =========================================================
   CRM de Visitas Comerciais — FertGroup
   Design tokens conforme especificação (paleta rosa/cinza/creme)
   ========================================================= */
:root{
  --pink-1:#C4547A;
  --pink-2:#9E3F60;
  --pink-solid:#C4547A;
  --ink:#3D3D3D;
  --cream:#FAF6F3;
  --white:#FFFFFF;
  --border:#EDE3DE;
  --muted:#8A8380;

  --green:#3FA34D;
  --green-bg:#E7F5EA;
  --amber:#E0A82E;
  --amber-bg:#FCF3DD;
  --red:#D9534F;
  --red-bg:#FBEAE9;
  --blue:#4A90D9;
  --blue-bg:#E9F1FB;

  --stage-lead:#8791A0;
  --stage-contato:#4A90D9;
  --stage-agendada:#8E6FCE;
  --stage-realizada:#3FA7A0;
  --stage-proposta:#E0A82E;
  --stage-ganho:#3FA34D;
  --stage-perdido:#D9534F;
  --stage-acompanhamento:#C4547A;

  --radius:10px;
  --shadow:0 2px 10px rgba(61,61,61,0.08);
  --shadow-lg:0 8px 30px rgba(61,61,61,0.18);

  --header-h:64px;
  --indicators-h:64px;
  --tabs-h:48px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{
  height:100%;
  margin:0;
  overflow:hidden;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
}
h1,h2{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:14px;}

/* ---------------- BOTÕES ---------------- */
.btn{
  border:none;
  border-radius:8px;
  padding:11px 20px;
  font-size:14px;
  font-weight:600;
  transition:filter .15s ease, transform .05s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(135deg,var(--pink-1),var(--pink-2));
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-secondary{
  background:var(--white);
  color:var(--pink-2);
  border:1.5px solid var(--pink-1);
}
.btn-secondary:hover{background:#fff5f8;}
.btn-danger{
  background:var(--white);
  color:var(--red);
  border:1.5px solid var(--red);
}
.btn-danger:hover{background:var(--red-bg);}
.btn-block{width:100%;}

/* ---------------- TELAS DE AUTENTICAÇÃO ---------------- */
.auth-screen{
  height:100vh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,var(--cream) 0%, #f3e4ea 100%);
  padding:20px;
}
.auth-card{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:36px 32px;
  width:100%;
  max-width:400px;
}
.auth-logo{
  height:34px;
  display:block;
  margin:0 auto 24px;
}
.auth-card h1{
  font-size:20px;
  text-align:center;
  color:var(--ink);
  margin-bottom:8px;
}
.auth-sub{
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 24px;
  line-height:1.5;
}
.auth-card form{display:flex;flex-direction:column;gap:6px;}
.auth-card label{font-size:13px;font-weight:600;color:var(--ink);margin-top:10px;}
.auth-card input{
  padding:11px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
  outline:none;
}
.auth-card input:focus{border-color:var(--pink-1);}
.auth-card .btn{margin-top:18px;}
.auth-error{
  background:var(--red-bg);
  color:var(--red);
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  margin-top:10px;
}
/*
.auth-hint{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.6;
}
.auth-hint code{
  background:#f4eeec;
  padding:2px 6px;
  border-radius:5px;
  color:var(--pink-2);
}
*/

/* ---------------- LAYOUT PRINCIPAL ---------------- */
#app{
  height:100vh;
  display:flex;
  flex-direction:column;
}
.app-header{
  height:var(--header-h);
  flex:0 0 auto;
  background:linear-gradient(120deg,var(--pink-1),var(--pink-2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.header-left h1{
  font-size:17px;
  font-weight:700;
  letter-spacing:.2px;
}
.header-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  opacity:.92;
  margin-top:2px;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:#8CE9A0;
  box-shadow:0 0 0 2px rgba(255,255,255,0.25);
}
.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-user{
  font-size:12.5px;
  background:rgba(255,255,255,0.16);
  padding:6px 12px;
  border-radius:20px;
}
.header-logo{
  height:33px;
  background:#fff;
  border-radius:50%;
  padding:4px;
}

/* ---------------- INDICADORES ---------------- */
.indicators-strip{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  padding:10px 16px;
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.indicator{
  border-radius:8px;
  padding:8px 6px;
  text-align:center;
  background:var(--cream);
  border-top:3px solid var(--stage-color, var(--pink-1));
}
.indicator .count{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  line-height:1.1;
}
.indicator .label{
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------------- ABAS ---------------- */
.tabs{
  flex:0 0 auto;
  display:flex;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:0 12px;
  gap:4px;
}
.tab-btn{
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  padding:12px 16px;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
}
.tab-btn.active{
  color:var(--pink-2);
  border-bottom-color:var(--pink-1);
}
.tab-btn:hover{color:var(--pink-2);}

/* ---------------- CONTEÚDO DAS ABAS ---------------- */
.tab-content{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  position:relative;
}
.tab-pane{
  display:none;
  height:100%;
  overflow-y:auto;
}
.tab-pane.active{display:block;}
#tab-pipeline.active{display:flex;flex-direction:column;}

/* ---------------- BOARD (KANBAN) ---------------- */
.board{
  flex:1;
  display:flex;
  gap:8px;
  padding:10px;
  height:100%;
  overflow:hidden;
}
.board-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#F2EBE7;
  border-radius:10px;
  overflow:hidden;
}
.board-col-head{
  padding:8px 9px;
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  background:var(--stage-color);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.board-col-head span:first-child{
  overflow-wrap:break-word;
  line-height:1.2;
}
.board-col-count{
  flex:0 0 auto;
  background:rgba(255,255,255,0.28);
  border-radius:10px;
  padding:1px 7px;
  font-size:10.5px;
}
.board-col-body{
  flex:1;
  overflow-y:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.board-col-body.drag-over{
  background:rgba(196,84,122,0.08);
}

.card{
  background:#fff;
  border-radius:8px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  border-left:4px solid var(--stage-color);
  cursor:grab;
}
.card:active{cursor:grabbing;}
.card.dragging{opacity:.4;}
.card h3{
  margin:0 0 3px;
  font-size:13.5px;
  color:var(--ink);
}
.card .card-sub{
  font-size:11.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.card .tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:6px;
}
.tag{
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:10px;
  background:var(--blue-bg);
  color:var(--blue);
}
.card .notes{
  font-size:11.5px;
  color:#6b6663;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.badge-followup{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
  margin-bottom:6px;
}
.badge-followup.ok{background:var(--green-bg);color:var(--green);}
.badge-followup.soon{background:var(--amber-bg);color:var(--amber);}
.badge-followup.late{background:var(--red-bg);color:var(--red);}
.card .card-by{
  font-size:10px;
  color:#a89f9c;
  text-align:right;
}

/* ---------------- FORMULÁRIOS ---------------- */
.visit-form, .export-card{
  max-width:760px;
  margin:20px auto;
  background:#fff;
  border-radius:12px;
  padding:24px 28px 28px;
  box-shadow:var(--shadow);
}
.visit-form h2, .export-card h2{
  font-size:17px;
  margin-bottom:16px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin-bottom:18px;
}
.field{display:flex;flex-direction:column;gap:5px;}
.field-full{grid-column:1 / -1;}
.field label{font-size:12.5px;font-weight:600;color:#6b6663;}
.field input, .field select, .field textarea{
  padding:10px 11px;
  border:1.5px solid var(--border);
  border-radius:8px;
  outline:none;
  background:#fff;
  color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--pink-1);}
.field textarea{resize:vertical;}
.saved-msg{
  margin-left:14px;
  color:var(--green);
  font-weight:600;
  font-size:13.5px;
}

/* ---------------- LISTA "TODAS" ---------------- */
.list-toolbar{
  display:flex;
  gap:10px;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
}
.list-toolbar input[type=search]{
  flex:1;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
}
.list-toolbar select{
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
}
.visit-list{padding:12px 16px;}
.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:8px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.list-row:hover{filter:brightness(0.98);}
.list-row .stage-pill{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  padding:4px 10px;
  border-radius:12px;
  background:var(--stage-color);
}
.list-row .row-main{flex:1;min-width:0;}
.list-row .row-main .clinic{font-weight:700;font-size:14px;}
.list-row .row-main .sub{font-size:12px;color:var(--muted);}
.list-row .row-date{font-size:12px;color:var(--muted);flex:0 0 auto;}
.empty-msg{
  text-align:center;
  color:var(--muted);
  padding:40px 20px;
  font-size:13.5px;
}

/* ---------------- EXPORTAR ---------------- */
.export-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;}
.toggle-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#6b6663;
  margin-top:6px;
}

/* ---------------- LOGOUT ---------------- */
.logout-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  background:var(--pink-1);
  color:#fff;
  border:none;
  border-radius:24px;
  padding:12px 22px;
  font-weight:700;
  font-size:13.5px;
  box-shadow:var(--shadow-lg);
  z-index:50;
}
.logout-btn:hover{background:var(--pink-2);}

/* ---------------- MODAL ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:16px;
}
.modal{
  background:#fff;
  border-radius:12px;
  padding:26px 28px;
  max-width:560px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.modal-close{
  position:absolute;
  top:14px;right:16px;
  background:none;border:none;
  font-size:22px;
  color:var(--muted);
  line-height:1;
}
.modal h2{font-size:18px;margin-bottom:2px;}
.modal-sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
.modal-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:11.5px;
  color:var(--muted);
  background:var(--cream);
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:18px;
}
.modal-actions{display:flex;justify-content:space-between;gap:10px;}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:640px){
  .indicators-strip{grid-template-columns:repeat(4,1fr);}
  html,body{overflow:auto;}
  #app{height:auto;min-height:100vh;}
  .tab-content{overflow:visible;}
  .tab-pane{overflow-y:visible;}
  #tab-pipeline.active{display:block;}
  .board{flex-direction:column;overflow-x:visible;height:auto;}
  .board-col{flex:0 0 auto;min-width:0;height:340px;}
  .header-logo{height:24px;}
  .header-left h1{font-size:14.5px;}
  .header-user{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .visit-form, .export-card{margin:14px;padding:18px;}
  .list-toolbar{flex-direction:column;}
}