/* ===============================
   Tucambista theme � Bootstrap 5
   =============================== */
:root {
   --bs-primary: #00264d;
   --bs-secondary: #6c757d;
   --bs-success: #198754;
   --bs-info: #1d63ff;
   --bs-warning: #ffc521;
   --bs-danger: #dc3545;
   --bs-light: #f8f9fa;
   --bs-dark: #212529;
   --bs-interbank: #05be50;
   --bs-banbif: #20a3ff;
   --bs-bcp: #002a8d;
   --bs-primary-rgb: 0, 38, 77;
   --bs-secondary-rgb: 108, 117, 125;
   --bs-success-rgb: 25, 135, 84;
   --bs-info-rgb: 29, 99, 255;
   --bs-warning-rgb: 255, 197, 33;
   --bs-danger-rgb: 220, 53, 69;
   --bs-light-rgb: 248, 249, 250;
   --bs-dark-rgb: 33, 37, 41;
   --bs-interbank-rgb: 5, 190, 80;
   --bs-banbif-rgb: 32, 163, 255;
   --bs-bcp-rgb: 0, 42, 141;
   --bs-body-font-family:
      "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
      "Noto Sans", "Liberation Sans", sans-serif;
   --bs-body-font-size: 13px;
   --bs-body-color: #333;
   --bs-body-bg: #fff;
   --ops-font-primary: "Albert Sans", "Segoe UI", sans-serif;
   --ops-font-accent: "Lexend", "Segoe UI", sans-serif;
   --ops-surface: #f9fbfd;
   --ops-border: #e4ecf1;
   --ops-heading: #002546;
   --ops-warning: #ffc700;
   --checker-bg: #f9fbfd;
   --checker-border: #e4ecf1;
   --checker-navy: #002546;
   --checker-blue: #00297b;
   --checker-muted: #5b7384;
   --checker-yellow: #ffc700;
   --checker-warning: #ffb404;
   --checker-soft-yellow: #ffecc0;
   --checker-danger: #fe5d67;
   --checker-soft-danger: rgba(254, 93, 103, 0.08);
   --checker-soft-warning: rgba(255, 196, 0, 0.14);
   --checker-soft-low: #f0f4f7;
   --checker-success: #005e36;
   --checker-soft-success: #b6f2d9;
   --conciliation-selected: #0022ff;
   --conciliation-match-exact: #e6f4ea;
   --conciliation-match-suggested: #fff7e6;
   --alti: #6a4fd6;
   --alti-soft: #efeaff;
}

html {
   position: relative;
   min-height: 100%;
}

body {
   margin-bottom: 120px;
}

body.checker-theme {
   font-family: var(--ops-font-primary);
   background: var(--checker-bg);
   padding-bottom: 120px;
}

body.ops-surface {
   font-family: var(--ops-font-primary);
   background: var(--ops-surface);
   color: var(--bs-body-color);
}

.ops-shell {
   /*max-width: 1140px;*/
   width: 100%;
   margin: 0 auto;
   padding: 12px clamp(12px, 3vw, 24px) 110px;
}

.conciliation-header-row {
   align-items: flex-start;
}

.btn-with-favicon {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
}

.btn-favicon {
   width: 18px;
   height: 18px;
   border-radius: 4px;
   object-fit: cover;
   border: 1px solid rgba(0, 0, 0, 0.1);
}

.ops-card {
   background: #fff;
   border: 1px solid var(--ops-border);
   border-radius: 14px;
   box-shadow: 0 12px 24px rgba(13, 34, 58, 0.05);
   padding: 16px;
}

.eyebrow-label {
   font-size: 0.72rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--checker-muted);
   font-weight: 600;
   margin-bottom: 0.15rem;
}

/* ------------------------------
   Application chrome (navbar)
   ------------------------------ */
.tc-navbar {
   background: linear-gradient(135deg, #001f3f 0%, #003b82 60%, #005ad4 100%);
   box-shadow: 0 12px 28px rgba(0, 28, 64, 0.28);
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   padding-block: 0.65rem;
}

.tc-navbar .navbar-brand {
   color: #fff;
   font-weight: 700;
   font-size: 1.15rem;
   letter-spacing: 0.04em;
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   text-transform: uppercase;
}

.tc-navbar .navbar-brand .brand-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #ffc400;
   box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.25);
}

.tc-navbar .nav-link {
   color: rgba(255, 255, 255, 0.82) !important;
   font-weight: 500;
   border-radius: 999px;
   padding: 0.45rem 0.9rem !important;
   transition:
      background 0.2s ease,
      color 0.2s ease;
}

.tc-navbar .nav-link:hover,
.tc-navbar .nav-link:focus,
.tc-navbar .nav-link.active {
   color: #fff !important;
   background: rgba(255, 255, 255, 0.16);
}

.tc-navbar .dropdown-menu {
   border-radius: 14px;
   border: none;
   box-shadow: 0 18px 40px rgba(0, 33, 82, 0.25);
   padding: 0.5rem;
}

