/* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/sueldos/
   sueldos.css

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   SUELDOS

   PARTE 1 DE 3
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.sueldos-page {
  --sueldos-bg: #f6f7f9;
  --sueldos-surface: #ffffff;
  --sueldos-surface-soft: #f8f9fb;
  --sueldos-surface-strong: #f1f3f5;

  --sueldos-text: #101214;
  --sueldos-text-strong: #050607;
  --sueldos-text-soft: #555b63;
  --sueldos-text-muted: #747b84;

  --sueldos-border: #d7dbe0;
  --sueldos-border-strong: #c5cad1;
  --sueldos-border-dark: #aeb4bc;

  --sueldos-primary: #111315;
  --sueldos-primary-hover: #25282b;
  --sueldos-primary-text: #ffffff;

  --sueldos-success: #0f7a42;
  --sueldos-success-bg: #edf9f2;
  --sueldos-success-border: #b8dfca;

  --sueldos-warning: #9a6200;
  --sueldos-warning-bg: #fff8e8;
  --sueldos-warning-border: #ead39c;

  --sueldos-danger: #bd2b32;
  --sueldos-danger-bg: #fff1f2;
  --sueldos-danger-border: #efc0c3;

  --sueldos-info: #1b63b6;
  --sueldos-info-bg: #eef5ff;
  --sueldos-info-border: #bfd4f1;

  --sueldos-radius-xs: 7px;
  --sueldos-radius-sm: 10px;
  --sueldos-radius-md: 14px;
  --sueldos-radius-lg: 18px;
  --sueldos-radius-xl: 22px;

  --sueldos-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.035),
    0 4px 12px rgba(0, 0, 0, 0.025);

  --sueldos-shadow-md:
    0 12px 40px rgba(0, 0, 0, 0.08);

  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  box-sizing: border-box;

  color: var(--sueldos-text);
  background: var(--sueldos-bg);

  overflow-x: clip;
}


.sueldos-page *,
.sueldos-page *::before,
.sueldos-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark .sueldos-page,
body.dark .sueldos-page,
[data-theme="dark"] .sueldos-page {
  --sueldos-bg: #000000;
  --sueldos-surface: #070707;
  --sueldos-surface-soft: #0d0d0d;
  --sueldos-surface-strong: #111111;

  --sueldos-text: #f5f5f5;
  --sueldos-text-strong: #ffffff;
  --sueldos-text-soft: #d4d4d4;
  --sueldos-text-muted: #a7a7a7;

  --sueldos-border: #292929;
  --sueldos-border-strong: #383838;
  --sueldos-border-dark: #4a4a4a;

  --sueldos-primary: #ffffff;
  --sueldos-primary-hover: #e9e9e9;
  --sueldos-primary-text: #000000;

  --sueldos-success: #75d69f;
  --sueldos-success-bg: #0d1e14;
  --sueldos-success-border: #244d35;

  --sueldos-warning: #f2c56f;
  --sueldos-warning-bg: #211a0b;
  --sueldos-warning-border: #554018;

  --sueldos-danger: #ff8d93;
  --sueldos-danger-bg: #220d0f;
  --sueldos-danger-border: #592126;

  --sueldos-info: #8bbcf4;
  --sueldos-info-bg: #0d1724;
  --sueldos-info-border: #263e5b;

  --sueldos-shadow-sm:
    0 1px 0 rgba(255, 255, 255, 0.03);

  --sueldos-shadow-md:
    0 16px 48px rgba(0, 0, 0, 0.7);
}


/* =========================================================
   PAGE INNER
   ========================================================= */

.sueldos-page__inner {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  padding:
    24px
    24px
    42px;

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.sueldos-header {
  position: relative;

  width: 100%;
  min-width: 0;

  margin-bottom: 18px;

  border: 1px solid var(--sueldos-border);
  border-radius: var(--sueldos-radius-lg);

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-sm);

  overflow: hidden;
}


.sueldos-header::before {
  content: "";

  position: absolute;
  inset:
    0
    auto
    0
    0;

  width: 3px;

  background: var(--sueldos-text-strong);
}


.sueldos-header__main {
  width: 100%;

  padding:
    22px
    22px
    22px
    24px;
}


.sueldos-header__eyebrow {
  margin-bottom: 7px;

  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: 0.09em;
}


.sueldos-header__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 22px;

  width: 100%;
  min-width: 0;
}


.sueldos-header__title-block {
  min-width: 0;
  max-width: 760px;
}


.sueldos-header__title {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: clamp(
    25px,
    2vw,
    32px
  );

  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -0.035em;
}


.sueldos-header__description {
  max-width: 720px;

  margin:
    9px
    0
    0;

  color: var(--sueldos-text-soft);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}


.sueldos-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 8px;

  min-width: 0;
}


/* =========================================================
   BUTTON BASE
   ========================================================= */

.sueldos-btn {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;

  padding:
    0
    13px;

  border:
    1px
    solid
    transparent;

  border-radius: 9px;

  outline: none;

  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}


.sueldos-btn svg {
  width: 16px;
  height: 16px;

  flex: 0 0 auto;

  stroke-width: 2;
}


.sueldos-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}


.sueldos-btn:active:not(:disabled) {
  transform: translateY(0);
}


.sueldos-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


.sueldos-btn--primary {
  border-color: var(--sueldos-primary);

  color: var(--sueldos-primary-text);
  background: var(--sueldos-primary);
}


.sueldos-btn--primary:hover:not(:disabled) {
  border-color: var(--sueldos-primary-hover);
  background: var(--sueldos-primary-hover);
}


.sueldos-btn--secondary {
  border-color: var(--sueldos-border-strong);

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface);
}


.sueldos-btn--secondary:hover:not(:disabled) {
  border-color: var(--sueldos-border-dark);

  background: var(--sueldos-surface-soft);
}


.sueldos-btn--ghost {
  border-color: var(--sueldos-border);

  color: var(--sueldos-text);
  background: var(--sueldos-surface-soft);
}


.sueldos-btn--ghost:hover:not(:disabled) {
  border-color: var(--sueldos-border-strong);

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-strong);
}


.sueldos-btn--danger {
  border-color: var(--sueldos-danger-border);

  color: var(--sueldos-danger);
  background: var(--sueldos-danger-bg);
}


.sueldos-btn--danger:hover:not(:disabled) {
  border-color: var(--sueldos-danger);

  color: var(--sueldos-danger);
}


.sueldos-btn--sm {
  min-height: 32px;

  padding:
    0
    10px;

  font-size: 12px;
}


.sueldos-btn.is-loading {
  pointer-events: none;
  opacity: 0.68;
}


.sueldos-btn.is-loading svg {
  animation:
    sueldos-spin
    0.75s
    linear
    infinite;
}


@keyframes sueldos-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.sueldos-icon-btn {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  padding: 0;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 9px;

  outline: none;

  color: var(--sueldos-text-soft);
  background: var(--sueldos-surface);

  cursor: pointer;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}


.sueldos-icon-btn svg {
  width: 17px;
  height: 17px;

  stroke-width: 2;
}


.sueldos-icon-btn:hover:not(:disabled) {
  border-color: var(--sueldos-border-strong);

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);

  transform: translateY(-1px);
}


