/* HRpro — sistema visual propio: antracita y rojo, de oficina y de obra. Titulares condensados en mayúsculas, interfaz con sans del sistema.
   Modo claro/oscuro desde los tokens; la pantalla de acceso usa siempre el antracita. Diseño aprobado: «HRpro Bienvenida». */
:root {
  --bg: #f4f2ef; --surface: #ffffff; --surface-2: #ebe8e3; --ink: #1f2226; --ink-2: #3c424a; --ink-3: #5a616a;
  --line: #dedad4; --line-2: #c9c4bc;
  --brand: #b3202a; --brand-ink: #ffffff; --brand-soft: #fbe4e3; --brand-deep: #8f1820; --brand-text: #b3202a; --brand-hover: #8f1820;
  --sun: #d7302f; --sun-ink: #ffffff; --sun-soft: #fde7e5;
  --ok: #2b7549; --ok-soft: #dff1e5; --warn: #8f5900; --warn-soft: #fdecc8; --bad: #a82f25; --bad-soft: #fadcd8; --info: #25588f; --info-soft: #dbe8f8;
  --shadow: 0 1px 2px rgba(31, 34, 38, .08), 0 8px 24px -12px rgba(31, 34, 38, .22);
  --r: 14px; --r-sm: 9px;
  /* Sin fuentes externas (CSP default-src 'self'): Barlow Condensed si está instalada y, si no, la condensada del sistema. */
  --font-display: "Barlow Condensed", "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent);
}
:root[data-theme="dark"], .login {
  --bg: #1f2226; --surface: #292d33; --surface-2: #30353c; --ink: #f4f5f7; --ink-2: #c4c8ce; --ink-3: #9ba1a9;
  --line: #3c424a; --line-2: #4a515a;
  --brand: #d7302f; --brand-ink: #ffffff; --brand-soft: #3d2224; --brand-deep: #ff9a9a; --brand-text: #ff7b7b; --brand-hover: #c42a2c;
  --sun: #ff7b7b; --sun-ink: #1f2226; --sun-soft: #3d2224;
  --ok: #6fcf94; --ok-soft: #1c3a2b; --warn: #ecb955; --warn-soft: #3a2e10; --bad: #ff8f86; --bad-soft: #4a2022; --info: #8ab9f0; --info-soft: #1d2f4a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #1f2226; --surface: #292d33; --surface-2: #30353c; --ink: #f4f5f7; --ink-2: #c4c8ce; --ink-3: #9ba1a9;
  --line: #3c424a; --line-2: #4a515a;
  --brand: #d7302f; --brand-ink: #ffffff; --brand-soft: #3d2224; --brand-deep: #ff9a9a; --brand-text: #ff7b7b; --brand-hover: #c42a2c;
  --sun: #ff7b7b; --sun-ink: #1f2226; --sun-soft: #3d2224;
  --ok: #6fcf94; --ok-soft: #1c3a2b; --warn: #ecb955; --warn-soft: #3a2e10; --bad: #ff8f86; --bad-soft: #4a2022; --info: #8ab9f0; --info-soft: #1d2f4a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-ui);
  font-variant-numeric: tabular-nums; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; margin: 0; line-height: 1.1; }
h1, h2 { text-transform: uppercase; }
h1, h2, h3, h4, .brand, .serif, .tile .value, .avatar.lg, .login .lhead .word { font-stretch: 75%; } /* variante condensada de las fuentes variables del sistema (Bahnschrift) */
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8rem); }
h2 { font-size: 1.55rem; } h3 { font-size: 1.25rem; }
p { margin: 0; }
a { color: var(--brand-text); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); } .small { font-size: .86rem; } .tiny { font-size: .78rem; }
.serif { font-family: var(--font-display); } .num { font-variant-numeric: tabular-nums; } .right { text-align: right; }
.row { display: flex; gap: 12px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; }
.stack { display: grid; gap: 12px; } .stack.lg { gap: 20px; } .stack.sm { gap: 6px; }
.grow { flex: 1 1 auto; min-width: 0; } .nowrap { white-space: nowrap; }

