/* ============================================================
   MOBIAGE — Design System v2.0
   Cores: Roxo #9C27B0 | Ciano #00BCD4
   Fonte: DM Sans
   ============================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root{
  /* Brand */
  --mg-primary:#9C27B0;
  --mg-primary-h:#AB47BC;
  --mg-primary-d:#7B1FA2;
  --mg-primary-l:#F3E5F5;
  --mg-accent:#00BCD4;
  --mg-accent-h:#0097A7;
  --mg-accent-l:#E0F7FA;
  --mg-dark:#1a1a2e;
  --mg-dark-h:#16213e;

  /* Semantic */
  --mg-ok:#1aab6d;
  --mg-ok-l:#edfbf5;
  --mg-ok-d:#0d6e43;
  --mg-dg:#e03e3e;
  --mg-dg-l:#fef2f2;
  --mg-warn:#d97706;
  --mg-warn-l:#fff8e6;
  --mg-info:#3b82f6;

  /* Surface / Text */
  --mg-bg:#f5f5f9;
  --mg-sf:#ffffff;
  --mg-bd:#e0d6ec;
  --mg-tx:#1c2340;
  --mg-mu:#7c7c9a;

  /* Elevation */
  --mg-sh:0 2px 6px rgba(156,39,176,.07);
  --mg-sh2:0 4px 16px rgba(156,39,176,.12);

  /* Radius */
  --mg-r:8px;
  --mg-r2:16px;

  /* Transition */
  --mg-tr:.2s ease;

  /* Typography */
  --mg-fn:'DM Sans',sans-serif;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--mg-fn);
  background:var(--mg-bg);
  color:var(--mg-tx);
  line-height:1.5;
  min-height:100vh;
  font-size:13px;
}

a{color:var(--mg-primary);text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;height:auto}