.tc-navbar .dropdown-item {
   border-radius: 10px;
   font-weight: 500;
   color: #0b1f3f;
   padding: 0.55rem 0.85rem;
}

.tc-navbar .dropdown-item:hover,
.tc-navbar .dropdown-item:focus {
   background: rgba(0, 90, 212, 0.08);
}

.tc-navbar .navbar-toggler {
   border: 1px solid rgba(255, 255, 255, 0.4);
   color: #fff;
}

.tc-navbar .navbar-toggler-icon {
   filter: invert(1);
}

.tc-navbar .user-actions button,
.tc-navbar .user-actions .nav-link {
   color: #fff !important;
   font-weight: 600;
}

/* Headings (optional) */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 500;
   color: var(--bs-body-color);
}
/* Links */
a {
   color: rgba(var(--bs-primary-rgb), 1);
}

a:hover,
a:focus {
   color: rgba(var(--bs-primary-rgb), 0.8);
}

/* Focus ring */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
   box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* App helpers */
.small-font-table {
   font-size: 0.9rem;
}

.img-15px {
   width: 15px;
   height: 15px;
}

.btn-floating {
   position: fixed;
   bottom: 50px;
   right: 20px;
   z-index: 1050;
   border-radius: 999px;
   padding: 0.75rem 1rem;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Tables */
table thead th,
table thead td {
   position: sticky;
   top: 0;
   z-index: 2;
}

table.dataTable tbody tr.selected > td,
table.dataTable tbody tr.selected > th,
.table-striped > tbody > tr.selected:nth-of-type(odd) > * {
   background-color: rgba(var(--bs-primary-rgb), 1) !important;
   color: #fff !important;
}

.match-exact {
   background-color: var(--conciliation-match-exact) !important;
}

table.dataTable tbody tr.match-exact > td,
table.dataTable tbody tr.match-exact > th {
   background-color: var(--conciliation-match-exact) !important;
}

.match-suggested {
   background-color: var(--conciliation-match-suggested) !important;
}

table.dataTable tbody tr.match-suggested > td,
table.dataTable tbody tr.match-suggested > th {
   background-color: var(--conciliation-match-suggested) !important;
}

.row-selected {
   background-color: var(--conciliation-selected) !important;
   color: #fff !important;
}

.row-selected a {
   color: #fff !important;
   text-decoration: underline;
}

.code-op-col {
   word-break: break-word;
   white-space: normal !important;
}

/* Select2 (Bootstrap 5 theme) */
.select2-container--bootstrap-5 .select2-selection {
   border: 1px solid var(--bs-border-color, #dee2e6) !important;
   border-radius: 0.375rem !important;
   min-height: calc(2.25rem + 2px);
   padding: 0.375rem 0.75rem;
}

.select2-container--bootstrap-5 .select2-selection:focus {
   border-color: #86b7fe !important;
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select2-container .select2-selection--single {
   min-height: 46px;
   padding: 8px 12px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
   line-height: normal;
   padding-right: 2rem;
}

.select2-container .select2-selection--single .select2-selection__arrow {
   top: 50%;
   transform: translateY(-50%);
   right: 8px;
}

.select2-container--bootstrap-5 .select2-selection--single {
   position: relative;
   min-height: 48px;
   padding: 0.6rem 0.75rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
   font-size: 1rem;
   line-height: 1.5;
   padding-right: 2rem;
}

.select2-container--bootstrap-5 .select2-results__option {
   font-size: 1rem;
   padding: 0.5rem 0.75rem;
}

.select2-container--bootstrap-5 .select2-selection__arrow {
   position: absolute;
   right: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
   width: 1.25rem;
   height: 1.25rem;
   pointer-events: none;
}

.select2-container--bootstrap-5 .select2-selection__arrow b {
   display: inline-block !important;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0.35rem 0.35rem 0 0.35rem;
   border-color: currentColor transparent transparent transparent;
   color: var(--bs-secondary);
}

.bank-option {
   display: flex;
   align-items: center;
   gap: 8px;
}

.bank-option img {
   width: 20px;
   height: 20px;
   object-fit: contain;
   display: inline-block !important;
}

.select2-selection__rendered .bank-option img {
   display: inline-block !important;
}

/* Pending funds footer */
/* Fixed action bar; the row layout lives in the view via Bootstrap utilities
   (d-flex flex-column flex-lg-row), mirroring #tx-actionbar in TransactionChecker.cshtml.

   Never give a child of this bar a flex-basis in px. Below lg the bar is a flex
   column with an indefinite main size (position:fixed, no explicit height), so a
   px basis stops sizing width and becomes a hard height floor — that's what turned
   the three buttons into full-screen ovals. */
.conciliation-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 1100;
   background: #fff;
   border-top: 1px solid var(--ops-border);
   padding: 1rem clamp(1rem, 5vw, 2.5rem);
   padding-bottom: calc(1rem + env(safe-area-inset-bottom));
   box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
}

.footer-metrics {
   display: flex;
   flex: 1 1 0;
   min-width: 0;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
}

@media (min-width: 992px) {
   .footer-metrics {
      flex: 0 0 50%;
      max-width: 50%;
   }
}

.footer-metric {
   display: flex;
   flex-direction: column;
   flex: 1 1 110px;
   min-width: 110px;
   font-size: 0.85rem;
   color: var(--bs-secondary-color, #6c757d);
}

.footer-metric strong {
   font-size: 1.25rem;
   color: var(--bs-body-color, #0f172a);
}

/* align-items:center is load-bearing: the default `stretch` is what let each
   button grow to the height of the bar, which border-radius:999px then drew as
   an oval. */
.conciliation-footer-actions {
   display: flex;
   flex: 1 1 0;
   min-width: 0;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: 0.75rem;
}

.conciliation-footer-actions .btn {
   flex: 1 1 150px;
   min-height: 54px;
   padding-inline: 1.25rem;
   white-space: nowrap;
}

/* >=992px reproduces the previous desktop appearance exactly: the bar splits
   50/50, actions never wrap, buttons size to content with a 150px floor. */
@media (min-width: 992px) {
   .conciliation-footer-actions {
      flex: 0 0 50%;
      max-width: 50%;
      flex-wrap: nowrap;
   }

   .conciliation-footer-actions .btn {
      flex: 1 1 auto;
      min-width: 150px;
   }
}

/* Phone widths: compact enough that the metrics hold one row and the buttons
   hold two, keeping the whole bar under a third of a 667px-tall viewport. */
@media (max-width: 575.98px) {
   .footer-metrics {
      gap: 0.5rem;
   }

   .footer-metric {
      flex: 1 1 90px;
      min-width: 90px;
   }

   .footer-metric strong {
      font-size: 1rem;
   }

   .conciliation-footer-actions .btn {
      flex: 1 1 140px;
      min-height: 44px;
   }
}

/*Tool Tip More Info*/

thead > tr {
   background: #022c43;
}
.viewOps:focus {
   background-color: #343a40;
   color: #fff;
   border-color: #23272b;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.bg-segment-todos {
   background-color: #e0e0e0 !important;
   color: #333 !important;
}

.bg-segment-total {
   background-color: #1976d2 !important;
   color: #fff !important;
}

.bg-segment-masivo {
   background-color: #424242 !important;
   color: #fff !important;
}

.bg-segment-fxtrading {
   background-color: #388e3c !important;
   color: #fff !important;
}

.bg-segment-fx {
   background-color: #0288d1 !important;
   color: #fff !important;
}

.bg-segment-trading {
   background-color: #fbc02d !important;
   color: #333 !important;
}

.bg-segment-casas {
   background-color: #8e24aa !important;
   color: #fff !important;
}

.bg-segment-mesas {
   background-color: #d84315 !important;
   color: #fff !important;
}

/* ------------------------------
   Transaction summary (Resumen)
   ------------------------------ */
.ops-summary-shell {
   font-family: var(--ops-font-primary);
   padding: 8px 0 32px;
}

.ops-summary-header {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
}

.ops-summary-title {
   font-size: 1.4rem;
   font-weight: 600;
   color: var(--ops-heading);
}

.ops-summary-actions {
   display: flex;
   gap: 8px;
}

.ops-summary-actions .btn-primary {
   background: #ffb400;
   border-color: #ffb400;
   color: #1c1c1c;
   font-weight: 600;
}

.ops-summary-card {
   background: #fff;
   border: 1px solid var(--ops-border);
   border-radius: 16px;
   box-shadow: 0 18px 32px rgba(13, 34, 58, 0.06);
   padding: 18px 22px;
   margin-bottom: 18px;
}

.ops-summary-table {
   border: 1px solid var(--ops-border);
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
}

.ops-summary-table thead {
   background: #eff4ff;
   color: #0c294f;
   text-transform: uppercase;
   font-size: 0.78rem;
   letter-spacing: 0.06em;
}

.ops-summary-table th,
.ops-summary-table td {
   border-color: #edf1f7 !important;
   padding: 0.55rem 0.75rem;
}

.ops-summary-table tbody tr {
   transition: background 0.15s ease;
}

.ops-summary-table tbody tr:hover {
   background: rgba(4, 122, 255, 0.04);
}

.ops-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border-radius: 999px;
   border: 1px solid rgba(6, 95, 212, 0.16);
   padding: 4px 10px;
   font-size: 0.78rem;
   color: #064475;
   background: rgba(6, 95, 212, 0.08);
}

.ops-summary-table tfoot {
   background: #f9fbfd;
   font-weight: 600;
}

.ops-stage-cell {
   min-width: 54px;
   text-align: center;
}

/* ------------------------------
   Transaction checker module
   ------------------------------ */
.checker-shell {
   background: var(--checker-bg);
   padding: 16px 0 72px;
}

.checker-heading {
   color: var(--checker-blue);
   font-weight: 700;
   font-size: 1.5rem;
   font-family: var(--ops-font-primary);
}

.checker-info-card {
   background: #eff0ff;
   border: 1px solid #d9e0ff;
   border-radius: 12px;
   padding: 10px 16px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
}

.checker-info-card .info-icon {
   color: var(--checker-blue);
   font-size: 1.25rem;
}

.severity-chip {
   font-family: var(--ops-font-accent);
   font-size: 0.75rem;
   border-radius: 999px;
   padding: 4px 12px;
   border: 1px solid transparent;
   font-weight: 500;
   text-transform: capitalize;
}

.severity-chip.high {
   border-color: var(--checker-danger);
   color: var(--checker-danger);
   background: #fff;
}

.severity-chip.medium {
   border-color: var(--checker-warning);
   color: var(--checker-warning);
   background: #fff;
}

.severity-chip.low {
   border-color: var(--checker-blue);
   color: var(--checker-blue);
   background: #fff;
}

.warning-item {
   display: flex;
   gap: 10px;
   align-items: center;
   border-radius: 12px;
   padding: 10px 14px;
   border: 1px solid var(--checker-border);
   background: #fff;
   color: #40505e;
   font-size: 0.88rem;
}

.warning-item input[type="checkbox"] {
   width: 18px;
   height: 18px;
   border-radius: 4px;
}

.warning-item-high {
   border-color: var(--checker-danger);
   background: var(--checker-soft-danger);
   color: #7c1d1d;
}

.warning-item-medium {
   border-color: var(--checker-warning);
   background: var(--checker-soft-warning);
   color: #7a4d00;
}

.warning-item-low {
   border-color: var(--checker-border);
   background: var(--checker-soft-low);
   color: #40505e;
}

.warn-check.is-invalid {
   border-color: var(--checker-danger) !important;
   outline: 2px solid var(--checker-danger);
   box-shadow: 0 0 0 0.2rem rgba(254, 93, 103, 0.25);
}

.checker-card {
   background: #fff;
   border: 1px solid var(--checker-border);
   border-radius: 14px;
   padding: 18px 20px;
   box-shadow: var(--ops-card-shadow, 0 12px 28px rgba(0, 37, 70, 0.04));
   width: 100%;
   max-width: 100%;
}

.section-title {
   font-weight: 600;
   color: var(--checker-blue);
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
}

.section-title .section-icon {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--checker-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--checker-blue);
}

.meta-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 10px;
}

.meta-chip {
   background: var(--checker-bg);
   border-radius: 6px;
   padding: 5px;
   border: 1px solid #edf2f6;
   display: flex;
   gap: 5px;
   align-items: flex-start;
}

.meta-chip-split .meta-chip-split-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(120px, 1fr));
   gap: 4px 6px;
}