.sueldos-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}


.sueldos-icon-btn.is-danger {
  color: var(--sueldos-danger);
}


.sueldos-icon-btn.is-danger:hover:not(:disabled) {
  border-color: var(--sueldos-danger-border);
  background: var(--sueldos-danger-bg);
}


.sueldos-icon-btn--close {
  color: var(--sueldos-text-strong);
}


/* =========================================================
   PERIOD BAR
   ========================================================= */

.sueldos-period-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  width: 100%;
  min-width: 0;

  margin-bottom: 18px;

  padding:
    12px
    14px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-md);

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-sm);
}


.sueldos-period-bar__main {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 0;
}


.sueldos-period-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex:
    0
    0
    38px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);
}


.sueldos-period-bar__icon svg {
  width: 18px;
  height: 18px;
}


.sueldos-period-bar__content {
  min-width: 0;
}


.sueldos-period-bar__label {
  display: block;

  margin-bottom: 3px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.075em;
}


.sueldos-period-bar__value {
  display: block;

  min-width: 0;

  color: var(--sueldos-text-strong);

  font-size: 14px;
  font-weight: 800;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sueldos-period-bar__actions {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.sueldos-select,
.sueldos-field input,
.sueldos-field select,
.sueldos-field textarea,
.sueldos-search input {
  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 9px;

  outline: none;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface);

  font: inherit;
  font-size: 13px;
  font-weight: 600;

  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}


.sueldos-select,
.sueldos-field input,
.sueldos-field select,
.sueldos-search input {
  min-height: 38px;

  padding:
    0
    11px;
}


.sueldos-field textarea {
  min-height: 84px;

  padding: 10px 11px;

  resize: vertical;
}


.sueldos-select:hover,
.sueldos-field input:hover,
.sueldos-field select:hover,
.sueldos-field textarea:hover,
.sueldos-search input:hover {
  border-color: var(--sueldos-border-dark);
}


.sueldos-select:focus,
.sueldos-field input:focus,
.sueldos-field select:focus,
.sueldos-field textarea:focus,
.sueldos-search input:focus {
  border-color: var(--sueldos-text-strong);

  box-shadow:
    0
    0
    0
    2px
    rgba(0, 0, 0, 0.06);
}


html.dark .sueldos-select:focus,
html.dark .sueldos-field input:focus,
html.dark .sueldos-field select:focus,
html.dark .sueldos-field textarea:focus,
html.dark .sueldos-search input:focus,
body.dark .sueldos-select:focus,
body.dark .sueldos-field input:focus,
body.dark .sueldos-field select:focus,
body.dark .sueldos-field textarea:focus,
body.dark .sueldos-search input:focus {
  box-shadow:
    0
    0
    0
    2px
    rgba(255, 255, 255, 0.09);
}


.sueldos-select {
  width: auto;
  min-width: 190px;

  cursor: pointer;
}


/* =========================================================
   METRICS
   ========================================================= */

.sueldos-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap: 10px;

  width: 100%;
  min-width: 0;

  margin-bottom: 18px;
}


.sueldos-metric-card {
  position: relative;

  display: flex;
  align-items: flex-start;

  gap: 11px;

  min-width: 0;
  min-height: 110px;

  padding: 15px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-md);

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-sm);

  overflow: hidden;

  transition:
    border-color 120ms ease,
    transform 120ms ease;
}


.sueldos-metric-card:hover {
  border-color: var(--sueldos-border-strong);

  transform: translateY(-1px);
}


.sueldos-metric-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);
}


.sueldos-metric-card__icon svg {
  width: 17px;
  height: 17px;
}


.sueldos-metric-card__body {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.sueldos-metric-card__label {
  margin-bottom: 6px;

  color: var(--sueldos-text-soft);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}


.sueldos-metric-card__value {
  max-width: 100%;

  color: var(--sueldos-text-strong);

  font-size: clamp(
    17px,
    1.45vw,
    22px
  );

  font-weight: 800;
  line-height: 1.12;

  letter-spacing: -0.025em;

  overflow: hidden;
  text-overflow: ellipsis;
}


.sueldos-metric-card small {
  margin-top: 7px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}


/* =========================================================
   PANEL
   ========================================================= */

.sueldos-panel {
  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-lg);

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-sm);

  overflow: hidden;
}


.sueldos-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  width: 100%;

  padding:
    18px
    18px
    15px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface);
}


.sueldos-panel__eyebrow {
  display: block;

  margin-bottom: 5px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.075em;
}


.sueldos-panel__title {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -0.025em;
}


.sueldos-panel__description {
  margin:
    6px
    0
    0;

  color: var(--sueldos-text-soft);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}


.sueldos-panel__header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;
}


/* =========================================================
   FILTERS
   ========================================================= */

.sueldos-filters {
  display: grid;

  grid-template-columns:
    minmax(
      240px,
      1.5fr
    )
    minmax(
      150px,
      0.7fr
    )
    minmax(
      150px,
      0.7fr
    )
    minmax(
      150px,
      0.7fr
    )
    minmax(
      160px,
      0.75fr
    )
    auto;

  gap: 8px;

  width: 100%;
  min-width: 0;

  padding: 12px 14px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface-soft);
}


.sueldos-filters .sueldos-select {
  width: 100%;
  min-width: 0;
}


.sueldos-search {
  position: relative;

  min-width: 0;
}


.sueldos-search > svg {
  position: absolute;
  top: 50%;
  left: 12px;

  z-index: 1;

  width: 16px;
  height: 16px;

  color: var(--sueldos-text-muted);

  pointer-events: none;

  transform: translateY(-50%);
}


.sueldos-search input {
  padding-left: 36px;
}


/* =========================================================
   TABLE SHELL
   ========================================================= */

.sueldos-table-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-width: thin;
  scrollbar-color:
    var(--sueldos-border-strong)
    transparent;
}


.sueldos-table-shell::-webkit-scrollbar {
  height: 8px;
}


.sueldos-table-shell::-webkit-scrollbar-track {
  background: transparent;
}


.sueldos-table-shell::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--sueldos-border-strong);
}


/* =========================================================
   TABLE
   ========================================================= */

.sueldos-table {
  width: 100%;
  min-width: 1180px;

  border-collapse: collapse;
  border-spacing: 0;

  table-layout: auto;

  color: var(--sueldos-text);

  background: var(--sueldos-surface);
}


.sueldos-table thead {
  background: var(--sueldos-surface-soft);
}


.sueldos-table th {
  height: 42px;

  padding:
    0
    12px;

  border-bottom:
    1px
    solid
    var(--sueldos-border-strong);

  color: var(--sueldos-text-soft);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;

  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.055em;

  white-space: nowrap;
}


.sueldos-table td {
  min-height: 62px;

  padding:
    11px
    12px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  color: var(--sueldos-text);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;

  vertical-align: middle;
}


.sueldos-table tbody tr:last-child td {
  border-bottom: 0;
}


.sueldos-table-row {
  transition:
    background-color 100ms ease;
}


.sueldos-table-row:hover {
  background: var(--sueldos-surface-soft);
}


