/* =====================================================================
   ESTILOS — Painel de Atendimentos (OSs de campo)
   Organizado por seção da interface: base, topo, filtros, KPIs,
   conciliação, cartões, gráficos, tabelas, toast e responsivo.
   ===================================================================== */

/* Paleta de cores, tipografia e medidas reutilizadas em todo o painel */
:root{
  --ink:#0F1E28;
  --ink-2:#26404E;
  --bg:#E9EDF0;
  --surface:#FFFFFF;
  --surface-2:#F4F7F9;
  --line:#D3DAE0;
  --line-soft:#E4E9ED;
  --muted:#64757F;
  --visit:#146B5A;
  --visit-soft:#B9DCD3;
  --os:#3E6E8E;
  --os-soft:#C7DAE6;
  --proj:#D98A0B;
  --proj-soft:#F6E2BC;
  --late:#B33A22;
  --late-soft:#F2D2CA;
  --meta:#5B4B8A;
  --radius:3px;
  --shadow:0 1px 2px rgba(15,30,40,.06), 0 6px 18px -12px rgba(15,30,40,.28);
  --f-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Reset básico e estilos globais do documento */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:48px;
}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:.01em}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--visit);outline-offset:2px}
.wrap{max-width:1400px;margin:0 auto;padding:0 20px}