/* ---- Barra superior ---- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 10px clamp(14px, 3vw, 32px);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); border-top: 3px solid var(--brand);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.logo { display: block; flex: none; }
.logo .lh { fill: var(--ink); } .logo .lb { stroke: var(--brand); fill: none; } .logo .lleg { fill: var(--brand); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; color: var(--ink-2);
  text-decoration: none; font-weight: 600; font-size: .94rem;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.iconbtn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); }
.iconbtn .dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sun); color: var(--sun-ink); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.company-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #1f2226; color: #f4f5f7; max-width: 260px; }
.company-chip img { height: 32px; width: auto; max-width: 190px; border-radius: 8px; display: block; }
.company-chip .mono { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.company-chip span { font-size: .8rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.topbar > * { min-width: 0; }
.company-chip { flex-shrink: 1; min-width: 0; }
.company-chip img { max-width: min(190px, 15vw); }
@media (max-width: 1120px) { .company-chip span { display: none; } .nav a { padding: 8px 11px; } .topbar { gap: 10px; } }
/* Con «Facturas» hay seis destinos para administración y fiduciaria: sin iconos caben en anchos medios. */
@media (max-width: 1120px) and (min-width: 821px) { .nav a svg { display: none; } .nav a { padding: 8px 9px; } }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; font-size: .8rem; flex: none; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.5rem; font-family: var(--font-display); }
.avatar.sm { width: 26px; height: 26px; font-size: .68rem; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 6px; z-index: 40;
}
.menu a, .menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border-radius: 9px; border: 0; background: none; text-align: left; color: var(--ink); text-decoration: none; cursor: pointer; font-size: .92rem; }
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu .who { padding: 10px 12px; }

