:root {
  --bg: #f5f7f2;
  --panel: #ffffff;
  --ink: #152019;
  --muted: #607064;
  --line: #dce4db;
  --brand: #176b52;
  --brand-dark: #0e4a39;
  --accent: #d9a441;
  --danger: #b83338;
  --shadow: 0 18px 45px rgba(20, 35, 27, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, Segoe UI, system-ui, -apple-system, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

.brand-side {
  padding: 56px;
  color: white;
  background:
    linear-gradient(rgba(13, 71, 55, 0.85), rgba(13, 71, 55, 0.92)),
    url("https://images.unsplash.com/photo-1553413077-190dd305871c?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-mark {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-copy {
  max-width: 680px;
}

.brand-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 0.95;
  letter-spacing: 0;
}

.brand-copy p {
  max-width: 560px;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.login-card,
.modal,
.panel,
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-card {
  width: min(430px, 100%);
  padding: 32px;
}

h2,
h3 {
  letter-spacing: 0;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.check-field {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.check-field input {
  width: auto;
  min-height: auto;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 0 12px;
}

.btn {
  min-height: 42px;
  border-radius: 6px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: white;
  font-weight: 800;
}

.btn.secondary {
  background: #e9eee8;
  color: var(--brand-dark);
}

.btn.danger {
  background: var(--danger);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  padding: 24px 16px;
  background: #13231b;
  color: white;
}

.sidebar .brand-mark {
  font-size: 34px;
  margin: 0 8px 24px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav button {
  width: 100%;
  min-height: 42px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  text-align: left;
  padding: 0 12px;
  font-weight: 700;
}

.nav button.active,
.nav button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.content {
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.topbar h1 {
  margin: 0;
  font-size: 28px;
}

.catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.catalog-head h2 {
  margin: 0;
  font-size: 34px;
}

.catalog-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.catalog-actions input {
  width: min(360px, 42vw);
  height: 48px;
  font-size: 18px;
}

.seller-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.seller-toolbar input {
  width: min(500px, 44vw);
  height: 46px;
  font-size: 18px;
}

.segmented {
  display: inline-flex;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  overflow: hidden;
}

.segmented button {
  min-height: 46px;
  padding: 0 16px;
  background: white;
  color: var(--muted);
  border-right: 1px solid #94a3b8;
  font-size: 18px;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button.active {
  background: #687480;
  color: white;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric {
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.metric.counted {
  border-color: #8bc6aa;
  background: #eef8f2;
}

.metric.pending {
  border-color: #f0d48b;
  background: #fff8e6;
}

.panel {
  padding: 18px;
  margin-bottom: 18px;
}

.pending-section {
  margin-bottom: 18px;
}

.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.pending-card,
.empty-state {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.pending-card h3 {
  margin: 12px 0 4px;
  font-size: 22px;
}

.pending-card p {
  margin: 0;
  color: var(--muted);
}

.pending-card dl {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.pending-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pending-card dd {
  margin: 3px 0 0;
}

.empty-state {
  color: var(--muted);
}

.stock-summary {
  margin-top: 4px;
}

.stock-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.stock-card {
  min-height: 220px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  display: grid;
  align-content: start;
  gap: 10px;
}

.stock-card.done {
  border-color: #7fbd9c;
  background: #eff9f3;
}

.stock-card.todo {
  border-color: #e8ca75;
  background: #fff9e8;
}

.stock-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.stock-card-top strong {
  min-width: 46px;
  height: 46px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 107, 82, 0.12);
  color: var(--brand-dark);
  font-size: 24px;
}

.stock-card h3 {
  margin: 0;
  font-size: 22px;
}

.stock-card p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.stock-card dl {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}

.stock-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.stock-card dd {
  margin: 2px 0 0;
  font-weight: 700;
}

.stock-card .btn {
  margin-top: 4px;
  width: 100%;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.email-schedule-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #f8fbf7;
}

.muted-line {
  color: var(--muted);
  font-weight: 700;
}

.stock-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 32, 25, 0.36);
}

.stock-modal {
  width: min(920px, 100%);
  padding: 22px;
}

.stock-modal .detail-top {
  margin-bottom: 16px;
}

.stock-modal h2 {
  margin: 10px 0 4px;
  font-size: 32px;
}

.stock-delta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.modal-help {
  margin: 14px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(245, 247, 242, 0.98);
  padding: 26px;
  overflow: auto;
}

.detail-screen {
  max-width: 1180px;
  margin: 0 auto;
}

.detail-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.detail-actions {
  display: flex;
  gap: 10px;
}

.detail-top h2 {
  margin: 10px 0 4px;
  font-size: 42px;
}

.invoice-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.compact-btn {
  min-height: 34px;
  padding: 0 12px;
}

.detail-top p {
  margin: 0;
  color: var(--muted);
  font-size: 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.detail-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.detail-row span {
  color: var(--muted);
  font-weight: 800;
}

.detail-row strong {
  overflow-wrap: anywhere;
}

.missing-field {
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}

.readonly-field input {
  background: #f3f6f2;
  color: var(--muted);
}

.compact-grid {
  grid-template-columns: minmax(0, 1fr) 90px;
}

.invoice-items {
  display: grid;
  gap: 10px;
}

.invoice-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.invoice-item strong,
.invoice-item span {
  display: block;
}

.invoice-item span {
  margin-top: 4px;
  color: var(--muted);
}

.product-ok {
  color: var(--brand) !important;
  font-weight: 800;
}

.product-missing {
  color: var(--danger) !important;
  font-weight: 800;
}

.missing-select {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}

.span-2 {
  grid-column: span 2;
}

.hidden {
  display: none;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.product-catalog {
  box-shadow: none;
  border-radius: 0;
}

.product-catalog table {
  min-width: 980px;
}

.product-catalog th,
.product-catalog td {
  padding: 16px 10px;
  font-size: 20px;
}

.product-catalog th {
  color: #000;
  font-size: 20px;
  text-transform: none;
}

.product-catalog tr:nth-child(even) td {
  background: #f3f3f3;
}

.seller-table {
  box-shadow: none;
  border-radius: 0;
}

.seller-table table {
  min-width: 900px;
}

.seller-table th,
.seller-table td {
  padding: 16px 10px;
  font-size: 20px;
}

.seller-table th {
  color: #000;
  font-size: 20px;
  text-transform: none;
}

.seller-table tr:nth-child(even) td {
  background: #f8f8f8;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  background: #e9eee8;
  color: var(--brand-dark);
}

.pill.open {
  background: #fff2cf;
  color: #7a5500;
}

.pagination {
  display: flex;
  gap: 0;
  margin-top: 20px;
}

.pagination button {
  min-width: 42px;
  height: 46px;
  border: 1px solid var(--line);
  background: white;
  color: #0d6efd;
  font-size: 18px;
}

.pagination button:first-child {
  border-radius: 6px 0 0 6px;
}

.pagination button:last-child {
  border-radius: 0 6px 6px 0;
}

.pagination button.active {
  background: #0d6efd;
  border-color: #0d6efd;
  color: white;
}

.tv {
  min-height: 100vh;
  padding: 36px;
  background: #0f1d18;
  color: white;
}

.tv h1 {
  margin: 0 0 26px;
  font-size: 48px;
}

.tv-note {
  margin: -14px 0 26px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.tv-month {
  margin-bottom: 28px;
}

.tv-month-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.86);
}

.tv-month-head h2 {
  margin: 0;
  font-size: 30px;
  text-transform: capitalize;
}

.tv-month-head span {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tv-card {
  border-radius: 8px;
  padding: 24px;
  background: #193428;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tv-card strong {
  display: block;
  margin-top: 16px;
  font-size: 42px;
  color: var(--accent);
}

.commission-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}

.commission-card {
  border-radius: 8px;
  padding: 18px;
  background: #193428;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.commission-card.not-eligible {
  background: #263027;
  border-color: rgba(217, 164, 65, 0.55);
}

.commission-card-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.commission-card-head span {
  font-size: 18px;
  font-weight: 800;
}

.commission-card-head strong {
  color: var(--accent);
  font-size: 38px;
  line-height: 1;
}

.commission-card.not-eligible .commission-card-head strong {
  color: #ffd37a;
  font-size: 30px;
}

.commission-card-head small {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.invoice-mini-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.invoice-mini-row {
  display: grid;
  grid-template-columns: 90px 94px 90px minmax(90px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
}

.invoice-mini-row strong {
  color: var(--accent);
  text-align: right;
}

.error {
  color: var(--danger);
  min-height: 24px;
}

@media (max-width: 900px) {
  .login-shell,
  .app-shell {
    grid-template-columns: 1fr;
  }

  .brand-side {
    min-height: 38vh;
    padding: 32px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .catalog-head,
  .catalog-actions,
  .seller-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-actions input,
  .seller-toolbar input {
    width: 100%;
  }

  .span-2 {
    grid-column: span 1;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }

  .invoice-item {
    grid-template-columns: 1fr;
  }

  .stock-delta-grid {
    grid-template-columns: 1fr;
  }

  .detail-actions {
    width: 100%;
    flex-direction: column;
  }

  .commission-detail-grid,
  .invoice-mini-row {
    grid-template-columns: 1fr;
  }

  .invoice-mini-row strong {
    text-align: left;
  }
}
/* Login 2026: styles scoped to preserve authenticated screens. */
.modern-login {grid-template-columns:1.12fr 1fr; min-height:100svh; background:#f8fafc; color:#122139;}
.modern-login .welcome-side {position:relative; overflow:hidden; padding:48px clamp(32px,4.5vw,86px) 30px; background:radial-gradient(ellipse at 95% 100%,#125569 0,transparent 55%),linear-gradient(135deg,#0e1c33,#102b42); color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:64px;}
.modern-login .welcome-side:after {content:""; position:absolute; width:580px; height:580px; border:1px solid #ffffff0b; border-radius:50%; right:-330px; top:90px; box-shadow:0 0 0 80px #ffffff03,0 0 0 160px #ffffff02; pointer-events:none;}
.login-brands {display:flex; align-items:center; gap:26px; position:relative; z-index:1;}
.multcabos-logo {font-size:26px; font-weight:850; letter-spacing:-1px; line-height:1; white-space:nowrap;}
.multcabos-logo>span {color:#56ced5;}
.multcabos-logo small {display:block; margin-top:7px; font-size:8px; letter-spacing:3.5px; font-weight:500; color:#adc0d0;}
.brand-divider {height:32px; width:1px; background:#ffffff30;}
.vigi-logo {object-fit:contain; width:128px; height:auto;}
.welcome-copy {position:relative; z-index:1; padding:18px 0; max-width:630px;}
.login-eyebrow {font-size:11px; color:#70d6dd; letter-spacing:2.8px; font-weight:700;}
.welcome-copy h1 {font-size:clamp(40px,4.1vw,68px); line-height:1.1; letter-spacing:-2.6px; font-weight:650; margin:26px 0 24px;}
.welcome-copy h1 em {font-style:normal; color:#6cdae0;}
.welcome-copy>p {color:#b8c9d9; font-size:16px; line-height:1.85; margin:0;}
.login-features {display:grid; gap:22px; margin-top:40px;}
.login-features>div {display:grid; grid-template-columns:34px 1fr; column-gap:16px; align-items:center;}
.login-features>div>span {grid-row:span 2; width:34px; height:36px; border:1px solid #81dce22b; border-radius:10px; display:grid; place-items:center; color:#8fd6db; font-size:11px;}
.login-features strong {font-size:14px; font-weight:600;}
.login-features p {margin:5px 0 0; font-size:12px; color:#a8bdcf; line-height:1.5;}
.welcome-footer {display:flex; justify-content:space-between; gap:16px; border-top:1px solid #ffffff15; padding-top:22px; color:#92aabd; font-size:11px; line-height:1.5;}
.modern-login .access-side {display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:44px; padding:50px 36px 30px; background:radial-gradient(ellipse at 95% 5%,#e8f4f6,transparent 50%),#f8fafc;}
.access-caption {color:#8491a2; letter-spacing:2.4px; font-size:10px; font-weight:700;}
.access-card {width:min(400px,100%);}
.access-symbol {width:48px; height:48px; border:1px solid #d7e8ec; background:#ebf4f5; border-radius:14px; display:grid; place-items:center; color:#247c88; margin-bottom:26px;}
.access-symbol svg {width:24px; height:24px;}
.access-card h2 {font-size:32px; letter-spacing:-1.1px; line-height:1.2; margin:0 0 12px; font-weight:700;}
.access-intro {font-size:14px; line-height:1.65; color:#69788a; margin:0 0 34px;}
.access-card .field {gap:9px; margin-bottom:22px;}
.access-card .field label {color:#34435a; font-size:12px; font-weight:600;}
.access-card input {height:52px; padding:0 16px; border-radius:9px; border-color:#d9e1e9; font-size:14px; color:#122139; transition:border-color .15s,box-shadow .15s;}
.access-card input::placeholder {color:#929dad;}
.access-card input:focus {outline:none; border-color:#25899b; box-shadow:0 0 0 3px #25899b19;}
.password-control {position:relative;}
.password-control input {padding-right:82px;}
.password-control button {position:absolute; top:4px; right:5px; height:44px; padding:0 12px; background:transparent; color:#52687c; border-radius:7px; font-size:11px; font-weight:600;}
.access-card button:focus-visible {outline:3px solid #3a9fac; outline-offset:3px;}
.access-card .error {min-height:0; margin:0; color:#a72437; font-size:13px; line-height:1.5;}
.access-card .error:not(:empty) {padding:12px; border:1px solid #f0cbd1; border-radius:8px; background:#fff1f3; margin:0 0 18px;}
.access-submit {width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-radius:9px; background:#173f59; color:white; font-size:14px; font-weight:600; box-shadow:0 6px 15px #173f591a; transition:background .15s;}
.access-submit:hover {background:#205773;}
.access-submit:disabled {opacity:.65; cursor:wait;}
.access-submit span:last-child {font-size:22px; font-weight:400;}
.access-help {text-align:center; color:#758295; font-size:12px; line-height:1.85; margin:25px 0 0;}
.access-footer {font-size:11px; color:#8a96a5;}
@media(min-width:1600px) {.modern-login .welcome-side {padding-top:64px; padding-bottom:40px;} .modern-login .access-side {padding-top:64px; padding-bottom:40px;} .access-card {width:420px;}}
@media(max-width:1000px) {.modern-login {grid-template-columns:1fr 1fr;} .modern-login .welcome-side {padding:34px 28px 26px;} .login-brands {gap:16px;} .multcabos-logo {font-size:21px;} .vigi-logo {width:100px;} .welcome-copy h1 {font-size:43px;} .desktop-break {display:none;} .welcome-footer {flex-direction:column; gap:5px;} .modern-login .access-side {padding:38px 28px 26px;}}
@media(max-width:700px) {.modern-login {grid-template-columns:1fr;} .modern-login .welcome-side {padding:28px 25px 30px; gap:26px;} .login-brands {justify-content:center;} .welcome-copy {padding:0; text-align:center; max-width:none;} .login-eyebrow {font-size:9px; letter-spacing:2px;} .welcome-copy h1 {font-size:34px; letter-spacing:-1.2px; margin:14px 0;} .welcome-copy>p {font-size:13px; line-height:1.7; max-width:360px; margin:auto;} .login-features,.welcome-footer {display:none;} .modern-login .access-side {gap:28px; padding:32px 24px 24px;} .access-caption {display:none;} .access-symbol {display:none;} .access-card h2 {font-size:26px;} .access-intro {margin-bottom:26px;} .access-card input {font-size:16px;} .access-help {margin-top:22px;} }
@media(prefers-reduced-motion:reduce) {.modern-login * {transition:none!important;}}
/* Brand reference and readability correction requested by user. */
.modern-login .multcabos-logo {background:#f5f5f5; color:#202020; padding:17px 20px; border-radius:8px; font-size:30px; letter-spacing:-.8px;}
.modern-login .multcabos-logo>span {color:#fa1233;}
.modern-login .multcabos-logo small {display:none;}
.modern-login .login-brands {flex-wrap:wrap; gap:22px;}
.modern-login .vigi-logo {width:145px;}
.modern-login .login-eyebrow,.modern-login .access-caption {font-size:14px; letter-spacing:1.8px;}
.modern-login .access-caption {color:#566579;}
.modern-login .welcome-copy>p {font-size:20px; color:#d0deea; line-height:1.7;}
.modern-login .login-features strong {font-size:19px;}
.modern-login .login-features p {font-size:16px; color:#c2d2e0; line-height:1.6;}
.modern-login .login-features>div>span {font-size:14px; width:38px; height:42px;}
.modern-login .welcome-footer {font-size:14px; color:#c2d2e0;}
.modern-login .access-card {width:min(460px,100%);}
.modern-login .access-card h2 {font-size:36px;}
.modern-login .access-intro {font-size:18px; color:#526176;}
.modern-login .access-card .field label {font-size:17px; color:#26374e;}
.modern-login .access-card input {height:58px; font-size:18px;}
.modern-login .access-card input::placeholder {color:#68778b;}
.modern-login .password-control input {padding-right:100px;}
.modern-login .password-control button {height:50px; font-size:15px; color:#354e64;}
.modern-login .access-submit {min-height:58px; font-size:18px;}
.modern-login .access-help {font-size:16px; color:#526176; line-height:1.7;}
.modern-login .access-footer {font-size:15px; color:#5b697c;}
.modern-login .access-card .error {font-size:16px;}
@media(max-width:1000px) and (min-width:701px) {.modern-login .login-brands {gap:14px;} .modern-login .multcabos-logo {font-size:25px; padding:15px;} .modern-login .vigi-logo {width:110px;} .modern-login .brand-divider {display:none;} }
@media(max-width:700px) {.modern-login .multcabos-logo {font-size:26px; padding:14px;} .modern-login .login-brands {gap:16px;} .modern-login .brand-divider {display:none;} .modern-login .vigi-logo {width:112px;} .modern-login .welcome-copy>p {font-size:17px;} .modern-login .welcome-copy h1 {font-size:36px;} .modern-login .access-card h2 {font-size:30px;} .modern-login .access-intro {font-size:17px;} .modern-login .access-help {font-size:16px;} }
/* Commercial workspace: isolated from login. */
.modern-app {--brand:#d71938;--brand-dark:#a80f29;--bg:#f5f6f8;--ink:#202633;--muted:#606b7d;--line:#e2e5eb;--shadow:0 4px 20px #18223705;grid-template-columns:262px minmax(0,1fr);background:var(--bg);min-height:100vh;font-size:16px;}
.modern-app .sidebar {background:#fff;color:#202633;border-right:1px solid var(--line);padding:30px 18px 22px;display:flex;flex-direction:column;gap:26px;}
.workspace-brand {font-size:28px;font-weight:850;letter-spacing:-1px;padding:0 10px;color:#202020;}
.workspace-brand>span {color:#fa1233;}
.workspace-brand small {display:block;font-size:10px;font-weight:650;letter-spacing:.8px;color:#647083;margin-top:10px;}
.modern-app .nav {display:grid;gap:26px;}
.nav-group>p {font-size:12px;letter-spacing:1.3px;color:#697487;font-weight:700;margin:0 12px 10px;}
.modern-app .nav button {display:flex;align-items:center;gap:12px;min-height:47px;margin:3px 0;font-size:16px;color:#526074;font-weight:550;border-radius:9px;}
.modern-app svg {width:21px;height:21px;flex-shrink:0;}
.modern-app .nav button.active {color:#c61834;background:#fff0f2;font-weight:700;}
.modern-app .nav button:hover {background:#f4f5f8;color:#202633;}
.modern-app .nav button.active:hover {background:#ffe7ec;color:#b7122e;}
.sidebar-bottom {margin-top:auto;padding:24px 10px 0;border-top:1px solid var(--line);display:grid;gap:22px;}
.sidebar-bottom img {width:120px;background:#172d42;padding:9px;border-radius:6px;box-sizing:content-box;}
.sidebar-bottom button {text-align:left;background:none;color:#5a6475;font-size:16px;padding:0;}
.modern-app .content {min-width:0;padding:30px clamp(24px,3vw,56px);}
.modern-app .topbar {padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:28px;}
.page-kicker {font-size:12px;letter-spacing:1.5px;color:#6a7485;font-weight:600;margin:0 0 10px;}
.modern-app .topbar h1 {font-size:30px;letter-spacing:-.8px;}
.account-chip {display:flex;align-items:center;gap:12px;font-size:16px;font-weight:650;}
.account-chip small {display:block;color:#647083;font-size:13px;font-weight:400;margin-top:4px;}
.account-avatar {width:42px;height:42px;border:1px solid #f3c9d0;background:#fff0f2;color:#c61834;display:grid;place-items:center;border-radius:50%;}
.dashboard-intro {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px;}
.dashboard-intro h2 {font-size:26px;letter-spacing:-.5px;margin:0 0 8px;}
.dashboard-intro p {font-size:16px;color:var(--muted);margin:0;line-height:1.6;}
.month-control {display:grid;gap:8px;min-width:220px;}
.month-control label {font-size:14px;font-weight:600;color:#526074;}
.month-control select {height:46px;font-size:16px;}
.dash-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px;}
.dash-metric {display:flex;flex-direction:column;text-align:left;background:white;border:1px solid var(--line);border-radius:14px;padding:24px 22px;color:var(--ink);box-shadow:var(--shadow);min-width:0;}
.dash-metric>span {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;color:#556073;}
.dash-metric svg {color:#8390a2;}
.dash-metric strong {font-size:clamp(26px,2.1vw,36px);letter-spacing:-1px;margin:20px 0 10px;overflow-wrap:anywhere;}
.dash-metric small {font-size:14px;line-height:1.55;color:#677286;}
.dash-metric.commission {background:#202a3a;border-color:#202a3a;color:#fff;}
.dash-metric.commission>span,.dash-metric.commission small,.dash-metric.commission svg {color:#d5deeb;}
.dash-metric.pending:hover {border-color:#dc2040;background:#fff8f9;}
.dash-columns {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px;}
.dash-panel {background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:24px;min-width:0;box-shadow:var(--shadow);}
.dash-panel>header {display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px;}
.dash-panel h2 {font-size:21px;letter-spacing:-.3px;margin:0 0 8px;}
.dash-panel header p {font-size:15px;color:var(--muted);line-height:1.5;margin:0;}
.chart-legend {font-size:13px;white-space:nowrap;color:#647083;}
.chart-legend:before {content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#dc2040;margin-right:8px;}
.chart-scale,.chart-axis {display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#677286;margin-bottom:12px;}
.sales-chart {height:180px;display:flex;gap:5px;align-items:flex-end;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#eef0f4 44px,#eef0f4 45px);}
.chart-column {height:100%;flex:1;display:flex;align-items:flex-end;min-width:0;}
.chart-column>div {width:100%;background:#dc2040;border-radius:4px 4px 0 0;}
.chart-axis {margin:12px 0 18px;}
.text-action {background:transparent;padding:0;color:#ba1630;font-size:15px;font-weight:650;line-height:1.5;text-align:left;}
.text-action:hover {text-decoration:underline;}
.attention-message {padding:18px;background:#f0f8f4;border:1px solid #d7ebdf;border-radius:10px;margin-bottom:16px;}
.attention-message strong {font-size:16px;color:#266444;}
.attention-message p {font-size:15px;line-height:1.65;color:#4c665a;margin:8px 0 0;}
.attention-message.has-pending {background:#fff7eb;border-color:#f3dfbd;}
.attention-message.has-pending strong,.attention-message.has-pending p {color:#80530e;}
.attention-message .text-action {margin-top:12px;}
.quick-action {display:flex;align-items:center;gap:14px;width:100%;padding:15px 0;border-top:1px solid var(--line);background:none;color:#344258;text-align:left;font-size:16px;}
.quick-action small {display:block;color:#6a7485;font-size:14px;margin-top:5px;}
.quick-action b {margin-left:auto;font-weight:400;}
.dash-empty {padding:38px 12px;text-align:center;font-size:17px;color:#5c687a;line-height:1.7;}
.dash-empty small {display:block;font-size:15px;margin-top:8px;}
.modern-app .dash-table {border:0;box-shadow:none;border-radius:0;}
.modern-app table {font-size:16px;}
.modern-app th {font-size:13px;letter-spacing:.4px;background:#f8f9fb;color:#586477;}
.modern-app td {padding-top:17px;padding-bottom:17px;}
.seller-position {display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#f2f4f7;font-size:13px;color:#607087;margin-right:14px;}
.dash-footnote {font-size:14px;color:#647083;margin:18px 0 0;line-height:1.6;}
.modern-app .recent-panel .table-wrap {box-shadow:none;border:0;}
.modern-app .btn {border-radius:9px;font-size:16px;min-height:44px;}
.modern-app .field label {font-size:15px;}
.modern-app input,.modern-app select {font-size:16px;border-color:var(--line);}
.modern-app button:focus-visible,.modern-app select:focus-visible {outline:3px solid #d71938;outline-offset:3px;}
@media(min-width:1200px) {.modern-app .sidebar {position:sticky;top:0;height:100vh;overflow-y:auto;}}
@media(max-width:1250px) {.dash-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}.dash-columns {grid-template-columns:1fr;}.modern-app {grid-template-columns:228px minmax(0,1fr);}.workspace-brand {font-size:25px;}.workspace-brand small {font-size:9px;}}
@media(max-width:800px) {.modern-app {grid-template-columns:1fr;}.modern-app .sidebar {padding:20px;gap:20px;}.modern-app .nav {display:flex;overflow-x:auto;gap:20px;padding-bottom:8px;}.nav-group {display:flex;gap:5px;}.nav-group>p {display:none;}.modern-app .nav button {white-space:nowrap;width:auto;padding:10px 14px;}.sidebar-bottom {margin:0;padding:0;border:0;display:block;}.sidebar-bottom img {display:none;}.modern-app .content {padding:24px 18px;}.modern-app .topbar {align-items:flex-start;}.modern-app .topbar h1 {font-size:26px;}.page-kicker {font-size:10px;}.account-chip small {display:none;}.account-avatar {display:none;}.account-chip {font-size:14px;}.dashboard-intro {align-items:stretch;flex-direction:column;}.dash-panel {padding:20px;}.dash-panel>header {flex-wrap:wrap;}.chart-legend {display:none;}.dash-metric {padding:20px 16px;}.dash-metric>span {font-size:15px;}.dash-metric strong {font-size:27px;}.dash-metric svg {display:none;}.dash-metric small {font-size:14px;}.dash-metrics {gap:12px;}.sales-chart {gap:3px;}.modern-app .catalog-head {flex-wrap:wrap;}}
@media(max-width:400px) {.dash-metrics {grid-template-columns:1fr;}.dash-metric strong {margin-top:12px;}.account-chip {max-width:100px;overflow-wrap:anywhere;}}

.modern-app .dash-metric>span {min-height:44px;}