.meta-chip-split-grid span {
   font-size: 0.95rem;
}

@media (max-width: 575.98px) {
   .meta-chip-split .meta-chip-split-grid {
      grid-template-columns: 1fr;
   }
}

.checker-stepper {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 12px;
}

.step-badge {
   border-radius: 999px;
   border: 1px solid var(--checker-border);
   padding: 3px 10px;
   font-size: 0.74rem;
   color: #5b6c7b;
   background: #f4f6f8;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   text-transform: capitalize;
}

.step-badge i {
   font-size: 0.9rem;
}

.step-badge.is-complete {
   background: var(--checker-soft-success);
   color: var(--checker-success);
   border-color: var(--checker-soft-success);
}

.step-badge.is-error {
   background: var(--checker-soft-danger);
   color: var(--checker-danger);
   border-color: var(--checker-danger);
}

.step-badge.is-warning {
   background: var(--checker-soft-warning);
   color: var(--checker-warning);
   border-color: var(--checker-warning);
}

.step-badge.is-pending {
   background: var(--checker-soft-low);
   color: var(--checker-muted);
   border-color: var(--checker-border);
}

.data-callout {
   background: #eff6ff;
   border-radius: 12px;
   padding: 12px 14px;
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   justify-content: space-between;
}

.data-callout .value {
   font-size: 1.35rem;
   font-weight: 700;
   color: #2c363d;
}

