/* ============================================================================ MOD-283 · BONOS DIFERIDOS — modales de partir y de saldos ---------------------------------------------------------------------------- Todo acotado a `#dif-velo`, que cuelga de . Mismo lenguaje que el resto: Notion, Linear y GitHub. Los colores salen de las variables del tema; los valores de respaldo existen sólo para que nada quede invisible. ========================================================================== */ #dif-velo{ position:fixed; inset:0; z-index:100800; background:rgba(10,12,18,.55); display:flex; align-items:center; justify-content:center; padding:20px; } #dif-velo *{ box-sizing:border-box; text-transform:none; letter-spacing:0; } #dif-velo button, #dif-velo input{ font:inherit; } #dif-velo .dif-dlg{ width:min(430px,100%); max-height:88vh; overflow:auto; background:var(--bg, #0d1117); color:var(--text, #e6edf3); border:1px solid var(--border, #30363d); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.45); font-size:13px; } #dif-velo .dif-dlg-w{ width:min(560px,100%); } #dif-velo header{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px 13px; border-bottom:1px solid var(--border, #30363d); } #dif-velo header > div{ flex:1; min-width:0; } #dif-velo header b{ font-size:14.5px; font-weight:600; } #dif-velo header small{ display:block; margin-top:2px; font-size:11.5px; color:var(--dim, #8b949e); } #dif-velo header button{ background:none; border:0; color:var(--dim, #8b949e); font-size:15px; cursor:pointer; } #dif-velo header button:hover{ color:var(--text, #e6edf3); } #dif-velo .dif-b{ padding:16px 18px; } /* El importe completo, arriba y grande: es la cifra de la que se parte todo. */ #dif-velo .dif-tot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 14px; margin-bottom:14px; border-radius:10px; background:var(--bg2, #161b22); border:1px solid var(--border, #30363d); } #dif-velo .dif-tot span{ font-size:11.5px; color:var(--dim, #8b949e); } #dif-velo .dif-tot b{ font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; } /* Las fracciones. Botones anchos y con el importe debajo: se elige por la cantidad, no por la fracción — «1/3» dice poco, «$4,166.67» dice todo. */ #dif-velo .dif-frs{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px; } #dif-velo .dif-fr{ padding:9px 4px; border-radius:9px; cursor:pointer; text-align:center; background:var(--bg2, #161b22); color:var(--text, #e6edf3); border:1px solid var(--border, #30363d); font-size:14px; font-weight:600; line-height:1.2; transition:border-color .12s, color .12s; } #dif-velo .dif-fr:hover{ border-color:var(--turq, #39d3c3); color:var(--turq, #39d3c3); } #dif-velo .dif-fr small{ display:block; margin-top:3px; font-size:10.5px; font-weight:400; color:var(--dim, #8b949e); } #dif-velo .dif-fr:hover small{ color:inherit; } #dif-velo .dif-c{ display:block; margin-bottom:10px; } #dif-velo .dif-c > span{ display:block; margin-bottom:6px; font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--dim, #8b949e); } #dif-velo .dif-c input{ width:100%; padding:10px 12px; font-size:16px; font-variant-numeric:tabular-nums; background:var(--bg2, #161b22); color:var(--text, #e6edf3); border:1px solid var(--border, #30363d); border-radius:9px; } #dif-velo .dif-c input:focus{ border-color:var(--turq, #39d3c3); outline:none; } #dif-velo .dif-resto{ font-size:12.5px; line-height:1.5; color:var(--dim, #8b949e); min-height:19px; } #dif-velo .dif-resto b{ color:var(--text, #e6edf3); } #dif-velo .dif-resto.mal{ color:#f0883e; } #dif-velo .dif-pie{ margin:14px 0 0; font-size:11.5px; line-height:1.55; color:var(--dim, #8b949e); } #dif-velo .dif-pie b{ color:var(--text, #e6edf3); } /* ── Lista de saldos ──────────────────────────────────────────────────────── */ #dif-velo .dif-item{ display:flex; align-items:center; gap:11px; padding:11px 13px; margin-bottom:8px; border-radius:10px; background:var(--bg2, #161b22); border:1px solid var(--border, #30363d); } #dif-velo .dif-it-i{ flex:1; min-width:0; } #dif-velo .dif-it-i b{ display:block; font-size:12.5px; font-weight:600; } #dif-velo .dif-it-i small{ display:block; margin-top:2px; font-size:10.5px; color:var(--dim, #8b949e); } #dif-velo .dif-it-m{ font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; } #dif-velo .dif-it-a{ display:flex; gap:5px; flex:0 0 auto; } #dif-velo .dif-vacio{ margin:0; padding:22px 0; text-align:center; font-size:12.5px; color:var(--dim, #8b949e); } #dif-velo .dif-hist{ margin-top:12px; font-size:12px; } #dif-velo .dif-hist summary{ cursor:pointer; color:var(--dim, #8b949e); padding:5px 0; } #dif-velo .dif-hist-it{ display:flex; justify-content:space-between; gap:12px; padding:6px 2px; border-top:1px solid var(--border, #30363d); color:var(--dim, #8b949e); } /* ── Botones ──────────────────────────────────────────────────────────────── */ #dif-velo .dif-btn{ height:32px; padding:0 12px; border-radius:8px; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; background:var(--bg2, #161b22); color:var(--dim, #8b949e); border:1px solid var(--border, #30363d); } #dif-velo .dif-btn:hover{ color:var(--text, #e6edf3); border-color:var(--dim, #8b949e); } /* Blanco fijo: el acento de OMNIA es oscuro en todos los temas vivos y un texto oscuro encima ya nos costó un botón ilegible una vez. */ #dif-velo .dif-pri{ background:var(--turq, #39d3c3); border-color:var(--turq, #39d3c3); color:#fff; font-weight:600; } #dif-velo .dif-pri:hover{ filter:brightness(1.1); color:#fff; } #dif-velo .dif-del:hover{ color:#f85149; border-color:rgba(248,81,73,.45); } #dif-velo footer{ display:flex; justify-content:flex-end; gap:9px; padding:14px 18px; border-top:1px solid var(--border, #30363d); } /* ══ VISTA · BONOS PENDIENTES (Humanz → Nómina) ═════════════════════════════ Vive dentro del shell de HUMANZ, así que hereda sus variables. Mismo lenguaje que Asistencia: cifras arriba, tabla debajo, sin adornos. */ .bp{ display:flex; flex-direction:column; gap:14px; padding:16px 18px; font-size:13px; color:var(--hz-tx, #e6edf3); text-transform:none; letter-spacing:0; } .bp *{ box-sizing:border-box; text-transform:none; letter-spacing:0; } .bp-kpis{ display:flex; gap:9px; flex-wrap:wrap; } .bp-kpi{ flex:1 1 170px; padding:11px 14px; border-radius:10px; background:var(--hz-sur2, #161b22); border:1px solid var(--hz-bd, #30363d); } .bp-kpi b{ display:block; font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; } .bp-kpi span{ display:block; margin-top:2px; font-size:11px; color:var(--hz-tx2, #9aa4b2); } .bp-h{ margin:6px 0 0; font-size:12px; font-weight:600; color:var(--hz-tx2, #9aa4b2); } .bp-scroll{ overflow:auto; border:1px solid var(--hz-bd, #30363d); border-radius:11px; } .bp-t{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; } .bp-t thead th{ position:sticky; top:0; z-index:1; background:var(--hz-sur2, #161b22); color:var(--hz-tx2, #9aa4b2); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:9px 10px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--hz-bd, #30363d); } .bp-t td{ padding:8px 10px; border-bottom:1px solid var(--hz-bd, #30363d); } .bp-t tbody tr:last-child td{ border-bottom:0; } .bp-t tbody tr:hover td{ background:var(--hz-sur2, #161b22); } .bp-emp{ font-weight:600; white-space:nowrap; } .bp-c{ text-align:center; white-space:nowrap; } .bp-n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .bp-ok{ color:#3fb950; } .bp-des{ color:#f85149; } .bp-saldo{ font-weight:650; } .bp-chip{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:10.5px; font-weight:600; } .bp-chip-ab{ background:rgba(240,136,62,.14); color:#f0883e; } .bp-chip-ok{ background:rgba(63,185,80,.13); color:#3fb950; } .bp-chip-des{ background:rgba(248,81,73,.12); color:#f85149; } .bp-vacio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:44px 20px; border:1px dashed var(--hz-bd, #30363d); border-radius:11px; } .bp-vacio i{ font-size:24px; color:var(--hz-mut, #6e7781); margin-bottom:4px; } .bp-vacio b{ font-size:14px; font-weight:600; } .bp-vacio span{ font-size:12.5px; color:var(--hz-tx2, #9aa4b2); max-width:420px; line-height:1.55; } .bp-cargando{ padding:40px 20px; text-align:center; color:var(--hz-tx2, #9aa4b2); font-size:13px; } .bp-mal{ color:#f85149; } .bp-pie{ margin:0; font-size:11.5px; line-height:1.55; color:var(--hz-mut, #6e7781); } .bp-pie b{ color:var(--hz-tx2, #9aa4b2); } /* Los botones de la tabla reusan los del modal, que viven fuera de `#dif-velo` sólo en este caso: se redeclaran acotados a `.bp` para no filtrarse. */ .bp .dif-btn{ height:28px; padding:0 10px; border-radius:7px; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; background:var(--hz-sur2, #161b22); color:var(--hz-tx2, #9aa4b2); border:1px solid var(--hz-bd, #30363d); } .bp .dif-btn:hover{ color:#f85149; border-color:rgba(248,81,73,.45); } /* ── El chip de la fila de nómina ─────────────────────────────────────────── */ .hz-dif-chip{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; padding:1px 8px; border-radius:20px; cursor:pointer; font-size:10.5px; font-weight:600; background:rgba(240,136,62,.13); color:#f0883e; border:1px solid rgba(240,136,62,.30); } .hz-dif-chip:hover{ background:rgba(240,136,62,.22); } .hz-dif-partir{ background:none; border:0; cursor:pointer; padding:0 3px; margin-left:3px; color:var(--dim, #8b949e); font-size:10.5px; } .hz-dif-partir:hover{ color:var(--turq, #39d3c3); }