/* Leave Tracker — tema claro, replica del diseño de Allan (tarjetas por grupo, mosaicos de color, anillos). */
:root {
  --bg:#F6F8FA; --surface:#FFFFFF; --ink:#13202B; --muted:#5E6B78; --line:#E2E8EE; --soft:#EEF2F5;
  --teal:#0E9384; --teal-soft:#D6F2EE; --coral:#E5534B; --coral-soft:#FCE2E0; --sun:#B07800; --sun-soft:#FDF0CC;
  --sea:#2F6BDB; --sea-soft:#DEE7FB; --plum:#7C4FD0; --plum-soft:#EBE2FA; --logo:#545C6B;
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --font-body:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --sales-bg:#DCEAFA; --sales-card:#F2F7FD; --sales-ink:#0C447C; --sales-mid:#185FA5; --sales-av:#B5D4F4;
  --merch-bg:#E4E2FC; --merch-card:#F7F6FE; --merch-ink:#3C3489; --merch-mid:#534AB7; --merch-av:#CECBF6;
  --med-bg:#F8DFE8; --med-card:#FDF5F8; --med-ink:#72243E; --med-mid:#993556; --med-av:#F4C0D1;
  --admin-bg:#EAE7DE; --admin-card:#F9F8F4; --admin-ink:#444441; --admin-mid:#5F5E5A; --admin-av:#D3D1C7;
  color-scheme: light;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 var(--font-body); padding:0 16px 56px; }
a { color:var(--sea); }
h1, h2, h3 { font-family:var(--font-display); margin:0; letter-spacing:-0.01em; text-wrap:balance; }
h1 { font-size:32px; font-weight:800; line-height:1.1; margin-bottom:16px; } h2 { font-size:20px; font-weight:800; margin:26px 0 10px; }
.muted { color:var(--muted); font-size:.9rem; } .num { font-variant-numeric:tabular-nums; } .nowrap { white-space:nowrap; }
[hidden] { display:none !important; }