.sueldos-table-row:hover td {
  border-bottom-color: var(--sueldos-border-strong);
}


.sueldos-col-employee {
  min-width: 220px;
}


.sueldos-col-actions {
  width: 84px;

  text-align: right;
}


/* =========================================================
   EMPLOYEE CELL
   ========================================================= */

.sueldos-employee-cell {
  appearance: none;

  display: flex;
  align-items: center;

  gap: 10px;

  width: 100%;
  min-width: 0;

  padding: 0;

  border: 0;
  outline: none;

  color: inherit;
  background: transparent;

  text-align: left;

  cursor: pointer;
}


.sueldos-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex:
    0
    0
    34px;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 10px;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-strong);

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}


.sueldos-avatar--lg {
  width: 46px;
  height: 46px;

  flex:
    0
    0
    46px;

  border-radius: 12px;

  font-size: 14px;
}


.sueldos-employee-cell__text {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.sueldos-employee-cell__text strong {
  max-width: 100%;

  color: var(--sueldos-text-strong);

  font-size: 12px;
  font-weight: 800;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sueldos-employee-cell__text small {
  max-width: 100%;

  margin-top: 3px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 600;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   PERIOD CELL
   ========================================================= */

.sueldos-period-cell {
  display: flex;
  flex-direction: column;

  gap: 3px;

  min-width: 0;
}


.sueldos-period-cell strong {
  color: var(--sueldos-text-strong);

  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
}


.sueldos-period-cell small {
  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   MONEY
   ========================================================= */

.sueldos-money {
  color: var(--sueldos-text);

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}


.sueldos-money--strong {
  color: var(--sueldos-text-strong);
  font-weight: 800;
}


/* =========================================================
   ROW ACTIONS
   ========================================================= */

.sueldos-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 5px;
}


/* =========================================================
   BADGES
   ========================================================= */

.sueldos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;

  padding:
    0
    8px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 999px;

  color: var(--sueldos-text-soft);
  background: var(--sueldos-surface-soft);

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  white-space: nowrap;
}


.sueldos-badge.is-success {
  border-color: var(--sueldos-success-border);

  color: var(--sueldos-success);
  background: var(--sueldos-success-bg);
}


.sueldos-badge.is-warning {
  border-color: var(--sueldos-warning-border);

  color: var(--sueldos-warning);
  background: var(--sueldos-warning-bg);
}


.sueldos-badge.is-danger {
  border-color: var(--sueldos-danger-border);

  color: var(--sueldos-danger);
  background: var(--sueldos-danger-bg);
}


.sueldos-badge.is-info {
  border-color: var(--sueldos-info-border);

  color: var(--sueldos-info);
  background: var(--sueldos-info-bg);
}


.sueldos-badge.is-neutral {
  border-color: var(--sueldos-border);

  color: var(--sueldos-text-soft);
  background: var(--sueldos-surface-soft);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.sueldos-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-height: 58px;

  padding:
    10px
    14px;

  border-top:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface-soft);
}


.sueldos-pagination__info {
  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 600;
}


.sueldos-pagination__info strong {
  color: var(--sueldos-text-strong);
  font-weight: 800;
}


.sueldos-pagination__actions {
  display: flex;
  align-items: center;

  gap: 8px;
}


.sueldos-pagination__current {
  color: var(--sueldos-text-soft);

  font-size: 11px;
  font-weight: 600;

  white-space: nowrap;
}


.sueldos-pagination__current strong {
  color: var(--sueldos-text-strong);
  font-weight: 800;
}


/* =========================================================
   EMPTY
   ========================================================= */

.sueldos-table-empty {
  padding:
    0
    !important;
}


.sueldos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 320px;

  padding:
    40px
    24px;

  text-align: center;
}


.sueldos-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin-bottom: 14px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 14px;

  color: var(--sueldos-text-soft);
  background: var(--sueldos-surface-soft);
}


.sueldos-empty__icon svg {
  width: 22px;
  height: 22px;
}


.sueldos-empty h3 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 15px;
  font-weight: 800;
}


.sueldos-empty p {
  max-width: 410px;

  margin:
    7px
    0
    17px;

  color: var(--sueldos-text-muted);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}


/* =========================================================
   SKELETON
   ========================================================= */

.sueldos-skeleton {
  position: relative;

  display: block;

  border-radius: 6px;

  background:
    linear-gradient(
      90deg,
      var(--sueldos-surface-strong)
      0%,
      var(--sueldos-border)
      48%,
      var(--sueldos-surface-strong)
      100%
    );

  background-size:
    220%
    100%;

  animation:
    sueldos-skeleton
    1.35s
    linear
    infinite;
}


@keyframes sueldos-skeleton {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -20% 0;
  }
}


.sueldos-skeleton--icon {
  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  border-radius: 10px;
}


.sueldos-skeleton--label {
  width: 72px;
  height: 10px;

  margin-bottom: 8px;
}


.sueldos-skeleton--value {
  width: 110px;
  height: 20px;
}


.sueldos-skeleton--small {
  width: 82px;
  height: 8px;

  margin-top: 8px;
}


.sueldos-skeleton--avatar {
  width: 34px;
  height: 34px;

  border-radius: 10px;
}


.sueldos-skeleton--avatar-lg {
  width: 46px;
  height: 46px;

  border-radius: 12px;
}


.sueldos-skeleton--line-lg {
  width: 150px;
  max-width: 100%;
  height: 11px;
}


.sueldos-skeleton--line-md {
  width: 105px;
  max-width: 100%;
  height: 10px;
}


.sueldos-skeleton--line-sm {
  width: 68px;
  max-width: 100%;
  height: 9px;
}