/* ── HEADER ───────────────────────────────────────────────── */
.hdr{
  background:var(--mg-primary);
  color:#fff;
  padding:0 1.5rem;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.hdr .brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1rem;
  font-weight:700;
}
.hdr .brand img{
  height:28px;
  width:auto;
  background:#fff;
  padding:4px 10px;
  border-radius:6px;
}
.hdr .brand .brand-text{
  display:flex;
  align-items:baseline;
  gap:.4rem;
}
.hdr .brand .brand-sub{
  font-size:.7rem;
  font-weight:400;
  opacity:.7;
  display:none;
}
.hdr .meta,.hdr .nav{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.78rem;
  color:rgba(255,255,255,.7);
}
.hdr .nav a{
  color:rgba(255,255,255,.7);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.3rem;
  transition:color var(--mg-tr);
}
.hdr .nav a:hover{color:#fff}
.vchip{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  padding:.15rem .65rem;
  font-weight:600;
  color:#fff;
  font-size:.78rem;
}

/* ── WRAPPER ──────────────────────────────────────────────── */
.wrap{
  max-width:1100px;
  margin:1.5rem auto;
  padding:0 1rem;
}

/* ── KPI CARDS ────────────────────────────────────────────── */
.cards,.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
.kpi{
  background:var(--mg-sf);
  border:1px solid var(--mg-bd);
  border-radius:10px;
  padding:1rem 1.2rem;
  box-shadow:var(--mg-sh);
  transition:transform var(--mg-tr),box-shadow var(--mg-tr);
}
.kpi:hover{
  transform:translateY(-2px);
  box-shadow:var(--mg-sh2);
}
.kpi .val{
  font-size:1.6rem;
  font-weight:700;
  color:var(--mg-primary);
}
.kpi .lbl{
  font-size:.72rem;
  color:var(--mg-mu);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-top:.2rem;
}

/* ── CARD ─────────────────────────────────────────────────── */
.card{
  background:var(--mg-sf);
  border:1px solid var(--mg-bd);
  border-radius:var(--mg-r);
  box-shadow:var(--mg-sh);
  margin-bottom:.9rem;
  overflow:hidden;
}
.ch{
  background:var(--mg-dark);
  color:#fff;
  padding:.65rem 1.2rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
  font-size:.85rem;
}
.ch i{color:var(--mg-accent)}
.cb{padding:1rem 1.1rem}

/* ── GRID ─────────────────────────────────────────────────── */
.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.gf{grid-column:1/-1}

/* ── FORM FIELD ───────────────────────────────────────────── */
.f{display:flex;flex-direction:column;gap:.2rem}
.f>label{
  font-size:.67rem;
  font-weight:700;
  color:var(--mg-mu);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.f>label .r{color:var(--mg-dg);margin-left:2px}
.f .hint{font-size:.65rem;color:var(--mg-mu);margin-top:.08rem}

/* ── INPUTS ───────────────────────────────────────────────── */
input,select,textarea{
  width:100%;
  padding:.42rem .7rem;
  border:1.5px solid var(--mg-bd);
  border-radius:6px;
  font-family:var(--mg-fn);
  font-size:.83rem;
  color:var(--mg-tx);
  background:#fff;
  transition:border-color var(--mg-tr),box-shadow var(--mg-tr);
  appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237c7c9a' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .65rem center;
  padding-right:1.8rem;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--mg-primary);
  box-shadow:0 0 0 2px rgba(156,39,176,.12);
}
input.err,select.err,textarea.err{
  border-color:var(--mg-dg);
  box-shadow:0 0 0 2px rgba(224,62,62,.1);
}
input[readonly]{background:#f9f5fc;color:var(--mg-mu);cursor:default}
input[type=datetime-local]{cursor:pointer}
textarea{resize:vertical;min-height:68px;line-height:1.45}

/* ── EMPRESA TOGGLE ───────────────────────────────────────── */
.etg{display:flex;border:1.5px solid var(--mg-bd);border-radius:6px;overflow:hidden}
.etg input[type=radio]{display:none}
.etg label{
  flex:1;text-align:center;padding:.42rem .4rem;
  font-size:.77rem;font-weight:700;cursor:pointer;
  color:var(--mg-mu);text-transform:uppercase;margin:0;
  transition:background var(--mg-tr),color var(--mg-tr);
  border-right:1px solid var(--mg-bd);
}
.etg label:last-child{border-right:none}
.etg input[type=radio]:checked+label{background:var(--mg-primary);color:#fff}

/* ── RADIO BUTTON GROUP ───────────────────────────────────── */
.rbg{display:flex;gap:.4rem;flex-wrap:wrap}
.rbg input[type=radio]{display:none}
.rbg label{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.38rem .85rem;border:1.5px solid var(--mg-bd);border-radius:6px;
  font-size:.78rem;font-weight:600;cursor:pointer;color:var(--mg-mu);
  transition:all var(--mg-tr);
}
.rbg input[type=radio]:checked+label{background:var(--mg-accent);color:#fff;border-color:var(--mg-accent)}

/* ── CEP ──────────────────────────────────────────────────── */
.cw{position:relative}
.cw input{padding-right:2.4rem}
.csp{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);color:var(--mg-accent);display:none;font-size:.8rem}
.cw.loading .csp{display:block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* ── PREFIX R$ ────────────────────────────────────────────── */
.pw{position:relative}
.pw input{padding-left:2rem}
.pl{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.76rem;color:var(--mg-mu);font-weight:600;pointer-events:none}

/* ── DUP ALERT ────────────────────────────────────────────── */
.da{
  display:none;
  background:var(--mg-warn-l);
  border:1.5px solid var(--mg-accent);
  border-radius:6px;
  padding:.4rem .7rem;
  font-size:.74rem;
  color:#6d4c00;
  gap:.4rem;
  align-items:center;
  margin-top:.22rem;
}
.da.show{display:flex}

/* ── CONDITIONAL PANELS ───────────────────────────────────── */
.cp{
  display:none;grid-column:1/-1;
  background:var(--mg-accent-l);
  border:1.5px solid var(--mg-accent);
  border-radius:8px;
  padding:.75rem .9rem .7rem;
  gap:.7rem;
}
.cp.show{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pt{
  grid-column:1/-1;
  font-size:.67rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--mg-accent-h);
  display:flex;align-items:center;gap:.32rem;
  margin-bottom:.02rem;
}
.cp.warn{background:var(--mg-warn-l);border-color:var(--mg-accent)}
.cp.warn .pt{color:#92600a}
.cp.green{background:var(--mg-ok-l);border-color:var(--mg-ok)}
.cp.green .pt{color:var(--mg-ok-d)}
.cp.purple{background:var(--mg-primary-l);border-color:var(--mg-primary)}
.cp.purple .pt{color:var(--mg-primary-d)}

/* ── CHECK GRID ───────────────────────────────────────────── */
.ckg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.4rem}
.cki{
  display:flex;align-items:center;gap:.38rem;
  padding:.35rem .55rem;
  border:1.5px solid var(--mg-bd);border-radius:6px;
  cursor:pointer;
  transition:border-color var(--mg-tr),background var(--mg-tr);
}
.cki:hover{border-color:var(--mg-accent);background:var(--mg-accent-l)}
.cki input[type=checkbox]{width:13px;height:13px;accent-color:var(--mg-primary);flex-shrink:0;display:none}
.cki input[type=radio]{width:13px;height:13px;accent-color:var(--mg-primary);flex-shrink:0;display:none}
.cki span{font-size:.72rem;color:var(--mg-tx);font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cki.on{border-color:var(--mg-primary);background:var(--mg-primary-l);font-weight:700}
.cki:has(input[type=radio]:checked){border-color:var(--mg-primary);background:var(--mg-primary-l);font-weight:600}
.cki:has(input[type=checkbox]:checked){border-color:var(--mg-primary);background:var(--mg-primary-l)}

/* ── SEPARATOR ────────────────────────────────────────────── */
.sep{grid-column:1/-1;border:none;border-top:1px dashed var(--mg-bd);margin:.05rem 0}

/* ── TOTAL FIELD ──────────────────────────────────────────── */
.total-f input[readonly]{background:var(--mg-ok-l);color:var(--mg-ok-d);font-weight:700;border-color:var(--mg-ok)}

/* ── ADMIN BLOCK ──────────────────────────────────────────── */
.admin-block{
  grid-column:1/-1;
  background:#f9f5fc;
  border:1.5px solid var(--mg-bd);
  border-radius:8px;
  padding:.75rem .9rem .7rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;
}
.admin-block .ab-title{
  grid-column:1/-1;
  font-size:.67rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--mg-primary);
  display:flex;align-items:center;gap:.32rem;
}
.admin-block .ab-title i{color:var(--mg-accent)}

/* ── TOOLTIP ──────────────────────────────────────────────── */
[data-tip]{position:relative;cursor:help}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  background:var(--mg-dark);color:#fff;
  font-size:.68rem;font-weight:500;
  padding:.28rem .6rem;border-radius:5px;
  pointer-events:none;opacity:0;transition:opacity .2s;
  z-index:50;max-width:220px;white-space:normal;text-align:center;
}
[data-tip]:hover::after{opacity:1}
[data-tip]::before{
  content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--mg-dark);
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;
}
[data-tip]:hover::before{opacity:1}

/* ── UPLOAD ───────────────────────────────────────────────── */
.upload-area{
  border:2px dashed var(--mg-bd);border-radius:6px;
  padding:.7rem;text-align:center;cursor:pointer;
  transition:border-color var(--mg-tr),background var(--mg-tr);
  position:relative;
}
.upload-area:hover{border-color:var(--mg-accent);background:var(--mg-accent-l)}
.upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-area .up-icon{font-size:1.2rem;color:var(--mg-mu);margin-bottom:.25rem}
.upload-area p{font-size:.74rem;color:var(--mg-mu)}
.upload-area strong{font-size:.76rem;color:var(--mg-primary)}
#fileNameDisplay{font-size:.72rem;color:var(--mg-ok);margin-top:.25rem;font-weight:600;display:none}

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.prog{display:flex;margin-bottom:1.1rem;border-radius:var(--mg-r);overflow:hidden;box-shadow:var(--mg-sh)}
.pstep{
  flex:1;background:var(--mg-sf);
  border:1px solid var(--mg-bd);border-right:none;
  padding:.42rem .7rem;
  display:flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:600;color:var(--mg-mu);
}
.pstep:last-child{border-right:1px solid var(--mg-bd)}
.pstep .n{
  width:17px;height:17px;border-radius:50%;
  background:var(--mg-bd);
  display:grid;place-items:center;
  font-size:.65rem;flex-shrink:0;
}
.pstep.active{background:var(--mg-primary-l);color:var(--mg-primary);border-color:var(--mg-accent)}
.pstep.active .n{background:var(--mg-primary);color:#fff}
.pstep.done{background:var(--mg-ok-l);color:var(--mg-ok);border-color:var(--mg-ok)}
.pstep.done .n{background:var(--mg-ok);color:#fff}

/* ── TOOLBAR ──────────────────────────────────────────────── */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem;
  margin-bottom:1rem;
}
.toolbar h2{
  font-size:1rem;font-weight:700;color:var(--mg-dark);
  display:flex;align-items:center;gap:.5rem;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.38rem;
  padding:.48rem 1.1rem;border-radius:6px;
  font-family:var(--mg-fn);font-size:.8rem;font-weight:700;
  cursor:pointer;border:2px solid transparent;
  transition:all var(--mg-tr);
  text-decoration:none;
  white-space:nowrap;
}
.btn-p{background:var(--mg-primary);color:#fff;border-color:var(--mg-primary)}
.btn-p:hover{background:var(--mg-primary-h);transform:translateY(-1px);box-shadow:0 3px 12px rgba(156,39,176,.3);text-decoration:none;color:#fff}
.btn-g{background:transparent;color:var(--mg-primary);border-color:var(--mg-primary)}
.btn-g:hover{background:var(--mg-primary-l);text-decoration:none}
.btn-a{background:transparent;color:var(--mg-accent);border-color:var(--mg-accent)}
.btn-a:hover{background:var(--mg-accent-l);text-decoration:none}
.btn-d{background:transparent;color:var(--mg-dg);border:1.5px solid var(--mg-dg)}
.btn-d:hover{background:var(--mg-dg-l);text-decoration:none}
.btn-sm{padding:.28rem .6rem;font-size:.72rem}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

/* ── FORM ROW (admin) ─────────────────────────────────────── */
.form-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.form-row .f{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:160px}
.form-row label{font-size:.72rem;font-weight:700;color:var(--mg-mu);text-transform:uppercase;letter-spacing:.4px}
.form-row input,.form-row select{
  padding:.5rem .75rem;border:1.5px solid var(--mg-bd);
  border-radius:6px;font-family:var(--mg-fn);font-size:.85rem;
}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--mg-primary)}

/* ── TABLE ────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:.83rem}
thead{background:var(--mg-dark)}
th{
  color:#fff;padding:.6rem .85rem;text-align:left;
  font-size:.72rem;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;white-space:nowrap;
}
td{padding:.55rem .85rem;border-bottom:1px solid var(--mg-bd);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#faf5ff}

.razao{font-weight:600;color:var(--mg-dark)}
.fantasia{font-size:.75rem;color:var(--mg-mu);margin-top:.08rem}
.cnpj{font-size:.75rem;color:var(--mg-mu);font-family:monospace}

/* ── BADGES ───────────────────────────────────────────────── */
.badge{display:inline-block;padding:.12rem .5rem;border-radius:20px;font-size:.67rem;font-weight:700;white-space:nowrap}
.badge-ok{background:var(--mg-ok-l);color:var(--mg-ok-d)}
.badge-off{background:var(--mg-dg-l);color:var(--mg-dg)}
.badge-adm{background:var(--mg-primary-l);color:var(--mg-primary)}
.badge-rep{background:#f3e8ff;color:#7c3aed}
.badge-sg{background:var(--mg-primary-l);color:var(--mg-primary)}
.badge-info{background:var(--mg-accent-l);color:var(--mg-accent-h)}

/* ── ALERTS ───────────────────────────────────────────────── */
.alerta{border-radius:8px;padding:.6rem .9rem;font-size:.83rem;margin-bottom:1rem;display:flex;align-items:center;gap:.45rem}
.ok{background:var(--mg-ok-l);border:1.5px solid var(--mg-ok);color:var(--mg-ok-d)}
.err{background:var(--mg-dg-l);border:1.5px solid var(--mg-dg);color:var(--mg-dg)}
.erro{
  background:var(--mg-dg-l);
  border:1.5px solid var(--mg-dg);
  border-radius:8px;
  padding:.65rem .9rem;
  color:var(--mg-dg);
  font-size:.85rem;
  margin-bottom:1rem;
  display:flex;align-items:center;gap:.5rem;
}

/* ── MODAL ────────────────────────────────────────────────── */
.ov{
  position:fixed;inset:0;
  background:rgba(26,26,46,.55);backdrop-filter:blur(3px);
  z-index:200;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.ov.open{opacity:1;pointer-events:all}
.modal{
  background:var(--mg-sf);border-radius:var(--mg-r2);
  width:min(660px,96vw);max-height:88vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(26,26,46,.25);
  transform:translateY(14px);transition:transform .25s;
}
.ov.open .modal{transform:none}
.mh{
  background:var(--mg-dark);color:#fff;
  padding:1.2rem 1.4rem;
  border-radius:var(--mg-r2) var(--mg-r2) 0 0;
  display:flex;align-items:center;gap:.55rem;
  font-size:1rem;font-weight:700;
}
.mh i{color:var(--mg-accent)}
.mb{padding:1.4rem}
.st{width:100%;border-collapse:collapse;font-size:.86rem}
.st tr:nth-child(even) td{background:#faf5ff}
.st td{padding:.48rem .7rem;border-bottom:1px solid var(--mg-bd);vertical-align:top}
.st td:first-child{font-weight:700;color:var(--mg-mu);width:38%;font-size:.76rem;text-transform:uppercase;letter-spacing:.4px}
.mf{display:flex;gap:.7rem;justify-content:flex-end;padding:.95rem 1.4rem;border-top:1px solid var(--mg-bd)}

/* ── TOAST ────────────────────────────────────────────────── */
.tstack{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.45rem;z-index:300;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:.55rem;
  padding:.8rem 1.15rem;border-radius:9px;color:#fff;
  font-size:.88rem;font-weight:600;
  min-width:270px;max-width:370px;
  box-shadow:var(--mg-sh2);
  transform:translateX(120%);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:all;
}
.toast.show{transform:none}
.toast.s{background:var(--mg-ok)}
.toast.e{background:var(--mg-dg)}
.toast.i{background:var(--mg-primary)}
.toast.w{background:var(--mg-warn)}

/* ── BUSCA ────────────────────────────────────────────────── */
.busca{position:relative;flex:1;min-width:160px}
.busca input{
  padding:.45rem .75rem .45rem 2rem;
  border:1.5px solid var(--mg-bd);border-radius:7px;
  font-family:var(--mg-fn);font-size:.83rem;width:100%;
}
.busca input:focus{outline:none;border-color:var(--mg-primary)}
.busca i{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--mg-mu);font-size:.8rem}

.toolbar-filters{
  display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;
}
.toolbar-filters input[type="date"]{
  padding:.38rem .6rem;border:1.5px solid var(--mg-bd);border-radius:7px;
  font-family:var(--mg-fn);font-size:.8rem;color:var(--mg-tx);
}
.toolbar-filters .sep{color:var(--mg-mu);font-size:.8rem}

/* ── ACTIONS ──────────────────────────────────────────────── */
.acoes{display:flex;gap:.35rem;flex-wrap:nowrap}
.valor{font-weight:700;color:var(--mg-ok)}

/* ── EMPTY STATE ──────────────────────────────────────────── */
.vazio{text-align:center;padding:3rem 1rem;color:var(--mg-mu)}
.vazio i{font-size:2.5rem;margin-bottom:.75rem;display:block;color:var(--mg-bd)}
.vazio p{font-size:.9rem;margin-bottom:1.25rem}

/* ── LINKS ────────────────────────────────────────────────── */
.link{text-align:center;margin-top:1.25rem;font-size:.82rem;color:var(--mg-mu)}
.link a{color:var(--mg-primary);text-decoration:none;font-weight:600}
.link a:hover{text-decoration:underline}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer{text-align:center;padding:1.8rem;color:var(--mg-mu);font-size:.8rem;border-top:1px solid var(--mg-bd);margin-top:1.8rem}

/* ── LOGIN BOX ────────────────────────────────────────────── */
.login-body{
  background:linear-gradient(135deg,var(--mg-primary) 0%,var(--mg-accent) 100%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;
}
.login-box{
  background:#fff;
  padding:2.5rem 2rem;width:100%;max-width:400px;
}
.login-logo{text-align:center;margin-bottom:1.5rem}
.login-logo img{height:48px;width:auto}
.login-logo p{font-size:.82rem;color:var(--mg-mu);margin-top:.5rem}
.login-logo p{font-size:.82rem;color:var(--mg-mu);margin-top:.2rem}
.login-form .f{margin-bottom:1rem}
.login-form label{font-size:.75rem;font-weight:700;color:var(--mg-mu);text-transform:uppercase;letter-spacing:.4px}
.login-form input{
  padding:.65rem .9rem;border:1.5px solid var(--mg-bd);border-radius:8px;
  font-family:var(--mg-fn);font-size:.93rem;width:100%;transition:border-color .2s;
}
.login-form input:focus{outline:none;border-color:var(--mg-primary);box-shadow:0 0 0 3px rgba(156,39,176,.12)}
.login-form .btn{width:100%;padding:.75rem;border-radius:8px;font-size:.95rem;margin-top:.5rem}

/* ── PRINT HEADER ─────────────────────────────────────────── */
.print-header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:3px solid var(--mg-primary);
  padding-bottom:.6rem;margin-bottom:1rem;
}
.print-header .brand{font-size:18px;font-weight:700;color:var(--mg-primary)}
.print-header .brand span{color:var(--mg-accent)}
.print-header .meta{text-align:right;font-size:10px;color:var(--mg-mu)}
.print-header img{height:36px}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:640px){
  .hdr{padding:0 1rem}
  .hdr .brand .brand-sub{display:none}
  .wrap{padding:0 .5rem}
  .g{grid-template-columns:1fr}
  .pstep .lbl{display:none}
  .toolbar{flex-direction:column-reverse}
  .toolbar-filters{flex-wrap:wrap}
  .btn{justify-content:center}
  .ckg{grid-template-columns:1fr 1fr}
  .addr-row1,.addr-row2{grid-template-columns:1fr!important}
  .kpis,.cards{grid-template-columns:1fr 1fr}
  table{font-size:.75rem}
  th,td{padding:.4rem .5rem}
  .btn-sm span{display:none}
  .form-row{flex-direction:column}
  .login-box{padding:2rem 1.5rem}
}

@media(max-width:480px){
  .hdr{height:48px}
  .hdr .nav span{display:none}
  .kpis,.cards{grid-template-columns:1fr}
  .modal{width:98vw}
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print{
  .hdr,.prog,.toolbar,.ov,.tstack,.footer,.no-print{display:none!important}
  body{background:#fff;font-size:11px}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .ch{background:var(--mg-primary)!important;-webkit-print-color-adjust:exact}
  table{font-size:11px}
  th{background:var(--mg-dark)!important;-webkit-print-color-adjust:exact}
}