/* ============================================================
   Fazendasites — Backoffice / Área do Cliente
   Marca: indigo #4f46e5 + emerald #10b981 + amber (mesma do site)
   ============================================================ */
:root{
  --indigo:#4f46e5; --indigo-deep:#1e1b4b; --indigo-soft:#6366f1;
  --emerald:#10b981; --emerald-deep:#059669; --amber:#f59e0b;
  --ink:#0f172a; --slate:#475569; --mist:#64748b;
  --fundo:#f1f5f9; --card:#ffffff; --linha:#e2e8f0;
  --ok:#059669; --ok-bg:#ecfdf5;
  --erro:#dc2626; --erro-bg:#fef2f2;
  --aviso:#b45309; --aviso-bg:#fffbeb;
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
  --raio:16px;
  --sombra:0 14px 40px rgba(30,27,75,.08);
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:var(--sans); color:var(--ink); background:var(--fundo); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--ink)}
img{max-width:100%; display:block}

/* ---------- Logo (wordmark com dot verde) ---------- */
.marca-wm{display:inline-flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em}
.marca-wm .dot{width:10px; height:10px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px rgba(16,185,129,.22); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* ---------- Layout com sidebar ---------- */
.app{display:flex; min-height:100vh}
.sidebar{width:250px; flex:0 0 250px; background:var(--indigo-deep); color:#e9e8ff; display:flex; flex-direction:column; padding:22px 0; position:sticky; top:0; height:100vh}
.sidebar-marca{display:flex; align-items:center; gap:10px; padding:0 22px 20px; border-bottom:1px solid rgba(255,255,255,.1); font-size:1.25rem; color:#fff}
.sidebar-marca .nomebloco b{display:block; font-weight:800; line-height:1.05}
.sidebar-marca .nomebloco span{display:block; font-size:.58rem; letter-spacing:.22em; color:#a5b4fc; text-transform:uppercase; margin-top:2px}
.sidebar-nav{display:flex; flex-direction:column; gap:3px; padding:18px 12px; flex:1}
.sidebar-nav a{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; color:rgba(233,232,255,.78); font-size:.88rem; font-weight:600; transition:.18s}
.sidebar-nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.sidebar-nav a.ativo{background:rgba(99,102,241,.3); color:#fff; box-shadow:inset 3px 0 0 var(--emerald)}
.sidebar-nav .ico{width:18px; height:18px; flex:0 0 18px; opacity:.9}
.sidebar-rodape{padding:14px 22px 0; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; color:rgba(233,232,255,.6)}
.sidebar-rodape a{color:#a5b4fc; font-weight:600}

.conteudo{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{background:var(--card); border-bottom:1px solid var(--linha); padding:16px 30px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar h1{font-size:1.45rem}
.topbar .usuario{font-size:.82rem; color:var(--slate); text-align:right}
.topbar .usuario b{color:var(--indigo); display:block; font-size:.9rem}
.main{padding:28px 30px 48px; max-width:1180px; width:100%}

/* ---------- Cards / grid ---------- */
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra)}
.card-pad{padding:22px}
.card h2,.card h3{margin-bottom:12px}

/* KPI */
.kpi{padding:20px 22px}
.kpi .rotulo{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); font-weight:700}
.kpi .valor{font-size:2.1rem; font-weight:800; color:var(--indigo); margin-top:6px; line-height:1; letter-spacing:-.03em}
.kpi .sub{font-size:.78rem; color:var(--mist); margin-top:6px}
.kpi.destaque{background:var(--indigo); border-color:transparent}
.kpi.destaque .rotulo{color:rgba(255,255,255,.8)}
.kpi.destaque .valor,.kpi.destaque .sub{color:#fff}
.kpi.verde .valor{color:var(--emerald-deep)}

/* ---------- Tabelas ---------- */
.tabela{width:100%; border-collapse:collapse; font-size:.88rem}
.tabela th{text-align:left; padding:11px 14px; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); border-bottom:2px solid var(--linha)}
.tabela td{padding:12px 14px; border-bottom:1px solid var(--linha)}
.tabela tr:hover td{background:#f8fafc}
.tabela .acoes{text-align:right; white-space:nowrap}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.02em}
.badge-ok{background:var(--ok-bg); color:var(--ok)}
.badge-aviso{background:var(--aviso-bg); color:var(--aviso)}
.badge-neutro{background:#eef2f6; color:var(--slate)}
.badge-erro{background:var(--erro-bg); color:var(--erro)}
.badge-info{background:#eef2ff; color:var(--indigo)}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:11px 22px; border-radius:999px; font-family:var(--sans); font-size:.85rem; font-weight:700; border:1.5px solid transparent; transition:.2s; white-space:nowrap}
.btn-indigo{background:var(--indigo); color:#fff; box-shadow:0 10px 24px rgba(79,70,229,.28)}
.btn-indigo:hover{transform:translateY(-1px); background:var(--indigo-soft)}
.btn-verde{background:var(--emerald); color:#fff; box-shadow:0 10px 24px rgba(16,185,129,.3)}
.btn-verde:hover{transform:translateY(-1px); background:var(--emerald-deep)}
.btn-linha{border-color:var(--linha); color:var(--indigo); background:#fff}
.btn-linha:hover{border-color:var(--indigo)}
.btn-sm{padding:7px 14px; font-size:.76rem}
.btn-bloco{width:100%; justify-content:center}

/* ---------- Formulários ---------- */
.campo{margin-bottom:16px}
.campo label{display:block; font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%; padding:11px 13px; border:1.5px solid var(--linha); border-radius:11px; font-family:var(--sans); font-size:.9rem; color:var(--ink); background:#fff; transition:.18s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.campo textarea{resize:vertical; min-height:90px}
.campo .ajuda{font-size:.74rem; color:var(--mist); margin-top:5px}
.form-linha{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-linha-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
fieldset{border:1px solid var(--linha); border-radius:12px; padding:16px 18px; margin-bottom:18px}
fieldset legend{font-weight:800; color:var(--indigo); padding:0 8px; font-size:.95rem}
.check{display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size:.88rem}
.check input{width:auto}

/* ---------- Alertas ---------- */
.alerta{padding:12px 16px; border-radius:11px; font-size:.86rem; margin-bottom:18px; font-weight:600}
.alerta-ok{background:var(--ok-bg); color:var(--ok); border:1px solid #a7f3d0}
.alerta-erro{background:var(--erro-bg); color:var(--erro); border:1px solid #fecaca}
.alerta-info{background:#eef2ff; color:var(--indigo); border:1px solid #c7d2fe}

/* ---------- Diversos ---------- */
.titulo-secao{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.vazio{text-align:center; padding:40px 20px; color:var(--mist)}
.lista-limpa{list-style:none}
.lista-limpa li{padding:9px 0; border-bottom:1px solid var(--linha); font-size:.88rem}
.lista-limpa li:last-child{border:none}
.muted{color:var(--mist)}
.mt{margin-top:18px}.mb{margin-bottom:18px}
.status-linha{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--linha)}
.status-linha:last-child{border:none}
.dado{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--linha); font-size:.88rem}
.dado:last-child{border:none}
.dado b{color:var(--slate); font-weight:600}
.steps-mini{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.pill{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; background:#eef2ff; color:var(--indigo); font-size:.78rem; font-weight:700}

/* ---------- Auth / cadastro (card central) ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 18px; background:var(--indigo-deep)}
.auth-card{width:100%; max-width:440px; background:var(--card); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:38px 34px}
.auth-card.lg{max-width:680px}
.auth-topo{text-align:center; margin-bottom:24px}
.auth-topo .marca-wm{font-size:1.6rem; justify-content:center; margin-bottom:12px; color:var(--indigo-deep)}
.auth-topo h1{font-size:1.5rem}
.auth-topo p{font-size:.85rem; color:var(--slate); margin-top:6px}
.auth-rodape{text-align:center; margin-top:20px; font-size:.82rem; color:var(--slate)}
.auth-rodape a{color:var(--indigo); font-weight:700}
.voltar-site{display:inline-block; margin-top:14px; font-size:.78rem; color:#a5b4fc}

/* ---------- Entrada pública ---------- */
.entrada{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 18px; background:var(--indigo-deep); color:#fff}
.entrada .marca-wm{font-size:2rem; justify-content:center; color:#fff; margin-bottom:18px}
.entrada p{color:#c7d2fe; max-width:460px; margin:0 auto 26px}
.entrada .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- Stepper (funil de venda) ---------- */
.stepper{display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 26px; max-width:520px}
.stepper .et{display:flex; flex-direction:column; align-items:center; gap:7px; flex:0 0 auto; width:94px; text-align:center}
.stepper .bola{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; background:#fff; border:2px solid var(--linha); color:var(--mist)}
.stepper .et .rot{font-size:.72rem; font-weight:700; color:var(--mist); letter-spacing:.02em}
.stepper .lig{flex:1; height:2px; background:var(--linha); margin:0 -6px; margin-bottom:24px; min-width:28px}
.stepper .et.ativo .bola{background:var(--indigo); border-color:var(--indigo); color:#fff}
.stepper .et.ativo .rot{color:var(--indigo)}
.stepper .et.feito .bola{background:var(--emerald); border-color:var(--emerald); color:#fff}
.stepper .et.feito .rot{color:var(--emerald-deep)}
.stepper .lig.feito{background:var(--emerald)}

/* ---------- Responsivo ---------- */
@media(max-width:860px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .form-linha,.form-linha-3{grid-template-columns:1fr} }
@media(max-width:680px){
  .app{flex-direction:column}
  .sidebar{width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; padding:12px}
  .sidebar-marca{border:none; padding:0 10px 0 6px; font-size:1.1rem}
  .sidebar-nav{flex-direction:row; flex-wrap:wrap; padding:8px 4px; gap:4px; flex:1}
  .sidebar-nav a{padding:8px 11px; font-size:.78rem}
  .sidebar-nav a.ativo{box-shadow:none}
  .sidebar-rodape{display:none}
  .main{padding:18px 16px 40px}
  .topbar{padding:14px 16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}