.sueldos-skeleton--action {
  width: 34px;
  height: 34px;

  margin-left: auto;

  border-radius: 9px;
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

@media (
  max-width: 1500px
) {
  .sueldos-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .sueldos-filters {
    grid-template-columns:
      minmax(
        260px,
        1.5fr
      )
      repeat(
        4,
        minmax(
          145px,
          0.7fr
        )
      );

    align-items: stretch;
  }


  .sueldos-filters > .sueldos-btn {
    grid-column:
      auto /
      span 1;
  }
}


@media (
  max-width: 1180px
) {
  .sueldos-page__inner {
    padding:
      18px
      16px
      36px;
  }


  .sueldos-header__title-row {
    flex-direction: column;
  }


  .sueldos-header__actions {
    width: 100%;
    justify-content: flex-start;
  }


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


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


  .sueldos-search {
    grid-column:
      1 /
      -1;
  }
}


@media (
  max-width: 760px
) {
  .sueldos-page__inner {
    padding:
      12px
      10px
      28px;
  }


  .sueldos-header {
    border-radius: 14px;
  }


  .sueldos-header__main {
    padding:
      17px
      15px
      17px
      17px;
  }


  .sueldos-header__title {
    font-size: 24px;
  }


  .sueldos-header__actions {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
  }


  .sueldos-header__actions .sueldos-btn {
    width: 100%;
  }


  .sueldos-header__actions .sueldos-btn--primary {
    grid-column:
      1 /
      -1;
  }


  .sueldos-period-bar {
    align-items: stretch;
    flex-direction: column;
  }


  .sueldos-period-bar__actions {
    width: 100%;
  }


  .sueldos-period-bar__actions .sueldos-select {
    width: 100%;
    min-width: 0;
  }


  .sueldos-metrics {
    grid-template-columns:
      1fr;
  }


  .sueldos-metric-card {
    min-height: 92px;
  }


  .sueldos-panel__header {
    flex-direction: column;
  }


  .sueldos-panel__header-actions {
    width: 100%;
    justify-content: flex-start;
  }


  .sueldos-panel__header-actions .sueldos-btn {
    flex:
      1
      1
      160px;
  }


  .sueldos-filters {
    grid-template-columns:
      1fr;
  }


  .sueldos-search {
    grid-column: auto;
  }


  .sueldos-filters .sueldos-btn {
    width: 100%;
  }


  .sueldos-pagination {
    align-items: stretch;
    flex-direction: column;
  }


  .sueldos-pagination__actions {
    justify-content: space-between;
  }
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/sueldos/
   sueldos.css

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   SUELDOS

   PARTE 2 DE 3
   ========================================================= */


/* =========================================================
   OVERLAY DETAIL
   ========================================================= */

.sueldos-detail-overlay {
  position: fixed;
  inset: 0;

  z-index: 99990;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;

  background:
    rgba(
      0,
      0,
      0,
      0.34
    );

  backdrop-filter: blur(2px);
}


.sueldos-detail-overlay[hidden] {
  display: none !important;
}


.sueldos-detail {
  width: min(
    980px,
    96vw
  );

  height: 100dvh;

  min-width: 0;

  border-left:
    1px
    solid
    var(--sueldos-border-strong);

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-md);

  overflow-y: auto;
  overflow-x: hidden;

  animation:
    sueldos-detail-in
    170ms
    ease-out;
}


@keyframes sueldos-detail-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* =========================================================
   DETAIL HEADER
   ========================================================= */

.sueldos-detail__header {
  position: sticky;
  top: 0;

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  width: 100%;

  padding:
    16px
    18px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface);
}


.sueldos-detail__employee {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}


.sueldos-detail__employee-info {
  min-width: 0;
}


.sueldos-detail__eyebrow {
  margin-bottom: 4px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.075em;
}


.sueldos-detail__employee-info h2 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -0.02em;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sueldos-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 5px;

  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 600;
}


.sueldos-detail__meta-separator {
  color: var(--sueldos-border-dark);
}


.sueldos-detail__header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  flex:
    0
    0
    auto;
}


/* =========================================================
   DETAIL METRICS
   ========================================================= */

.sueldos-detail__metrics {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;

  padding:
    14px
    18px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface-soft);
}


.sueldos-detail-metric {
  min-width: 0;

  padding: 12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  background: var(--sueldos-surface);
}


.sueldos-detail-metric.is-primary {
  border-color: var(--sueldos-border-dark);
}


.sueldos-detail-metric span {
  display: block;

  margin-bottom: 5px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 700;
}


.sueldos-detail-metric strong {
  display: block;

  color: var(--sueldos-text-strong);

  font-size: 14px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   DETAIL TABS
   ========================================================= */

.sueldos-detail-tabs {
  position: sticky;
  top: 79px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 2px;

  width: 100%;

  padding:
    7px
    10px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface);

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}


.sueldos-detail-tabs::-webkit-scrollbar {
  display: none;
}


.sueldos-detail-tab {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 34px;

  padding:
    0
    11px;

  border:
    1px
    solid
    transparent;

  border-radius: 8px;

  color: var(--sueldos-text-muted);
  background: transparent;

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color 100ms ease,
    background-color 100ms ease,
    border-color 100ms ease;
}


.sueldos-detail-tab svg {
  width: 15px;
  height: 15px;
}


.sueldos-detail-tab:hover {
  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);
}


.sueldos-detail-tab.is-active {
  border-color: var(--sueldos-border-strong);

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-strong);
}


/* =========================================================
   DETAIL CONTENT
   ========================================================= */

.sueldos-detail__content {
  width: 100%;
  min-width: 0;

  padding:
    18px;

  background: var(--sueldos-bg);
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.sueldos-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 12px;
}


.sueldos-detail-card {
  min-width: 0;

  padding: 15px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-md);

  background: var(--sueldos-surface);
}


.sueldos-detail-card--full {
  grid-column:
    1 /
    -1;
}


.sueldos-detail-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;

  padding-bottom: 11px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);
}


.sueldos-detail-card__eyebrow {
  display: block;

  margin-bottom: 4px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.sueldos-detail-card__header h3,
.sueldos-tab-section__header h3 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}


/* =========================================================
   INFO GRID
   ========================================================= */

.sueldos-info-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px
    18px;
}


.sueldos-info-item {
  min-width: 0;
}


.sueldos-info-item > span {
  display: block;

  margin-bottom: 4px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.sueldos-info-item > strong {
  display: block;

  max-width: 100%;

  color: var(--sueldos-text-strong);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;

  overflow-wrap: anywhere;
}


/* =========================================================
   PAYMENT SUMMARY
   ========================================================= */

.sueldos-payment-summary {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}


.sueldos-payment-summary > div {
  min-width: 0;

  padding: 11px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  background: var(--sueldos-surface-soft);
}


.sueldos-payment-summary > div.is-pending {
  border-color: var(--sueldos-warning-border);

  background: var(--sueldos-warning-bg);
}


.sueldos-payment-summary span {
  display: block;

  margin-bottom: 5px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 700;
}


.sueldos-payment-summary strong {
  color: var(--sueldos-text-strong);

  font-size: 13px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   NOTES
   ========================================================= */

.sueldos-notes {
  margin: 0;

  color: var(--sueldos-text-soft);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;

  white-space: pre-wrap;
}


/* =========================================================
   TAB SECTION
   ========================================================= */

.sueldos-tab-section {
  width: 100%;
  min-width: 0;
}


.sueldos-tab-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;

  padding:
    15px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-md);

  background: var(--sueldos-surface);
}


.sueldos-tab-section__header p {
  margin:
    5px
    0
    0;

  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}


/* =========================================================
   CONCEPT GROUP
   ========================================================= */

.sueldos-concept-group {
  margin-bottom: 10px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-md);

  background: var(--sueldos-surface);

  overflow: hidden;
}


.sueldos-concept-group:last-child {
  margin-bottom: 0;
}


.sueldos-concept-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    12px
    14px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface-soft);
}


.sueldos-concept-group__header h4 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 12px;
  font-weight: 800;
}


.sueldos-concept-group__header span {
  display: block;

  margin-top: 3px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 600;
}