/* ---------- cabecera ---------- */
.top { max-width:1200px; margin:0 auto; padding:22px 0 18px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:18px; text-decoration:none; color:var(--ink); min-width:0; }
.logo { flex:none; width:112px; aspect-ratio:520/298; background:var(--logo); -webkit-mask:url(/assets/logo-mask.png) center/contain no-repeat; mask:url(/assets/logo-mask.png) center/contain no-repeat; }
.brand-name { padding-left:18px; border-left:1.5px solid var(--line); font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1.05; }
@media (max-width:560px) { .logo { width:88px; } .brand-name { font-size:21px; padding-left:12px; } }
nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav a, nav .link { color:var(--muted); text-decoration:none; font-weight:700; font-size:14px; padding:7px 13px; border-radius:999px; background:none; border:0; cursor:pointer; font-family:inherit; }
nav a:hover, nav .link:hover { background:var(--soft); color:var(--ink); }
nav a.me { color:var(--ink); border:1.5px solid var(--line); background:var(--surface); }
main { max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
main > h1 { margin-bottom:0; }

/* ---------- botones, campos ---------- */
button, .btn { font:inherit; font-weight:700; font-size:14px; cursor:pointer; border-radius:999px; padding:10px 18px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; display:inline-block; line-height:1.2; }
button:hover, .btn:hover { border-color:var(--muted); }
button.primary, .btn.primary { background:var(--teal); border-color:var(--teal); color:#fff; }
form button.primary { width:100%; margin-top:18px; padding:12px 18px; }
button.danger { border-color:var(--coral); color:var(--coral); background:transparent; }
button.ok { background:var(--teal); border-color:var(--teal); color:#fff; }
button.link { border:0; background:none; padding:0; font-weight:600; color:var(--sea); }
.btn.small, button.small { padding:6px 14px; font-size:13px; }
button:disabled { opacity:.45; cursor:not-allowed; }
:focus-visible { outline:2.5px solid var(--sea); outline-offset:2px; }
label { display:block; font-weight:700; margin:14px 0 4px; font-size:13px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], select, textarea { width:100%; padding:9px 12px; font:inherit; font-size:14px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; min-width:0; }
input[type=search] { border-radius:999px; background:var(--surface); }
input.mini { width:130px; padding:5px 10px; } form.inline select { width:auto; }
.check { display:flex; gap:8px; align-items:flex-start; font-weight:400; font-size:14px; margin-top:14px; } .check input { margin-top:4px; width:auto; } .inline-check { margin:0; }
form.inline { display:inline; } .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } @media (max-width:560px) { .grid2 { grid-template-columns:1fr; } }

/* ---------- tarjetas y paneles ---------- */
.card { background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:20px; }
.card > h2:first-child, details h2 { margin-top:0; }
.narrow { max-width:440px; margin:24px auto; width:100%; } .wide { max-width:640px; }
.msg { padding:11px 16px; border-radius:12px; font-weight:600; font-size:14px; } .msg.err { background:var(--coral-soft); color:var(--coral); } .msg.ok { background:var(--teal-soft); color:var(--teal); } .msg.warn { background:var(--sun-soft); color:var(--sun); } .msg a { color:inherit; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; font-size:14px; } th { color:var(--muted); font-weight:700; font-size:13px; } .tablewrap { overflow-x:auto; }
code, .secret { font-family:ui-monospace,Consolas,monospace; background:var(--soft); padding:2px 7px; border-radius:6px; word-break:break-all; font-size:.92em; }
.codes { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:12px 0; } .codes code { text-align:center; padding:7px; }
.tag { display:inline-flex; align-items:center; font-size:13px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--soft); color:var(--muted); }
.tag.teal { background:var(--teal-soft); color:var(--teal); } .tag.coral { background:var(--coral-soft); color:var(--coral); } .tag.sea { background:var(--sea-soft); color:var(--sea); }
.pillt { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--soft); color:var(--muted); margin-right:4px; }
.pillt.good { background:var(--teal-soft); color:var(--teal); } .pillt.rej { background:var(--coral-soft); color:var(--coral); } .pillt.pend { background:var(--sun-soft); color:var(--sun); } .pillt.soft { background:var(--soft); color:var(--muted); }
.pillt.t-vacation { background:var(--teal-soft); color:var(--teal); } .pillt.t-paid_out { background:var(--sea-soft); color:var(--sea); } .pillt.t-sick { background:var(--coral-soft); color:var(--coral); } .pillt.t-absence { background:var(--plum-soft); color:var(--plum); } .pillt.t-emergency { background:var(--sun-soft); color:var(--sun); }
.pills { margin-bottom:12px; } .danger-text { color:var(--coral); }
details summary { cursor:pointer; font-weight:700; }