/* ---- Páginas ---- */
.page { max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 32px) 96px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { color: var(--ink-3); margin-top: 4px; }
.grid { display: grid; gap: 16px; }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.layout-hoy { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 900px) { .layout-hoy { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hero .sun { width: 130px; height: 130px; right: -44px; bottom: -64px; opacity: .65; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.card > h3, .card-head h3 { margin-bottom: 2px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card.flat { box-shadow: none; }
.card.tint { background: var(--brand-soft); border-color: transparent; }
.tile { display: grid; gap: 4px; }
.tile .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.tile .value { font-family: var(--font-display); font-size: 2.3rem; line-height: 1.05; font-weight: 700; }
.tile .hint { font-size: .85rem; color: var(--ink-3); }
.pos { color: var(--ok); } .neg { color: var(--bad); }

/* ---- Hero de «Hoy» ---- */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: clamp(18px, 3vw, 28px); color: #f4f5f7;
  background: radial-gradient(120% 140% at 85% 120%, rgba(215, 48, 47, .75) 0%, rgba(215, 48, 47, 0) 55%), linear-gradient(135deg, #1f2226 0%, #292d33 60%, #30353c 100%);
  box-shadow: var(--shadow);
}
.hero h1 { color: #f4f5f7; } .hero .sub { color: #c4c8ce; margin-top: 4px; }
.hero .sun { position: absolute; right: -30px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #ff7b7b 0%, #d7302f 45%, rgba(215, 48, 47, 0) 70%); opacity: .8; pointer-events: none; }
.hero .banner { margin-top: 12px; display: inline-flex; gap: 8px; align-items: center; background: rgba(244, 245, 247, .14); border-radius: 999px; padding: 5px 12px; font-size: .86rem; }

/* ---- Botones, píldoras ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: .92rem; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.sun { background: var(--sun); color: var(--sun-ink); }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.quiet { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: var(--bg); }
.btn.sm { padding: 5px 11px; font-size: .84rem; }
.btn.lg { padding: 14px 26px; font-size: 1.05rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--info-soft); color: var(--info); }
.pill.brand { background: var(--brand-soft); color: var(--brand-deep); } .pill.sun { background: var(--sun-soft); color: var(--warn); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---- Pestañas segmentadas ---- */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 999px; max-width: 100%; overflow-x: auto; }
.seg button, .seg a {
  border: 0; background: none; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.seg [aria-selected="true"], .seg [aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---- Formularios ---- */
.field { display: grid; gap: 5px; }
.field > label, .field > .lbl { font-size: .82rem; font-weight: 650; color: var(--ink-2); }
.field .hint { font-size: .8rem; color: var(--ink-3); }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); min-height: 40px;
}
textarea.input { min-height: 80px; resize: vertical; }
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }
.switch { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch:checked { background: var(--brand); } .switch:checked::after { transform: translateX(18px); }

/* ---- Tablas ---- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.t th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.t td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tr.click { cursor: pointer; } .t tr.click:hover td { background: var(--surface-2); }
.t td.num, .t th.num { text-align: right; }
/* Tabla en tarjetas en móvil (className «cards»): cada fila es una tarjeta con «etiqueta · valor» por celda. */
@media (max-width: 640px) {
  .t.cards thead { display: none; }
  .t.cards, .t.cards tbody, .t.cards tr { display: block; }
  .t.cards tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .t.cards tr:last-child { border-bottom: 0; }
  .t.cards td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .t.cards td::before { content: attr(data-label); color: var(--ink-3); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; text-align: left; flex: none; }
}

/* ---- Vacío, aviso, toast ---- */
.empty { text-align: center; padding: 34px 18px; color: var(--ink-3); display: grid; gap: 10px; justify-items: center; }
.empty svg { color: var(--line-2); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--info-soft); color: var(--ink); border-left: 4px solid var(--info); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn); } .notice.bad { background: var(--bad-soft); border-color: var(--bad); } .notice.ok { background: var(--ok-soft); border-color: var(--ok); }
.toasts { position: fixed; right: 16px; bottom: 84px; display: grid; gap: 8px; z-index: 80; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: .92rem; animation: rise .2s ease-out; }
.toast.bad { background: var(--bad); color: #fff; } .toast.ok { background: var(--ok); color: #fff; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* ---- Cajón lateral ---- */
.overlay { position: fixed; inset: 0; background: rgba(20, 20, 15, .45); z-index: 60; display: flex; justify-content: flex-end; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.drawer { width: min(520px, 100%); height: 100%; background: var(--surface); box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .35); display: flex; flex-direction: column; animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: .6; } }
.drawer header { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer .body { padding: 20px; overflow-y: auto; flex: 1; display: grid; gap: 16px; align-content: start; }
.drawer footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.overlay.center { justify-content: center; align-items: center; padding: 16px; }
.overlay.center .drawer { height: auto; max-height: 90vh; border-radius: 18px; width: min(460px, 100%); }

/* ---- Gráficos ---- */
.chart text { fill: var(--ink-3); font-size: 11px; font-family: var(--font-ui); }
.bar-logged { fill: var(--brand); } .bar-expected { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.bar-over { fill: var(--sun); } .bar-today { fill: var(--brand-deep); }
.ring-bg { stroke: var(--surface-2); } .ring-fg { stroke: var(--brand); }
.ribbon { position: relative; height: 46px; background: var(--surface-2); border-radius: 12px; overflow: hidden; }
.ribbon .seg-e { position: absolute; top: 6px; bottom: 6px; background: var(--brand); border-radius: 7px; opacity: .92; }
.ribbon .seg-run { background: repeating-linear-gradient(45deg, var(--sun), var(--sun) 6px, color-mix(in srgb, var(--sun) 50%, var(--surface)) 6px, color-mix(in srgb, var(--sun) 50%, var(--surface)) 12px); }
.ribbon .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.ribbon-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-3); margin-top: 4px; }

/* ---- Cuadrícula de calendario ---- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.cal .dow { padding: 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--surface-2); text-align: center; font-weight: 650; }
.cal .day { min-height: 92px; padding: 6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: grid; gap: 3px; align-content: start; font-size: .8rem; }
.cal .day:nth-child(7n + 1) { border-left: 0; }
.cal .day.out { background: color-mix(in srgb, var(--surface-2) 60%, transparent); color: var(--ink-3); }
.cal .day.we { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.cal .day.hol { background: var(--sun-soft); }
.cal .day.today .dn { background: var(--ink); color: var(--bg); }
.cal .dn { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-weight: 650; font-size: .78rem; }
.cal .hname { font-size: .68rem; color: var(--warn); line-height: 1.15; }
.chip-abs { display: flex; gap: 5px; align-items: center; padding: 2px 6px; border-radius: 6px; font-size: .72rem; font-weight: 600; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip-abs.pending { background: color-mix(in srgb, var(--c, #3c424a) 16%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--c, #3c424a); border-style: dashed; }
@media (max-width: 640px) { .cal .day { min-height: 64px; padding: 3px; } .chip-abs { font-size: .64rem; padding: 1px 4px; } .cal .hname { display: none; } }

/* ---- Cobertura ---- */
.cover { display: flex; gap: 6px; flex-wrap: wrap; }
.cover .d { min-width: 52px; padding: 6px 8px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); text-align: center; font-size: .74rem; line-height: 1.2; }
.cover .d b { display: block; font-size: 1rem; }
.cover .d.bad { background: var(--bad-soft); color: var(--bad); }

/* ---- Línea de tiempo ---- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 16px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.timeline li.future::before { border-color: var(--sun); }
.timeline .when { font-size: .78rem; color: var(--ink-3); }

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: .92rem; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.progress.sun > i { background: var(--sun); }
.matrix td.cell { text-align: center; min-width: 58px; }
.matrix td.cell.low { color: var(--ink-3); }
.loading { padding: 60px; display: grid; place-items: center; color: var(--ink-3); }

/* ---- Inicio de sesión: siempre antracita, aunque el tema elegido sea el claro (diseño «HRpro Bienvenida») ---- */
.login { min-height: 100vh; position: relative; overflow: hidden; background: var(--bg); color: var(--ink); }
.login::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 48px 48px;
  background-image: linear-gradient(color-mix(in srgb, var(--surface) 60%, var(--bg)) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface) 60%, var(--bg)) 1px, transparent 1px); }