/* ---------- topo ---------- */
.masthead{
  background:var(--ink);
  color:#EAF0F3;
  border-bottom:3px solid var(--visit);
}
.masthead .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;padding-top:18px;padding-bottom:16px}
.brand{flex:1 1 320px;min-width:260px}
.eyebrow{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#7FA79B;margin-bottom:6px;
}
.masthead h1{font-size:34px;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.masthead h1 span{color:#7FCBB6}
.sub{color:#9FB3BD;font-size:13px;margin-top:6px}
.sub b{color:#EAF0F3;font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:2px}
.btn{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:9px 14px;border-radius:var(--radius);cursor:pointer;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease, background .12s ease;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--visit);border-color:var(--visit);color:#fff}
.btn-primary:hover{background:#0F5748}
.btn-ghost{background:transparent;border-color:#3B5665;color:#CBD9E0}
.btn-ghost:hover{background:#1B303C}
.btn-sm{padding:6px 10px;font-size:12px}

/* ---------- filtros ---------- */
.filters{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(15,30,40,.04);
}
.filters .wrap{display:flex;flex-wrap:wrap;gap:12px 16px;padding:12px 20px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:4px;min-width:130px}
.field label{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.field select,.field input{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);
  padding:7px 8px;min-height:34px;
}
.field input[type=number]{width:92px}
.field.grow{flex:1 1 220px}
.chip-toggle{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  padding:7px 11px;border-radius:var(--radius);background:var(--surface-2);cursor:pointer;min-height:34px;
}
.chip-toggle input{accent-color:var(--visit);margin:0}
.chip-toggle b{font-weight:600}
.chip-toggle small{color:var(--muted);font-family:var(--f-mono);font-size:11px}
.filter-note{
  flex:1 1 100%;font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  border-top:1px dashed var(--line-soft);padding-top:9px;
}
.filter-note .dot{width:7px;height:7px;border-radius:50%;background:var(--late);display:inline-block;margin-right:5px}

/* ---------- KPIs ---------- */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  margin-top:22px;overflow:hidden;
}
.kpi{background:var(--surface);padding:14px 15px 13px;position:relative}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.kpi.k-visit::before{background:var(--visit)}
.kpi.k-os::before{background:var(--os)}
.kpi.k-proj::before{background:var(--proj)}
.kpi.k-late::before{background:var(--late)}
.kpi .lbl{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:6px;
}
.kpi .val{font-family:var(--f-display);font-size:40px;line-height:.94;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .val.sm{font-size:31px}
.kpi .val em{font-style:normal;font-size:17px;color:var(--muted);font-weight:600;margin-left:3px}
.kpi .foot{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.3}
.kpi .foot b{color:var(--ink-2);font-weight:600;font-family:var(--f-mono);font-size:11.5px}

/* ---------- faixa de conciliação ---------- */
.concilia{
  background:var(--surface);border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius) var(--radius);
  padding:13px 16px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;box-shadow:var(--shadow);
}
.concilia .eq{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.concilia .term{display:flex;flex-direction:column;line-height:1.15}
.concilia .term b{font-family:var(--f-display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.concilia .term span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.concilia .op{font-family:var(--f-display);font-size:22px;color:var(--muted);font-weight:600}
.concilia .term.out b{color:var(--late)}
.concilia .term.res b{color:var(--visit)}
.concilia .txt{flex:1 1 300px;font-size:12.5px;color:var(--muted);line-height:1.5;border-left:1px solid var(--line-soft);padding-left:16px}
.concilia .txt b{color:var(--ink-2)}
@media (max-width:700px){.concilia .txt{border-left:none;padding-left:0}}

/* ---------- cartões / seções ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  margin-top:20px;box-shadow:var(--shadow);
}
.card-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 18px 10px;border-bottom:1px solid var(--line-soft);
}
.card-head h2{font-size:19px;text-transform:uppercase;letter-spacing:.04em}
.card-head .hint{font-size:12px;color:var(--muted);max-width:640px}
.card-body{padding:16px 18px 18px}
.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
.grid-2>.card{margin-top:0}

/* legendas */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);align-items:center}
.legend i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:-1px}
.legend .ln{width:16px;height:0;border-top:2px dashed var(--proj);display:inline-block;margin-right:6px;vertical-align:3px}

/* ---------- gráficos ---------- */
.chart{display:block;overflow:visible;max-width:100%}
.chart text{font-family:var(--f-mono);fill:var(--muted)}
.chart .axis-lbl{font-size:9.5px;letter-spacing:.06em}
.chart .val-lbl{font-size:10px;fill:var(--ink-2);font-weight:500}
.chart .grid-line{stroke:var(--line-soft);stroke-width:1}
.chart .base-line{stroke:var(--line);stroke-width:1}
.bar-visit{fill:var(--visit)}
.bar-proj{fill:var(--proj-soft);stroke:var(--proj);stroke-width:1;stroke-dasharray:3 2}
.bar-late{fill:var(--late)}
.col-hit{fill:transparent;cursor:pointer}
.weekend-band{fill:#EFF2F4}
.avg-line{stroke:var(--visit);stroke-width:1.5;stroke-dasharray:5 4;opacity:.75}
.meta-line{stroke:var(--meta);stroke-width:1.5;stroke-dasharray:2 3}
.hbar-track{fill:var(--surface-2)}
.hbar-os{fill:var(--os-soft)}
.hbar-visit{fill:var(--visit)}
.donut-late{fill:var(--late)}
.donut-ok{fill:var(--visit)}
.spark-real{fill:none;stroke:var(--visit);stroke-width:2.5;stroke-linejoin:round}
.spark-proj{fill:none;stroke:var(--proj);stroke-width:2.5;stroke-dasharray:6 4;stroke-linecap:round}
.spark-meta{fill:none;stroke:var(--meta);stroke-width:1.5;stroke-dasharray:2 4}
.area-real{fill:var(--visit);opacity:.08}

/* tooltip */
.tip{
  position:fixed;z-index:80;pointer-events:none;background:var(--ink);color:#EAF0F3;
  padding:8px 11px;border-radius:var(--radius);font-size:12px;line-height:1.45;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);opacity:0;transition:opacity .1s ease;max-width:260px;
}
.tip.on{opacity:1}
.tip b{font-family:var(--f-mono);font-size:12px}
.tip .t-row{display:flex;justify-content:space-between;gap:14px}
.tip .t-row span:last-child{font-family:var(--f-mono)}

/* ---------- estatísticas em linha ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;margin-top:4px}
.stat{border-left:2px solid var(--line);padding-left:10px}
.stat .s-lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat .s-val{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .s-val small{font-size:13px;color:var(--muted);font-weight:500}

/* ---------- tabelas ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13px}
th{
  text-align:left;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--surface);position:sticky;top:0;
}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th .arw{opacity:.4;margin-left:3px}
th.sorted .arw{opacity:1;color:var(--visit)}
td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono{font-family:var(--f-mono);font-size:12px;white-space:nowrap}
.tag{
  display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);white-space:nowrap;
}
.tag.ok{background:var(--visit-soft);border-color:#8FC7B8;color:#0C4A3D}
.tag.late{background:var(--late-soft);border-color:#E0A08F;color:#8A2915}
.tag.multi{background:var(--proj-soft);border-color:#E0BE7A;color:#8A5A05}
.tag.sup{background:#EEF1F4;border-color:var(--line);color:var(--muted);font-weight:500}
.tag.aberto{background:#DDE9F0;border-color:#9CBCD1;color:#1F4C66}
.tag.fechado{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
tr.mes-atual td{background:#F3F8F6}
.hist-hint{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 14px}
.hist-hint b{color:var(--ink-2)}
.hist-hint code{font-family:var(--f-mono);font-size:11.5px;background:var(--surface-2);border:1px solid var(--line-soft);padding:1px 5px;border-radius:2px}
.estab{font-weight:600;line-height:1.25}
.estab small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.table-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 18px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted);
}
.pager{display:flex;gap:6px;align-items:center}
.empty{padding:40px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;font-family:var(--f-display);font-size:20px;color:var(--ink);margin-bottom:4px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:90;
  background:var(--ink);color:#EAF0F3;padding:12px 18px;border-radius:var(--radius);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:all .18s ease;
  max-width:min(560px,92vw);font-size:13px;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--late)}
.toast b{font-family:var(--f-mono);font-size:12px;color:#7FCBB6}
.toast.err b{color:#FFD9D0}

/* drop */
body.dragging::after{
  content:"Solte o arquivo para atualizar os dados";
  position:fixed;inset:14px;z-index:100;border:2px dashed var(--visit);border-radius:6px;
  background:rgba(233,237,240,.93);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:28px;text-transform:uppercase;letter-spacing:.04em;color:var(--visit);
}
.foot-note{
  margin-top:22px;font-size:12px;color:var(--muted);line-height:1.6;
  border-top:1px solid var(--line);padding-top:14px;
}
.foot-note b{color:var(--ink-2)}

/* ---------- camada de nuvem: usuário logado, botão de perigo ---------- */
.cloud-user{display:flex;align-items:center;gap:10px;padding-left:10px;margin-left:2px;border-left:1px solid #3B5665}
.cloud-user span{font-family:var(--f-mono);font-size:11.5px;color:#9FB3BD}
.origem-atual{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#7FA79B;white-space:nowrap;
}
.btn-danger{background:var(--late);border-color:var(--late);color:#fff}
.btn-danger:hover{background:#8F2E1A}

/* ---------- camada de nuvem: overlays (login, erro fatal, modal) ---------- */
.cloud-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(15,30,40,.62);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.cloud-overlay[hidden]{display:none}   /* [hidden] sozinho perde para .cloud-overlay{display:flex} por ser regra de user-agent; isto reforça como regra de autor */
.cloud-box{
  background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 50px -16px rgba(0,0,0,.5);
  padding:28px 26px;width:100%;max-width:380px;
}
.cloud-box h2{font-size:22px;margin-bottom:6px}
.cloud-box .field{margin-top:14px}
.cloud-box .field label{display:block;margin-bottom:5px}
.cloud-box .field input{width:100%}
.cloud-box button[type="submit"], .cloud-box>button{width:100%;margin-top:18px;justify-content:center}
.cloud-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.cloud-erro{
  margin-top:12px;padding:8px 11px;border-radius:var(--radius);font-size:12.5px;line-height:1.4;
  background:var(--late-soft);border:1px solid #E0A08F;color:#8A2915;
}

/* ---------- modal de fechamento de mês ---------- */
.modal-box{max-width:460px}
.modal-destaque{
  display:flex;align-items:baseline;gap:8px;margin:16px 0;padding:14px 16px;
  background:var(--surface-2);border-radius:var(--radius);border-left:3px solid var(--visit);
}
.modal-destaque b{font-family:var(--f-display);font-size:32px;font-weight:700;color:var(--visit)}
.modal-destaque span{font-size:12.5px;color:var(--muted)}
.modal-resumo{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.modal-resumo b{font-family:var(--f-mono)}
#modalFecharFrase{
  font-family:var(--f-mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line-soft);
  padding:1px 6px;border-radius:2px;user-select:all;
}
#modalFecharInput{
  width:100%;margin-top:8px;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 10px;font-family:var(--f-mono);
}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.modal-acoes .btn{width:auto;margin-top:0}

@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .masthead h1{font-size:26px}
  .kpi .val{font-size:33px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}