.rate-chip {
   border-radius: 999px;
   background: #fff;
   border: 1px solid var(--checker-border);
   padding: 2px 10px;
   font-size: 0.8rem;
   color: var(--checker-muted);
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

#rate-chip {
   margin-left: 4px;
}

.checker-state-card {
   background: #fff;
   border: 1px dashed var(--checker-border);
   border-radius: 14px;
   padding: 36px 24px;
   box-shadow: 0 12px 28px rgba(0, 37, 70, 0.04);
   margin-bottom: 24px;
}

.checker-funds-table thead {
   background: var(--checker-blue);
   color: #fff;
}

.checker-funds-table th {
   font-weight: 600;
}

.checker-tabs {
   display: flex;
   border-bottom: 1px solid var(--checker-border);
   margin-bottom: 12px;
}

.checker-tab {
   flex: 1;
   text-align: center;
   padding: 8px 12px;
   border: none;
   background: transparent;
   font-weight: 600;
   color: #7e93a1;
}

.checker-tab.active {
   color: var(--checker-blue);
   border-bottom: 3px solid var(--checker-blue);
}

.receipt-frame {
   border: 1px dashed var(--checker-border);
   border-radius: 14px;
   background: var(--checker-bg);
   min-height: 60vh;
   max-height: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.receipt-frame img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
}