.sueldos-concept-group__header > strong {
  color: var(--sueldos-text-strong);

  font-size: 13px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   MINI TABLE
   ========================================================= */

.sueldos-mini-table-shell {
  width: 100%;
  min-width: 0;

  overflow-x: auto;

  scrollbar-width: thin;
  scrollbar-color:
    var(--sueldos-border-strong)
    transparent;
}


.sueldos-mini-table {
  width: 100%;
  min-width: 680px;

  border-collapse: collapse;
  border-spacing: 0;
}


.sueldos-mini-table th {
  height: 36px;

  padding:
    0
    11px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  color: var(--sueldos-text-muted);
  background: var(--sueldos-surface-soft);

  font-size: 9px;
  font-weight: 800;

  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.045em;

  white-space: nowrap;
}


.sueldos-mini-table td {
  padding:
    9px
    11px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  color: var(--sueldos-text);

  font-size: 11px;
  font-weight: 600;

  vertical-align: middle;
}


.sueldos-mini-table tbody tr:last-child td {
  border-bottom: 0;
}


.sueldos-mini-table tbody tr:hover {
  background: var(--sueldos-surface-soft);
}


.sueldos-concept-cell {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.sueldos-concept-cell strong {
  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 800;
}


.sueldos-concept-cell small {
  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 600;
}


/* =========================================================
   EMPTY INLINE
   ========================================================= */

.sueldos-empty-inline {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 74px;

  padding: 16px;

  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 600;

  text-align: center;
}


.sueldos-empty-inline svg {
  width: 16px;
  height: 16px;
}


/* =========================================================
   CARD LIST
   ========================================================= */

.sueldos-card-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.sueldos-list-card {
  display: grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 12px;

  padding:
    12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 11px;

  background: var(--sueldos-surface);
}


.sueldos-list-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);
}


.sueldos-list-card__icon svg {
  width: 17px;
  height: 17px;
}


.sueldos-list-card__body {
  min-width: 0;
}


.sueldos-list-card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}


.sueldos-list-card__title > strong {
  color: var(--sueldos-text-strong);

  font-size: 12px;
  font-weight: 800;
}


.sueldos-list-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 4px;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 600;
}


.sueldos-list-card__amount {
  display: flex;
  align-items: flex-end;
  flex-direction: column;

  gap: 7px;

  text-align: right;
}


.sueldos-list-card__amount > strong {
  color: var(--sueldos-text-strong);

  font-size: 13px;
  font-weight: 800;

  white-space: nowrap;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.sueldos-timeline {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 0;

  padding:
    4px
    0;
}


.sueldos-timeline__item {
  position: relative;

  display: grid;

  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    );

  gap: 10px;

  min-width: 0;
}


.sueldos-timeline__item:not(:last-child)::before {
  content: "";

  position: absolute;
  top: 25px;
  bottom: 0;
  left: 13px;

  width: 1px;

  background: var(--sueldos-border-strong);
}


.sueldos-timeline__marker {
  position: relative;

  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: 8px;

  color: var(--sueldos-text-strong);
}


.sueldos-timeline__marker svg {
  width: 10px;
  height: 10px;

  fill: var(--sueldos-surface);
  stroke-width: 3;
}


.sueldos-timeline__content {
  min-width: 0;

  margin-bottom: 9px;

  padding:
    11px
    12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  background: var(--sueldos-surface);
}


.sueldos-timeline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.sueldos-timeline__header strong {
  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 800;

  text-transform: capitalize;
}


.sueldos-timeline__header time {
  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 600;

  white-space: nowrap;
}


.sueldos-timeline__content p {
  margin:
    6px
    0
    0;

  color: var(--sueldos-text-soft);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}


.sueldos-timeline__states {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 8px;
}


.sueldos-timeline__states > svg {
  width: 14px;
  height: 14px;

  color: var(--sueldos-text-muted);
}


/* =========================================================
   DOCUMENT GRID
   ========================================================= */

.sueldos-document-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}


.sueldos-document-card {
  display: grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 10px;

  min-width: 0;

  padding:
    11px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 11px;

  background: var(--sueldos-surface);
}


.sueldos-document-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 9px;

  background: var(--sueldos-surface-soft);

  color: var(--sueldos-text-strong);
}


.sueldos-document-card__icon svg {
  width: 16px;
  height: 16px;
}


.sueldos-document-card__body {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.sueldos-document-card__body strong {
  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 800;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sueldos-document-card__body span {
  margin-top: 2px;

  color: var(--sueldos-text-soft);

  font-size: 9px;
  font-weight: 700;

  text-transform: capitalize;
}


.sueldos-document-card__body small {
  margin-top: 3px;

  color: var(--sueldos-text-muted);

  font-size: 8px;
  font-weight: 600;
}


.sueldos-document-card__actions {
  display: flex;
  align-items: center;

  gap: 5px;
}


/* =========================================================
   DOCUMENT CALLOUT
   ========================================================= */

.sueldos-document-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-top: 12px;

  padding:
    12px
    14px;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 11px;

  background: var(--sueldos-surface);
}


.sueldos-document-callout > div {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.sueldos-document-callout > div > svg {
  width: 19px;
  height: 19px;

  flex:
    0
    0
    19px;

  color: var(--sueldos-text-strong);
}


.sueldos-document-callout strong {
  display: block;

  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 800;
}


.sueldos-document-callout p {
  margin:
    3px
    0
    0;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 500;
}


/* =========================================================
   TAB EMPTY
   ========================================================= */

.sueldos-tab-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 260px;

  padding:
    30px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: var(--sueldos-radius-md);

  background: var(--sueldos-surface);

  text-align: center;
}


.sueldos-tab-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin-bottom: 12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 12px;

  color: var(--sueldos-text-soft);
  background: var(--sueldos-surface-soft);
}


.sueldos-tab-empty__icon svg {
  width: 20px;
  height: 20px;
}


.sueldos-tab-empty h3 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 14px;
  font-weight: 800;
}


.sueldos-tab-empty p {
  max-width: 380px;

  margin:
    6px
    0
    0;

  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}


/* =========================================================
   DETAIL LOADING
   ========================================================= */

.sueldos-detail-loading {
  padding:
    18px;
}


.sueldos-detail-loading__header {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.sueldos-detail-loading__heading {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.sueldos-detail-loading__metrics {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;

  margin-bottom: 18px;
}


.sueldos-detail-loading__metric {
  min-height: 72px;

  padding: 12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;
}


.sueldos-detail-loading__body {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 9px;
}


.sueldos-detail-loading__row {
  min-height: 72px;

  padding: 12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;
}


/* =========================================================
   TAB LOADING
   ========================================================= */

.sueldos-tab-loading {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.sueldos-tab-loading__row {
  min-height: 64px;

  padding: 12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  background: var(--sueldos-surface);
}


/* =========================================================
   DRAWER OVERLAY
   ========================================================= */

.sueldos-drawer-overlay {
  position: fixed;
  inset: 0;

  z-index: 100000;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}


.sueldos-drawer-overlay[hidden] {
  display: none !important;
}


.sueldos-drawer-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.42
    );

  backdrop-filter: blur(2px);
}


.sueldos-drawer {
  position: relative;

  z-index: 1;

  width: min(
    420px,
    94vw
  );

  height: 100dvh;

  border-left:
    1px
    solid
    var(--sueldos-border-strong);

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-md);

  overflow-y: auto;

  animation:
    sueldos-drawer-in
    160ms
    ease-out;
}


