:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --ink: #1c2333;
  --muted: #6b7487;
  --line: #e3e8f0;
  --brand: #2456d6;
  --brand-ink: #ffffff;
  --ok: #1a9e5c;
  --warn: #e08a00;
  --danger: #d63b3b;
  --chip-work: #e3ecff;
  --chip-work-ink: #1f47b0;
  --chip-free: #eef1f5;
  --chip-free-ink: #5d6675;
  --chip-vac: #fff0d9;
  --chip-vac-ink: #a06000;
  --chip-bm: #ffe3e3;
  --chip-bm-ink: #b02a2a;
  --chip-other: #f0e4ff;
  --chip-other-ink: #6b32b8;
  --radius: 10px;
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- login ---------- */
:root { --marisma: #16355f; }
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #1b3f70 0%, var(--marisma) 45%, #0d2242 100%);
}
.login-panel {
  background: #fff; border-radius: 18px; padding: 34px 40px 26px;
  max-width: 780px; width: 100%; text-align: center;
  box-shadow: 0 18px 60px rgba(4, 14, 34, .45);
}
.login-logo { width: 185px; max-width: 55%; display: block; margin: 0 auto 4px; }
.login-title { font-size: 24px; font-weight: 800; color: var(--marisma); letter-spacing: .3px; }
.login-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.login-section {
  margin: 26px 0 12px; display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.login-section::before, .login-section::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; text-align: left;
  box-shadow: 0 1px 3px rgba(20,30,60,.06);
  transition: transform .08s, box-shadow .08s, border-color .08s;
}
.login-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(20,30,60,.16); border-color: var(--marisma); }
.login-card .role { font-weight: 700; color: var(--marisma); }
.login-card .desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.login-card.admin { border: 1.5px solid var(--marisma); background: #f5f8fd; flex: 1 1 260px; max-width: 340px; }
.login-card.dept {
  flex: 1 1 150px; max-width: 175px; padding: 13px 10px; text-align: center;
  font-weight: 700; font-size: 13.5px; letter-spacing: .4px; color: var(--marisma);
}
.login-foot { margin-top: 18px; color: var(--muted); font-size: 12px; }
#login-form { max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.login-input { width: 100%; text-align: left; font-size: 14.5px; padding: 10px 14px; }
.login-err {
  background: #fdeeee; border: 1px solid #eec2c2; color: #a03030;
  border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
@media (max-width: 560px) {
  .login-panel { padding: 24px 18px 20px; }
  .login-card.admin { max-width: none; }
}

/* ---------- shell ---------- */
.topbar {
  background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px; padding: 10px 20px;
  position: sticky; top: 0; z-index: 30;
}
.topbar .logo { font-weight: 800; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; color: var(--marisma); }
.topbar .logo img { height: 30px; width: 30px; object-fit: contain; }
.topbar .logo span { color: var(--brand); }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab-btn {
  border: none; background: transparent; padding: 8px 14px; border-radius: 8px;
  color: var(--muted); font-weight: 600;
}
.tab-btn.active { background: var(--brand); color: var(--brand-ink); }
.tab-btn .badge {
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 1px 7px; margin-left: 6px; font-weight: 700;
}
.tab-btn.active .badge { background: #fff; color: var(--danger); }
.userbox { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.userbox b { color: var(--ink); }
/* Nota de la celda (separada de las horas) */
.nota-turno {
  font-size: 9.5px; color: var(--muted); margin-top: 1px; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .2px;
}
/* Días fuera del alta/baja del trabajador en el cuadrante */
td.cell-inactiva {
  color: #adb5c2; font-size: 10.5px; text-align: center; cursor: default;
  text-transform: uppercase; letter-spacing: .5px;
  background: repeating-linear-gradient(45deg, #f6f7f9, #f6f7f9 6px, #eef0f4 6px, #eef0f4 12px);
}
/* Presencia en vivo */
.pres-titulo { margin: 18px 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pres-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pres-card { display: flex; gap: 10px; align-items: center; background: var(--card, #fff); border: 1px solid var(--line); border-left: 4px solid #a8b0bd; border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(20, 40, 80, .05); }
.pres-card.dentro { border-left-color: #23a26a; }
.pres-card.esperado { border-left-color: #f0a11e; background: #fffaf1; }
.pres-card.salio { border-left-color: #b9c2d0; opacity: .85; }
.pres-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #e8eefb, #d4e0f5); color: #40598a; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; letter-spacing: .5px; }
.pres-card.dentro .pres-avatar { background: linear-gradient(135deg, #def4e8, #bfe8d2); color: #17734a; }
.pres-card.esperado .pres-avatar { background: linear-gradient(135deg, #fdeed2, #f8ddab); color: #8a5b00; }
.pres-info { min-width: 0; }
.pres-nombre { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-hora { font-size: 12px; margin-top: 3px; }
.badge.verde { background: #23a26a; }
/* Píldora de sincronización (barra superior) */
.sync-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; cursor: default; background: rgba(255, 255, 255, .55); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sync-dot.ok { background: #23a26a; box-shadow: 0 0 0 3px rgba(35, 162, 106, .16); }
.sync-dot.saving { background: #f0a11e; animation: sync-pulse 1s ease-in-out infinite; }
.sync-dot.off { background: #e5484d; animation: sync-pulse 1.2s ease-in-out infinite; }
.sync-dot.local { background: #a8b0bd; }
@keyframes sync-pulse { 50% { opacity: .35; } }
@media (max-width: 900px) { .sync-pill { display: none; } }
.linklike { background: none; border: none; color: var(--brand); font-weight: 600; padding: 4px; }

.main { padding: 20px; max-width: 1500px; margin: 0 auto; }

/* ---------- controls bar ---------- */
.controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.controls .spacer { flex: 1; }
.btn {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 13px; font-weight: 600; color: var(--ink);
}
.btn:hover { border-color: #c8d2e4; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost-danger { color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 13px; }
select.btn, input.btn { font-weight: 500; }
.week-nav { display: flex; align-items: center; gap: 6px; }
.week-label { font-weight: 700; min-width: 210px; text-align: center; }
.dept-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.dept-tab {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 6px 14px; font-weight: 600; color: var(--muted); font-size: 13px;
}
.dept-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- schedule grid ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: auto; box-shadow: 0 1px 3px rgba(20,30,60,.05);
}
table.grid { border-collapse: collapse; width: 100%; min-width: 980px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 0; }
table.grid th {
  background: #f8fafd; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); padding: 8px 10px; text-align: center;
}
table.grid th.name-col, table.grid td.name-col {
  text-align: left; padding: 8px 12px; font-weight: 700; white-space: nowrap;
  background: #fbfcfe; position: sticky; left: 0; z-index: 2; min-width: 160px;
}
table.grid th.today, table.grid td.cell.today-col { background: #fffdf2; }
td.cell { height: 46px; min-width: 108px; text-align: center; vertical-align: middle; }
.shift {
  display: block; margin: 3px; padding: 6px 6px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; cursor: grab; user-select: none;
  min-height: 32px; display: flex; align-items: center; justify-content: center;
}
.shift.t-work  { background: var(--chip-work);  color: var(--chip-work-ink); }
.shift.t-free  { background: var(--chip-free);  color: var(--chip-free-ink); }
.shift.t-vac   { background: var(--chip-vac);   color: var(--chip-vac-ink); }
.shift.t-bm    { background: var(--chip-bm);    color: var(--chip-bm-ink); }
.shift.t-other { background: var(--chip-other); color: var(--chip-other-ink); }
.shift.empty { background: transparent; color: #c3cad6; cursor: pointer; font-weight: 500; }
td.cell.dragover { outline: 2px dashed var(--brand); outline-offset: -3px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 4px; color: var(--muted); font-size: 12.5px; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }

/* ---------- grupos, reorden, datos y variantes del cuadrante ---------- */
tr.group-row td.group-head { background: #eef2f8; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--marisma); padding: 6px 12px; position: sticky; left: 0; border-top: 3px solid var(--marisma); }
.group-n { background: var(--brand); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; margin-left: 4px; }
.name-col .reorder { display: inline-flex; flex-direction: column; vertical-align: middle; margin-right: 4px; }
.name-col .reorder button { border: none; background: transparent; color: #b0b9c9; font-size: 8px; line-height: 8px; padding: 0 2px; cursor: pointer; }
.name-col .reorder button:hover { color: var(--brand); }
td.cell.selcell { outline: 2px solid var(--brand); outline-offset: -2px; background: #eef3ff; }
.multi-bar { background: #eef3ff; border: 1px solid var(--brand); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.multi-bar input { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; }
.data-rows td.data-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.data-input { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; text-align: center; font-variant-numeric: tabular-nums; }
td.data-cell { padding: 2px; }
table.grid.compact th, table.grid.compact td.name-col { font-size: 11px; padding: 3px 6px; }
table.grid.compact td.cell { height: 30px; min-width: 74px; }
table.grid.compact .shift { font-size: 10.5px; min-height: 22px; padding: 2px 3px; margin: 1px; }
table.grid.compact .name-col { min-width: 120px; }
.color-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type=color] { width: 42px; height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.color-label { flex: 1; font-size: 13px; font-variant-numeric: tabular-nums; }
.print-title { font-size: 16px; font-weight: 700; margin: 4px 0 10px; }

/* ---------- fichajes table ---------- */
table.flat { border-collapse: collapse; width: 100%; }
table.flat th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); padding: 9px 12px; border-bottom: 2px solid var(--line); background: #f8fafd;
  position: sticky; top: 0;
}
table.flat td { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
table.flat tr:hover td { background: #f8faff; }
.mono { font-variant-numeric: tabular-nums; }
.dev-pos { color: var(--warn); font-weight: 700; }
.dev-neg { color: var(--danger); font-weight: 700; }
.dev-zero { color: var(--muted); }
.state {
  display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700;
}
.state.ok { background: #e2f6ec; color: var(--ok); }
.state.pendiente { background: #ffe9e9; color: var(--danger); }
.state.justificada { background: #e2f6ec; color: var(--ok); }
.state.denegada { background: var(--chip-free); color: var(--chip-free-ink); }
.state.info { background: #eef1f5; color: var(--muted); }

/* ---------- review cards ---------- */
.review-list { display: flex; flex-direction: column; gap: 12px; }
.rev-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--danger);
  border-radius: var(--radius); padding: 10px 16px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.rev-card.resolved { border-left-color: var(--ok); opacity: .85; }
.rev-card.resolved.denied { border-left-color: #98a1b3; }
.rev-main { flex: 1; min-width: 260px; }
.rev-main .who { font-weight: 700; font-size: 15px; }
.rev-main .what { color: var(--ink); font-size: 14px; margin-top: 3px; }
.rev-main .what b { color: var(--danger); }
.rev-card.resolved .rev-main .what b { color: var(--ink); }
.rev-times { font-size: 14px; margin-top: 6px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.rev-times b { font-variant-numeric: tabular-nums; }
.rev-worked { background: #eef4ff; border: 1px solid #d5e2f7; border-radius: 8px; padding: 2px 10px; font-weight: 600; }
.rev-worked b { font-size: 15px; font-weight: 800; }
.rev-consec { display: flex; justify-content: flex-end; font-size: 14px; margin-top: 8px; gap: 4px; align-items: baseline; color: var(--muted); }
.rev-consec b { font-variant-numeric: tabular-nums; }
.rev-actions { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.rev-actions textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; resize: vertical;
  min-height: 38px; width: 100%;
}
.rev-actions .row { display: flex; gap: 8px; }
.dev-col { min-width: 100px; text-align: center; }
.dev-big { font-size: 22px; font-weight: 800; }
.dev-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.motivo-note { font-size: 13px; color: var(--muted); font-style: italic; }

/* ---------- report ---------- */
.cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; min-width: 180px;
}
.kpi .v { font-size: 24px; font-weight: 800; margin-top: 2px; }
.kpi .l { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
.saldo-pos { color: var(--warn); }
.saldo-neg { color: var(--danger); }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(15,22,40,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--panel); border-radius: 14px; padding: 20px; width: 460px; max-width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: 0 18px 50px rgba(10,18,40,.3);
}
.modal h3 { margin: 0 0 4px; }
.modal .sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.modal input[type=text] {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
.preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.preset-chips .shift { cursor: pointer; margin: 0; }
.modal .foot { display: flex; gap: 8px; justify-content: flex-end; }

.empty-note { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- calendario anual de vacaciones ---------- */
.modal.wide { width: 94vw; max-width: 1300px; }
.vc-wrap { overflow-x: auto; padding-bottom: 8px; }
.vc-header { color: var(--muted); font-size: 11px; }
.vc-month { position: absolute; top: 0; text-align: center; border-left: 1px solid var(--line); text-transform: uppercase; letter-spacing: .3px; }
.vc-row { display: flex; align-items: center; height: 22px; }
.vc-name { width: 150px; min-width: 150px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.vc-track { position: relative; background: repeating-linear-gradient(90deg, #f4f6fa 0, #f4f6fa 96px, #eaeef5 96px, #eaeef5 97px); border-radius: 3px; }
.vc-seg { position: absolute; top: 3px; height: 14px; border-radius: 3px; }
.vc-heat { position: absolute; top: 2px; height: 16px; background: var(--danger); }

/* ---------- RR.HH. ---------- */
/* Tic verde de «parte de vacaciones emitido» junto al periodo */
.vac-ok { color: var(--ok); font-weight: 800; margin-right: 3px; }
/* Adjuntos plegados de la ficha */
.adj-det > summary { cursor: pointer; font-size: 12.5px; color: var(--brand); font-weight: 600; padding: 2px 0; }
.adj-det > summary::marker { color: var(--muted); }
.adj-lista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }

/* Calendario visual de vacaciones: líneas de fondo y leyenda de sustitutas */
.vc-linea { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.vc-linea-fuerte { background: #c8d0de; width: 1.5px; }
.vc-leyenda {
  display: inline-block; color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}

/* Ajustes de días devengados (con motivo) y aviso de baja médica prolongada */
.vac-ajuste { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.vac-aviso-it {
  font-size: 11.5px; color: #7a5c14; background: #fff7e8; border: 1px solid #f0d9a8;
  border-radius: 6px; padding: 2px 8px; margin-top: 4px; display: inline-block;
}

/* Recuperación prevista (días REC futuros) junto a la bolsa del cuadrante */
.rec-prev {
  font-size: 10px; font-weight: 600; white-space: nowrap;
  background: #fff7e8; border: 1px solid #f0d9a8; color: #7a5c14;
  border-radius: 999px; padding: 1px 6px; margin-left: 4px; cursor: default;
}

/* Aviso de reloj parado (sin fichajes en horario laboral) — solo Dirección/asistentes */
.aviso-fichajes {
  background: #fdeeee; border-bottom: 2px solid var(--danger); color: #7a1f1f;
  padding: 8px 20px; font-size: 13px; text-align: center;
}

/* Modificación del jefe sobre semana publicada (banner + grupos del histórico) */
.mod-bar {
  background: #fff7e8; border: 1px solid #f0d9a8; border-radius: 10px;
  padding: 8px 14px; margin-bottom: 12px; font-size: 13px; color: #7a5c14;
}
.mod-grupo { margin-bottom: 14px; }
.mod-head {
  font-size: 13px; padding: 7px 10px; background: #f5f8fd;
  border: 1px solid var(--line); border-radius: 8px 8px 0 0; color: var(--ink, #21303f);
}
.mod-grupo .flat, .mod-grupo .empty-note { border-top: none; margin-top: 0; }

/* Filtro desplegable de selección múltiple (barras de filtros de RR.HH.) */
.msel { position: relative; display: inline-block; }
.msel > .btn.msel-activo { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.msel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 80;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .16); padding: 8px 12px;
  min-width: 210px; max-height: 320px; overflow: auto;
}
.msel-op { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 2px; cursor: pointer; white-space: nowrap; }
.msel-op:hover { color: var(--brand); }
.msel-limpiar { display: block; margin-top: 4px; font-size: 12px; }

.hr-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.hr-alert {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: 8px; padding: 8px 12px; font-size: 13.5px; cursor: pointer;
}
.hr-alert:hover { background: #f8faff; }
.hr-alert.roja { border-left-color: var(--danger); }
.hr-alert.ambar { border-left-color: var(--warn); }
.row-baja td { opacity: .55; }
.ficha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; }
.fbox { padding: 16px 18px; overflow: visible; }
.fbox h3 { margin: 0 0 10px; font-size: 15px; }
/* dos recuadros apilados en la misma celda de la rejilla (reconocimiento + entregas):
   cada uno con su altura natural, sin hueco en blanco */
.fbox-col { display: flex; flex-direction: column; gap: 14px; }
.fbox-col .fbox { flex: none; }
/* Sustituciones: tarjetas apiladas (una tabla de 5 columnas se desbordaba del panel
   en pantallas estrechas y con causas largas tipo «Permiso retribuido — MATRIMONIO…») */
.sust-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.sust-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fafbfd; }
.sust-cab { display: flex; align-items: baseline; gap: 8px; }
.sust-cab b { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.sust-causa { font-size: 12.5px; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.sust-fechas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sust-fechas label {
  flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 600;
}
.sust-fechas input { width: 100%; min-width: 0; box-sizing: border-box; }
.f-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.f-item { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.f-item label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 600; }
.f-item input, .f-item select, .f-item textarea {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; background: #fff; width: 100%;
}
.f-item input:focus, .f-item select:focus, .f-item textarea:focus { outline: 2px solid #bcd0f7; border-color: var(--brand); }
.chk { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.adj-block { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.adj-chip { background: var(--chip-work); color: var(--chip-work-ink); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.adj-chip .linklike { font-size: 12.5px; }
.vac-summary { display: flex; gap: 18px; margin: 8px 0; font-size: 14px; }
.vac-summary b { font-variant-numeric: tabular-nums; }
.aus-cat { margin: 8px 0; }
.aus-cat b { font-size: 13.5px; }
.aus-cat ul { margin: 3px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink); }
.exc-box { background: #fffaf0; border: 1px solid var(--chip-vac); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.f-item textarea { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; background: #fff; width: 100%; resize: vertical; font: inherit; }
td.cell { position: relative; }
.pet-mark { position: absolute; top: 0; right: 2px; font-size: 11px; z-index: 1; cursor: help; }
/* peso de camarera (PISOS): etiqueta a la derecha del turno, clic para cambiar */
.peso {
  position: absolute; bottom: 1px; right: 2px; z-index: 1;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 5px; cursor: pointer;
  background: #eef1f5; color: var(--muted); border: 1px solid var(--line);
}
.peso.on { background: var(--marisma); color: #fff; border-color: var(--marisma); }
.peso:hover { transform: scale(1.15); }
/* recuperaciones de bolsa planificadas (♻) */
.rec-mark {
  position: absolute; top: 1px; left: 2px; z-index: 1;
  font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.rec-mark.recupera { background: #e0f4e8; color: #157347; border: 1px solid #9ed8b5; }
.rec-mark.devuelve { background: #fdeeda; color: #a05e00; border: 1px solid #eecb92; }
.saldo-mini { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: #f0f3f8; margin-left: 4px; }
.modal label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 8px 0 3px; text-transform: uppercase; letter-spacing: .3px; }
.modal select, .modal input[type=date], .modal input[type=time], .modal input[type=number] { margin-bottom: 4px; }
.hint { color: var(--muted); font-size: 12.5px; margin: 8px 2px; }

/* ---------- móvil (retoque ligero 05/08/2026: consulta y validación cómodas) ---------- */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .topbar .logo span { display: none; } /* «Las Marismas» fuera: hueco para el usuario */
  .userbox { margin-left: auto; }
  /* las pestañas pasan a su propia fila, deslizable con el dedo */
  .tabs {
    order: 3; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; padding: 8px 10px; }
  .main { padding: 10px; }
  /* objetivos táctiles más grandes */
  .btn { padding: 10px 13px; }
  .btn.small { padding: 7px 10px; }
  .dept-tab { padding: 8px 14px; }
  .week-label { min-width: 0; font-size: 13.5px; }
  /* con letra menor de 16px, iOS hace zoom solo al tocar un campo: se evita */
  input, select, textarea { font-size: 16px; }
  .modal-back { padding: 10px; align-items: flex-start; }
  .modal { margin-top: 4vh; padding: 16px 14px; }
  .ficha-grid { grid-template-columns: 1fr; }
  .login-panel { padding: 22px 14px 18px; }
  .msel-panel { max-width: calc(100vw - 40px); }
  /* cuadrante: columna de nombres contenida para que quepan más días a la vista */
  table.grid .name-col { min-width: 110px; max-width: 140px; }
  table.grid { min-width: 900px; }
}

/* ---------- print ---------- */
@media print {
  .topbar, .controls, .dept-tabs, .no-print, .legend, .multi-bar { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
  .panel { border: none; box-shadow: none; overflow: visible; }
  table.flat th { position: static; }
  .print-title { display: block !important; }
  table.grid { font-size: 11px; }
  table.grid td.cell { height: auto; }
  .name-col .reorder { display: none !important; }
  /* El horario impreso lleva SOLO los turnos con sus colores: sin saldos de bolsa,
     sin marcas ♻/pesos y sin las filas de datos del día ni sumatorios (petición Dirección) */
  .saldo-mini, .rec-mark, .rec-prev, .peso, tbody.data-rows, .pet-mark { display: none !important; }
  .shift { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: landscape; margin: 10mm; }
}

/* Cuadro de sustituciones (18/08/2026) */
.sust-tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.sust-tabla td { vertical-align: top; }
.sust-tabla td.sust-libre { background: #fef08a; font-weight: 700; text-align: center; }
.form-tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); white-space: nowrap; }
.form-tabla td { vertical-align: top; }

/* Día LIBRE trabajado ×1,5 (26/08/2026) */
.libre15-tag { font-size: 9px; font-weight: 800; letter-spacing: .4px; color: #92400e; background: #fde68a; border-radius: 4px; padding: 0 4px; margin-top: 2px; display: inline-block; }
@media print { .libre15-tag { border: 1px solid #92400e; } }

/* Absentismo (03/09/2026) */
.abs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.abs-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.abs-kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.abs-kpi-v { font-size: 24px; font-weight: 800; color: var(--brand); margin: 2px 0; }
.abs-kpi-e { font-size: 11.5px; color: var(--muted); }
.abs-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .abs-graficos { grid-template-columns: 1fr; } }
.abs-barras { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; height: 130px; }
.abs-barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.abs-barra { width: 100%; max-width: 34px; background: var(--brand); border-radius: 4px 4px 0 0; opacity: .85; }
.abs-barra-v { font-size: 9.5px; color: var(--muted); margin-bottom: 2px; }
.abs-barra-l { font-size: 9.5px; color: var(--muted); margin-top: 3px; }
.abs-hrow { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.abs-hlab { width: 110px; font-size: 11.5px; text-align: right; color: var(--muted); }
.abs-htrack { flex: 1; background: var(--bg); border-radius: 5px; height: 14px; overflow: hidden; }
.abs-hfill { display: block; height: 100%; background: var(--brand); opacity: .85; border-radius: 5px; }
.abs-hval { width: 52px; font-size: 11.5px; font-weight: 700; }
.abs-barra-nd { background: var(--line); }

/* Huecos de documento (adjuntar = marcado) · 05/09/2026 */
.doc-slot { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; flex-wrap: wrap; }
.doc-slot:last-of-type { border-bottom: 0; }
.doc-slot-est { width: 18px; text-align: center; font-weight: 800; }
.doc-slot-est.ok { color: #16a34a; }
.doc-slot-est.falta { color: var(--danger); }
.doc-slot-nom { min-width: 180px; }
.doc-slot-files { font-size: 12px; }

/* Avisos por TEMA (05/09/2026): un color fijo por asunto */
.al-tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; border-radius: 4px; padding: 1px 6px; color: #fff; vertical-align: 1px; margin-right: 4px; background: #64748b; }
.hr-alert.t-contrato { border-left-color: #dc2626; } .al-tag.t-contrato { background: #dc2626; }
.hr-alert.t-prueba { border-left-color: #7c3aed; } .al-tag.t-prueba { background: #7c3aed; }
.hr-alert.t-medico { border-left-color: #2563eb; } .al-tag.t-medico { background: #2563eb; }
.hr-alert.t-sustitucion { border-left-color: #ea580c; } .al-tag.t-sustitucion { background: #ea580c; }
.hr-alert.t-borrador { border-left-color: #64748b; } .al-tag.t-borrador { background: #64748b; }
.hr-alert.t-datos { border-left-color: #ca8a04; } .al-tag.t-datos { background: #ca8a04; }
.hr-alert.t-excedencia { border-left-color: #0d9488; } .al-tag.t-excedencia { background: #0d9488; }

/* NO VINO (06/09/2026) */
.shift.noshow { background: #fee2e2; color: #b91c1c; font-weight: 700; }

/* Calendario de vacaciones en cuadrícula mensual (08/09/2026) */
.vcm-bloque { margin: 0 0 18px; }
.vcm-bloque h4 { margin: 0 0 5px; font-size: 14px; color: var(--brand); }
table.vcm { border-collapse: collapse; table-layout: fixed; }
.vcm th, .vcm td { border: 1px solid var(--line); width: 23px; min-width: 23px; height: 21px; padding: 0; text-align: center; font-size: 10.5px; }
.vcm th.vcm-d { font-weight: 700; }
.vcm th.vcm-d span { display: block; font-weight: 400; font-size: 8.5px; color: var(--muted); }
.vcm .vcm-nom { width: var(--nomw, 265px); min-width: var(--nomw, 265px); max-width: var(--nomw, 265px); text-align: left; padding: 0 8px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.vcm .vcm-nom .linklike { font-size: 11.5px; font-weight: 600; }
.vcm .vcm-nom span { color: var(--muted); font-size: 10.5px; font-weight: 400; }
.vcm-finde { background: #f1f5f9; }
th.vcm-hoy { outline: 2px solid var(--brand); outline-offset: -2px; }
.vcm-total td { font-weight: 700; font-size: 9.5px; }