.tc-pagination {
   border-top: 1px solid var(--checker-border, #d7dee9);
   padding-top: 1rem;
}

.tc-pagination__controls label {
   font-weight: 500;
}

.tc-pagination .btn-group > .btn {
   min-width: 2.25rem;
}

.tc-pagination--disabled {
   opacity: 0.65;
   pointer-events: none;
}

#receipt-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
}

#receipt-placeholder {
   color: var(--checker-muted);
   font-weight: 600;
}

#btn-magnify {
   border: none;
   background: #fff;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

#tx-actionbar {
   z-index: 1030;
   padding-bottom: env(safe-area-inset-bottom);
}

.checker-actionbar {
   background: #fff;
   border-top: 1px solid var(--checker-border);
   box-shadow: 0 -6px 18px rgba(0, 37, 70, 0.08);
}

.checker-primary-btn {
   background: var(--checker-yellow);
   color: var(--checker-navy);
   font-weight: 700;
   border: none;
}

.checker-primary-btn:hover {
   background: #f3b500;
   color: var(--checker-navy);
}

.checker-secondary-btn {
   border: 1px solid var(--checker-navy);
   color: var(--checker-navy);
   font-weight: 600;
   background: #fff;
}

.checker-secondary-btn:hover {
   background: var(--checker-navy);
   color: #fff;
}

#pending-total {
   background: var(--checker-border);
   color: var(--checker-blue);
   font-weight: 600;
}

.checker-tabs button {
   font-family: var(--ops-font-primary);
}

.checker-zoom-body {
   background: #f8f9fa;
}

.checker-zoom-toolbar {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 6px;
   margin-bottom: 8px;
}

.checker-zoom-btn {
   border: 1px solid var(--checker-border);
   background: #fff;
   color: var(--checker-blue);
   border-radius: 8px;
   padding: 4px 10px;
   font-weight: 600;
   font-size: 0.85rem;
}

.checker-zoom-btn:hover,
.checker-zoom-btn:focus {
   background: var(--checker-blue);
   color: #fff;
}

.checker-zoom-level {
   font-weight: 600;
   color: var(--checker-muted);
   min-width: 48px;
   text-align: right;
}

.checker-zoom-frame {
   border: 1px solid var(--checker-border);
   border-radius: 12px;
   background: #fff;
   min-height: 55vh;
   max-height: 70vh;
   overflow: auto;
   cursor: grab;
}

.checker-zoom-frame.is-panning {
   cursor: grabbing;
}

.checker-zoom-frame img {
   max-width: none;
   width: auto;
   height: auto;
   display: block;
   transform-origin: center center;
   transition: transform 0.1s ease-out;
}

/* ------------------------------
   Pending funds conciliation
   ------------------------------ */
/* --conciliation-footer-height is written by the view from the bar's measured
   offsetHeight (ResizeObserver), so the compensation tracks the real bar at any
   width instead of the 150px/200px constants this used to hardcode. The
   fallback only applies before the first measurement. */
.conciliation-shell {
   padding-top: 4px;
   padding-bottom: calc(var(--conciliation-footer-height, 150px) + 1rem);
}

.conciliation-header {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 16px;
}

.conciliation-title {
   font-size: 1.55rem;
   font-weight: 700;
   color: var(--ops-heading);
   margin-bottom: 0.1rem;
}

.conciliation-lede {
   color: var(--checker-muted);
   max-width: 560px;
   margin-bottom: 0;
   font-size: 0.95rem;
}

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

.conciliation-header-actions .btn {
   border-radius: 999px;
   font-weight: 600;
}

.conciliation-action {
   border-radius: 999px;
   font-weight: 600;
}

.legend-dot {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 600;
   border-radius: 999px;
   padding: 4px 12px;
   background: var(--ops-surface);
   color: var(--checker-blue);
}

.legend-dot::before {
   content: "";
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: currentColor;
}

.legend-dot--exact {
   background: var(--conciliation-match-exact);
   color: #0c6b34;
}

.legend-dot--suggested {
   background: var(--conciliation-match-suggested);
   color: #a15b00;
}

.conciliation-legends--compact {
   margin-top: 10px;
   gap: 6px;
}

.conciliation-legends--compact .legend-dot {
   padding: 3px 10px;
   font-size: 0.7rem;
}

.conciliation-legends--inline {
   display: flex;
   align-items: center;
   gap: 6px;
}