@keyframes sueldos-drawer-in {
  from {
    transform: translateX(18px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* =========================================================
   DRAWER HEADER
   ========================================================= */

.sueldos-drawer__header {
  position: sticky;
  top: 0;

  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  padding:
    17px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface);
}


.sueldos-drawer__eyebrow {
  display: block;

  margin-bottom: 4px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.sueldos-drawer__header h3 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 16px;
  font-weight: 800;
}


.sueldos-drawer__header p {
  margin:
    5px
    0
    0;

  color: var(--sueldos-text-muted);

  font-size: 10px;
  font-weight: 500;
}


.sueldos-drawer__body {
  padding: 12px;
}


/* =========================================================
   ACTION LIST
   ========================================================= */

.sueldos-action-list {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.sueldos-action-item {
  appearance: none;

  display: grid;

  grid-template-columns:
    38px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 11px;

  width: 100%;

  padding:
    11px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  color: var(--sueldos-text);
  background: var(--sueldos-surface);

  text-align: left;

  cursor: pointer;

  transition:
    background-color 110ms ease,
    border-color 110ms ease,
    transform 110ms ease;
}


.sueldos-action-item:hover {
  border-color: var(--sueldos-border-strong);
  background: var(--sueldos-surface-soft);

  transform: translateY(-1px);
}


.sueldos-action-item > svg {
  width: 17px;
  height: 17px;

  justify-self: center;

  color: var(--sueldos-text-strong);
}


.sueldos-action-item > span {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.sueldos-action-item strong {
  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 800;
}


.sueldos-action-item small {
  margin-top: 3px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
}


.sueldos-action-item.is-danger {
  border-color: var(--sueldos-danger-border);
  background: var(--sueldos-danger-bg);
}


.sueldos-action-item.is-danger > svg,
.sueldos-action-item.is-danger strong {
  color: var(--sueldos-danger);
}


/* =========================================================
   RESPONSIVE · DETAIL
   ========================================================= */

@media (
  max-width: 900px
) {
  .sueldos-detail {
    width: 100vw;
  }


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


  .sueldos-detail-metric:last-child {
    grid-column:
      1 /
      -1;
  }


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


  .sueldos-detail-card--full {
    grid-column: auto;
  }


  .sueldos-document-grid {
    grid-template-columns:
      1fr;
  }


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


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


@media (
  max-width: 620px
) {
  .sueldos-detail__header {
    align-items: flex-start;

    padding:
      13px;
  }


  .sueldos-detail__employee {
    align-items: flex-start;
  }


  .sueldos-detail__meta {
    align-items: flex-start;
    flex-direction: column;

    gap: 2px;
  }


  .sueldos-detail__meta-separator {
    display: none;
  }


  .sueldos-detail__metrics {
    grid-template-columns:
      1fr
      1fr;

    padding:
      10px;
  }


  .sueldos-detail__content {
    padding: 10px;
  }


  .sueldos-detail-tabs {
    top: 88px;
  }


  .sueldos-info-grid {
    grid-template-columns:
      1fr;
  }


  .sueldos-payment-summary {
    grid-template-columns:
      1fr;
  }


  .sueldos-tab-section__header {
    align-items: stretch;
    flex-direction: column;
  }


  .sueldos-document-callout {
    align-items: stretch;
    flex-direction: column;
  }


  .sueldos-document-callout .sueldos-btn {
    width: 100%;
  }


  .sueldos-list-card {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }


  .sueldos-list-card__amount {
    grid-column:
      1 /
      -1;

    align-items: center;
    justify-content: space-between;
    flex-direction: row;

    padding-top: 8px;

    border-top:
      1px
      solid
      var(--sueldos-border);
  }
}


/* =========================================================
   FIN PARTE 2 DE 3
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/sueldos/
   sueldos.css

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   SUELDOS

   PARTE 3 DE 3
   ========================================================= */


/* =========================================================
   MODAL OVERLAY
   ========================================================= */

.sueldos-modal-overlay {
  position: fixed;
  inset: 0;

  z-index: 100010;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    20px;

  background:
    rgba(
      0,
      0,
      0,
      0.48
    );

  backdrop-filter: blur(3px);
}


.sueldos-modal-overlay[hidden] {
  display: none !important;
}


.sueldos-modal-backdrop {
  position: absolute;
  inset: 0;
}


/* =========================================================
   MODAL
   ========================================================= */

.sueldos-modal {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  width: min(
    720px,
    calc(
      100vw -
      32px
    )
  );

  max-height: calc(
    100dvh -
    40px
  );

  min-width: 0;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 16px;

  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-md);

  overflow: hidden;

  animation:
    sueldos-modal-in
    150ms
    ease-out;
}


.sueldos-modal--sm {
  width: min(
    430px,
    calc(
      100vw -
      32px
    )
  );
}


.sueldos-modal--md {
  width: min(
    680px,
    calc(
      100vw -
      32px
    )
  );
}


.sueldos-modal--lg {
  width: min(
    900px,
    calc(
      100vw -
      32px
    )
  );
}


.sueldos-modal--xl {
  width: min(
    1180px,
    calc(
      100vw -
      32px
    )
  );
}


@keyframes sueldos-modal-in {
  from {
    opacity: 0;
    transform:
      translateY(
        10px
      )
      scale(
        0.99
      );
  }

  to {
    opacity: 1;
    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.sueldos-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  padding:
    17px
    18px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);

  background: var(--sueldos-surface);

  flex:
    0
    0
    auto;
}


.sueldos-modal__eyebrow {
  display: block;

  margin-bottom: 4px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.sueldos-modal__header h3 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -0.02em;
}


.sueldos-modal__header p {
  max-width: 650px;

  margin:
    5px
    0
    0;

  color: var(--sueldos-text-muted);

  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.sueldos-modal__body {
  width: 100%;
  min-width: 0;

  padding:
    18px;

  overflow-y: auto;
  overflow-x: hidden;

  background: var(--sueldos-bg);

  scrollbar-width: thin;
  scrollbar-color:
    var(--sueldos-border-strong)
    transparent;
}


.sueldos-modal__body::-webkit-scrollbar {
  width: 8px;
}


.sueldos-modal__body::-webkit-scrollbar-track {
  background: transparent;
}


.sueldos-modal__body::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: var(--sueldos-border-strong);
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.sueldos-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 8px;

  width: 100%;

  margin-top: 18px;

  padding-top: 14px;

  border-top:
    1px
    solid
    var(--sueldos-border);
}


/* =========================================================
   FORM
   ========================================================= */

.sueldos-form {
  display: flex;
  flex-direction: column;

  gap: 14px;

  width: 100%;
  min-width: 0;
}


.sueldos-form.is-submitting {
  opacity: 0.72;
}


/* =========================================================
   FORM SECTION
   ========================================================= */

.sueldos-form-section {
  width: 100%;
  min-width: 0;

  padding:
    14px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 12px;

  background: var(--sueldos-surface);
}


.sueldos-form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 13px;

  padding-bottom: 10px;

  border-bottom:
    1px
    solid
    var(--sueldos-border);
}


.sueldos-form-section__header span {
  display: block;

  margin-bottom: 3px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.075em;
}


.sueldos-form-section__header h4 {
  margin: 0;

  color: var(--sueldos-text-strong);

  font-size: 13px;
  font-weight: 800;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.sueldos-form-grid {
  display: grid;

  gap: 12px;
}


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


.sueldos-form-grid--3 {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


/* =========================================================
   FIELD
   ========================================================= */

.sueldos-field {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 0;

  color: var(--sueldos-text);
}


.sueldos-field > span {
  color: var(--sueldos-text-soft);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}


.sueldos-field input::placeholder,
.sueldos-field textarea::placeholder,
.sueldos-search input::placeholder {
  color: var(--sueldos-text-muted);
  opacity: 0.74;
}


.sueldos-field input:disabled,
.sueldos-field select:disabled,
.sueldos-field textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;

  background: var(--sueldos-surface-strong);
}


/* =========================================================
   LIQUIDATION CONCEPT EDITOR
   ========================================================= */

.sueldos-liquidation-concepts {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-width: 0;
}


.sueldos-liquidation-concept-row {
  display: grid;

  grid-template-columns:
    minmax(
      125px,
      0.8fr
    )
    minmax(
      180px,
      1.5fr
    )
    minmax(
      85px,
      0.55fr
    )
    minmax(
      120px,
      0.75fr
    )
    minmax(
      120px,
      0.75fr
    )
    36px;

  gap: 7px;

  align-items: center;

  min-width: 0;

  padding:
    8px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  background: var(--sueldos-surface-soft);
}


.sueldos-liquidation-concept-row input,
.sueldos-liquidation-concept-row select {
  width: 100%;
  min-width: 0;
  height: 36px;

  padding:
    0
    9px;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 8px;

  outline: 0;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface);

  font: inherit;
  font-size: 11px;
  font-weight: 600;
}


.sueldos-liquidation-concept-row input:focus,
.sueldos-liquidation-concept-row select:focus {
  border-color: var(--sueldos-text-strong);
}


/* =========================================================
   LIQUIDATION TOTALS
   ========================================================= */

.sueldos-liquidation-totals {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}


.sueldos-liquidation-totals > div {
  min-width: 0;

  padding:
    11px
    12px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  background: var(--sueldos-surface);
}


.sueldos-liquidation-totals span {
  display: block;

  margin-bottom: 5px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 700;
}


.sueldos-liquidation-totals strong {
  display: block;

  color: var(--sueldos-text-strong);

  font-size: 13px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   PAYMENT HIGHLIGHT
   ========================================================= */

.sueldos-payment-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding:
    13px
    14px;

  border:
    1px
    solid
    var(--sueldos-warning-border);

  border-radius: 11px;

  background: var(--sueldos-warning-bg);
}


.sueldos-payment-highlight span {
  color: var(--sueldos-warning);

  font-size: 11px;
  font-weight: 700;
}


.sueldos-payment-highlight strong {
  color: var(--sueldos-text-strong);

  font-size: 17px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   CONFIRM
   ========================================================= */

.sueldos-confirm {
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;

  padding:
    7px
    2px
    0;

  text-align: center;
}


.sueldos-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  margin-bottom: 13px;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 14px;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface);
}


.sueldos-confirm__icon svg {
  width: 23px;
  height: 23px;
}


.sueldos-confirm__icon.is-danger {
  border-color: var(--sueldos-danger-border);

  color: var(--sueldos-danger);
  background: var(--sueldos-danger-bg);
}


.sueldos-confirm p {
  max-width: 370px;

  margin:
    0
    0
    3px;

  color: var(--sueldos-text-soft);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}


.sueldos-confirm .sueldos-modal__footer {
  justify-content: center;
}


/* =========================================================
   ADVANCE SELECTOR
   ========================================================= */

.sueldos-advance-selector {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.sueldos-advance-option {
  appearance: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  width: 100%;

  padding:
    12px
    13px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 10px;

  outline: none;

  color: var(--sueldos-text);
  background: var(--sueldos-surface);

  text-align: left;

  cursor: pointer;

  transition:
    border-color 110ms ease,
    background-color 110ms ease,
    transform 110ms ease;
}


.sueldos-advance-option:hover {
  border-color: var(--sueldos-border-strong);
  background: var(--sueldos-surface-soft);

  transform: translateY(-1px);
}


.sueldos-advance-option > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.sueldos-advance-option > div strong {
  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 800;
}


.sueldos-advance-option > div span {
  margin-top: 3px;

  color: var(--sueldos-text-muted);

  font-size: 9px;
  font-weight: 600;
}


.sueldos-advance-option > strong {
  color: var(--sueldos-text-strong);

  font-size: 13px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}


/* =========================================================
   PERIOD MANAGER
   ========================================================= */

.sueldos-period-manager {
  width: 100%;
}


.sueldos-period-manager__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin-bottom: 12px;
}


/* =========================================================
   TOAST CONTAINER
   ========================================================= */

.sueldos-toast-container {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 100100;

  display: flex;
  align-items: stretch;
  flex-direction: column;

  gap: 8px;

  width: min(
    390px,
    calc(
      100vw -
      24px
    )
  );

  pointer-events: none;
}


/* =========================================================
   TOAST
   ========================================================= */

.sueldos-toast {
  display: grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 10px;

  min-width: 0;

  padding:
    11px
    11px
    11px
    12px;

  border:
    1px
    solid
    var(--sueldos-border-strong);

  border-radius: 11px;

  color: var(--sueldos-text);
  background: var(--sueldos-surface);

  box-shadow: var(--sueldos-shadow-md);

  pointer-events: auto;

  animation:
    sueldos-toast-in
    150ms
    ease-out;
}


@keyframes sueldos-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.sueldos-toast.is-leaving {
  opacity: 0;

  transform: translateY(5px);

  transition:
    opacity 160ms ease,
    transform 160ms ease;
}


.sueldos-toast.is-error {
  border-color: var(--sueldos-danger-border);
}


.sueldos-toast.is-warning {
  border-color: var(--sueldos-warning-border);
}


.sueldos-toast.is-success {
  border-color: var(--sueldos-success-border);
}


.sueldos-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border:
    1px
    solid
    var(--sueldos-border);

  border-radius: 8px;

  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);
}


