/* ============================================================
   Nexo — hoja de estilos de la aplicación
   ============================================================ */

/* ============ Nexo — hoja de estilos ============ */
:root { --green: #0f9d6b; --green-soft: #e3f6ee; --amber: #c27803; --amber-soft: #fff3da; --red: #d63a3a; --red-soft: #fdeaea; --blue: #2358e6; --blue-soft: #e8efff; --violet: #7a4fe0; --violet-soft: #f0eafd; --teal: #0a8f87; --teal-soft: #dff5f3; }
body { background: var(--bg); }
body.modal-open { overflow: hidden; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ico { flex: none; vertical-align: middle; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }
.nowrap { white-space: nowrap; }
.num { font-weight: 600; }
.charge { color: var(--violet); }
.only-mobile { display: none; }
[hidden] { display: none !important; }
.sub { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 1px; }
.sub.inline { display: inline; }
.clip { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.clip.wide { max-width: 420px; }

/* ---------- Botones ---------- */
.btn:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--gray-soft); }
.btn.danger { background: var(--red); color: #fff; }
.btn.success { background: var(--green); color: #fff; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.xs { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn.lg { height: 46px; font-size: 15px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.icon-btn:hover:not(:disabled) { background: var(--gray-soft); color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.ok:hover { background: var(--green-soft); color: var(--green); }
.icon-btn.bad:hover { background: var(--red-soft); color: var(--red); }

/* ---------- Autenticación ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; }
.auth-brand { background: radial-gradient(1200px 600px at 0% 0%, #1d4fd8 0%, transparent 60%), radial-gradient(800px 500px at 100% 100%, #0a8f87 0%, transparent 55%), #0a1626; color: #dfe8f8; padding: 44px 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-brand::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 30% 40%, #000, transparent 75%); pointer-events: none; }
.auth-brand > * { position: relative; z-index: 1; }
.brand-lg { display: flex; align-items: center; gap: 12px; font-size: 20px; letter-spacing: -.02em; }
.brand-lg b { color: #fff; }
.auth-hero h1 { font-size: 38px; line-height: 1.12; color: #fff; max-width: 460px; letter-spacing: -.03em; }
.auth-hero h1 em { font-style: normal; background: linear-gradient(90deg, #7fb0ff, #5ee0d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p { color: #b3c3de; font-size: 15.5px; max-width: 440px; margin: 16px 0 26px; }
.auth-hero ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-hero li { display: flex; gap: 12px; align-items: center; color: #d2def2; }
.auth-hero li .ico { color: #7fb0ff; background: rgba(255, 255, 255, .08); padding: 8px; width: 36px; height: 36px; border-radius: 10px; }
.auth-brand small { color: #7d90b0; }
.auth-main { display: grid; place-items: center; padding: 32px; background: var(--bg); }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 34px; box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.auth-card.wide { width: min(560px, 100%); }
.auth-card h2 { font-size: 24px; }
.auth-card .sub { margin: -8px 0 4px; font-size: 14px; }
.auth-foot { display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; margin: 0; }
.pw { position: relative; }
.pw input { padding-right: 42px; }
.pw .icon-btn { position: absolute; right: 4px; top: 4px; }
.warn-note { display: flex; gap: 8px; align-items: center; color: var(--amber); font-size: 12.5px; margin: 0; }

/* ---------- Estructura ---------- */
.side { position: relative; }
.side-in { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; }
.brand .logo { width: 36px; height: 36px; border-radius: 10px; }
.side-in nav { flex: 1; overflow: auto; padding: 4px 12px 12px; }
.nav-group { margin-top: 14px; }
.nav-count { margin-left: auto; display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-style: normal; font-size: 11.5px; font-weight: 700; place-items: center; color: #1b1203; }
.nav-count.on { display: grid; }
.nav-count.amber { background: #f2b441; }
.nav-count.red { background: #f27c7c; }
.who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.who b { color: #fff; display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: #7388a8; font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who > div { min-width: 0; }
.side-actions .icon-btn:hover { background: var(--side-active) !important; color: #fff !important; }
.scrim { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.gsearch { position: relative; width: min(440px, 100%); }
.gsearch > span { position: absolute; left: 12px; top: 10px; color: var(--muted); pointer-events: none; }
.gsearch input { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); outline: none; }
.gsearch input:focus { border-color: var(--brand); box-shadow: var(--focus); }
.gres { position: absolute; top: 44px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
.gres a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.gres a:hover { background: var(--gray-soft); }
.gres b { display: block; font-size: 13.5px; }
.gres small { color: var(--muted); }
.gres .none { padding: 12px; color: var(--muted); text-align: center; }
.today { text-align: right; line-height: 1.25; }
.today b { display: block; text-transform: capitalize; font-size: 13px; }
.today span { color: var(--muted); font-size: 12px; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions-row { display: flex; gap: 8px; margin-bottom: 14px; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--muted); font-weight: 500; }
.back:hover { color: var(--ink); text-decoration: none; }

/* ---------- Tarjetas, estadísticas ---------- */
.card { border: 1px solid var(--line); }
.card.flush { overflow: hidden; }
.card-head p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.card.flush .card-head { padding-bottom: 14px; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-2.wide-left { grid-template-columns: 1.5fr 1fr; }
.grid-2 > .card { margin-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stats.compact { margin-bottom: 16px; }
a.stat:hover { text-decoration: none; border-color: var(--line-2); }
.stat.blue .stat-ico { background: var(--blue-soft); color: var(--blue); }
.stat.teal .stat-ico { background: var(--teal-soft); color: var(--teal); }
.stat.amber .stat-ico { background: var(--amber-soft); color: var(--amber); }
.stat.red .stat-ico { background: var(--red-soft); color: var(--red); }
.stat.violet .stat-ico { background: var(--violet-soft); color: var(--violet); }
.stat.green .stat-ico { background: var(--green-soft); color: var(--green); }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--gray-soft); color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.tabs .count-pill { margin-left: 4px; }
.tabs .on .count-pill { background: var(--brand); color: var(--brand-ink); }

/* ---------- Listas, gráficos ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; padding-bottom: 0; }
.list li:first-child { padding-top: 0; }
.li-main { display: flex; gap: 11px; align-items: center; min-width: 0; }
.li-main small, .li-side small { display: block; color: var(--muted); font-size: 12px; }
.li-side { text-align: right; flex: none; }
.li-side .badge { margin-bottom: 2px; }
.li-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.alerts .al { align-items: flex-start; justify-content: flex-start; }
.al-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.al.red .al-dot { background: var(--red); }
.al.amber .al-dot { background: var(--amber); }
.al.blue .al-dot { background: var(--blue); }
.al.green .al-dot { background: var(--green); }
.al small { display: block; color: var(--ink-2); font-size: 12.5px; }
.more-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; }
.hbars > div { display: grid; grid-template-columns: 150px 1fr 30px; gap: 12px; align-items: center; font-size: 13px; }
.hbars .bar { height: 10px; background: var(--gray-soft); border-radius: 5px; overflow: hidden; }
.hbars .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-per), #b399f2); border-radius: 5px; }

/* ---------- Insignias, avatares ---------- */
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.green { background: var(--green-soft); }
.badge.amber { background: var(--amber-soft); }
.badge.red { background: var(--red-soft); }
.badge.gray { background: var(--gray-soft); color: var(--muted); }
[data-theme=dark] .avatar { color: hsl(var(--h) 80% 85%); background: hsl(var(--h) 45% 24%); }
.emp-cell { display: flex; gap: 11px; align-items: center; min-width: 0; }
.emp-cell small { display: block; color: var(--muted); font-size: 12px; }
.emp-link { color: var(--ink); font-weight: 600; display: block; }
.emp-link:hover { color: var(--brand); text-decoration: none; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; container: tabla / inline-size; --act-w: 230px; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th[data-sort] { cursor: pointer; }
.grid th[data-sort]:hover, .grid th.sorted { color: var(--ink); }
.grid th .sort { font-style: normal; font-size: 9px; margin-left: 5px; color: var(--brand); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tr.clickable { cursor: pointer; }
.grid .right, .grid th.right { text-align: right; }
.grid td b { font-weight: 600; }
.grid tfoot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line-2); }
.selcol { width: 44px; padding-right: 0 !important; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.balance { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 8px; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.balance small { font-size: 11px; font-weight: 500; opacity: .8; }
.balance.green { background: var(--green-soft); }
.balance.amber { background: var(--amber-soft); }
.balance.red { background: var(--red-soft); }
.balance.gray { background: var(--gray-soft); color: var(--muted); }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; flex-wrap: wrap; gap: 10px; background: var(--surface); }
.pg { display: flex; gap: 4px; align-items: center; }
.pg select { height: 32px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); padding: 0 8px; margin-right: 8px; }
.pnum { min-width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; font-weight: 600; color: var(--ink-2); }
.pnum:hover { background: var(--gray-soft); }
.pnum.on { background: var(--brand); color: var(--brand-ink); }
.dots { padding: 0 4px; }
.empty { display: grid; place-items: center; text-align: center; gap: 6px; padding: 48px 24px; color: var(--muted); }
.empty strong { color: var(--ink); font-size: 15px; }
.empty p { margin: 0; max-width: 420px; }
.grid td > .kico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; margin-right: 10px; vertical-align: middle; }
.kico.green { background: var(--green-soft); color: var(--green); }
.kico.blue { background: var(--blue-soft); color: var(--blue); }
.kico.teal { background: var(--teal-soft); color: var(--teal); }
.kico.red { background: var(--red-soft); color: var(--red); }
.kico.gray { background: var(--gray-soft); color: var(--muted); }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.mini-table th, .mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.mini-table th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; }
.mini-table .r { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Filtros y pestañas ---------- */
.search { position: relative; min-width: 0; }
.search .ico { position: absolute; left: 12px; top: 11px; color: var(--muted); }
.search input { width: 100%; height: 38px; padding: 0 12px 0 36px; }
.ftr { display: grid; gap: 4px; }
.ftr > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ftr select, .ftr input { height: 38px; min-width: 130px; padding: 0 10px; }
.filters .search { flex: 2 1 250px; max-width: 480px; }
.filters .ftr { flex: 1 1 110px; min-width: 0; max-width: 260px; }
.filters .ftr.date { flex-basis: 140px; }
.filters .ftr select, .filters .ftr input { min-width: 0; width: 100%; }
.filters [data-clear-filters] { flex: none; height: 38px; }
.filters [data-clear-filters][hidden] { display: none; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { border-color: var(--brand); }
.bulk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r); margin-bottom: 14px; color: var(--ink); }
.pend-box { border-color: var(--amber); }
.pend-box .card-head p { color: var(--amber); }

/* ---------- Formularios ---------- */
input, select, textarea { background: var(--surface); border: 1px solid var(--line-2); padding: 0 12px; height: 38px; width: 100%; }
textarea { height: auto; padding: 9px 12px; resize: vertical; min-height: 72px; }
select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238393ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: var(--focus); }
input:disabled, select:disabled { background: var(--gray-soft); color: var(--muted); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input[type=date], input[type=time] { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.req { color: var(--red); font-style: normal; margin-left: 3px; }
.hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.hint-p { color: var(--muted); margin: -4px 0 12px; }
.readout { height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 9px; background: var(--gray-soft); font-weight: 600; text-transform: capitalize; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.check .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: transparent; flex: none; margin-top: 0; transition: .12s; }
.check input:checked + .box { background: var(--brand); border-color: var(--brand); color: #fff; }
.check input:focus-visible + .box { box-shadow: var(--focus); }
.check.mini .box { width: 18px; height: 18px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--gray-soft); border-radius: 10px; padding: 3px; gap: 3px; height: 38px; }
.seg span { display: grid; place-items: center; height: 32px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; transition: .12s; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg input:focus-visible + span { box-shadow: var(--focus); }
.info-box { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding: 12px 16px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 10px; margin: 12px 0 18px; }
.info-box > div span { display: block; font-size: 11.5px; color: var(--muted); }
.info-box > div b { font-size: 20px; font-variant-numeric: tabular-nums; }
.info-box b.neg { color: var(--red); }
.info-box small { color: var(--ink-2); font-size: 12.5px; flex-basis: 100%; }
.info-box.bad { background: var(--red-soft); border-color: var(--red); }
.info-box.muted { background: var(--gray-soft); border-color: var(--line); color: var(--muted); }
.warn-box { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--amber-soft); color: var(--ink); border: 1px solid var(--amber); margin-bottom: 18px; font-size: 13px; }
.warn-box .ico { color: var(--amber); margin-top: 2px; }
.sect { display: grid; gap: 2px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.sect b { display: flex; gap: 8px; align-items: center; }
.sect small { color: var(--muted); }
.form-error { display: flex; gap: 8px; align-items: flex-start; background: var(--red-soft); color: var(--red); border: 1px solid var(--red); padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.form-error .ico { margin-top: 2px; }
.only-d, .only-h, .only-c { display: none; }
.mode-h .only-h, .mode-d .only-d, .show-c .only-c { display: block; }
.confirm-msg { margin: 0 0 12px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Modales y avisos ---------- */
.modal-backdrop.in { opacity: 1; }
.modal { border: 1px solid var(--line); }
.modal-backdrop.in .modal { transform: none; }
.modal.sm { max-width: 460px; }
.modal.lg { max-width: 780px; }
.modal-head h2 { font-size: 18px; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 10px; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); max-width: 420px; transform: translateY(12px); transition: .22s; }
.toast.in { transform: none; opacity: 1; }
.toast.ok .ico { color: #4ade80; }
.toast.error .ico { color: #f87171; }
.toast.warn .ico { color: #fbbf24; }

/* ---------- Ficha de empleado ---------- */
.emp-head { display: flex; justify-content: space-between; gap: 20px; padding: 22px; flex-wrap: wrap; }
.eh-main { display: flex; gap: 18px; align-items: center; }
.emp-head h1 { font-size: 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.emp-head p { margin: 3px 0 8px; color: var(--ink-2); }
.eh-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; }
.eh-meta span { display: inline-flex; gap: 6px; align-items: center; }
.bal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.bal > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.bal strong { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.bal strong small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 5px; }
.bal > small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.bal.main { color: #fff; border: 0; background: radial-gradient(420px 200px at 100% -20%, hsl(var(--ah) 90% 62% / .4), transparent 65%), linear-gradient(135deg, hsl(var(--ah) 55% 12%), hsl(var(--ah) 58% 24%)); }
.bal.main span, .bal.main small, .bal.main strong small { color: rgba(255, 255, 255, .85); }
.bal.main strong { font-size: 36px; }
.bal.main.green .meter i { background: #34d399; }
.bal.main.amber .meter i { background: #fbbf24; }
.bal.main.red .meter i { background: #f87171; }
.bal.main.gray .meter i { background: rgba(255, 255, 255, .55); }
.meter { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .25); margin: 10px 0 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: #fff; border-radius: 4px; }
.bal.warn { border-color: var(--amber); }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 22px; }
.ficha h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
/* ficha con tres grupos: laborales a la izquierda y contacto sobre ausentismo a la derecha; en pantallas anchas, tres columnas */
.ficha.trio { grid-template-areas: "a b" "a c" "n n"; align-items: start; row-gap: 18px; }
.ficha.trio > :nth-child(1) { grid-area: a; } .ficha.trio > :nth-child(2) { grid-area: b; } .ficha.trio > :nth-child(3) { grid-area: c; } .ficha.trio > .span-all { grid-area: n; }
@media (min-width: 1800px) { .ficha.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "n n n"; } }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv span { color: var(--muted); flex: none; max-width: 48%; } .kv b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.notes { margin: 0 0 16px; white-space: pre-wrap; color: var(--ink-2); }

/* ---------- Calendario ---------- */
.cal-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav h2 { font-size: 20px; min-width: 190px; text-align: center; text-transform: capitalize; }
.cal-filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 16px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; user-select: none; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--brand)); opacity: .4; }
.chip.on { color: var(--ink); border-color: var(--c, var(--brand-line)); }
.chip.on i { opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips .chip.on { background: var(--brand-soft); border-color: var(--brand-line); }
.chips.rm .chip button { border: 0; background: none; padding: 0; display: grid; color: var(--muted); }
.chips.rm .chip button:hover { color: var(--red); }
.cal-card { padding: 14px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 6px 0; }
.cal-cell { min-height: 112px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; background: var(--surface); transition: .12s; }
.cal-cell:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.cal-cell.blank { border: 0; background: none; cursor: default; box-shadow: none; }
.cal-cell.off { background: var(--surface-2); }
.cal-cell.hol { background: var(--amber-soft); }
.cal-cell.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-d { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.cal-d b { font-size: 13px; }
.cal-cell.today .cal-d b { background: var(--brand); color: var(--brand-ink); border-radius: 12px; padding: 0 7px; }
.cal-d em { font-style: normal; font-size: 10.5px; color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev { display: grid; gap: 3px; }
.ev { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.ev.pend { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 4px, transparent 4px 8px); }
.ev.more { background: var(--gray-soft); color: var(--muted); }

/* ---------- Reportes ---------- */
.rep-list { display: grid; gap: 8px; position: sticky; top: 82px; }
.rep-list button { display: flex; gap: 12px; text-align: left; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: .12s; }
.rep-list button:hover { border-color: var(--line-2); }
.rep-list button.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.rep-list b { display: block; font-size: 13.5px; }
.rep-list small { color: var(--muted); font-size: 12px; line-height: 1.35; display: block; margin-top: 2px; }
.ri { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--gray-soft); color: var(--brand); }
.rep-list .on .ri { background: var(--brand); color: var(--brand-ink); }
.rep-form { padding: 18px 20px; }
.rep-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rep-actions { display: flex; gap: 8px; flex-wrap: wrap; }
[data-theme=dark] .rep-out { background: #0b1626; }
.rep-out .empty { padding: 40px; }
#print-root { display: none; }

/* ---------- Históricos, configuración, usuarios ---------- */
.snap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.snap { padding: 20px; display: grid; gap: 6px; margin: 0; }
.snap h3 { font-size: 16px; }
.snap p { margin: 0; color: var(--ink-2); }
.snap small { color: var(--muted); font-size: 12px; }
.snap small.note { font-style: italic; }
.snap-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 4px; }
.snap-kv { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; font-size: 13px; padding: 6px 0; }
.snap-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.role { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; }
.role small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.role span { color: var(--brand); font-weight: 600; font-size: 12px; }
.sub-h { margin: 22px 0 8px; font-size: 14px; }
.sub-h.first { margin-top: 0; }
.cfg .card-body > .sub-h:first-of-type { margin-top: 4px; }
.tier label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: 1; max-width: 220px; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- Adaptación ---------- */
@media (max-width: 1180px) {
  .rep-layout { grid-template-columns: 1fr; }
  .rep-list { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .grid-2, .grid-2.wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 270px; transform: translateX(-100%); transition: .22s; }
  .side.open { transform: none; box-shadow: var(--shadow-lg); }
  .side.open + .scrim { display: block; position: fixed; inset: 0; background: rgba(8, 16, 30, .5); z-index: 25; }
  .only-mobile { display: grid; }
  .topbar { padding: 0 16px; }
  .today { display: none; }
  .view { padding: 20px 16px 48px; }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha.trio { grid-template-areas: "a" "b" "c" "n"; }
  .cal-cell { min-height: 74px; }
  .ev { font-size: 10px; padding: 1px 4px; }
  .cal-d em { display: none; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hd-scope { display: none; }
  .filters .search { flex-basis: 100%; max-width: none; }
  .filters .ftr { flex: 1 1 calc(50% - 6px); max-width: none; }
  .hbars > div { grid-template-columns: 100px 1fr 24px; }
}

/* ---------- Impresión ---------- */
@page { size: A4; margin: 13mm 11mm; @bottom-center { content: "Página " counter(page) " de " counter(pages); font: 9px sans-serif; color: #6b7280; } }
@media print {
  html, body { background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Multi-empresa ---------- */
.co-switch { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 12px; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); border-radius: 10px; }
.co-switch select { border: 0; background-color: transparent; height: 36px; font-weight: 600; color: var(--ink); min-width: 170px; max-width: 260px; box-shadow: none !important; }
[data-theme=dark] .co-tag { color: hsl(var(--h) 80% 85%); background: hsl(var(--h) 45% 24%); }
@media (max-width: 900px) {
  .co-switch select { min-width: 110px; }
}

/* ---------- Ajustes de densidad ---------- */
.grid td, .grid th { padding-left: 12px; padding-right: 12px; }
.grid .emp-link, .grid .emp-cell small { white-space: nowrap; }
.grid .emp-cell small { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.rep-layout { display: grid; gap: 22px; align-items: start; grid-template-columns: 330px minmax(0, 1fr); }
.rep-out { background: #e7ebf2; border-radius: var(--r); padding: 22px; overflow-x: auto; }
@media (max-width: 1180px) {
  .rep-layout { grid-template-columns: minmax(0, 1fr); }
}
.co-tag { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: hsl(var(--h) 55% 28%); background: hsl(var(--h) 70% 91%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; max-width: 135px; }

/* ---------- Menú lateral plegable ---------- */
.shell.collapsed { grid-template-columns: 0 1fr; }
.shell.collapsed .side { visibility: hidden; transform: translateX(-100%); }
@media (max-width: 900px) {
  .shell.collapsed { grid-template-columns: 1fr; }
  .shell.collapsed .side { visibility: visible; transform: translateX(-100%); }
  .shell.collapsed .side.open { transform: none; }
}
.seg label { margin: 0; position: relative; display: block; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* ---------- Estado de sincronización ---------- */
.sync { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 13px; font-size: 12px; font-weight: 600; background: var(--gray-soft); color: var(--muted); white-space: nowrap; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sync.ok { color: var(--green); background: var(--green-soft); }
.sync.saving { color: var(--amber); background: var(--amber-soft); }
.sync.saving i { animation: pulse 1s infinite; }
.sync.offline, .sync.error { color: var(--red); background: var(--red-soft); }
@keyframes pulse { 50% { opacity: .3; } }
@media (max-width: 900px) {
  .gsearch { flex: 1 1 60px; min-width: 0; }
  .co-switch { flex: 0 1 auto; min-width: 0; }
  .co-switch select { min-width: 0; max-width: 120px; }
  .sync { font-size: 0; width: 26px; padding: 0; justify-content: center; gap: 0; }
  .topbar { gap: 8px; }
  .topbar .grow { display: none; }
}

/* ---------- Evaluación por estrellas ---------- */
:root { --star: #f5b301; --star-line: #c98a00; }
.stars { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; }
.st { position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; }
.st svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st .e { fill: var(--gray-soft); stroke: var(--line-2); }
.st .f { fill: var(--star); stroke: var(--star-line); filter: drop-shadow(0 1px 1px rgba(201, 138, 0, .35)); }
.star-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 8px; border-radius: 12px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.star-chip .ico { fill: currentColor; stroke: none; }
.star-chip.green { background: var(--green-soft); }
.star-chip.blue { background: var(--blue-soft); }
.star-chip.amber { background: var(--amber-soft); }
.star-chip.red { background: var(--red-soft); }
.star-cell b { min-width: 42px; }
.star-cell b small { color: var(--muted); font-weight: 500; }
.loss-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.loss-tags i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.tprog { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
.tprog i { width: 11px; height: 11px; border-radius: 50%; background: var(--gray-soft); border: 1.5px solid var(--line-2); }
.tprog i.on { background: var(--amber); border-color: var(--amber); }
.rules-strip a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.grid-2.wide-right { grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 1180px) {
  .grid-2.wide-right { grid-template-columns: 1fr; }
}
.hbars.dist > div { grid-template-columns: 110px 1fr 30px; }
.hbars.dist small { display: block; color: var(--muted); font-size: 11.5px; }
.hbars .bar.green i { background: var(--green); }
.hbars .bar.blue i { background: var(--blue); }
.hbars .bar.amber i { background: var(--amber); }
.hbars .bar.red i { background: var(--red); }
.risk-row { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.risk-row:last-child { border: 0; }
.risk-row small { display: block; color: var(--muted); font-size: 12px; }
.ftr.inline { display: flex; align-items: center; gap: 8px; }
.ftr.inline select { min-width: 110px; }
.bal.star-card strong { display: flex; align-items: center; gap: 6px; }
.bal.star-card strong .ico { fill: var(--star); stroke: var(--star-line); }
.bal.star-card:hover { text-decoration: none; transform: translateY(-1px); }
.bal-grid { display: grid; gap: 16px; margin-bottom: 22px; grid-template-columns: minmax(0, 1.35fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
@media (max-width: 1180px) {
  .bal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .bal.main, .bal-grid > :last-child:nth-child(even) { grid-column: 1 / -1; }
}
.eval-panel { padding: 22px; }
.ep-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.ep-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ep-num strong { font-size: 46px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ep-num span { color: var(--muted); }
.ep-stars { max-width: 100%; }
.ep-stars .stars { gap: 4px; }
.ep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ep-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.ep-card span { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ep-card strong { font-size: 28px; display: block; margin: 2px 0; }
.ep-card small { color: var(--muted); font-size: 12px; }
.ep-card.red span { color: var(--red); }
.ep-card.amber span { color: var(--amber); }
.ep-card.violet span { color: var(--violet); }
.empty.small { padding: 28px 16px; }
.star-hint { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; margin-top: 10px; font-size: 13px; background: var(--gray-soft); color: var(--ink-2); }
.star-hint .ico { flex: none; margin-top: 2px; }
.star-hint.bad { background: var(--amber-soft); }
.star-hint.ok { background: var(--green-soft); }
.star-hint.ok .ico { fill: none; stroke: var(--green); }
.star-hint:empty { display: none; }
.snap-ico.star { background: var(--amber-soft); color: var(--star-line); }
.kico.violet { background: var(--violet-soft); color: var(--violet); }
@font-face { font-family: "Inter Variable"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- Tokens: acento dinámico, tipografía, series validadas ---------- */
:root { --brand-soft: hsl(var(--ah) 100% 96%); --brand-line: hsl(var(--ah) 90% 86%); --brand-ink: #fff; --bg: #f5f6fa; --surface: #fff; --surface-2: #f8f9fc; --ink: #0e1626; --ink-2: #3a4760; --line: #e7eaf1; --line-2: #d6dce8; --gray-soft: #eef1f7; --side: hsl(var(--ah) 50% 8%); --side-2: hsl(var(--ah) 42% 12%); --side-active: hsl(var(--ah) 60% 22%); --side-ink: #aab8d0; --shadow: 0 1px 2px rgba(14, 22, 38, .04), 0 2px 8px rgba(14, 22, 38, .04); --shadow-lg: 0 24px 70px rgba(8, 14, 30, .30); --c-vac: #2a78d6; --c-abj: #1baf7a; --c-abi: #eb6834; --c-per: #6250d6; --good: #0f9d6b; --info: #2a78d6; --warn: #eda100; --bad: #e34948; --orange: #eb6834; --orange-soft: #fdeee7; }
[data-theme=dark] { --brand-soft: hsl(var(--ah) 55% 17%); --brand-line: hsl(var(--ah) 55% 30%); --brand-ink: hsl(var(--ah) 60% 10%); --ink: #e8eef9; }
[data-accent=indigo] { --ah: 252; }
[data-accent=esmeralda] { --ah: 160; }
[data-accent=violeta] { --ah: 278; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; font-family: var(--font); font-size: 14px; letter-spacing: -.003em; font-feature-settings: "cv11", "ss01", "tnum" 0; text-rendering: optimizeLegibility; }
::selection { background: hsl(var(--ah) 90% 60% / .28); }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.022em; }
.num, .stat strong, .kpi-val b, .grid td { font-variant-numeric: tabular-nums; }
kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface-2); color: var(--muted); }

/* ---------- Botones, campos, insignias ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid transparent; font-size: 13.5px; white-space: nowrap; text-decoration: none !important; border-radius: 10px; font-weight: 600; letter-spacing: -.005em; transition: transform .12s, box-shadow .15s, background .15s, filter .15s, border-color .15s; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn.secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 22, 38, .05); }
.btn.secondary:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.btn.gold { background: linear-gradient(180deg, #ffd24d, #f5b301); color: #3b2800; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 18px -8px rgba(245, 179, 1, .8); }
.btn.gold:hover { filter: brightness(1.05); }
.btn.glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.btn.glass:hover { background: rgba(255, 255, 255, .2); }
.btn.glass kbd { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .25); }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-2); transition: .15s; border-radius: 10px; }
input, select, textarea { outline: none; color: var(--ink); border-radius: 10px; border-color: var(--line-2); transition: border-color .15s, box-shadow .15s, background .15s; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: hsl(var(--ah) 30% 70%); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 11px; font-size: 12px; white-space: nowrap; height: 23px; font-weight: 600; letter-spacing: 0; }
.badge.orange { background: var(--orange-soft); }
.badge.teal { background: color-mix(in srgb, var(--c-abj) 16%, var(--surface)); }
.badge.blue { background: color-mix(in srgb, var(--c-vac) 14%, var(--surface)); }
.avatar { --s: 34px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-weight: 700; font-size: calc(var(--s) * .36); color: hsl(var(--h) 55% 28%); background: hsl(var(--h) 70% 90%); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.empty .ico { box-sizing: content-box; padding: 16px; background: var(--gray-soft); border-radius: 50%; color: var(--muted); stroke-width: 1.5; margin-bottom: 10px; }
.flip { transform: scaleY(-1); }

/* ---------- Estructura: barra lateral ---------- */
.shell { transition: grid-template-columns .2s; display: grid; min-height: 100vh; grid-template-columns: 256px 1fr; }
.side { transition: transform .2s, visibility .2s; color: var(--side-ink); align-self: stretch; z-index: 30; background: radial-gradient(420px 260px at 0% 0%, hsl(var(--ah) 70% 30% / .45), transparent 70%), var(--side); border-right: 1px solid rgba(255, 255, 255, .04); }
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 14px; }
.brand b { color: #fff; display: block; font-size: 17px; letter-spacing: -.02em; }
.brand small { display: block; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--ah) 25% 62%); max-width: 160px; }
.logo { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, hsl(var(--ah) 92% 66%), hsl(var(--ah) 80% 42%)); box-shadow: 0 6px 18px hsl(var(--ah) 85% 40% / .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.logo .ico { stroke: none; }
.logo.lg { width: 64px; height: 64px; border-radius: 18px; }
.ws { display: flex; align-items: center; gap: 10px; margin: 0 14px 6px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: #cdd8ec; cursor: pointer; transition: .15s; position: relative; }
.ws:hover { background: rgba(255, 255, 255, .1); }
.ws.static { cursor: default; }
.ws.static:hover { background: rgba(255, 255, 255, .06); }
.ws-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: hsl(var(--ah) 70% 45% / .35); color: #fff; flex: none; }
.ws-t { flex: 1; min-width: 0; display: block; }
.ws-t small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: hsl(var(--ah) 20% 62%); font-weight: 700; }
.ws-t b { display: block; color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws select { width: 100%; background: transparent; border: 0; color: #fff; font-weight: 600; font-size: 13px; padding: 0 18px 0 0; height: 20px; box-shadow: none !important; background-image: none; cursor: pointer; text-overflow: ellipsis; }
.ws select option { color: #111; }
.ws > .ico { color: #8ea2c2; position: absolute; right: 10px; pointer-events: none; }
.nav-group > span { display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; padding: 0 10px 6px; font-weight: 700; color: hsl(var(--ah) 20% 48%); padding-left: 12px; }
.nav-group a { display: flex; align-items: center; gap: 11px; margin-bottom: 2px; text-decoration: none; transition: .12s; position: relative; padding: 9px 12px; border-radius: 10px; font-weight: 500; color: var(--side-ink); }
.nav-group a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-group a.active { background: linear-gradient(90deg, hsl(var(--ah) 70% 40% / .55), hsl(var(--ah) 70% 40% / .18)); color: #fff; box-shadow: inset 0 0 0 1px hsl(var(--ah) 80% 70% / .18); }
.nav-group a.active::before { content: ""; position: absolute; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; left: -12px; background: hsl(var(--ah) 95% 72%); box-shadow: 0 0 12px hsl(var(--ah) 95% 65%); }
.nav-group a .ico { opacity: .85; }
.nav-group a.active .ico { opacity: 1; }
.side-user { border-top: 1px solid #16253c; display: grid; gap: 10px; margin: 0 12px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .05); padding: 12px; }
.side-actions { display: flex; gap: 4px; margin-top: 2px; }
.side-actions .icon-btn { color: #8ea2c2; flex: 1; width: auto; border-radius: 9px; }

/* ---------- Estructura: barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; border-bottom: 1px solid var(--line); height: 64px; gap: 12px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 0; }
.crumbs > .ico { flex: none; opacity: .55; }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); text-decoration: none; }
.cmdk-trigger { display: flex; align-items: center; gap: 10px; width: min(380px, 38vw); height: 40px; padding: 0 8px 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; transition: .15s; box-shadow: var(--shadow); }
.cmdk-trigger:hover { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.cmdk-trigger span { flex: 1; text-align: left; font-size: 13.5px; }
.bell { position: relative; }
.bell #bellCount { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--bad); color: #fff; font: 700 10.5px/17px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.view { width: 100%; padding: 26px 30px 72px; outline: none; animation: fade .25s ease; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.sync { height: 28px; }

/* ---------- Tarjetas, indicadores, tablas ---------- */
.card { background: var(--surface); margin-bottom: 20px; border-radius: var(--r); box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 0; }
.card-head h3 { display: flex; gap: 8px; align-items: center; font-size: 14.5px; font-weight: 650; }
.card-body { padding: 14px 22px 22px; }
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico label" "val val" "sub sub"; align-content: start; align-items: center; column-gap: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); border-radius: 14px; padding: 16px 18px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.stat-body { display: contents; }
.stat-label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.stat strong { grid-area: val; display: block; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat small { grid-area: sub; display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.stats.compact .stat { padding: 14px 16px; }
.stats.compact .stat strong { font-size: 24px; }
.stats.pay .stat strong { font-size: 21px; }
a.stat:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(14, 22, 38, .25); }
.stat-ico { grid-area: ico; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; }
.stat-ico .ico { width: 17px; height: 17px; }
.grid th { position: sticky; top: 0; text-align: left; text-transform: uppercase; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; background: color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter: blur(6px); font-size: 11px; letter-spacing: .06em; padding: 12px 14px; }
.grid td { border-bottom: 1px solid var(--line); vertical-align: middle; padding: 10px 14px; }
.grid tbody tr { transition: background .12s; }
.grid tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
[data-density=compacta] .grid td { padding: 6px 14px; font-size: 13px; }
[data-density=compacta] .grid th { padding: 9px 14px; }
[data-density=compacta] .avatar { --s: 26px !important; }
[data-density=compacta] .emp-cell small, [data-density=compacta] .sub { font-size: 11.5px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; gap: 2px; scrollbar-width: none; scroll-behavior: smooth; } .tabs::-webkit-scrollbar { display: none; } .tabs.ovf { --fl: 48px; --fr: 48px; mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); } .tabs.ovf.start { --fl: 0px; } .tabs.ovf.end { --fr: 0px; }
.tabs button { background: none; border: 0; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; padding: 10px 13px; font-size: 13.5px; border-radius: 8px 8px 0 0; transition: color .15s, background .15s; }
.tabs button:hover { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.tabs button.on { color: var(--brand); background: transparent; }
.modal { border-radius: 20px; }
.modal-head { display: flex; justify-content: space-between; gap: 12px; padding: 22px 24px 0; }
.modal-body { padding: 18px 24px 8px; }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 24px 22px; }
.toast { opacity: 0; border-radius: 12px; padding: 12px 18px; }

/* ---------- Panel: encabezado, indicadores y rejilla ---------- */
.hero-card { padding: 26px 30px; }
.hero-card::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(ellipse at 80% 20%, #000, transparent 70%); pointer-events: none; }
.hero-body { position: relative; z-index: 1; min-width: 0; max-width: 640px; }
.hero-card h1 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin: 0; }
.hero-card p { margin: 8px 0 18px; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.5; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { position: relative; z-index: 1; width: min(340px, 34%); height: auto; flex: none; }
.hero-art .cl path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; stroke-dasharray: 3 4; }
.hero-art .cl circle { fill: rgba(255, 255, 255, .85); }
.hero-art .gs path { fill: #ffd24d; filter: drop-shadow(0 0 8px rgba(255, 210, 77, .8)); }
.hero-art .gs { transform-box: fill-box; animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .55; } }
.kpi { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
a.kpi:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(14, 22, 38, .3); border-color: var(--line-2); }
.kpi.blue { --kt: var(--c-vac); }
.kpi.teal { --kt: var(--c-abj); }
.kpi.orange { --kt: var(--c-abi); }
.kpi.red { --kt: var(--bad); }
.kpi.violet { --kt: var(--c-per); }
.kpi.gold { --kt: #f5b301; }
.kpi-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--kt); background: color-mix(in srgb, var(--kt) 14%, var(--surface)); }
.kpi-label { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kpi.gold .kpi-ico { color: #c98a00; }
.kpi.gold .kpi-ico .ico { fill: #f5b301; stroke: #c98a00; }
.kpi-val { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi-val b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; display: inline-flex; align-items: center; gap: 6px; }
.star-i .ico { fill: #f5b301; stroke: #c98a00; vertical-align: -3px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650; padding: 2px 7px; border-radius: 9px; background: var(--gray-soft); color: var(--muted); }
.delta.bad { background: color-mix(in srgb, var(--bad) 15%, var(--surface)); }
.kpi-foot { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px; min-height: 30px; flex: 1; }
.kpi-foot small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.spark { flex: none; overflow: visible; }
.spark .sl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .sa { fill: currentColor; opacity: .12; }
.spark .sd { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.dash-grid .card { height: 100%; margin: 0; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
@media (max-width: 1180px) {
  .span-7, .span-5 { grid-column: span 12; }
  .span-4 { grid-column: span 6; }
  .hero-art { display: none; }
}
@media (max-width: 760px) {
  .span-4 { grid-column: span 12; }
  .hero-card { padding: 24px 20px; }
}

/* ---------- Gráficos ---------- */
.chart-fit { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.chart-fit > .chart { position: absolute; inset: 0 auto auto 0; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .gl.base { stroke: var(--line-2); }
.chart .gt { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .gt.sm { font-size: 10px; opacity: .8; }
.chart .gv { fill: var(--ink-2); font-size: 11.5px; font-weight: 650; font-family: var(--font); }
.chart .hit { fill: transparent; cursor: default; }
.chart .col:hover .hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.chart .cbar { fill: var(--c-vac); }
.chart .col.off .cbar { fill: var(--line-2); }
.chart .todaybg { fill: var(--brand-soft); }
.chart .col.today .gt { fill: var(--brand); font-weight: 700; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-2); font-size: 12.5px; margin-top: 10px; }
.legend i { border-radius: 3px; }
.viz-table { margin-top: 10px; font-size: 12.5px; }
.viz-table summary { cursor: pointer; color: var(--muted); font-weight: 600; list-style: none; }
.viz-table summary::before { content: "▸ "; }
.viz-table[open] summary::before { content: "▾ "; }
.viz-table table { margin-top: 8px; border-collapse: collapse; width: 100%; }
.viz-table th, .viz-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.viz-table th:first-child, .viz-table tbody th { text-align: left; font-weight: 600; }
#tip { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; max-width: 280px; padding: 9px 12px; border-radius: 10px; background: #0e1626; color: #e8eef9; font-size: 12.5px; line-height: 1.55; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); transition: opacity .12s; }
#tip.on { opacity: 1; }
[data-theme=dark] #tip { background: #1c2a45; }
#tip b { color: #fff; }
.tp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px; }
.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; padding: 6px 0 2px; }
.donut { position: relative; flex: none; }
.donut svg { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--gray-soft); stroke-width: 18; }
.ring { fill: none; stroke-width: 18; transition: stroke-width .15s; cursor: default; }
.ring:hover { stroke-width: 22; }
.donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-c b { font-size: 26px; letter-spacing: -.03em; }
.donut-c small { color: var(--muted); font-size: 12px; }
.donut-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 150px; }
.donut-leg li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.donut-leg i { width: 12px; height: 12px; border-radius: 4px; }
.donut-leg b { font-variant-numeric: tabular-nums; }
.risk-link { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 11px; background: color-mix(in srgb, var(--bad) 11%, var(--surface)); color: var(--bad); font-weight: 600; font-size: 13px; }
.risk-link .ico:last-child { margin-left: auto; }
.risk-link.ok { background: color-mix(in srgb, var(--good) 11%, var(--surface)); color: var(--good); }
.risk-link:hover { text-decoration: none; filter: brightness(.97); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feed li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.feed .fi { width: 28px; height: 28px; border-radius: 9px; background: var(--gray-soft); color: var(--muted); display: grid; place-items: center; flex: none; }
.feed small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.feed b { color: var(--ink); }

/* ---------- Calendario con la paleta validada ---------- */
.ev.vacacion { background: var(--c-vac); color: #fff; }
.ev.ausencia-j { background: var(--c-abj); color: #fff; }
.ev.ausencia-i { background: var(--c-abi); color: #fff; }
.ev.permiso { background: var(--c-per); color: #fff; }

/* ---------- Menús desplegables ---------- */
.pop { position: fixed; z-index: 300; width: 340px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: .14s; overflow: hidden; }
.pop.in { opacity: 1; transform: none; }
.prefs-pop { width: 300px; }
.pop-h { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.pop-h span { color: var(--muted); font-size: 12px; }
.pop-b { padding: 8px; max-height: 60vh; overflow: auto; }
.notif { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--ink); }
.notif:hover { background: var(--gray-soft); text-decoration: none; }
.notif > .ico:last-child { margin-left: auto; color: var(--muted); }
.notif b { display: block; font-size: 13px; font-weight: 600; }
.notif small { color: var(--muted); font-size: 12px; }
.nico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.nico.blue { background: color-mix(in srgb, var(--c-vac) 15%, var(--surface)); color: var(--c-vac); }
.nico.violet { background: color-mix(in srgb, var(--c-per) 15%, var(--surface)); color: var(--c-per); }
.nico.orange { background: var(--orange-soft); color: var(--orange); }
.nico.red { background: color-mix(in srgb, var(--bad) 15%, var(--surface)); color: var(--bad); }
.pop-empty { display: grid; place-items: center; gap: 4px; padding: 28px 16px; text-align: center; color: var(--muted); }
.pop-empty .ico { color: var(--good); }
.pop-empty b { color: var(--ink); }
.prefs { padding: 14px 16px 16px; display: grid; gap: 8px; }
.prefs label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; background: var(--gray-soft); border-radius: 11px; }
.seg2 button { border: 0; background: transparent; height: 32px; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg2 button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.swatches { display: flex; gap: 10px; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 3px; background: transparent; cursor: pointer; box-shadow: 0 0 0 2px transparent; transition: .12s; }
.sw i { display: block; width: 100%; height: 100%; border-radius: 50%; background: hsl(var(--sh) 80% 52%); }
.sw.on { box-shadow: 0 0 0 2px var(--ink); }
.sw[data-accent=azul] { --sh: 224; }
.sw[data-accent=indigo] { --sh: 252; }
.sw[data-accent=esmeralda] { --sh: 160; }
.sw[data-accent=violeta] { --sh: 278; }
.sw[data-accent=rosa] { --sh: 338; }

/* ---------- Paleta de comandos ---------- */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 350; background: rgba(6, 12, 26, .5); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; transition: opacity .14s; }
.cmdk-backdrop.in { opacity: 1; }
.cmdk { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-8px) scale(.985); transition: .16s; }
.cmdk-backdrop.in .cmdk { transform: none; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-in input { border: 0; box-shadow: none !important; background: transparent; height: 100%; font-size: 16px; padding: 0; flex: 1; }
.cmdk-list { max-height: min(52vh, 440px); overflow: auto; padding: 8px; }
.cmdk-g { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cmdk-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; background: transparent; border-radius: 12px; text-align: left; cursor: pointer; color: var(--ink); }
.cmdk-i.on { background: var(--brand-soft); }
.cmdk-i .ci { width: 32px; height: 32px; border-radius: 9px; background: var(--gray-soft); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.cmdk-i.on .ci { background: var(--brand); color: var(--brand-ink); }
.ct { flex: 1; min-width: 0; }
.ct b { display: block; font-size: 14px; font-weight: 600; }
.ct small { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-empty { display: grid; place-items: center; gap: 4px; padding: 36px 16px; color: var(--muted); text-align: center; }
.cmdk-empty b { color: var(--ink); }
.cmdk-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.cmdk-foot kbd { margin-right: 4px; }

/* ---------- Carga ---------- */
.splash { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(800px 400px at 50% 30%, hsl(var(--ah) 60% 22% / .8), transparent 70%), var(--side); color: #fff; }
.splash b { font-size: 22px; letter-spacing: -.02em; }
.splash .logo.lg { animation: floaty 2.4s ease-in-out infinite; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #ffd24d; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes floaty { 50% { transform: translateY(-6px); } }

/* ============================================================
   Pantalla de entrada (sitio web)
   ============================================================ */
.lp { background: var(--bg); color: var(--ink); overflow-x: hidden; }
.lp-nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 5vw, 64px); background: rgba(8, 15, 32, .74); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #dfe8f8; }
.lp-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none !important; }
.lp-brand b { display: block; font-size: 18px; letter-spacing: -.02em; }
.lp-brand small { display: block; font-size: 11.5px; color: #8da2c6; margin-top: -2px; }
.lp-nav nav { display: flex; gap: 26px; margin-left: auto; margin-right: 8px; }
.lp-nav nav a { color: #b9c8e4; font-weight: 500; font-size: 14px; transition: color .15s; }
.lp-nav nav a:hover { color: #fff; text-decoration: none; }
.lp-hero { padding: clamp(44px, 7vw, 92px) clamp(16px, 5vw, 64px) 150px; }
.lp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 75%); }
.lp-sky { position: absolute; inset: 0; pointer-events: none; }
.lp-sky i { position: absolute; width: var(--s); height: var(--s); color: #ffd24d; opacity: .55; animation: twinkle 3.6s ease-in-out infinite; animation-delay: var(--d); }
.lp-sky i .ico { width: 100%; height: 100%; fill: currentColor; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 210, 77, .7)); }
.lp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1240px; margin: 0 auto; }
.lp-copy h1 { font-size: clamp(34px, 4.8vw, 62px); font-weight: 780; line-height: 1.04; letter-spacing: -.04em; color: #fff; margin: 18px 0 16px; max-width: 720px; }
.lp-copy > p { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: #b9c8e4; max-width: 600px; margin: 0 0 22px; }
.lp-trust { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.lp-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #d4e0f5; font-weight: 500; }
.lp-trust .ico { color: #5ee0b0; }
.lp-metrics { display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lp-metrics b { display: block; font-size: 30px; letter-spacing: -.03em; color: #fff; }
.lp-metrics span { font-size: 12.5px; color: #8da2c6; }
.lp-card-wrap { display: flex; justify-content: center; }
.lp-card-wrap .auth-card.wide { max-width: 560px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.lp-copy > * { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.lp-copy > *:nth-child(2) { animation-delay: .06s; }
.lp-copy > *:nth-child(3) { animation-delay: .12s; }
.lp-copy > *:nth-child(4) { animation-delay: .18s; }
.lp-copy > *:nth-child(5) { animation-delay: .24s; }
.lp-preview { position: relative; z-index: 3; margin-top: -110px; padding: 0 clamp(16px, 5vw, 64px); }
.mk { max-width: 1060px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 50px 100px -40px rgba(8, 14, 40, .55), 0 0 0 8px rgba(255, 255, 255, .06); transform: perspective(1600px) rotateX(2deg); }
.mk-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mk-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff6159; }
.mk-bar i:nth-child(2) { background: #ffbd2e; }
.mk-bar i:nth-child(3) { background: #28c940; }
.mk-bar span { margin: 0 auto; font-size: 12px; color: var(--muted); transform: translateX(-24px); }
.mk-body { display: grid; grid-template-columns: 56px 1fr; min-height: 330px; }
.mk-side { background: var(--side); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; }
.mk-side b .ico { fill: #fff; stroke: none; }
.mk-side i { width: 26px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.mk-side i.on { background: hsl(var(--ah) 90% 70%); }
.mk-main { padding: 18px; display: grid; gap: 14px; background: var(--bg); }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.mk-stats span { display: block; font-size: 11px; color: var(--muted); }
.mk-stats b { font-size: 22px; letter-spacing: -.03em; display: inline-flex; gap: 4px; align-items: center; }
.mk-stats .gold .ico { fill: #f5b301; stroke: #c98a00; }
.mk-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.mk-chart, .mk-list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mk-chart span, .mk-list span { display: block; font-size: 11.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.mk-chart svg { width: 100%; height: 110px; }
.mk-list > div { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.mk-list b { display: block; font-size: 12px; margin-bottom: 2px; }
.lp-sec { padding: clamp(56px, 8vw, 104px) clamp(16px, 5vw, 64px); max-width: 1240px; margin: 0 auto; }
.lp-sec.alt { max-width: none; background: var(--surface-2); border-block: 1px solid var(--line); }
.lp-sec.alt > * { max-width: 1240px; margin-inline: auto; }
.lp-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.lp-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.lp-eyebrow.gold { color: #ffd24d; }
.lp-head h2, .lp-starsec h2, .lp-cta h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 14px; }
.lp-head p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 0; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.lp-grid.four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lp-feat { padding: 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.lp-feat:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(14, 22, 38, .3); border-color: var(--brand-line); }
.lp-feat h3 { font-size: 17.5px; margin: 16px 0 8px; }
.lp-feat p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14.5px; }
.lp-feat.sm { padding: 22px; }
.lp-feat.sm h3 { font-size: 16px; margin-top: 14px; }
.lp-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 40%, var(--surface))); color: var(--brand); border: 1px solid var(--brand-line); }
.lp-starsec { position: relative; overflow: hidden; padding: clamp(60px, 8vw, 110px) clamp(16px, 5vw, 64px); color: #dbe6fb; background: radial-gradient(700px 400px at 85% 10%, rgba(245, 179, 1, .18), transparent 65%), radial-gradient(800px 500px at 0% 100%, hsl(var(--ah) 80% 45% / .35), transparent 65%), linear-gradient(160deg, #0a1426, #101f40); }
.lp-split { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.lp-starsec h2 { color: #fff; }
.lp-starsec p { color: #b9c8e4; line-height: 1.65; font-size: 16.5px; }
.lp-rules { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.lp-rules li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.lp-rules span { color: #e4ecfb; }
.lp-small { font-size: 13px !important; color: #8da2c6 !important; }
.lp-demo { padding: 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); animation: floaty 6s ease-in-out infinite; }
.lp-demo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.lp-demo-head > div { flex: 1; }
.lp-demo-head b { color: #fff; display: block; font-size: 17px; }
.lp-demo-head small { color: #9db0d3; }
.lp-demo .stars { gap: 3px; }
.lp-demo .st .e { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .22); }
.lp-demo-score { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 18px; }
.lp-demo-score strong { font-size: 50px; letter-spacing: -.04em; color: #fff; line-height: 1; }
.lp-demo-score span { color: #9db0d3; }
.lp-demo-ev { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.lp-demo-ev li { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #e4ecfb; font-size: 14px; }
.lp-demo-ev small { display: block; color: #8da2c6; font-size: 12px; }
.lp-demo-ev b { color: #ff9b73; font-variant-numeric: tabular-nums; }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; counter-reset: s; }
.lp-steps article { position: relative; padding: 28px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lp-steps article span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, hsl(var(--ah) 90% 62%), hsl(var(--ah) 80% 44%)); color: #fff; font-weight: 750; font-size: 17px; box-shadow: 0 8px 18px -6px hsl(var(--ah) 85% 45% / .7); }
.lp-steps h3 { margin: 18px 0 8px; font-size: 18px; }
.lp-steps p { margin: 0; color: var(--muted); line-height: 1.6; }
.lp-cta { text-align: center; padding: clamp(60px, 8vw, 100px) 20px; color: #fff; background: radial-gradient(700px 320px at 50% 0%, hsl(var(--ah) 90% 60% / .5), transparent 65%), linear-gradient(135deg, #0a1426, hsl(var(--ah) 55% 20%)); }
.lp-cta h2 { color: #fff; max-width: 720px; margin-inline: auto; }
.lp-cta p { color: #b9c8e4; margin: 0 0 26px; font-size: 17px; }
.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 26px clamp(16px, 5vw, 64px); background: #070e1d; color: #7d90b0; font-size: 13px; }
.lp-foot .lp-brand b { font-size: 16px; }
.lp .auth-card h2 { font-size: 26px; letter-spacing: -.03em; }
.lp .btn.lg.gold { height: 52px; padding: 0 30px; font-size: 16px; }
@media (max-width: 980px) {
  .lp-hero-grid, .lp-split { grid-template-columns: 1fr; }
  .lp-nav nav { display: none; }
  .lp-nav .btn { margin-left: auto; }
  .mk-stats { grid-template-columns: repeat(2, 1fr); }
  .mk-row { grid-template-columns: 1fr; }
  .mk { transform: none; }
  .lp-hero { padding-bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  #tip, .pop, .cmdk-backdrop { display: none !important; }
}

/* ---------- Detalles de interfaz ---------- */
.lp-card-wrap .auth-card { width: 100%; max-width: 440px; border-radius: 22px; padding: 34px 32px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); background: var(--surface); animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; color: var(--ink); }
.lp-card-wrap .auth-card .sub { color: var(--muted); }
.lp-card-wrap .auth-card h2 { color: var(--ink); }
.hero-date { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 4px 12px; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); margin-bottom: 14px; text-transform: none; }
.hero-date::first-letter { text-transform: uppercase; }
.kpis { display: grid; gap: 14px; margin-bottom: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi-foot .spark { width: 100%; height: 24px; }
.mk-list > div > div { min-width: 0; flex: 1; }
.mk-list .stars { flex-wrap: nowrap; gap: 1px; }
.star-cell .stars { flex-wrap: nowrap; gap: 1px; }
.star-cell { display: flex; align-items: center; white-space: nowrap; gap: 8px; }
.chart text, .chart .todaybg, .chart .cbar { pointer-events: none; }
.eval-panel .stars { flex-wrap: wrap; }
.grid td:has(.star-cell) { min-width: 250px; }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.soon { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.soon h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
.soon-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.soon-row > div { flex: 1; min-width: 0; }
.soon-row b { display: block; font-size: 13px; }
.soon-row small { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Identidad sobria (sin motivos de estrellas)
   ============================================================ */
.logo b { font: 800 19px/1 var(--font); color: #fff; letter-spacing: -.02em; }
.logo.lg b { font-size: 32px; }
.logo .ico { fill: none; }
.btn.light { background: #fff; color: #0e1626; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.btn.light:hover { background: #f1f5ff; }
.hero-card { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 20px; color: #fff; margin-bottom: 18px; box-shadow: 0 22px 50px -24px hsl(var(--ah) 80% 20% / .8); background: radial-gradient(700px 320px at 90% -30%, hsl(var(--ah) 90% 62% / .45), transparent 65%), linear-gradient(135deg, hsl(var(--ah) 55% 12%), hsl(var(--ah) 58% 24%)); }
.hero-card p b { color: #fff; border-bottom: 2px solid hsl(var(--ah) 90% 70% / .7); }
.kpi.accent { --kt: var(--brand); }
.kpi .of { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lp-hero { position: relative; overflow: hidden; color: #e8efff; background: radial-gradient(1100px 560px at 12% -10%, hsl(var(--ah) 90% 58% / .5), transparent 62%), radial-gradient(900px 520px at 95% 15%, hsl(calc(var(--ah) + 50) 70% 40% / .35), transparent 60%), linear-gradient(180deg, #0a1426, #0c1b38); }
.lp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); color: #cfe0ff; }
.lp-pill .ico { fill: none; stroke: currentColor; }
.lp-copy h1 em { font-style: normal; background: linear-gradient(90deg, hsl(var(--ah) 100% 82%), hsl(calc(var(--ah) + 40) 95% 78%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-eyebrow.light { color: hsl(var(--ah) 100% 80%); }
.lp-rulesec { padding: clamp(60px, 8vw, 110px) clamp(16px, 5vw, 64px); color: #dbe6fb; background: radial-gradient(800px 500px at 0% 100%, hsl(var(--ah) 80% 45% / .3), transparent 65%), linear-gradient(160deg, #0a1426, #101f40); }
.lp-rulesec h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 14px; }
.lp-rulesec p { color: #b9c8e4; line-height: 1.65; font-size: 16.5px; }
.lp-rules i { font-style: normal; font-weight: 750; font-variant-numeric: tabular-nums; color: hsl(var(--ah) 100% 82%); min-width: 96px; font-size: 14px; }
.lp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.lp-tiles div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.lp-tiles span { display: block; font-size: 12px; color: #9db0d3; }
.lp-tiles b { font-size: 28px; color: #fff; letter-spacing: -.03em; }
.lp-tiles small { font-size: 13px; color: #9db0d3; font-weight: 500; }
.lp-prog { margin-bottom: 14px; }
.lp-prog span { font-size: 12px; color: #9db0d3; display: block; margin-bottom: 6px; }
.lp-prog i, .mk-bar2 { display: block; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lp-prog u, .mk-bar2 u { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, hsl(var(--ah) 90% 62%), hsl(calc(var(--ah) + 40) 90% 66%)); text-decoration: none; }
.mk-bar2 { background: var(--gray-soft); height: 7px; }
.mk-list em { font-style: normal; font-weight: 650; font-size: 12px; color: var(--ink-2); }
.mk-stats .gold { border-color: var(--line); background: var(--surface); }

/* módulo de evaluación: neutral */
.rules-strip { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line); margin-bottom: 18px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); }
.rules-strip .ico { flex: none; color: var(--brand); fill: none; }
.bal.star-card { color: var(--ink); text-decoration: none; }
.bal.star-card:hover { border-color: var(--brand-line); }
.bal.star-card.red { border-color: var(--bad); }
.star-chip .ico { display: none; }
.star-chip small { font-weight: 500; opacity: .75; margin-left: 1px; }
.ep-score { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 22px 26px; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 18px; background: var(--surface-2); }
.star-hint .ico { fill: none; stroke: var(--star-line); }
.lp-sky, .hero-art { display: none; }

/* ============================================================
   Correcciones tras revisión de calidad
   ============================================================ */

/* acento: luminosidad por color para contraste suficiente en botones y enlaces */
[data-accent=esmeralda] { --bl: 33%; }
[data-accent=rosa] { --ah: 338; --bl: 47%; }
[data-accent=indigo] { --bl: 55%; }
[data-accent=violeta] { --bl: 51%; }
:root { --brand: hsl(var(--ah) 78% var(--bl)); }
[data-theme=dark][data-accent=esmeralda] { --brand: hsl(160 70% 52%); }
.btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 1px 2px hsl(var(--ah) 80% 25% / .35), 0 6px 14px -6px hsl(var(--ah) 85% 45% / .6); color: var(--brand-ink); background: linear-gradient(180deg, hsl(var(--ah) 80% calc(var(--bl) + 6%)), var(--brand)); }
[data-theme=dark] .btn.primary { background: linear-gradient(180deg, hsl(var(--ah) 90% 72%), var(--brand)); }

/* contraste de textos */
:root { --bl: 52%; --font: "Inter Variable", "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ah: 224; --focus: 0 0 0 3px hsl(var(--ah) 90% 60% / .28); --r: 14px; --r-sm: 8px; --muted: #5a677e; --ink-green: #0a7a53; --ink-amber: #8a5a00; --ink-red: #b02020; --ink-blue: hsl(var(--ah) 70% 38%); --ink-violet: #5b3bb5; --ink-orange: #a8420c; --ink-teal: #0a6f5a; }
[data-theme=dark] { --brand: hsl(var(--ah) 92% 68%); --bg: #090f1b; --surface: #0f1829; --surface-2: #131f35; --ink-2: #b4c1d8; --line: #1c2a42; --line-2: #2a3b5a; --gray-soft: #17233a; --side: hsl(var(--ah) 45% 5%); --side-2: hsl(var(--ah) 40% 9%); --side-active: hsl(var(--ah) 55% 17%); --c-vac: #3987e5; --c-abj: #199e70; --c-abi: #d95926; --c-per: #9085e9; --good: #35c690; --info: #5b8cff; --warn: #f2b441; --bad: #f06b6b; --orange: #f08a5e; --orange-soft: #3a1f12; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25); --star: #ffc933; --star-line: #e0a400; --green: #35c690; --green-soft: #0f3226; --amber: #f2b441; --amber-soft: #3a2b0c; --red: #f06b6b; --red-soft: #3b1618; --blue: #5b8cff; --blue-soft: #172c55; --violet: #a68bf5; --violet-soft: #2a1f4f; --teal: #3fd0c5; --teal-soft: #0d3431; --muted: #8d9bb3; --ink-green: #35c690; --ink-amber: #f2b441; --ink-red: #f06b6b; --ink-blue: #8fb2ff; --ink-violet: #a68bf5; --ink-orange: #f08a5e; --ink-teal: #3fd0c5; }
.badge.green, .star-chip.green, .balance.green { color: var(--ink-green); }
.badge.amber, .star-chip.amber, .balance.amber { color: var(--ink-amber); }
.badge.red, .star-chip.red, .balance.red { color: var(--ink-red); }
.badge.blue, .star-chip.blue { color: var(--ink-blue); }
.badge.violet { background: color-mix(in srgb, var(--c-per) 14%, var(--surface)); color: var(--ink-violet); }
.badge.orange { color: var(--ink-orange); }
.badge.teal { color: var(--ink-teal); }
.loss-tags .red { background: var(--red-soft); color: var(--ink-red); }
.loss-tags .amber { background: var(--amber-soft); color: var(--ink-amber); }
.loss-tags .violet { background: var(--violet-soft); color: var(--ink-violet); }
.delta.good { background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: var(--ink-green); }
.delta.bad { color: var(--ink-red); }
.grid td .charge { color: var(--ink); }
.sub.warn { color: var(--muted); }
.sub.warn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--amber); vertical-align: 1px; }
.pos { color: var(--ink-green); }

/* barra lateral en pantallas bajas */
.side nav { padding: 6px 12px 12px; min-height: 0; }
@media (max-height: 820px) {
  .brand { padding: 14px 18px 8px; }
  .nav-group { margin-top: 8px; }
  .nav-group a { padding: 7px 12px; margin-bottom: 1px; }
  .side-user { padding: 8px 10px; margin-bottom: 8px; }
  .ws { padding: 7px 10px; }
}

/* tabla de empleados: columnas opcionales según ancho */
@media (max-width: 1500px) {
  .c-opt { display: none; }
}

/* modales: no exceder la ventana */
.modal-backdrop { backdrop-filter: blur(5px) saturate(1.2); background: rgba(6, 12, 26, .55); position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; overflow-y: auto; opacity: 0; transition: opacity .16s; padding: clamp(10px, 4vh, 40px) 16px; }

/* tardanzas: lista con desplazamiento */
.card-body.scroll { max-height: 340px; overflow: auto; }

/* menú móvil: botón de cierre */
.side-close { display: none; margin-left: auto; color: #aab8d0; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 300px); transform: translateX(-102%); visibility: visible; }
  .shell.collapsed .side { visibility: visible; transform: translateX(-102%); }
  .side.open, .shell.collapsed .side.open { transform: none; box-shadow: var(--shadow-lg); }
  .side-close { display: grid; }
  .main { min-width: 0; }
  .view { padding: 18px 14px 56px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .crumbs { display: none; }
  .cmdk-trigger { width: auto; flex: 1; }
  .cmdk-trigger kbd { display: none; }
  .grow { display: none; }
  .form-grid > *, .form-grid.cols-3 > * { grid-column: 1 / -1 !important; }
  .hero-card { padding: 22px 18px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 14px; }
  .kpi-val b { font-size: 26px; }
  .li-actions { flex-wrap: wrap; margin-left: auto; }
  .list li { flex-wrap: wrap; }
  .list li > .li-main { flex: 1 1 220px; }
  .alerts .al, .celeb li { flex-wrap: nowrap; }
  .alerts .al > div, .celeb li > .li-main { flex: 1 1 auto; min-width: 0; }
  .cmdk-in kbd { display: none; }
  .modal { border-radius: 16px; }
  .page-head h1 { font-size: 23px; }
  .filters { padding: 12px; }
  .ftr select, .ftr input { min-width: 0; width: 100%; }
  .ftr { flex: 1 1 140px; }
  .emp-head { padding: 16px; }
  .eh-main { flex-wrap: wrap; }
  .eh-meta { gap: 4px 12px; word-break: break-word; }
  .modal-foot > .btn:not(.ghost) { flex: 1 1 auto; justify-content: center; }
  .emp-head > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .emp-head > .actions .btn { justify-content: center; }
  .emp-head > .actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Monograma (persona en n) */
.logo .mark { width: 72%; height: 72%; display: block; color: #fff; }
.logo.lg .mark { width: 74%; height: 74%; }
.mk-side b { font: 800 15px/1 var(--font); width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, hsl(var(--ah) 92% 66%), hsl(var(--ah) 80% 42%)); color: #fff; margin-bottom: 6px; display: grid; place-items: center; }
.mk-side b .mark { width: 22px; height: 22px; color: #fff; display: block; }

/* ===== Nómina, expediente y configuración ===== */
/* ===== Filas editables de Configuración (horas extra, conceptos de ley, tipos) =====
   Todas comparten las mismas columnas proporcionales: el concepto ocupa dos partes y cada dato una.
   Las horas extra usan las dos primeras columnas, así quedan alineadas con los conceptos de abajo. */
.cfg-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.cfg-row:first-child { padding-top: 4px; }
.cfg-row label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.cfg-row input, .cfg-row select { width: 100%; min-width: 0; }
.cfg-row > .icon-btn { grid-column: -2; }
#otRows + .btn, #conRows + .btn, #tiers + .btn, #bands + .btn, #pols + .btn { margin-top: 14px; }
@media (max-width: 1500px) {
  .cfg-row { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
  .cfg-row label.w2 { grid-column: span 5; }
  .cfg-row > .icon-btn { grid-row: 1; }
  .cfg-row.ot { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) repeat(3, minmax(0, 1fr)) auto; }
}
@media (max-width: 900px) {
  .cfg-row, .cfg-row.ot { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .cfg-row label.w2, .cfg-row.ot label:first-child { grid-column: span 2; }
  .cfg-row > .icon-btn { grid-row: auto; grid-column: 1 / -1; justify-self: end; margin-top: -4px; }
}
@media (max-width: 560px) {
  .cfg-row, .cfg-row.ot { grid-template-columns: 1fr; }
  .cfg-row label.w2, .cfg-row.ot label:first-child { grid-column: auto; }
}

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sec-head h4 { margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline li p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.timeline .kico { flex: none; }
.link-btn { background: none; border: 0; color: var(--bl); font-size: 12px; cursor: pointer; padding: 0; margin-top: 4px; }
.link-btn:hover { text-decoration: underline; }
ul.plain { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--muted); }
ul.plain li { padding: 2px 0; }
.grid.compact td { padding: 7px 10px; font-size: 13px; }
.grid .sub-total td { background: var(--bg-soft, rgba(127, 127, 127, .08)); }
.num.neg, .neg { color: var(--bad, #c0392b); }
.warn-dot { color: #d98a00; vertical-align: -2px; }
.modal.xl { max-width: min(1180px, 96vw); }
.grid.bulkp input, .grid.bulkp select { min-width: 96px; width: 100%; }
.grid.bulkp td { vertical-align: middle; }
.grid.bulkp .an { min-width: 130px; }
.grid.bulkp thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* Nómina: columnas opcionales y tablas de carga masiva */
@media (max-width: 1180px) {
  .c-opt2 { display: none; }
}
.info-box + .form-grid, .info-box + .field { margin-top: 14px; }
.kico.big { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.grid.bulkp .pt { min-width: 150px; }
.grid.bulkp .bs, .grid.bulkp .hr { min-width: 110px; }
.tier { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 16px; }
.pwa-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.prefs-pop #pwaInstall { margin-top: 4px; }

/* Editor de formatos del archivo bancario */
.bk-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 14px; }
.bk-sel { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.bk-sel select { min-width: 260px; }
.bk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.fx-sec { margin-top: 18px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; }
.fx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fx-head h5 { margin: 0; font-size: 14px; }
.fx-total { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-cols, .fx-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1.5fr) 74px 112px 118px 88px auto; gap: 8px; align-items: center; }
.fx-cols { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 0 4px; }
.fx-row { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.fx-row input, .fx-row select { width: 100%; min-width: 0; }
.fx-rows { margin-bottom: 12px; }
.fx-up { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.fx-up input { width: auto; }
.fx-btns { display: flex; gap: 2px; }
.bk-pre { font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, rgba(127, 127, 127, .08)); }
.bk-prev { margin: 8px 0 4px; }
.bk-prev pre { font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; padding: 12px 14px; margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, rgba(127, 127, 127, .08)); }
.bk-prev-h { font-size: 13px; }
.bk-det { margin: 12px 0; }
.bk-det summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 6px 0; }
.warn-box.bad { background: var(--red-soft, #fdecea); border-color: var(--red, #c0392b); }
.bk-delim[hidden], .bk-fixed[hidden], .bb-fixed[hidden] { display: none !important; }
@media (max-width: 1180px) {
  .fx-cols { display: none; }
  .fx-row { grid-template-columns: 1fr 1fr 1fr; }
  .fx-row .fx-btns { grid-column: 1 / -1; justify-content: flex-end; }
}
#bbInfo { margin-top: 14px; }

/* ===== Identidad por empresa ===== */
.co-logo { object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); padding: 2px; flex: none; display: block; }
.co-tile { display: inline-grid; place-items: center; border-radius: 10px; color: #fff; font-weight: 700; letter-spacing: .02em; background: hsl(var(--h, 215) 55% 42%); flex: none; }
.co-cell { display: flex; align-items: center; gap: 10px; }
.ws-ico:has(.ws-logo) { background: #fff; padding: 2px; }
.ws-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; display: block; }
.brand-row { display: flex; gap: 14px; align-items: center; }
.brand-prev { width: 92px; height: 92px; border-radius: 14px; border: 1px dashed var(--line-2, var(--line)); background: var(--surface-2, transparent); display: grid; place-items: center; color: var(--muted); overflow: hidden; flex: none; }
.brand-prev img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.brand-ctl { display: grid; gap: 8px; justify-items: start; }
.brand-ctl .hint { max-width: 360px; }
.brand-color { display: flex; align-items: center; gap: 12px; }
.brand-color input[type=color] { width: 46px; height: 38px; padding: 2px; border-radius: 10px; cursor: pointer; }
.hero-logo { position: absolute; right: 28px; top: 24px; width: 88px; height: 88px; border-radius: 18px; background: rgba(255, 255, 255, .96); padding: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); display: grid; place-items: center; z-index: 2; }
.hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .hero-logo { width: 56px; height: 56px; right: 16px; top: 16px; padding: 5px; border-radius: 12px; }
}

/* ===== Panel de mando: tendencias, mapa de calor, antigüedad, celebraciones ===== */
.span-12 { grid-column: span 12; }
.chart.area .ar { opacity: .13; }
.chart.area .ln { stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart.area .ld { stroke: var(--surface); stroke-width: 2; }
.chart.area .pt { opacity: 0; transition: opacity .12s; stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.chart.area .cursor { stroke: var(--line-2, var(--line)); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart.area .col:hover .pt, .chart.area .col:hover .cursor { opacity: 1; }
.chart.area .hit { fill: transparent; }
.heat { display: grid; gap: 4px; align-items: center; }
.heat .hh { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.heat .hr { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.heat .hc { height: 34px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--surface-2, rgba(127, 127, 127, .07)); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.heat .hc.on { border-color: transparent; }
.heat .hc.hot { font-weight: 800; }
.heat-leg { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.heat-leg i { width: 26px; height: 10px; border-radius: 3px; display: block; }
.hbars { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 15px; }
.hbars li { display: grid; grid-template-columns: minmax(96px, 120px) 1fr 34px; gap: 12px; align-items: center; font-size: 13px; }
.hb-l { color: var(--ink-2); }
.hb-t { height: 14px; border-radius: 8px; background: var(--surface-2, rgba(127, 127, 127, .1)); overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: 8px; }
.hbars b { text-align: right; font-variant-numeric: tabular-nums; }
.celeb .li-side { display: flex; align-items: center; gap: 8px; }
.celeb-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; }
.celeb-ico.cumple { background: #fde8f1; color: #c2185b; }
.celeb-ico.aniv { background: #e3ebff; color: #1e46c8; }
[data-theme=dark] .celeb-ico.cumple { background: rgba(194, 24, 91, .22); color: #ff8fb8; }
[data-theme=dark] .celeb-ico.aniv { background: rgba(91, 130, 240, .2); color: #9db9ff; }
.celeb-d { font-size: 13px; text-transform: capitalize; min-width: 52px; text-align: right; }
@media (max-width: 760px) {
  .span-12 { grid-column: span 12; }
  .heat .hc { height: 30px; font-size: 11px; }
  .hbars li { grid-template-columns: 96px 1fr 30px; }
}

/* ---- Cuentas por cobrar ---- */
.aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; }
.aging .ag { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aging .ag > span { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.aging .ag .bar { height: 8px; border-radius: 99px; background: var(--line, #e6eaf2); overflow: hidden; }
.aging .ag .bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.aging .ag b { font-size: 15px; overflow-wrap: anywhere; }
.aging .ag small { color: var(--muted); }
.cx-lines { display: grid; gap: 10px; margin-bottom: 8px; }
.cx-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); gap: 14px; align-items: end; padding: 12px 14px; border: 1px solid var(--line, #e6eaf2); border-radius: 12px; }
.cx-line label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.cx-line small.sub { display: block; margin-top: 2px; }
@media (max-width: 640px) {
  .cx-line { grid-template-columns: 1fr; }
}
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--hover, rgba(35,88,230,.05)); }
.rx-dash { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.rx-dash > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rx-dash span { font-size: 12px; color: var(--muted); font-weight: 600; }
.rx-dash b { font-size: 20px; overflow-wrap: anywhere; }
.rx-dash .bad b { color: #c0392b; }
.rx-dash .btn { margin-left: auto; }
.cx-line label .btn { align-self: flex-start; margin-top: 4px; }

/* ---- Servicio multicliente: soporte y suscripción ---- */
.support-bar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 16px; background: #b02a2a; color: #fff; font-size: 13.5px; text-align: center; }
.support-bar svg { flex: none; }
.bill-bar > div { flex: 1; min-width: 0; }
.bill-bar svg { flex: none; margin-top: 2px; }
.bill-bar.info { background: var(--blue-soft); border-color: var(--brand-line); color: var(--ink); }
.bill-bar.warn { background: var(--amber-soft); border-color: var(--amber); }
.bill-bar.bad { background: var(--red-soft); border-color: var(--red); }
.bill-bar details { margin-top: 6px; }
.bill-bar summary { cursor: pointer; font-weight: 600; }
.bill-bar p { margin: 6px 0 0; }
.bill-bar { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid; font-size: 14px; margin: 18px 30px 0; }
@media (max-width: 900px) {
  .bill-bar { margin: 14px 14px 0; }
}

/* Regalía pascual: resumen dentro de ventanas y cifras largas en teléfono */
.modal .stats.pay { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-bottom: 16px; }
@media (max-width: 560px) {
  .stats.pay .stat { padding: 12px 12px; }
  .stats.pay .stat strong { font-size: 17px; }
  .modal .stats.pay { grid-template-columns: 1fr; gap: 10px; }
  .modal .stats.pay .stat { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .modal .stats.pay .stat > div { min-width: 0; }
}
.modal { width: 100%; max-width: 640px; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.985); transition: .18s; min-width: 0; }
.grid.rg-mes th, .grid.rg-mes td { padding: 8px 6px; font-size: 12.5px; }
.grid.rg-mes { min-width: 640px; }
.docs-cfg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.docs-prev { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #e9edf5; padding: 14px; }
.docs-prev .sheet { transform: scale(.62); transform-origin: top left; width: 161%; margin: 0; max-width: none; pointer-events: none; }
.sign-rows { display: grid; gap: 8px; }
.sign-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px 36px; gap: 8px; align-items: center; }
@media (max-width: 1100px) {
  .docs-cfg { grid-template-columns: 1fr; }
  .docs-prev { position: static; max-height: 420px; }
}

/* ---- Avisos en vivo ---- */
#nxAlerts { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: grid; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.alert-card { pointer-events: auto; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 40px 14px 14px; border-radius: 14px; background: var(--surface, #fff); color: var(--ink, #111827); border: 1px solid var(--line, #dfe5ef); border-left: 4px solid var(--brand, #2358e6); box-shadow: 0 18px 44px rgba(11, 21, 48, .22); text-decoration: none; transform: translateY(16px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.alert-card.in { transform: none; opacity: 1; }
.alert-card:hover { border-color: var(--brand, #2358e6); }
.alert-card .ac-i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft, #e8efff); color: var(--brand, #2358e6); }
.alert-card div { min-width: 0; }
.alert-card b { display: block; font-size: 14px; }
.alert-card small { display: block; margin-top: 2px; color: var(--muted, #5b6783); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.alert-card em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--brand, #2358e6); }
.alert-card .ac-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #5b6783); cursor: pointer; }
.alert-card .ac-x:hover { background: var(--surface-3, #eef2f9); }
.bell.ring svg { animation: bellring .9s ease; transform-origin: 50% 10%; }
.bell.ring #bellCount { animation: bellpop .5s ease; }
@keyframes bellring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes bellpop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bell.ring svg, .bell.ring #bellCount { animation: none; }
  .alert-card { transition: none; }
}
@media (max-width: 600px) {
  #nxAlerts { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
.pop.bell .pop-f { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2, transparent); }
.pop.bell .pop-f .check { font-size: 12.5px; color: var(--ink-2, #44506b); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.opt-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; }
.opt-row:hover { border-color: var(--brand); }
.opt-row input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--brand); }
.opt-row span { min-width: 0; }
.opt-row b { display: block; font-size: 13.5px; font-weight: 600; }
.opt-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.docs-cfg .card-foot { display: flex; justify-content: space-between; gap: 10px; }
.how-pay { margin-top: 8px; }
.how-pay summary { cursor: pointer; font-weight: 600; }
.pay-acct { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pay-acct dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 6px 0 0; font-size: 13px; }
.pay-acct dt { color: var(--muted); }
.pay-acct dd { margin: 0; overflow-wrap: anywhere; }
@media (max-height: 820px) {
  .side .nav-group { margin-top: 8px; }
  .side .nav-group a { padding-top: 7px; padding-bottom: 7px; }
  .side .brand { padding-top: 14px; padding-bottom: 10px; }
}
@media (max-height: 820px) {
  .side .side-user { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
  .side .side-user .who { flex: 1; }
  .side .side-actions { margin-left: auto; }
  .side .side-actions { gap: 0; }
  .side .side-actions .icon-btn { flex: none; width: 28px; height: 28px; }
  .side .side-user .who small { display: none; }
  .side .side-user .avatar { width: 30px; height: 30px; }
  .side .nav-group > span { padding-bottom: 3px; }
}
@media (max-width: 700px) {
  .sign-row { grid-template-columns: minmax(0, 1fr) 36px; }
}

/* ============================================================
   Documentos: hoja de reportes, planillas, recibos y estados de cuenta
   ============================================================ */
.sheet { max-width: 1000px; padding: 38px 44px; box-shadow: 0 4px 24px rgba(15, 27, 45, .14); border-radius: 4px; font-size: 12.5px; }
.sh-head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2.5px solid #1f3a8a; padding-bottom: 14px; align-items: flex-end; }
.sh-co b { display: block; font-size: 17px; color: #1f3a8a; }
.sh-co small { display: block; color: #6b7280; font-size: 11px; }
.sh-title h1 { font-size: 20px; letter-spacing: -.01em; }
.sh-title p { margin: 3px 0 0; color: #4b5563; }
.sh-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 10px 0 4px; color: #4b5563; font-size: 11.5px; }
.sh-h { font-size: 13px; margin: 18px 0 8px; color: #1f3a8a; text-transform: uppercase; letter-spacing: .05em; }
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.sh-kpis div { border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 12px; }
.sh-kpis span { display: block; font-size: 10.5px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.sh-kpis b { font-size: 17px; }
.sh-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11.5px; }
.sh-table th { background: #eef2fb; color: #1f2a44; text-align: left; padding: 6px 8px; border-bottom: 1.5px solid #1f3a8a; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.sh-table tbody tr:nth-child(even) td { background: #f9fafb; }
.sh-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.sh-table tfoot td { font-weight: 700; border-top: 1.5px solid #1f3a8a; background: #eef2fb; }
.sh-empty { color: #6b7280; padding: 16px 0; font-style: italic; }
.sh-notes { margin-top: 14px; color: #4b5563; font-size: 11px; font-style: italic; }
.sh-text { margin: 6px 0 4px; color: #1f2937; font-size: 12px; line-height: 1.65; text-align: justify; }
.sh-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 58px; }
.sh-sign div { text-align: center; }
.sh-sign i { display: block; border-top: 1px solid #111827; margin-bottom: 6px; }
.sh-sign span { font-size: 11px; color: #374151; }
.sh-sign small { color: #6b7280; }
.sh-foot { margin-top: 30px; padding-top: 8px; border-top: 1px solid #e5e7eb; text-align: center; color: #9ca3af; font-size: 10px; }
@media print {
  .sheet { box-shadow: none; max-width: none; padding: 0; border-radius: 0; font-size: 11px; }
  .sh-table { font-size: 10px; }
  .sh-table thead { display: table-header-group; }
  .sh-table tr { break-inside: avoid; }
  .sh-h { break-after: avoid; }
  .sh-sign { break-inside: avoid; }
}
.sh-table td { vertical-align: top; padding: 5px 8px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.sh-table td.w { white-space: normal; min-width: 180px; }
@media print {
  .sh-table td { white-space: normal; }
  .sh-table td.w { min-width: 0; }
}
.sh-table.lines td { height: 30px; border-bottom: 1px solid #9ca3af; background: #fff !important; }
@media print {
  #print-root .sheet { break-after: page; page-break-after: always; }
  #print-root .sheet:last-child { break-after: auto; page-break-after: auto; }
}
.sheet { min-width: 640px; background: #fff; color: #111827; margin: 0 auto; --co: #1f3a8a; --co-soft: color-mix(in srgb, var(--co) 9%, #ffffff); --co-mid: color-mix(in srgb, var(--co) 22%, #ffffff); position: relative; padding-top: 0; overflow: hidden; }
.sheet .sh-band { height: 9px; margin: 0 -44px 24px; background: linear-gradient(90deg, var(--co), color-mix(in srgb, var(--co) 55%, #ffffff)); }
.sheet .sh-head { border-bottom: 0; padding-bottom: 16px; align-items: center; position: relative; }
.sheet .sh-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--co), var(--co-mid) 60%, transparent); }
.sh-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sh-logo { width: 64px; height: 64px; object-fit: contain; flex: none; border-radius: 10px; }
.sheet .sh-co b { color: var(--co); font-size: 18px; letter-spacing: -.01em; }
.sh-title { text-align: right; }
.sh-kind { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--co); background: var(--co-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.sheet .sh-title h1 { font-size: 21px; color: #111827; }
.sheet .sh-meta { gap: 6px 10px; padding: 14px 0 6px; }
.sheet .sh-meta span { background: #f3f4f6; border-radius: 6px; padding: 3px 9px; font-size: 11px; }
.sheet .sh-meta b { color: #111827; }
.sheet .sh-h { color: var(--co); display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; }
.sheet .sh-h::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--co); }
.sheet .sh-kpis { gap: 10px; }
.sheet .sh-kpis div { border: 0; border-left: 4px solid var(--co); background: var(--co-soft); border-radius: 8px; padding: 10px 14px; }
.sheet .sh-kpis span { color: #4b5563; }
.sheet .sh-kpis b { color: #111827; font-size: 18px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sheet .sh-kpis div.hl { background: var(--co); border-left-color: var(--co); }
.sheet .sh-kpis div.hl span { color: rgba(255, 255, 255, .85); }
.sheet .sh-kpis div.hl b { color: #fff; font-size: 20px; }
.sheet .sh-table th { background: var(--co); color: #fff; border-bottom: 0; padding: 8px 10px; }
.sheet .sh-table th:first-child { border-radius: 6px 0 0 0; }
.sheet .sh-table th:last-child { border-radius: 0 6px 0 0; }
.sheet .sh-table td { padding: 6px 10px; }
.sheet .sh-table tbody tr:nth-child(even) td { background: var(--co-soft); }
.sheet .sh-table tfoot td { background: var(--co-mid); color: #111827; border-top: 2px solid var(--co); }
.sheet .sh-sign i { border-top: 1.5px solid #374151; }
.sheet .sh-foot { display: flex; justify-content: space-between; gap: 16px; border-top: 2px solid var(--co-mid); text-align: left; color: #6b7280; }
.sheet .sh-foot span:first-child { color: var(--co); font-weight: 600; }
@media print {
  .sheet { overflow: visible; }
  .sheet .sh-band { margin: 0 0 18px; }
}
.sheet .sh-co small { display: block; line-height: 1.45; }
.sheet .sh-sign span b { font-size: 11px; color: #111827; }
.sheet .sh-sign small { display: block; margin-top: 1px; }
.sheet .sh-meta .fo { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sheet:not(.zebra) .sh-table tbody tr:nth-child(even) td { background: transparent; }
.sheet.d-compact .sh-table td { padding: 3px 8px; font-size: 10.5px; }
.sheet.d-compact .sh-table th { padding: 6px 8px; }
.sheet.d-compact .sh-h { margin: 14px 0 6px; }
.sheet.d-compact .sh-kpis div { padding: 7px 11px; }
.sheet.d-comfortable .sh-table td { padding: 9px 12px; }
.sheet.d-comfortable .sh-h { margin: 28px 0 10px; }
.sheet.d-comfortable .sh-kpis div { padding: 13px 17px; }
.sheet .sh-foot span:empty { display: none; }

/* ============ Menú de acciones bajo un botón ============ */
.pop.menu { width: auto; min-width: 240px; padding: 6px; }
.pop-menu { display: grid; gap: 2px; }
.pop-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; text-align: left; cursor: pointer; }
.pop-menu button:hover, .pop-menu button:focus-visible { background: var(--brand-soft); color: var(--brand); outline: none; }
.pop-menu button .ico { color: var(--muted); flex: none; }
.pop-menu button:hover .ico, .pop-menu button:focus-visible .ico { color: var(--brand); }
.pop-menu button.danger { color: var(--red); }
.btn.ghost.danger { background: transparent; color: var(--red); }
.btn.ghost.danger:hover { background: var(--red-soft); }
.btn.danger-text { color: var(--red); }
.btn.secondary.danger-text:hover { border-color: var(--red); background: var(--red-soft); }
.btn.ghost.danger-text:hover { background: var(--red-soft); }

/* ============ Lista de acciones con explicación (mantenimiento y similares) ============ */
.act-list { display: grid; }
.act-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.act-row:first-child { padding-top: 0; }
.act-row:last-child { border-bottom: 0; padding-bottom: 0; }
.act-row > div { min-width: 0; }
.act-row b { display: block; font-size: 13.5px; }
.act-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.act-row > .btn { flex: none; }
.act-row.danger b { color: var(--red); }

/* ============ Configuración: índice de secciones ============ */
.cfg-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.cfg-main { min-width: 0; }
.cfg-nav { position: sticky; top: 84px; display: grid; gap: 14px; padding: 12px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.cfg-grp { display: grid; gap: 2px; }
.cfg-grp > span { padding: 2px 10px 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cfg-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.cfg-nav button .ico { color: var(--muted); }
.cfg-nav button:hover { background: var(--gray-soft); color: var(--ink); }
.cfg-nav button.on { background: var(--brand-soft); color: var(--brand); }
.cfg-nav button.on .ico { color: var(--brand); }
@media (max-width: 1360px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); }
  .cfg-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .cfg-grp { display: contents; }
  .cfg-grp > span { display: none; }
  .cfg-nav button { width: auto; white-space: nowrap; padding: 8px 12px; }
}

/* ============ Puesta en marcha guiada ============ */
.setup-card { margin-bottom: 20px; }
.setup-card .card-head { align-items: flex-start; }
.setup-bar { height: 6px; margin: 14px 22px 0; border-radius: 99px; background: var(--gray-soft); overflow: hidden; }
.setup-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--green)); transition: width .3s; }
.setup-steps { list-style: none; margin: 0; padding: 10px 22px 18px; display: grid; }
.setup-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setup-steps li.done { padding: 7px 0; }
.setup-steps li.done small:not(.st-note) { display: none; }
.setup-steps li.done .st-n { width: 24px; height: 24px; margin-left: 3px; }
.setup-steps li:last-child { border-bottom: 0; }
.setup-steps .st-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--muted); font-size: 12.5px; font-weight: 700; background: var(--surface); }
.setup-steps b { display: block; font-size: 13.5px; }
.setup-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.setup-steps .st-note { display: inline-block; white-space: nowrap; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--gray-soft); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.setup-steps li.done b { color: var(--muted); font-weight: 600; }
.setup-steps li.done .st-n { background: var(--green); border-color: var(--green); color: #fff; }
.setup-steps li.next .st-n { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.setup-mini { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 8px 14px; border: 1px dashed var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.setup-mini:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 640px) {
  .setup-steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .setup-steps li > .btn { grid-column: 2; justify-self: start; }
}

/* ============ Expediente completo del empleado ============ */
.comp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.comp-chip i { --c: var(--green); width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--gray-soft) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
.comp-chip.amber i { --c: var(--amber); }
.comp-chip.red i { --c: var(--red); }
.comp-chip:hover { border-color: var(--brand); color: var(--brand); }
.comp-list { list-style: none; margin: 4px 0 12px; padding: 0 6px; display: grid; gap: 8px; }
.comp-list li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.comp-list .ico { color: var(--amber); }
.comp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 6px 4px; border-top: 1px solid var(--line); } .comp-acts .btn { justify-content: center; } .comp-acts .btn.primary { grid-column: 1 / -1; }
.comp-ok { display: flex; gap: 8px; align-items: center; padding: 6px; color: var(--green); font-weight: 600; font-size: 13px; }

/* ============ Recuadro de nota (explicación con ícono) ============ */
.note-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--ink); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.note-box > .ico { flex: none; margin-top: 2px; color: var(--brand); }
.note-box.ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.note-box.ok > .ico { color: var(--green); }

/* ============ Salida del empleado y liquidación ============ */
.stepper { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: none; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.stepper li i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); font-style: normal; font-size: 12px; }
.stepper li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper li.on { background: var(--brand-soft); color: var(--brand); }
.stepper li.on i { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.stepper li.done { color: var(--ink-2); }
.stepper li.done i { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.stepper.flow { margin: 0 0 18px; }
.stepper.flow li { align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
.stepper.flow li.on { border-color: var(--brand-line); background: var(--brand-soft); }
.stepper.flow li span { display: grid; gap: 2px; white-space: normal; }
.stepper.flow li b { font-size: 13px; color: var(--ink); }
.stepper.flow li small { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.stepper.flow li.on b { color: var(--brand); }
.wz-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.wz-sum > div { display: grid; align-content: start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.wz-sum span { color: var(--muted); font-size: 12px; font-weight: 600; }
.wz-sum b { font-size: 16px; font-variant-numeric: tabular-nums; }
.wz-sum b.hl { color: var(--brand); }
.wz-sum small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.wz-sum input { height: 34px; }
.sp-table td { vertical-align: middle; }
.sp-table td small, .sp-table td .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
.sp-table tr.off td { opacity: .55; }
.sp-table input.num { width: 110px; height: 34px; text-align: right; }
.sp-table input.num.sm { width: 84px; }
.sp-table tr.sub-total td { background: var(--surface-2); }
.sp-table tr.neg td .num { color: var(--red); }
.wz-h { display: grid; gap: 2px; margin: 18px 0 10px; }
.wz-h b { font-size: 13.5px; }
.wz-h small { color: var(--muted); font-size: 12.5px; }
.sp-extras { margin-top: 6px; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.sp-row input.num { text-align: right; }
.sp-check { margin: 4px 0 12px; }
.sp-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.sp-total span { font-weight: 600; color: var(--ink-2); }
.sp-total b { font-size: 20px; color: var(--brand); font-variant-numeric: tabular-nums; }
.sp-total.big b { font-size: 26px; }
.sp-total + .note-box { margin-top: 12px; }
.ob-later { margin-bottom: 16px; }
#obPayFields.is-off { opacity: .45; }
.wz-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.sp-panel { padding: 22px; }
.sp-panel-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sp-panel-h h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.sp-panel-h p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.sp-panel-h .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-panel .info-box, .sp-panel .warn-box { margin: 0 0 16px; }
.sp-note { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; }
.sp-note p { margin-top: 4px; color: var(--ink-2); font-size: 13px; white-space: pre-wrap; }
.sev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.sev-box { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.sev-box > b { font-size: 13.5px; }
.sev-box > small { color: var(--muted); font-size: 12px; margin-top: -4px; }
.sev-box label:not(.check) { display: grid; grid-template-columns: minmax(0, 1fr) 84px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.sev-box input.num { height: 34px; text-align: right; }
.sev-box .check { margin-top: 4px; font-size: 12.5px; }
.sev-box label.stack { grid-template-columns: 1fr; gap: 6px; margin-top: 4px; }
.sev-box label.stack select { height: 34px; }
@media (max-width: 1180px) { .sev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .stepper:not(.flow) li { justify-content: center; }
  .stepper:not(.flow) li span { display: none; }
  .stepper:not(.flow) li.on span { display: inline; white-space: normal; line-height: 1.2; }
  .stepper:not(.flow) li.on { flex: 3; }
  .stepper.flow { flex-direction: column; gap: 6px; }
  .stepper.flow li.done small { display: none; }
  .sev-grid { grid-template-columns: 1fr; }
  .sp-row { grid-template-columns: minmax(0, 1fr) 120px auto; }
  .sp-table input.num { width: 96px; }
  .act-row { flex-direction: column; align-items: stretch; }
  .act-row > .btn { align-self: flex-start; }
}

/* ============ Tablas en contenedores angostos ============
   Por debajo de 1200 px de ancho útil la tabla se compacta: menos relleno, subtítulos más cortos
   y las acciones de cada fila como íconos (con su nombre al pasar el cursor). */
@container tabla (min-width: 560px) and (max-width: 1200px) {
  .grid { --act-w: 120px; }
  .grid th, .grid td { padding-left: 10px; padding-right: 10px; }
  .grid .emp-cell small { max-width: 150px; }
  .row-actions .lbl { display: none; }
  .row-actions .btn.xs { width: 30px; padding: 0; justify-content: center; }
}

/* ============ Tablas en pantallas angostas ============
   Cada fila se presenta como una ficha: la primera celda es el encabezado y las demás muestran
   el título de su columna (UI.stackTables lo copia en data-label). */
@media (max-width: 640px) {
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { min-width: 0 !important; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack tfoot tr { background: var(--surface-2); border-top: 1px solid var(--line-2); }
  table.stack td, [data-density=compacta] table.stack td, table.stack.compact td { display: flow-root; padding: 0; border: 0; min-width: 0 !important; text-align: right; background: none; white-space: normal; }
  table.stack td::before { content: attr(data-label); float: left; max-width: 46%; margin-right: 14px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.6; text-align: left; }
  table.stack td > .kico { margin-right: 8px; }
  table.stack td:first-child, table.stack td.selcol + td { display: block; text-align: left; padding-bottom: 2px; }
  table.stack td:first-child::before, table.stack td.selcol + td::before, table.stack td[data-label=""]::before { content: none; }
  table.stack td:empty { display: none; }
  table.stack td > input, table.stack td > select { max-width: 60%; }
  table.stack tr:has(> td.selcol) { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  table.stack tr:has(> td.selcol) > td { grid-column: 1 / -1; }
  table.stack tr:has(> td.selcol) > td.selcol { grid-column: 1; grid-row: 1; align-self: center; }
  table.stack tr:has(> td.selcol) > td.selcol + td { grid-column: 2; grid-row: 1; }
  .table-wrap:has(> table.stack) { overflow: visible; }
}