.conciliation-legends--inline .legend-dot {
   padding: 3px 10px;
   font-size: 0.72rem;
}

.conciliation-balance-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   border-radius: 12px;
   background: #f0f4ff;
   font-weight: 600;
   color: var(--checker-blue);
}

.conciliation-balance-chip strong {
   font-size: 1.05rem;
}

.conciliation-balance-chip--inline {
   width: 100%;
   justify-content: space-between;
}

.chip-caption {
   font-size: 0.75rem;
   color: var(--checker-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.conciliation-table-card {
   padding: 0;
   height: 100%;
}

.conciliation-table-head {
   padding: 16px 16px 10px;
   border-bottom: 1px solid var(--ops-border);
   display: flex;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
}

.conciliation-table-meta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: flex-end;
}

.conciliation-table-meta .meta-chip {
   background: #f4f7fb;
   border: 1px solid var(--ops-border);
   padding: 6px 10px;
   gap: 0;
   flex-direction: column;
   min-width: 110px;
}

.conciliation-table-meta .meta-chip span {
   font-size: 0.7rem;
   color: var(--checker-muted);
}

.conciliation-table-meta .meta-chip strong {
   font-size: 0.95rem;
   color: var(--checker-blue);
}

.conciliation-table-shell {
   padding: 0 16px 16px;
}

.conciliation-table-shell .table {
   margin-bottom: 0;
}

.conciliation-table {
   font-size: 0.78rem;
}

.conciliation-table--operations thead {
   background: #eff4ff;
   color: var(--checker-blue);
}

.conciliation-table--movements thead {
   background: #001c39;
   color: #fff;
}

@media (max-width: 991px) {
   .conciliation-header-actions {
      width: 100%;
      justify-content: flex-start;
   }
}

@media (max-width: 991px) {
   .checker-shell {
      padding-bottom: 160px;
   }

   .meta-grid {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   }
}

@media (max-width: 992px) {
   .tc-navbar .navbar-collapse {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 16px;
      padding: 12px;
      margin-top: 12px;
   }

   .ops-summary-shell {
      padding-top: 4px;
   }
}

/* Refund Requests - image display uploader */
.image-display-uploader {
   border: 1px dashed var(--checker-border, #cfd9e4);
   border-radius: 0.75rem;
   padding: 1.5rem;
   text-align: center;
   background: var(--ops-surface, #f9fbfd);
   cursor: pointer;
   transition:
      border-color 0.2s ease,
      background 0.2s ease;
   min-height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}
.image-display-uploader:focus {
   outline: 2px solid var(--checker-blue, #00297b);
   border-color: var(--checker-blue, #00297b);
}

/* Estado mientras se arrastra un archivo encima de la zona. */
.image-display-uploader--dragover {
   border-color: var(--bs-info, #1d63ff);
   background: #f6f9fe;
}

.image-display-uploader__placeholder {
   color: var(--checker-muted, #5b7384);
}

.image-display-uploader__placeholder i {
   font-size: 2rem;
   color: var(--checker-blue, #00297b);
}

.image-display-uploader__preview img {
   max-height: 220px;
   width: auto;
}

.image-display-uploader--uploading::after {
   content: "Subiendo…";
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.85);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: var(--checker-blue, #00297b);
}

/* Customer detail document viewer */
.doc-viewer-placeholder {
   position: absolute;
   inset: 0;
   border-radius: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 1.5rem;
   background: rgba(255, 255, 255, 0.85);
   color: var(--checker-muted, #5b7384);
   font-weight: 500;
   pointer-events: none;
}

/* =====================================================================
   FX Side Panel (Balances + Competition)
   Floating left-side toggle + slide-in overlay shown in /FxTransaction.
   Both the toggle and the panel are position: fixed (anchored to the
   viewport's left edge) and use fixed vertical offsets relative to the
   viewport rather than being synchronized to .operations-table-container.
   ===================================================================== */
.fx-side-panel-toggle {
   position: fixed;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1041;
   width: 32px;
   height: 56px;
   border: 1px solid var(--ops-border, #dfe6ee);
   border-left: none;
   border-radius: 0 8px 8px 0;
   background: #002546;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(13, 34, 58, 0.18);
   transition: background 0.2s ease, left 0.28s ease;
}

.fx-side-panel-toggle:hover {
   background: #003a6e;
}

/* When the panel is open, the toggle moves with the panel's right edge so it
   acts as a "close" handle that sticks out of the panel instead of overlapping
   the panel content. Width here must match .fx-side-panel width. */
.fx-side-panel-toggle--open {
   left: min(900px, 70vw);
}

.fx-side-panel-toggle__icon {
   transition: transform 0.25s ease;
}

.fx-side-panel-toggle--open .fx-side-panel-toggle__icon {
   transform: rotate(180deg);
}

.fx-side-panel {
   position: fixed;
   left: 0;
   top: 80px;
   bottom: 16px;
   z-index: 1035;
   width: min(900px, 70vw);
   max-width: 70vw;
   background: #f6f8fb;
   border: 1px solid var(--ops-border, #dfe6ee);
   border-radius: 0 14px 14px 0;
   box-shadow: 12px 0 28px rgba(13, 34, 58, 0.18);
   transform: translateX(-100%);
   transition: transform 0.28s ease;
   overflow: hidden;
   pointer-events: none;
   opacity: 0;
}

.fx-side-panel--open {
   transform: translateX(0);
   pointer-events: auto;
   opacity: 1;
}

.fx-side-panel__inner {
   height: 100%;
   overflow-y: auto;
   padding: 12px;
}

.fx-side-panel__card {
   margin-bottom: 0;
   padding: 12px;
}

.fx-side-panel__table-shell {
   overflow: visible;
}

.fx-side-panel__table-shell .table {
   margin-bottom: 0;
   table-layout: fixed;
   width: 100%;
}

.fx-side-panel__table-shell thead th {
   font-size: 0.7rem;
   font-weight: 600;
   padding: 0.35rem 0.3rem;
   white-space: normal;
   line-height: 1.15;
   text-align: center;
}

.fx-side-panel__table-shell tbody td {
   font-size: 0.72rem;
   padding: 0.35rem 0.3rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.fx-side-panel__table-shell .competitor-better {
   background-color: #f8d7da !important;
   color: #721c24 !important;
   font-weight: 600;
}

/* Width tuning for the Saldos table (12 columns) to fit without horizontal
   scroll. Order matches the th list in the partial. */
#fx-panel-saldos-table th:nth-child(1),
#fx-panel-saldos-table td:nth-child(1) { width: 11%; text-align: left; white-space: nowrap; overflow: visible; text-overflow: clip; }
#fx-panel-saldos-table th:nth-child(3),
#fx-panel-saldos-table td:nth-child(3),
#fx-panel-saldos-table th:nth-child(8),
#fx-panel-saldos-table td:nth-child(8),
#fx-panel-saldos-table th:nth-child(12),
#fx-panel-saldos-table td:nth-child(12) { width: 5%; }
#fx-panel-saldos-table th:nth-child(2),
#fx-panel-saldos-table td:nth-child(2),
#fx-panel-saldos-table th:nth-child(7),
#fx-panel-saldos-table td:nth-child(7),
#fx-panel-saldos-table th:nth-child(11),
#fx-panel-saldos-table td:nth-child(11) { width: 9%; }
#fx-panel-saldos-table th:nth-child(4),
#fx-panel-saldos-table td:nth-child(4),
#fx-panel-saldos-table th:nth-child(5),
#fx-panel-saldos-table td:nth-child(5),
#fx-panel-saldos-table th:nth-child(6),
#fx-panel-saldos-table td:nth-child(6),
#fx-panel-saldos-table th:nth-child(9),
#fx-panel-saldos-table td:nth-child(9),
#fx-panel-saldos-table th:nth-child(10),
#fx-panel-saldos-table td:nth-child(10) { width: 8%; }

#fx-panel-competencia-table th:nth-child(1),
#fx-panel-competencia-table td:nth-child(1) { width: 18%; }
#fx-panel-competencia-table th:nth-child(2),
#fx-panel-competencia-table td:nth-child(2),
#fx-panel-competencia-table th:nth-child(3),
#fx-panel-competencia-table td:nth-child(3),
#fx-panel-competencia-table th:nth-child(4),
#fx-panel-competencia-table td:nth-child(4) { width: 14%; }
#fx-panel-competencia-table th:nth-child(5),
#fx-panel-competencia-table td:nth-child(5) { width: 22%; white-space: nowrap; }


/* =====================================================================
   Shared UI components (tc-badge, tc-grid)
   Used by the TcBadgeTagHelper and tcDataGrid (wwwroot/js/dataGrid.js).
   Tones are the single palette for ad-hoc badges; transaction status
   badges keep using bg-status{group} via renderStatusBadge.
   See docs/ui-components.md.
   ===================================================================== */
.tc-badge {
   font-size: 0.78rem;
   font-weight: 600;
   padding: 0.35em 0.65em;
   border-radius: 999px;
}

.tc-badge--success { background: #e7f6ec; color: #157347; }
.tc-badge--warning { background: #fff4d6; color: #8a6100; }
.tc-badge--danger  { background: #fde7e9; color: #b02a37; }
.tc-badge--info    { background: #e3f1fb; color: #0b5e8f; }
.tc-badge--neutral { background: #eef1f5; color: #5b7384; }
.tc-badge--primary { background: #e5ebf7; color: var(--checker-blue, #00297b); }

.tc-grid__message-row td {
   text-align: center;
   padding: 2rem 1rem;
}

.tc-grid__loading,
.tc-grid__empty,
.tc-grid__error {
   color: var(--checker-muted, #5b7384);
   font-weight: 500;
}

/* Visor de PDF dentro del modal ampliado de constancias. */
.checker-zoom-frame #refundZoomPdf {
   width: 100%;
   height: 70vh;
   border: 0;
}

/* Cabeceras ordenables de tcDataGrid. El componente las marca con
   .tc-grid__sortable; esto apuntaba antes a .js-refund-sort, la clase de la
   implementación a mano, que desapareció al migrar la grilla — el selector quedó
   muerto y con él la pista visual de que la cabecera se puede pulsar. */
.tc-grid thead .tc-grid__sortable {
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
}
.tc-grid thead .tc-grid__sortable:hover {
   color: var(--checker-blue, #00297b);
}
/* El menú de desbordamiento de acciones no necesita la flecha de Bootstrap. */
.refund-actions .dropdown-toggle-no-caret::after {
   display: none;
}

/* Mientras un menú de acciones está abierto, la tabla deja de recortar para que el
   menú se vea completo. El scroll horizontal se restaura al cerrarlo. */
.table-responsive--menu-open {
   overflow: visible !important;
}
/* El menú va por encima de las cabeceras sticky de la tabla. */
.refund-actions .dropdown-menu {
   z-index: 1056;
}

/* Home panel (TT-621): layout and highlight rules; --alti is the only custom color token. */
.home-panel {
   font-family: var(--ops-font-primary);
   padding: 8px 0 32px;
}

.home-panel__header {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 12px;
}

.home-panel__title {
   font-size: 1.4rem;
   font-weight: 600;
   color: var(--ops-heading);
   margin: 0;
}

.home-panel__subtitle {
   color: var(--checker-muted);
   font-size: 0.85rem;
   margin: 2px 0 0;
}

.home-panel__actions {
   display: flex;
   align-items: center;
   gap: 12px;
}

.home-panel__updated {
   color: var(--checker-muted);
   font-size: 0.78rem;
}

.home-panel__section {
   margin: 6px 0 8px;
}

.home-panel__grid {
   display: grid;
   gap: 18px;
   margin-bottom: 20px;
}

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

.home-panel__grid--bottom {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
   .home-panel__grid--top,
   .home-panel__grid--bottom {
      grid-template-columns: minmax(0, 1fr);
   }
}

.home-card {
   position: relative;
   background: #fff;
   border: 1px solid var(--ops-border);
   border-top: 5px solid var(--ops-warning);
   border-radius: 14px;
   box-shadow: 0 12px 24px rgba(13, 34, 58, 0.05);
   padding: 18px 20px;
}

.home-card--alti {
   border-top-color: var(--alti);
   --home-card-halo: rgba(106, 79, 214, 0.35);
}

.home-card--payments {
   --home-card-halo: rgba(220, 53, 69, 0.3);
}

/* Highlighted while any "hot" line is above zero (homePanel.js). */
.home-card.is-active {
   animation: home-card-pulse 2.2s infinite;
}

@keyframes home-card-pulse {
   0% { box-shadow: 0 0 0 0 var(--home-card-halo); }
   70% { box-shadow: 0 0 0 12px transparent; }
   100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
   .home-card.is-active {
      animation: none;
      box-shadow: 0 0 0 3px var(--home-card-halo);
   }
}

.home-card__badge {
   position: absolute;
   top: -11px;
   right: 14px;
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 0.7rem;
   font-weight: 700;
   background: var(--checker-warning);
   color: #4a2c00;
}

.home-card--payments .home-card__badge {
   background: #ffd3d6;
   color: #8a1520;
}

.home-card__title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--ops-heading);
   margin-bottom: 10px;
}

.home-card--alti .home-card__title {
   color: var(--alti);
}

.home-card__tag {
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.home-card__tag--supervisors {
   background: var(--checker-soft-yellow);
   color: #8a5a00;
}

.home-card__tag--operators {
   background: rgba(29, 99, 255, 0.1);
   color: var(--bs-info);
}

.home-line {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 7px 6px;
   border-radius: 8px;
   font-size: 0.92rem;
   color: var(--bs-body-color);
   text-decoration: none;
}

a.home-line:hover {
   background: #eff4ff;
   color: var(--bs-body-color);
}

.home-line--divider {
   border-top: 1px dashed var(--ops-border);
   border-radius: 0 0 8px 8px;
   margin-top: 6px;
   padding-top: 12px;
}

.home-line__count {
   font-weight: 700;
   color: var(--bs-info);
   font-variant-numeric: tabular-nums;
}

.home-line.is-zero .home-line__count,
.home-line.is-unavailable .home-line__count {
   color: var(--checker-muted);
   font-weight: 600;
}

.home-line--hot.is-positive .home-line__count {
   color: var(--bs-danger);
   font-size: 1.05rem;
}

.home-panel.is-loading .home-line__count {
   opacity: 0.45;
}

.home-panel__toast {
   position: fixed;
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
   z-index: 1080;
   padding: 10px 18px;
   border-radius: 8px;
   background: var(--ops-heading);
   color: #fff;
   font-size: 0.85rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.home-panel__toast.is-visible {
   opacity: 1;
}