.sueldos-toast.is-error .sueldos-toast__icon {
  border-color: var(--sueldos-danger-border);

  color: var(--sueldos-danger);
  background: var(--sueldos-danger-bg);
}


.sueldos-toast.is-warning .sueldos-toast__icon {
  border-color: var(--sueldos-warning-border);

  color: var(--sueldos-warning);
  background: var(--sueldos-warning-bg);
}


.sueldos-toast.is-success .sueldos-toast__icon {
  border-color: var(--sueldos-success-border);

  color: var(--sueldos-success);
  background: var(--sueldos-success-bg);
}


.sueldos-toast__icon svg {
  width: 14px;
  height: 14px;
}


.sueldos-toast__message {
  min-width: 0;

  color: var(--sueldos-text-strong);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}


.sueldos-toast__close {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;
  border-radius: 7px;

  color: var(--sueldos-text-muted);
  background: transparent;

  cursor: pointer;
}


.sueldos-toast__close:hover {
  color: var(--sueldos-text-strong);
  background: var(--sueldos-surface-soft);
}


.sueldos-toast__close svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   BLOQUEO SCROLL BODY
   ========================================================= */

html.sueldos-overlay-open,
body.sueldos-overlay-open,
html.sueldos-modal-open,
body.sueldos-modal-open {
  overflow: hidden !important;
}