.login::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--brand); }
.login .wrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 64px) 48px; display: flex; flex-direction: column; gap: 56px; }
.login .lhead { display: flex; align-items: center; gap: 12px; }
.login .lhead .word { font-family: var(--font-display); font-weight: 700; font-size: 2.9rem; line-height: 1; }
.login .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); grid-template-areas: "hero panel" "week panel"; grid-template-rows: auto 1fr; gap: 28px 56px; align-items: start; }
.login .hero-col { grid-area: hero; display: flex; flex-direction: column; gap: 28px; min-width: 0; container-type: inline-size; }
.login .eyebrow { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.login .eyebrow span { display: inline-flex; align-items: center; gap: 8px; }
.login .eyebrow i { width: 8px; height: 8px; background: var(--brand); flex: none; }
.login h1 { font-size: clamp(3.4rem, 1.8rem + 6.4vw, 6.25rem); line-height: .94; letter-spacing: .005em; color: var(--ink); overflow-wrap: anywhere; font-size: clamp(2.6rem, 16cqi, 6.25rem); } /* escala con la columna para que «Arbeitswoche» no se parta */
.login h1 em { font-style: normal; box-shadow: inset 0 -.15em 0 var(--brand); }
.login .lead { max-width: 540px; font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); }
.login .week { grid-area: week; max-width: 560px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; display: grid; gap: 16px; }
.login .week .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--font-mono); font-weight: 500; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.login .week .top b { font-size: .95rem; letter-spacing: 0; color: var(--ink); font-weight: 500; } .login .week .top b span { color: var(--ink-3); }
.login .week .rows { display: grid; gap: 12px; }
.login .week .r { display: grid; grid-template-columns: 28px minmax(0, 150px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; font-size: .88rem; }
.login .week .r .d, .login .week .r .h { font-family: var(--font-mono); font-weight: 500; font-size: .82rem; } .login .week .r .d { color: var(--ink-3); } .login .week .r .h { text-align: right; color: var(--ink); }
.login .week .r .p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login .week .bar { display: block; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; } .login .week .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.login .panel { grid-area: panel; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 14px; padding: 36px 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.login .panel > .row { flex-wrap: wrap; }
.login .panel h2 { font-size: 2.5rem; line-height: 1; }
.login .panel .welcome { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.login .panel .access { color: var(--ink-3); font-size: .88rem; line-height: 1.5; }
.login .langs { gap: 6px; }
.login .langs .btn { min-width: 44px; height: 44px; padding: 0; border-radius: 22px; font-family: var(--font-mono); font-weight: 500; font-size: .82rem; }
.login .field { gap: 8px; } .login .field > label { font-size: .88rem; color: var(--ink); }
.login .input { background: var(--bg); border-color: var(--line-2); min-height: 52px; border-radius: 10px; padding: 0 16px; font-size: 1rem; }
.login .panel form .btn { width: 100%; min-height: 54px; border-radius: 10px; font-size: 1.1rem; }
.login .demo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.login .feats { display: flex; flex-wrap: wrap; gap: 28px 48px; border-top: 1px solid var(--line); padding-top: 28px; }
.login .feat { flex: 1 1 240px; display: flex; gap: 14px; align-items: flex-start; } .login .feat svg { color: var(--brand-text); flex: none; }
.login .feat b { display: block; font-size: 1rem; font-weight: 600; } .login .feat span { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) { .login .main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "panel" "week"; } .login .panel { max-width: 460px; } }
@media (max-width: 720px) { .login .wrap { padding-top: 32px; gap: 36px; } .login .panel { padding: 24px 20px 28px; } .login .panel h2 { font-size: 2rem; } .login .langs .btn { min-width: 40px; height: 40px; } .login .week .r { grid-template-columns: 24px minmax(0, 1fr) 46px; } .login .week .r .p { display: none; } }

/* ---- Barra inferior móvil ---- */
.tabbar { display: none; }
@media (max-width: 820px) {
  .nav { display: none; } .company-chip span { display: none; } .company-chip img { max-width: 120px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; text-decoration: none; color: var(--ink-3); font-size: .68rem; font-weight: 650; border-radius: 10px; }
  .tabbar a[aria-current="page"] { color: var(--brand-deep); background: var(--brand-soft); }
  .toasts { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .topbar, .tabbar, .toasts { display: none; } .card { box-shadow: none; } }