body { background: #f3f6fa; }

.admin-welcome { display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:20px;padding:24px 28px;border:1px solid #dce7f5;border-radius:22px;background:linear-gradient(115deg,#fff,#f5f9ff);box-shadow:0 12px 32px rgba(15,41,78,.06) }
.admin-welcome h2 { margin:0;color:#0b1b33;font-size:25px;letter-spacing:-.04em }
.admin-welcome p { margin:6px 0 0;color:#74849a;font-size:12px }
.admin-user-chip { display:flex;gap:11px;align-items:center;min-width:220px;padding:11px 14px;border:1px solid #e0e8f3;border-radius:15px;background:#fff }
.admin-user-chip>span,.admin-client-avatar { display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#dceaff,#eef5ff);color:#2160db;font-weight:800 }
.admin-user-chip>span { width:38px;height:38px }
.admin-user-chip strong,.admin-user-chip small { display:block }
.admin-user-chip strong { color:#17243a;font-size:11px }
.admin-user-chip small { margin-top:2px;color:#8391a4;font-size:9px }
.admin-client-avatar { width:34px!important;height:34px!important }
.admin-kpis .kpi-icon { font-size:18px;font-weight:800 }
.admin-table-title { margin:0 0 4px;font-size:16px }
.admin-table-subtitle { margin:0;color:#8290a3;font-size:10px }
.admin-clients-table { min-width:980px }
.admin-email { display:block;max-width:190px;overflow:hidden;color:#5e6e83;font-size:10px;text-overflow:ellipsis;white-space:nowrap }
.admin-subvalue { display:block;margin-top:3px;color:#8b98a9;font-size:8px }
.btn-email { border:1px solid #ccebdd;background:#ecfaf4;color:#087b59 }
.invoice-file-btn.xml.available { border-color:#cbe9df;background:#effaf6;color:#087b59 }
.invoice-file-btn.email { border-color:#d7e2f7;background:#f2f6ff;color:#245fcf }
.email-document-modal { position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:22px;background:rgba(5,17,34,.68);backdrop-filter:blur(7px) }
.email-document-dialog { position:relative;width:min(520px,100%);padding:30px;border-radius:24px;background:#fff;box-shadow:0 28px 80px rgba(5,20,45,.3) }
.email-document-dialog h2 { margin:0;color:#0b172a;font-size:25px;letter-spacing:-.04em }
.email-document-dialog>p { margin:7px 0 20px;color:#75849a;font-size:12px }
.email-choice { display:flex;gap:12px;align-items:flex-start;margin-top:9px;padding:14px;border:1px solid #dfe6ef;border-radius:14px;cursor:pointer;transition:.15s }
.email-choice:has(input:checked) { border-color:#8db2f7;background:#f5f8ff;box-shadow:0 0 0 3px rgba(37,99,235,.06) }
.email-choice.is-disabled { cursor:not-allowed;opacity:.55 }
.email-choice input { margin-top:3px;accent-color:#2563eb }
.email-choice strong,.email-choice small { display:block }
.email-choice strong { color:#26364d;font-size:12px }
.email-choice small { margin-top:3px;color:#7e8da1;font-size:10px }
.specific-document-email { display:none;margin-top:14px }
.specific-document-email.is-visible { display:block }
.specific-document-email span { display:block;margin-bottom:6px;color:#3b4a60;font-size:10px;font-weight:700 }
.specific-document-email input { width:100%;padding:12px 13px;border:1px solid #dbe3ed;border-radius:11px;outline:0;font:inherit;font-size:12px }
.specific-document-email input:focus { border-color:#78a4f4;box-shadow:0 0 0 3px rgba(37,99,235,.08) }
.specific-document-email input.is-invalid { border-color:#e05260;background:#fff8f8 }
.email-document-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:22px;padding-top:17px;border-top:1px solid #edf1f5 }
.sgn-operations-hero { display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:18px;padding:25px 28px;border-radius:23px;color:#fff;background:radial-gradient(circle at 88% 12%,rgba(80,199,255,.28),transparent 32%),linear-gradient(125deg,#071a34,#0b3470 64%,#1760cf);box-shadow:0 20px 42px rgba(7,39,88,.16) }
.sgn-operations-hero .section-eyebrow { color:#8fd8ff }
.sgn-operations-hero h2 { margin:0;font-size:25px;letter-spacing:-.04em }
.sgn-operations-hero p { margin:6px 0 0;color:rgba(226,240,255,.68);font-size:11px }
.operations-balance { min-width:230px;padding:15px 18px;border:1px solid rgba(187,220,255,.16);border-radius:17px;background:rgba(255,255,255,.07) }
.operations-balance small,.operations-balance span,.operations-balance strong { display:block }
.operations-balance small { color:#9edcff;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase }
.operations-balance strong { margin:4px 0;font-size:25px;letter-spacing:-.04em }
.operations-balance span { color:rgba(230,242,255,.62);font-size:9px }
.operations-kpis { margin-bottom:18px }
.operation-filter-card { margin-bottom:18px;padding:0;overflow:hidden;border-radius:20px }
.operation-filter-heading { display:grid;grid-template-columns:minmax(210px,1fr) auto auto auto;gap:18px;align-items:end;padding:16px 18px;border-bottom:1px solid #e8edf3 }
.period-preset,.filter-tag-group,.maturity-filter,.protest-filter { display:grid;gap:7px }
.period-preset>label,.filter-tag-group>span,.maturity-filter>span,.protest-filter>span { color:#748398;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase }
.period-preset select { width:100%;min-height:39px;padding:8px 34px 8px 11px;border:1px solid #dfe5ed;border-radius:10px;background:#fafbfd;color:#34445a;font:inherit;font-size:10px;font-weight:700 }
.operation-filter-heading .operation-tabs { gap:6px;padding:0;border:0 }
.operation-filter-heading .operation-tabs button { min-height:39px;padding:8px 13px }
.maturity-filter>div { display:flex;gap:6px }
.maturity-filter label { display:flex;gap:6px;align-items:center;min-height:39px;padding:8px 11px;border:1px solid #dfe5ed;border-radius:10px;background:#fafbfd;color:#526176;font-size:9px;font-weight:700;white-space:nowrap;cursor:pointer }
.maturity-filter label.active { border-color:#bfd3f6;background:#eaf2ff;color:#1d5edb }
.maturity-filter label.is-disabled { cursor:not-allowed;opacity:.45 }
.maturity-filter input { width:14px;height:14px;accent-color:#2563eb }
.protest-filter { grid-template-columns:auto auto }
.protest-filter>span { grid-column:1/-1 }
.protest-filter label { display:flex;gap:6px;align-items:center;min-height:39px;padding:8px 11px;border:1px solid #dfe5ed;border-radius:10px;background:#fafbfd;color:#526176;font-size:9px;font-weight:700;white-space:nowrap;cursor:pointer }
.protest-filter input { width:15px;height:15px;accent-color:#2563eb }
.operation-tabs { padding:15px 18px;border-bottom:1px solid #e8edf3;overflow-x:auto }
.operation-tabs button { white-space:nowrap }
.operation-filter-row { display:flex;justify-content:space-between;gap:18px;align-items:end;padding:16px 18px }
.operation-filter-row .bill-search { width:min(410px,100%) }
.period-fields { display:flex;gap:8px;align-items:end }
.period-fields label { display:grid;gap:4px;color:#748398;font-size:8px;font-weight:800;text-transform:uppercase }
.period-fields input { min-height:36px;padding:7px 9px;border:1px solid #dfe5ed;border-radius:9px;background:#fafbfd;color:#46566c;font:inherit;font-size:10px }
.period-fields .btn { min-height:36px;padding:8px 11px;font-size:9px }
.period-fields .text-button { min-height:36px;padding:8px }
.custom-period { margin-left:auto }
.clear-operation-filters { min-height:36px;white-space:nowrap }
.bills-card.operation-table-card { padding:0;overflow:visible;border-radius:21px }
.operation-table-card>.table-toolbar { position:sticky;z-index:32;top:0;min-height:84px;border-radius:21px 21px 0 0;background:#fff;box-shadow:0 8px 18px rgba(20,44,78,.08) }
.operation-table thead th { position:sticky;z-index:31;top:84px;background:#f8fafc;box-shadow:0 1px 0 #e4eaf1 }
.operation-table { min-width:1280px }
.operation-table td { padding-top:13px;padding-bottom:13px }
.client-billing-header td { padding:0;border-top:12px solid #f3f6fa;border-bottom:0;background:#eef4ff }
.client-billing-header:first-child td { border-top:0 }
.client-billing-header td>div { display:grid;grid-template-columns:auto minmax(260px,1fr) auto auto;gap:12px;align-items:center;padding:13px 10px }
.client-group-check { display:flex;gap:11px;align-items:center;cursor:pointer }
.client-group-identity,.client-group-summary,.remittance-reference { display:grid;gap:3px }
.client-group-identity strong { color:#172c4d;font-size:11px }
.client-group-identity small,.client-group-summary small,.remittance-reference small { color:#74849a;font-size:8px }
.client-group-summary { min-width:150px;text-align:right }
.client-group-summary strong { color:#24466f;font-size:10px }
.client-select-action { min-height:32px;padding:7px 11px;border:1px solid #c8d9f4;border-radius:9px;background:#fff;color:#245fcf;font-size:8px;font-weight:800;white-space:nowrap }
.client-select-action:hover { background:#e6efff }
.client-billing-row td { background:#fff }
.operation-table .client-billing-row .selection-cell { width:82px;min-width:82px;padding-left:55px }
.client-billing-row:hover td { background:#fbfdff }
.remittance-reference strong { color:#2c5f9e;font-size:9px }
.transaction-reference { display:grid;gap:3px;min-width:145px }
.transaction-reference strong { color:#34445a;font-size:10px }
.transaction-reference small { color:#8794a6;font-size:8px }
.transaction-reference .badge { display:inline-flex;width:max-content;margin-top:2px;padding:4px 6px;font-size:7px }
.transaction-status-stack { display:grid;gap:5px;justify-items:start }
.transaction-status-stack small { color:#9b4b52;font-size:7px;font-weight:700 }
.expired-bill-notice { display:inline-flex;align-items:center;padding:8px 10px;border:1px solid #f0c7ca;border-radius:9px;background:#fff2f3;color:#b4232f;font-size:9px;font-weight:800 }
.badge-protested { background:#fff0e6;color:#b45309 }
.badge-neutral { background:#edf1f5;color:#59687b }
.no-document { color:#9aa5b4;font-size:9px;font-style:italic }
.transaction-actions { display:flex;gap:7px;align-items:center;min-width:390px }
.document-action-group { display:inline-flex;align-items:stretch }
.document-action-group .action-document { border-radius:9px 0 0 9px }
.action-email-mini { width:30px;min-height:32px;border:1px solid #dce5f0;border-left:0;border-radius:0 9px 9px 0;background:#fff;color:#52677f;font-size:10px }
.action-email-mini:not(:disabled):hover { background:#eef4ff;color:#245fcf }
.action-email-mini:disabled { cursor:not-allowed;opacity:.34 }
.action-document { display:inline-flex;gap:5px;align-items:center;justify-content:center;min-height:32px;padding:7px 9px;border:1px solid #dce5f0;border-radius:9px;background:#fff;color:#53647a;font-size:9px;font-weight:800;transition:.14s }
.action-document:not(:disabled):hover { transform:translateY(-1px);box-shadow:0 5px 13px rgba(25,47,80,.09) }
.action-document.boleto { border-color:#cbdcf9;background:#eef5ff;color:#215fcf }
.action-document.pdf { border-color:#f1d4d7;background:#fff5f6;color:#bd3d4a }
.action-document.xml { border-color:#cde9df;background:#effaf6;color:#087a59 }
.action-document.email { width:33px;border-color:#d9dff3;background:#f5f6ff;color:#455dc2 }
.action-document:disabled { cursor:not-allowed;opacity:.34;filter:grayscale(.4) }
.email-document-type { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px }
.email-document-type .email-choice { margin-top:0 }
.email-select-all { margin-bottom:9px;border-color:#bcd2f5;background:#f4f8ff }
.transaction-check { width:16px;height:16px;cursor:pointer;accent-color:#2563eb }
.operation-table .selection-cell { width:42px;min-width:42px;padding-left:15px;padding-right:6px;text-align:center }
.batch-toolbar { display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end }
.batch-toolbar .btn { padding:9px 11px;font-size:9px }
.operation-loader { display:grid;justify-items:center;gap:8px;min-height:270px;padding:58px 24px;text-align:center;background:linear-gradient(180deg,#fff,#f8fbff) }
.operation-loader strong { color:#183153;font-size:15px }
.operation-loader span:not(.operation-spinner) { max-width:480px;color:#66778d;font-size:11px;line-height:1.6 }
.operation-loader small { color:#94a0b0;font-size:9px }
.operation-spinner { width:44px;height:44px;margin-bottom:4px;border:4px solid #dce8fb;border-top-color:#2563eb;border-radius:50%;animation:operationSpin .75s linear infinite;box-shadow:0 0 0 8px rgba(37,99,235,.05) }
.button-spinner { width:13px;height:13px;border:2px solid #cbd8ea;border-top-color:#2563eb;border-radius:50%;animation:operationSpin .7s linear infinite }
@keyframes operationSpin { to { transform:rotate(360deg) } }
.filter-value-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-top:1px solid #e8edf3;background:#eef2f7 }
.filter-value-summary>span { padding:13px 18px;background:#fff }
.filter-value-summary small,.filter-value-summary strong { display:block }
.filter-value-summary small { margin-bottom:3px;color:#8491a3;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em }
.filter-value-summary strong { color:#28394f;font-size:14px }
.filter-value-summary>span.is-active { background:#effaf6 }
.filter-value-summary>span.is-active strong { color:#087a59 }
.batch-operation-dialog { width:min(610px,100%);max-height:calc(100vh - 36px);overflow-y:auto }
.batch-document-options { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px }
.batch-document-options .email-choice { margin-top:0;padding:12px }
.batch-document-options .batch-select-all { grid-column:1/-1;border-color:#bcd2f5;background:#f4f8ff }
.batch-destination { margin-top:12px;padding-top:12px;border-top:1px solid #edf1f5 }
.batch-progress { position:sticky;z-index:4;bottom:76px;margin-top:16px;padding:14px;border:1px solid #d8e4f5;border-radius:14px;background:#f8fbff;box-shadow:0 8px 22px rgba(25,55,95,.08);color:#738297;font-size:9px }
.batch-progress-status { display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center }
.batch-progress-status>.button-spinner { display:none;width:18px;height:18px }
.is-processing .batch-progress-status>.button-spinner { display:block }
.batch-progress-status strong,.batch-progress-status small { display:block }
.batch-progress-status strong { color:#233a59;font-size:11px }
.batch-progress-status small { margin-top:3px;color:#718198;font-size:9px }
.batch-progress-status b { color:#1f5ed6;font-size:12px }
.batch-progress-track { height:9px;margin-top:10px;overflow:hidden;border-radius:999px;background:#e5edf8 }
.batch-progress-track i { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#17a878);transition:width .3s ease }
.is-processing .batch-document-options,.is-processing .batch-destination,.is-processing .batch-validity-summary { opacity:.48;pointer-events:none }
.batch-validity-summary { display:flex;justify-content:space-between;gap:16px;align-items:center;margin:-7px 0 14px;padding:12px 14px;border:1px solid #f2d2a2;border-radius:12px;background:#fff9ed }
.batch-validity-summary strong { color:#8a4b08;font-size:11px }
.batch-validity-summary span { color:#93652f;font-size:9px;text-align:right }

@media (max-width: 760px) {
  .operation-table-card>.table-toolbar,.operation-table thead th { position:static }
  .admin-welcome { align-items:flex-start;padding:20px;flex-direction:column }
  .admin-user-chip { width:100%;min-width:0 }
  .sgn-operations-hero { align-items:flex-start;flex-direction:column;padding:21px }
  .operations-balance { width:100%;min-width:0 }
  .operation-filter-row { align-items:stretch;flex-direction:column }
  .operation-filter-heading { grid-template-columns:1fr }
  .operation-filter-heading .operation-tabs { overflow:visible }
  .protest-filter { grid-template-columns:1fr 1fr }
  .client-billing-header td>div { grid-template-columns:auto 1fr }
  .client-group-summary { text-align:left }
  .client-select-action { grid-column:1/-1 }
  .period-fields { flex-wrap:wrap }
  .period-fields label { flex:1;min-width:130px }
  .email-document-type { grid-template-columns:1fr }
  .filter-value-summary { grid-template-columns:1fr }
  .batch-document-options { grid-template-columns:1fr }
  .batch-toolbar { justify-content:flex-start }
}

.app-shell { background: #f3f6fa; }
.app-shell.sgn-shell { grid-template-columns: minmax(0, 1fr); }
.sgn-shell .main { width: 100%; max-width: 1920px; margin: 0 auto; }
.sidebar {
  background:
    radial-gradient(circle at 10% 0, rgba(31,111,235,.22), transparent 28%),
    linear-gradient(180deg, #081529, #07111f);
  border-right: 1px solid rgba(255,255,255,.05);
}

.sidebar .logo-mark {
  background: linear-gradient(145deg, #50d7ff, #2369ee 58%, #15399d);
  box-shadow: 0 15px 35px rgba(27,101,238,.34);
}

.client-card {
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border-color: rgba(157,206,255,.1);
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}

.nav button { font-size: 13px; }
.nav button.active {
  background: linear-gradient(110deg, rgba(38,112,242,.28), rgba(36,100,210,.12));
  box-shadow: inset 3px 0 #4dbdff;
}

.main { padding: 30px clamp(24px, 3vw, 46px) 54px; }
.topbar { margin-bottom: 30px; }
.topbar h1 { color: #0a1527; font-size: 31px; letter-spacing: -.045em; }
.topbar p { font-size: 13px; }

.section-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #2863df;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.section-eyebrow em {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #64748b;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .04em;
  vertical-align: middle;
}

.btn svg, .text-button svg { width: 17px; height: 17px; }
.btn:disabled { cursor: wait; opacity: .65; transform: none; }
.badge { padding: 6px 9px; font-size: 10px; }

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

.portal-kpi {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: center;
  overflow: hidden;
  min-height: 126px;
  padding: 20px;
  border: 1px solid #e3e9f2;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 9px 28px rgba(15,23,42,.055);
}

.portal-kpi::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -42px;
  top: -42px;
  border-radius: 50%;
  background: currentColor;
  opacity: .035;
}

.kpi-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.kpi-icon svg { width: 21px; height: 21px; }
.kpi-blue { color: #2563eb; }
.kpi-blue .kpi-icon { background: #eaf2ff; }
.kpi-green { color: #059669; }
.kpi-green .kpi-icon { background: #e7f8f2; }
.kpi-red { color: #dc4554; }
.kpi-red .kpi-icon { background: #fff0f1; }
.portal-kpi div { min-width: 0; }
.portal-kpi small { display: block; margin-bottom: 5px; color: #718096; font-size: 11px; font-weight: 700; }
.portal-kpi strong { display: block; overflow: hidden; color: #0c1729; font-size: clamp(19px, 2vw, 27px); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.portal-kpi div > span { display: block; margin-top: 4px; color: #8a98aa; font-size: 10px; }

.dashboard-primary {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: 18px;
  margin-bottom: 18px;
}

.finance-hero {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 95% 10%, rgba(66,196,255,.3), transparent 30%),
    radial-gradient(circle at 40% 110%, rgba(28,99,239,.55), transparent 42%),
    linear-gradient(135deg, #071a34 0%, #0b2e61 57%, #164fb7 100%);
  box-shadow: 0 22px 45px rgba(8,40,91,.18);
}

.finance-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(120deg, transparent 30%, #000);
}

.finance-hero > * { position: relative; z-index: 1; }
.finance-hero .section-eyebrow { color: #8ed9ff; }
.finance-hero-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.finance-hero-top h2 { max-width: 420px; margin: 0; font-size: clamp(22px, 2.4vw, 31px); letter-spacing: -.04em; }
.finance-hero .badge-success { background: rgba(79,226,166,.14); border: 1px solid rgba(104,238,183,.2); color: #79edbb; }
.finance-hero .badge-warning { background: rgba(255,201,79,.13); border: 1px solid rgba(255,210,107,.2); color: #ffd472; }
.finance-hero .badge-danger { background: rgba(255,109,121,.14); border: 1px solid rgba(255,134,144,.2); color: #ff9ca4; }

.finance-amount { margin: 36px 0 28px; }
.finance-amount span { display: block; margin-bottom: 4px; color: rgba(224,239,255,.58); font-size: 11px; }
.finance-amount strong { font-size: clamp(38px, 4.5vw, 60px); letter-spacing: -.055em; }
.finance-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.finance-meta > div { display: grid; grid-template-columns: 28px 1fr; padding: 12px; border: 1px solid rgba(190,221,255,.12); border-radius: 14px; background: rgba(255,255,255,.055); }
.finance-meta > div > span { grid-row: 1 / 3; color: #87cdff; }
.finance-meta svg { width: 17px; height: 17px; }
.finance-meta small { color: rgba(222,238,255,.5); font-size: 9px; }
.finance-meta strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.finance-actions { display: flex; gap: 10px; margin-top: 25px; }
.finance-actions .btn-primary { background: #fff; color: #1649aa; box-shadow: 0 12px 25px rgba(0,0,0,.15); }
.btn-glass { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; }
.finance-hero-empty { display: grid; place-content: center; text-align: center; }

.recent-card { min-height: 390px; padding: 25px; }
.premium-card-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.premium-card-header h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.premium-card-header p { margin: 5px 0 0; color: #8290a3; font-size: 11px; }
.text-button { border: 0; background: transparent; color: #2563eb; font-size: 11px; font-weight: 800; }
.recent-list { display: grid; }
.recent-bill { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; padding: 14px 0; border: 0; border-top: 1px solid #edf1f6; background: transparent; color: inherit; text-align: left; }
.recent-bill:hover .recent-bill-copy strong { color: #2563eb; }
.recent-bill-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #eff5ff; color: #2563eb; }
.recent-bill-icon svg { width: 18px; height: 18px; }
.recent-bill-copy strong, .recent-bill-copy small { display: block; }
.recent-bill-copy strong { margin-bottom: 3px; font-size: 12px; }
.recent-bill-copy small { color: #8996a8; font-size: 10px; }
.recent-bill-value { text-align: right; }
.recent-bill-value > strong { display: block; margin-bottom: 4px; font-size: 12px; }

.dashboard-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mock-invoice-card, .sync-card { min-height: 150px; }
.mock-invoice-body { display: flex; justify-content: space-between; align-items: end; padding: 16px; border-radius: 16px; background: #f7f9fc; }
.mock-invoice-body div > * { display: block; }
.invoice-highlight-action { display: grid; justify-items: end; gap: 10px; }
.invoice-highlight-action .btn { padding: 9px 12px; font-size: 9px; }
.invoice-highlight-action .btn svg { width: 14px; height: 14px; }
.mock-invoice-body small, .mock-invoice-body span { color: #8794a6; font-size: 10px; }
.mock-invoice-body div strong { margin: 3px 0; font-size: 19px; }
.sync-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 15px; align-items: center; }
.sync-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #eaf2ff; color: #2563eb; }
.sync-icon svg { width: 21px; height: 21px; }
.sync-card h2 { margin: 0 0 4px; font-size: 17px; }
.sync-card p { margin: 0; color: #8491a3; font-size: 11px; }

.bills-overview { display: flex; justify-content: space-between; gap: 22px; align-items: end; margin-bottom: 20px; padding: 0 2px; }
.bills-overview h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.bills-overview p { margin: 5px 0 0; color: #7f8da0; font-size: 12px; }
.bills-card { overflow: hidden; padding: 0; border-radius: 22px; }
.bills-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid #e8edf3; }
.bill-tabs { display: flex; gap: 5px; }
.bill-tabs button { display: flex; gap: 7px; align-items: center; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; color: #6e7d91; font-size: 11px; font-weight: 700; }
.bill-tabs button span { min-width: 19px; padding: 3px 5px; border-radius: 999px; background: #edf1f6; font-size: 9px; text-align: center; }
.bill-tabs button.active { background: #eaf2ff; color: #1d5edb; }
.bill-tabs button.active span { background: #fff; }
.bill-search { width: min(290px, 100%); display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #dfe5ed; border-radius: 12px; background: #fafbfd; color: #8c99aa; }
.bill-search:focus-within { border-color: #8bb3ff; box-shadow: 0 0 0 3px rgba(37,99,235,.08); background: #fff; }
.bill-search svg { width: 16px; height: 16px; }
.bill-search input { width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.bills-table-wrap { overflow-x: auto; }
.bills-table th { padding: 13px 20px; background: #f8fafc; font-size: 9px; }
.bills-table td { padding: 15px 20px; }
.bills-table tbody tr { transition: .15s; }
.bills-table tbody tr:hover { background: #fbfcfe; }
.document-cell { display: flex; gap: 10px; align-items: center; min-width: 150px; }
.document-cell > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eff5ff; color: #2563eb; }
.document-cell svg { width: 16px; height: 16px; }
.document-cell strong { margin: 0 0 2px; font-size: 11px; }
.document-cell small { font-size: 9px; }
.table-date { color: #4f5e72; font-size: 11px; white-space: nowrap; }
.date-danger { color: #dc4554; font-weight: 700; }
.table-money { margin: 0; font-size: 12px; white-space: nowrap; }
.table-download { padding: 8px 10px; border: 1px solid #dbe6f8; border-radius: 10px; background: #f2f7ff; color: #1f5ed6; font-size: 10px; box-shadow: none; }
.table-download:hover { background: #e7f0ff; }
.table-download svg { width: 14px; height: 14px; }
.paid-label { display: inline-flex; gap: 5px; align-items: center; color: #718096; font-size: 9px; font-weight: 700; }
.paid-label svg { width: 14px; height: 14px; color: #08a678; }
.table-empty { display: grid; justify-items: center; gap: 5px; padding: 45px 20px; color: #8a97a8; }
.table-empty svg { width: 28px; height: 28px; margin-bottom: 5px; }
.table-empty strong { color: #334155; }
.portal-pagination { display: flex; justify-content: space-between; align-items: center; padding: 15px 22px; border-top: 1px solid #e8edf3; color: #7b899c; font-size: 10px; }
.portal-pagination > div { display: flex; gap: 10px; align-items: center; }
.portal-pagination button { width: 32px; height: 32px; border: 1px solid #dfe5ed; border-radius: 9px; background: #fff; color: #334155; }
.portal-pagination button:disabled { opacity: .4; cursor: default; }
.portal-pagination strong { color: #526176; font-size: 10px; }

.invoice-table-card { border-radius: 22px; }
.invoice-source-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: #e9f9f3;
  color: #07845f;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.invoice-reference { display: grid; gap: 2px; min-width: 170px; }
.invoice-reference strong { margin: 0; color: #4d5d72; font-size: 10px; }
.invoice-reference small { font-size: 9px; }
.invoice-file-btn {
  display: grid;
  gap: 1px;
  min-width: 58px;
  padding: 7px 10px;
  border: 1px solid #e1e7ee;
  border-radius: 10px;
  background: #f7f9fb;
  color: #8995a5;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  cursor: not-allowed;
  opacity: .72;
}
.invoice-file-btn small { color: #a1aab7; font-size: 7px; font-weight: 600; }
.invoice-file-btn.available {
  border-color: #cfe0ff;
  background: #eef5ff;
  color: #1f5ed6;
  cursor: pointer;
  opacity: 1;
}
.invoice-file-btn.available small { color: #5f86ce; }
.invoice-file-btn.available:hover { background: #e2edff; }

.barcode-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 20, 39, .66);
  backdrop-filter: blur(8px);
  animation: barcodeFade .18s ease-out;
}
.barcode-dialog {
  position: relative;
  width: min(620px, 100%);
  padding: 30px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(4,18,41,.28);
  animation: barcodeUp .22s ease-out;
}
.barcode-dialog h2 { margin: 5px 0 7px; font-size: 25px; letter-spacing: -.04em; }
.barcode-dialog > p { margin: 0 0 22px; color: #7a8799; font-size: 12px; }
.barcode-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #526176;
  font-size: 23px;
  line-height: 1;
}
.barcode-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px 14px;
  overflow: hidden;
  border: 1px solid #e5eaf1;
  border-radius: 16px;
  background: #fff;
}
.barcode-font {
  display: block;
  color: #07111f;
  font-family: 'SGN Code 25I', monospace;
  font-size: 44px;
  font-weight: normal;
  line-height: 1;
  white-space: nowrap;
  transform: scaleY(1.72);
  transform-origin: center;
}
.barcode-dialog code {
  display: block;
  margin-top: 10px;
  color: #536174;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-align: center;
  word-break: break-all;
}
.barcode-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}
.barcode-details span { padding: 12px 14px; border-radius: 13px; background: #f6f8fb; }
.barcode-details small, .barcode-details strong { display: block; }
.barcode-details small { margin-bottom: 4px; color: #8a97a8; font-size: 9px; }
.barcode-details strong { color: #263449; font-size: 12px; }
.barcode-actions { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr; gap: 10px; }
.barcode-actions .btn { justify-content: center; padding-inline: 12px; white-space: nowrap; }
.barcode-actions .btn svg { width: 15px; height: 15px; }
.barcode-actions .btn.is-copied {
  border-color: #9de3c8;
  background: #e8faf3;
  color: #087a58;
  box-shadow: 0 0 0 3px rgba(8, 166, 120, .09);
}
.copy-success-icon {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #08a678;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
@keyframes barcodeFade { from { opacity: 0; } }
@keyframes barcodeUp { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.portal-empty { display: grid; justify-items: center; padding: 70px 24px; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; text-align: center; }
.portal-empty h2 { margin: 14px 0 7px; }
.portal-empty p { max-width: 480px; margin: 0 0 20px; color: #7d8a9c; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #eef4ff; color: #2563eb; }
.empty-icon svg { width: 24px; height: 24px; }
.portal-error .empty-icon { background: #fff0f1; color: #dc4554; }
.portal-loading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skeleton { border-radius: 20px; background: linear-gradient(90deg,#e8edf3 25%,#f5f7fa 50%,#e8edf3 75%); background-size: 200% 100%; animation: portalShimmer 1.4s infinite; }
.skeleton-kpi { height: 126px; }
.skeleton-feature { grid-column: 1 / -1; height: 390px; }
.skeleton-toolbar { grid-column: 1 / -1; height: 82px; }
.skeleton-table { grid-column: 1 / -1; height: 480px; }
@keyframes portalShimmer { to { background-position: -200% 0; } }

@media (max-width: 1180px) {
  .dashboard-primary { grid-template-columns: 1fr; }
  .recent-card { min-height: auto; }
  .dashboard-secondary { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .portal-kpis { grid-template-columns: 1fr; }
  .portal-kpi { min-height: 100px; }
  .finance-meta { grid-template-columns: 1fr; }
  .finance-hero { min-height: auto; }
  .finance-actions, .bills-overview, .bills-toolbar { align-items: stretch; flex-direction: column; }
  .bill-tabs { overflow-x: auto; padding-bottom: 3px; }
  .bill-tabs button { white-space: nowrap; }
  .bill-search { width: 100%; }
  .sync-card { grid-template-columns: 48px 1fr; }
  .sync-card .btn { grid-column: 1 / -1; }
  .barcode-dialog { padding: 24px 18px; }
  .barcode-details { grid-template-columns: 1fr; }
  .barcode-actions { grid-template-columns: 1fr; }
}
@font-face {
  font-family: 'SGN Code 25I';
  src: url('./Code25I.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: block;
}