/* =========================================================
   PRIORIDAD SOBRE TOPBAR / SIDEBAR / RIGHTBAR / FOOTER
   ========================================================= */

.sueldos-detail-overlay,
.sueldos-drawer-overlay,
.sueldos-modal-overlay {
  isolation: isolate;
}


/* =========================================================
   DARK MODE CONTROLS
   ========================================================= */

html.dark .sueldos-page input,
html.dark .sueldos-page textarea,
html.dark .sueldos-page select,
body.dark .sueldos-page input,
body.dark .sueldos-page textarea,
body.dark .sueldos-page select,
[data-theme="dark"] .sueldos-page input,
[data-theme="dark"] .sueldos-page textarea,
[data-theme="dark"] .sueldos-page select {
  color-scheme: dark;
}


html.dark .sueldos-page select option,
body.dark .sueldos-page select option,
[data-theme="dark"] .sueldos-page select option {
  color: #ffffff;
  background: #0a0a0a;
}


/* =========================================================
   FOCUS ACCESSIBILITY
   ========================================================= */

.sueldos-page button:focus-visible,
.sueldos-page a:focus-visible,
.sueldos-page input:focus-visible,
.sueldos-page select:focus-visible,
.sueldos-page textarea:focus-visible {
  outline:
    2px
    solid
    var(--sueldos-text-strong);

  outline-offset: 2px;
}


/* =========================================================
   SCROLLBAR DETALLE / DRAWER
   ========================================================= */

.sueldos-detail,
.sueldos-drawer {
  scrollbar-width: thin;
  scrollbar-color:
    var(--sueldos-border-strong)
    transparent;
}


.sueldos-detail::-webkit-scrollbar,
.sueldos-drawer::-webkit-scrollbar {
  width: 8px;
}


.sueldos-detail::-webkit-scrollbar-track,
.sueldos-drawer::-webkit-scrollbar-track {
  background: transparent;
}


.sueldos-detail::-webkit-scrollbar-thumb,
.sueldos-drawer::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: var(--sueldos-border-strong);
}


/* =========================================================
   RESPONSIVE MODALS
   ========================================================= */

@media (
  max-width: 980px
) {
  .sueldos-modal-overlay {
    padding: 12px;
  }


  .sueldos-modal,
  .sueldos-modal--sm,
  .sueldos-modal--md,
  .sueldos-modal--lg,
  .sueldos-modal--xl {
    width: min(
      100%,
      calc(
        100vw -
        24px
      )
    );

    max-height: calc(
      100dvh -
      24px
    );
  }


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


  .sueldos-liquidation-concept-row {
    grid-template-columns:
      minmax(
        130px,
        0.8fr
      )
      minmax(
        180px,
        1.3fr
      )
      minmax(
        90px,
        0.6fr
      )
      minmax(
        110px,
        0.7fr
      )
      minmax(
        110px,
        0.7fr
      )
      36px;

    overflow-x: auto;
  }


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


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (
  max-width: 720px
) {
  .sueldos-modal-overlay {
    align-items: stretch;

    padding: 0;
  }


  .sueldos-modal,
  .sueldos-modal--sm,
  .sueldos-modal--md,
  .sueldos-modal--lg,
  .sueldos-modal--xl {
    width: 100vw;
    max-width: 100vw;

    height: 100dvh;
    max-height: 100dvh;

    border:
      0;

    border-radius: 0;
  }


  .sueldos-modal__header {
    padding:
      14px
      13px;
  }


  .sueldos-modal__body {
    padding:
      12px;
  }


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


  .sueldos-form-section {
    padding:
      12px;
  }


  .sueldos-form-section__header {
    align-items: flex-start;
    flex-direction: column;
  }


  .sueldos-liquidation-totals {
    grid-template-columns:
      1fr
      1fr;
  }


  .sueldos-modal__footer {
    display: grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .sueldos-modal__footer .sueldos-btn {
    width: 100%;
  }


  .sueldos-modal__footer .sueldos-btn:last-child:nth-child(3) {
    grid-column:
      1 /
      -1;
  }


  .sueldos-toast-container {
    right: 10px;
    bottom: 10px;

    width: calc(
      100vw -
      20px
    );
  }


  .sueldos-period-manager__toolbar {
    justify-content: stretch;
  }


  .sueldos-period-manager__toolbar .sueldos-btn {
    width: 100%;
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (
  max-width: 520px
) {
  .sueldos-liquidation-totals {
    grid-template-columns:
      1fr;
  }


  .sueldos-payment-highlight {
    align-items: flex-start;
    flex-direction: column;
  }


  .sueldos-payment-highlight strong {
    font-size: 20px;
  }


  .sueldos-advance-option {
    align-items: flex-start;
    flex-direction: column;
  }


  .sueldos-advance-option > strong {
    font-size: 15px;
  }


  .sueldos-modal__footer {
    grid-template-columns:
      1fr;
  }


  .sueldos-modal__footer .sueldos-btn:last-child:nth-child(3) {
    grid-column: auto;
  }


  .sueldos-confirm .sueldos-modal__footer {
    width: 100%;
  }


  .sueldos-drawer {
    width: 100vw;
  }
}


/* =========================================================
   CONCEPTOS EN MOBILE SIN ROMPER LA PÁGINA
   ========================================================= */

@media (
  max-width: 760px
) {
  .sueldos-liquidation-concepts {
    overflow-x: auto;

    padding-bottom: 4px;

    scrollbar-width: thin;
    scrollbar-color:
      var(--sueldos-border-strong)
      transparent;
  }


  .sueldos-liquidation-concept-row {
    min-width: 790px;

    overflow: visible;
  }
}


/* =========================================================
   SMALL HEIGHT
   ========================================================= */

@media (
  max-height: 650px
) and (
  min-width: 721px
) {
  .sueldos-modal-overlay {
    padding:
      10px;
  }


  .sueldos-modal {
    max-height: calc(
      100dvh -
      20px
    );
  }


  .sueldos-modal__header {
    padding:
      12px
      15px;
  }


  .sueldos-modal__body {
    padding:
      13px
      15px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .sueldos-page *,
  .sueldos-page *::before,
  .sueldos-page *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.01ms
      !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .sueldos-header__actions,
  .sueldos-period-bar__actions,
  .sueldos-panel__header-actions,
  .sueldos-filters,
  .sueldos-pagination,
  .sueldos-row-actions,
  .sueldos-toast-container,
  .sueldos-detail-overlay,
  .sueldos-drawer-overlay,
  .sueldos-modal-overlay {
    display: none !important;
  }


  .sueldos-page {
    color: #000000;
    background: #ffffff;
  }


  .sueldos-page__inner {
    padding: 0;
  }


  .sueldos-header,
  .sueldos-period-bar,
  .sueldos-metric-card,
  .sueldos-panel {
    box-shadow: none;

    break-inside: avoid;
  }


  .sueldos-table-shell {
    overflow: visible;
  }


  .sueldos-table {
    min-width: 0;
  }
}


/* =========================================================
   FIN PARTE 3 DE 3
   ========================================================= */