/* ---------- panel principal: portada, mosaicos, filtros ---------- */
.hero { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end; justify-content:space-between; }
.hero h1 { font-size:34px; margin:0; } .rule { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.tile { border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; background:var(--soft); color:var(--ink); }
.tile b { font-family:var(--font-display); font-size:40px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; } .tile span { font-weight:600; font-size:14px; } .tile small { font-size:12.5px; opacity:.85; }
.tile.teal { background:var(--teal-soft); color:var(--teal); } .tile.coral { background:var(--coral-soft); color:var(--coral); } .tile.sun { background:var(--sun-soft); color:var(--sun); } .tile.sea { background:var(--sea-soft); color:var(--sea); }
@media (max-width:820px) { .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .tile b { font-size:32px; } }
.bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.filters { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:13px; padding:6px 14px; border-radius:999px; font-weight:700; background:var(--surface); border:1.5px solid var(--line); color:var(--muted); text-decoration:none; }
.chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.searchform { display:flex; gap:8px; align-items:center; } .searchform input[type=search] { width:230px; max-width:100%; }

/* ---------- grupos y tarjetas de empleado ---------- */
.g-sales { --gbg:var(--sales-bg); --gcard:var(--sales-card); --gink:var(--sales-ink); --gmid:var(--sales-mid); --gav:var(--sales-av); }
.g-merch { --gbg:var(--merch-bg); --gcard:var(--merch-card); --gink:var(--merch-ink); --gmid:var(--merch-mid); --gav:var(--merch-av); }
.g-med { --gbg:var(--med-bg); --gcard:var(--med-card); --gink:var(--med-ink); --gmid:var(--med-mid); --gav:var(--med-av); }
.g-admin { --gbg:var(--admin-bg); --gcard:var(--admin-card); --gink:var(--admin-ink); --gmid:var(--admin-mid); --gav:var(--admin-av); }
.g-none { --gbg:var(--soft); --gcard:var(--surface); --gink:var(--ink); --gmid:var(--muted); --gav:var(--line); }
.gsec { background:var(--gbg); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.grp { font-size:18px; font-weight:800; display:flex; gap:8px; align-items:center; margin:0; color:var(--gink); }
.grp span { font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--gcard); color:var(--gmid); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.ecard { position:relative; background:var(--gcard); border:1.5px solid transparent; border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:14px; }
.ecard:hover { border-color:var(--gmid); }
@media (prefers-reduced-motion:no-preference) { .ecard { transition:border-color .15s, transform .15s; } .ecard:hover { transform:translateY(-2px); } }
.who { display:flex; gap:10px; align-items:center; min-width:0; padding-right:46px; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-family:var(--font-display); flex:none; font-size:15px; background:var(--gav); color:var(--gink); }
.who .n { font-weight:700; font-size:15.5px; line-height:1.2; overflow-wrap:anywhere; color:var(--gink); text-decoration:none; }
.who .n::after { content:""; position:absolute; inset:0; border-radius:18px; } /* toda la tarjeta es un enlace a la ficha */
.who .p { font-size:12.5px; color:var(--muted); }
.who .lead { background:var(--gmid); color:#fff; font-size:12px; font-weight:700; padding:1px 9px; border-radius:999px; margin-right:4px; }
.pdfbtn { position:absolute; top:14px; right:14px; z-index:2; padding:4px 10px; font-size:11.5px; font-weight:700; border-radius:999px; background:var(--surface); color:var(--muted); border:1.5px solid var(--line); text-decoration:none; }
.pdfbtn:hover { color:var(--ink); border-color:var(--muted); }
.mid { display:flex; align-items:center; gap:14px; }
.big { border-radius:14px; padding:8px 0; width:84px; text-align:center; flex:none; }
.big b { display:block; font-family:var(--font-display); font-weight:800; font-size:36px; line-height:1; font-variant-numeric:tabular-nums; } .big small { font-size:11.5px; font-weight:700; }
.big.ok { background:var(--teal-soft); color:var(--teal); } .big.low { background:var(--sun-soft); color:var(--sun); } .big.zero { background:var(--coral-soft); color:var(--coral); }
.ring { display:flex; align-items:center; gap:10px; min-width:0; } .ring svg { flex:none; width:50px; height:50px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:6; } .ring .trk { stroke:var(--soft); } .ring .arc { stroke:var(--teal); stroke-linecap:round; }
.ring .t { font-size:13px; line-height:1.3; color:var(--muted); } .ring .t b { display:block; font-size:14px; color:var(--ink); }
.sick { display:flex; flex-direction:column; gap:5px; } .sick .lbl { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); font-weight:600; }
.dots { display:grid; grid-template-columns:repeat(16,1fr); gap:3px; } .dots i { height:7px; border-radius:4px; background:var(--coral-soft); } .dots i.on { background:var(--coral); }
.hrs { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; } .hrs i { height:7px; border-radius:4px; background:var(--sun-soft); } .hrs i.on { background:var(--sun); }
.badges { display:flex; flex-wrap:wrap; gap:6px; }
.status { font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.status.vac { background:var(--teal); color:#fff; } .status.soon { background:var(--sun-soft); color:var(--sun); } .status.req { background:var(--sea-soft); color:var(--sea); } .status.off { background:var(--soft); color:var(--muted); }

/* ---------- ficha, estado de cuenta, listas ---------- */
.ehead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ehead h1 { margin:0 0 4px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .toolbar h2 { margin:0; }
.stmt { list-style:none; margin:0; padding:0; } .stmt li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 10px; padding:11px 4px; border-bottom:1px solid var(--line); }
.stmt li:last-child { border-bottom:0; } .stmt .hint { width:100%; font-size:12.5px; color:var(--muted); } .stmt .acts { width:100%; } .num.good { color:var(--teal); }

/* compatibilidad con vistas de acceso */
.ok-text { color:var(--teal); }