.page.payroll-page { gap:8px; margin-top:8px; min-width:0; color:#24405a; }
.payroll-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:7px 12px; border:1px solid #1e5c8b; border-radius:7px; background:linear-gradient(115deg,#103a60,#165a89); color:#fff; font-size:11px; line-height:1.2; }
.payroll-header a { color:#b7d9ef; font-size:9px; text-decoration:none; }
.payroll-header a span { margin:0 6px; opacity:.55; }
.payroll-header h1 { margin:3px 0 0; font-size:17px; line-height:1.2; font-weight:700; letter-spacing:-.2px; }
.payroll-period { min-width:86px; padding-left:16px; border-left:1px solid #ffffff35; font-size:9px; letter-spacing:.8px; text-align:right; }
.payroll-period strong { display:block; margin-top:1px; font-size:19px; line-height:1.1; font-weight:600; letter-spacing:0; }
.payroll-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:6px 10px; border:1px solid #d5e1ec; border-radius:7px; background:#fff; }
.payroll-toolbar label { display:grid; gap:3px; min-width:98px; color:#546c83; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.2px; }
.payroll-toolbar select { min-height:26px; min-width:112px; padding:0 25px 0 8px; border:1px solid #ccdbe8; border-radius:4px; background:#fbfdff; color:#244d70; font-size:11px; font-weight:500; }
.payroll-month-state { align-self:center; padding:4px 7px; border:1px solid #d0eadd; border-radius:4px; background:#f2faf6; color:#26805b; font-size:10px; }
.payroll-month-state.is-closed { background:#f0f5fb; border-color:#d9e4f0; color:#526f92; }
.payroll-export { display:flex; justify-content:center; align-items:center; gap:10px; min-height:26px; margin-left:auto; padding:0 10px; border:1px solid #c6deda; border-radius:4px; background:#f4faf7; color:#167351; font-size:11px; font-weight:600; cursor:pointer; }
.payroll-export:hover { background:#e6f4ed; }
.payroll-export span { font-size:16px; }
.payroll-money { display:flex; align-items:center; justify-content:space-between; gap:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.payroll-money > span:first-child { font-size:.8em; font-weight:400; }
.payroll-money > span:last-child { text-align:right; }
.payroll-sheet { overflow:hidden; min-width:0; border:1px solid #c9d9e7; border-radius:7px; background:#fff; }
.payroll-sheet-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 8px; background:#f8fbfd; border-bottom:1px solid #dae5ef; }
.payroll-sheet-heading > div { display:flex; align-items:center; gap:10px; }
.payroll-sheet-heading h2 { margin:0; color:#1d4b70; font-size:10px; font-weight:700; letter-spacing:.2px; }
.payroll-sheet-heading span,.payroll-sheet-heading p { margin:0; color:#7a8da0; font-size:9px; }
.payroll-table-scroll { width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-color:#9ab6cd #eef4f8; scrollbar-width:auto; }
.payroll-table { width:max-content; border-collapse:separate; border-spacing:0; table-layout:auto; font-family:Arial,sans-serif; font-size:calc(clamp(8px,.62vw,10px) + 2pt); line-height:1.2; letter-spacing:0; }
.payroll-table th,.payroll-table td { height:27px; padding:3px 8px; border-right:1px solid #dce6ef; border-bottom:1px solid #e0e9f0; vertical-align:middle; }
.payroll-table thead th { height:34px; padding:3px 6px; border-color:#366286; background:#214e74; color:#fff; font-size:calc(clamp(7px,.54vw,9px) + 2pt); font-weight:600; text-align:center; text-transform:uppercase; line-height:1.2; overflow-wrap:normal; }
.payroll-table tbody td { white-space:nowrap; background:#fff; color:#344d65; }
.payroll-table tbody tr:nth-child(even) td { background:#f8fbfe; }
.payroll-table tbody tr:hover td { background:#edf5fb; }
.payroll-table .payroll-header-value { background:#476344; }
.payroll-table .payroll-header-discount { background:#74505a; }
.payroll-table .payroll-header-income { background:#276c60; }
.payroll-table .payroll-header-net { background:#174d65; }
.payroll-table .payroll-count { font-size:calc(clamp(7.5px,.57vw,9.5px) + 2pt); text-align:center; font-variant-numeric:tabular-nums; }
.payroll-table .payroll-role,.payroll-table .payroll-modality { font-size:calc(clamp(7.5px,.57vw,9.5px) + 2pt); white-space:nowrap; }
.payroll-table .payroll-date,.payroll-table .payroll-dni { text-align:center; font-size:calc(clamp(7.5px,.57vw,9.5px) + 2pt); white-space:nowrap; font-variant-numeric:tabular-nums; }
.payroll-table .payroll-currency { text-align:right; font-size:calc(clamp(7.5px,.59vw,10px) + 2pt); font-variant-numeric:tabular-nums; }
.payroll-table tbody td.payroll-value { background:#fff9e9; }
.payroll-table tbody td.payroll-discount { background:#fff7f6; color:#995864; }
.payroll-table tbody td.payroll-income { background:#f0f8f3; }
.payroll-table tbody td.payroll-net { background:#e8f3f6; color:#165b65; }
.payroll-table .payroll-total { font-weight:700; }
.payroll-person { position:sticky; left:0; z-index:2; padding-right:35px!important; }
.payroll-table .payroll-name-heading { position:sticky; left:0; z-index:3; }
.payroll-person > span { display:block; white-space:nowrap; color:#235074; font-size:calc(clamp(8px,.62vw,10px) + 2pt); line-height:1.15; font-weight:500; }
.payroll-person button { position:absolute; top:50%; right:6px; width:22px; height:20px; padding:0; transform:translateY(-50%); border:1px solid #d5e3ee; border-radius:3px; background:#fff; color:#427198; font-size:13px; cursor:pointer; }
.payroll-slip-button svg { display:block; width:14px; height:14px; margin:auto; }
.payroll-slip-button:disabled { opacity:.6; cursor:wait; }
.payroll-download-error { margin:0; color:#b54859; font-size:12px; }
.payroll-person button:hover { background:#dcecf8; color:#174e7a; }
.payroll-detail-link { padding:2px 0; border:0; background:transparent; color:#346e9a; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-variant-numeric:tabular-nums; }
.payroll-table .payroll-note { color:#778798; }
.payroll-note > span { display:block; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.payroll-table .payroll-empty { height:60px; color:#7f91a1; text-align:center; font-size:11px; }
.payroll-table tfoot th,.payroll-table tfoot td { height:27px; white-space:nowrap; border-top:2px solid #b8cedf; background:#eaf2f8; color:#285071; font-weight:600; }
.payroll-table tfoot th { padding-left:8px; text-align:left; }
.payroll-sheet-footer { display:flex; justify-content:space-between; gap:8px; padding:4px 8px; border-top:1px solid #dce7ef; color:#8495a5; font-size:9px; }
.payroll-dialog { width:min(570px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; padding:24px; border:1px solid #d0dfe9; border-radius:12px; background:#fff; color:#24445e; box-shadow:0 24px 80px #103a6033; }
.payroll-dialog::backdrop { background:#0c2c485e; backdrop-filter:blur(2px); }
.payroll-dialog > header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.payroll-dialog header span { color:#8497a7; font-size:10px; letter-spacing:.7px; }
.payroll-dialog h2 { margin:4px 0 0; color:#215273; font-size:20px; }
.payroll-dialog header button { width:30px; height:30px; border:0; background:transparent; color:#7990a2; font-size:25px; cursor:pointer; }
.payroll-dialog > p { padding-bottom:13px; border-bottom:1px solid #e4edf3; font-size:12px; color:#667f93; }
.payroll-attendance-dialog { width:min(740px,calc(100vw - 32px)); }
.payroll-attendance-content { overflow:auto; }
.payroll-attendance-content > p { color:#718a9d; font-size:11px; line-height:1.5; }
.payroll-attendance-content table { width:100%; min-width:520px; border-collapse:collapse; font-size:11px; }
.payroll-attendance-content th,.payroll-attendance-content td { padding:10px; border-bottom:1px solid #e1eaf0; text-align:left; font-variant-numeric:tabular-nums; }
.payroll-attendance-content th { background:#f0f6fa; color:#416b89; }
.payroll-page button:focus-visible,.payroll-page select:focus-visible,.payroll-table-scroll:focus-visible { outline:2px solid #3686bb; outline-offset:2px; }
@media(max-width:600px) {
  .page.payroll-page { gap:6px; margin-top:6px; }
  .payroll-header { padding:7px 10px; }
  .payroll-header h1 { font-size:16px; }
  .payroll-period { display:none; }
  .payroll-toolbar { padding:7px; gap:6px; }
  .payroll-toolbar label { flex:1; min-width:80px; }
  .payroll-toolbar label:nth-child(3) { min-width:100%; }
  .payroll-toolbar select { min-width:0; width:100%; }
  .payroll-month-state { flex:1; font-size:9px; text-align:center; }
  .payroll-export { font-size:10px; padding:0 8px; gap:6px; }
  .payroll-sheet-heading { padding:5px 7px; align-items:flex-start; }
  .payroll-sheet-heading > div { display:block; }
  .payroll-sheet-heading h2 { font-size:9px; }
  .payroll-sheet-heading span { display:block; margin-top:2px; font-size:8px; }
  .payroll-sheet-heading p { max-width:105px; text-align:right; font-size:8px; line-height:1.3; }
  .payroll-sheet-footer { padding:4px 7px; font-size:8px; }
  .payroll-person { position:relative; left:auto; }
  .payroll-table .payroll-name-heading { position:static; }
  .payroll-dialog { padding:18px; }
}

.payroll-parameters-hint { margin:10px 0; color:#59718a; font-size:12px; line-height:1.5; }

.payroll-table-scroll::-webkit-scrollbar { height:8px; }
.payroll-table-scroll::-webkit-scrollbar-track { background:#edf3f7; }
.payroll-table-scroll::-webkit-scrollbar-thumb { border:1px solid #edf3f7; border-radius:6px; background:#9ab6cd; }