/* ════════════════════════════════════════════════════════════════
   Planifly · Redesign Soft Pro
   ────────────────────────────────────────────────────────────────
   Carga DESPUÉS de planifly.css. Redefine variables y aplica
   radios/sombras/tipografía del rediseño sin romper nada.
   Tokens originales en design package: project/tokens.jsx (DIRECTIONS.soft)
   ══════════════════════════════════════════════════════════════ */

/* ── Fonts (Inter oficial de marca) ── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* ── Soft Pro palette ────────────────────────────────────── */
  --bg: #f5f3ff; /* fondo cálido violeta muy suave */
  --bg2: #ffffff; /* surface principal */
  --bg3: #f8f5ff; /* surface alternativa */
  --surface: #f8f5ff;
  --surface2: #efe7fe;
  --border: #eae3fa;
  --border2: #d6ccef;

  --text: #1a1633;
  --muted: #9892b3;
  --muted2: #6e6688;

  --accent: #1d6cf0; /* azul Planifly se mantiene */
  --accent2: #5b8def;
  --accent-soft: #e5eefe;

  --secondary: #8b5cf6; /* violeta Soft Pro */
  --secondary-soft: #efe7fe;

  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --pink: #ec4899;
  --cyan: #06b6d4;

  /* Radios y sombras Soft Pro */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(124, 92, 246, 0.05);
  --shadow:
    0 2px 6px rgba(124, 92, 246, 0.08),
    0 16px 36px -12px rgba(124, 92, 246, 0.16);
  --shadow-lg: 0 20px 48px -12px rgba(124, 92, 246, 0.3);
  --grad-soft: linear-gradient(140deg, #e5eefe 0%, #efe7fe 50%, #ffe9f4 100%);

  /* Shift palette Soft Pro (tonos más cálidos sobre claro) */
  --s-m: #dcfce7;
  --s-mc: #166534; /* Mañana */
  --s-t1: #dbeafe;
  --s-t1c: #1d4ed8; /* Tarde */
  --s-n: #e0e7ff;
  --s-nc: #4338ca; /* Noche */
  --s-p: #fef3c7;
  --s-pc: #92400e; /* Partido */
  --s-r: #f3f4f6;
  --s-rc: #475569; /* Refuerzo */
  --s-l: #f4f4f5;
  --s-lc: #71717a; /* Libre */
  --s-v: #cffafe;
  --s-vc: #155e75; /* Vacaciones */
  --s-b: #fee2e2;
  --s-bc: #b91c1c; /* Baja */
  --s-e: #fae8ff;
  --s-ec: #86198f; /* Evento */

  /* Variables legacy del CSS original que apuntan a las nuevas */
  --s-t2: #dcfce7;
  --s-t2c: #166534;
  --s-t3: #dbeafe;
  --s-t3c: #1d4ed8;
  --s-t4: #dbeafe;
  --s-t4c: #1d4ed8;
  --s-ta: #fef3c7;
  --s-tac: #92400e;
  --s-ta1: #fef3c7;
  --s-ta1c: #92400e;
  --s-tb: #fee2e2;
  --s-tbc: #b91c1c;
  --s-te: #fae8ff;
  --s-tec: #86198f;
  --s-f: #fee2e2;
  --s-fc: #b91c1c;
}

/* ── Tipografía global ─────────────────────────────────────── */
body {
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--text);
}

/* Display alineado con Inter oficial */
h1,
h2,
h3,
.login-logo,
.display,
[class*="title-display"] {
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
}

/* Mono se mantiene IBM Plex Mono */
.mono,
code,
pre,
[class*="-mono"] {
  font-family: "IBM Plex Mono", monospace;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ── Login: nuevo wrap más cálido y con depth Soft Pro ─────── */
#login-screen,
#register-screen {
  background: var(--grad-soft) !important;
}
.login-wrap {
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: var(--bg2);
  padding: 44px 36px !important;
}
.login-wrap::before {
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.14) 0%,
    transparent 70%
  ) !important;
}
.login-logo {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.login-sub {
  color: var(--muted2) !important;
  font-family: "Inter", sans-serif !important;
}
.login-label {
  font-family: "Inter", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted2) !important;
}
.login-input {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: "Inter", sans-serif !important;
  padding: 12px 14px !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s !important;
}
.login-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.12) !important;
}
.login-btn {
  background: var(--accent) !important;
  border-radius: var(--r-md) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 13px !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 6px 16px -6px rgba(29, 108, 240, 0.45) !important;
  transition: all 0.15s ease !important;
}
.login-btn:hover:not(:disabled) {
  background: #1a5dd9 !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 10px 24px -8px rgba(29, 108, 240, 0.55) !important;
  transform: translateY(-1px);
}
.login-error {
  border-radius: var(--r-md) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: var(--red) !important;
}
.login-reg-link a {
  color: var(--accent) !important;
  font-weight: 600;
}

/* Overlays modales (forgot, new password, enterprise) */
#forgot-modal,
#new-password-modal,
#enterprise-modal {
  background: rgba(26, 22, 51, 0.4) !important;
  backdrop-filter: blur(4px);
}

/* ── Onboarding ────────────────────────────────────────────── */
#onboarding-screen {
  background: var(--grad-soft) !important;
}
.ob-wrap {
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: var(--bg2) !important;
}
.ob-title {
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
}
.ob-sub {
  color: var(--muted2) !important;
  font-family: "Inter", sans-serif !important;
}
.ob-dot {
  border-radius: var(--r-pill) !important;
  background: var(--surface2) !important;
}
.ob-dot.active {
  background: var(--accent) !important;
}
.ob-dot.done {
  background: var(--accent) !important;
  opacity: 0.5;
}
.ob-sector-btn {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  font-family: "Inter", sans-serif !important;
  transition: all 0.15s ease;
}
.ob-sector-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
}
.ob-sector-btn.selected {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  font-family: "Inter", sans-serif !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.12) !important;
}

/* ── Botones ──────────────────────────────────────────────── */
button,
.btn {
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.15s,
    border-color 0.15s;
}
button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Botón primario con micro-shadow accent */
.btn-primary,
.btn.primary,
button.primary,
button[type="submit"]:not(.ghost):not(.secondary) {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 4px 14px -4px rgba(29, 108, 240, 0.45);
}
.btn-primary:hover,
.btn.primary:hover {
  background: #1a5dd9 !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 8px 22px -6px rgba(29, 108, 240, 0.55);
}

/* Botón secundario (acento violeta Soft Pro) */
.btn-secondary,
.btn.secondary {
  background: var(--secondary) !important;
  color: #fff !important;
  border: 1px solid var(--secondary) !important;
}
.btn-secondary:hover {
  background: #7c4def !important;
}

/* Ghost / soft */
.btn-ghost,
.btn.ghost {
  background: transparent !important;
  color: var(--muted2) !important;
  border: 1px solid var(--border2) !important;
}
.btn-ghost:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* ── Cards / paneles ──────────────────────────────────────── */
.card,
.panel,
.module,
.box,
[class*="-card"],
[class*="-panel"] {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg2);
  box-shadow: var(--shadow-sm);
}

/* ── Pills / chips ────────────────────────────────────────── */
.pill,
.chip,
.badge,
[class*="-pill"],
[class*="-chip"],
[class*="-badge"] {
  border-radius: var(--r-pill);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Sidebar admin ────────────────────────────────────────── */
.sidebar,
.admin-sidebar,
#sidebar,
[class*="sidebar"] {
  background: var(--surface2) !important;
  border-right: 1px solid var(--border) !important;
}

.sidebar a,
.sidebar button,
.sidebar .nav-item,
.admin-sidebar a,
.admin-sidebar button {
  border-radius: var(--r-md);
  transition:
    background 0.15s,
    color 0.15s;
}
.sidebar a:hover,
.sidebar button:hover,
.sidebar a.active,
.sidebar .active,
.admin-sidebar a:hover,
.admin-sidebar a.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ── Header / topbar ──────────────────────────────────────── */
.header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(124, 92, 246, 0.04) !important;
  height: 60px !important;
  padding: 0 24px !important;
}
.logo {
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 19px !important;
}
.logo-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.company-badge {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  font-family: "IBM Plex Mono", monospace !important;
  color: var(--muted2) !important;
  padding: 3px 12px 3px 4px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.company-logo-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.company-logo-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Tabs en el header ────────────────────────────────────── */
.header .tabs {
  background: var(--surface2);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 0 !important;
}
.header .tab {
  border-radius: var(--r-sm) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  color: var(--muted2) !important;
  transition: all 0.15s ease !important;
}
.header .tab:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: var(--text) !important;
}
.header .tab.active {
  background: var(--bg2) !important;
  color: var(--text) !important;
  box-shadow:
    0 1px 2px rgba(124, 92, 246, 0.06),
    0 4px 12px -4px rgba(124, 92, 246, 0.1) !important;
}
.header .tab.tab-admin {
  color: var(--accent) !important;
}
.header .tab.tab-admin.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* User chip + avatar */
.user-chip {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  padding: 5px 12px 5px 5px !important;
}
.user-avatar {
  border-radius: var(--r-pill) !important;
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--secondary)
  ) !important;
  font-family: "Inter", sans-serif !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}
.logout-btn {
  border-radius: var(--r-sm) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  transition:
    color 0.15s,
    background 0.15s !important;
}
.logout-btn:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: var(--red) !important;
}

/* Role switcher (admin/worker dual) */
#role-switcher {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
}
#role-switcher button {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--r-pill) !important;
}

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 24px !important;
}
.toolbar-label {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--muted2) !important;
}
.search-input {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: "Inter", sans-serif !important;
  padding: 8px 14px !important;
  width: 220px !important;
  font-size: 13px !important;
}
.search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.1) !important;
}
.filter-btn {
  border-radius: var(--r-md) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  padding: 6px 12px !important;
  transition: all 0.15s ease !important;
}
.filter-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.filter-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
#tb-general {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
#tb-general #group-filter-btns {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}
.pfr-team-filter {
  position: relative;
}
.pfr-team-filter-btn {
  height: 34px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.pfr-team-filter-btn:hover,
.pfr-team-filter-btn.is-active,
.pfr-team-filter.is-open .pfr-team-filter-btn {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pfr-team-filter-ico {
  font-size: 13px;
  line-height: 1;
}
.pfr-team-filter-label {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfr-team-filter-chev {
  color: var(--muted2);
  font-size: 13px;
  line-height: 1;
}
.pfr-team-filter-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: 286px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg2);
  box-shadow: var(--shadow-lg);
  display: none;
}
.pfr-team-filter.is-open .pfr-team-filter-pop {
  display: block;
}
.pfr-team-filter-search {
  width: 100% !important;
  height: 34px;
  padding: 0 10px !important;
  font-size: 12px !important;
  margin-bottom: 8px;
}
.pfr-team-filter-list {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}
.pfr-team-filter-row {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--text);
}
.pfr-team-filter-row:hover {
  background: var(--surface2);
}
.pfr-team-filter-row input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}
.pfr-team-filter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pfr-team-filter-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface2);
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.pfr-team-filter-foot {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.pfr-team-filter-foot button {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg2);
  color: var(--text);
  padding: 0 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pfr-team-filter-foot button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.month-nav button {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  width: 32px !important;
  height: 32px !important;
  transition: all 0.15s ease !important;
}
.month-nav button:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.month-title {
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  letter-spacing: 0.02em !important;
}
.action-btn {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  color: var(--muted2) !important;
  transition: all 0.15s ease !important;
}
.action-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ── Sidebar admin ────────────────────────────────────────── */
.admin-layout {
  background: var(--bg) !important;
}
.admin-sidebar {
  background: var(--surface2) !important;
  border-right: 1px solid var(--border) !important;
  padding: 18px 12px !important;
  width: 224px !important;
}
.admin-sidebar-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: 0.08em !important;
  font-size: 10px !important;
  padding: 0 10px 14px !important;
}
.admin-nav-btn {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--muted2) !important;
  padding: 10px 12px !important;
  border-radius: var(--r-md) !important;
  border-left: none !important;
  margin-bottom: 2px;
  transition: all 0.15s ease !important;
}
.admin-nav-btn:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.admin-nav-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-left: none !important;
  box-shadow: 0 1px 2px rgba(29, 108, 240, 0.08);
}
.admin-content {
  padding: 24px !important;
}
.admin-nav-btn.drag-over {
  background: rgba(29, 108, 240, 0.15) !important;
  border-radius: var(--r-md) !important;
}

/* a-card (cards admin) con look Soft Pro */
.a-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg2);
  box-shadow: var(--shadow-sm);
}
/* En el panel de horas la a-card wrapper es transparente */
#admin-horas .a-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Tabla General Soft Pro ─────────────────────────────── */
.table-wrap {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2);
  box-shadow: var(--shadow-sm);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg2);
}

/* Cabecera del calendario con look limpio */
thead th {
  background: var(--surface) !important;
  color: var(--muted2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  padding: 10px 5px !important;
}
thead th.name-col {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  font-family: "Inter", sans-serif !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}
thead th.day-sun {
  background: var(--s-b) !important;
  color: var(--s-bc) !important;
}
thead th.day-sat {
  color: var(--amber) !important;
  background: var(--s-p) !important;
}
thead th.day-today {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  font-weight: 700 !important;
}
thead th.week-sep {
  border-left: 2px solid var(--border2) !important;
}

/* Filas */
tbody tr {
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.12s ease !important;
}
tbody tr:hover {
  background: var(--surface2) !important;
}
tbody tr:hover td.name-cell {
  background: var(--surface2) !important;
}

td.name-cell {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
  padding: 8px 16px !important;
}
td.col-sun {
  background: rgba(239, 68, 68, 0.04) !important;
}

.person-name {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.person-name:hover {
  color: var(--accent) !important;
}
.person-user {
  font-family: "IBM Plex Mono", monospace !important;
  color: var(--muted) !important;
}
.person-contract {
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  font-weight: 600;
  margin-left: 2px;
}

/* Section rows (grupos) más suaves */
.section-row td {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  padding: 9px 16px !important;
  border-top: 1px solid var(--border) !important;
}
.sec-g1 td {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-top-color: rgba(29, 108, 240, 0.18) !important;
}
.sec-g2 td {
  background: var(--s-m) !important;
  color: var(--s-mc) !important;
  border-top-color: rgba(22, 101, 52, 0.15) !important;
}
.sec-g3 td {
  background: var(--secondary-soft) !important;
  color: var(--secondary) !important;
  border-top-color: rgba(139, 92, 246, 0.18) !important;
}
.sec-g4 td {
  background: var(--s-p) !important;
  color: var(--s-pc) !important;
  border-top-color: rgba(146, 64, 14, 0.15) !important;
}
.sec-g5 td {
  background: var(--s-b) !important;
  color: var(--s-bc) !important;
}
.sec-g6 td {
  background: var(--s-v) !important;
  color: var(--s-vc) !important;
}
.sec-g7 td {
  background: var(--s-e) !important;
  color: var(--s-ec) !important;
}
.sec-g8 td {
  background: var(--s-m) !important;
  color: var(--s-mc) !important;
}

/* Shift badges Soft Pro: pastel, mini-radius, mono font */
.shift {
  border-radius: var(--r-sm) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  height: 22px !important;
  min-width: 32px !important;
  padding: 0 6px !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.15s !important;
}
.shift:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 4px 12px -4px rgba(124, 92, 246, 0.3) !important;
  filter: brightness(0.96);
}
.shift.today-cell {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 4px var(--accent-soft) !important;
}
.shift-has-note::after {
  background: var(--secondary) !important;
}

/* Print header (cuando se imprime) */
.print-header-logo {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* General draft badge (borrador no visible para trabajadores) */
#general-draft-badge {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--amber) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: var(--r-pill) !important;
  font-family: "IBM Plex Mono", monospace !important;
}

/* ── Modals / popovers ────────────────────────────────────── */
.modal,
.popover,
.dialog,
[role="dialog"],
.overlay-content,
.modal-box,
.modal-overlay > div {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
}

.modal-overlay {
  background: rgba(26, 22, 51, 0.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.modal-box {
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.modal-backdrop,
[class*="-backdrop"] {
  background: rgba(26, 22, 51, 0.4) !important;
  backdrop-filter: blur(4px);
}

.modal-drag-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
.modal-drag-bar-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
}

/* ── Toasts ───────────────────────────────────────────────── */
.toast {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  font-family: "Inter", sans-serif !important;
  padding: 12px 18px !important;
  z-index: 100000 !important; /* por encima de overlays/modales */
}
.toast.ok {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: var(--green) !important;
}
.toast.err {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: var(--red) !important;
}

/* ── Fichaje ──────────────────────────────────────────────── */
.fichaje-header {
  background: var(--bg2) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px !important;
}
.fichaje-header-title {
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0 !important;
}
.fichaje-clock {
  font-family: "IBM Plex Mono", monospace !important;
  letter-spacing: 0.02em !important;
}
.fichaje-clock-tabs {
  background: var(--surface2) !important;
  border-radius: var(--r-md) !important;
  padding: 4px !important;
}
.fichaje-clock-tabs button {
  border-radius: var(--r-sm) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  border: none !important;
}
.fichaje-clock-tabs button.active {
  background: var(--bg2) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text) !important;
}
.fichaje-worker-card {
  background: var(--bg2) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.fichaje-estado-icono {
  border-radius: 50% !important;
}
.fichaje-estado-texto {
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0 !important;
}
.fichaje-timer-live {
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.fichaje-btn {
  border-radius: var(--r-md) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 6px 16px -6px rgba(124, 92, 246, 0.3) !important;
}
.fichaje-resumen-hoy {
  background: var(--bg2) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
}
.fichaje-resumen-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
}
.fichaje-table {
  background: var(--bg2) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}
.fichaje-table th {
  background: var(--surface) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  color: var(--muted2) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
.fichaje-table td {
  border-bottom: 1px solid var(--border) !important;
  font-family: "Inter", sans-serif !important;
}
.fichaje-table tr:hover td {
  background: var(--surface2) !important;
}

/* ── Tablas admin (adm-table) ─────────────────────────────── */
.adm-table {
  background: var(--bg2) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}
.adm-table th {
  background: var(--surface) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  color: var(--muted2) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border) !important;
}
.adm-table td {
  font-family: "Inter", sans-serif !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border) !important;
}
.adm-table tr:hover td {
  background: var(--surface2) !important;
}

/* ── A-card title ─────────────────────────────────────────── */
.a-card-title {
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

/* ── Tabs / segmented controls ────────────────────────────── */
.tabs,
.segmented,
[role="tablist"] {
  background: var(--surface2);
  border-radius: var(--r-md);
  padding: 4px;
  display: inline-flex;
  gap: 2px;
}
.tabs button,
.tabs .tab,
.segmented button,
[role="tab"] {
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-weight: 600;
  color: var(--muted2);
}
.tabs button.active,
[role="tab"][aria-selected="true"],
.segmented button.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ── Avatares ─────────────────────────────────────────────── */
.avatar,
[class*="-avatar"] {
  border-radius: 32%;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

/* ── Scrollable areas con bordes redondeados ──────────────── */
.scroll-wrap,
.table-wrap,
[class*="-scroll"] {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg2);
}

/* ── Estados vacíos / loading ─────────────────────────────── */
.empty-state,
[class*="empty-"] {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty-state h3,
[class*="empty-"] h3 {
  color: var(--text);
  margin-bottom: 8px;
}

/* ── Skeleton loader (shimmer Soft Pro) ───────────────────── */
.skeleton,
[class*="skeleton"] {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: pf-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes pf-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── Micro-animation: subtle entrance for modals/cards ────── */
@keyframes pf-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal,
.popover,
.dialog {
  animation: pf-rise 0.22s ease-out both;
}

/* ══════════════════════════════════════════════════════════ */
/* PFR · features nuevas (drag&drop, semana/mes, conflictos,    */
/* strip cobertura)                                             */
/* ══════════════════════════════════════════════════════════ */

/* Toolbar PFR insertada en #tb-general */
#pfr-toolbar-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Hide column / cell (vista semana) */
.pfr-day-hide {
  display: none !important;
}

/* Conflict marks */
td.pfr-has-conflict {
  position: relative;
}
.pfr-conflict-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow:
    0 0 0 2px var(--bg2),
    0 0 8px rgba(239, 68, 68, 0.4);
  pointer-events: auto;
  cursor: help;
  z-index: 4;
}

/* Cobertura como FILA del thead — comparte columnas con la tabla
   principal, alineación 100% automática. */
tr.pfr-cov-row th {
  padding: 4px 2px !important;
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
}
tr.pfr-cov-row th.pfr-cov-th-label {
  text-align: left !important;
  padding: 4px 10px !important;
  background: var(--bg2) !important;
  position: sticky;
  left: 0;
  z-index: 21;
}
.pfr-cov-legend {
  display: inline-flex;
  gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--muted2);
  white-space: nowrap;
  font-weight: 500;
}
.pfr-cov-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pfr-cov-th {
  padding: 4px 2px !important;
  text-align: center;
}
.pfr-cov-bar {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: var(--surface2);
  margin: 0 2px;
}
.pfr-cov-bar.pfr-cov-low {
  background: var(--red);
}
.pfr-cov-bar.pfr-cov-mid {
  background: var(--amber);
}
.pfr-cov-bar.pfr-cov-high {
  background: var(--green);
}
.pfr-cov-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.pfr-cov-dot.pfr-cov-low {
  background: var(--red);
}
.pfr-cov-dot.pfr-cov-mid {
  background: var(--amber);
}
.pfr-cov-dot.pfr-cov-high {
  background: var(--green);
}

/* Toolbar segmentado mes/semana */
.pfr-segmented {
  display: inline-flex;
  background: var(--surface2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 0;
}
.pfr-segmented button {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.12s ease;
}
.pfr-segmented button:hover {
  color: var(--text);
}
.pfr-segmented button.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* Botones toolbar activos (cobertura/conflictos) */
.action-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ── Modal: Perfil de trabajador ─────────────────────────── */
#pfr-prof-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: pf-rise 0.22s ease-out;
}
.pfr-prof-modal {
  position: relative;
  width: min(960px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--bg2);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: pf-rise 0.25s ease-out;
}
/* Barra de navegación de la ficha (◄ ► × en la esquina superior derecha) */
.pfr-prof-nav {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.pfr-prof-navbtn,
.pfr-prof-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface2);
  color: var(--muted2);
  border-radius: var(--r-md);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfr-prof-navbtn:hover {
  background: var(--accent);
  color: #fff;
}
.pfr-prof-close:hover {
  background: var(--red);
  color: #fff;
}
.pfr-prof-body {
  padding: 28px 32px 24px;
}

/* Hero */
.pfr-prof-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-right: 40px;
}
.pfr-prof-avatar {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 28%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.pfr-prof-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pfr-prof-hero-main {
  flex: 1;
  min-width: 0;
}
.pfr-prof-hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pfr-prof-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.1;
}
.pfr-prof-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted2);
  margin-bottom: 6px;
}
.pfr-prof-mono {
  font-family: "IBM Plex Mono", monospace;
}
.pfr-prof-sep {
  color: var(--border2);
}
.pfr-prof-contacts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

/* Pills */
.pfr-prof-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.pfr-prof-pill-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.25);
}
.pfr-prof-pill-approved {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.25);
}
.pfr-prof-pill-pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.3);
}
.pfr-prof-pill-denied {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Stats strip */
.pfr-prof-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: 22px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 4px;
}
@media (max-width: 1100px) {
  .pfr-prof-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .pfr-prof-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pfr-prof-stat {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.pfr-prof-stat:last-child {
  border-right: none;
}
.pfr-prof-stat-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}
.pfr-prof-stat-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.pfr-prof-stat-value.pfr-prof-stat-warn {
  color: var(--amber);
}
.pfr-prof-stat-value.pfr-prof-stat-ok {
  color: var(--green);
}
.pfr-prof-stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* Tabs internas */
.pfr-prof-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.pfr-prof-tab {
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.pfr-prof-tab:hover {
  color: var(--text);
}
.pfr-prof-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}

/* Tab body */
.pfr-prof-tab-body {
  min-height: 200px;
}
.pfr-prof-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pfr-prof-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.pfr-prof-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 12px;
}
.pfr-prof-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 13px;
}

/* Próximo turno */
.pfr-prof-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.pfr-prof-next-day {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--text);
}
.pfr-prof-next-shift {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: var(--r-md);
}
.pfr-prof-next-time {
  color: var(--muted2);
  font-size: 12px;
}

/* Listas */
.pfr-prof-list-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pfr-prof-list-row:last-child {
  border-bottom: none;
}
.pfr-prof-list-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: var(--surface2);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.pfr-prof-list-main {
  flex: 1;
  min-width: 0;
}
.pfr-prof-list-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.pfr-prof-list-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

/* Mini calendario */
.pfr-prof-mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.pfr-prof-mini-day {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
}
.pfr-prof-mini-day.sun {
  background: rgba(239, 68, 68, 0.04);
}
.pfr-prof-mini-num {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--muted2);
  font-size: 10px;
  margin-bottom: 4px;
}
.pfr-prof-mini-code {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

/* Tabla horas */
.pfr-prof-hours-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pfr-prof-hours-table th {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.pfr-prof-hours-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.pfr-prof-hours-table tr.pfr-prof-totals td {
  background: var(--accent-soft);
  border-bottom: none;
  font-weight: 700;
}
.pfr-prof-pos {
  color: var(--green);
}
.pfr-prof-neg {
  color: var(--red);
}
.pfr-prof-ok {
  color: var(--muted2);
}

/* ── Reportes ─────────────────────────────────────────────── */
.pfr-rep-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pfr-rep-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0;
  color: var(--text);
}
.pfr-rep-sub {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 2px;
}
.pfr-rep-tabs {
  display: flex;
  gap: 0;
}
.pfr-rep-tab {
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -13px;
  transition: all 0.15s;
}
.pfr-rep-tab:hover {
  color: var(--text);
}
.pfr-rep-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}

.pfr-rep-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
}

/* KPIs */
.pfr-rep-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.pfr-rep-kpi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.pfr-rep-kpi-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}
.pfr-rep-kpi-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
}
.pfr-rep-kpi-value.pos {
  color: var(--green);
}
.pfr-rep-kpi-value.neg {
  color: var(--red);
}
.pfr-rep-kpi-value.warn {
  color: var(--amber);
}
.pfr-rep-kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Grid 2 col */
.pfr-rep-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pfr-rep-card {
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  padding: 20px 4px;
  box-shadow: none;
  margin-bottom: 16px;
}
.pfr-rep-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 14px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Bar chart top workers */
.pfr-rep-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.pfr-rep-bar-name {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfr-rep-bar-track {
  height: 10px;
  background: var(--surface2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.pfr-rep-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  border-radius: var(--r-pill);
}
.pfr-rep-bar-value {
  text-align: right;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 600;
}

/* Absence summary */
.pfr-rep-abs-totals {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted2);
  flex-wrap: wrap;
}
.pfr-rep-abs-totals > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pfr-rep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.pfr-rep-abs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pfr-rep-abs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.pfr-rep-abs-row:last-child {
  border-bottom: none;
}
.pfr-rep-abs-pills {
  display: flex;
  gap: 4px;
}

/* Tabla reportes */
.pfr-rep-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pfr-rep-table th {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  text-align: left;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pfr-rep-table th.num,
.pfr-rep-table td.num {
  text-align: right;
}
.pfr-rep-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.pfr-rep-table tbody tr:hover td {
  background: var(--surface2);
}

/* Cobertura por día */
.pfr-rep-cov {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.pfr-rep-cov-day {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 6px;
  text-align: center;
}
.pfr-rep-cov-day.sun {
  background: rgba(239, 68, 68, 0.1);
}
.pfr-rep-cov-num {
  font-size: 10px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
}
.pfr-rep-cov-val {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
}
.pfr-rep-cov-low .pfr-rep-cov-val {
  color: var(--red);
}
.pfr-rep-cov-mid .pfr-rep-cov-val {
  color: var(--amber);
}
.pfr-rep-cov-high .pfr-rep-cov-val {
  color: var(--green);
}

/* ── Notificaciones ───────────────────────────────────────── */
.pfr-notif-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pfr-notif-icon {
  position: relative;
  width: 40px;
  height: 40px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.pfr-notif-icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg2);
}
.pfr-notif-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.1;
}
.pfr-notif-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
}

.pfr-notif-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pfr-notif-filter {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.pfr-notif-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pfr-notif-filter.active {
  background: var(--text);
  color: var(--bg2);
  border-color: var(--text);
}
.pfr-notif-filter-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.pfr-notif-filter.active .pfr-notif-filter-count {
  background: rgba(255, 255, 255, 0.2);
}

.pfr-notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pfr-notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all 0.15s;
}
.pfr-notif-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pfr-notif-item.unread {
  border-left: 3px solid var(--accent);
  background: var(--bg2);
}
.pfr-notif-item.pfr-notif-high {
  border-left-color: var(--red);
}
.pfr-notif-cat {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.pfr-notif-cat-accent {
  background: var(--accent-soft);
  color: var(--accent);
}
.pfr-notif-cat-warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
}
.pfr-notif-cat-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}
.pfr-notif-cat-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
}
.pfr-notif-cat-neutral {
  background: var(--surface2);
  color: var(--muted2);
}

.pfr-notif-body {
  flex: 1;
  min-width: 0;
}
.pfr-notif-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pfr-notif-cat-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pfr-notif-worker {
  color: var(--muted2);
}
.pfr-notif-time {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
}
.pfr-notif-item-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.pfr-notif-detail {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.4;
}

.pfr-notif-actions {
  display: flex;
  gap: 4px;
  align-self: flex-start;
}
.pfr-notif-btn {
  background: var(--surface2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.15s;
}
.pfr-notif-btn:hover {
  background: var(--accent);
  color: #fff;
}

.pfr-notif-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
}
.pfr-notif-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.pfr-notif-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}
.pfr-notif-empty-sub {
  font-size: 13px;
  color: var(--muted2);
}

/* Badge en sidebar admin */
.pfr-notif-sidebar-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

/* ── Drag & drop de turnos (editor admin) ─────────────────── */
.pfr-dnd-cell {
  position: relative;
}
.pfr-dnd-source {
  opacity: 0.4;
}
.pfr-dnd-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft) !important;
}
.pfr-dnd-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background:
    radial-gradient(circle 1px at 25% 25%, var(--muted) 100%, transparent 0),
    radial-gradient(circle 1px at 75% 25%, var(--muted) 100%, transparent 0),
    radial-gradient(circle 1px at 25% 75%, var(--muted) 100%, transparent 0),
    radial-gradient(circle 1px at 75% 75%, var(--muted) 100%, transparent 0);
  cursor: grab;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    background-color 0.12s ease;
  z-index: 4;
}
.pfr-dnd-cell:hover > .pfr-dnd-handle {
  opacity: 0.85;
}
.pfr-dnd-handle:hover {
  opacity: 1 !important;
  background-color: var(--accent-soft);
}
.pfr-dnd-handle:active {
  cursor: grabbing;
}

/* ════════════════════════════════════════════════════════════ */
/* Mobile · adaptaciones para admin (perfil, reportes, notif)     */
/* ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Sidebar admin colapsable: en móvil ocupa 100% arriba */
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px !important;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .admin-sidebar-title {
    display: none;
  }
  .admin-nav-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .admin-content {
    padding: 16px !important;
  }

  /* Header en móvil — tabs hacen scroll horizontal */
  .header {
    height: auto !important;
    padding: 8px 12px !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .header .tabs {
    overflow-x: auto;
    flex: 1 1 100%;
    order: 5;
    padding: 3px;
  }
  .header .tab {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .company-badge {
    display: none;
  }

  /* Modal perfil trabajador */
  .pfr-prof-modal {
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .pfr-prof-body {
    padding: 18px 16px 16px !important;
  }
  .pfr-prof-hero {
    flex-direction: column;
    gap: 12px;
    padding-right: 32px !important;
  }
  .pfr-prof-avatar {
    width: 64px !important;
    height: 64px !important;
    font-size: 22px !important;
    flex: 0 0 64px !important;
  }
  .pfr-prof-name {
    font-size: 22px !important;
  }
  .pfr-prof-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .pfr-prof-stat {
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border);
  }
  .pfr-prof-stat:nth-child(2n) {
    border-right: none !important;
  }
  .pfr-prof-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .pfr-prof-stat-value {
    font-size: 20px !important;
  }
  .pfr-prof-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .pfr-prof-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .pfr-prof-tab {
    white-space: nowrap;
    padding: 8px 10px !important;
  }
  .pfr-prof-mini-cal {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }
  .pfr-prof-mini-day {
    padding: 4px 2px !important;
  }
  .pfr-prof-hours-table th,
  .pfr-prof-hours-table td {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  /* Reportes */
  .pfr-rep-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .pfr-rep-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .pfr-rep-tab {
    white-space: nowrap;
    padding: 8px 10px !important;
  }
  .pfr-rep-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  .pfr-rep-kpi {
    padding: 14px !important;
  }
  .pfr-rep-kpi-value {
    font-size: 22px !important;
  }
  .pfr-rep-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .pfr-rep-bar-row {
    grid-template-columns: 100px 1fr 50px !important;
    gap: 8px !important;
  }
  .pfr-rep-bar-name {
    font-size: 12px !important;
  }
  .pfr-rep-cov {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
  }
  .pfr-rep-cov-day {
    padding: 6px 2px !important;
  }
  .pfr-rep-cov-val {
    font-size: 14px !important;
  }

  /* Notificaciones */
  .pfr-notif-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .pfr-notif-title {
    font-size: 18px !important;
  }
  .pfr-notif-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    margin: 0 -16px 12px;
    padding: 0 16px;
  }
  .pfr-notif-filter {
    white-space: nowrap;
  }
  .pfr-notif-item {
    padding: 12px 14px !important;
  }
  .pfr-notif-cat {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Toolbar de la vista General — los botones de redesign en columna */
  #pfr-toolbar-block {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  /* Strip cobertura: ocultar en móvil (no entra bien) */
  #pfr-coverage-strip {
    display: none !important;
  }

  /* Tablas grandes — scroll horizontal con sombra */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════════════════════════════════════════════════════════ */
/* Modo oscuro · Soft Pro Dark                                    */
/* Activación: <html data-theme="dark">                           */
/* ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg: #14111e; /* fondo violeta muy oscuro */
  --bg2: #1c1828; /* surface principal */
  --bg3: #221e32; /* surface alt */
  --surface: #221e32;
  --surface2: #2a2438;
  --border: #2e2840;
  --border2: #3a3354;

  --text: #ece7fa;
  --muted: #6e6688;
  --muted2: #a29bbe;

  --accent: #5b8def; /* azul más claro para contraste */
  --accent2: #7ca8f5;
  --accent-soft: rgba(91, 141, 239, 0.15);

  --secondary: #a78bfa;
  --secondary-soft: rgba(167, 139, 250, 0.18);

  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --pink: #f472b6;
  --cyan: #22d3ee;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:
    0 2px 6px rgba(0, 0, 0, 0.45), 0 16px 36px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.65);
  --grad-soft: linear-gradient(140deg, #1c1828 0%, #221e32 50%, #2a2438 100%);

  /* Shift palette dark — tonos más profundos y saturados */
  --s-m: #0f2e1e;
  --s-mc: #6ee7b7;
  --s-t1: #0f1f38;
  --s-t1c: #93c5fd;
  --s-n: #1f1640;
  --s-nc: #c4b5fd;
  --s-p: #2e1e0e;
  --s-pc: #fcd34d;
  --s-r: #1e1e20;
  --s-rc: #94a3b8;
  --s-l: #1a1a1f;
  --s-lc: #6b7280;
  --s-v: #0e2530;
  --s-vc: #67e8f9;
  --s-b: #2e1818;
  --s-bc: #fca5a5;
  --s-e: #2a1230;
  --s-ec: #f0abfc;

  /* Legacy aliases */
  --s-t2: #0f2e1e;
  --s-t2c: #6ee7b7;
  --s-t3: #0f1f38;
  --s-t3c: #93c5fd;
  --s-t4: #0f1f38;
  --s-t4c: #93c5fd;
  --s-ta: #2e1e0e;
  --s-tac: #fcd34d;
  --s-ta1: #2e1e0e;
  --s-ta1c: #fcd34d;
  --s-tb: #2e1818;
  --s-tbc: #fca5a5;
  --s-te: #2a1230;
  --s-tec: #f0abfc;
  --s-f: #2e1818;
  --s-fc: #fca5a5;
}

/* Ajustes específicos en dark — superficies con efecto cristal */
:root[data-theme="dark"] body {
  color: var(--text);
  background: var(--bg);
}
:root[data-theme="dark"] .header {
  background: rgba(28, 24, 40, 0.85) !important;
}
:root[data-theme="dark"] #login-screen,
:root[data-theme="dark"] #register-screen,
:root[data-theme="dark"] #onboarding-screen {
  background: var(--grad-soft) !important;
}
:root[data-theme="dark"] .login-wrap::before {
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.18) 0%,
    transparent 70%
  ) !important;
}
:root[data-theme="dark"] tbody tr:hover {
  background: var(--surface2) !important;
}
:root[data-theme="dark"] tbody tr:hover td.name-cell {
  background: var(--surface2) !important;
}
:root[data-theme="dark"] td.col-sun {
  background: rgba(248, 113, 113, 0.08) !important;
}
:root[data-theme="dark"] thead th.day-sun {
  background: rgba(248, 113, 113, 0.16) !important;
  color: #fca5a5 !important;
}
:root[data-theme="dark"] thead th.day-today {
  background: var(--accent-soft) !important;
}
:root[data-theme="dark"] .pfr-cov-low {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #fca5a5 !important;
}
:root[data-theme="dark"] .pfr-cov-mid {
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fcd34d !important;
}
:root[data-theme="dark"] .pfr-cov-high {
  background: rgba(52, 211, 153, 0.2) !important;
  color: #6ee7b7 !important;
}

/* Toggle button (icono ☼/☾) */
.pfr-theme-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface2);
  color: var(--muted2);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfr-theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ── Solicitudes de vacaciones (trabajador) ──────────────── */
#pfr-vacreq-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.pfr-vacreq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.pfr-vacreq-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text);
}
.pfr-vacreq-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}
.pfr-vacreq-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
  font-size: 13px;
}
.pfr-vacreq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pfr-vacreq-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all 0.15s;
}
.pfr-vacreq-item:hover {
  border-color: var(--border2);
}
.pfr-vacreq-status-pending {
  border-left: 3px solid var(--amber);
}
.pfr-vacreq-status-approved {
  border-left: 3px solid var(--green);
  background: rgba(16, 185, 129, 0.04);
}
.pfr-vacreq-status-denied {
  border-left: 3px solid var(--red);
  background: rgba(239, 68, 68, 0.04);
}
.pfr-vacreq-status-cancelled {
  opacity: 0.6;
}

.pfr-vacreq-item-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border-radius: var(--r-md);
  font-size: 16px;
}
.pfr-vacreq-item-main {
  flex: 1;
  min-width: 0;
}
.pfr-vacreq-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.pfr-vacreq-item-type {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.pfr-vacreq-item-status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
}
.pfr-vacreq-status-pending .pfr-vacreq-item-status {
  color: var(--amber);
}
.pfr-vacreq-status-approved .pfr-vacreq-item-status {
  color: var(--green);
}
.pfr-vacreq-status-denied .pfr-vacreq-item-status {
  color: var(--red);
}
.pfr-vacreq-item-dates {
  font-size: 13px;
  color: var(--muted2);
  margin-bottom: 4px;
}
.pfr-vacreq-item-note,
.pfr-vacreq-item-decision {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.pfr-vacreq-item-decision {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(29, 108, 240, 0.2);
}
.pfr-vacreq-item-decided {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  font-family: "IBM Plex Mono", monospace;
}
.pfr-vacreq-cancel-btn {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg2);
  color: var(--muted2);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.pfr-vacreq-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Modal */
#pfr-vacreq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: pf-rise 0.22s ease-out;
}
.pfr-vacreq-modal {
  width: min(480px, 92vw);
  background: var(--bg2);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 24px;
  position: relative;
  animation: pf-rise 0.25s ease-out;
}
.pfr-vacreq-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface2);
  color: var(--muted2);
  border-radius: var(--r-md);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.pfr-vacreq-close:hover {
  background: var(--red);
  color: #fff;
}
.pfr-vacreq-modal-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  margin-bottom: 18px;
  padding-right: 30px;
}
.pfr-vacreq-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pfr-vacreq-label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 10px 0 4px;
}
.pfr-vacreq-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.pfr-vacreq-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.1);
}
textarea.pfr-vacreq-input {
  resize: vertical;
  min-height: 60px;
}
.pfr-vacreq-row {
  display: flex;
  gap: 10px;
}
.pfr-vacreq-summary {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted2);
  margin: 6px 0 8px;
  padding: 6px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  text-align: center;
}
.pfr-vacreq-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  margin-top: 10px;
}
.pfr-vacreq-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

/* ── Solicitudes admin ──────────────────────────────────── */
.pfr-vacreq-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pfr-vacreq-admin-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pfr-vacreq-admin-filter {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.pfr-vacreq-admin-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pfr-vacreq-admin-filter.active {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.pfr-vacreq-admin-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.pfr-vacreq-admin-filter.active .pfr-vacreq-admin-count {
  background: rgba(255, 255, 255, 0.2);
}

.pfr-vacreq-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pfr-vacreq-admin-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.pfr-vacreq-admin-item.pfr-vacreq-status-pending {
  border-left: 3px solid var(--amber);
}
.pfr-vacreq-admin-item.pfr-vacreq-status-approved {
  border-left: 3px solid var(--green);
}
.pfr-vacreq-admin-item.pfr-vacreq-status-denied {
  border-left: 3px solid var(--red);
}
.pfr-vacreq-admin-item.pfr-vacreq-status-cancelled {
  opacity: 0.6;
}

.pfr-vacreq-admin-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border-radius: var(--r-md);
  font-size: 18px;
}
.pfr-vacreq-admin-main {
  flex: 1;
  min-width: 0;
}
.pfr-vacreq-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pfr-vacreq-admin-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
}
.pfr-vacreq-admin-type {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
}
.pfr-vacreq-admin-time {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
.pfr-vacreq-admin-dates {
  font-size: 13px;
  color: var(--text);
  margin: 4px 0;
}
.pfr-vacreq-admin-note,
.pfr-vacreq-admin-decision {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.pfr-vacreq-admin-decision {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(29, 108, 240, 0.2);
}
.pfr-vacreq-admin-decided {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  font-family: "IBM Plex Mono", monospace;
}
.pfr-vacreq-admin-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
}
.pfr-vacreq-admin-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  min-width: 90px;
}
.pfr-vacreq-admin-approve {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.pfr-vacreq-admin-approve:hover {
  background: #0e9f6e;
  border-color: #0e9f6e;
  transform: translateY(-1px);
}
.pfr-vacreq-admin-deny {
  background: var(--bg2);
  color: var(--muted2);
}
.pfr-vacreq-admin-deny:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}
.pfr-vacreq-admin-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
}
.pfr-vacreq-admin-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}
.pfr-vacreq-admin-empty-sub {
  font-size: 13px;
  color: var(--muted2);
}
.pfr-vacreq-sidebar-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

/* ── Solicitudes de cambio (modify/cancel) ────────────────── */
.pfr-vacreq-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 22px 0 10px;
}
.pfr-vacreq-subtitle:empty {
  display: none;
}

.pfr-vacreq-item-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
}
.pfr-vacreq-modify-btn {
  color: var(--accent) !important;
  border-color: rgba(29, 108, 240, 0.3) !important;
}
.pfr-vacreq-modify-btn:hover {
  background: var(--accent-soft) !important;
}
.pfr-vacreq-canreq-btn {
  /* hereda estilo cancel-btn (rojo en hover) */
}

/* Admin: badges modify/cancel + diff */
.pfr-vacreq-admin-kind {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.pfr-vacreq-admin-kind-modify {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(29, 108, 240, 0.25);
}
.pfr-vacreq-admin-kind-cancel {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.pfr-vacreq-admin-change {
  background: linear-gradient(180deg, var(--bg2), var(--surface)) !important;
}
.pfr-vacreq-admin-diff {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pfr-vacreq-admin-diff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 2px 0;
}
.pfr-vacreq-admin-diff-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  min-width: 60px;
}
.pfr-vacreq-admin-diff-old {
  text-decoration: line-through;
  color: var(--muted2);
}
.pfr-vacreq-admin-diff-new {
  color: var(--accent);
  font-weight: 700;
}
.pfr-vacreq-admin-diff-cancel {
  color: var(--red);
  font-weight: 700;
}

/* ── Modal: Cuenta de acceso (admin worker accounts) ────── */
#pfr-acct-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: pf-rise 0.22s ease-out;
}
.pfr-acct-modal {
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--bg2);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: pf-rise 0.25s ease-out;
}
.pfr-acct-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface2);
  color: var(--muted2);
  border-radius: var(--r-md);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 2;
}
.pfr-acct-close:hover {
  background: var(--red);
  color: #fff;
}
.pfr-acct-body {
  padding: 28px 30px 22px;
}
.pfr-acct-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}

/* Header */
.pfr-acct-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.pfr-acct-icon {
  width: 44px;
  height: 44px;
  background: var(--accent-soft);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.pfr-acct-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.1;
}
.pfr-acct-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

/* Status banner */
.pfr-acct-status {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.pfr-acct-active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.25);
}
.pfr-acct-disabled {
  background: rgba(110, 102, 136, 0.1);
  color: var(--muted2);
  border-color: var(--border);
}
.pfr-acct-none {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Sections */
.pfr-acct-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.pfr-acct-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 10px;
}
.pfr-acct-label {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 6px 0 5px;
}
.pfr-acct-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.pfr-acct-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.1);
}
.pfr-acct-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pfr-acct-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}
.pfr-acct-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.pfr-acct-mono {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}

/* Datos de acceso */
.pfr-acct-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pfr-acct-data-row:last-child {
  border-bottom: none;
}
.pfr-acct-data-label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--muted2);
  font-size: 12px;
}
.pfr-acct-data-val {
  color: var(--text);
}

/* Danger zone */
.pfr-acct-danger-zone {
  background: rgba(239, 68, 68, 0.04) !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}
.pfr-acct-danger-btn {
  background: var(--bg2);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--red);
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}
.pfr-acct-danger-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.pfr-acct-success-btn {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.pfr-acct-success-btn:hover {
  background: #0e9f6e;
  border-color: #0e9f6e;
}

/* Feedback */
.pfr-acct-feedback {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
}
.pfr-acct-feedback-ok {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.pfr-acct-feedback-err {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Nº de operario · badge en lista de trabajadores */
.pfr-opnum-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(29, 108, 240, 0.2);
  letter-spacing: 0.02em;
}

/* ── Toggle (config swap) ──────────────────────────────── */
.pfr-swap-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: background 0.15s;
}
.pfr-swap-toggle:hover {
  background: var(--surface2);
}
.pfr-swap-toggle input[type="checkbox"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.pfr-swap-toggle-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.pfr-swap-toggle-sub {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.45;
}
.pfr-swap-feedback {
  padding: 9px 14px;
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
}

/* ── Swap (cambios de turno) ──────────────────────────────── */

/* FAB del trabajador */
.pfr-swap-fab {
  position: fixed;
  bottom: 84px;
  right: 18px;
  z-index: 90;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.pfr-swap-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.pfr-swap-fab-badge {
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  margin-left: 4px;
  border: 2px solid #fff;
}

/* Modal worker */
#pfr-swap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: pf-rise 0.22s ease-out;
}
.pfr-swap-modal {
  width: min(640px, 94vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--bg2);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: pf-rise 0.25s ease-out;
}
.pfr-swap-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface2);
  color: var(--muted2);
  border-radius: var(--r-md);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: all 0.15s;
}
.pfr-swap-close:hover {
  background: var(--red);
  color: #fff;
}
.pfr-swap-modal-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  padding: 22px 28px 14px;
  color: var(--text);
}

/* Tabs */
.pfr-swap-tabs {
  display: flex;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pfr-swap-tab {
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pfr-swap-tab:hover {
  color: var(--text);
}
.pfr-swap-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}
.pfr-swap-tab-badge {
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  display: none;
}

.pfr-swap-body {
  padding: 22px 28px;
}

/* Form proponer */
.pfr-swap-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pfr-swap-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pfr-swap-step-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  margin-top: 2px;
}
.pfr-swap-step-content {
  flex: 1;
  min-width: 0;
}
.pfr-swap-step-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}
.pfr-swap-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.pfr-swap-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.1);
}
textarea.pfr-swap-input {
  resize: vertical;
  min-height: 50px;
}
.pfr-swap-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Empty */
.pfr-swap-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}
.pfr-swap-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}
.pfr-swap-empty-sub {
  font-size: 13px;
  color: var(--muted2);
}

.pfr-swap-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 10px;
}

/* Card swap */
.pfr-swap-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 8px;
}
.pfr-swap-status-pending_target {
  border-left: 3px solid var(--amber);
}
.pfr-swap-status-pending_admin {
  border-left: 3px solid var(--accent);
}
.pfr-swap-status-approved {
  border-left: 3px solid var(--green);
  background: rgba(16, 185, 129, 0.04);
}
.pfr-swap-status-rejected_target,
.pfr-swap-status-rejected_admin {
  border-left: 3px solid var(--red);
  background: rgba(239, 68, 68, 0.03);
}
.pfr-swap-status-revoked {
  border-left: 3px solid var(--muted2);
  opacity: 0.7;
}
.pfr-swap-status-cancelled {
  opacity: 0.6;
}

.pfr-swap-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pfr-swap-card-from {
  font-size: 13px;
  color: var(--text);
}
.pfr-swap-card-status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
}
.pfr-swap-card-arrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.pfr-swap-card-side {
  text-align: center;
}
.pfr-swap-card-label {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 4px;
  font-weight: 600;
}
.pfr-swap-card-shift {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-md);
  padding: 4px 10px;
  display: inline-block;
}
.pfr-swap-card-day {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 4px;
}
.pfr-swap-card-arrow-icon {
  font-size: 20px;
  color: var(--muted);
}
.pfr-swap-card-note {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.pfr-swap-card-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}
.pfr-swap-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.pfr-swap-accept-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 8px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.pfr-swap-accept-btn:hover {
  background: #0e9f6e;
}
.pfr-swap-deny-btn,
.pfr-swap-cancel-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted2);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.pfr-swap-deny-btn:hover,
.pfr-swap-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Admin detail layout */
.pfr-swap-admin-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--muted2);
  margin: 4px 0;
}
.pfr-swap-admin-detail code {
  font-family: "IBM Plex Mono", monospace;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin: 0 4px;
  font-weight: 700;
}

/* ── Solicitudes shell (vacaciones + swaps unificados) ──── */
#admin-solicitudes {
  display: block;
}
.pfr-sol-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pfr-sol-tab {
  border: none;
  background: transparent;
  padding: 10px 16px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  white-space: nowrap;
}
.pfr-sol-tab:hover {
  color: var(--text);
}
.pfr-sol-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}
.pfr-sol-tab-badge {
  background: var(--amber);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
  display: none;
}
.pfr-sol-tab.active .pfr-sol-tab-badge {
  background: var(--accent);
}
.pfr-sol-tab-bodies > .pfr-sol-tab-body {
  /* el JS controla display; aquí solo aseguramos sin border extra */
}

/* ── Coverage (peticiones de cobertura) ────────────────── */

/* FAB del trabajador (al lado del de swap) */
.pfr-cov-fab {
  position: fixed;
  bottom: 144px;
  right: 18px;
  z-index: 90;
  background: linear-gradient(135deg, var(--amber), #f97316);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.pfr-cov-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Modal: reutiliza .pfr-swap-modal */
#pfr-cov-overlay {
  /* mismos estilos que pfr-swap-overlay */
}

.pfr-cov-info-box {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(29, 108, 240, 0.2);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--accent);
  line-height: 1.45;
}

/* Bag detail (turno destacado) */
.pfr-cov-bag-detail {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text);
}

/* Botones de oferta en bolsa */
.pfr-cov-offer-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 8px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.15s;
}
.pfr-cov-offer-btn:hover {
  background: #1a5dd9;
}

.pfr-cov-withdraw-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted2);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.15s;
}
.pfr-cov-withdraw-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}

.pfr-cov-my-offer {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.pfr-cov-my-offer.pfr-cov-offer-open {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.25);
}
.pfr-cov-my-offer.pfr-cov-offer-accepted {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.25);
}
.pfr-cov-my-offer.pfr-cov-offer-rejected {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Bloque de ofertas dentro de "mis peticiones" */
.pfr-cov-offers-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pfr-cov-offers-empty {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 10px;
}
.pfr-cov-offers-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}
.pfr-cov-offer-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  font-size: 13px;
}
.pfr-cov-offer-row .pfr-cov-offer-name {
  font-weight: 600;
}
.pfr-cov-offer-row .pfr-cov-offer-note {
  font-size: 11px;
  color: var(--muted2);
  grid-column: 1 / -1;
}
.pfr-cov-offer-row .pfr-cov-offer-status {
  font-size: 11px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
}
.pfr-cov-accept-offer-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}
.pfr-cov-accept-offer-btn:hover {
  background: #0e9f6e;
}
.pfr-cov-offer-row.pfr-cov-offer-rejected,
.pfr-cov-offer-row.pfr-cov-offer-withdrawn {
  opacity: 0.55;
}

/* Admin coverage */
.pfr-cov-admin-offers {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pfr-cov-admin-offers-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}
.pfr-cov-admin-offer-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
}
.pfr-cov-offer-status-mini {
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
}
.pfr-cov-admin-assign-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pfr-vacreq-admin-select {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

/* ── Personal actions row (botones en Mi horario) ────── */
.pfr-pa-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pfr-pa-btn {
  flex: 1 1 0;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    filter 0.15s;
  box-shadow: var(--shadow-sm);
}
.pfr-pa-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.pfr-pa-btn:active {
  transform: translateY(0);
}
.pfr-pa-btn-coverage {
  background: linear-gradient(135deg, var(--amber), #f97316);
}
.pfr-pa-btn-swap {
  background: linear-gradient(135deg, var(--accent), var(--secondary));
}
.pfr-pa-btn-icon {
  font-size: 16px;
}

@media (max-width: 480px) {
  .pfr-pa-btn {
    font-size: 12px;
    padding: 11px 12px;
  }
  .pfr-pa-btn-icon {
    font-size: 14px;
  }
}

/* ── General sidebar (panel derecho) ────────────────────── */
/* General sidebar v2 — vive DENTRO de #view-general como flex row.
   No flotante, no fixed. Respeta el flow natural de la app y no tapa
   el header bajo ningún concepto. */
body.pfr-gs-active #view-general .pfr-gs-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.pfr-gs-main {
  flex: 1;
  min-width: 0; /* permite shrink correcto del table */
}
.pfr-gs-sidebar {
  flex: 0 0 320px;
  background: var(--surface2);
  border-left: 1px solid var(--border);
  font-family: "Inter", sans-serif;
  align-self: stretch;
  display: none;
}
body.pfr-gs-active .pfr-gs-sidebar {
  display: block;
}
@media (max-width: 1100px) {
  .pfr-gs-sidebar {
    flex-basis: 280px;
  }
}
@media (max-width: 880px) {
  body.pfr-gs-active .pfr-gs-sidebar {
    display: none;
  }
}

/* Header del sidebar */
.pfr-gs2-header {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.pfr-gs2-meta {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted2);
  margin-bottom: 8px;
}
.pfr-gs2-big {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
}
.pfr-gs2-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
}
.pfr-gs2-progress {
  margin-top: 14px;
  height: 6px;
  background: var(--surface2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.pfr-gs2-progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
.pfr-gs2-progress-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted2);
}

/* Tabs */
.pfr-gs2-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
}
.pfr-gs2-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pfr-gs2-tab:hover {
  color: var(--text);
}
.pfr-gs2-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}
.pfr-gs2-badge {
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 800;
}

.pfr-gs2-body {
  padding: 16px 18px 24px;
}

.pfr-gs2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pfr-gs2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.pfr-gs2-card-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin-bottom: 6px;
}
.pfr-gs2-card-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
}
.pfr-gs2-card-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

.pfr-gs2-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pfr-gs2-section-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pfr-gs2-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted2);
}

.pfr-gs2-tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: 12px;
}
.pfr-gs2-tpl-icon {
  width: 28px;
  height: 28px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfr-gs2-tpl-main {
  flex: 1;
  min-width: 0;
}
.pfr-gs2-tpl-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfr-gs2-tpl-sub {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}
.pfr-gs2-tpl-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  color: var(--muted2);
}

.pfr-gs2-empty,
.pfr-gs2-empty-mini {
  text-align: center;
  color: var(--muted2);
  padding: 28px 16px;
  font-size: 13px;
  line-height: 1.6;
}
.pfr-gs2-empty-mini {
  padding: 12px 8px;
  font-size: 12px;
}

.pfr-gs2-conflicts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pfr-gs2-conf-row {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.pfr-gs2-conf-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}
.pfr-gs2-conf-user {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.pfr-gs2-conf-item {
  font-size: 12px;
  color: var(--red);
  padding: 3px 0;
}

.pfr-gs2-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pfr-gs2-act-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pfr-gs2-act-icon {
  flex: 0 0 22px;
  font-size: 14px;
}
.pfr-gs2-act-main {
  flex: 1;
  min-width: 0;
}
.pfr-gs2-act-title {
  font-size: 12px;
  color: var(--text);
}
.pfr-gs2-act-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* Header del sidebar */
.pfr-gs-header {
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.pfr-gs-mes {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin-bottom: 8px;
}
.pfr-gs-hours-big {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.pfr-gs-hours-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
}
.pfr-gs-progress {
  height: 6px;
  background: var(--surface2);
  border-radius: var(--r-pill);
  margin-top: 14px;
  overflow: hidden;
}
.pfr-gs-progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
.pfr-gs-progress-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
}
.pfr-gs-progress-pct {
  font-weight: 700;
  color: var(--accent);
}

/* Tabs */
.pfr-gs-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.pfr-gs-tab {
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pfr-gs-tab:hover {
  color: var(--text);
}
.pfr-gs-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}
.pfr-gs-tab-badge {
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 800;
}

.pfr-gs-body {
  padding: 16px 18px 24px;
}

/* KPIs */
.pfr-gs-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.pfr-gs-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.pfr-gs-kpi-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin-bottom: 6px;
}
.pfr-gs-kpi-value {
  line-height: 1;
}
.pfr-gs-kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Sections */
.pfr-gs-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pfr-gs-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pfr-gs-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}
.pfr-gs-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pfr-gs-link:hover {
  text-decoration: underline;
}

/* Plantillas list */
.pfr-gs-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pfr-gs-tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.pfr-gs-tpl-icon {
  width: 28px;
  height: 28px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfr-gs-tpl-main {
  flex: 1;
  min-width: 0;
}
.pfr-gs-tpl-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfr-gs-tpl-sub {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfr-gs-tpl-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  color: var(--muted2);
}

.pfr-gs-empty,
.pfr-gs-empty-mini {
  text-align: center;
  color: var(--muted2);
  padding: 24px 16px;
  font-size: 13px;
}
.pfr-gs-empty-mini {
  padding: 14px 8px;
  font-size: 12px;
}

/* Conflictos */
.pfr-gs-conflict-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pfr-gs-conflict-row {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.pfr-gs-conflict-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}
.pfr-gs-conflict-username {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.pfr-gs-conflict-item {
  font-size: 12px;
  color: var(--red);
  padding: 4px 0;
}

/* Actividad */
.pfr-gs-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pfr-gs-activity-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pfr-gs-activity-icon {
  flex: 0 0 24px;
  font-size: 16px;
}
.pfr-gs-activity-main {
  flex: 1;
  min-width: 0;
}
.pfr-gs-activity-title {
  font-size: 13px;
  color: var(--text);
}
.pfr-gs-activity-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Backdrop blur global cuando hay modal abierto ───────── */
body.pfr-modal-open #app {
  filter: blur(3px) brightness(0.85);
  pointer-events: none;
  transition:
    filter 0.25s ease,
    brightness 0.25s ease;
}
/* Excepción: los propios overlays no se difuminan */
body.pfr-modal-open .modal-overlay,
body.pfr-modal-open #pfr-prof-overlay,
body.pfr-modal-open #pfr-vacreq-overlay,
body.pfr-modal-open #pfr-acct-overlay,
body.pfr-modal-open #pfr-swap-overlay,
body.pfr-modal-open #pfr-cov-overlay,
body.pfr-modal-open #pfr-tpl-overlay,
body.pfr-modal-open #forgot-modal,
body.pfr-modal-open #new-password-modal,
body.pfr-modal-open #enterprise-modal {
  filter: none;
  pointer-events: auto;
}

/* ── Toolbar General (botones del mockup) ──────────────── */
.pfr-gt-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.pfr-gt-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 7px 14px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pfr-gt-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pfr-gt-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pfr-gt-btn-primary:hover {
  background: #1a5dd9;
  color: #fff;
  border-color: #1a5dd9;
}
.pfr-gt-btn-icon {
  padding: 7px 10px;
  font-size: 14px;
}
.pfr-gt-btn.pfr-gt-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.pfr-gt-publish {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pfr-gt-publish:hover {
  background: #1a5dd9;
  color: #fff;
  border-color: #1a5dd9;
}
.pfr-gt-publish.pfr-gt-published {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border-color: rgba(16, 185, 129, 0.3);
}
.pfr-gt-publish.pfr-gt-published:hover {
  background: rgba(16, 185, 129, 0.2);
  color: var(--green);
  border-color: var(--green);
}

/* Vista previa (modo trabajador) — oculta indicadores admin */
body.pfr-gt-preview-mode .pfr-conflict-dot,
body.pfr-gt-preview-mode #general-draft-badge,
body.pfr-gt-preview-mode .note-dot {
  display: none !important;
}

/* Selects editables en Tabla General (igual que en editor admin pero
   más discretos para que no rompan la lectura del horario). */
.pfr-ge-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-align-last: center;
  letter-spacing: 0.03em;
  padding: 0 4px;
  height: 22px;
  min-width: 32px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition:
    filter 0.15s,
    transform 0.12s;
}
.pfr-ge-select:hover {
  filter: brightness(0.94);
  transform: scale(1.05);
}
.pfr-ge-select:focus {
  box-shadow: 0 0 0 2px var(--accent);
}
.pfr-ge-select.changed {
  box-shadow: 0 0 0 2px var(--amber);
}

/* ── Toolbar General: modo y densidad ────────────────────── */
.pfr-gt-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
.pfr-gt-segmented {
  display: inline-flex;
  background: var(--surface2);
  border-radius: var(--r-md);
  padding: 3px;
}
.pfr-gt-seg {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.pfr-gt-seg:hover {
  color: var(--text);
}
.pfr-gt-seg.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pfr-gt-density {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.pfr-gt-density:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pfr-gt-density-icon {
  font-size: 14px;
  line-height: 1;
}

.pfr-gt-conflicts {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.pfr-gt-conflicts:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Densidades — afectan padding y altura de filas */
body.pfr-gt-density-compacto td.name-cell,
body.pfr-gt-density-compacto tbody td {
  padding: 2px 3px !important;
}
body.pfr-gt-density-compacto td.name-cell {
  padding: 3px 12px !important;
}
body.pfr-gt-density-compacto .person-name {
  font-size: 12px !important;
}
body.pfr-gt-density-compacto .person-user {
  font-size: 9px !important;
}
body.pfr-gt-density-compacto .pfr-ge-select {
  height: 18px !important;
  font-size: 9px !important;
}

body.pfr-gt-density-amplio td.name-cell,
body.pfr-gt-density-amplio tbody td {
  padding: 12px 6px !important;
}
body.pfr-gt-density-amplio td.name-cell {
  padding: 14px 18px !important;
}
body.pfr-gt-density-amplio .pfr-ge-select {
  height: 28px !important;
  font-size: 12px !important;
  min-width: 40px !important;
}

/* En vista Amplio el sidebar se oculta para que el mes entero se vea */
body.pfr-gt-density-amplio.pfr-gs-active .pfr-gs-sidebar {
  display: none;
}

/* ── Vista Por turno: separadores y celdas atenuadas ──── */
tr.section-row.pfr-bys-group td {
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 10px 16px !important;
  border-top: 1px solid var(--border) !important;
}
.pfr-bys-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 10px;
  letter-spacing: 0.04em;
}
.pfr-bys-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-right: 12px;
}
.pfr-bys-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted2);
}
/* Celdas que NO son del turno del grupo: atenuadas */
td.pfr-bys-dim {
  opacity: 0.18;
  pointer-events: none;
}
td.pfr-bys-dim .shift,
td.pfr-bys-dim .pfr-ge-select {
  filter: saturate(0.4);
}

/* En vista Notificaciones, ocultar todas las toolbars (no aplica) */
body.pfr-in-notif-view .toolbar {
  display: none !important;
}

/* Notificaciones · centro inbox+detalle Soft Pro
   Ancho completo, sin centrar */
#view-notif #pfr-notif-host {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 24px !important;
}

/* Badge en tab Notificaciones del header */
.pfr-tab-notif-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
  vertical-align: middle;
}

/* Fix de raíz: los contenedores de Solicitudes deben estar OCULTOS
   por defecto. Solo se muestran cuando están dentro del shell de
   Solicitudes Y el shell está activo. */
#admin-vacreqs:not(.pfr-sol-tab-body),
#admin-swaps:not(.pfr-sol-tab-body),
#admin-coberturas:not(.pfr-sol-tab-body) {
  display: none !important;
}
/* Si alguno acabó FUERA del wrapper #admin-solicitudes, ocultarlo */
.admin-content > #admin-vacreqs,
.admin-content > #admin-swaps,
.admin-content > #admin-coberturas {
  display: none !important;
}

/* CRÍTICO: #admin-solicitudes debe respetar el patrón admin-section
   (oculto a menos que tenga .active). Por especificidad máxima. */
.admin-content > #admin-solicitudes:not(.active) {
  display: none !important;
}
.admin-content > #admin-solicitudes.active {
  display: block !important;
}

/* Sidebar admin sticky — se queda fijo al hacer scroll vertical */
.admin-sidebar {
  position: sticky !important;
  top: 60px; /* debajo del header */
  align-self: flex-start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

/* Plegables de secciones de grupo en Tabla General */
tr.pfr-gc-row {
  user-select: none;
}
.pfr-gc-chev {
  display: inline-block;
  margin-right: 10px;
  font-size: 11px;
  color: var(--muted2);
  transition: transform 0.15s ease;
}
tr.pfr-gc-collapsed .pfr-gc-chev {
  transform: rotate(-90deg);
}
.pfr-gc-count {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  background: var(--surface2);
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}

/* Contador de filtros de grupo (Sala, Cocina, Barra...) */
.pfr-fc-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  background: var(--surface2);
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-pill);
}
.filter-btn.active .pfr-fc-count {
  background: var(--bg2);
  color: var(--accent);
}

/* Botón Solo vista / Edición */
.pfr-gt-lock {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.pfr-gt-lock:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pfr-gt-lock.pfr-gt-locked {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--amber);
}
.pfr-gt-lock.pfr-gt-locked:hover {
  background: rgba(245, 158, 11, 0.18);
}
.pfr-gt-lock-icon {
  font-size: 13px;
  line-height: 1;
}

/* Visual: cuando hay lock activo, atenuamos las celdas editables */
body.pfr-gt-edit-locked .pfr-ge-select {
  cursor: not-allowed;
  opacity: 0.85;
}

/* Badge informativo Publicado/Borrador en la toolbar General */
.pfr-gt-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  user-select: none;
}
.pfr-gt-status-draft {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.pfr-gt-status-published {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* En la Tabla General, los selects están deshabilitados (solo
   informativos). pointer-events:none deja pasar el click al <td>
   para que abra el modal de nota/ajuste. */
#t-body .pfr-ge-select[disabled] {
  pointer-events: none;
  opacity: 1;
}

/* End Soft Pro overlay */

/* ════════════════════════════════════════════════════════════════
   Popup editor de celda — sustituye al <select> inline
   2026-05-11
   ══════════════════════════════════════════════════════════════ */

/* Botón de celda (reemplaza al <select>) */
.se-cell-btn {
  width: 100%;
  border: 0;
  padding: 4px 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: filter 0.12s ease;
}
.se-cell-btn:hover {
  filter: brightness(0.95);
}
.se-cell-btn.changed {
  box-shadow: 0 0 0 2px var(--amber) inset;
}
/* Celda TC (turno custom sin tipo) */
.se-cell-btn.is-tc {
  font-style: italic;
  font-size: 11px;
}

/* ── Popup overlay ─── */
.pop-cell-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.45);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 10000;
  padding: 20px;
  animation: popFadeIn 0.15s ease-out;
}
@keyframes popFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pop-cell {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 60px -20px rgba(26, 22, 51, 0.35);
  padding: 18px 20px;
  position: relative;
  animation: popSlideIn 0.18s ease-out;
}
@keyframes popSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.pop-close:hover {
  background: var(--surface2);
}

.pop-cell .pop-title {
  font-family: "Inter", serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  margin: 0 0 2px;
  color: var(--text);
  padding-right: 40px;
  line-height: 1.05;
}
.pop-cell .pop-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
}

.pop-section-label {
  font-size: 10px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
  color: var(--muted2);
  text-transform: uppercase;
  margin: 0 0 7px;
}

/* Cards de tipos de turno */
.pop-shift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.pop-shift-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 8px 6px 7px;
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s ease;
}
.pop-shift-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}
.pop-shift-card.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 4px 12px -4px rgba(29, 108, 240, 0.2);
}
/* Badge tipo pill (no cuadrado) como en el handoff */
.pop-shift-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 9px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
  margin-bottom: 3px;
  letter-spacing: 0;
}
.pop-shift-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 2px;
}
.pop-shift-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  line-height: 1.25;
}

/* Botones V/B/L (y FE opcional) — pills horizontales como el handoff */
.pop-special-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.pop-special-btn {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.12s ease;
  font-family: "Inter", sans-serif;
}
.pop-special-btn:hover {
  border-color: var(--border2);
}
.pop-special-btn.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-width: 2px;
  padding: 5px 11px; /* compensa el border más grueso para que no salte */
}
.pop-special-btn .b {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 800;
}

/* Entrada / Salida */
.pop-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.85fr;
  gap: 8px;
  margin-bottom: 12px;
  align-items: end;
}
.pop-time-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted2);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pop-time-input {
  width: 100%;
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--surface);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  box-sizing: border-box;
}
.pop-time-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Pill morada con las horas calculadas, como el handoff */
.pop-time-calc {
  border: 1.5px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;
  padding: 8px 14px;
  background: rgba(139, 92, 246, 0.1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 800;
  color: #5b27c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  min-width: 64px;
}

/* Nota */
.pop-note-field {
  margin-bottom: 12px;
}
.pop-note-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 11px;
  background: var(--bg2);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  box-sizing: border-box;
  resize: none;
}
.pop-note-input::placeholder {
  color: var(--muted);
  font-style: italic;
}
.pop-note-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Acciones rápidas */
.pop-quick-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 8px;
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
@media (min-width: 480px) {
  .pop-quick-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pop-quick-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.pop-quick-btn:hover:not(:disabled) {
  background: var(--surface2);
}
.pop-quick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pop-quick-btn.danger {
  color: var(--red);
}

/* Footer */
.pop-cell .pop-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pop-cell .pop-btn {
  padding: 9px 20px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-family: inherit;
}
.pop-cell .pop-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.pop-cell .pop-btn-primary:hover {
  filter: brightness(1.05);
}

/* Puntito de override en vistas (vista general, by-shift, personal) */
.override-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: var(--secondary);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--bg2);
  z-index: 2;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   Onboarding Soft Pro · 5 pasos (rediseño Flujos.html)
   ════════════════════════════════════════════════════════════════ */

/* Wrap ancho para los 5 pasos del nuevo onboarding */
.ob-wrap.ob-wide {
  width: min(960px, 96vw);
  max-width: 960px;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: min(720px, 90vh);
  max-height: 92vh;
  overflow: hidden;
}

/* Header */
.ob-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ob-header-logo {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0;
}
.ob-step-count {
  font-size: 12px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Stepper horizontal */
.ob-stepper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 16px;
}
.ob-stepper-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ob-stepper-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.ob-stepper-item.active .ob-stepper-num {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(29, 108, 240, 0.12);
}
.ob-stepper-item.done .ob-stepper-num {
  background: var(--green);
  color: #fff;
}
.ob-stepper-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
}
.ob-stepper-item.active .ob-stepper-label {
  color: var(--text);
}
.ob-stepper-item.done .ob-stepper-label {
  color: var(--muted2);
}
.ob-stepper-line {
  flex: 1;
  height: 1px;
  min-width: 16px;
  background: var(--border);
  transition: background 0.15s ease;
}
.ob-stepper-line.done {
  background: var(--green);
  opacity: 0.6;
}

/* Body con scroll interno */
.ob-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 56px;
  background: var(--bg);
}
.ob-step {
  display: none;
  max-width: 760px;
  margin: 0 auto;
  animation: obFadeIn 0.25s ease;
}
.ob-step.active {
  display: block;
}
@keyframes obFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Section head */
.ob-section-head {
  margin-bottom: 0;
}
.ob-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 8px;
}
.ob-h1 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}
.ob-sub {
  font-size: 13.5px;
  color: var(--muted2);
  margin-top: 8px;
  line-height: 1.5;
  max-width: 480px;
}

/* Fields */
.ob-field {
  display: block;
}
.ob-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.005em;
}
.ob-field-hint {
  color: var(--muted2);
  font-weight: 600;
}
.ob-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.ob-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.12);
  outline: none;
}

.ob-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .ob-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Pills tamaño de equipo */
.ob-pills {
  display: flex;
  gap: 6px;
}
.ob-pill {
  flex: 1;
  padding: 10px 6px;
  background: var(--bg2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.12s ease;
}
.ob-pill:hover {
  border-color: var(--accent);
}
.ob-pill.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Sectores: grid 3 columnas */
.ob-sectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.ob-sector-chip {
  padding: 10px 8px;
  background: var(--bg2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  transition: all 0.12s ease;
}
.ob-sector-chip:hover {
  border-color: var(--accent);
}
.ob-sector-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.ob-sector-chip .ob-sector-emoji {
  font-size: 16px;
}

/* Logo drop zone */
.ob-logo-drop {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
}
.ob-logo-drop.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ob-logo-preview {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: conic-gradient(
    from 220deg,
    var(--accent),
    var(--secondary) 60%,
    var(--accent)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.ob-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ob-logo-text {
  flex: 1;
  min-width: 0;
}
.ob-logo-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.ob-logo-sub {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}
.ob-logo-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Choice cards (Estructura paso 2) */
.ob-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob-choice-card {
  text-align: left;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--bg2);
  border: 1.5px solid var(--border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  transition: all 0.12s ease;
  font-family: "Inter", sans-serif;
}
.ob-choice-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.ob-choice-card.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 4px 12px -4px rgba(29, 108, 240, 0.2);
}
.ob-choice-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.ob-choice-card.selected .ob-choice-icon {
  background: var(--accent);
  filter: grayscale(0);
}
.ob-choice-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--text);
}
.ob-choice-desc {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.45;
}

/* Grupos lista */
.ob-groups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-groups-list .ob-input {
  font-size: 12.5px;
}

/* Equipo: tabla */
.ob-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ob-actions-row .btn {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

.ob-workers-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ob-workers-head {
  padding: 10px 16px;
  background: var(--surface);
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.8fr 80px 1fr 32px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.ob-workers-row {
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.8fr 80px 1fr 32px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ob-workers-row:last-child {
  border-bottom: none;
}
.ob-workers-row .ob-input {
  padding: 7px 10px;
  font-size: 12.5px;
}
.ob-workers-row .ob-w-del {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted2);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ob-workers-row .ob-w-del:hover {
  background: var(--red);
  color: #fff;
}
.ob-workers-empty {
  padding: 14px 16px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted2);
  font-size: 12.5px;
}
.ob-workers-empty-dot {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1.5px dashed var(--border2);
  display: inline-block;
}

.ob-tip {
  margin-top: 16px;
  padding: 14px;
  background: var(--accent-soft);
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 108, 240, 0.18);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.ob-tip-icon {
  color: var(--accent);
  margin-top: 1px;
  font-weight: 800;
}
.ob-tip strong {
  color: var(--accent);
  font-weight: 800;
}

/* Turnos: cards M/T/N/P/R con tint */
.ob-turnos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob-turno-card-v2 {
  padding: 16px;
  text-align: left;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: all 0.15s ease;
  opacity: 0.65;
}
.ob-turno-card-v2.selected {
  opacity: 1;
  box-shadow: 0 4px 12px -4px rgba(124, 92, 246, 0.2);
}
.ob-turno-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 18px;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
.ob-turno-body {
  flex: 1;
  min-width: 0;
}
.ob-turno-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}
.ob-turno-time {
  font-size: 11px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 3px;
}
.ob-turno-check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: transparent;
  border: 1.5px solid var(--border2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
}
.ob-turno-card-v2.selected .ob-turno-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* Reglas legales */
.ob-rules {
  margin-top: 32px;
}
.ob-rules-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
}
.ob-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.ob-rule-card {
  padding: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.ob-rule-label {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.ob-rule-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  margin-top: 4px;
}

/* Listo: pantalla final */
.ob-final-icon-wrap {
  margin: 24px auto 24px;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: linear-gradient(
    140deg,
    var(--accent-soft) 0%,
    var(--secondary-soft) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(29, 108, 240, 0.16);
}
.ob-final-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: conic-gradient(
    from 220deg,
    var(--accent),
    var(--secondary) 60%,
    var(--accent)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 8px 24px -6px rgba(139, 92, 246, 0.4);
}
.ob-final-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.05;
  text-align: center;
  margin: 0;
}
.ob-final-sub {
  font-size: 14px;
  color: var(--muted2);
  margin: 10px auto 0;
  line-height: 1.5;
  max-width: 520px;
  text-align: center;
}
.ob-final-grid {
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 640px;
}
@media (max-width: 640px) {
  .ob-final-grid {
    grid-template-columns: 1fr;
  }
}
.ob-final-card {
  padding: 16px;
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: "Inter", sans-serif;
}
.ob-final-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.ob-final-card-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 18px;
}
.ob-final-card-icon-accent {
  background: var(--accent-soft);
  color: var(--accent);
}
.ob-final-card-icon-secondary {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.ob-final-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}
.ob-final-card-desc {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
  line-height: 1.5;
}
.ob-final-card-cta {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted2);
  font-weight: 700;
}
.ob-final-card-cta-accent {
  color: var(--accent);
}

/* Footer */
.ob-footer {
  padding: 14px 32px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ob-skip {
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.ob-skip:hover {
  color: var(--text);
}

/* btn-soft variant (usada en paso 3) */
.btn-soft {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-soft) !important;
}
.btn-soft:hover {
  background: rgba(29, 108, 240, 0.16) !important;
}

/* ── Logo empresa en Facturación ───────────────────────── */
.bil-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bil-logo-box {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.bil-logo-box:hover {
  border-color: var(--accent);
  border-style: solid;
}
.bil-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bil-logo-box #bil-logo-placeholder {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--muted2);
}
.bil-logo-edit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.bil-logo-box:hover .bil-logo-edit {
  opacity: 1;
}
.bil-logo-box.bil-logo-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
}
.bil-logo-box.bil-logo-loading::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: bilSpin 0.8s linear infinite;
  z-index: 2;
}
@keyframes bilSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Cabecera de impresión (logo empresa + nombre + mes + fecha) ── */
#print-header {
  display: none;
}

@media print {
  #print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 6mm 0;
    margin-bottom: 4mm;
    border-bottom: 1px solid #d0d0d0;
    page-break-after: avoid;
    break-after: avoid;
    font-family: "Inter", system-ui, sans-serif;
    color: #1a1633;
  }
  .print-hdr-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .print-hdr-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f4f0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .print-hdr-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .print-hdr-name {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 16pt;
    letter-spacing: 0;
  }
  .print-hdr-right {
    text-align: right;
  }
  .print-hdr-title {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 13pt;
  }
  .print-hdr-date {
    font-size: 9pt;
    color: #6e6688;
    font-family: "IBM Plex Mono", monospace;
    margin-top: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Editor de turno (admin → turnos → editar/añadir) Soft Pro
   ════════════════════════════════════════════════════════════════ */

.et-modal {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Header */
.et-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.et-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
}
.et-header-text {
  flex: 1;
  min-width: 0;
}
.et-header-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text);
}
.et-header-sub {
  font-size: 12.5px;
  color: var(--muted2);
  margin-top: 2px;
}

/* Section */
.et-section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.et-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.et-section-disabled {
  opacity: 0.55;
}
.et-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
}
.et-section-sub {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Grids y fields */
.et-grid-3 {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .et-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
.et-field {
  display: flex;
  flex-direction: column;
}
.et-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.et-label-hint {
  font-weight: 600;
  font-size: 10px;
  color: var(--muted2);
  margin-left: 4px;
}
.et-code-display {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-md);
  min-height: 38px;
}

/* Toggle switch row */
.et-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s;
}
.et-toggle-row:hover {
  border-color: var(--accent);
}
.et-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.et-toggle-sw {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface2);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.et-toggle-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}
.et-toggle-row input[type="checkbox"]:checked + .et-toggle-sw {
  background: var(--accent);
}
.et-toggle-row input[type="checkbox"]:checked + .et-toggle-sw::after {
  left: 18px;
}
.et-toggle-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.et-toggle-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.et-toggle-desc {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.4;
}

/* Pills (descanso) */
.et-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.et-pill {
  flex: 1;
  min-width: 92px;
  padding: 10px 12px;
  background: var(--bg2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  text-align: center;
  transition: all 0.12s ease;
}
.et-pill:hover {
  border-color: var(--accent);
}
.et-pill.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Días grid */
.et-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.et-days-grid > div {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  font-size: 11.5px;
}
.et-days-grid > div > div:first-child {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 4px;
}
.et-days-grid input {
  width: 100%;
  font-size: 11px;
  padding: 5px 7px !important;
}

/* Geolocalización */
.et-geo-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .et-geo-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Footer */
.et-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ════════════════════════════════════════════════════════════════
   Lista de turnos definidos · cards horizontales Soft Pro
   ════════════════════════════════════════════════════════════════ */
/* Título y subtítulo de "Gestión de turnos" — limpios, sin caja */
.tdef-heading {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.tdef-subtitle {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 4px;
  line-height: 1.5;
}

.tdef-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tdef-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  align-items: stretch;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition:
    border-color 0.15s,
    transform 0.12s,
    box-shadow 0.15s;
}
.tdef-card:hover {
  border-color: var(--border2);
  box-shadow:
    0 2px 8px rgba(124, 92, 246, 0.1),
    0 12px 24px -10px rgba(124, 92, 246, 0.12);
}
.tdef-card.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tdef-drag {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--muted);
  font-size: 14px;
  cursor: grab;
  user-select: none;
  line-height: 1;
}
.tdef-drag:active {
  cursor: grabbing;
}

.tdef-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.tdef-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.tdef-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.tdef-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tdef-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  flex-wrap: wrap;
}
.tdef-tags-inline {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  align-items: center;
}
.tdef-tag {
  background: var(--secondary-soft);
  color: var(--secondary);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: "IBM Plex Mono", monospace;
}
.tdef-tag-split {
  background: var(--accent-soft);
  color: var(--accent);
}

.tdef-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
}
.tdef-day {
  text-align: center;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.tdef-day-l {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tdef-day-h {
  font-size: 9.5px;
  font-family: "IBM Plex Mono", monospace;
  color: #6e6688;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
}
.tdef-day-h.is-libre {
  color: #c4bddb;
  opacity: 0.7;
  font-weight: 500;
}
.tdef-day-h2 {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}
.tdef-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.tdef-total-h {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  letter-spacing: 0;
}
.tdef-total-l {
  font-size: 9.5px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.tdef-actions {
  display: flex;
  gap: 6px;
}
.tdef-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--surface2);
  color: var(--muted2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}
.tdef-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.tdef-btn-danger:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}
.tdef-btn:active {
  transform: scale(0.94);
}

/* Responsive: la rejilla baja a 2 columnas cuando no caben 3 */
@media (max-width: 1100px) {
  .tdef-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Anchos muy pequeños: 1 columna, badge más compacto y horarios más pequeños */
@media (max-width: 760px) {
  .tdef-list {
    grid-template-columns: 1fr;
  }
  .tdef-days {
    grid-template-columns: repeat(7, minmax(32px, 1fr));
    gap: 2px;
  }
  .tdef-day-h,
  .tdef-day-h2 {
    font-size: 9.5px;
  }
  .tdef-day-l {
    font-size: 9px;
  }
  .tdef-badge {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Flujo 4 · Aprobar vacaciones (inbox + detalle)
   ════════════════════════════════════════════════════════════════ */

/* Header con icono campana y filtros */
.vac4-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vac4-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fef3c7;
  color: #92400e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.vac4-header-text {
  flex: 1;
  min-width: 200px;
}
.vac4-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--text);
}
.vac4-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}
.vac4-sub strong {
  color: #92400e;
  font-weight: 800;
}
.vac4-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vac4-filter {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.12s ease;
}
.vac4-filter:hover {
  color: var(--text);
  border-color: var(--border2);
}
.vac4-filter.active {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.vac4-filter-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
}
.vac4-filter:not(.active) .vac4-filter-count {
  background: var(--surface2);
  color: var(--muted2);
}

/* Layout 2 columnas */
.vac4-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 600px;
}
.vac4-inbox {
  background: transparent;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  max-height: 80vh;
}
.vac4-detail {
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow-y: auto;
  max-height: 80vh;
}

/* Item del inbox */
.vac4-inbox-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease;
}
.vac4-inbox-item:hover {
  background: var(--surface);
}
.vac4-inbox-item.is-selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.vac4-inbox-item.is-decided {
  opacity: 0.55;
}

/* Avatar */
.vac4-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.vac4-avatar-sm {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.vac4-inbox-body {
  flex: 1;
  min-width: 0;
}
.vac4-inbox-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.vac4-inbox-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vac4-inbox-time {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  white-space: nowrap;
}
.vac4-inbox-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text2);
  flex-wrap: wrap;
}
.vac4-inbox-dot {
  color: var(--muted);
}
.vac4-inbox-days {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}
.vac4-inbox-dates {
  font-size: 11px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 2px;
}

/* Badges de decisión y tipo */
.vac4-dec {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
}
.vac4-dec-ok {
  background: #d1fae5;
  color: #065f46;
}
.vac4-dec-no {
  background: #fee2e2;
  color: #991b1b;
}
.vac4-dec-cancel {
  background: var(--surface2);
  color: var(--muted2);
}

.vac4-kind {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}
.vac4-kind-modify {
  background: #dbeafe;
  color: #1d4ed8;
}
.vac4-kind-cancel {
  background: #fee2e2;
  color: #b91c1c;
}

/* Detalle: header */
.vac4-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.vac4-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 19px;
  flex-shrink: 0;
}
.vac4-detail-headtxt {
  flex: 1;
  min-width: 0;
}
.vac4-detail-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
}
.vac4-detail-role {
  font-size: 12.5px;
  color: var(--muted2);
  margin-top: 2px;
}
.vac4-detail-pills {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.vac4-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.vac4-pill-accent {
  background: var(--accent-soft);
  color: var(--accent);
}
.vac4-pill-info {
  background: var(--secondary-soft);
  color: var(--secondary);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.vac4-detail-balance {
  text-align: right;
  flex-shrink: 0;
}
.vac4-balance-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--text);
  letter-spacing: 0;
  margin-top: 4px;
}
.vac4-balance-l {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Kicker reutilizable */
.vac4-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}
.vac4-kicker-warn {
  color: #92400e;
}

/* Body 2 columnas */
.vac4-detail-body {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}
.vac4-detail-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cards genéricas del detalle */
.vac4-card {
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.vac4-card-warn {
  background: #fef3c7;
  border-color: #fcd34d;
}
.vac4-note-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
  margin-top: 8px;
}
.vac4-muted {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* Cobertura */
.vac4-cov-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.vac4-cov-row:first-of-type {
  margin-top: 10px;
}
.vac4-cov-day {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  color: var(--text2);
  width: 64px;
  flex-shrink: 0;
}
.vac4-cov-bar {
  flex: 1;
  height: 8px;
  background: var(--surface2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.vac4-cov-fill {
  position: absolute;
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}
.vac4-cov-fill.vac4-cov-ok {
  background: #10b981;
}
.vac4-cov-fill.vac4-cov-warn {
  background: #f59e0b;
}
.vac4-cov-fill.vac4-cov-bad {
  background: #ef4444;
}
.vac4-cov-pct {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
  width: 36px;
  text-align: right;
}
.vac4-cov-pct.vac4-cov-ok {
  color: #10b981;
}
.vac4-cov-pct.vac4-cov-warn {
  color: #f59e0b;
}
.vac4-cov-pct.vac4-cov-bad {
  color: #ef4444;
}
.vac4-cov-delta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  color: var(--muted);
  width: 36px;
  text-align: right;
}

/* Conflictos */
.vac4-conflict-list {
  margin: 8px 0 0 16px;
  padding: 0;
  font-size: 12.5px;
  color: #92400e;
  line-height: 1.6;
}

/* Sugerencias cobertura */
.vac4-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.vac4-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.vac4-suggestion-body {
  flex: 1;
  min-width: 0;
}
.vac4-suggestion-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.vac4-suggestion-match {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.vac4-suggestion-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s ease;
}
.vac4-suggestion-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Balance grid */
.vac4-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.vac4-balance-k {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted2);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.vac4-balance-v {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  margin-top: 2px;
}
.vac4-balance-v-warn {
  color: #92400e;
}
.vac4-balance-v-ok {
  color: #10b981;
}

/* Action bar */
.vac4-actionbar {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  align-items: center;
}
.vac4-action-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid transparent;
}
.vac4-action-approve {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.vac4-action-approve:hover {
  background: #1858cc;
  box-shadow: 0 4px 12px -4px rgba(29, 108, 240, 0.4);
}
.vac4-action-deny {
  background: transparent;
  color: #b91c1c;
  border-color: #fca5a5;
}
.vac4-action-deny:hover {
  background: #fee2e2;
}
.vac4-already-decided {
  font-size: 12px;
  color: var(--muted2);
  text-align: right;
}
.vac4-already-note {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text2);
  font-style: italic;
}

/* Detail empty state */
.vac4-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.vac4-detail-empty-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 14px;
}
.vac4-detail-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0;
}
.vac4-detail-empty-sub {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 6px;
  max-width: 280px;
  line-height: 1.5;
}

/* Inbox empty state */
.vac4-empty {
  padding: 40px 24px;
  text-align: center;
}
.vac4-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.vac4-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
}
.vac4-empty-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 960px) {
  .vac4-layout {
    grid-template-columns: 1fr;
  }
  .vac4-inbox {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 320px;
  }
  .vac4-detail-body {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   Flujo 6 · Perfil trabajador · refinamientos Soft Pro
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.pfr-prof-breadcrumb {
  padding: 12px 24px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pfr-prof-bc-link {
  cursor: pointer;
  transition: color 0.12s ease;
}
.pfr-prof-bc-link:hover {
  color: var(--accent);
}
.pfr-prof-bc-sep {
  color: var(--muted);
}
.pfr-prof-bc-current {
  color: var(--text);
  font-weight: 700;
}

/* Hero con espacio para botones a la derecha */
.pfr-prof-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 28px 0 28px;
}
.pfr-prof-hero-main {
  flex: 1;
  min-width: 0;
}
.pfr-prof-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pfr-prof-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pfr-prof-hero-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pfr-prof-hero-btn-ghost {
  background: transparent;
}
.pfr-prof-hero-btn-soft {
  background: var(--surface2);
  border-color: transparent;
  color: var(--text);
}
.pfr-prof-hero-btn-soft:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Pill muted (no fichado) */
.pfr-prof-pill-muted {
  background: var(--surface2);
  color: var(--muted2);
  border: 1px solid var(--border);
}

/* Separador de puntos sutil */
.pfr-prof-sep-dot {
  color: var(--border2);
  margin: 0 2px;
}

/* Responsive: si el modal es estrecho, botones debajo */
@media (max-width: 720px) {
  .pfr-prof-hero {
    flex-wrap: wrap;
  }
  .pfr-prof-hero-actions {
    width: 100%;
    margin-top: 12px;
    justify-content: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════════
   Modal "Editar trabajador" · Soft Pro (reutiliza .et-*)
   ════════════════════════════════════════════════════════════════ */

/* Avatar del header del modal */
.ew-header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(
    140deg,
    var(--accent-soft),
    var(--secondary-soft)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
}
.ew-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navegación entre trabajadores en el header */
.ew-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ew-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted2);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.ew-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ew-nav-pos {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 700;
  min-width: 38px;
  text-align: center;
}

.et-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: sticky;
  bottom: -1px;
  z-index: 3;
  padding-top: 14px;
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
}

.et-footer-spacer {
  flex: 1;
}

.btn-danger {
  background: #fff5f5 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

.btn-danger:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* Grid 2 columnas para campos de contacto/contrato */
.et-grid-2-12 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.et-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .et-grid-2-12 {
    grid-template-columns: 1fr;
  }
}

/* Filas de dirección horizontales */
.ew-addr-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ew-addr-row .et-field {
  min-width: 100px;
}

/* Display de edad (no editable) */
.ew-edad-display {
  padding: 9px 12px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════
   Tab Documentos del perfil de trabajador
   ════════════════════════════════════════════════════════════════ */
.pfd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.pfd-head-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
}
.pfd-head-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}
.pfd-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 14px;
}

/* Grid de cards */
.pfd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pfd-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.pfd-card:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow-sm);
}
.pfd-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pfd-icon {
  width: 44px;
  height: 52px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.pfd-card-body {
  flex: 1;
  min-width: 0;
}
.pfd-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.pfd-card-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 4px;
}
.pfd-card-exp {
  font-size: 11px;
  margin-top: 6px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}
.pfd-card-exp.pfd-exp-ok {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.pfd-card-exp.pfd-exp-expiring {
  background: #fef3c7;
  color: #92400e;
}
.pfd-card-exp.pfd-exp-expired {
  background: #fee2e2;
  color: #991b1b;
}
.pfd-card-vis {
  font-size: 10.5px;
  color: var(--accent);
  margin-top: 5px;
  font-weight: 700;
}
.pfd-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pfd-act {
  flex: 1;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.pfd-act:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pfd-act-danger:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}

/* ════════════════════════════════════════════════════════════════
   Disponibilidad declarada (tab Resumen del perfil)
   ════════════════════════════════════════════════════════════════ */
.pfa-loading {
  font-size: 12px;
  color: var(--muted2);
  padding: 16px;
  text-align: center;
}

.pfa-grid {
  display: grid;
  /* grid-template-columns se asigna inline en JS: 60px (día) + N turnos */
  gap: 4px;
  margin-top: 8px;
  overflow-x: auto;
}

.pfa-head,
.pfa-head-day {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
}
.pfa-head-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
}

.pfa-day {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
}

.pfa-cell {
  border: 1px solid var(--border);
  border-radius: 7px;
  height: 30px;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfa-cell.pfa-on {
  border-color: transparent;
}
.pfa-cell.pfa-off {
  background: var(--surface2);
  color: var(--muted);
  opacity: 0.65;
}
.pfa-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -4px rgba(124, 92, 246, 0.18);
}

.pfa-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.5;
}
.pfa-footer strong {
  color: var(--text2);
  font-weight: 700;
}
.pfa-hint {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
}

/* Modales secundarios encima del perfil de trabajador */
body.pfr-prof-open .modal-overlay,
body.pfr-prof-open #modal,
body.pfr-prof-open .modal-overlay.is-open {
  z-index: 99999 !important;
}

/* ════════════════════════════════════════════════════════════════
   Habilidades (tab Resumen del perfil) + configurador
   ════════════════════════════════════════════════════════════════ */

.pfr-prof-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pfr-prof-card-head .pfr-prof-card-title {
  margin: 0;
}

.pfs-config-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted2);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pfs-config-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.pfs-loading {
  font-size: 12px;
  color: var(--muted2);
  padding: 8px 0;
}

.pfs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.pfs-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pfs-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  min-width: 100px;
  flex-shrink: 0;
}
.pfs-bar {
  flex: 1;
  display: flex;
  gap: 4px;
}
.pfs-pip {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--surface2);
  max-width: 60px;
}
.pfs-pip.on {
  background: var(--accent);
}
.pfs-level {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text);
  min-width: 28px;
  text-align: right;
}

/* Empty state */
.pfs-empty {
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: var(--r-md);
  border: 1px dashed var(--border2);
}
.pfs-empty-text {
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 600;
}
.pfs-empty-hint {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 4px;
  line-height: 1.5;
}
.pfs-empty-hint strong {
  color: var(--accent);
  font-weight: 700;
}

/* Configurador */
.pfs-cfg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.pfs-cfg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pfs-cfg-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfs-cfg-levels {
  display: flex;
  gap: 4px;
}
.pfs-cfg-pip {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 12px;
  transition: all 0.12s ease;
}
.pfs-cfg-pip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pfs-cfg-pip.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pfs-cfg-pip-zero {
  font-size: 14px;
  color: var(--muted2);
}
.pfs-cfg-pip-zero.on {
  background: var(--surface2);
  color: var(--muted2);
  border-color: var(--border2);
}
.pfs-cfg-del {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.12s ease;
}
.pfs-cfg-del:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(239, 68, 68, 0.08);
}

/* ════════════════════════════════════════════════════════════════
   Notas internas (worker_notes)
   ════════════════════════════════════════════════════════════════ */

.pfn-loading {
  font-size: 12px;
  color: var(--muted2);
  padding: 8px 0;
}

.pfn-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.pfn-card {
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
}
.pfn-tone-positive {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.25);
}
.pfn-tone-warn {
  background: #fef3c7;
  border-color: #fcd34d;
}
.pfn-tone-system {
  background: var(--surface2);
  border-color: var(--border);
}

.pfn-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.pfn-card-emoji {
  font-size: 14px;
}
.pfn-card-author {
  font-weight: 800;
  color: var(--text2);
}
.pfn-card-date {
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
}
.pfn-card-del {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.12s ease;
}
.pfn-card-del:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}
.pfn-card-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  word-wrap: break-word;
}

/* Empty state */
.pfn-empty {
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: var(--r-md);
  border: 1px dashed var(--border2);
}
.pfn-empty-text {
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 600;
}
.pfn-empty-hint {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 4px;
  line-height: 1.5;
}
.pfn-empty-hint strong {
  color: var(--accent);
  font-weight: 700;
}

/* Selector de tono en el modal de añadir */
.pfn-tone-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pfn-tone-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  transition: all 0.12s ease;
}
.pfn-tone-opt:hover {
  border-color: var(--accent);
}
.pfn-tone-opt.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pfn-tone-emoji {
  font-size: 16px;
}
.pfn-tone-label {
  font-family: "Inter", sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   Contrato (tab Resumen del perfil)
   ════════════════════════════════════════════════════════════════ */
.pfc-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}
.pfc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.pfc-row:last-child {
  border-bottom: none;
}
.pfc-k {
  color: var(--muted2);
  font-weight: 600;
}
.pfc-v {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}
.pfc-mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   Flujo 7 · Reportes Soft Pro
   ════════════════════════════════════════════════════════════════ */

#admin-reportes {
  width: 100%;
}

/* Header con rangos + acciones */
.r7-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.r7-header-text {
  flex: 1;
  min-width: 200px;
}
.r7-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
}
.r7-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}
.r7-header-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Range pills (Semana/Mes/Trim/Año) */
.r7-range {
  display: inline-flex;
  background: var(--surface2);
  padding: 3px;
  border-radius: 999px;
}
.r7-range-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--muted2);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.12s ease;
}
.r7-range-btn:hover {
  color: var(--text);
}
.r7-range-btn.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Tool buttons (CSV, Compartir) */
.r7-tool-btn {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text2);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.r7-tool-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.r7-tool-btn-soft {
  background: var(--surface2);
  border-color: transparent;
  color: var(--text);
}
.r7-tool-btn-soft:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Tabs */
.r7-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.r7-tab {
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease;
}
.r7-tab:hover {
  color: var(--text2);
}
.r7-tab.active {
  color: var(--text);
  font-weight: 800;
  border-bottom-color: var(--text);
}

.r7-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* KPIs */
.r7-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) {
  .r7-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
.r7-kpi {
  padding: 16px 18px;
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
}
.r7-kpi-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 10px;
}
.r7-kpi-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.r7-kpi-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.r7-kpi-value.pos {
  color: var(--green);
}
.r7-kpi-value.neg {
  color: var(--red);
}
.r7-kpi-value.warn {
  color: #92400e;
}
.r7-kpi-delta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.r7-kpi-delta-pos {
  color: #065f46;
}
.r7-kpi-delta-neg {
  color: #991b1b;
}
.r7-kpi-delta-warn {
  color: #92400e;
}
.r7-kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Card genérica */
.r7-card {
  padding: 20px;
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
}
.r7-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.r7-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
  margin-top: 4px;
}
.r7-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
}

.r7-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
@media (max-width: 980px) {
  .r7-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Legend del gráfico */
.r7-legend {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--muted);
  align-items: center;
  flex-wrap: wrap;
}
.r7-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.r7-legend-dot {
  width: 12px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.r7-legend-dash {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--text);
  display: inline-block;
  opacity: 0.85;
}

/* Bar chart */
.r7-bars-wrap {
  position: relative;
  height: 260px;
  padding-left: 40px;
}
.r7-bars-grid {
  position: absolute;
  inset: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.r7-grid-line {
  position: relative;
  height: 1px;
}
.r7-grid-rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.r7-grid-rule.is-base {
  background: var(--text2);
  opacity: 0.4;
}
.r7-grid-label {
  position: absolute;
  left: -40px;
  top: -7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  width: 36px;
  text-align: right;
}
.r7-bars {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  gap: 16px;
  padding-right: 8px;
}
.r7-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}
.r7-bar-track {
  flex: 1;
  position: relative;
  padding: 0 10%;
}
.r7-bar-contract {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed var(--text2);
  opacity: 0.55;
}
.r7-bar-stack {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.r7-bar-ot {
  background: var(--amber);
  border-radius: 6px 6px 0 0;
}
.r7-bar-real {
  background: var(--accent);
}
.r7-bar-value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  display: none;
}
/* Solo mostrar valor sobre la barra en hover (más limpio) */
.r7-bar-col:hover .r7-bar-value {
  display: block;
}
.r7-bar-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  margin-top: 6px;
}

/* Top trabajadores con barra dividida */
.r7-top-row {
  display: grid;
  grid-template-columns: 20px 32px 1fr 1fr 48px 36px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  padding: 4px 0;
}
.r7-top-rank {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  text-align: center;
}
.r7-top-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 11px;
}
.r7-top-name {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r7-top-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.r7-top-bar-real {
  background: var(--accent);
}
.r7-top-bar-ot {
  background: var(--amber);
}
.r7-top-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  text-align: right;
}
.r7-top-ot {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  color: #92400e;
  text-align: right;
}

/* Donut */
.r7-donut-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 6px 0 12px;
}
.r7-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.r7-donut-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0;
}
.r7-donut-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted2);
}
.r7-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.r7-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.r7-donut-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}
.r7-donut-legend-name {
  flex: 1;
  color: var(--text2);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r7-donut-legend-pct {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--text);
  width: 36px;
  text-align: right;
}
.r7-donut-legend-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  width: 36px;
  text-align: right;
}

/* Ausencias resumen pills */
.r7-abs-totals {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.r7-abs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.r7-abs-pill-ok {
  background: #d1fae5;
  color: #065f46;
}
.r7-abs-pill-warn {
  background: #fef3c7;
  color: #92400e;
}
.r7-abs-pill-bad {
  background: #fee2e2;
  color: #991b1b;
}
.r7-abs-pill strong {
  font-weight: 800;
}
.r7-abs-pill .r7-abs-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
}

.r7-abs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.r7-abs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.r7-abs-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.r7-abs-row-pills {
  display: inline-flex;
  gap: 4px;
}
.r7-abs-pill-mini {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
}

/* Tabla genérica de reportes (Horas, Ausencias, etc.) */
.r7-card table.r7-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.r7-card table.r7-table th {
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted2);
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
}
.r7-card table.r7-table th.num {
  text-align: right;
}
.r7-card table.r7-table td {
  padding: 11px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.r7-card table.r7-table td.num {
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}
.r7-card table.r7-table tr:last-child td {
  border-bottom: none;
}

/* Empty state */
.r7-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
}

/* Heatmap de cobertura por hora (tab Cobertura) */
.r7-heatmap {
  display: grid;
  grid-template-columns: 56px repeat(8, 1fr);
  gap: 4px;
}
.r7-heatmap-slot-label,
.r7-heatmap-day-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted2);
  text-align: center;
  padding: 6px 0;
}
.r7-heatmap-day-label {
  text-align: left;
  align-self: center;
  font-size: 12px;
  color: var(--text2);
  padding-left: 6px;
}
.r7-heatmap-cell {
  height: 36px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
}
.r7-heatmap-cell.h95 {
  background: #d1fae5;
  color: #065f46;
}
.r7-heatmap-cell.h85 {
  background: #fef3c7;
  color: #92400e;
}
.r7-heatmap-cell.h75 {
  background: #fed7aa;
  color: #9a3412;
}
.r7-heatmap-cell.h0 {
  background: #fee2e2;
  color: #991b1b;
}

.r7-heatmap-help {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════
   Sidebar admin agrupado (Configuración Soft Pro)
   ════════════════════════════════════════════════════════════════ */

.admin-sidebar.admin-sidebar-grouped {
  padding: 16px 12px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-sidebar-head {
  padding: 6px 8px 14px 8px;
  border: none !important;
  background: transparent !important;
}
.admin-sidebar-grouped .admin-sidebar-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Ocultar el subtítulo "—" / placeholder bajo CONFIGURACIÓN */
.admin-sidebar-grouped .admin-sidebar-sub:empty,
.admin-sidebar-grouped #admin-sidebar-sub {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   Pestañas internas unificadas (estilo Horario/Almuerzos)
   Estandarizan TODAS las tabs internas de las pantallas admin.
   ════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════
   ESTÁNDAR PESTAÑAS INTERNAS — tab de carpeta con base gris fina
   Pestaña activa: fondo lila --accent-soft, sin borde fuerte, texto accent.
   Base del contenedor: línea fina --border (gris suave), NO accent fuerte.
   La pestaña activa se "monta" sobre esa línea ocultándola en su anchura.
   REGLA INMUTABLE: no cambiar este estilo sin que Rafa lo pida explícitamente.
   ════════════════════════════════════════════════════════════════════ */
.pf-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  flex-wrap: wrap;
  align-items: flex-end;
}
.pf-tabs .pf-tab,
.pf-tabs > button {
  position: relative !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: "Inter", sans-serif !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  margin-bottom: -1px !important;
  color: var(--muted2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0 !important;
  transition:
    background-color 0.15s ease,
    color 0.12s ease,
    border-color 0.15s ease !important;
  box-shadow: none !important;
}
.pf-tabs .pf-tab:hover,
.pf-tabs > button:hover {
  color: var(--text) !important;
  background-color: rgba(124, 92, 246, 0.04) !important;
}
.pf-tabs .pf-tab.active,
.pf-tabs > button.active {
  color: var(--accent) !important;
  background-color: var(--accent-soft) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--accent-soft) !important;
}

/* Alias: las otras barras de pestañas legacy heredan el mismo aspecto */
.pfr-sol-tabs,
.vac-tabs,
.r7-tabs,
#hours-tabs,
.hours-tabs {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 0 !important;
  flex-wrap: wrap !important;
  background: transparent !important;
}
.pfr-sol-tabs > button,
.pfr-sol-tabs .pfr-sol-tab,
.vac-tabs > button,
.vac-tab,
.r7-tabs > button,
.r7-tab,
#hours-tabs > button,
.hours-tab {
  position: relative !important;
  padding: 10px 22px 14px 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: "Inter", sans-serif !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  margin-bottom: -2px !important;
  color: var(--muted2) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  letter-spacing: 0 !important;
  transition: color 0.12s ease;
  box-shadow: none !important;
}
.pfr-sol-tabs > button::after,
.pfr-sol-tabs .pfr-sol-tab::after,
.vac-tabs > button::after,
.vac-tab::after,
.r7-tabs > button::after,
.r7-tab::after,
#hours-tabs > button::after,
.hours-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 4px;
  background: transparent;
  border-radius: 999px;
  transition: background-color 0.12s ease;
  pointer-events: none;
}
.pfr-sol-tabs > button:hover,
.pfr-sol-tab:hover,
.vac-tabs > button:hover,
.vac-tab:hover,
.r7-tabs > button:hover,
.r7-tab:hover,
.hours-tab:hover {
  color: var(--text) !important;
  background-color: transparent !important;
}
.pfr-sol-tabs > button.active,
.pfr-sol-tab.active,
.vac-tabs > button.active,
.vac-tab.active,
.r7-tabs > button.active,
.r7-tab.active,
.hours-tab.active {
  color: var(--accent) !important;
  background-color: transparent !important;
}
.pfr-sol-tabs > button.active::after,
.pfr-sol-tab.active::after,
.vac-tabs > button.active::after,
.vac-tab.active::after,
.r7-tabs > button.active::after,
.r7-tab.active::after,
.hours-tab.active::after,
#hours-tabs > button.active::after {
  background: var(--accent) !important;
}

/* ════════════════════════════════════════════════════════════════
   Sticky tabs — pestañas internas de páginas (Horarios, Equipo, etc.)
   Se quedan pegadas al borde superior cuando se hace scroll.
   ════════════════════════════════════════════════════════════════ */
.pf-sticky-tabs,
#admin-vacreqs .vac4-filters,
#pfr-sol-tabs,
.r7-tabs {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: var(--bg) !important;
  padding-top: 10px;
  padding-bottom: 0;
}

/* Una pizca de sombra suave al hacer scroll para destacar */
.pf-sticky-tabs::after,
#pfr-sol-tabs::after,
.r7-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background: linear-gradient(to bottom, rgba(124, 92, 246, 0.06), transparent);
  pointer-events: none;
}

/* Layout 2 columnas para Turnos y Estructura — gestión de turnos coge más espacio */
.te-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1200px) {
  .te-layout {
    grid-template-columns: 1fr;
  }
}

/* Botones del sidebar admin (lista plana estilo mockup) */
.admin-sidebar-grouped .admin-nav-btn {
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text2);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.admin-sidebar-grouped .admin-nav-btn:hover {
  background: var(--surface);
  color: var(--text);
}
.admin-sidebar-grouped .admin-nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.admin-nav-icon {
  font-size: 14px;
  display: inline-flex;
  width: 18px;
  justify-content: center;
}

/* Cabecera de página dentro de las secciones admin */
.cfg-page-head {
  margin-bottom: 22px;
}
.cfg-page-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
}
.cfg-page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.cfg-loading {
  padding: 24px;
  font-size: 12.5px;
  color: var(--muted2);
  text-align: center;
}

/* Estado vacío grande (placeholder) */
.cfg-empty-card {
  padding: 60px 32px;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
  text-align: center;
}
.cfg-empty-card .cfg-empty-icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.6;
}
.cfg-empty-card .cfg-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0;
}
.cfg-empty-card .cfg-empty-sub {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 8px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.cfg-empty-card .cfg-empty-sub a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   Flujo 5 · Notificaciones (centro inbox+detalle)
   ════════════════════════════════════════════════════════════════ */

/* Header con icono + título + contador + acción */
.n5-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.n5-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
}
.n5-header-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg2);
}
.n5-header-text {
  flex: 1;
  min-width: 200px;
}
.n5-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--text);
}
.n5-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}
.n5-sub strong {
  color: var(--text);
  font-weight: 800;
}

.n5-action-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.12s ease;
}
.n5-action-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.n5-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Filtros chip */
.n5-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.n5-filter {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.n5-filter:hover {
  color: var(--text);
  border-color: var(--border2);
}
.n5-filter.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.n5-filter-count {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
}
.n5-filter.active .n5-filter-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Layout 2 columnas — siempre full-width del contenedor */
.n5-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 600px;
  width: 100%;
}
.n5-inbox {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  max-height: 80vh;
  min-width: 0;
}
.n5-detail {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-y: auto;
  max-height: 80vh;
  padding: 28px 32px;
  min-width: 0;
}

/* Sección contenedora — máx 1400px centrado (mismo criterio que Fichaje) */
#admin-notificaciones {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.n5-header,
.n5-filters,
.n5-layout {
  width: 100%;
  box-sizing: border-box;
}
.n5-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Item del inbox */
.n5-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
  align-items: flex-start;
  position: relative;
}
.n5-item:hover {
  background: var(--surface);
}
.n5-item.is-selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.n5-item.is-unread {
  /* indicador visual + dot */
}
.n5-dot {
  position: absolute;
  top: 17px;
  right: 42px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

/* Avatar con icono pequeño */
.n5-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.n5-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
}
.n5-avatar-cat {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg2);
  border: 2px solid var(--bg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

/* Icono solo (sin avatar de worker) */
.n5-cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.n5-cat-icon.n5-cat-severe {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Tonos por categoría (avatar pequeño y icono) */
.n5-cat-accent {
  background: var(--accent-soft);
  color: var(--accent);
}
.n5-cat-neutral {
  background: var(--surface2);
  color: var(--muted2);
}
.n5-cat-warn {
  background: #fef3c7;
  color: #92400e;
}
.n5-cat-danger {
  background: #fee2e2;
  color: #991b1b;
}
.n5-cat-success {
  background: #d1fae5;
  color: #065f46;
}

.n5-item-body {
  flex: 1;
  min-width: 0;
  padding-right: 16px;
}
.n5-item-top {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 2px;
}
.n5-cat-label {
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.n5-cat-label-accent {
  color: var(--accent);
}
.n5-cat-label-neutral {
  color: var(--muted2);
}
.n5-cat-label-warn {
  color: #92400e;
}
.n5-cat-label-danger {
  color: #991b1b;
}
.n5-cat-label-success {
  color: #065f46;
}

.n5-pin {
  font-size: 9px;
}
.n5-resolved {
  font-size: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: #065f46;
  background: #d1fae5;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

.n5-item-title {
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  font-weight: 600;
}
.n5-item-title.is-unread {
  font-weight: 800;
}
.n5-item-who {
  font-weight: 800;
}
.n5-item-detail {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.n5-item-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.n5-item-time {
  font-size: 10.5px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 0;
}

/* Botón "Ir →" dentro de la fila */
.n5-item-go {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.n5-item-go:hover {
  background: var(--accent);
  color: #fff;
}

/* Botón "✕" para borrar la fila */
.n5-item-del {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.12s ease;
}
.n5-item:hover .n5-item-del {
  opacity: 1;
}
.n5-item-del:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}
/* En táctil, mostrar siempre la X (no hay hover) */
@media (hover: none) {
  .n5-item-del {
    opacity: 0.55;
  }
}

/* Variante peligro del botón de acción del header */
.n5-action-btn-danger:hover:not(:disabled) {
  border-color: #fca5a5;
  color: #991b1b;
}

/* Detalle panel */
.n5-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.n5-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 19px;
  flex-shrink: 0;
}
.n5-detail-cat {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.n5-detail-headtxt {
  flex: 1;
  min-width: 0;
}
.n5-detail-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.n5-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
}
.n5-pill-accent {
  background: var(--accent-soft);
  color: var(--accent);
}
.n5-pill-neutral {
  background: var(--surface2);
  color: var(--muted2);
}
.n5-pill-warn {
  background: #fef3c7;
  color: #92400e;
}
.n5-pill-danger {
  background: #fee2e2;
  color: #991b1b;
}
.n5-pill-success {
  background: #d1fae5;
  color: #065f46;
}
.n5-pill-time {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
}
.n5-detail-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.2;
}
.n5-detail-who {
  color: var(--accent);
}
.n5-detail-meta {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
}

.n5-detail-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.n5-card {
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.n5-card-text {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}
.n5-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}
.n5-card-text {
  font-size: 14px;
  color: var(--text);
  margin-top: 8px;
  line-height: 1.55;
}
.n5-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.n5-activity-row {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text2);
}
.n5-activity-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--muted2);
  width: 80px;
  flex-shrink: 0;
}

/* Action bar */
.n5-actionbar {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  align-items: center;
}
.n5-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid transparent;
}
.n5-btn-ghost {
  background: transparent;
  color: var(--muted2);
  border-color: var(--border);
}
.n5-btn-ghost:hover {
  color: var(--text);
  border-color: var(--border2);
}
.n5-btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.n5-btn-accent:hover {
  background: #1858cc;
  box-shadow: 0 4px 12px -4px rgba(29, 108, 240, 0.4);
}

/* Empty states */
.n5-empty {
  padding: 60px 24px;
  text-align: center;
}
.n5-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.n5-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
}
.n5-empty-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
}

.n5-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.n5-detail-empty-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 14px;
}
.n5-detail-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0;
}
.n5-detail-empty-sub {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 6px;
  max-width: 280px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 980px) {
  .n5-layout {
    grid-template-columns: 1fr;
  }
  .n5-inbox {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 360px;
  }
}

/* Empty state */
.pfd-empty {
  padding: 40px 24px;
  text-align: center;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
}
.pfd-empty-icon {
  font-size: 42px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.pfd-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
}
.pfd-empty-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Foto de perfil */
.ew-foto-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.ew-foto-prev {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--surface2);
}
.ew-foto-prev img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ew-foto-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Empty state */
.tdef-empty {
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  text-align: center;
}
.tdef-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.tdef-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0;
}
.tdef-empty-sub {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 6px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   Planifly · Soft Pro — Pendientes (handoff 2026-05-13)
   ──────────────────────────────────────────────────────────────────
   Apéndice del rediseño. Cubre Festivos, Vacaciones admin, Plan,
   Mi horario, Vacaciones/Mis horas/Almuerzos trabajador, fallback
   .tdef-*/
.et-*, solicitudes y tweaks finales.
   Todo es aditivo y se ha pensado para anexarse al final del CSS.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1 · FESTIVOS (admin)
   ════════════════════════════════════════════════════════════════ */

.fh-header {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.fh-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fh-title-row .section-title,
.fh-title-row h2 {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}

.fh-ccaa-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 4px 4px 12px;
}
.fh-ccaa-wrap .f-label {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--muted2) !important;
}
.fh-ccaa-wrap .f-select {
  border: none !important;
  background: var(--surface2) !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
}

.fh-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fh-nav-row .btn {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
}
.fh-year {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: 0 !important;
  color: var(--text);
  min-width: 70px;
  text-align: center;
  padding: 0 4px;
}

/* Sticky tabs dentro de festivos */
.pf-sticky-tabs {
  position: sticky;
  top: 60px;
  z-index: 50;
  margin: -24px -24px 18px;
  padding: 16px 24px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(124, 92, 246, 0.04);
}

/* Listado lateral de festivos */
.fh-list-section {
  margin-bottom: 18px;
}
.fh-list-section-title {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--muted2) !important;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.fh-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.fh-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.fh-table tr:hover td {
  background: var(--surface2);
}
.fh-td-date {
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-size: 11px;
  white-space: nowrap;
  font-weight: 600;
}
.fh-td-name {
  color: var(--text);
  font-weight: 600;
}
.fh-td-actions {
  text-align: right;
}
.fh-td-actions .btn {
  margin-left: 4px;
}

/* Badges del listado */
.fh-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.fh-badge.nacional {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.fh-badge.autonomico {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.fh-badge.local {
  background: rgba(139, 92, 246, 0.12);
  color: var(--secondary);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.fh-badge.modified {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(29, 108, 240, 0.25);
}

/* Modal de festivo (overlay propio) */
.fh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.42) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pf-rise 0.18s ease-out;
}
.fh-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: 92%;
  max-width: 460px;
  overflow: hidden;
  animation: pf-rise 0.22s ease-out;
}
.fh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  color: var(--text);
}
.fh-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--surface2);
  border-radius: var(--r-md);
  font-size: 16px;
  color: var(--muted2);
  cursor: pointer;
  transition: all 0.15s;
}
.fh-modal-close:hover {
  background: var(--red);
  color: #fff;
}
.fh-modal-body {
  padding: 22px;
}
.fh-modal-body .f-group {
  margin-bottom: 14px;
}
.fh-modal-body .f-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--muted2) !important;
  margin-bottom: 6px;
  display: block;
}
.fh-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Canvas festivos/vacaciones: bordes y fondo */
#fh-canvas,
#vac-canvas {
  border-radius: var(--r-md);
  background: var(--bg2);
}

/* Botón añadir festivo local */
.fh-add-local-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.fh-add-local-row p {
  font-size: 12px;
  color: var(--muted2);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   2 · VACACIONES admin (timeline + ficha personal)
   ════════════════════════════════════════════════════════════════ */

#vac-personal-toolbar {
  background: var(--surface);
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin-top: 14px;
}
#vac-personal-toolbar .f-select {
  font-weight: 600 !important;
}

#admin-vacaciones [onclick^="vacGenSetGroup"],
#admin-vacaciones [onclick^="vacGenSetType"],
#admin-vacaciones [onclick^="vacSetRegType"] {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}
#admin-vacaciones [onclick^="vacGenSetGroup"]:hover,
#admin-vacaciones [onclick^="vacGenSetType"]:hover,
#admin-vacaciones [onclick^="vacSetRegType"]:hover {
  transform: translateY(-1px);
}

#vac-body table {
  font-family: "Inter", sans-serif !important;
  border-collapse: collapse;
}
#vac-body table thead td {
  background: var(--bg2) !important;
}
#vac-body span[style*="font-family:'Inter'"] {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

#admin-vacaciones .f-input[type="date"],
#admin-vacaciones .f-select {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 500;
}

#vac-summary-panel table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
#vac-summary-panel th {
  background: var(--surface) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--muted2) !important;
  text-transform: uppercase;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left;
}
#vac-summary-panel td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════
   3 · PLAN / FACTURACIÓN (#plan-dashboard, #admin-plan)
   ════════════════════════════════════════════════════════════════ */

#plan-dashboard .a-card {
  position: relative;
  overflow: hidden;
}

#plan-dashboard .a-card[style*="linear-gradient"]:first-child {
  background: linear-gradient(
    135deg,
    var(--accent-soft) 0%,
    var(--secondary-soft) 100%
  ) !important;
  border: 1px solid var(--accent-soft) !important;
  box-shadow: 0 4px 16px -8px rgba(29, 108, 240, 0.15);
}

#plan-dashboard [style*="display:flex;flex-direction:column;gap:4px"] {
  transition: all 0.15s ease;
}
#plan-dashboard [style*="display:flex;flex-direction:column;gap:4px"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

#plan-dashboard [style*="border:2px solid"][style*="border-radius:14px"] {
  border-radius: var(--r-lg) !important;
  transition: all 0.2s ease;
}
#plan-dashboard [style*="border:2px solid"][style*="border-radius:14px"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Toggle billing period */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border2);
  border-radius: var(--r-pill);
  transition: 0.2s;
}
.toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ══════════════════════════════════════════════════════════════════
   4 · MI HORARIO (trabajador) — view-personal
   ════════════════════════════════════════════════════════════════ */

#view-personal {
  padding: 4px 0;
}

.personal-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  background: linear-gradient(
    135deg,
    var(--accent-soft) 0%,
    var(--secondary-soft) 100%
  );
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.personal-header::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.personal-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 32%;
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--secondary)
  ) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px -4px rgba(124, 92, 246, 0.4);
  position: relative;
  z-index: 1;
}
.personal-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.personal-info h2 {
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  color: var(--text);
  margin: 0 0 4px 0;
}
.personal-info p {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  color: var(--muted2);
  margin: 0;
  letter-spacing: 0.02em;
}
.personal-month-badge {
  text-align: right;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.personal-month-name {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 4px;
}
.personal-month-year {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0;
  color: var(--accent);
  line-height: 1;
}

.personal-stats-strip {
  display: flex;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.personal-stat {
  flex: 1;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.personal-stat:last-child {
  border-right: none;
}
.personal-stat-label {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 6px;
}
.personal-stat-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.personal-stat-value.warn {
  color: var(--amber);
}
.personal-stat-value.ok {
  color: var(--green);
}

/* Calendario mensual del trabajador */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.cal-hdr {
  text-align: center;
  font-family: "Inter", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--muted2) !important;
  padding: 8px 0 !important;
}
.cal-day {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 8px !important;
  min-height: 80px !important;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
  position: relative;
}
.cal-day:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cal-day.empty {
  background: transparent !important;
  border-color: transparent !important;
  pointer-events: none;
}
.cal-day.today {
  border: 2px solid var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 0 4px rgba(29, 108, 240, 0.1);
}
.cal-day.today::before {
  content: "HOY";
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.cal-day-num {
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}
.cal-day.today .cal-day-num {
  color: var(--accent) !important;
  font-weight: 800 !important;
}
.cal-shift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px !important;
  border-radius: var(--r-sm) !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  width: 100% !important;
  margin-bottom: 4px !important;
}
.cal-hours {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 10px !important;
  color: var(--muted2) !important;
  line-height: 1.4 !important;
  font-weight: 500;
}
.cal-note-text {
  font-size: 10px !important;
  color: var(--secondary) !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  padding: 3px 6px;
  background: var(--secondary-soft);
  border-radius: 4px;
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════
   5 · VACACIONES TRABAJADOR (#view-vacaciones-w)
   ════════════════════════════════════════════════════════════════ */

#view-vacaciones-w {
  padding: 4px 0;
}

.vw-balance-card {
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  color: #fff;
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(124, 92, 246, 0.4);
}
.vw-balance-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.vw-balance-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 12px;
}
.vw-balance-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: 0;
  line-height: 1;
}
.vw-balance-value small {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.7;
}
.vw-balance-progress {
  margin-top: 18px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.vw-balance-progress > div {
  height: 100%;
  background: #fff;
  border-radius: var(--r-pill);
}

.vw-period-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.15s ease;
}
.vw-period-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.vw-period-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.vw-period-icon.summer {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.vw-period-icon.medical {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
}
.vw-period-main {
  flex: 1;
  min-width: 0;
}
.vw-period-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.vw-period-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted2);
}

/* ══════════════════════════════════════════════════════════════════
   6 · MIS HORAS (trabajador) #view-mis-horas
   ════════════════════════════════════════════════════════════════ */

#view-mis-horas {
  padding: 4px 0;
}

.mh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.mh-kpi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}
.mh-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.mh-kpi-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}
.mh-kpi-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.mh-kpi-value.warn {
  color: var(--amber);
}
.mh-kpi-value.ok {
  color: var(--green);
}
.mh-kpi-value.neg {
  color: var(--red);
}
.mh-kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

.mh-week-bars {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.mh-week-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
}
.mh-week-track {
  height: 10px;
  background: var(--surface2);
  border-radius: var(--r-pill);
  position: relative;
  overflow: visible;
}
.mh-week-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  border-radius: var(--r-pill);
  position: absolute;
  top: 0;
  left: 0;
}
.mh-week-fill.over {
  background: linear-gradient(90deg, var(--amber), var(--red));
}
.mh-week-target {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--text);
  opacity: 0.6;
}
.mh-week-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════
   7 · ALMUERZOS (#view-almuerzos, admin-almuerzos)
   ════════════════════════════════════════════════════════════════ */

#view-almuerzos {
  padding: 4px 0;
}

.al-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.al-day-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.al-day-row:last-child {
  border-bottom: none;
}
.al-day-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
}
.al-day-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.al-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  transition: all 0.15s;
}
.al-time-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.al-time-chip.taken {
  background: var(--secondary-soft);
  color: var(--secondary);
  border-color: rgba(139, 92, 246, 0.3);
  text-decoration: line-through;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════
   8 · TWEAKS finales sobre cosas YA HECHAS
   ════════════════════════════════════════════════════════════════ */

/* Tabla General — hover de fila más fluido */
tbody tr:hover .shift {
  filter: brightness(0.98);
}

/* Print header — más identidad */
.print-header {
  padding: 8px 0 6px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 12px;
}
.print-header-logo {
  color: var(--accent) !important;
}

/* Logo header en app: gradient en el dot */
.logo-dot {
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--secondary)
  ) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Empty msg consistente */
.empty-msg {
  background: var(--bg2);
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
  padding: 32px;
  font-size: 13px;
  color: var(--muted2);
}

/* Iconos del sidebar admin más nítidos */
.admin-nav-btn:hover .admin-nav-icon {
  transform: scale(1.1);
  transition: transform 0.15s;
}

/* Badges (PRO, BORRADOR, etc.) */
.a-badge {
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}
.a-badge.amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--amber) !important;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ══════════════════════════════════════════════════════════════════
   Fichaje · Admin · Soft Pro (handoff 2026-05-13)
   ──────────────────────────────────────────────────────────────────
   Estilos para view-fichaje admin (5 pestañas):
   1 · Hoy        2 · Historial   3 · Solicitudes
   4 · Config     5 · Exportar
   Clases prefijo .fch-* — la lógica JS no se toca.
   ══════════════════════════════════════════════════════════════════ */

/* ── Wrapper del admin (dentro de #fichaje-admin-view) ──────────── */
#fichaje-admin-view .fch-wrap {
  background: transparent;
  border: none;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  /* OJO: NO usar overflow:hidden aquí — rompería el position:sticky de .fch-sticky-head.
     El recorte visual del banner lila lo hace .fch-page-head con su propio overflow:hidden. */
  max-width: none;
  margin: 0;
}

/* ── Page head con gradient (kicker + título + sub) ─────────────── */
.fch-page-head {
  padding: 22px 28px;
  background: linear-gradient(
    135deg,
    var(--accent-soft) 0%,
    var(--secondary-soft) 100%
  );
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* ── Sticky header bundle: page-head + tabs viajan juntos pegados arriba ── */
.fch-sticky-head {
  position: sticky;
  top: 56px; /* debajo del .header global (height: 56px) */
  z-index: 40;
  background: var(--bg2) !important;
}

/* Cuando el sticky bundle vive dentro de una sección admin (Horarios, Permisos…),
   le damos margen negativo para que el banner cubra todo el ancho ignorando el
   padding del .admin-content (20px). */
.admin-section > .fch-sticky-head {
  margin: -20px -20px 0;
  background: var(--bg2) !important;
}

/* Cuando vive dentro del wrapper de Fichaje (.fch-wrap), NO usamos margen negativo:
   el wrapper ya tiene su propio border-radius y debe contener el banner. Recortamos
   con border-radius arriba para que el banner respete las esquinas del wrapper. */
#fichaje-admin-view .fch-wrap > .fch-sticky-head {
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  overflow: hidden;
}
.fch-page-head::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.2) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.fch-page-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.fch-page-h1 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.fch-page-sub {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* ── Tabs admin (underline accent) ──────────────────────────────── */
.fch-a-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border);
  align-items: center;
  flex-wrap: wrap;
}
.fch-a-tab {
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fch-a-tab:hover {
  color: var(--text);
}
.fch-a-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 800;
}

/* ── Móvil: las tabs admin no envuelven, deslizan horizontal ── */
@media (max-width: 640px) {
  .fch-a-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px;
  }
  .fch-a-tabs::-webkit-scrollbar {
    display: none;
  }
  .fch-a-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 14px;
    font-size: 12.5px;
  }
}
.fch-a-tab .count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--red);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
}
.fch-a-spacer {
  flex: 1;
}
.fch-a-clock {
  align-self: center;
  padding: 6px 16px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(29, 108, 240, 0.25);
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ── Stats row (4 KPIs) ─────────────────────────────────────────── */
.fch-a-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 24px 28px 0;
}
@media (max-width: 980px) {
  .fch-a-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.fch-a-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative;
  transition: all 0.15s;
}
.fch-a-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.fch-a-stat-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.fch-a-stat-icon.ok {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
}
.fch-a-stat-icon.warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
}
.fch-a-stat-icon.late {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}
.fch-a-stat-icon.team {
  background: var(--accent-soft);
  color: var(--accent);
}
.fch-a-stat-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}
.fch-a-stat-value {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.fch-a-stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* ── Content container ──────────────────────────────────────────── */
.fch-a-content {
  padding: 24px 28px;
}
.fch-a-table-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: auto; /* scroll horizontal si la tabla no cabe */
  width: 100%; /* ocupa el ancho disponible del contenedor */
  vertical-align: top;
}
.fch-table-scroll {
  min-height: 0;
  overflow: auto;
}
.fch-a-tbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.fch-a-tbar-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
}

/* ── Inputs / search / chips / buttons (scoped a fch-) ──────────── */
.fch-search {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 12px;
  font-size: 12px;
  width: 220px;
  outline: none;
  font-family: "Inter", sans-serif;
  color: var(--text);
}
.fch-search:focus {
  border-color: var(--accent);
}
.fch-chips {
  display: inline-flex;
  gap: 4px;
  background: var(--bg2);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.fch-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted2);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.fch-chip:hover {
  color: var(--text);
}
.fch-chip.active {
  background: var(--text);
  color: var(--bg2);
}
.fch-input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  background: var(--bg2);
  color: var(--text);
  outline: none;
}
.fch-input:focus {
  border-color: var(--accent);
}
.fch-mes-nav {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg2);
  overflow: hidden;
}
.fch-mes-nav .fch-mes-arrow {
  background: transparent;
  border: 0;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}
.fch-mes-nav .fch-mes-arrow:hover {
  background: var(--bg3, rgba(0, 0, 0, 0.04));
  color: var(--accent);
}
.fch-mes-nav .fch-mes-label {
  padding: 7px 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 130px;
  text-align: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.fch-btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--r-md);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.fch-btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(29, 108, 240, 0.4);
}
.fch-btn-accent:hover {
  transform: translateY(-1px);
}
.fch-btn-ghost {
  background: transparent;
  color: var(--muted2);
  border: 1px solid var(--border2);
}
.fch-btn-ghost:hover {
  background: var(--surface2);
  color: var(--text);
}
.fch-btn-soft {
  background: var(--accent-soft);
  color: var(--accent);
}
.fch-btn-soft:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Tabla principal — llena el wrapper, expande columna nombre ─── */
.fch-table {
  width: 100%; /* ocupa todo el wrapper */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.fch-table th {
  background: var(--surface);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fch-table td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  white-space: nowrap;
}
.fch-table tr:last-child td {
  border-bottom: none;
}
.fch-table tr:hover td {
  background: var(--surface2);
}

/* Primera columna (trabajador) pegada a la izquierda;
   las demás columnas reparten el espacio sobrante uniformemente */
.fch-table th,
.fch-table td {
  text-align: center;
}
.fch-table th:first-child,
.fch-table td:first-child {
  text-align: left;
  white-space: nowrap;
}

/* Tabla siempre alineada a la izquierda dentro de su wrapper */
.fch-a-table-wrap,
.fch-hist-day-group {
  text-align: left;
}

/* ── Worker cell (avatar + nombre + rol) ────────────────────────── */
.fch-w-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.fch-w-av {
  width: 32px;
  height: 32px;
  border-radius: 30%;
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.fch-w-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fch-w-name {
  font-weight: 700;
  color: var(--text);
  text-align: left;
}
.fch-w-role {
  font-size: 11px;
  color: var(--muted2);
  text-align: left;
}
.fch-table td .fch-w-cell {
  text-align: left;
}
.fch-table .fch-w-cell + * {
  text-align: left;
}

/* ── Time / hours / status ──────────────────────────────────────── */
.fch-time {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.fch-time-late {
  color: var(--amber);
  font-weight: 800;
}
.fch-time-meta {
  font-size: 10px;
  color: var(--muted2);
  margin-top: 2px;
  font-weight: 500;
}

.fch-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.fch-status.in {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.fch-status.in::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: fch-pulse 1.6s ease-in-out infinite;
}
@keyframes fch-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.fch-status.out {
  background: var(--surface2);
  color: var(--muted2);
}
.fch-status.pause {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.fch-status.absent {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.fch-status.done {
  background: var(--secondary-soft);
  color: var(--secondary);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.fch-status.pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.fch-status.approved {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.fch-status.rejected {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.fch-hours {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.fch-hours.warn {
  color: var(--amber);
}
.fch-hours.ok {
  color: var(--green);
}
.fch-hours.neg {
  color: var(--red);
}

.fch-actions {
  display: inline-flex;
  gap: 4px;
}
.fch-act-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  background: var(--surface2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted2);
  transition: all 0.15s;
}
.fch-act-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.fch-act-btn.approve {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}
.fch-act-btn.approve:hover {
  background: var(--green);
  color: #fff;
}
.fch-act-btn.reject {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}
.fch-act-btn.reject:hover {
  background: var(--red);
  color: #fff;
}
.fch-act-btn.add {
  background: var(--accent);
  color: #fff;
}
.fch-act-btn.add:hover {
  background: var(--secondary);
}

.fch-geo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.08);
  color: var(--green);
}
.fch-geo.warn {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
}
.fch-geo.muted {
  background: var(--surface2);
  color: var(--muted2);
}

/* ── Solicitudes — cards ────────────────────────────────────────── */
.fch-req-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fch-req-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: flex-start;
  transition: all 0.15s;
}
.fch-req-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.fch-req-card.urgent {
  border-left-color: var(--red);
}
.fch-req-card.approved {
  border-left-color: var(--green);
  background: rgba(16, 185, 129, 0.04);
}
.fch-req-card.rejected {
  border-left-color: var(--muted);
  background: rgba(239, 68, 68, 0.04);
}
.fch-req-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.fch-req-icon.olvido {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.fch-req-icon.correccion {
  background: var(--accent-soft);
  color: var(--accent);
}
.fch-req-icon.ausencia {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.fch-req-icon.done {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}
.fch-req-body {
  min-width: 0;
}
.fch-req-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.fch-req-cat {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--amber);
  text-transform: uppercase;
}
.fch-req-cat.olvido {
  color: #b91c1c;
}
.fch-req-cat.correccion {
  color: var(--accent);
}
.fch-req-cat.ausencia {
  color: var(--secondary);
}
.fch-req-cat.done {
  color: #047857;
}
.fch-req-cat.rejected {
  color: #b91c1c;
}
.fch-req-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.fch-req-meta {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.5;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fch-req-detail {
  font-size: 13px;
  color: var(--text);
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  line-height: 1.5;
}
.fch-req-detail strong {
  color: var(--text);
  font-weight: 700;
}
.fch-req-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fch-req-actions .fch-btn {
  width: 130px;
  justify-content: center;
}
.fch-req-actions .fch-btn-approve {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}
.fch-req-actions .fch-btn-approve:hover {
  background: var(--green);
  color: #fff;
}
.fch-req-actions .fch-btn-reject {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}
.fch-req-actions .fch-btn-reject:hover {
  background: var(--red);
  color: #fff;
}
.fch-req-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}

/* ── Config — layout 2 columnas ─────────────────────────────────── */
.fch-cfg-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px 28px;
}
/* Separador entre secciones: línea que cruza de extremo a extremo */
#shifts-tab-reglas .fch-cfg-grid + .fch-cfg-grid {
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
@media (max-width: 980px) {
  .fch-cfg-grid {
    grid-template-columns: 1fr;
  }
}
.fch-cfg-main,
.fch-cfg-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fch-cfg-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.fch-cfg-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.fch-cfg-card-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 16px;
}

/* Override defensivo: ningún title/sub debe llevar borde, outline ni fondo propio */
.fch-cfg-card-title,
.fch-cfg-card-sub {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fch-cfg-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.fch-cfg-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.fch-cfg-row:first-child {
  padding-top: 0;
}
.fch-cfg-row-main {
  flex: 1;
  min-width: 0;
}
.fch-cfg-row-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 3px;
}
.fch-cfg-row-desc {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.5;
}

/* Toggle visual sobre checkbox real (oculto, sigue funcionando JS) */
.fch-cfg-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border2);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-block;
}
.fch-cfg-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.fch-cfg-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
  z-index: 1;
}
.fch-cfg-toggle:has(input:checked) {
  background: var(--accent);
}
.fch-cfg-toggle:has(input:checked)::before {
  transform: translateX(18px);
}

.fch-cfg-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fch-cfg-stepper button {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
}
.fch-cfg-stepper button:hover {
  background: var(--surface2);
  color: var(--accent);
}
.fch-cfg-stepper input {
  width: 50px;
  height: 30px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  outline: none;
  background: var(--bg2);
}
.fch-cfg-stepper-suffix {
  padding: 0 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted2);
  font-weight: 600;
}

/* Radios estilizados (con input radio real funcionando) */
.fch-cfg-radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.fch-cfg-radio-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  background: var(--bg2);
}
.fch-cfg-radio-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fch-cfg-radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fch-cfg-radio-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fch-cfg-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border2);
  position: relative;
  margin-top: 1px;
  background: var(--bg2);
}
.fch-cfg-radio-item:has(input:checked) .fch-cfg-radio-dot {
  border-color: var(--accent);
}
.fch-cfg-radio-item:has(input:checked) .fch-cfg-radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.fch-cfg-radio-text {
  min-width: 0;
  flex: 1;
}
.fch-cfg-radio-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.fch-cfg-radio-desc {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
  line-height: 1.4;
}
.fch-cfg-legal {
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    var(--secondary-soft)
  );
  border: 1px solid rgba(29, 108, 240, 0.2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.6;
}
.fch-cfg-legal strong {
  color: var(--text);
}
.fch-cfg-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.fch-cfg-tip {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.06),
    rgba(245, 158, 11, 0.02)
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.fch-cfg-tip-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--amber);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fch-cfg-tip-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
}

/* Summary side card rows */
.fch-cfg-sum {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.fch-cfg-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.fch-cfg-sum-row > span:first-child {
  color: var(--muted2);
}
.fch-cfg-sum-row > span:last-child {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  color: var(--text);
}

/* ── Card con panel lateral propio (resumen + tip por sección) ──────
   Cada .fch-cfg-card--split tiene su cuerpo a la izquierda y un aside
   (resumen + tip) a la derecha, alineado siempre con su propia sección.
   En móvil/tablet (<=980px, mismo breakpoint que el layout) el aside
   se oculta: en pantalla pequeña no hace falta resumen ni tip. */
.fch-cfg-card--split {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.fch-cfg-card--split .fch-cfg-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.fch-cfg-card-aside {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* El "Resumen actual" dentro del aside: cajita sutil para separarlo
   visualmente del cuerpo de la card sin romper el estilo existente. */
.fch-cfg-card-aside .fch-cfg-sum-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.fch-cfg-card-aside .fch-cfg-sum-box-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
@media (max-width: 980px) {
  .fch-cfg-card--split {
    display: block;
  }
  .fch-cfg-card-aside {
    display: none;
  }
}

/* Coordenadas (grid 3 columnas) */
.fch-cfg-coords {
  display: grid;
  grid-template-columns: 1fr 1fr 130px;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .fch-cfg-coords {
    grid-template-columns: 1fr;
  }
}
.fch-cfg-coords-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Exportar — formulario + grid cards ─────────────────────────── */
.fch-exp-form {
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin: 0 28px 24px;
}
.fch-exp-form-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.fch-exp-form-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fch-exp-form-row label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
}
.fch-exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 28px 24px;
}
@media (max-width: 760px) {
  .fch-exp-grid {
    grid-template-columns: 1fr;
  }
}
.fch-exp-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: all 0.15s;
}
.fch-exp-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.fch-exp-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.fch-exp-icon.csv {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
}
.fch-exp-icon.pdf {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}
.fch-exp-icon.payroll {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.fch-exp-icon.stats {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green);
}
.fch-exp-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--text);
}
.fch-exp-desc {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.5;
  margin-bottom: 12px;
}
.fch-exp-card .fch-btn {
  width: 100%;
  justify-content: center;
}
.fch-btn-red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(239, 68, 68, 0.4);
}
.fch-btn-red:hover {
  transform: translateY(-1px);
}
.fch-btn-purple {
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
}
.fch-btn-purple:hover {
  transform: translateY(-1px);
}
.fch-btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.4);
}
.fch-btn-green:hover {
  transform: translateY(-1px);
}
.fch-exp-auto {
  margin: 0 28px 24px;
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    var(--secondary-soft)
  );
  border: 1px solid rgba(29, 108, 240, 0.2);
  border-radius: var(--r-lg);
  padding: 18px 22px;
}
.fch-exp-auto-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Historial — agrupado por día ───────────────────────────────── */
.fch-hist-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.fch-hist-day-group {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.fch-hist-day-group:last-child {
  border-bottom: none;
}
.fch-hist-day-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fch-hist-day-date {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--text);
}
.fch-hist-day-stats {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
  flex-wrap: wrap;
}
.fch-hist-day-stats strong {
  color: var(--text);
}
.fch-hist-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted2);
}

/* Page-head dentro de view-fichaje: que herede del padre layout */
#view-fichaje .fichaje-header {
  display: none;
} /* el page-head sustituye al título antiguo */

/* Empty state genérico para los tabs */
.fch-empty {
  padding: 48px 24px;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
}
.fch-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.6;
}
.fch-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.fch-empty-sub {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   EQUIPOS Y PERMISOS · Shell (FASE 2)
   Breadcrumb + título + acciones + contadores en pestañas
   ═══════════════════════════════════════════════════════════════════ */

.ep-head {
  padding: 12px 0 8px;
  margin-bottom: 18px;
  overflow: visible;
}
.ep-crumb {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.ep-crumb-up {
  cursor: pointer;
  transition: color 0.15s;
}
.ep-crumb-up:hover {
  color: var(--accent);
}
.ep-crumb-sep {
  color: var(--muted2);
  font-weight: 700;
}
.ep-crumb-cur {
  color: var(--text);
  font-weight: 700;
}
.ep-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  overflow: visible;
}
.ep-titlebar > div:first-child {
  flex: 1;
  min-width: 280px;
}
.ep-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 12px 0;
  padding: 0;
  display: block;
}
.ep-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
  padding: 0 0 8px 0;
  display: block;
  overflow: visible;
}
.ep-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
}
.ep-btn-audit,
.ep-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
}

/* ── Móvil: el shell de Equipos y permisos baja las acciones (Nuevo
   equipo / Auditoría) a una segunda fila para que NO se solapen con
   las pestañas. Sobrescribimos los inline styles del index.html. ── */
@media (max-width: 640px) {
  #admin-workers .fch-sticky-head > div[style*="space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #admin-workers .fch-a-tabs#ep-tabs {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #admin-workers .fch-a-tabs#ep-tabs::-webkit-scrollbar {
    display: none;
  }
  #admin-workers .fch-a-tabs#ep-tabs .fch-a-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  #admin-workers .ep-actions {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }
  #admin-workers .ep-actions .ep-btn-cta,
  #admin-workers .ep-actions .ep-btn-audit {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.ep-btn-audit {
  font-family: "Inter", sans-serif;
}

/* Contadores dentro de las pestañas */
.ep-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-weight: 800;
  background: var(--bg3);
  color: var(--muted2);
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
}
#ep-tabs button.active .ep-tab-count {
  background: var(--accent);
  color: #fff;
}

/* Empty panel temporal (mostrado hasta que la fase rellene) */
.ep-empty-panel {
  padding: 60px 24px;
  text-align: center;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
  margin-top: 20px;
}
.ep-empty-icon {
  font-size: 44px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.ep-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}
.ep-empty-text {
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.5;
}

/* Ocultar el botón legacy ptab-roles sin afectar layout flex */
#ep-tabs #ptab-roles {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EQUIPOS Y PERMISOS · Pestaña Equipos (FASE 3)
   Layout: lista izquierda + detalle derecha (hero + puestos + miembros)
   ═══════════════════════════════════════════════════════════════════ */

.epq-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  min-height: 600px;
}

/* ── Aside (lista de equipos) ───────────────────────────── */
.epq-aside {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
  position: sticky;
  top: 14px;
}
.epq-aside-head {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0 6px 6px;
}
.epq-team-card {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    background 0.15s,
    border-color 0.15s;
  position: relative;
}
.epq-team-card:hover {
  background: var(--bg3);
}
/* Asita de arrastre para reordenar oficinas */
.epq-team-drag {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--muted3, var(--muted2));
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  cursor: grab;
  user-select: none;
  transition:
    opacity 0.12s,
    color 0.12s;
}
.epq-team-card:hover .epq-team-drag {
  opacity: 0.55;
}
.epq-team-drag:hover {
  opacity: 1;
  color: var(--accent);
}
.epq-team-card.is-dragging {
  opacity: 0.4;
}
.epq-team-card.epq-drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}
.epq-team-card.sel {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.epq-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.epq-team-emoji {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.epq-team-main {
  flex: 1;
  min-width: 0;
}
.epq-team-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.epq-team-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.epq-team-vacdot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--warn, #f59e0b);
  flex-shrink: 0;
}
.epq-team-foot {
  display: flex;
  align-items: center;
}
.epq-team-avs {
  display: flex;
  align-items: center;
  flex: 1;
}
.epq-av-stack {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  border: 2px solid var(--surface);
  flex-shrink: 0;
}
.epq-av-extra {
  margin-left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg3);
  color: var(--muted2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  border: 2px solid var(--surface);
}
.epq-aside-add {
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px dashed var(--border2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.epq-aside-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Detalle ───────────────────────────────────────────── */
.epq-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Hero ──────────────────────────────────────────────── */
.epq-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.epq-hero-emoji {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.epq-hero-main {
  flex: 1;
  min-width: 240px;
}
.epq-hero-titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.epq-hero-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
}
.epq-hero-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.epq-hero strong {
  color: var(--text);
}
.epq-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--text);
}

/* ── Pills (reutilizables) ─────────────────────────────── */
.epq-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  line-height: 1.4;
}
.epq-pill-neutral {
  background: var(--bg3);
  color: var(--muted2);
}
.epq-pill-warn {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.epq-pill-ok {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}
.epq-pill-danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

/* ── Secciones ─────────────────────────────────────────── */
.epq-section {
  margin-top: 4px;
}
.epq-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.epq-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
}
.epq-section-hint {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.epq-section-actions {
  display: flex;
  gap: 6px;
}

/* ── Subroles grid ─────────────────────────────────────── */
.epq-subroles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.epq-subrole-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.epq-subrole-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.epq-subrole-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}
.epq-mini-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 6px;
}
.epq-mini-btn:hover {
  background: var(--bg3);
  color: var(--text);
}
.epq-subrole-bignum {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.05;
}
.epq-subrole-denom {
  color: var(--muted2);
  font-size: 14px;
  font-weight: 700;
}
.epq-subrole-bar {
  height: 4px;
  background: var(--bg3);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.epq-subrole-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s;
}
.epq-subrole-fill.epq-ok {
  background: #22c55e;
}
.epq-subrole-fill.epq-warn {
  background: #f59e0b;
}
.epq-subrole-fill.epq-bad {
  background: #ef4444;
}
.epq-subrole-status {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.epq-subrole-add {
  background: transparent;
  border: 1.5px dashed var(--border2);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.epq-subrole-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Tabla de miembros ─────────────────────────────────── */
.epq-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.epq-head-row,
.epq-row {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 80px 110px 80px 36px;
  align-items: center;
  padding: 10px 16px;
  gap: 12px;
  font-size: 12.5px;
}
.epq-head-row {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.epq-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.epq-row:last-child {
  border-bottom: none;
}
.epq-row:hover {
  background: rgba(124, 92, 246, 0.04);
}
.epq-cell-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.epq-row-name {
  font-weight: 700;
  color: var(--text);
}
.epq-row-user {
  font-size: 11px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.epq-cell-role {
  color: var(--text2);
}
/* Celda de puestos editable */
.epq-role-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  cursor: pointer;
  border-radius: 7px;
  padding: 2px 4px;
  transition: background 0.12s;
}
.epq-role-cell:hover {
  background: var(--bg3);
}
.epq-role-chip {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.epq-role-edit {
  color: var(--muted2);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.12s;
}
.epq-row:hover .epq-role-edit {
  opacity: 0.7;
}
/* Popover de selección de puestos */
.epq-role-pop {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 8px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
}
.epq-role-pop-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  padding: 4px 8px 8px;
}
.epq-role-pop-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.epq-role-pop-row:hover {
  background: var(--bg3);
}
.epq-role-pop-row input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.epq-cell-hours {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.epq-cell-hire {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.epq-muted {
  color: var(--muted2);
  font-style: italic;
  font-size: 11.5px;
}
.epq-row-more {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 6px;
}
.epq-row-more:hover {
  background: var(--bg3);
  color: var(--text);
}
.epq-table-empty {
  padding: 40px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 13px;
}

/* ── Empty global (no equipos) ─────────────────────────── */
.epq-empty {
  padding: 60px 24px;
  text-align: center;
  background: var(--bg2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
}
.epq-empty-icon {
  font-size: 44px;
  opacity: 0.6;
  margin-bottom: 12px;
}
.epq-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}
.epq-empty-text {
  font-size: 13px;
  color: var(--muted2);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 980px) {
  .epq-grid {
    grid-template-columns: 1fr;
  }
  .epq-aside {
    position: static;
  }
  .epq-head-row,
  .epq-row {
    grid-template-columns: 1.4fr 1fr 60px 60px;
  }
  .epq-cell-hire,
  .epq-row-more {
    display: none;
  }
}

/* ── EPQ · Modal Nuevo / Editar equipo ─────────────────── */
.epq-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.epq-modal-box {
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.epq-modal-head {
  padding: 18px 22px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.epq-modal-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0;
}
.epq-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.epq-modal-close:hover {
  background: var(--bg3);
  color: var(--text);
}
.epq-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.epq-modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.epq-modal-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.epq-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.epq-emoji-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s,
    transform 0.12s;
}
.epq-emoji-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.epq-emoji-btn.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.epq-color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.epq-color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.epq-modal-foot {
  padding: 14px 22px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   EQUIPOS Y PERMISOS · Pestaña Roles de administración (FASE 4)
   ═══════════════════════════════════════════════════════════════════ */

.epr-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  min-height: 600px;
}

/* ── Aside roles ───────────────────────────────────────── */
.epr-aside {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
  position: sticky;
  top: 14px;
}
.epr-aside-head {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0 6px 6px;
}
.epr-role-card {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.epr-role-card:hover {
  background: var(--bg3);
}
.epr-role-card.sel {
  background: var(--surface2);
  border-color: var(--border2);
}
.epr-role-headrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.epr-role-count {
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}
.epr-role-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}
.epr-role-scope {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Detalle derecha ───────────────────────────────────── */
.epr-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Hero del rol ──────────────────────────────────────── */
.epr-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.epr-hero-left {
  flex: 1;
  min-width: 280px;
}
.epr-hero-titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.epr-hero-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text);
}
.epr-hero-desc {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.5;
}
.epr-hero-right {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.epr-mini {
  font-size: 11.5px;
  padding: 6px 12px;
}

/* ── Matriz de permisos ────────────────────────────────── */
.epr-perm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.epr-perm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.epr-perm-group {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.epr-perm-group:first-child,
.epr-perm-group:nth-child(2) {
  border-top: none;
}
.epr-perm-group-title {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
}
.epr-perm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.epr-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.epr-perm-row.on {
  background: rgba(34, 197, 94, 0.07);
}
.epr-perm-label {
  font-size: 12.5px;
  color: var(--muted2);
  transition: color 0.15s;
}
.epr-perm-row.on .epr-perm-label {
  color: var(--text);
  font-weight: 600;
}
.epr-toggle {
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg3);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.epr-toggle.on {
  background: #22c55e;
}
.epr-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  transition: left 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.epr-toggle.on .epr-toggle-knob {
  left: 14px;
}
.epr-perm-foot {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-style: italic;
}

/* ── Sección ───────────────────────────────────────────── */
.epr-section {
  margin-top: 4px;
}
.epr-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.epr-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
}
.epr-section-actions {
  display: flex;
  gap: 6px;
}

/* ── Tabla de admins ───────────────────────────────────── */
.epr-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.epr-head-row,
.epr-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 80px 100px;
  align-items: center;
  padding: 10px 16px;
  gap: 12px;
  font-size: 12.5px;
}
.epr-head-row {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.epr-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.epr-row:last-child {
  border-bottom: none;
}
.epr-row:hover {
  background: rgba(124, 92, 246, 0.04);
}
.epr-cell-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.epr-row-name {
  font-weight: 700;
  color: var(--text);
}
.epr-self {
  font-size: 10px;
  color: var(--muted2);
  font-weight: 400;
}
.epr-mini-pill {
  font-size: 10px;
  padding: 1px 6px;
}
.epr-cell-email {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.epr-cell-scope {
  color: var(--text2);
}
.epr-cell-last {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
}

.epr-empty {
  padding: 30px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 13px;
}

/* ── Soporte para epq-pill tones (alias) ────────────────── */
.epq-pill-accent {
  background: var(--accent-soft);
  color: var(--accent);
}
.epq-pill-muted {
  background: var(--bg3);
  color: var(--muted2);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .epr-perm-grid {
    grid-template-columns: 1fr;
  }
  .epr-perm-group:first-child,
  .epr-perm-group:nth-child(2) {
    border-top: 1px solid var(--border);
  }
  .epr-perm-group:first-child {
    border-top: none;
  }
}
@media (max-width: 980px) {
  .epr-grid {
    grid-template-columns: 1fr;
  }
  .epr-aside {
    position: static;
  }
  .epr-head-row,
  .epr-row {
    grid-template-columns: 1.4fr 1fr 70px 70px;
  }
  .epr-cell-last {
    display: none;
  }
}

/* Skeleton mientras GROUPS/WORKERS/ADMINS no están cargados */
.epq-skeleton {
  padding: 60px 24px;
  text-align: center;
  background: var(--bg2);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* ── EPQ · Avatar grande del modal de equipo + grid de emojis ─────── */
.epq-tm-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}
.epq-emoji-grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
}
.epq-emoji-grid-row .epq-emoji-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

/* ── EPQ · Modal "Añadir miembro existente" ─────────────── */
.epq-aem-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}
.epq-aem-row:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ── EPI · Pestaña Historial / Asignar admin ─────────────── */
.epi-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.epi-banner {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 4px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.epi-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.epi-banner-main {
  flex: 1;
  min-width: 0;
}
.epi-banner-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.epi-banner-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.epi-empty {
  padding: 50px 24px;
  text-align: center;
  background: var(--bg2);
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
}
.epi-empty-icon {
  font-size: 40px;
  opacity: 0.6;
  margin-bottom: 10px;
}
.epi-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
}
.epi-empty-text {
  font-size: 12.5px;
  color: var(--muted2);
}

.epi-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.epi-head-row,
.epi-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 100px;
  align-items: center;
  padding: 10px 16px;
  gap: 12px;
  font-size: 12.5px;
}
.epi-head-row {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.epi-row {
  border-bottom: 1px solid var(--border);
}
.epi-row:last-child {
  border-bottom: none;
}
.epi-cell-action {
  color: var(--text);
  font-weight: 600;
}
.epi-cell-actor {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.epi-cell-when {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
}

/* Modal selector de modo */
.epi-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 8px;
  transition:
    border-color 0.12s,
    background-color 0.12s;
}
.epi-mode-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.epi-mode-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.epi-mode-card:hover .epi-mode-icon {
  background: var(--accent);
  color: #fff;
}
.epi-mode-main {
  flex: 1;
  min-width: 0;
}
.epi-mode-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.epi-mode-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.epi-mode-arrow {
  font-size: 20px;
  color: var(--muted2);
  flex-shrink: 0;
}
.epi-mode-card:hover .epi-mode-arrow {
  color: var(--accent);
}

/* ── PFD · Pestaña Datos editable en la ficha del trabajador ──────────── */
.pfd-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.pfd-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.pfd-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0;
}
.pfd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.pfd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pfd-field-wide {
  grid-column: span 2;
}
.pfd-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pfd-in:focus {
  outline: 2px solid var(--accent-soft);
}
.pfd-in[readonly] {
  background: var(--bg3);
  color: var(--muted);
  cursor: not-allowed;
}

.pfd-foto-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pfd-foto-prev {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pfd-foto-btn {
  cursor: pointer;
  font-size: 12px;
  padding: 6px 12px;
}

.pfd-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.pfd-team-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition:
    border-color 0.12s,
    background-color 0.12s;
}
.pfd-team-chip:hover {
  border-color: var(--border2);
  background: var(--bg3);
}
.pfd-team-chip.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pfd-team-chip .pfd-team-cb {
  cursor: pointer;
}
.pfd-team-emoji {
  font-size: 18px;
}
.pfd-team-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.pfd-savestate {
  font-size: 11.5px;
  text-align: right;
  padding: 4px 8px;
  min-height: 18px;
  transition: opacity 0.2s;
}
.pfd-savestate.saving {
  color: var(--muted);
}
.pfd-savestate.ok {
  color: #15803d;
}
.pfd-savestate.err {
  color: var(--red, #b91c1c);
}

/* ── MSG · Vista Mensajes (esqueleto MSG-2, MSG-3 lo expande) ─────── */
#view-mensajes {
  padding: 20px;
}
.msg-layout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}
.msg-loading,
.msg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
}
.msg-empty-icon {
  font-size: 56px;
  opacity: 0.5;
  margin-bottom: 14px;
}
.msg-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0;
}
.msg-empty-text {
  font-size: 13.5px;
  color: var(--muted2);
  max-width: 420px;
  line-height: 1.55;
}

/* Badge de no leídos en la pestaña Mensajes */
.msg-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
}

/* ── MSG-3 · Layout completo del módulo Mensajes ──────────────────── */
#view-mensajes {
  padding: 16px;
}

.msg-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: calc(100vh - 130px);
  min-height: 500px;
}

/* ── Aside lista de conversaciones ─────────────── */
.msg-aside {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg2);
}
.msg-aside-head {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.msg-aside-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.msg-new-btn {
  font-size: 12px;
  padding: 6px 12px;
}
.msg-search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.msg-search {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-family: inherit;
}
.msg-search:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.msg-conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 12px;
}
.msg-list-loading,
.msg-list-empty {
  padding: 30px 18px;
  text-align: center;
  color: var(--muted2);
  font-size: 12.5px;
  line-height: 1.55;
}

.msg-conv-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 4px;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}
.msg-conv-card:hover {
  background: var(--bg3);
}
.msg-conv-card.sel {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.msg-conv-main {
  flex: 1;
  min-width: 0;
}
.msg-conv-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-conv-title {
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-conv-when {
  font-size: 11px;
  color: var(--muted2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  flex-shrink: 0;
}
.msg-conv-preview {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar genérico para mensajes */
.msg-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.msg-av-group {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Panel de conversación ─────────────────────── */
.msg-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg2);
}
.msg-empty-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.msg-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.msg-panel-head-main {
  flex: 1;
  min-width: 0;
}
.msg-panel-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
}
.msg-panel-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.msg-stream {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--surface) 100%);
}

.msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  margin-bottom: 4px;
}
.msg-bubble-wrap.mine {
  align-self: flex-end;
  align-items: flex-end;
}
.msg-bubble-wrap.theirs {
  align-self: flex-start;
  align-items: flex-start;
}
.msg-bubble-sender {
  font-size: 11px;
  color: var(--muted2);
  font-weight: 700;
  margin-bottom: 2px;
  padding-left: 4px;
}
.msg-bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg-bubble-wrap.mine .msg-bubble {
  background: var(--accent);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.msg-bubble-wrap.theirs .msg-bubble {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
}
.msg-bubble-body {
  white-space: pre-wrap;
}
.msg-bubble-time {
  font-size: 9.5px;
  opacity: 0.7;
  align-self: flex-end;
  margin-top: 2px;
}

/* ── Composer ──────────────────────────────────── */
.msg-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.msg-composer textarea {
  flex: 1;
  resize: none;
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  min-height: 36px;
  max-height: 120px;
  line-height: 1.4;
}
.msg-composer textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.msg-composer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.msg-push-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.msg-push-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
  .msg-layout {
    grid-template-columns: 1fr;
  }
  .msg-aside {
    display: none;
  }
  .msg-aside.show-mobile {
    display: flex;
  }
}

/* ── MSG-5 · Modal "Nuevo chat" con tabs individual/grupo ───────── */
.msg-mode-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  color: var(--muted2);
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
}
.msg-mode-btn.sel {
  background: var(--surface);
  color: var(--accent);
}

.epq-aem-row.sel {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 6px 3px 4px;
  font-size: 11.5px;
  color: var(--text);
}

/* ── MSG-8 · Indicador de no leídos ─────────────────────── */
.msg-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  align-self: center;
}
.msg-conv-card.unread .msg-conv-title {
  font-weight: 800;
}
.msg-conv-card.unread .msg-conv-preview {
  color: var(--text);
  font-weight: 600;
}

/* ── EP-Audit · Modal de auditoría con timeline ──────────────── */
.epa-filters {
  display: flex;
  gap: 6px;
  background: var(--bg3);
  padding: 4px;
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 12px;
}
.epa-filter {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  color: var(--muted2);
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
}
.epa-filter.sel {
  background: var(--surface);
  color: var(--accent);
}
.epa-info {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 8px;
}

.epa-loading,
.epa-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}

.epa-timeline {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.epa-day-head {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.epa-day-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.epa-event {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.epa-event-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.epa-event-main {
  flex: 1;
  min-width: 0;
}
.epa-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.epa-event-label {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}
.epa-event-time {
  font-size: 10.5px;
  color: var(--muted2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.epa-event-desc {
  font-size: 12.5px;
  color: var(--text2);
  margin-bottom: 6px;
  line-height: 1.45;
}
.epa-event-desc strong {
  color: var(--text);
  font-weight: 700;
}
.epa-event-actor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.epa-event-actor-av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ── MSG · Menú ⋯ de la cabecera del chat ────────────────── */
.msg-panel-actions {
  position: relative;
  flex-shrink: 0;
}
.msg-actions-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted2);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.12s,
    color 0.12s;
}
.msg-actions-btn:hover {
  background: var(--bg3);
  color: var(--text);
}
.msg-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  padding: 6px;
  z-index: 50;
}
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s;
}
.msg-menu-item:hover {
  background: var(--bg3);
}
.msg-menu-item span {
  font-size: 15px;
}
.msg-menu-danger {
  color: var(--red, #b91c1c);
}
.msg-menu-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* ══════════════════════════════════════════════════════════════════
   Soft Pro · Pendientes — bloques restantes del handoff (15 selectores)
   ════════════════════════════════════════════════════════════════ */

.fh-header {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.pf-tabs button {
  border: none;
  background: transparent;
  padding: 7px 16px;
  font-family: "Inter", sans-serif !important;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted2);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all 0.15s;
}
.pf-tabs button:hover {
  color: var(--text);
}
.pf-tabs button.active {
  background: var(--bg2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.et-section:last-of-type {
  border-bottom: none;
}
.et-toggle-row > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}
.et-toggle-sw::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.et-toggle-row input:checked ~ .et-toggle-sw {
  background: var(--accent);
}
.et-toggle-row input:checked ~ .et-toggle-sw::before {
  transform: translateX(16px);
}

.cfg-empty-icon {
  font-size: 48px;
  margin-bottom: 14px;
}
.cfg-empty-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 8px;
}
.cfg-empty-sub {
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}
.cfg-empty-sub a {
  color: var(--accent);
  font-weight: 600;
}

.admin-sidebar-grouped {
  display: flex;
  flex-direction: column;
}
.admin-sidebar-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-family: "IBM Plex Mono", monospace;
}

/* ══════════════════════════════════════════════════════════════════
   Popup de turno (solo lectura) — abierto desde la leyenda de General
   ════════════════════════════════════════════════════════════════ */

/* Popup de solo lectura: ocultar la barra de arrastre/redimensión genérica
   de showModal — no aporta nada en un popup informativo. */
#modal-box:has(.tdef-modal-noheader) .modal-drag-bar {
  display: none;
}

/* Botón de cierre propio del popup */
.tdef-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted2);
  padding: 2px 4px;
  transition: color 0.12s ease;
}
.tdef-modal-close:hover {
  color: var(--red);
}

/* La tarjeta dentro del modal sale de la rejilla de 3 columnas, así que
   le damos un ancho propio cómodo. */
.tdef-card-modal-wrap {
  position: relative;
  width: min(420px, calc(100vw - 64px));
  padding: 4px;
}
.tdef-card-modal-wrap .tdef-card {
  cursor: default;
}
.tdef-card-modal-wrap .tdef-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* Mini-popup para códigos especiales (V, B, F…) — solo badge + nombre */
.tdef-special-modal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 40px 20px 24px;
}
.tdef-special-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0;
}

/* ── Panel horas/reportes: el selector [class*="-card"] afecta subelementos r7-* ── */
/* Usamos #admin-reportes (especificidad ID) para ganar siempre */
#admin-reportes .r7-card-head,
#admin-reportes .r7-card-title,
#admin-reportes .r7-kicker,
#admin-reportes .r7-legend,
#admin-reportes .r7-legend-item,
#admin-reportes .r7-bars-wrap,
#admin-reportes .r7-grid-line,
#admin-reportes .r7-bar-col,
#admin-reportes .r7-bar-track,
#admin-reportes .r7-bar-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Los dots de la leyenda conservan su color inline (background:var(--accent) etc) */
#admin-reportes .r7-legend-dot {
  border: none !important;
  box-shadow: none !important;
}

/* ── KPIs y cards principales: fondo transparente ── */
#admin-reportes .r7-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#admin-reportes .r7-kpi {
  background: var(--surface2) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Gestión de turnos: fondo lila ── */
.tdef-card {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* ── Fichaje Solicitudes: empty states transparentes ── */
.cfg-empty-card,
.empty-msg,
.fch-empty {
  background: transparent !important;
  border-color: var(--border2) !important;
}
/* ── Sidebar de Configuración: fondo lila ── */
.pfr-gs-sidebar {
  background: var(--surface2) !important;
}

/* ── Fichaje Historial: fondo transparente, tablas destacadas ── */
#historial-resultado,
.fch-a-table-wrap,
.fch-a-content {
  background: transparent !important;
}
.fch-hist-day-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 24px;
}
.fch-hist-day-head {
  background: transparent !important;
}
.fichaje-table,
.fch-table {
  background: var(--surface2) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--border2) !important;
}
.fichaje-table th,
.fch-table th {
  background: #d8ccf8 !important;
}
.fichaje-table td,
.fch-table td,
.fichaje-table tr td,
.fch-table tr td {
  background: var(--surface2) !important;
}
.fichaje-table tr:hover td,
.fch-table tr:hover td {
  background: #d8ccf8 !important;
}
/* Alternancia de filas para distinguir */
.fichaje-table tbody tr:nth-child(even) td,
.fch-table tbody tr:nth-child(even) td {
  background: #e8dffe !important;
}

/* ── Horarios/Almuerzos/Turnos: cards transparentes ── */
#shifts-tab-almuerzos .a-card,
#shifts-tab-almuerzos .a-card-title,
#shifts-tab-horario .a-card,
#shifts-tab-horario .a-card-title,
#admin-turnos-mgr .a-card,
#admin-turnos-mgr .a-card-title {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ── Tabla ficha semanal de almuerzos: destacada ── */
#almuerzos-table-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 0;
}

/* ── Reglas de horarios / Configuración: fondo transparente ── */
.fch-cfg-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Sidebar: Resumen actual en lila */
.fch-cfg-side .fch-cfg-card {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}
.fch-cfg-grid,
#shifts-tab-reglas,
#shifts-tab-almuerzos,
#shifts-tab-horario,
#shifts-tab-tareas {
  background: transparent !important;
}
#shifts-tab-tareas,
#tasks-schedule-host,
#admin-shifts.shifts-subtab-tareas #heh-root,
#admin-shifts.shifts-subtab-tareas .heh-toolbar,
#admin-shifts.shifts-subtab-tareas .heh-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
}
#shifts-tab-tareas,
#tasks-schedule-host,
#admin-shifts.shifts-subtab-tareas #heh-root {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}
#admin-shifts.shifts-subtab-tareas #heh-root {
  overflow: hidden !important;
}
#admin-shifts:has(#stab-almuerzos.active) #shifts-tab-horario,
#admin-shifts:has(#stab-reglas.active) #shifts-tab-horario,
#admin-shifts:has(#stab-almuerzos.active) #heh-root,
#admin-shifts:has(#stab-reglas.active) #heh-root {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}
#admin-shifts:has(#stab-almuerzos.active) #shifts-tab-almuerzos {
  display: flex !important;
}
/* El sticky-head debe ser opaco para que el contenido no se vea por detrás
   al hacer scroll. Antes estaba transparente y el contenido se veía a
   través del banner. Forzar opacidad en el wrapper y en los hijos. */
#admin-shifts > .fch-sticky-head,
#fichaje-admin-view .fch-sticky-head {
  background: var(--bg2) !important;
}
#admin-shifts > .fch-sticky-head > .fch-page-head,
#fichaje-admin-view .fch-sticky-head > .fch-page-head {
  background-color: var(--bg2);
  background-image: linear-gradient(
    135deg,
    var(--accent-soft) 0%,
    var(--secondary-soft) 100%
  );
}
#admin-shifts > .fch-sticky-head > .fch-a-tabs,
#fichaje-admin-view .fch-sticky-head > .fch-a-tabs {
  background: var(--bg2) !important;
}

/* ── Meses: tarjetas lila ── */
.m-row {
  background: var(--surface2) !important;
}
/* ── Sidebar Configuración: lila ── */
.pfr-gs-sidebar {
  background: var(--surface2) !important;
}

/* ── Meses: tarjetas violeta más oscuro ── */
.m-row {
  background: #d8ccf8 !important;
  border-color: #c4b5f4 !important;
}
.m-row:hover {
  background: #cbbef5 !important;
  border-color: #b8a8f0 !important;
}

/* ── Sidebar Configuración: interior lila (tabs, cards, filas) ── */
.pfr-gs2-tabs {
  background: #d8ccf8 !important;
}
.pfr-gs2-card {
  background: var(--surface2) !important;
}
.pfr-gs2-tpl-row {
  background: var(--surface2) !important;
}
.pfr-gs2-body {
  background: var(--surface2) !important;
}
#pfr-gs-sidebar,
.pfr-gs-sidebar {
  background: var(--surface2) !important;
}

/* ── Meses: tarjetas violeta OSCURO ── */
.m-row {
  background: #c4b5f4 !important;
  border-color: #a78bfa !important;
}
.m-row:hover {
  background: #b8a8f0 !important;
  border-color: #9470e8 !important;
}

/* ── Meses: tarjetas surface2, fondo contenedor como página ── */
.m-row {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
}
.m-row:hover {
  background: #d8ccf8 !important;
  border-color: var(--border2) !important;
}

/* ── Tabla de horarios: mismo estilo que fichaje ── */
#shifts-tab-horario table,
#shifts-tab-horario .pfr-gt-scroll table {
  background: var(--surface2) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--border2) !important;
}
#shifts-tab-horario thead th {
  background: #d8ccf8 !important;
}
#shifts-tab-horario td.name-cell {
  background: var(--surface2) !important;
}
#shifts-tab-horario tbody tr:nth-child(even) td {
  background: #e8dffe !important;
}
#shifts-tab-horario tbody tr:nth-child(odd) td {
  background: var(--surface2) !important;
}
#shifts-tab-horario tbody tr:hover td {
  background: #d8ccf8 !important;
}
#shifts-tab-horario tbody tr:hover td.name-cell {
  background: #d8ccf8 !important;
}

/* ── Datos de empresa / Facturación: sin blancos ── */
#admin-facturacion .a-card {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
}
/* Formulario inputs sobre fondo lila */
#admin-facturacion .f-input,
#admin-facturacion input,
#admin-facturacion select {
  background: var(--bg) !important;
}
/* Sección facturas */
#admin-facturacion .notif-table {
  background: transparent !important;
}
#admin-facturacion .notif-table th {
  background: transparent !important;
}
#admin-facturacion .notif-table td {
  background: transparent !important;
}
#admin-facturacion .notif-table tr:nth-child(even) td {
  background: transparent !important;
}
/* Cabecera hero lila más oscuro */
#admin-facturacion .fch-page-kicker {
  background: transparent !important;
}

/* ── Solicitudes: fondo blanco entre banner y tabs ── */
#admin-solicitudes .fch-sticky-head {
  background: var(--bg2) !important;
}

/* ── Eliminar gap lila entre banner y tabs en todos los sticky heads ── */
#admin-solicitudes > .fch-sticky-head,
#admin-solicitudes .fch-sticky-head {
  background: var(--bg2) !important;
  margin-bottom: 0 !important;
}

/* ── Wrapper solicitudes: fondo transparente como el resto de secciones ── */
#admin-solicitudes {
  background: transparent !important;
}

/* ── Solicitudes: el sticky head cubre el padding del admin-content ── */
#admin-solicitudes > .fch-sticky-head {
  margin: -20px -20px 0 !important;
  background: var(--bg2) !important;
}

/* ── Solicitudes: sticky head transparente como Horarios ── */
#admin-solicitudes > .fch-sticky-head {
  background: transparent !important;
  margin: -20px -20px 0 !important;
}

/* ── Solicitudes: reducir padding banner para eliminar espacio lila ── */
#admin-solicitudes .fch-page-head {
  padding-bottom: 0 !important;
}

/* ── Solicitudes: fch-page-head sin border-bottom ── */
#admin-solicitudes .fch-page-head {
  border-bottom: none !important;
}
#pfr-sol-tabs {
  border-top: 1px solid var(--border) !important;
}

/* ── Solicitudes: separación real entre pestañas y filtros ── */
#admin-solicitudes #pfr-sol-tabs {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 0 !important;
  padding: 8px 20px 0 !important;
  background: #fbfafc !important;
}

#admin-solicitudes #pfr-sol-bodies {
  position: relative !important;
  z-index: 1 !important;
  padding: 22px 20px 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}

#admin-solicitudes .pfr-sol-tab-body > div:first-child {
  margin-top: 0 !important;
}

#admin-libres > div:first-child,
#admin-vacreqs .pfr-vacreq-admin-filters,
#admin-swaps .pfr-vacreq-admin-filters,
#admin-coberturas .pfr-vacreq-admin-filters {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* ── Facturación: fondo surface2, tarjetas transparentes ── */
#admin-facturacion {
  background: transparent !important;
}
#admin-facturacion .a-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Facturación: tarjetas surface2 con borde como el resto ── */
#admin-facturacion .a-card {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Solicitudes: tarjetas lila como el resto ── */
.pfr-swap-card {
  background: var(--surface2) !important;
}
.vac4-card {
  background: var(--surface2) !important;
}
/* Coberturas */
.pfr-cob-card,
.pfr-cob-item,
.pfr-vacreq-card,
.pfr-vacreq-item {
  background: var(--surface2) !important;
}
/* Wrappers de contenido también */
#admin-swaps,
#admin-vacreqs,
#admin-coberturas {
  background: transparent !important;
}

/* ── Solicitudes: todos los fondos blancos → surface2 ── */
.pfr-vacreq-item,
.pfr-swap-card,
.vac4-card {
  background: var(--surface2) !important;
}

/* ── Solicitudes/Cambios/Coberturas/Vacaciones: todos los items → surface2 ── */
.pfr-vacreq-admin-item,
.pfr-vacreq-item,
.pfr-swap-card,
.vac4-card,
#admin-swaps .a-card,
#admin-vacreqs .a-card,
#admin-coberturas .a-card,
.pfr-cob-req-card,
.pfr-cob-item-card,
.pfr-cob-card {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  box-shadow: none !important;
}

/* Contenedores wrapper también transparentes */
.pfr-vacreq-admin-content,
#admin-swaps,
#admin-vacreqs,
#admin-coberturas {
  background: transparent !important;
}

/* ── Facturación: inputs en surface2, fondo general transparente ──
   OJO: para los nuevos inputs .emp-field-input la regla específica vive
   al final del fichero (input.emp-field-input...) — la excluimos aquí. */
#admin-facturacion .f-input,
#admin-facturacion input[type="text"]:not(.emp-field-input),
#admin-facturacion input[type="email"]:not(.emp-field-input),
#admin-facturacion input[type="tel"]:not(.emp-field-input),
#admin-facturacion input[type="number"]:not(.emp-field-input),
#admin-facturacion select:not(.emp-select) {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
}
#admin-facturacion .a-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Facturación: tarjetas y título sin fondo blanco ── */
#admin-facturacion .a-card,
#admin-facturacion .a-card-title {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Coberturas: fondo transparente forzado ── */
#admin-coberturas .pfr-vacreq-admin-content,
#admin-coberturas .pfr-vacreq-admin-header,
#admin-coberturas {
  background: transparent !important;
}
#admin-coberturas .pfr-vacreq-admin-item {
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  box-shadow: none !important;
}

/* ── Vacaciones: layout transparente como el resto ── */
.vac4-layout {
  background: transparent !important;
  border: none !important;
}
.vac4-inbox {
  background: transparent !important;
  border-right: 1px solid var(--border) !important;
}
.vac4-detail {
  background: transparent !important;
}
/* Cambios de turno: empty state blanco */
.pfr-vacreq-admin-content {
  background: transparent !important;
}
.pfr-swap-empty,
.pfr-vacreq-empty,
.pfr-sol-empty,
[class*="empty"] {
  background: transparent !important;
}
/* Swap admin list wrapper */
#admin-swaps .pfr-vacreq-admin-content,
#admin-swaps [class*="list"],
#admin-swaps [class*="body"],
#admin-swaps [class*="wrap"] {
  background: transparent !important;
}

/* ── Solicitudes: fondo blanco del contenido → transparente ── */
#admin-swaps > *,
#admin-vacreqs > *,
#admin-coberturas > * {
  background: transparent !important;
}
/* Contenedores internos con fondo blanco */
#admin-swaps .pfr-swap-container,
#admin-swaps .pfr-swap-wrap,
#admin-swaps .pfr-swap-body,
#admin-swaps .pfr-swap-list,
#admin-vacreqs .vac4-wrap,
#admin-vacreqs .vac4-container,
#admin-coberturas .pfr-cob-container,
#admin-coberturas .pfr-cob-wrap,
#admin-coberturas .pfr-cob-body,
#admin-coberturas .pfr-cob-list {
  background: transparent !important;
}
/* Panels de contenido con fondo blanco explícito */
#admin-swaps [style*="background"],
#admin-vacreqs [style*="background"],
#admin-coberturas [style*="background"] {
  background: transparent !important;
}
/* Cualquier div directo dentro de las pestañas */
.pfr-sol-tab-body > div,
.pfr-sol-tab-body > section {
  background: transparent !important;
}

/* ── Botones de filtro: activo violeta oscuro ── */
/* Cambios de turno y Coberturas usan .pfr-vacreq-admin-filter.active */
.pfr-vacreq-admin-filter.active {
  background: var(--secondary) !important;
  color: #fff !important;
  border-color: var(--secondary) !important;
}
/* Vacaciones usa .vac4-filter.active */
.vac4-filter.active {
  background: var(--secondary) !important;
  color: #fff !important;
  border-color: var(--secondary) !important;
}

/* ── notif-table: mismo fondo que la página ── */
#admin-facturacion .notif-table,
#admin-facturacion .notif-table th,
#admin-facturacion .notif-table td,
#admin-facturacion .notif-table tr:nth-child(even) td {
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   HORARIO · Acciones en la CABECERA (derecha del h1 "Horarios")
   Exactamente como el handoff: Publicados / Plantillas / Historial
   / Auto-rellenar (soft) / Publicar (primary).
   Viven dentro de #shifts-page-head, NO en el toolbar interno.
   ───────────────────────────────────────────────────────────── */
#shifts-page-head {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#shifts-page-head .fch-page-head-content {
  flex: 1 1 auto;
  min-width: 0;
}
.fch-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  /* Solo se muestra cuando la sub-tab Horario está activa.
     switchShiftsTab lo conmuta a display:none en las otras. */
}
.fch-head-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2, var(--text));
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
  white-space: nowrap;
}
.fch-head-btn:hover {
  border-color: var(--border2);
}
.fch-head-btn-ic {
  font-size: 13px;
  line-height: 1;
}
/* "Auto-rellenar" — variante soft (accent-soft) */
.fch-head-btn-soft {
  background: var(--accent-soft);
  border-color: rgba(29, 108, 240, 0.3);
  color: var(--accent-ink, var(--accent));
}
.fch-head-btn-soft:hover {
  background: rgba(29, 108, 240, 0.2);
}
/* "Publicar" — primary (accent) */
.fch-head-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fch-head-btn-primary:hover {
  background: #1554c7;
}
.fch-head-btn-primary:disabled,
.fch-head-btn-primary[disabled] {
  background: rgba(29, 108, 240, 0.35);
  border-color: transparent;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .fch-head-btn {
    padding: 5px 9px;
    font-size: 11.5px;
  }
}

/* ════════════════════════════════════════════════════════════════
   HEH — Editor de horarios (handoff fiel)
   Réplica del diseño de
     design_handoff_admin_horarios/prototipo/flujos/horarios-horario.jsx
   No mezclar con clases .se-* antiguas.
   ════════════════════════════════════════════════════════════════ */
#heh-root {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.heh-empty {
  padding: 60px 30px;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: 14px;
}
.heh-empty-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.heh-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.heh-empty-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.heh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.heh-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Banner read-only ────────────────────────────────── */
.heh-readonly {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1) 0%,
    var(--surface2) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
}
.heh-readonly-check {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #10b981;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.heh-readonly-text {
  flex: 1;
  min-width: 0;
}
.heh-readonly-title {
  font-size: 13px;
  font-weight: 800;
  color: #065f46;
  letter-spacing: 0;
}
.heh-readonly-sub {
  font-size: 11.5px;
  color: var(--text2, var(--text));
  margin-top: 2px;
  line-height: 1.45;
}

/* ── Toolbar superior (pills) ─────────────────────────── */
.heh-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.heh-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.heh-month-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--text2, var(--text));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}
.heh-month-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.heh-month-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.heh-month-name {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  min-width: 110px;
  text-align: center;
}

.heh-viewseg {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.heh-viewseg-btn {
  padding: 5px 14px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.heh-viewseg-btn.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.heh-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.heh-chev {
  color: var(--muted);
  font-size: 9px;
}

.heh-cov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.heh-cov[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: rgba(29, 108, 240, 0.3);
}
.heh-cov-tog {
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface3, var(--surface2));
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.15s;
}
.heh-cov[aria-pressed="true"] .heh-cov-tog {
  background: var(--accent);
}
.heh-cov-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}
.heh-cov[aria-pressed="true"] .heh-cov-dot {
  left: 14px;
}
.heh-cov-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.heh-cov[aria-pressed="true"] .heh-cov-lbl {
  color: var(--accent-ink, var(--accent));
}

.heh-tb-spacer {
  flex: 1;
}

/* Pill estado */
.heh-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  border: 1px solid;
  white-space: nowrap;
}
.heh-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.heh-state-draft {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.3);
}
.heh-state-draft .heh-state-dot {
  background: #f59e0b;
}
.heh-state-pub {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.3);
}
.heh-state-pub .heh-state-dot {
  background: #10b981;
}
.heh-state-empty {
  background: transparent;
  color: var(--muted2);
  border-color: var(--border);
}

.heh-conflicts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
}

/* ── Card principal de la tabla ──────────────────────── */
.heh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.heh-table-scroll {
  min-height: 0;
  overflow: auto;
}
.heh-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.heh-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.heh-week-label {
  font-size: 11.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.heh-worker-count {
  color: var(--muted2);
  font-weight: 600;
}
.heh-hint {
  font-size: 11px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}
/* Acciones del sub-toolbar (copiar semana / copiar mes / plantilla / borrar) */
.heh-subbar-acts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.heh-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2, var(--text));
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.heh-sub-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.heh-sub-btn-danger {
  color: #b91c1c;
}
.heh-sub-btn-danger:hover {
  border-color: #b91c1c;
  background: rgba(239, 68, 68, 0.06);
  color: #b91c1c;
}

/* Header de días */
.heh-head {
  display: grid;
  padding: 12px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.heh-head-worker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.heh-head-day {
  text-align: center;
}
.heh-head-day .heh-day-name {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted2);
}
.heh-head-day .heh-day-num {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
  margin-top: 2px;
}
.heh-head-day.is-today .heh-day-name,
.heh-head-day.is-today .heh-day-num {
  color: var(--accent);
}
/* ── Fines de semana en cabecera semana: sábado ámbar, domingo rojo ── */
.heh-head-day.is-sat .heh-day-name,
.heh-head-day.is-sat .heh-day-num {
  color: var(--amber, #f59e0b) !important;
}
.heh-head-day.is-sun .heh-day-name,
.heh-head-day.is-sun .heh-day-num {
  color: #e11d48 !important;
}
.heh-head-hours {
  text-align: right;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Separador de grupo dentro del editor (PATERNA · N PERS) */
.heh-group-sep {
  display: grid;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
/* Subseparador de puesto dentro de una oficina (Horario) — sutil */
.heh-subrole-sep {
  display: grid;
  border-top: 1px solid var(--border);
}
.heh-subrole-sep-label {
  grid-column: 1 / -1;
  padding: 3px 14px 3px 30px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  background: var(--bg3, rgba(0, 0, 0, 0.02));
}
.heh-group-sep-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
}
/* Cuando el separador también muestra los días del mes, el label ocupa solo
   la primera columna y las celdas de día (.heh-head-day / -mini) se alinean
   sobre sus columnas igual que en la cabecera principal. */
.heh-group-sep-days .heh-group-sep-label {
  grid-column: 1;
  min-width: 0;
}
.heh-group-sep-days {
  padding: 4px 14px;
}
/* El label ya trae su propio padding lateral; al estar el separador con
   padding:14px, se lo quitamos para no duplicar el sangrado. */
.heh-group-sep-days .heh-group-sep-label {
  padding-left: 0;
  padding-right: 8px;
}
.heh-group-sep-days .heh-head-day,
.heh-group-sep-days .heh-head-day-mini {
  align-self: center;
}
.heh-group-sep-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2, var(--text));
}
/* Acento de color del grupo a la izquierda del separador.
   Usamos box-shadow inset (no ocupa layout) para no desalinear las celdas
   de día respecto a las filas de trabajador, que no llevan borde. */
.heh-group-sep {
  box-shadow: inset 3px 0 0 0 var(--heh-gsep-color, transparent);
}
.heh-group-sep-emoji {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.heh-group-sep-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.heh-group-sep-photo {
  overflow: hidden;
  padding: 0;
}
.heh-group-sep-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.heh-group-sep-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.heh-head-mini {
  padding: 10px 12px;
  column-gap: 2px;
}
.heh-head-day-mini {
  text-align: center;
  border-radius: 4px;
  padding: 2px 0;
  color: var(--text);
}
.heh-head-day-mini.is-we {
  background: var(--surface3, var(--surface2));
  color: var(--muted2);
}
/* ── Fines de semana en cabecera mes: sábado ámbar, domingo rojo ── */
.heh-head-day-mini.is-sat {
  background: rgba(245, 158, 11, 0.2);
}
.heh-head-day-mini.is-sat .heh-day-name-mini,
.heh-head-day-mini.is-sat .heh-day-num-mini {
  color: var(--amber, #f59e0b) !important;
}
.heh-head-day-mini.is-sun {
  background: rgba(225, 29, 72, 0.17);
}
.heh-head-day-mini.is-sun .heh-day-name-mini,
.heh-head-day-mini.is-sun .heh-day-num-mini {
  color: #e11d48 !important;
}
/* Línea vertical de separación entre semanas (cabecera) */
.heh-head-day-mini.is-wstart {
  box-shadow: -2px 0 0 var(--border2);
}
.heh-head-day-mini.is-today {
  color: var(--accent);
}
.heh-day-name-mini {
  font-size: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted3, var(--muted2));
  line-height: 1;
}
.heh-day-num-mini {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 2px;
}

/* Cobertura */
.heh-cov-row {
  display: grid;
  padding: 6px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}
.heh-cov-label {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent-ink, var(--accent));
  letter-spacing: 0.08em;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.heh-cov-cell {
  display: flex;
  justify-content: center;
  gap: 3px;
  align-items: center;
  padding: 4px 0;
}
.heh-cov-mtn {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
}
.heh-cov-mtn-m {
  background: #dcfce7;
  color: #166534;
}
.heh-cov-mtn-t {
  background: #dbeafe;
  color: #1d4ed8;
}
.heh-cov-mtn-n {
  background: #e0e7ff;
  color: #4338ca;
}

.heh-cov-row-mini {
  padding: 4px 12px;
  column-gap: 2px;
}
.heh-cov-cell-mini {
  text-align: center;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--accent-ink, var(--accent));
  padding: 2px 0;
}

/* Filas de trabajador */
.heh-row {
  display: grid;
  padding: 8px 14px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.heh-row:last-child {
  border-bottom: 0;
}
.heh-row.is-alt {
  background: rgba(0, 0, 0, 0.015);
}

.heh-row-mini {
  padding: 5px 12px;
  column-gap: 2px;
}

.heh-worker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Asita de arrastre para reordenar trabajadores */
.heh-drag-handle {
  flex-shrink: 0;
  cursor: grab;
  color: var(--muted3, var(--muted2));
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.12s,
    color 0.12s;
  user-select: none;
  margin-right: -4px;
}
.heh-row:hover .heh-drag-handle {
  opacity: 0.55;
}
.heh-drag-handle:hover {
  opacity: 1 !important;
  color: var(--accent);
}
.heh-row.is-dragging {
  opacity: 0.4;
}
.heh-row.heh-drag-over {
  box-shadow: inset 0 2px 0 var(--accent);
  background: var(--accent-soft, rgba(99, 102, 241, 0.06));
}
.heh-row[draggable="true"] {
  cursor: default;
}
.heh-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.heh-avatar-sm {
  width: 22px;
  height: 22px;
  font-size: 9px;
}
.heh-worker-text {
  min-width: 0;
}
.heh-worker-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heh-worker-name-sm {
  font-size: 11.5px;
}
.heh-worker-meta {
  font-size: 10.5px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}
.heh-worker-meta-sm {
  font-size: 9.5px;
}
/* Avatar con foto: <img> rellena el círculo */
.heh-avatar.heh-avatar-img {
  overflow: hidden;
  padding: 0;
}
.heh-avatar.heh-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Celdas */
.heh-cell-wrap {
  padding: 0 3px;
  position: relative;
}
/* ── Tinte de columnas de fin de semana en el cuerpo ── */
.heh-cell-wrap.is-sat {
  background: rgba(245, 158, 11, 0.18);
}
.heh-cell-wrap.is-sun {
  background: rgba(225, 29, 72, 0.15);
}
/* Línea vertical de separación entre semanas (cuerpo) */
.heh-cell-wrap.is-wstart {
  box-shadow: -2px 0 0 var(--border2);
}
.heh-cell {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  font-family: "IBM Plex Mono", monospace;
  cursor: pointer;
  transition:
    outline 0.12s ease,
    background 0.12s ease;
}
.heh-cell:disabled {
  cursor: default;
  opacity: 0.85;
}
/* Puntito indicador de nota / ajuste de horas (igual concepto que en General) */
.heh-note-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber, #f59e0b);
  box-shadow: 0 0 0 1.5px var(--surface, #fff);
  pointer-events: none;
}
.heh-cell.is-libre {
  background: var(--surface2);
  color: var(--muted3, var(--muted2));
  border: 1px dashed var(--border2);
}
/* Libre EXPLÍCITO (código L) — distinto de una celda vacía */
.heh-cell.is-rest {
  background: var(--surface3, #eef0f4);
  color: var(--muted2);
  border: 1px solid var(--border2);
}
.heh-cell.is-rest .heh-cell-code {
  font-weight: 800;
  opacity: 0.7;
}
.heh-cell-plus {
  font-weight: 800;
  font-size: 16px;
  color: var(--muted3, var(--muted2));
}
.heh-cell-code {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
}
.heh-cell-time {
  font-size: 8.5px;
  font-weight: 700;
  opacity: 0.7;
  margin-top: 1px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.heh-cell.is-time-override::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  border: 1.5px solid var(--surface);
  z-index: 2;
}

/* Celda mini (vista mes) */
.heh-cell-mini {
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}
.heh-cell-mini.is-libre {
  background: var(--surface);
  border: 1px dashed var(--border2);
}

/* Columna horas */
.heh-hours {
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
}
.heh-hours-n {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}
.heh-hours-of {
  font-size: 9px;
  color: var(--muted2);
  margin-top: 1px;
}
.heh-hours.is-over .heh-hours-n,
.heh-hours.is-over .heh-hours-of {
  color: #92400e;
}

/* Leyenda inferior */
.heh-legend {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.heh-legend-title {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted2);
}
.heh-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.heh-legend-code {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 9px;
}
.heh-legend-lbl {
  font-size: 11px;
  color: var(--text2, var(--text));
}
.heh-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  border: 1.5px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
}
.heh-legend-spacer {
  flex: 1;
}
.heh-kbd-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
}
.heh-kbd {
  padding: 2px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  color: var(--text2, var(--text));
  font-weight: 700;
}

/* Popover de filtro de grupos (lista que sale al pulsar "Todos los grupos") */
.heh-group-pop {
  z-index: 11000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 36px -8px rgba(26, 22, 51, 0.25);
  padding: 4px;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}
.heh-group-pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.heh-group-pop-item:hover {
  background: var(--accent-soft);
}
.heh-group-pop-item.is-sel {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
}
.heh-group-pop-check {
  color: var(--accent);
  font-weight: 800;
}
.heh-group-pop-title {
  padding: 6px 12px 8px;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.heh-group-pop-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Pill segmentado de año (Publicados / Historial) */
.se-ov-yearseg {
  display: inline-flex;
  padding: 3px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.se-ov-yearseg-btn {
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.02em;
}
.se-ov-yearseg-btn:hover {
  color: var(--text);
}
.se-ov-yearseg-btn.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Rango Historial deshabilitado cuando hay año concreto seleccionado */
.se-ov-range.is-disabled .se-ov-range-btn {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   Modal "Crear nuevo mes" (overlay Publicados)
   ───────────────────────────────────────────────────────────── */
.se-newmonth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.45);
  z-index: 11500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.se-newmonth-modal {
  background: var(--surface);
  border-radius: 22px;
  width: 100%;
  max-width: 440px;
  padding: 24px 26px;
  position: relative;
  box-shadow: 0 20px 60px -20px rgba(26, 22, 51, 0.4);
}
.se-newmonth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--muted2);
}
.se-newmonth-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.se-newmonth-head {
  margin-bottom: 18px;
  padding-right: 36px;
}
.se-newmonth-kicker {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent-ink, var(--accent));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}
.se-newmonth-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  margin: 4px 0 6px;
  color: var(--text);
  line-height: 1.1;
}
.se-newmonth-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.se-newmonth-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.se-newmonth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.se-newmonth-label {
  font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}
.se-newmonth-input {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.se-newmonth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.se-newmonth-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ─────────────────────────────────────────────────────────────
   Overlay Auto-rellenar · "Próximamente"
   ───────────────────────────────────────────────────────────── */
.se-ov-coming {
  text-align: center;
  padding: 60px 32px 48px;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: 22px;
}
.se-ov-coming-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 36px;
  margin-bottom: 18px;
}
.se-ov-coming-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1;
}
.se-ov-coming-body {
  max-width: 600px;
  margin: 0 auto 32px;
  font-size: 14px;
  color: var(--text2, var(--text));
  line-height: 1.6;
}
.se-ov-coming-body p {
  margin: 0 0 10px;
}
.se-ov-coming-body p:last-child {
  margin-bottom: 0;
}
.se-ov-coming-body strong {
  color: var(--text);
  font-weight: 700;
}

.se-ov-coming-feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 880px;
  margin: 0 auto 32px;
}
@media (max-width: 880px) {
  .se-ov-coming-feat {
    grid-template-columns: 1fr;
  }
}
.se-ov-coming-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
}
.se-ov-coming-feat-ic {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.se-ov-coming-feat-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0;
}
.se-ov-coming-feat-s {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.se-ov-coming-foot {
  max-width: 600px;
  margin: 0 auto;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.se-ov-coming-foot p {
  margin: 0 0 14px;
}
.se-ov-coming-foot a {
  color: var(--accent);
  text-decoration: none;
}
.se-ov-coming-foot a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   HORARIO · Editor — toolbar superior alineado al handoff
   .se-editor envuelve la toolbar + ficha. Sin caja blanca; el
   toolbar usa pills sutiles encima del fondo lila.
   ───────────────────────────────────────────────────────────── */
.se-editor {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 8px;
}
.se-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 14px;
  margin-bottom: 6px;
}
.se-toolbar-left,
.se-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Navegación de mes ◀ select ▶ */
.se-month-nav {
  display: inline-flex;
  align-items: stretch;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.se-month-nav .se-nav-btn {
  width: 30px;
  border: 0;
  background: transparent;
  color: var(--muted2);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.se-month-nav .se-nav-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.se-month-select {
  border: 0 !important;
  background: transparent !important;
  padding: 6px 8px !important;
  min-width: 150px;
  font-weight: 700;
  text-align: center;
}

/* Toggle Semana / Mes (pill segmentado) */
.se-view-toggle {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.se-view-btn {
  padding: 4px 12px;
  border: 0;
  background: transparent;
  color: var(--muted2);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.se-view-btn:hover {
  color: var(--text);
}
.se-view-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Filtro grupo */
.se-group-filter .f-select {
  padding: 6px 10px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-size: 12px;
  font-weight: 600;
}

/* Toggle Cobertura (botón pill que cambia de estado) */
.se-tool-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted2);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.se-tool-toggle .se-tool-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
}
.se-tool-toggle:hover {
  border-color: var(--border2);
}
.se-tool-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
  border-color: var(--accent);
}
.se-tool-toggle[aria-pressed="true"] .se-tool-dot {
  background: var(--accent);
}

/* Pill de estado: Borrador (warn) / Publicado (success) / Sin iniciar (neutral) */
.se-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  border: 1px solid var(--border);
}
.se-state-empty {
  background: transparent;
  color: var(--muted2);
}
.se-state-draft {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.3);
}
.se-state-published {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.3);
}

/* Botón conflictos: solo visible si hay alguno */
.se-conflicts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}
.se-conflicts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

/* Acciones de la derecha — botones más compactos */
.se-toolbar-right .se-action-btn,
.se-toolbar-right .se-publish {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Bloque "Copiar mes desde otro" — colapsable para no inflar el toolbar */
.se-copy-row {
  margin: 0 0 14px;
}
.se-copy-row summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--muted2);
  user-select: none;
}
.se-copy-row summary::-webkit-details-marker {
  display: none;
}
.se-copy-row[open] summary {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
  border-color: var(--accent);
}
.se-copy-row-body {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 880px) {
  .se-toolbar {
    gap: 8px;
  }
  .se-toolbar-left,
  .se-toolbar-right {
    gap: 6px;
  }
}

/* ─────────────────────────────────────────────────────────────
   HORARIO · Tabla del editor (rediseño visual)
   - .se-name-cell: avatar circular + nombre + grupo + horas contrato
   - Cabecera más compacta, día actual en azul
   - Fila opcional de cobertura M·T·N inyectada cuando el toggle
     "Cobertura" del toolbar está activo
   - Pulso "flash" para celdas con conflictos al hacer click en
     el botón "N conflictos" del toolbar
   ───────────────────────────────────────────────────────────── */
.se-wrap {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
}
.se-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.se-table thead th {
  background: transparent;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted2);
}
.se-table tbody tr {
  transition: background 0.12s;
}
.se-table tbody tr:hover {
  background: var(--accent-soft);
}
/* Celda del nombre del trabajador con micro-avatar y meta */
.se-table .se-name-cell {
  padding: 6px 12px !important;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
}
.se-table .se-name-cell .turno-drag-handle {
  color: var(--muted3, var(--muted2));
  cursor: grab;
  opacity: 0.7;
  margin-right: 4px;
}
.se-table .se-name-cell .turno-drag-handle:hover {
  opacity: 1;
}
/* Avatar circular del editor de horarios tras seLoad */
.se-table .se-name-cell .se-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  margin-right: 8px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
/* En el handoff las filas son más finas; reducir padding de celdas */
.se-table tbody td {
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}

/* Botón de celda más cuadrado/compacto, con espacio para dots */
.se-cell-btn {
  position: relative;
}
/* Dot morado: solo override manual de entrada/salida. */
.se-cell-btn.has-override::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
/* Dot de conflicto (esquina arriba-derecha) */
.se-cell-btn.has-conflict::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}
.se-cell-flash {
  animation: seFlash 1.4s ease-out;
}
@keyframes seFlash {
  0%,
  100% {
    outline: 0 transparent;
  }
  30% {
    outline: 3px solid #ef4444;
    outline-offset: 2px;
  }
}
/* Celda seleccionada por teclado/mousedown — outline accent */
.se-cell-btn.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 1;
}

/* Fila de cobertura M·T·N (opcional, inyectada dinámicamente) */
.se-coverage-row td {
  background: rgba(0, 0, 0, 0.02);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted2);
  text-align: center;
  padding: 5px 3px !important;
  border-bottom: 1px solid var(--border) !important;
}
.se-coverage-row .se-cov-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.se-coverage-row .se-cov-line span {
  display: inline-block;
}
.se-coverage-row .se-cov-m {
  color: #166534;
}
.se-coverage-row .se-cov-t {
  color: #1d4ed8;
}
.se-coverage-row .se-cov-n {
  color: #4338ca;
}
.se-coverage-row .se-cov-label {
  text-align: left;
  padding-left: 12px;
  color: var(--muted2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Banner de mes publicado (read-only) */
.se-readonly-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #065f46;
}
.se-readonly-banner .se-readonly-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.se-readonly-banner .se-readonly-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
}
.se-readonly-banner .se-readonly-text strong {
  color: #065f46;
}
.se-readonly-banner .se-readonly-cta {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 12px;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #065f46 !important;
}
/* Cuando el editor está en modo solo lectura, las celdas no aceptan
   clicks ni hover marcado. El botón Publicar también se ve como
   "Publicado" disabled. */
.se-editor.is-readonly .se-cell-btn {
  cursor: not-allowed;
  pointer-events: none;
}
.se-editor.is-readonly .se-publish {
  opacity: 0.55;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   HORARIO · Overlays Publicados / Plantillas / Historial
   Cada uno pisa el panel #admin-shifts manteniendo el sticky-head
   común del editor. Estructura: toolbar superior + filterbar +
   contenido específico (grid de tarjetas o timeline).
   Diseño replicado de design_handoff_admin_horarios/prototipo/
   ───────────────────────────────────────────────────────────── */
.se-overlay-host {
  padding: 16px 24px 24px;
  min-height: 0;
  height: calc(100vh - 210px);
  overflow: auto;
  overscroll-behavior: contain;
}
.se-ov {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.se-ov-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 6px;
}
.se-ov-back {
  padding: 5px 12px !important;
  font-size: 12px !important;
}
.se-ov-spacer {
  flex: 1;
}
.se-ov-cta {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.se-ov-cta-ghost {
  padding: 5px 12px !important;
  font-size: 12px !important;
}
.se-ov-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  width: 220px;
}
.se-ov-search input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  outline: none !important;
}

/* Filter bar (chips + paginador) */
.se-ov-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.se-ov-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.se-ov-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.se-ov-chip:hover {
  border-color: var(--border2);
}
.se-ov-chip.is-sel {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.se-ov-chip-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.65;
}
.se-ov-chip.is-sel .se-ov-chip-n {
  opacity: 0.85;
}

/* Paginador */
.se-ov-pager {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.se-ov-pager-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--text2, var(--text));
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.se-ov-pager-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.se-ov-pager-label {
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  min-width: 60px;
  text-align: center;
}
.se-ov-count {
  font-size: 11.5px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
}
.se-ov-count strong {
  color: var(--text);
}

/* Grid de tarjetas (3 columnas con cards 16:auto) */
.se-ov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .se-ov-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .se-ov-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de mes */
.se-ov-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.se-ov-card.is-current {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.se-ov-card-editing {
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}
.se-ov-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.se-ov-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.1;
}
.se-ov-card-sub {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  margin-top: 4px;
}

/* Pill de estado (success/warn/neutral) */
.se-ov-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  border: 1px solid;
  white-space: nowrap;
}
.se-ov-pill-success {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.3);
}
.se-ov-pill-warn {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.3);
}
.se-ov-pill-neutral {
  background: transparent;
  color: var(--muted2);
  border-color: var(--border);
}
.se-ov-pill-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(29, 108, 240, 0.3);
}
.se-ov-pill-secondary {
  background: rgba(139, 92, 246, 0.1);
  color: #6b21a8;
  border-color: rgba(139, 92, 246, 0.3);
}

/* Mini calendario dentro de la card */
.se-ov-mini-cal {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}
.se-ov-mini-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 3px;
}
.se-ov-mini-head > span {
  text-align: center;
  font-size: 8px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.se-ov-mini-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.se-ov-mini-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  border: 1px solid transparent;
}
.se-ov-mini-empty {
  background: var(--surface3, var(--surface2));
  border: 1px dashed var(--border);
  opacity: 0.5;
}

/* Stats */
.se-ov-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.se-ov-card-stats > div {
  text-align: center;
}
.se-ov-stat-n {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  line-height: 1;
}
.se-ov-stat-n.warn {
  color: #92400e;
}
.se-ov-stat-k {
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 3px;
}
.se-ov-card-stats-empty {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
.se-ov-card-note {
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  font-size: 10.5px;
  color: #92400e;
  font-weight: 600;
}

/* Acciones */
.se-ov-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.se-ov-act {
  padding: 5px 12px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}
.se-ov-act-ghost {
  color: var(--muted2);
  border-color: var(--border);
}
.se-ov-act-ghost:hover {
  border-color: var(--border2);
  color: var(--text);
}
.se-ov-act-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.se-ov-act-primary:hover {
  background: #1554c7;
}
.se-ov-act-pub {
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
}
.se-ov-act-danger {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.06);
}
.se-ov-act-danger:hover {
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.1);
}

/* Card "Crear nuevo" (dashed) */
.se-ov-card-new {
  background: transparent;
  border: 1.5px dashed var(--border2);
  border-radius: 16px;
  padding: 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  color: var(--muted);
  font-family: "Inter", sans-serif;
}
.se-ov-card-new:hover {
  border-color: var(--accent);
}
.se-ov-card-new-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.se-ov-card-new-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  text-align: center;
}
.se-ov-card-new-sub {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
  line-height: 1.45;
  max-width: 220px;
}

/* Tip */
.se-ov-tip {
  padding: 14px 18px;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.se-ov-tip-emoji {
  font-size: 18px;
  flex-shrink: 0;
}
.se-ov-tip-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.se-ov-tip-text strong {
  color: var(--text);
}
.se-ov-tip-text em {
  font-style: italic;
}
.se-ov-tip-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Plantillas ────────────────────────────────────────────── */
.se-ov-tpl {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.se-ov-tpl-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--secondary, #8b5cf6);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
}
.se-ov-tpl-preview {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.se-ov-tpl-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}
.se-ov-tpl-days > span {
  text-align: center;
  font-size: 8.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.se-ov-tpl-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 2px;
}
.se-ov-tpl-cell {
  height: 14px;
  border-radius: 3px;
  font-size: 7.5px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.se-ov-tpl-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
}
.se-ov-tpl-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
  min-height: 34px;
}
.se-ov-tpl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.se-ov-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted2);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.se-ov-tpl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.se-ov-tpl-stats {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.4;
}
.se-ov-tpl-stats strong {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--text);
}
.se-ov-tpl-stats .mono {
  font-family: "IBM Plex Mono", monospace;
}
.se-ov-tpl-stats .muted {
  font-size: 10px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
}
.se-ov-tpl-acts {
  display: flex;
  gap: 6px;
}
.se-ov-tpl-newpills {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* ── Historial · Timeline ──────────────────────────────────── */
.se-ov-range {
  display: inline-flex;
  padding: 3px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.se-ov-range-btn {
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.se-ov-range-btn.is-sel {
  background: var(--accent-soft);
  color: var(--accent);
}
.se-ov-timeline {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 0;
  overflow: hidden;
}
.se-ov-tl-loading,
.se-ov-tl-empty {
  padding: 30px;
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
}
.se-ov-ev {
  display: grid;
  grid-template-columns: 180px 44px 1fr;
  padding: 14px 18px;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.se-ov-ev:last-child {
  border-bottom: 0;
}
.se-ov-ev-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text2, var(--text));
  letter-spacing: 0.02em;
}
.se-ov-ev-actor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.se-ov-ev-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
}
.se-ov-ev-actorName {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}
.se-ov-ev-marker {
  position: relative;
}
.se-ov-ev-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  z-index: 2;
}
.se-ov-ev-line {
  position: absolute;
  top: 36px;
  left: 18px;
  bottom: -28px;
  width: 1px;
  background: var(--border);
}
.se-ov-ev-body {
  min-width: 0;
}
.se-ov-ev-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.se-ov-ev-target {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
}
.se-ov-ev-ba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: 8px;
}
.se-ov-ev-baLabel {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.se-ov-ev-code {
  padding: 2px 8px;
  border-radius: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
}
.se-ov-ev-arrow {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}
.se-ov-ev-reason,
.se-ov-ev-detail {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
.se-ov-ev-acts {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.se-ov-ev-act {
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2, var(--text));
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.se-ov-ev-act-ghost {
  color: var(--muted);
}
.se-ov-tl-loadmore {
  padding: 14px 18px;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────
   ALMUERZOS · Selector de modo (cards grandes)
   3 cards alineadas horizontalmente con icono, título,
   descripción y pros. La activa se rellena en accent-soft
   con check redondo en la esquina.
   ───────────────────────────────────────────────────────────── */
.alm-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 880px) {
  .alm-mode-grid {
    grid-template-columns: 1fr;
  }
}
/* Especificidad máxima + background-color explícito */
button.alm-mode-card,
.alm-mode-card {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-md);
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  color: var(--text);
  transition:
    background 0.15s,
    border-color 0.15s;
  box-shadow: none !important;
}
.alm-mode-card:hover {
  border-color: var(--border2);
}
button.alm-mode-card.is-active,
.alm-mode-card.is-active {
  background: var(--accent-soft) !important;
  background-color: var(--accent-soft) !important;
  border-color: var(--accent);
}
.alm-mode-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 4px;
}
/* Colores específicos por modo — cada icono usa la paleta del handoff:
   - fixed (Mañana/Partido): crema + coral
   - free (Refuerzo): lila claro + morado
   - window (Tarde): azul muy claro + azul */
.alm-mode-card[data-mode="fixed"] .alm-mode-icon {
  background: #fef3c7;
  color: #92400e;
}
.alm-mode-card[data-mode="free"] .alm-mode-icon {
  background: #f3e8ff;
  color: #6b21a8;
}
.alm-mode-card[data-mode="window"] .alm-mode-icon {
  background: #dbeafe;
  color: #1d4ed8;
}
/* Cuando la card está activa, el icono pasa al azul accent para reforzar
   el estado seleccionado (igual que en el handoff) */
.alm-mode-card.is-active .alm-mode-icon {
  background: var(--accent);
  color: #fff;
}
.alm-mode-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
}
.alm-mode-desc {
  font-size: 11.5px;
  color: var(--muted2);
  line-height: 1.45;
}
.alm-mode-pros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.alm-mode-pro {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  font-size: 9.5px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}
.alm-mode-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   ALMUERZOS · Secciones y footer (alineado al handoff de diseño)
   - .alm-section: contenedor SIN caja blanca — el título y el
     subtítulo fluyen sobre el fondo lila de la página, como
     en el prototipo. Cada sección tiene su propia cabecera.
   - .alm-footer-tip: card con tip dorado + CTA "Configurar
     visibilidad" que vuelve a la pestaña Configuración
   ───────────────────────────────────────────────────────────── */
.alm-section {
  background: transparent;
  border: 0;
  padding: 0;
}
.alm-config-section {
  margin-bottom: 24px;
}
.alm-config-card #almuerzos-config {
  margin-top: 18px;
}
.alm-config-card .alm-mode-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.alm-config-card .alm-mode-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  min-height: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
}
.alm-config-card .alm-mode-card.is-active {
  background: transparent !important;
  background-color: transparent !important;
}
.alm-config-card .alm-mode-icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 17px;
  margin: 0;
}
.alm-config-card .alm-mode-title {
  grid-column: 2;
  margin: 0;
}
.alm-config-card .alm-mode-desc {
  grid-column: 2;
  min-height: 0;
}
.alm-config-card .alm-mode-pros {
  grid-column: 2;
  margin-top: 4px;
}
.alm-config-card .alm-mode-check {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
}
.alm-config-card .alm-mode-card:hover .alm-mode-title,
.alm-config-card .alm-mode-card.is-active .alm-mode-title {
  color: var(--accent);
}
.alm-week-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.alm-week-section > .alm-section-head {
  flex: 0 0 auto;
}
.alm-section-head {
  margin-bottom: 14px;
  padding: 0 4px;
}
.alm-section-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alm-section-sub {
  font-size: 12.5px;
  color: var(--muted2);
  line-height: 1.45;
}

.alm-footer-tip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: var(--r);
}
.alm-footer-tip-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.alm-footer-tip-body {
  flex: 1;
  font-size: 12.5px;
  color: var(--muted2);
  line-height: 1.5;
}
.alm-footer-tip-body strong {
  color: var(--text);
}
.alm-footer-tip-body em {
  font-style: normal;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  color: var(--text);
}
.alm-footer-tip-cta {
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .alm-footer-tip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ─────────────────────────────────────────────────────────────
   ALMUERZOS · Sub-modo del modo "ventana"
   - .alm-sub-grid: dos cards radio (worker / global)
   - .alm-glob-config: bloque con los 4 controles + timeline
   ───────────────────────────────────────────────────────────── */
.alm-sub-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.alm-sub-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alm-sub-desc {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 12px;
}
.alm-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 760px) {
  .alm-sub-grid {
    grid-template-columns: 1fr;
  }
}
/* Especificidad máxima + background-color explícito para vencer
   cualquier regla del CSS canónico que pinte fondos a botones. */
button.alm-sub-card,
.alm-sub-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: "Inter", sans-serif;
  color: var(--text);
  transition:
    background 0.15s,
    border-color 0.15s;
  box-shadow: none !important;
}
.alm-sub-card:hover {
  border-color: var(--border2);
}
button.alm-sub-card.is-active,
.alm-sub-card.is-active {
  background: var(--accent-soft) !important;
  background-color: var(--accent-soft) !important;
  border-color: var(--accent);
}
.alm-sub-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: transparent;
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
}
.alm-sub-card.is-active .alm-sub-radio {
  border-color: var(--accent);
}
.alm-sub-card.is-active .alm-sub-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
/* Los spans internos heredan fondo blanco de alguna regla canónica.
   Forzamos transparente con !important + background-color + image. */
.alm-sub-card-body,
.alm-sub-card-title,
.alm-sub-card-desc {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
.alm-sub-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alm-sub-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.alm-sub-card-desc {
  font-size: 11.5px;
  color: var(--muted2);
  line-height: 1.45;
}

.alm-glob-config {
  margin-top: 14px;
  padding: 14px 16px;
  /* Mismo criterio: sin caja blanca, solo borde sutil */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.alm-glob-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 880px) {
  .alm-glob-controls {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .alm-glob-controls {
    grid-template-columns: 1fr;
  }
}
.alm-glob-ctrl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alm-glob-ctrl-label {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}
.alm-glob-input {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.alm-glob-input:focus {
  border-color: var(--accent);
}

.alm-glob-timeline-wrap {
  margin-bottom: 12px;
}
.alm-glob-timeline-label {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 8px;
}
.alm-glob-timeline {
  position: relative;
  height: 72px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alm-glob-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border);
}
.alm-glob-tick span {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 700;
}
.alm-glob-band {
  position: absolute;
  top: 22px;
  bottom: 8px;
  background: rgba(29, 108, 240, 0.18);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alm-glob-band span {
  font-size: 11.5px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--accent-ink, #0a3f99);
  padding: 0 8px;
  text-align: center;
}
.alm-glob-feedback {
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(29, 108, 240, 0.2);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--accent-ink, #0a3f99);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   ALMUERZOS · Ficha semanal — toolbar + grid (alineado al
   handoff "Libre por trabajador y día")
   ───────────────────────────────────────────────────────────── */
.alm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.alm-toolbar-left,
.alm-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.alm-tbar-btn {
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.alm-tbar-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
}
.alm-tbar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 0 6px;
}
.alm-tbar-mode {
  font-size: 11px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-right: 4px;
}

/* ── Móvil: la toolbar de Almuerzos se apila y los chips de grupo
   pasan a scroll horizontal en vez de wrap (evita la columna rota). ── */
@media (max-width: 640px) {
  .alm-toolbar {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .alm-toolbar-left,
  .alm-toolbar-right {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
  }
  .alm-toolbar-left {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "ant label sig hoy"
      "chips chips chips chips";
    gap: 6px;
    align-items: center;
  }
  .alm-toolbar-left > .alm-tbar-btn:nth-of-type(1) {
    grid-area: ant;
  }
  .alm-toolbar-left > .alm-tbar-label {
    grid-area: label;
    text-align: center;
  }
  .alm-toolbar-left > .alm-tbar-btn:nth-of-type(2) {
    grid-area: sig;
  }
  .alm-toolbar-left > .alm-tbar-btn:nth-of-type(3) {
    grid-area: hoy;
  }
  .alm-toolbar-left > .heh-group-chips {
    grid-area: chips;
    margin: 0 !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .alm-toolbar-left > .heh-group-chips::-webkit-scrollbar {
    display: none;
  }
  .alm-toolbar-left > .heh-group-chips .heh-gchip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .alm-toolbar-right {
    justify-content: space-between;
  }
  .alm-tbar-label {
    font-size: 12px;
    padding: 0 4px;
  }
}

/* Grid principal: avatar/nombre (220px) + 7 días iguales */
.alm-week {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  /* Sin fondo blanco — la grid vive sobre el lila de la página.
     Solo borde sutil para enmarcar visualmente. */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.alm-week-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.alm-week-head,
.alm-week-row {
  display: grid;
  grid-template-columns: 220px repeat(7, minmax(0, 1fr));
  align-items: center;
}
/* Separador de oficina en Almuerzos (mismo estilo que Horario) */
.alm-group-sep {
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(
    in srgb,
    var(--alm-gsep, var(--muted2)) 14%,
    transparent
  );
}
.alm-group-sep > span {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alm-gsep, var(--text));
}
/* Subseparador de puesto en Almuerzos — más pálido */
.alm-subrole-sep {
  padding: 3px 14px 3px 30px;
  border-top: 1px solid var(--border);
}
.alm-subrole-sep > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.alm-week-head {
  padding: 8px 14px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.alm-week-head > [role="columnheader"] {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.alm-week-head > [role="columnheader"]:first-child {
  text-align: left;
}
/* Día actual destacado en azul (como el prototipo "MAR 25") */
.alm-week-head > [role="columnheader"].is-today {
  color: var(--accent);
}
.alm-week-head > [role="columnheader"].is-today .alm-week-day,
.alm-week-head > [role="columnheader"].is-today .alm-week-date {
  color: var(--accent);
}
.alm-week-day {
  display: block;
  color: var(--muted2);
}
.alm-week-date {
  display: block;
  font-weight: 600;
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 1px;
}
.alm-week-row {
  padding: 5px 14px;
  border-top: 1px solid var(--border);
  transition: background 0.12s;
}
.alm-week-row.is-alt {
  /* Alternancia muy sutil sobre el fondo lila — un blanco translúcido */
  background: rgba(255, 255, 255, 0.35);
}
.alm-week-row:hover {
  background: var(--accent-soft);
}
.alm-week-worker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.alm-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.alm-week-worker-text {
  min-width: 0;
  line-height: 1.2;
}
.alm-week-worker-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Grupo del trabajador (Sala, Cocina, Barra…) en gris pequeño */
.alm-week-worker-group {
  font-size: 11px;
  color: var(--muted2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alm-week-cell {
  padding: 0 3px;
}

@media (max-width: 980px) {
  .alm-week-head,
  .alm-week-row {
    grid-template-columns: 160px repeat(7, minmax(54px, 1fr));
  }
}

/* En móvil real (≤640px) la grid no cabe: scroll horizontal con la
   primera columna (trabajador) sticky para que se vea siempre. */
@media (max-width: 640px) {
  .alm-week {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .alm-week-head,
  .alm-week-row,
  .alm-group-sep,
  .alm-subrole-sep {
    min-width: 560px;
  }
  .alm-week-head,
  .alm-week-row {
    grid-template-columns: 140px repeat(7, minmax(58px, 1fr));
  }
  .alm-week-head > [role="columnheader"]:first-child,
  .alm-week-worker {
    position: sticky;
    left: 0;
    background: var(--bg2);
    z-index: 2;
  }
  .alm-week-row.is-alt .alm-week-worker {
    background: var(--bg3);
  }
}

/* Celdas de la ficha semanal — pill cuando hay valor, botón discontinuo cuando vacío */
.alm-cell {
  display: block;
  width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
  line-height: 1.3;
}
.alm-cell-filled {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2, rgba(29, 108, 240, 0.25));
  color: var(--accent-ink, #0a3f99);
}
.alm-cell-filled:hover {
  background: rgba(29, 108, 240, 0.18);
}
/* Celda vacía: pill discontinua muy sutil con texto "libre" en gris claro.
   Sin hover marcado (no queremos que cada celda grite "click me"). */
.alm-cell-empty {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted3, var(--muted2));
  font-weight: 500;
  font-size: 11px;
  font-style: normal;
  opacity: 0.6;
}
.alm-cell-empty:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

/* Placeholder cuando la ficha semanal no aplica (modo global) */
.alm-empty-global {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--r);
}
.alm-empty-global-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.alm-empty-global-body {
  flex: 1;
}
.alm-empty-global-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.alm-empty-global-desc {
  font-size: 12.5px;
  color: var(--text2, var(--muted2));
  line-height: 1.5;
}
.alm-empty-global-hint {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 6px;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   Permisos y Ausencias · Vacaciones — rediseño 2026-05
   Prefijos:
     .vp-*  → Vacaciones (General + Personal + componentes compartidos)
     .va-*  → Vacaciones · Asignar (sub-vista full-screen)
   Tonos pastel: VAC_TONES definidos en handoff §6 (admin-vacaciones.js).
   ════════════════════════════════════════════════════════════════ */

/* ── Toolbar superior (General + filtros) ───────────────────── */
.vp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px 0;
}
.vp-year-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.vp-year-arrow {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted2);
  font-size: 14px;
}
.vp-year-arrow:hover {
  background: var(--surface2);
  color: var(--text);
}
.vp-year-label {
  padding: 0 10px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
}

/* ── Chips genéricos (filtros) ──────────────────────────────── */
.vp-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vp-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.vp-chip:hover {
  background: var(--surface2);
}
.vp-chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Segmented (Anual/Q3, General/Personal) ─────────────────── */
.vp-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vp-seg-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.vp-seg-btn:hover {
  color: var(--text);
}
.vp-seg-btn.is-active {
  background: var(--text);
  color: #fff;
}
.vp-segmented-sm .vp-seg-btn {
  padding: 4px 10px;
  font-size: 11px;
}

/* Selector de trimestre Q1·Q2·Q3·Q4 con label de meses debajo */
.vp-q-picker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.vp-q-label {
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ── KPI strip inline ───────────────────────────────────────── */
.vp-kpi-strip {
  display: flex;
  gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
}
.vp-kpi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vp-kpi-v {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
}
.vp-kpi-k {
  font-size: 9.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 4px;
}

/* ── Móvil: Vacaciones / Ausencias toolbar responsive ───────── */
@media (max-width: 640px) {
  .vp-toolbar {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px 0;
  }
  .vp-toolbar > .vp-year-nav {
    align-self: center;
  }
  .vp-toolbar > .vp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    width: 100%;
  }
  .vp-toolbar > .vp-chips::-webkit-scrollbar {
    display: none;
  }
  .vp-toolbar > .vp-chips .vp-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .vp-toolbar > .vp-segmented {
    align-self: center;
  }
  .vp-toolbar > .vp-kpi-strip {
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    width: 100%;
  }
  /* La timeline mensual no cabe en móvil: scroll horizontal */
  .vp-timeline {
    margin: 10px 14px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vp-row {
    min-width: 720px;
  }
}

/* ── Timeline (General Anual + Q3) ──────────────────────────── */
.vp-timeline {
  margin: 14px 20px 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.vp-table-scroll {
  min-height: 0;
  overflow: auto;
}
.vp-row {
  display: grid;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.vp-row:last-child {
  border-bottom: none;
}
.vp-row-head {
  background: var(--bg3);
  padding: 10px 14px;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vp-th {
  text-align: center;
}
.vp-th-month.is-summer {
  color: var(--accent);
}
.vp-th-right {
  text-align: right;
}
.vp-q3-monthhead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vp-q3-mname {
  text-align: center;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.vp-q3-subdays {
  display: grid;
  padding-top: 2px;
  border-top: 1px solid var(--border);
}
.vp-q3-tick {
  font-size: 7px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  /* Estrechamos el glifo y permitimos compresión para que entren los 28-31 días */
  font-stretch: 75%;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
}

/* Worker cell */
.vp-worker {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
.vp-worker:hover .vp-worker-name {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.vp-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0;
}
.vp-avatar-lg {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0;
}
.vp-worker-text {
  min-width: 0;
}
.vp-worker-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vp-worker-meta {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

/* Month cell + blocks */
.vp-monthcell {
  height: 32px;
  position: relative;
  border-left: 1px solid transparent;
  border-right: 1px solid var(--border);
}
.vp-monthcell.is-q3 {
  height: 36px;
}
.vp-monthcell.is-summer {
  background: rgba(16, 185, 129, 0.06);
}
.vp-block {
  position: absolute;
  top: 5px;
  height: 22px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
}
.vp-monthcell.is-q3 .vp-block {
  top: 6px;
  height: 24px;
  font-size: 10.5px;
}
.vp-block.is-pending {
  box-shadow: 0 0 0 1px var(--warn-ink, #92400e) inset;
}
.vp-total {
  text-align: right;
}
.vp-total-v {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}
.vp-total-k {
  font-size: 10px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  margin-left: 2px;
}

/* Footer leyenda */
.vp-footer {
  padding: 10px 14px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.vp-footer-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted2);
}
.vp-footer-meta {
  font-size: 11px;
  color: var(--muted);
}
.vp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vp-legend-swatch {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid;
}
.vp-legend-label {
  font-size: 11px;
  color: var(--text);
}

/* ── Personal: grid + cards ─────────────────────────────────── */
.vp-personal {
  padding: 14px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vp-personal-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(620px, 1.25fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 880px) {
  .vp-personal-grid {
    grid-template-columns: 1fr;
  }
}
.vp-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.vp-card-flat {
  padding: 0;
  overflow: hidden;
}
.vp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.vp-card-header-stripe {
  padding: 12px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
/* Sin fondo/borde/sombra en los hijos para que la regla global [class*="-card"]
   no pinte un marco alrededor de header, título y subtítulo. */
.vp-card-header,
.vp-card-header-stripe,
.vp-card-title,
.vp-card-sub,
.vp-card-sub-kicker {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* La variante stripe sí tiene un borde-bottom legítimo en el detalle trimestral.
   Lo recuperamos sólo para esa variante. */
.vp-card-header-stripe {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
}
.vp-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0;
}
.vp-card-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.vp-card-sub-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vp-legend-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Personal · Worker header + saldo + breakdown */
.vp-pers-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vp-pers-header-text {
  flex: 1;
  min-width: 0;
}
.vp-pers-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vp-arrow-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.vp-arrow-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.vp-arrow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vp-worker-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0;
}
.vp-pers-meta {
  font-size: 11.5px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 4px;
}
.vp-pers-assign-btn {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
  font-size: 12px;
  padding: 9px 12px;
}
.vp-inline-assign {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vp-inline-assign .vp-segmented {
  width: auto;
  justify-content: flex-start;
}
.vp-inline-assign .vp-seg-btn {
  flex: 0 0 auto;
}
.vp-inline-assign .vp-type-segmented {
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}
.vp-unified-calendar .va-year-mini {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vp-year-nav-compact {
  flex-shrink: 0;
}
@media (max-width: 1180px) {
  .vp-personal-grid {
    grid-template-columns: 1fr;
  }
}
.vp-balance-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(0, 2.2fr);
  gap: 6px;
  align-items: stretch;
}
.vp-saldo {
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg2) 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.vp-saldo-num {
  font-family: "Inter", sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.vp-saldo-side {
  display: flex;
  flex-direction: column;
}
.vp-saldo-k {
  font-size: 8.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vp-saldo-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}
.vp-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.vp-bd-cell {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px;
}
.vp-bd-v {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.vp-bd-k {
  min-width: 0;
  font-size: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1180px) {
  .vp-balance-strip {
    grid-template-columns: minmax(170px, 0.9fr) minmax(0, 2.1fr);
  }
}

/* Mini-year grid (helper de admin-festivos.js) */
.vp-mini-year > div {
  background: var(--bg3);
}

/* ── Móvil: la ficha personal de Vacaciones ───────────────── */
@media (max-width: 640px) {
  .vp-personal {
    padding: 0 12px 16px;
  }
  /* El mini-year viene con inline grid-template-columns:repeat(6,1fr);
     en móvil reducimos a 3 columnas y achicamos celdas. */
  #vp-mini-year-host .vp-mini-year,
  #ap-mini-year-host .vp-mini-year {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .vp-card {
    padding: 12px;
  }
  .vp-pers-header {
    flex-wrap: wrap;
  }
  .vp-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .vp-legend-inline {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Saldo: bajar tamaño del número */
  .vp-saldo {
    gap: 10px;
  }
  /* Tabla "PERIODO / HÁBILES / SÁB / DOM / FEST" — scroll horizontal */
  .vp-personal table,
  .vp-personal .vp-req-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Detalle trimestral (scroll interno) */
.vp-quarters-scroll {
  max-height: 520px;
  overflow-y: auto;
}
.vp-quarter {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.vp-quarter:last-child {
  border-bottom: none;
}
.vp-quarter-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.vp-quarter-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
}
.vp-quarter-kicker {
  font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vp-quarter-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}
.vp-quarter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.vp-dm {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
}
.vp-dm-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
.vp-dm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.vp-dm-dow {
  text-align: center;
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
}
.vp-dm-cell {
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--text);
  cursor: pointer;
}
.vp-dm-empty {
  height: 26px;
}

/* Tabla simple para solicitudes en Personal */
.vp-table-head {
  display: grid;
  padding: 10px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vp-table-row {
  display: grid;
  padding: 9px 16px;
  align-items: center;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.vp-table-row:last-child {
  border-bottom: none;
}
.vp-pill {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-family: "IBM Plex Mono", monospace;
  border: 1px solid;
}
.vp-type-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  vertical-align: middle;
}
.vp-act-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.vp-act-btn:hover {
  background: var(--surface2);
}
.vp-act-ok {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.vp-act-no {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.vp-act-ghost {
  background: transparent;
  color: var(--muted2);
}

/* ════════════════════════════════════════════════════════════════
   Vacaciones · Asignar (.va-*)
   ════════════════════════════════════════════════════════════════ */
.va-stage {
  position: relative;
  padding: 20px;
  background: radial-gradient(circle at top, var(--surface) 0%, var(--bg) 100%);
  min-height: 100%;
}
.va-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .va-grid {
    grid-template-columns: 1fr;
  }
}
.va-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.va-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.va-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.va-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0;
}
.va-card-sub {
  font-size: 11px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}
.va-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted2);
  cursor: pointer;
  font-size: 14px;
}
.va-close:hover {
  background: var(--surface2);
  color: var(--text);
}
.va-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.va-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.va-field-label {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.va-worker-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.va-worker-select {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  outline: none;
  cursor: pointer;
}

.va-daterange {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.va-arrow {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  text-align: center;
}
.va-dateinput {
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--text);
  width: 100%;
}
.va-datebox-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.va-datebox {
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.va-datebox-day {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1;
}
.va-datebox-mon {
  display: block;
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--text);
}
.va-datebox-dow {
  display: block;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 700;
}

.va-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.va-period-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.va-period-hint {
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}
.va-period-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg3);
}
.va-period-list-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.va-period-list-head strong {
  color: var(--text);
  white-space: nowrap;
}
.va-period-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #1e40af33;
  border-radius: 8px;
  background: #dbeafe80;
}
.va-period-range {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}
.va-period-meta {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}
.va-period-remove {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted2);
  cursor: pointer;
  flex-shrink: 0;
}
.va-period-remove:hover {
  color: var(--danger);
  border-color: #ef444455;
}

.va-summary {
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dbeafe 0%, var(--bg3) 100%);
  border: 1px solid #1e40af22;
  display: flex;
  align-items: center;
  gap: 14px;
}
.va-summary-cell {
  display: flex;
  flex-direction: column;
}
.va-summary-v {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
}
.va-summary-k {
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
}
.va-summary-sep {
  width: 1px;
  height: 32px;
  background: #1e40af33;
}
.va-summary-meta {
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 700;
}
.va-summary-saldo {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
}
.va-breakdown {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2);
}
.va-breakdown-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(5, 0.8fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--text);
}
.va-breakdown-row:first-child {
  border-top: none;
}
.va-breakdown-row span:not(:first-child) {
  text-align: right;
  font-weight: 800;
}
.va-breakdown-head {
  background: var(--bg3);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.va-breakdown-head span:not(:first-child) {
  font-weight: 800;
}
.va-season-v {
  background: #eff6ff;
}
.va-season-i {
  background: #f8fafc;
}
.va-season-total {
  background: #eef2ff;
  font-weight: 900;
}
.va-season-total span {
  font-weight: 900;
}

.va-textarea {
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  min-height: 60px;
  resize: vertical;
  font-family: "Inter", sans-serif;
  width: 100%;
}
.va-textarea::placeholder {
  color: var(--muted);
  font-style: italic;
}

.va-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.va-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.va-opt input {
  display: none;
}
.va-opt-track {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.va-opt-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: left 0.15s;
}
.va-opt input:checked + .va-opt-track {
  background: var(--green);
}
.va-opt input:checked + .va-opt-track::before {
  left: 16px;
}
.va-opt-label {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
}

/* Calendario derecho */
.va-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.va-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.va-cal-dow {
  text-align: center;
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
}
.va-cal-empty {
  height: 32px;
}
.va-cal-cell {
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border: 1px solid var(--border);
}
.va-cal-cell.is-wknd {
  background: var(--surface2);
  color: var(--muted);
}
.va-cal-cell.is-added {
  background: #d1fae5;
  color: #065f46;
  border-color: #065f4644;
  font-weight: 800;
}
.va-cal-cell.is-sel {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #1e40af55;
  font-weight: 800;
}
.va-cal-cell.is-sel:not(.is-start):not(.is-end) {
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
}
.va-cal-cell.is-start.is-sel {
  border-radius: 6px 0 0 6px;
}
.va-cal-cell.is-end.is-sel {
  border-radius: 0 6px 6px 0;
}
.va-cal-cell.is-start.is-end {
  border-radius: 6px;
}
.va-cal-legend {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.va-year-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.va-y-month {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg3);
}
.va-y-title {
  margin-bottom: 5px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.va-y-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.va-y-dow {
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
}
.va-y-empty {
  height: 18px;
}
.va-y-day {
  height: 18px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.va-y-day:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.va-y-day.is-wknd {
  background: var(--surface2);
  color: var(--muted);
}
.va-y-day.is-summer {
  background: rgba(20, 184, 166, 0.07);
  border-color: rgba(20, 184, 166, 0.24);
}
.va-y-day.is-wknd.is-summer {
  background: rgba(20, 184, 166, 0.11);
}
.va-y-day.is-holiday {
  background: #fee2e2;
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.75);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.55);
}
.va-y-day.is-existing {
  background: #f5d0fe;
  color: #86198f;
  border-color: #86198f44;
}
.va-y-day.is-existing.is-type-vac {
  background: #f5d0fe;
  color: #86198f;
  border-color: #86198f66;
}
.va-y-day.is-existing.is-type-comp {
  background: #e0f2fe;
  color: #075985;
  border-color: #07598566;
}
.va-y-day.is-existing.is-type-extr {
  background: #fef3c7;
  color: #92400e;
  border-color: #92400e66;
}
.va-y-day.is-added {
  background: #dbeafe;
  color: #1e40af;
  border-color: #1e40af66;
}
.va-y-day.is-added.is-type-comp {
  background: #dbeafe;
  color: #075985;
  border-color: #07598566;
}
.va-y-day.is-added.is-type-extr {
  background: #dbeafe;
  color: #92400e;
  border-color: #92400e66;
}
.va-y-day.is-sel {
  background: #dbeafe;
  color: #1e40af;
  border-color: #1e40af55;
  font-weight: 900;
}
.va-y-day.is-sel.is-type-vac {
  background: #dbeafe;
  color: #1e40af;
  border-color: #1e40af66;
}
.va-y-day.is-sel.is-type-comp {
  background: #e0f2fe;
  color: #075985;
  border-color: #07598588;
}
.va-y-day.is-sel.is-type-extr {
  background: #fef3c7;
  color: #92400e;
  border-color: #92400e88;
}
.va-y-day.is-summer.is-sel {
  box-shadow: inset 0 -2px 0 rgba(20, 184, 166, 0.7);
}
.va-y-day.is-existing.is-sel {
  background: linear-gradient(135deg, #dbeafe 0 58%, #f5d0fe 58% 100%);
  color: #1e40af;
  border-color: #86198f88;
  box-shadow: inset 0 0 0 1px rgba(134, 25, 143, 0.55);
}
.va-y-day.is-existing.is-type-comp.is-sel {
  background: linear-gradient(135deg, #dbeafe 0 58%, #e0f2fe 58% 100%);
  color: #075985;
  border-color: #07598588;
  box-shadow: inset 0 0 0 1px rgba(7, 89, 133, 0.45);
}
.va-y-day.is-existing.is-type-extr.is-sel {
  background: linear-gradient(135deg, #dbeafe 0 58%, #fef3c7 58% 100%);
  color: #92400e;
  border-color: #92400e88;
  box-shadow: inset 0 0 0 1px rgba(146, 64, 14, 0.45);
}
.va-y-day.is-existing.is-added {
  background: linear-gradient(135deg, #dbeafe 0 58%, #f5d0fe 58% 100%);
  border-color: #86198f88;
}
.va-y-day.is-existing.is-type-comp.is-added {
  background: linear-gradient(135deg, #dbeafe 0 58%, #e0f2fe 58% 100%);
  border-color: #07598588;
}
.va-y-day.is-existing.is-type-extr.is-added {
  background: linear-gradient(135deg, #dbeafe 0 58%, #fef3c7 58% 100%);
  border-color: #92400e88;
}
.va-y-day.is-holiday.is-sel,
.va-y-day.is-holiday.is-existing {
  border-color: rgba(220, 38, 38, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(220, 38, 38, 0.65),
    inset 0 -2px 0 rgba(220, 38, 38, 0.9);
}

/* Checks de cobertura */
.va-checks-kicker {
  padding: 14px 18px 8px;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.va-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
}
.va-check-row:last-child {
  padding-bottom: 14px;
}
.va-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.va-check-text {
  flex: 1;
  min-width: 0;
}
.va-check-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}
.va-check-detail {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Modo oscuro: ajustes mínimos (los var(--*) ya hacen el grueso) ── */
[data-theme="dark"] .vp-saldo {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
}
[data-theme="dark"] .va-summary {
  background: linear-gradient(
    135deg,
    rgba(29, 108, 240, 0.18) 0%,
    var(--bg3) 100%
  );
  border-color: rgba(29, 108, 240, 0.3);
}
[data-theme="dark"] .va-cal-cell.is-sel {
  background: rgba(29, 108, 240, 0.3);
  color: #fff;
  border-color: rgba(29, 108, 240, 0.6);
}

/* ════════════════════════════════════════════════════════════════
   Permisos y Ausencias · Ausencias — rediseño 2026-05
   Prefijos:
     .ag-*  → Ausencias · General (timeline)
     .al-*  → Ausencias · Lista (chips de tipo + tabla)
     .ap-*  → Ausencias · Personal (breakdown lateral)
   ════════════════════════════════════════════════════════════════ */

/* ── General: worker clickable con chevron y subrayado dotted ─ */
.ag-row .ag-worker {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
.ag-worker-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29, 108, 240, 0.4);
}
.ag-row .ag-worker:hover .ag-worker-name {
  text-decoration-color: var(--accent);
}
.ag-worker-chev {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  font-family: "IBM Plex Mono", monospace;
}

/* ── KPI strip (6 chips de tipo) ──────────────────────────────── */
.ag-kpi-strip {
  display: flex;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.ag-kpi-chip {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.08s;
}
.ag-kpi-chip:hover {
  transform: translateY(-1px);
}
.ag-kpi-chip.is-active {
  box-shadow: 0 0 0 2px var(--text) inset;
}
.ag-kpi-emoji {
  font-size: 12px;
}
.ag-kpi-v {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
}

/* ── Lista: grid de chips de tipo (6 cols) ────────────────────── */
.al-chips-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 980px) {
  .al-chips-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .al-chips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.al-type-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.1s,
    box-shadow 0.15s;
  text-align: left;
}
.al-type-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.al-type-chip.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft) inset;
}
.al-chip-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.al-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.al-chip-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-chip-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
  margin-top: 2px;
}

.al-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.al-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(
    135deg,
    var(--warn-soft, #fef3c7) 0%,
    var(--bg3) 90%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 12.5px;
  color: var(--text);
}
.al-banner-icon {
  font-size: 16px;
}
.al-banner strong {
  color: #92400e;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
}

/* Botones mini de aprobar/denegar (26×26) */
.al-mini-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.al-mini-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
.al-mini-ok {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.al-mini-ok:hover {
  background: #0ea271;
  color: #fff;
}
.al-mini-no {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.al-mini-no:hover {
  background: #fecaca;
  color: #991b1b;
}

/* ── Personal: breakdown lateral por tipo ─────────────────────── */
.ap-breakdown {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-bd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
}
.ap-bd-emoji {
  font-size: 13px;
}
.ap-bd-label {
  flex: 1;
  font-size: 11.5px;
  font-weight: 700;
}
.ap-bd-v {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 13px;
}

/* ── Ausencias · Registrar (.ar-*) — selector de tipo 6 cards ── */
.ar-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 720px) {
  .ar-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ar-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 0.08s,
    box-shadow 0.15s,
    background 0.12s;
  font-family: "Inter", sans-serif;
}
.ar-type-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ar-type-card.is-active {
  border-width: 1.5px;
  font-weight: 800;
  box-shadow: var(--shadow);
}
.ar-type-emoji {
  font-size: 22px;
  line-height: 1;
}
.ar-type-label {
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════
   Permisos y Ausencias · Festivos — rediseño 2026-05
   Prefijo: .fes-*  (la grid mini-meses reutiliza .vp-mini-year de
   admin-festivos.js > renderMiniYearGrid)
   ════════════════════════════════════════════════════════════════ */

/* Toolbar año + stats */
.fes-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px 0;
}
.fes-scroll-body {
  min-height: 0;
  overflow: auto;
}
.fes-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fes-stat-cell {
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.fes-stat-v {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
}
.fes-stat-k {
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 3px;
}

/* Selector CCAA en page-head actions */
.fes-ccaa-select {
  padding: 6px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.fes-ccaa-select:hover {
  border-color: var(--accent);
}

/* Grid 4×3 mini-meses */
.fes-minigrid-card {
  margin: 14px 20px 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.fes-minigrid-card .vp-mini-year {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px;
}

/* Bottom grid: tabla + side */
.fes-bottom-grid {
  margin: 14px 20px 24px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
}
@media (max-width: 880px) {
  .fes-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* Fila de tabla (reutiliza .vp-table-head + .vp-table-row pero con paddings finos) */
.fes-row {
  display: grid;
  padding: 9px 16px;
  align-items: center;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.fes-row:last-child {
  border-bottom: none;
}
.fes-cell-date {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  color: var(--text);
}
.fes-cell-name {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fes-cell-dow {
  text-align: right;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}
.fes-mod-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Side cards: CCAA · Leyenda · Tip */
.fes-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fes-side-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.fes-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
}
.fes-side-meta {
  font-size: 11.5px;
  color: var(--muted2);
  line-height: 1.5;
}
.fes-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fes-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fes-legend-sw {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
}
.fes-legend-l {
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
}

.fes-tip {
  padding: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(
    135deg,
    var(--warn-soft, #fef3c7) 0%,
    var(--surface) 80%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.fes-tip-title {
  font-size: 12px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 6px;
}
.fes-tip-text {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.55;
}

/* ── Modo oscuro ──────────────────────────────────────── */
[data-theme="dark"] .fes-tip {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.18) 0%,
    var(--bg3) 80%
  );
  border-color: rgba(245, 158, 11, 0.35);
}
[data-theme="dark"] .fes-tip-title {
  color: #fcd34d;
}

/* ════════════════════════════════════════════════════════════════
   Permisos y Ausencias · Configuración — rediseño 2026-05 (handoff §4.9)
   Prefijo: .pc-*  (Permisos Config)
   Reutiliza .fch-cfg-toggle del repo para los toggles.
   ════════════════════════════════════════════════════════════════ */

.pc-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  padding: 14px 20px 24px;
  align-items: flex-start;
}
@media (max-width: 880px) {
  .pc-layout {
    grid-template-columns: 1fr;
  }
}
.pc-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
  align-items: start;
}
@media (max-width: 760px) {
  .pc-main {
    grid-template-columns: 1fr;
  }
}
.pc-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 120px;
}

/* Card base — sin fondo, sin bordes, sin sombras (decisión Rafa 2026-05-17)
   IMPORTANTE: !important porque la regla global [class*="-card"]
   (línea ~357 del v5) aplica background + border + radius + shadow a
   CUALQUIER clase que contenga "-card" — incluidos title/sub. */
.pc-card,
.pc-card-title,
.pc-card-sub {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pc-card {
  padding: 16px 18px;
}
.pc-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 6px;
}
.pc-card-sub {
  font-size: 12.5px;
  color: var(--muted2);
  line-height: 1.45;
}

/* Filas (label + control derecha) */
.pc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pc-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pc-row-main {
  flex: 1;
  min-width: 0;
}
.pc-row-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.pc-row-desc {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 2px;
  line-height: 1.45;
}
.pc-days-input {
  width: 92px !important;
  min-width: 92px !important;
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
}
.pc-days-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pc-inline-status {
  min-width: 58px;
  font-size: 10.5px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
}

/* Sub-toggles desplegables (volcado) */
.pc-sub-toggles {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  margin-left: 18px;
  padding-left: 12px;
  border-left: 2px solid var(--accent-soft);
}
.pc-sub-toggles.is-open {
  max-height: 320px;
}
.pc-row-sub {
  padding: 8px 0;
}
.pc-row-sub .pc-row-label {
  font-size: 12.5px;
  font-weight: 600;
}

/* Status badge (Activado / Desactivado) */
.pc-status-badge {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-status-badge.is-on {
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.pc-status-badge.is-off {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted2);
}

/* Card "Periodo de verano" — bloque compacto estilo mockup
   El día/mes son texto grande en Inter. El select real va invisible
   superpuesto para que sea editable sin romper el visual. */
.pc-summer-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: flex-start;
  gap: 16px;
  align-items: flex-end;
  margin-top: 14px;
}
.pc-summer-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  max-width: 240px;
}
.pc-summer-kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pc-summer-box {
  position: relative;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.pc-summer-box:hover,
.pc-summer-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.12);
}
.pc-summer-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.pc-summer-bigdate {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
.pc-summer-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 3px;
}
.pc-summer-arrow {
  color: var(--muted);
  padding-bottom: 22px;
}

/* Popup mini-calendario (relativo a .pc-card) */
.pc-card {
  position: relative;
}
.pc-datepop {
  position: absolute;
  z-index: 50;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--shadow);
  min-width: 240px;
  max-width: 280px;
}
.pc-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pc-dp-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0;
}
.pc-dp-close {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted2);
  cursor: pointer;
  font-size: 11px;
}
.pc-dp-close:hover {
  background: var(--surface2);
  color: var(--text);
}
.pc-dp-section-kicker {
  font-size: 9px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.pc-dp-months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.pc-dp-mbtn {
  padding: 5px 0;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2, var(--text));
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
}
.pc-dp-mbtn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.pc-dp-mbtn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pc-dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.pc-dp-dbtn {
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text2, var(--text));
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
}
.pc-dp-dbtn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.pc-dp-dbtn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 800;
}
.pc-dp-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.pc-info-line {
  flex: 1;
  font-size: 11.5px;
  color: var(--accent-ink, #0a3f99);
  background: var(--accent-soft);
  border: 1px solid rgba(29, 108, 240, 0.18);
  padding: 8px 12px;
  border-radius: 8px;
}

.pc-info-example {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-radius: 10px;
  border: 1px solid rgba(29, 108, 240, 0.25);
  border-left: 4px solid var(--accent);
}
.pc-info-example strong {
  color: var(--accent-ink, #0a3f99);
  font-weight: 800;
}

/* ── Side panel ──────────────────────────────────────── */
.pc-side-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.pc-side-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 12px;
}
.pc-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}
.pc-summary-k {
  color: var(--muted);
  font-weight: 600;
}
.pc-summary-v {
  color: var(--text);
  font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-align: right;
}

/* Tip card ámbar */
.pc-tip-card {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(
    135deg,
    var(--warn-soft, #fef3c7) 0%,
    var(--surface) 80%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.pc-tip-title {
  font-size: 12px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 6px;
}
.pc-tip-text {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.55;
}
.pc-tip-text strong {
  color: var(--text);
}

/* Card "código a medida" lila */
.pc-special-card {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(
    135deg,
    var(--secondary-soft) 0%,
    var(--surface) 80%
  );
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.pc-special-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--secondary);
  margin-bottom: 6px;
}
.pc-special-text {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.55;
}
.pc-special-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.pc-special-link:hover {
  text-decoration: underline;
}

/* ── Modo oscuro ───────────────────────────────────────── */
[data-theme="dark"] .pc-status-badge.is-on {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.35);
  color: #86efac;
}
[data-theme="dark"] .pc-tip-card {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.18) 0%,
    var(--bg3) 80%
  );
  border-color: rgba(245, 158, 11, 0.35);
}
[data-theme="dark"] .pc-tip-title {
  color: #fcd34d;
}
[data-theme="dark"] .pc-special-card {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.18) 0%,
    var(--bg3) 80%
  );
  border-color: rgba(139, 92, 246, 0.35);
}
[data-theme="dark"] .pc-info-line {
  background: rgba(29, 108, 240, 0.15);
  border-color: rgba(29, 108, 240, 0.3);
  color: #93c5fd;
}

/* ──────────────────────────────────────────────
   HORAS Y REPORTES · Soft Pro
   Prefijo .hrs-* — bloque añadido el 2026-05-17
   Solo Configuración por ahora.
   ────────────────────────────────────────────── */

/* Grid 2 columnas (sobrescribe el ancho del .fch-cfg-grid: 320 → 300) */
.hrs-cfg-grid {
  grid-template-columns: 1fr 300px;
  gap: 16px;
  padding: 16px 24px 24px;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .hrs-cfg-grid {
    grid-template-columns: 1fr;
  }
}
.hrs-cfg-side {
  position: sticky;
  top: 24px;
  gap: 12px;
}

/* Card "Reglas activas" */
.hrs-cfg-rules {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.hrs-cfg-rules-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 12px;
}
.hrs-cfg-rules-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hrs-cfg-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  gap: 8px;
}
.hrs-cfg-rule-k {
  color: var(--muted2);
  font-weight: 600;
}
.hrs-cfg-rule-v {
  color: var(--text);
  font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

/* Tip override (queda dentro de .fch-cfg-tip pero usamos el patrón ya existente) */
.hrs-cfg-tip {
  padding: 14px 16px;
}

/* Aviso legal (RD-ley 8/2019) */
.hrs-cfg-legal {
  padding: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.07),
    rgba(239, 68, 68, 0.02)
  );
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.hrs-cfg-legal-h {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 4px;
}
.hrs-cfg-legal-b {
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}
.hrs-cfg-legal-b strong {
  color: var(--text);
  font-weight: 800;
}

/* Inputs custom */
.hrs-cfg-select,
.hrs-cfg-input-time,
.hrs-cfg-input-num {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: "Inter", sans-serif;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.hrs-cfg-select:focus,
.hrs-cfg-input-time:focus,
.hrs-cfg-input-num:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hrs-cfg-input-time {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}
.hrs-cfg-input-num {
  width: 80px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  text-align: center;
}

/* Etiqueta mono uppercase reutilizable */
.hrs-cfg-mono-label {
  font-size: 10px;
  color: var(--muted2);
  display: block;
  margin-bottom: 4px;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Ratios layout */
.hrs-cfg-ratio {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hrs-cfg-ratio-label {
  font-size: 10px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.hrs-cfg-ratio-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hrs-cfg-ratio-prefix {
  font-size: 13px;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}

/* Cards "Próximamente" - estado deshabilitado/visual */
.hrs-cfg-card-soon {
  opacity: 0.72;
  position: relative;
}
.hrs-cfg-card-soon .fch-cfg-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hrs-cfg-soon {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border2);
}
.hrs-cfg-row-soon {
  pointer-events: none;
}
.hrs-cfg-soon-val {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px dashed var(--border2);
  white-space: nowrap;
  align-self: center;
}

/* Conversiones a pago (radio-cards 2×2) */
.hrs-conv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .hrs-conv {
    grid-template-columns: 1fr;
  }
}
.hrs-conv-opt {
  text-align: left;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.hrs-conv-opt.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.hrs-conv-opt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hrs-conv-opt-emoji {
  font-size: 16px;
}
.hrs-conv-opt-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text);
}
.hrs-conv-opt-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.hrs-conv-opt-desc {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.45;
}

/* Dark mode */
[data-theme="dark"] .hrs-cfg-legal {
  background: linear-gradient(
    135deg,
    rgba(248, 113, 113, 0.12),
    rgba(248, 113, 113, 0.04)
  );
  border-color: rgba(248, 113, 113, 0.3);
}
[data-theme="dark"] .hrs-cfg-legal-h {
  color: #fca5a5;
}
[data-theme="dark"] .hrs-conv-opt {
  background: var(--bg2);
}
[data-theme="dark"] .hrs-conv-opt.active {
  background: var(--accent-soft);
}
[data-theme="dark"] .hrs-cfg-soon-val {
  background: var(--bg2);
}

/* ──────────────────────────────────────────────
   HORAS Y REPORTES · RESUMEN · Soft Pro
   Bloque añadido el 2026-05-17 (pestaña Resumen)
   ────────────────────────────────────────────── */

/* Body */
.hrs-body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Toolbar superior */
.hrs-resumen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.hrs-resumen-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted2);
  flex-wrap: wrap;
}
.hrs-resumen-meta-strong {
  color: var(--text);
  font-weight: 700;
}
.hrs-resumen-meta-sep {
  color: var(--border2);
}

/* Pill warn/danger genérico */
.hrs-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.hrs-pill.warn {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Month nav */
.hrs-monthnav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.hrs-monthnav-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.hrs-monthnav-btn:hover:not(:disabled) {
  background: var(--surface2);
}
.hrs-monthnav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.hrs-monthnav-label {
  padding: 0 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.hrs-monthnav-label.is-mes {
  color: var(--accent);
}
.hrs-monthnav-clear {
  margin-left: 4px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
}
.hrs-monthnav-clear:hover {
  color: var(--text);
  border-color: var(--border2);
}

/* KPIs */
.hrs-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.hrs-kpis-free {
  grid-template-columns: 2fr 1fr 1.4fr;
}
@media (max-width: 1280px) {
  .hrs-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .hrs-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .hrs-kpis,
  .hrs-kpis-free {
    grid-template-columns: 1fr;
  }
}
.hrs-kpi {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.hrs-kpi.hero {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.12) 0%,
    var(--surface) 75%
  );
  border-color: rgba(16, 185, 129, 0.25);
}
.hrs-kpi.hero::after {
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.18) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.hrs-kpi.hero.is-zero {
  background: var(--surface);
  border-color: var(--border);
}
.hrs-kpi.hero.is-zero::after {
  display: none;
}
.hrs-kpi.is-danger {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.07) 0%,
    var(--surface) 75%
  );
  border-color: rgba(239, 68, 68, 0.2);
}
.hrs-kpi.is-secondary {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08) 0%,
    var(--surface) 75%
  );
  border-color: rgba(139, 92, 246, 0.22);
}
.hrs-kpi.is-warn {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.08) 0%,
    var(--surface) 75%
  );
  border-color: rgba(245, 158, 11, 0.22);
}
.hrs-kpi.is-zero {
  background: var(--surface2);
}
.hrs-kpi-label {
  position: relative;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrs-kpi-value {
  position: relative;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
.hrs-kpi.hero .hrs-kpi-value {
  font-size: 26px;
  color: var(--green);
}
.hrs-kpi.hero.is-zero .hrs-kpi-value {
  color: var(--text);
}
.hrs-kpi.is-danger .hrs-kpi-value {
  color: var(--red);
}
.hrs-kpi.is-secondary .hrs-kpi-value {
  color: #7c3aed;
}
.hrs-kpi.is-warn .hrs-kpi-value {
  color: var(--amber);
}
.hrs-kpi.is-zero .hrs-kpi-value {
  color: var(--muted2);
}
.hrs-kpi-unit {
  font-size: 0.55em;
  color: var(--muted);
  font-weight: 600;
  margin-left: 2px;
}
.hrs-kpi-sub {
  position: relative;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrs-trend {
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 10px;
}
.hrs-trend.success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}
.hrs-kpi-cta {
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    var(--secondary-soft)
  );
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hrs-kpi-cta-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.hrs-kpi-cta-b {
  font-size: 11.5px;
  color: var(--muted2);
  line-height: 1.5;
}

/* Charts row */
.hrs-charts {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
@media (max-width: 980px) {
  .hrs-charts {
    grid-template-columns: 1fr;
  }
}
.hrs-chart-card,
.hrs-donut-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.hrs-chart-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.hrs-chart-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--text);
}
.hrs-chart-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}
.hrs-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hrs-chart-legend-bar {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.hrs-chart-legend-bar.accent {
  background: var(--accent);
}
.hrs-chart-legend-line {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--muted2);
  opacity: 0.7;
}

/* Bars */
.hrs-bars {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 200px;
  padding: 22px 8px 0;
  position: relative;
}
.hrs-empty {
  width: 100%;
  align-self: center;
  text-align: center;
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
}
.hrs-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.hrs-bar-track {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.hrs-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 8px 8px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}
.hrs-bar.over {
  background: linear-gradient(180deg, var(--amber) 0%, var(--accent) 100%);
}
.hrs-bar-contract {
  position: absolute;
  left: -4px;
  right: -4px;
  border-top: 2px dashed var(--muted2);
  opacity: 0.55;
  pointer-events: none;
}
.hrs-bar-val {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}
.hrs-bar-label {
  margin-top: 8px;
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Donut */
.hrs-donut-body {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hrs-donut {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}
.hrs-donut svg {
  width: 100%;
  height: 100%;
}
.hrs-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hrs-donut-num {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1;
}
.hrs-donut-cap {
  font-size: 9.5px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  margin-top: 4px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hrs-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hrs-donut-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.hrs-donut-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hrs-donut-k {
  color: var(--text);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrs-donut-v {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--text);
  font-size: 11.5px;
}

/* Ranking de balance por trabajador */
.hrs-rank {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hrs-rank-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hrs-rank-legend {
  display: flex;
  gap: 14px;
  font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hrs-rank-cols {
  display: grid;
  grid-template-columns: 130px repeat(4, 1fr);
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.hrs-rank-col-h {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted2);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hrs-rank-rows {
  display: flex;
  flex-direction: column;
}
.hrs-rank-row {
  display: grid;
  grid-template-columns: 130px repeat(4, 1fr);
  gap: 10px;
  padding: 5px 14px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.hrs-rank-row:last-child {
  border-bottom: none;
}
.hrs-rank-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.012);
}
.hrs-rank-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrs-rank-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hrs-rank-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.hrs-rank-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.hrs-rank-bar.secondary > span {
  background: #7c3aed;
}
.hrs-rank-bar.warn > span {
  background: var(--amber);
}
.hrs-rank-bar.danger > span {
  background: var(--red);
}
.hrs-rank-bar.bidir {
  position: relative;
  overflow: visible;
}
.hrs-rank-bar.bidir::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--border2);
}
.hrs-rank-bar.bidir > span {
  position: absolute;
  top: 0;
  height: 100%;
}
.hrs-rank-bar.bidir.left > span {
  right: 50%;
  background: var(--green);
}
.hrs-rank-bar.bidir.right > span {
  left: 50%;
  background: var(--red);
}
.hrs-rank-bar.bidir.is-zero > span {
  background: var(--muted2);
}
.hrs-rank-dash {
  flex: 1;
  text-align: center;
  color: var(--border2);
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
}
.hrs-rank-val {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  min-width: 42px;
  text-align: right;
}
.hrs-rank-val:empty {
  display: none;
}
.hrs-rank-val.is-deuda {
  color: var(--red);
}
.hrs-rank-val.is-bolsa {
  color: var(--green);
}
.hrs-rank-val.is-zero {
  color: var(--muted2);
}
.hrs-rank-val.secondary {
  color: #7c3aed;
}
.hrs-rank-val.warn {
  color: var(--amber);
}
.hrs-rank-val.danger {
  color: var(--red);
}
.hrs-rank-empty {
  padding: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
}
.hrs-rank-foot {
  padding: 8px 18px;
  text-align: center;
  font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted2);
  background: var(--surface2);
  border-top: 1px dashed var(--border);
  letter-spacing: 0.04em;
}

/* Tops */
.hrs-tops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .hrs-tops {
    grid-template-columns: 1fr;
  }
}
.hrs-top {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.hrs-top-bolsa {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.06) 0%,
    var(--surface) 80%
  );
  border-color: rgba(16, 185, 129, 0.18);
}
.hrs-top-deuda {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.05) 0%,
    var(--surface) 80%
  );
  border-color: rgba(239, 68, 68, 0.16);
}
.hrs-top-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.hrs-top-empty {
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
}
.hrs-top-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hrs-top-row:last-child {
  border-bottom: none;
}
.hrs-top-pos {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted2);
  text-align: center;
}
.hrs-top-bolsa .hrs-top-row:nth-child(2) .hrs-top-pos,
.hrs-top-deuda .hrs-top-row:nth-child(2) .hrs-top-pos {
  color: var(--accent);
}
.hrs-top-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrs-top-val {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 12px;
}
.hrs-top-val.success {
  color: var(--green);
}
.hrs-top-val.danger {
  color: var(--red);
}

/* Dark mode */
[data-theme="dark"] .hrs-kpi.hero {
  background: linear-gradient(
    135deg,
    rgba(52, 211, 153, 0.15) 0%,
    var(--surface) 75%
  );
  border-color: rgba(52, 211, 153, 0.3);
}
[data-theme="dark"] .hrs-kpi.is-danger {
  background: linear-gradient(
    135deg,
    rgba(248, 113, 113, 0.1) 0%,
    var(--surface) 75%
  );
}
[data-theme="dark"] .hrs-rank-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
[data-theme="dark"] .hrs-top-row {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .hrs-bar-contract {
  border-top-color: var(--muted);
}

/* ──────────────────────────────────────────────
   REPORTES · COBERTURA · Calendario
   ────────────────────────────────────────────── */
.rep-cov-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.rep-cov-nav-btn:hover:not(:disabled) {
  background: var(--surface);
}
.rep-cov-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rep-cov-week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0 2px 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  text-align: center;
}
.rep-cov-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.rep-cov-empty {
  background: transparent;
}
.rep-cov-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
  transition:
    transform 0.1s,
    box-shadow 0.15s;
  cursor: default;
}
.rep-cov-day:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.rep-cov-day.is-finde {
  background: var(--surface2);
}
.rep-cov-day.rep-cov-ok {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}
.rep-cov-day.rep-cov-warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
.rep-cov-day.rep-cov-bad {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.22);
}
.rep-cov-day.rep-cov-nodata {
  background: var(--surface2);
  border-style: dashed;
  opacity: 0.7;
}
.rep-cov-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.rep-cov-day-num {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0;
}
.rep-cov-day-dn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rep-cov-day-val {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}
.rep-cov-day-bar {
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: auto;
}
.rep-cov-day-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
[data-theme="dark"] .rep-cov-day-bar {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .rep-cov-day.is-finde {
  background: rgba(255, 255, 255, 0.03);
}

/* ──────────────────────────────────────────────
   DESGLOSE · Tabla de meses (refactor visual)
   Wrapper card Soft Pro, sin tocar columnas ni datos
   ────────────────────────────────────────────── */
.hrs-desg-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: 4px;
  width: fit-content;
}
.hrs-desg-table thead tr {
  background: var(--surface2);
  border-bottom: 1px solid var(--border) !important;
}
.hrs-desg-table thead th {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2) !important;
  font-weight: 800 !important;
}
.hrs-desg-table tbody tr:not(.hrs-desg-table-detail) {
  transition: background 0.15s;
}
.hrs-desg-table tbody tr:not(.hrs-desg-table-detail):hover {
  background: var(--surface2) !important;
}
.hrs-desg-table
  > tbody
  > tr:nth-of-type(4n + 3):not([style*="rgba(29,108,240"]) {
  background: rgba(0, 0, 0, 0.015);
}
[data-theme="dark"]
  .hrs-desg-table
  > tbody
  > tr:nth-of-type(4n + 3):not([style*="rgba(29,108,240"]) {
  background: rgba(255, 255, 255, 0.02);
}

/* Picker de archivo justificante en Registrar Ausencia */
.va-doc-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.va-doc-icon {
  font-size: 14px;
}
.va-doc-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.va-doc-picker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.va-doc-btn {
  padding: 8px 12px;
  background: var(--accent-soft);
  color: var(--accent-ink, #0a3f99);
  border: 1px solid rgba(29, 108, 240, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.va-doc-btn:hover {
  background: var(--accent);
  color: #fff;
}
.va-doc-hint {
  font-size: 10.5px;
  color: var(--muted);
}

/* ── Vacaciones·Personal · tabla Periodo con verano/invierno ──
   Anchos ajustados al contenido. La tabla NO ocupa el ancho del card —
   se queda alineada a la izquierda y mide lo justo. */
.vp-periodo-grid {
  display: grid;
  grid-template-columns:
    110px /* Periodo */
    28px /* P (V/I) */
    64px /* Hábiles */
    44px /* Sáb */
    44px /* Dom */
    52px /* Fest */
    60px /* Días */
    140px /* Nota */
    100px /* Estado */
    150px; /* Acciones */
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}
@media (max-width: 980px) {
  .vp-periodo-grid {
    font-size: 11px;
    gap: 6px;
  }
}

/* Badge V/I */
.vp-season-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid;
}
.vp-season-badge.vp-season-v {
  background: #faeeda;
  color: #854f0b;
  border-color: rgba(186, 117, 23, 0.3);
}
.vp-season-badge.vp-season-i {
  background: #e6f1fb;
  color: #185fa5;
  border-color: rgba(56, 138, 221, 0.3);
}

/* Subtotales verano/invierno y total general */
.vp-sub-v {
  background: rgba(239, 159, 39, 0.1) !important;
  color: #854f0b;
  border-top: 1px solid rgba(186, 117, 23, 0.3) !important;
}
.vp-sub-v span {
  color: #854f0b !important;
}
.vp-sub-i {
  background: rgba(56, 138, 221, 0.08) !important;
  color: #185fa5;
}
.vp-sub-i span {
  color: #185fa5 !important;
}
.vp-sub-total {
  background: var(--text) !important;
  color: #fff !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.vp-sub-total span {
  color: #fff !important;
}

/* Dark mode */
[data-theme="dark"] .vp-season-badge.vp-season-v {
  background: rgba(239, 159, 39, 0.2);
  color: #fbbf24;
}
[data-theme="dark"] .vp-season-badge.vp-season-i {
  background: rgba(56, 138, 221, 0.2);
  color: #93c5fd;
}
[data-theme="dark"] .vp-sub-v {
  background: rgba(239, 159, 39, 0.12) !important;
}
[data-theme="dark"] .vp-sub-i {
  background: rgba(56, 138, 221, 0.12) !important;
}

/* ════════════════════════════════════════════════════════════════════
   DATOS DE EMPRESA · Soft Pro
   Prefijo .emp-* — usado SOLO por las 3 pestañas (Facturación, Plan,
   Configuración) de Admin · Datos de empresa.
   ════════════════════════════════════════════════════════════════════ */

/* Layout 2-col con sidebar sticky */
.emp-body {
  padding: 6px 4px 24px;
}
.emp-grid-side {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: flex-start;
}
.emp-col-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.emp-col-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 2px;
}
@media (max-width: 900px) {
  .emp-grid-side {
    grid-template-columns: 1fr;
  }
  .emp-col-side {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

/* Card base — transparente (sin "papel blanco"), sin borde ni sombra.
   Igual que .fch-cfg-card del resto del Admin. !important para pisar
   posibles overrides globales tipo #admin-facturacion .a-card. */
.emp-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 16px !important;
  box-shadow: none !important;
}
.emp-invoices-head-h,
.emp-invoices-head-sub {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Separador sutil entre cards apiladas dentro de la columna principal */
.emp-col-main > .emp-card + .emp-card,
.emp-col-main > .emp-card + .emp-invoices,
.emp-col-main > .emp-invoices + .emp-card,
.emp-col-main > .emp-card + .emp-danger,
.emp-col-main > .emp-danger + .emp-card {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.emp-card-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.emp-card-sub {
  font-size: 12.5px;
  color: var(--muted2);
  margin: 0 0 14px;
  line-height: 1.45;
}
.emp-actions-right {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ── Fields (datos fiscales + identidad) ───────────────────────── */
.emp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.emp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.emp-field--full {
  grid-column: 1 / -1;
}
.emp-field-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--muted2);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Especificidad necesaria para pisar el `input[type="..."]` global
   (línea ~265) que tiene !important con selector de atributo. */
#admin-facturacion input.emp-field-input,
#admin-facturacion input.emp-field-input[type="text"],
#admin-facturacion input.emp-field-input[type="email"],
#admin-facturacion input.emp-field-input[type="tel"],
input.emp-field-input,
input.emp-field-input[type="text"],
input.emp-field-input[type="email"],
input.emp-field-input[type="tel"] {
  width: 100%;
  padding: 9px 12px !important;
  background: #fff !important;
  border: 1px solid #dfe5f0 !important;
  border-radius: 10px !important;
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
  font-family: "Inter", sans-serif !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
input.emp-field-input.mono {
  font-family: "IBM Plex Mono", monospace !important;
}
input.emp-field-input:hover {
  background: #f8fbff !important;
  border-color: #c9d7ff !important;
}
input.emp-field-input:focus,
input.emp-field-input[type="text"]:focus,
input.emp-field-input[type="email"]:focus,
input.emp-field-input[type="tel"]:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.15) !important;
}
[data-theme="dark"] input.emp-field-input {
  background: var(--surface3, #221e32) !important;
}
[data-theme="dark"] input.emp-field-input:focus {
  background: var(--bg2) !important;
}

/* ── Método de pago (card visual con badge VISA) ───────────────── */
.emp-payment {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.emp-visa-badge {
  width: 44px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a1a1a, #444);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.emp-payment-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}
.emp-payment-meta {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}
.emp-payment-info {
  flex: 1;
  min-width: 0;
}
.emp-pill-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme="dark"] .emp-pill-success {
  color: #6ee7b7;
}

/* ── Historial de facturas ─────────────────────────────────────── */
.emp-invoices {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 4px 0 16px;
}
.emp-invoices-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.emp-invoices-head-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--text);
}
.emp-invoices-head-sub {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 2px;
}
.emp-invoices-cols,
.emp-invoices-row {
  display: grid;
  grid-template-columns: 120px 110px 1fr 110px 96px 56px;
  align-items: center;
  gap: 8px;
}
.emp-invoices-cols {
  padding: 9px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
}
.emp-invoices-cols .right {
  text-align: right;
}
.emp-invoices-row {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.emp-invoices-row:last-child {
  border-bottom: none;
}
.emp-invoices-row .id {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  color: var(--text);
  font-size: 11.5px;
}
.emp-invoices-row .date,
.emp-invoices-row .amount {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}
.emp-invoices-row .date {
  color: var(--muted2);
}
.emp-invoices-row .amount {
  text-align: right;
  font-weight: 800;
  color: var(--text);
  font-size: 12.5px;
}
.emp-invoices-row .concept {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-invoices-row a.download,
.emp-invoices-row button.download {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.emp-invoices-row a.download:hover,
.emp-invoices-row button.download:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.emp-invoices-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted2);
  font-size: 12.5px;
}
[data-theme="dark"] .emp-invoices-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* ── Side card "Próxima factura" ───────────────────────────────── */
.emp-next {
  background: linear-gradient(
    135deg,
    var(--accent-soft) 0%,
    var(--secondary-soft) 100%
  );
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.emp-next .kicker {
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 8px;
}
.emp-next .amount {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1;
}
.emp-next .when {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 6px;
  line-height: 1.45;
}
.emp-next .when strong {
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
}

/* Botón ghost full-width usado en side cards */
.emp-btn-ghost {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.emp-btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── PLAN · banner status ──────────────────────────────────────── */
.emp-plan-banner {
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.emp-plan-banner::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.emp-plan-banner .icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.emp-plan-banner .info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.emp-plan-banner .title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.emp-plan-banner .title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: #fff;
}
.emp-plan-banner .pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.emp-plan-banner .sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.emp-plan-banner .sub strong {
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
}
.emp-plan-banner .ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.emp-plan-banner-btn {
  padding: 9px 14px;
  border-radius: 10px;
  border: none;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.emp-plan-banner-btn.primary {
  background: #fff;
  color: var(--accent);
}
.emp-plan-banner-btn.primary:hover {
  background: rgba(255, 255, 255, 0.9);
}
.emp-plan-banner-btn.ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.emp-plan-banner-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* ── PLAN · toggle Mensual/Anual ────────────────────────────────── */
.emp-plan-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 2px;
}
.emp-plan-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  gap: 0;
}
.emp-plan-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  font-family: "Inter", sans-serif;
}
.emp-plan-toggle button.active {
  background: var(--text);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.emp-plan-toggle .badge {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ── PLAN · cards de planes ─────────────────────────────────────── */
.emp-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 14px;
}
@media (max-width: 1200px) {
  .emp-plans {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .emp-plans {
    grid-template-columns: 1fr;
  }
}
/* Cards de planes: fondo blanco, borde sutil, sombra suave.
   La actual destacada con border 2px accent + tinte accent-soft. */
.emp-plan-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.emp-plan-card.current {
  background: var(--secondary-soft);
  border: 2px solid var(--secondary);
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}
.emp-plan-card.current .emp-plan-card-badge {
  background: var(--secondary);
}
.emp-plan-card.current .emp-plan-card-feat .check {
  background: var(--secondary);
}
[data-theme="dark"] .emp-plan-card {
  background: var(--surface2);
}
.emp-plan-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.emp-plan-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface) !important;
  color: var(--text);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.emp-plan-card.current .emp-plan-card-icon {
  background: linear-gradient(
    135deg,
    var(--secondary) 0%,
    #a78bfa 100%
  ) !important;
  color: #fff;
}
/* Título, precio y descripción de la card: planos, sin caja blanca alrededor */
.emp-plan-card-name,
.emp-plan-card-price,
.emp-plan-card-desc {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}
.emp-plan-card-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 !important;
}
.emp-plan-card-price {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
  margin-top: 8px !important;
  /* No dejes que "Personalizado" se salga */
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.emp-plan-card-price small {
  font-size: 14px;
  color: var(--muted2);
  font-weight: 600;
  font-family: "Inter", sans-serif;
}
/* Enterprise: el texto "Personalizado" es demasiado largo para 32px */
.emp-plan-card[data-plan="enterprise"] .emp-plan-card-price {
  font-size: 20px;
  line-height: 1.1;
}
.emp-plan-card-desc {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px !important;
  line-height: 1.5;
  min-height: 32px;
}
.emp-plan-card-feats {
  margin-top: 16px !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.emp-plan-card-feat {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.emp-plan-card-feat .check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.emp-plan-card.current .emp-plan-card-feat .check {
  background: var(--accent);
}
.emp-plan-card-cta {
  margin-top: 18px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.emp-plan-card-cta:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.emp-plan-card-cta.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.emp-plan-card-cta.primary:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}
.emp-plan-card-cta.danger {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}
.emp-plan-card-cta.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--red);
}
.emp-plan-card-cta[disabled] {
  background: transparent !important;
  color: var(--secondary) !important;
  border: 1px dashed var(--secondary) !important;
  cursor: not-allowed;
  opacity: 0.85;
}

/* ── PLAN · FAQ ─────────────────────────────────────────────────── */
.emp-faq {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 0 4px;
  box-shadow: none;
}
.emp-faq-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 12px;
}
.emp-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .emp-faq-grid {
    grid-template-columns: 1fr;
  }
}
.emp-faq-q {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.emp-faq-a {
  font-size: 12.5px;
  color: var(--muted2);
  line-height: 1.55;
}

/* ── CONFIG · color swatches ────────────────────────────────────── */
.emp-swatches {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.emp-swatch {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  position: relative;
  padding: 0;
  transition: transform 0.12s;
}
.emp-swatch:hover {
  transform: scale(1.06);
}
.emp-swatch.active {
  outline: 3px solid var(--bg2);
  box-shadow: 0 0 0 2px var(--text);
}
.emp-swatch.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── CONFIG · logo drop zone ────────────────────────────────────── */
.emp-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.emp-logo-preview {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  overflow: hidden;
  flex-shrink: 0;
}
.emp-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.emp-logo-preview.has-logo {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 3px;
  box-sizing: border-box;
}

/* ── CONFIG · select pill ───────────────────────────────────────── */
.emp-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  font-family: "Inter", sans-serif;
  min-width: 160px;
}
.emp-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.15);
}

/* ── CONFIG · filas internas sin bordes ─────────────────────────
   Override defensivo: dentro de .emp-card, las filas .fch-cfg-row
   NO llevan línea separadora ni el padding por defecto del global.
   Esto solo afecta a las 3 pestañas de Datos de empresa. */
.emp-card .fch-cfg-row {
  border-bottom: none;
  padding: 10px 0;
  align-items: center;
}
.emp-card .fch-cfg-row:first-child {
  padding-top: 4px;
}
.emp-card .fch-cfg-row:last-child {
  padding-bottom: 4px;
}

/* Sin línea ni fondo bajo el título / sub del card.
   Override defensivo con !important porque hay reglas globales
   (.a-card-title, h3, etc.) que pueden pintarles fondo blanco. */
.emp-card-h,
.emp-card-sub,
.emp-card > .emp-card-h,
.emp-card > .emp-card-sub {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── CONFIG · personalizar menú (envoltura) ─────────────────────── */
.emp-menu-note {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--muted2);
}
.emp-menu-note strong {
  color: var(--text);
}

/* ── CONFIG · zona peligrosa ────────────────────────────────────── */
.emp-danger {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 0;
  padding: 18px 0 4px;
  box-shadow: none;
}
.emp-danger-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--red);
  margin-bottom: 4px;
}
.emp-danger-sub {
  font-size: 12.5px;
  color: var(--muted2);
  margin-bottom: 12px;
  line-height: 1.45;
}
.emp-danger-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.emp-danger-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.emp-danger-row .label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.emp-danger-row .sub {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 2px;
  line-height: 1.45;
}
.emp-danger-row .main {
  flex: 1;
  min-width: 0;
}
.emp-danger-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  flex-shrink: 0;
}
.emp-danger-btn:hover {
  background: var(--surface);
  border-color: var(--muted2);
}
.emp-danger-btn.danger {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.35);
}
.emp-danger-btn.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--red);
}

/* ── CONFIG · side cards (aside lateral) ────────────────────────── */
.emp-side-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: none;
}
/* El título de la side card siempre transparente, sin fondo blanco
   que pueda colarse desde reglas globales tipo h3 / .a-card-title. */
.emp-side-card-h {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}
.emp-side-card-h {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 10px;
}
.emp-side-card-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 5px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.emp-side-card-row .k,
.emp-side-card-row .v {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.emp-side-card-row .k {
  color: var(--muted2);
  font-weight: 600;
}
.emp-side-card-row .v {
  color: var(--text);
  font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.emp-tip {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.18) 0%,
    var(--surface) 80%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.emp-tip-h {
  font-size: 12px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 6px;
}
[data-theme="dark"] .emp-tip-h {
  color: #fbbf24;
}
.emp-tip-b {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.55;
}
.emp-tip-b strong {
  color: var(--text);
  font-weight: 800;
}

/* ── CONFIG · aviso legal RD-ley 8/2019 (NO BORRAR) ─────────────── */
.emp-legal {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.emp-legal-h {
  font-size: 12px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 6px;
}
.emp-legal-b {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.55;
}
.emp-legal-b strong {
  color: var(--text);
  font-weight: 800;
}

/* ── Dark mode tweaks ───────────────────────────────────────────── */
[data-theme="dark"] .emp-plan-card.current {
  box-shadow:
    0 0 0 2px var(--accent),
    var(--shadow-lg);
}
[data-theme="dark"] .emp-payment {
  background: var(--surface2);
}
[data-theme="dark"] .emp-pill-success {
  background: rgba(16, 185, 129, 0.22);
}

/* ── Editor horarios: chips multi-grupo (sustituyen dropdown 'Todos los grupos') ── */
.heh-group-chips {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.heh-gchip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.heh-gchip:hover {
  background: var(--surface2);
}
.heh-gchip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
[data-theme="dark"] .heh-gchip:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Tabla General — alternar inicial corta / nombre largo según vista
   .day-name-short = "L M X J V S D" (default, vista Mes)
   .day-name-long  = "Lun Mar Mié Jue Vie Sáb Dom" (vista Semana) */
.day-name-long {
  display: none;
}
.day-name-short {
  display: inline;
}
body.pfr-gt-week-view .day-name-short {
  display: none;
}
body.pfr-gt-week-view .day-name-long {
  display: inline;
}

/* ──────────────────────────────────────────────
   General · sidebar · KPI cards lila Soft Pro
   Card lila + hijos transparentes (sin pastillas)
   ────────────────────────────────────────────── */
.pfr-gs2-grid .pfr-gs2-card,
.pfr-gs2-body .pfr-gs2-card,
.pfr-gs2-card {
  background: #ddd0f5 !important;
  border: 1px solid #c4b5e5 !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}
.pfr-gs2-card:hover {
  border-color: var(--accent) !important;
}
.pfr-gs2-card *,
.pfr-gs2-card > *,
.pfr-gs2-card div,
.pfr-gs2-card span,
.pfr-gs2-card-label,
.pfr-gs2-card-value,
.pfr-gs2-card-sub {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[data-theme="dark"] .pfr-gs2-card,
[data-theme="dark"] .pfr-gs2-grid .pfr-gs2-card {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

/* ════════════════════════════════════════════════════════════
   Panel "Vista Global" — tarjeta despegada, redondeada y plegable
   (sustituye al bloque pegado al borde con cantos cuadrados)
   ════════════════════════════════════════════════════════════ */
.pfr-gs-sidebar {
  border-left: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  margin: 0 0 0 0 !important;
  overflow: hidden !important;
  position: static !important;
  top: auto !important;
  max-height: none !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  transition: flex-basis 0.22s ease;
}
body.pfr-gs-active .pfr-gs-sidebar {
  display: flex !important;
}
body.pfr-gs-active .pfr-gs-sidebar.is-collapsed {
  display: flex !important;
}
/* El cuerpo (tarjetas) ocupa el espacio sobrante y scrollea si hace falta,
   de modo que el panel iguale la altura de la tabla sin cortarse "a medias". */
.pfr-gs-sidebar .pfr-gs2-body {
  flex: 1 1 auto;
  overflow-y: auto;
}
/* El header ya no necesita su propio borde superior redondeado porque
   el contenedor recorta con overflow:hidden; mantenemos su degradado. */
.pfr-gs2-header {
  position: relative;
}

/* Botón de plegar (flecha ›) arriba a la derecha del header */
.pfr-gs2-collapse {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.pfr-gs2-collapse:hover {
  filter: brightness(1.08);
}

/* Estado COLAPSADO: el panel se reduce a una barra estrecha */
.pfr-gs-sidebar.is-collapsed {
  flex-basis: 44px !important;
  background: var(--surface2) !important;
}
.pfr-gs2-reopen {
  width: 100%;
  min-height: 120px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 0;
  color: var(--muted2);
  transition: color 0.12s ease;
}
.pfr-gs2-reopen:hover {
  color: var(--accent);
}
.pfr-gs2-reopen-arrow {
  font-size: 18px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfr-gs2-reopen-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ── Configuración · columnas laterales siempre visibles ─────────────
   Patrón común para cards de reglas, consejos, leyendas y avisos legales. */
.fch-cfg-side,
.hrs-cfg-side,
.pc-side,
.fes-side,
.va-side,
.emp-col-side {
  position: sticky !important;
  top: 188px !important;
  align-self: flex-start !important;
  max-height: calc(100vh - 204px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 980px) {
  .fch-cfg-side,
  .hrs-cfg-side,
  .pc-side,
  .fes-side,
  .va-side,
  .emp-col-side {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   planifly · Brand System 2026
   Fuente oficial: carpeta "Nuevo branding planifly".
   Esta capa normaliza la SPA clásica sin tocar funcionalidad.
   ══════════════════════════════════════════════════════════════ */
:root {
  --pf-brand-blue: #2563ff;
  --pf-brand-blue-2: #3b82f6;
  --pf-brand-violet: #7c3aed;
  --pf-brand-ink: #011117;
  --pf-brand-gray: #667280;
  --pf-brand-gray-soft: #e2e6f0;
  --pf-brand-bg: #fbfafc;
  --pf-brand-lilac: #f6f3ff;
  --pf-brand-lilac-2: #efe9ff;
  --pf-brand-gradient: linear-gradient(135deg, #2563ff 0%, #7c3aed 100%);
  --pf-brand-gradient-soft:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 255, 0.12), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(124, 58, 237, 0.13), transparent 30%),
    linear-gradient(180deg, #fbfaff 0%, #f6f3ff 100%);

  --bg: #f6f3ff;
  --bg2: #ffffff;
  --bg3: #fbfaff;
  --surface: #ffffff;
  --surface2: #fbfaff;
  --border: #e7def8;
  --border2: #d4c6f2;
  --text: #011117;
  --muted: #8b95a3;
  --muted2: #667280;
  --accent: #2563ff;
  --accent2: #3b82f6;
  --accent-soft: #eaf1ff;
  --secondary: #7c3aed;
  --secondary-soft: #f0e8ff;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(1, 17, 23, 0.05);
  --shadow:
    0 1px 2px rgba(1, 17, 23, 0.04),
    0 12px 30px -18px rgba(37, 99, 255, 0.28),
    0 18px 44px -28px rgba(124, 58, 237, 0.22);
  --shadow-lg:
    0 18px 54px -22px rgba(37, 99, 255, 0.34),
    0 24px 70px -30px rgba(124, 58, 237, 0.28);
  --grad-soft: var(--pf-brand-gradient-soft);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

body {
  background: var(--pf-brand-gradient-soft) !important;
  color: var(--pf-brand-ink) !important;
  font-size: 14px;
  line-height: 1.5;
}

h1,
h2,
h3,
.display,
.login-logo,
.logo,
.ob-title,
.fch-page-h1,
.a-title,
.card-title,
[class*="title-display"],
[class*="-title"],
[class*="-h1"] {
  font-family: "Inter", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

.login-logo,
.logo {
  font-weight: 800 !important;
}

.logo {
  gap: 10px !important;
}

.logo-dot,
.ob-header-logo::before {
  background:
    url("logos/brand-2026/icon-app.png") center / cover no-repeat,
    var(--pf-brand-gradient) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px -10px rgba(124, 58, 237, 0.75) !important;
}

.login-wrap,
.ob-wrap,
.cfg-empty-card,
.a-card,
.card,
.panel,
.section-card,
.fch-cfg-card,
.pfr-dialog,
.modal-content,
.vac4-panel,
.vac4-detail-card,
.pfr-vacreq-admin-card,
.hrs-card,
.emp-card,
.fes-card,
.pc-card,
.heh-panel,
.heh-toolbar,
.admin-panel {
  border-color: var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--shadow-sm) !important;
}

.login-wrap,
.ob-wrap,
.pfr-dialog,
.modal-content {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

.btn,
.login-btn,
.action-btn,
.logout-btn,
.fch-head-btn,
.fch-btn,
.ep-btn-cta,
.admin-nav-btn,
.month-nav button,
.ob-pill,
.ob-choice-card,
.ob-final-card,
.vac4-filter,
.pfr-vacreq-admin-filter,
.heh-btn,
.se-btn,
button[class*="btn"],
button[class*="Btn"] {
  font-family: "Inter", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  border-radius: var(--r-md) !important;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease !important;
}

.btn-accent,
.login-btn,
.fch-head-btn-primary,
.ep-btn-cta,
.se-btn-primary,
.heh-btn-primary,
button.primary,
button[type="submit"] {
  background: var(--pf-brand-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px -16px rgba(37, 99, 255, 0.75) !important;
}

.btn-accent:hover,
.login-btn:hover,
.fch-head-btn-primary:hover,
.ep-btn-cta:hover,
.se-btn-primary:hover,
.heh-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -18px rgba(124, 58, 237, 0.78) !important;
}

.btn-soft,
.btn-ghost,
.fch-head-btn,
.fch-head-btn-soft,
.logout-btn,
.action-btn,
.month-nav button,
.heh-btn,
.se-btn {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.btn-soft,
.fch-head-btn-soft,
.pfr-vacreq-admin-filter.active,
.vac4-filter.active {
  background: var(--secondary-soft) !important;
  border-color: #d8c8ff !important;
  color: #5524b8 !important;
}

.pfr-vacreq-admin-filter.active,
.vac4-filter.active {
  background: var(--pf-brand-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
}

input,
select,
textarea,
.login-input,
.f-input,
.a-input,
.heh-input,
.se-input {
  border-radius: var(--r-md) !important;
  border-color: var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus,
.login-input:focus,
.f-input:focus,
.a-input:focus,
.heh-input:focus,
.se-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.14) !important;
}

.fch-page-head {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 243, 255, 0.96) 100%) !important;
  box-shadow: var(--shadow-sm) !important;
}

.fch-page-kicker,
.login-label,
.ob-kicker,
.a-kicker,
.fch-cfg-card-sub,
.toolbar-label,
.pfr-gs2-reopen-label {
  font-family: "Inter", system-ui, sans-serif !important;
  letter-spacing: 0.06em !important;
}

.fch-page-h1 {
  color: var(--text) !important;
  font-weight: 800 !important;
}

.fch-page-sub,
.login-sub,
.ob-sub,
.muted,
.subtle {
  color: var(--muted2) !important;
}

.fch-a-tabs {
  border-bottom: 1px solid var(--border) !important;
}

.fch-a-tab {
  color: var(--muted2) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.fch-a-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

.admin-layout,
.admin-shell,
.cfg-shell {
  background: transparent !important;
}

.admin-sidebar,
.pfr-gs-sidebar {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.admin-nav-btn,
.pfr-gs2-nav-btn,
.pfr-gs2-reopen {
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
}

.admin-nav-btn.active,
.pfr-gs2-nav-btn.active,
.admin-nav-btn[aria-current="page"] {
  background: linear-gradient(135deg, rgba(37, 99, 255, 0.12), rgba(124, 58, 237, 0.12)) !important;
  color: var(--accent) !important;
  border-color: rgba(37, 99, 255, 0.16) !important;
}

.admin-nav-icon,
.wbn-icon,
.fch-head-btn-ic {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.admin-nav-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

table,
.a-table,
.notif-table,
.heh-table,
.hrs-table {
  border-color: var(--border) !important;
}

th,
.a-table th,
.notif-table th,
.heh-table th,
.hrs-table th {
  background: #fbfaff !important;
  color: var(--muted2) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

td,
.a-table td,
.notif-table td,
.heh-table td,
.hrs-table td {
  border-color: var(--border) !important;
}

.badge,
.a-badge,
.pill,
.tag,
[class*="badge"],
[class*="pill"] {
  border-radius: 999px !important;
  font-family: "Inter", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

.heh-shift-cell,
.shift-cell,
.turno-chip,
.alm-chip,
.vp-shift-pill {
  border-radius: var(--r-sm) !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

@media (max-width: 720px) {
  .login-wrap,
  .ob-wrap {
    border-radius: 18px !important;
    padding: 30px 22px !important;
  }

  .fch-page-head {
    border-radius: 18px !important;
  }
}

/* ── Login 2026 · exacto al nuevo brand book ───────────────────── */
#login-screen {
  background: #fbfafc !important;
}

#login-screen .login-wrap {
  width: 620px !important;
  max-width: calc(100vw - 36px) !important;
  min-height: 374px !important;
  display: grid !important;
  grid-template-columns: 228px 1fr !important;
  column-gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid #e2e6f0 !important;
  background: #fff !important;
  box-shadow: 0 18px 48px -28px rgba(1, 17, 23, 0.28) !important;
}

#login-screen .login-wrap::before {
  display: none !important;
}

.pf-login-brand-panel {
  grid-row: 1 / span 20;
  align-self: stretch;
  padding: 48px 34px 30px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(145deg, #2563ff 0%, #7c3aed 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.pf-login-brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.pf-login-brand-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  object-fit: cover;
  display: block;
  box-shadow: 0 12px 26px -14px rgba(1, 17, 23, 0.9);
}

.pf-login-brand-name {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.pf-login-brand-claim {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  line-height: 1.12;
  font-weight: 600;
}

.pf-login-brand-url {
  margin-top: auto;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.92;
}

#login-screen .login-wrap > :not(.pf-login-brand-panel) {
  grid-column: 2;
  width: auto;
  margin-left: 48px;
  margin-right: 48px;
}

#login-screen .pf-login-title {
  margin-top: 58px !important;
  margin-bottom: 26px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #011117 !important;
  text-align: left !important;
}

#login-screen .pf-login-subtitle {
  display: none !important;
}

#login-screen .login-label {
  margin-bottom: 6px !important;
  color: #263247 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#login-screen .login-input {
  height: 38px !important;
  margin-bottom: 12px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid #dce2ee !important;
  background: #fff !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

#login-screen .login-btn {
  height: 39px !important;
  margin-top: 3px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  background: #2563ff !important;
  box-shadow: 0 10px 20px -14px rgba(37, 99, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#login-screen .login-reg-link {
  margin-top: 12px !important;
  font-size: 11px !important;
  color: #667280 !important;
}

#login-screen .login-reg-link a {
  color: #2563ff !important;
}

#login-screen .login-wrap > div[style*="border-top"] {
  display: none !important;
}

@media (max-width: 720px) {
  #login-screen .login-wrap {
    width: min(420px, calc(100vw - 28px)) !important;
    grid-template-columns: 1fr !important;
  }

  .pf-login-brand-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 176px;
    padding: 28px;
  }

  .pf-login-brand-lockup {
    flex-direction: row;
    align-items: center;
  }

  .pf-login-brand-claim {
    margin-top: 22px;
  }

  #login-screen .login-wrap > :not(.pf-login-brand-panel) {
    grid-column: 1;
    margin-left: 28px;
    margin-right: 28px;
  }

  #login-screen .pf-login-title {
    margin-top: 28px !important;
  }
}

/* Login movil/app 2026: entrada nativa, sin tarjeta legacy */
@media (max-width: 720px) {
  #login-screen {
    align-items: stretch !important;
    justify-content: stretch !important;
    min-height: 100svh !important;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(37, 99, 255, 0.2), transparent 32%),
      radial-gradient(circle at 100% 18%, rgba(124, 58, 237, 0.16), transparent 34%),
      linear-gradient(180deg, #f9f7ff 0%, #f1edff 54%, #ffffff 100%) !important;
  }

  #login-screen .login-wrap {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 48px 28px 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #login-screen .pf-login-brand-panel {
    display: contents !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    color: #011117 !important;
  }

  #login-screen .pf-login-brand-lockup {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin: 0 0 28px !important;
  }

  #login-screen .pf-login-brand-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px -24px rgba(37, 99, 255, 0.85) !important;
  }

  #login-screen .pf-login-brand-name {
    font-size: 44px !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    color: #011117 !important;
  }

  #login-screen .pf-login-brand-claim,
  #login-screen .pf-login-brand-url,
  #login-screen .pf-login-title,
  #login-screen .pf-login-subtitle,
  #login-screen .login-create-link,
  #login-screen .login-help-link {
    display: none !important;
  }

  #login-screen .login-wrap > :not(.pf-login-brand-panel) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #login-screen .login-error {
    margin-bottom: 14px !important;
    border-radius: 12px !important;
  }

  #login-screen .login-label {
    margin: 0 0 8px !important;
    color: #5b6472 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  #login-screen .login-input {
    height: 58px !important;
    margin-bottom: 18px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(124, 58, 237, 0.16) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #111827 !important;
    font-size: 16px !important;
    box-shadow: 0 12px 34px -30px rgba(17, 24, 39, 0.42) !important;
  }

  #login-screen .login-input::placeholder {
    color: #a5adba !important;
  }

  #login-screen .login-btn {
    height: 58px !important;
    margin-top: 4px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #2563ff 0%, #7c3aed 100%) !important;
    box-shadow: 0 22px 42px -24px rgba(37, 99, 255, 0.9) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
  }

  #login-screen .login-reg-link {
    margin-top: 18px !important;
    color: #667280 !important;
    font-size: 14px !important;
    text-align: center !important;
  }

  #login-screen .login-reg-link a {
    color: #2563ff !important;
    font-weight: 800 !important;
  }

  #login-screen .login-reg-link + .login-reg-link {
    display: none !important;
  }
}

/* ── Planificación admin · branding.3 aplicado a controles reales ── */
.pf-line-icon,
.fch-head-btn-ic {
  color: currentColor !important;
}

.pf-line-icon {
  width: 1.25em !important;
  height: 1.25em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  vertical-align: -0.22em !important;
  margin-right: 6px !important;
  color: #2563ff !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.pf-line-icon svg,
.fch-head-btn-ic svg {
  width: 1em !important;
  height: 1em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
  overflow: visible !important;
}

.pf-line-icon--section {
  width: 1.35em !important;
  height: 1.35em !important;
  margin-right: 8px !important;
  vertical-align: -0.24em !important;
}

.pf-line-icon--text {
  width: 1.2em !important;
  height: 1.2em !important;
  margin-right: 6px !important;
  vertical-align: -0.2em !important;
}

.pf-line-icon--hero {
  width: 100% !important;
  height: 100% !important;
  margin-right: 0 !important;
  vertical-align: 0 !important;
}

.pf-line-icon--hero svg {
  width: 100% !important;
  height: 100% !important;
  stroke-width: 1.65 !important;
}

.fch-page-kicker .pf-line-icon,
.fch-a-tab .pf-line-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 6px !important;
  vertical-align: -4px !important;
}

.fch-act-btn .pf-line-icon,
.fch-exp-icon .pf-line-icon,
.n5-header-icon .pf-line-icon,
.n5-cat-icon .pf-line-icon,
.n5-detail-cat .pf-line-icon,
.fch-a-stat-icon .pf-line-icon,
.va-card-icon .pf-line-icon,
.pc-summer-icon .pf-line-icon {
  margin-right: 0 !important;
}

.pf-line-icon--solo {
  margin-right: 0 !important;
}

.fch-cfg-card-title,
.fch-cfg-row-label,
.hrs-cfg-rules-h,
.fch-cfg-tip-title,
.hrs-cfg-legal-h,
.hrs-kpi-label,
.hrs-rank-col-h,
.hrs-kpi-cta-h,
.hrs-cfg-ratio-label,
.emp-card-h,
.emp-side-card-h,
.emp-tip-h,
.emp-legal-h,
.epq-tip-title {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
}

.fch-cfg-card-title .pf-line-icon,
.fch-cfg-row-label .pf-line-icon,
.hrs-cfg-rules-h .pf-line-icon,
.fch-cfg-tip-title .pf-line-icon,
.hrs-cfg-legal-h .pf-line-icon,
.hrs-kpi-label .pf-line-icon,
.hrs-rank-col-h .pf-line-icon,
.hrs-kpi-cta-h .pf-line-icon,
.hrs-cfg-ratio-label .pf-line-icon,
.emp-card-h .pf-line-icon,
.emp-side-card-h .pf-line-icon,
.emp-tip-h .pf-line-icon,
.emp-legal-h .pf-line-icon,
.epq-tip-title .pf-line-icon {
  align-self: center !important;
  transform: none !important;
}

.epq-team-emoji .pf-line-icon,
.epq-hero-emoji .pf-line-icon,
.epq-empty-icon .pf-line-icon {
  margin-right: 0 !important;
  color: currentColor !important;
}

.epq-tips-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 0;
}

.epq-tip-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d9e3ff;
  background: #f8fbff;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.45;
}

.epq-tip-title {
  color: #2563ff;
  font-weight: 800;
  margin-bottom: 4px;
}

.epq-tip-text {
  color: var(--muted2);
}

@media (max-width: 900px) {
  .epq-tips-row {
    grid-template-columns: 1fr;
  }
}

.hrs-conv-opt-emoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  overflow: visible !important;
}

#fichaje-admin-view #fichaje-stats-top {
  margin-top: 42px !important;
  padding-top: 0 !important;
}

#fichaje-admin-view .fch-admin-tab-hoy #fichaje-admin-content {
  margin-top: 30px !important;
}

#fichaje-admin-view .fch-admin-tab-solicitudes #fichaje-admin-content {
  margin-top: 0 !important;
}

#fichaje-admin-view .fch-admin-tab-solicitudes .fch-a-content {
  padding-top: 18px !important;
}

#fichaje-admin-view .fch-req-filter-row {
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
  padding-top: 0 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

#fichaje-admin-view .fch-admin-tab-solicitudes .fch-empty {
  margin-top: 0 !important;
}

#fichaje-admin-view .fch-a-content {
  padding-top: 0 !important;
}

#fichaje-admin-view .fch-a-table-wrap {
  margin-top: 0 !important;
}

#fichaje-admin-view .fch-a-table-wrap {
  background: #fff !important;
  border-color: #e7def8 !important;
  overflow: hidden !important;
}

#fichaje-admin-view .fch-table-scroll {
  min-height: 0 !important;
  overflow: auto !important;
}

#fichaje-admin-view .fichaje-table,
#fichaje-admin-view .fch-table {
  background: #fff !important;
  border-color: #e7def8 !important;
}

#fichaje-admin-view .fichaje-table th,
#fichaje-admin-view .fch-table th {
  background: #fbfaff !important;
  color: #667280 !important;
}

#fichaje-admin-view .fichaje-table td,
#fichaje-admin-view .fch-table td,
#fichaje-admin-view .fichaje-table tr td,
#fichaje-admin-view .fch-table tr td,
#fichaje-admin-view .fichaje-table tbody tr:nth-child(even) td,
#fichaje-admin-view .fch-table tbody tr:nth-child(even) td {
  background: #fff !important;
}

#fichaje-admin-view .fichaje-table tr:hover td,
#fichaje-admin-view .fch-table tr:hover td {
  background: #f8fbff !important;
}

#fichaje-admin-view .fch-empty {
  min-height: 330px !important;
  background: #fbfaff !important;
  border: 1px dashed #d9ccf5 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 112px 14px !important;
}

#fichaje-admin-view .fch-a-content,
#fichaje-admin-view #fichaje-content {
  padding-top: 20px !important;
}

#fichaje-admin-view .fch-table-empty,
#fichaje-admin-view .fch-empty-state {
  background: #fbfaff !important;
}

/* Fichaje · Configuracion: cards reales, sin efecto de recorte */
#fichaje-admin-view .fch-admin-tab-config .fichaje-config-layout {
  padding: 28px 28px 34px !important;
  gap: 24px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-main {
  gap: 18px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-card {
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  padding: 22px 24px 6px !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
  overflow: visible !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-card-title {
  margin: 0 0 6px !important;
  min-height: 22px !important;
  align-items: center !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-card-sub {
  margin: 0 0 18px !important;
  line-height: 1.45 !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row {
  padding: 15px 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  align-items: center !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row:first-of-type {
  padding-top: 15px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row:last-child {
  border-bottom: none !important;
  padding-bottom: 16px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row-label {
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row-desc {
  line-height: 1.45 !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-side .fch-cfg-card {
  padding: 18px 20px !important;
}

/* Horas y reportes · Configuracion: cards reales, sin efecto de recorte */
#admin-reportes #rep-horas-config-slot .hrs-cfg-grid {
  padding: 28px 28px 34px !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-main {
  gap: 18px !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-card {
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  padding: 22px 24px 6px !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
  overflow: visible !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-card-title {
  margin: 0 0 6px !important;
  min-height: 22px !important;
  align-items: center !important;
  line-height: 1.25 !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-card-sub {
  margin: 0 0 18px !important;
  line-height: 1.45 !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-row {
  padding: 15px 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  align-items: center !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-row:first-of-type {
  padding-top: 15px !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-row:last-child {
  border-bottom: none !important;
  padding-bottom: 16px !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-row-label {
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
}

#admin-reportes #rep-horas-config-slot .fch-cfg-row-desc {
  line-height: 1.45 !important;
}

#admin-reportes #rep-horas-config-slot .hrs-cfg-rules,
#admin-reportes #rep-horas-config-slot .hrs-cfg-tip,
#admin-reportes #rep-horas-config-slot .hrs-cfg-legal {
  border-radius: 16px !important;
  padding: 18px 20px !important;
}

/* Datos de empresa · Configuracion: cards reales, sin efecto de recorte */
#admin-facturacion .emp-body-config {
  padding: 28px 28px 34px !important;
}

#admin-facturacion .emp-body-config .emp-grid-side {
  gap: 24px !important;
}

#admin-facturacion .emp-body-config .emp-col-main {
  gap: 18px !important;
}

#admin-facturacion .emp-body-config .emp-card {
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  padding: 22px 24px 6px !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
  overflow: visible !important;
}

#admin-facturacion .emp-body-config .emp-col-main > .emp-card + .emp-card,
#admin-facturacion .emp-body-config .emp-col-main > .emp-card + .emp-danger,
#admin-facturacion .emp-body-config .emp-col-main > .emp-danger + .emp-card {
  border-top: 1px solid #e7def8 !important;
  padding-top: 22px !important;
}

#admin-facturacion .emp-body-config .emp-card-h {
  margin: 0 0 6px !important;
  min-height: 22px !important;
  align-items: center !important;
  line-height: 1.25 !important;
}

#admin-facturacion .emp-body-config .emp-card-sub {
  margin: 0 0 18px !important;
  line-height: 1.45 !important;
}

#admin-facturacion .emp-body-config .emp-card .fch-cfg-row {
  padding: 15px 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  align-items: center !important;
}

#admin-facturacion .emp-body-config .emp-card .fch-cfg-row:first-child {
  padding-top: 15px !important;
}

#admin-facturacion .emp-body-config .emp-card .fch-cfg-row:last-child {
  border-bottom: none !important;
  padding-bottom: 16px !important;
}

#admin-facturacion .emp-body-config .fch-cfg-row-label {
  margin: 0 0 4px !important;
  line-height: 1.25 !important;
}

#admin-facturacion .emp-body-config .fch-cfg-row-desc {
  line-height: 1.45 !important;
}

#admin-facturacion .emp-body-config .emp-field {
  gap: 7px !important;
}

#admin-facturacion .emp-body-config .emp-col-side .emp-card,
#admin-facturacion .emp-body-config .fch-cfg-tip,
#admin-facturacion .emp-body-config .fch-cfg-legal {
  border-radius: 16px !important;
  padding: 18px 20px !important;
}

#admin-shifts > .fch-sticky-head {
  background: #fbfafc !important;
  border-bottom: 1px solid #e7def8 !important;
}

#admin-shifts > .fch-sticky-head > .fch-page-head {
  min-height: 96px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.11), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8f5ff 100%) !important;
  border: 1px solid #e7def8 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px -28px rgba(37, 99, 255, 0.42) !important;
}

#admin-shifts .fch-page-h1 {
  font-size: 28px !important;
  line-height: 1.05 !important;
  color: #011117 !important;
}

#admin-shifts .fch-page-sub {
  font-size: 13.5px !important;
  color: #667280 !important;
}

#admin-shifts .fch-head-btn {
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 11px !important;
  background: #fff !important;
  border: 1px solid #e2e6f0 !important;
  color: #263247 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(1, 17, 23, 0.04) !important;
}

#admin-shifts .fch-head-btn:hover {
  border-color: #c9d7ff !important;
  color: #2563ff !important;
  background: #f8fbff !important;
}

#admin-shifts .fch-head-btn-primary {
  background: linear-gradient(135deg, #2563ff 0%, #7c3aed 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px -18px rgba(37, 99, 255, 0.82) !important;
}

#admin-shifts .fch-head-btn-soft {
  background: #f0e8ff !important;
  color: #5524b8 !important;
  border-color: #e2d2ff !important;
}

#admin-shifts > .fch-sticky-head > .fch-a-tabs {
  background: #fbfafc !important;
  border-bottom: 1px solid #e7def8 !important;
  padding-top: 4px !important;
}

#admin-shifts .fch-a-tab {
  min-height: 43px !important;
  padding: 0 2px !important;
  margin-right: 26px !important;
  color: #667280 !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
}

#admin-shifts .fch-a-tab.active {
  color: #2563ff !important;
  border-bottom-color: #2563ff !important;
}

#heh-root {
  background: #fbfafc !important;
  padding: 16px 24px 26px !important;
}

.heh-toolbar,
.heh-card {
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 34px -28px rgba(37, 99, 255, 0.28) !important;
}

.heh-toolbar {
  padding: 10px 12px !important;
  gap: 8px !important;
}

.heh-month-nav,
.heh-viewseg,
.heh-group-btn,
.heh-cov,
.heh-sub-btn {
  background: #fff !important;
  border-color: #e2e6f0 !important;
  border-radius: 12px !important;
  color: #263247 !important;
}

.heh-viewseg-btn {
  border-radius: 9px !important;
  color: #667280 !important;
}

.heh-viewseg-btn.is-on {
  background: #eaf1ff !important;
  color: #2563ff !important;
  box-shadow: none !important;
}

.heh-month-name,
.heh-week-label,
.heh-worker-meta,
.heh-head-worker,
.heh-head-hours,
.heh-day-name-mini,
.heh-day-num-mini {
  color: #667280 !important;
}

.heh-state-draft {
  background: #fff7e6 !important;
  border-color: #ffd89a !important;
  color: #d97706 !important;
}

.heh-conflicts {
  background: #fff5f5 !important;
  border-color: #fecaca !important;
  color: #ef4444 !important;
}

.heh-subbar,
.heh-head,
.heh-group-sep,
.heh-subrole-sep-label {
  background: #fbfaff !important;
  border-color: #e7def8 !important;
}

.heh-group-sep-name {
  color: #2563ff !important;
}

.heh-row {
  border-color: #edf0f7 !important;
}

.heh-row.is-alt {
  background: #fbfafc !important;
}

.heh-row:hover {
  background: #f8fbff !important;
}

.heh-worker-name {
  color: #011117 !important;
  font-size: 13px !important;
}

.heh-cell {
  height: 36px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.heh-cell-code {
  font-size: 12px !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

.heh-cell-time {
  font-size: 8.5px !important;
  font-family: "Inter", system-ui, sans-serif !important;
  color: #2563ff !important;
  opacity: 0.95 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.heh-cell.is-libre,
.heh-cell.is-rest {
  background: #f1f4f9 !important;
  color: #667280 !important;
  border-color: #dfe5f0 !important;
}

.heh-cell-wrap.is-sat {
  background: #fff7e6 !important;
}

.heh-cell-wrap.is-sun {
  background: #fff1f2 !important;
}

.heh-head-day-mini.is-sat,
.heh-head-day.is-sat {
  background: #fff7e6 !important;
}

.heh-head-day-mini.is-sun,
.heh-head-day.is-sun {
  background: #fff1f2 !important;
}

/* Correcciones finales 2026-06-06: cards reales y sin solapes */
#admin-workers .epq-overview-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 18px !important;
}

#admin-workers .epq-overview-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 88px !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
}

#admin-workers .epq-overview-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: #eef4ff !important;
  color: #2563ff !important;
}

#admin-workers .epq-overview-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8a94a6 !important;
  margin-bottom: 4px !important;
}

#admin-workers .epq-overview-value {
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  color: #011117 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#admin-workers .epq-overview-hint {
  margin-top: 4px !important;
  font-size: 12px !important;
  color: #748094 !important;
}

#admin-solicitudes > .fch-sticky-head {
  margin: 0 !important;
  background: #fbfafc !important;
  border-bottom: 1px solid #e7def8 !important;
}

#admin-solicitudes .fch-page-head {
  min-height: auto !important;
  padding: 22px 28px 18px !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

#admin-solicitudes #pfr-sol-tabs {
  position: relative !important;
  z-index: 1 !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  background: #fbfafc !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e7def8 !important;
}

#admin-solicitudes #pfr-sol-bodies {
  position: relative !important;
  z-index: 0 !important;
  padding: 20px 24px 0 !important;
  margin: 0 !important;
}

#admin-libres > div:first-child,
#admin-vacreqs .pfr-vacreq-admin-filters,
#admin-swaps .pfr-vacreq-admin-filters,
#admin-coberturas .pfr-vacreq-admin-filters {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fichaje-config-layout,
#admin-facturacion .emp-body-config {
  padding: 24px 28px 34px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-main,
#admin-facturacion .emp-body-config .emp-col-main {
  gap: 18px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-card,
#admin-facturacion .emp-body-config .emp-card {
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
  overflow: visible !important;
}

#admin-facturacion .emp-body-config .emp-col-main > .emp-card + .emp-card {
  border-top: 1px solid #e7def8 !important;
  padding-top: 22px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-card-title,
#admin-facturacion .emp-body-config .emp-card-h {
  margin: 0 0 7px !important;
  min-height: 22px !important;
  line-height: 1.25 !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-card-sub,
#admin-facturacion .emp-body-config .emp-card-sub {
  margin: 0 0 18px !important;
  line-height: 1.45 !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row,
#admin-facturacion .emp-body-config .emp-card .fch-cfg-row {
  padding: 15px 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  align-items: center !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row:first-of-type,
#admin-facturacion .emp-body-config .emp-card .fch-cfg-row:first-child {
  padding-top: 15px !important;
}

#fichaje-admin-view .fch-admin-tab-config .fch-cfg-row:last-child,
#admin-facturacion .emp-body-config .emp-card .fch-cfg-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

@media (max-width: 1180px) {
  #admin-workers .epq-overview-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Solicitudes: el bundle de cabecera no debe crear huecos ni pisar filtros */
body #admin-solicitudes.admin-section > .fch-sticky-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fbfafc !important;
  border-bottom: 1px solid #e7def8 !important;
}

body #admin-solicitudes.admin-section .fch-page-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px 28px 18px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e7def8 !important;
  box-shadow: none !important;
}

body #admin-solicitudes.admin-section #pfr-sol-tabs {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: flex !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  align-items: flex-end !important;
  background: #fbfafc !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e7def8 !important;
  box-shadow: none !important;
}

body #admin-solicitudes.admin-section #pfr-sol-tabs::after {
  display: none !important;
}

body #admin-solicitudes.admin-section #pfr-sol-bodies {
  position: relative !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 22px 24px 0 !important;
  background: transparent !important;
}

body #admin-solicitudes.admin-section .pfr-vacreq-admin-header,
body #admin-solicitudes.admin-section .pfr-vacreq-admin-filters,
body #admin-solicitudes.admin-section #admin-libres > div:first-child {
  position: relative !important;
  z-index: 0 !important;
  margin-top: 0 !important;
}

/* Cards de configuracion/datos: aire real arriba, sin aspecto recortado */
body #fichaje-admin-view .fch-admin-tab-config .fch-cfg-card,
body #admin-reportes #rep-horas-config-slot .fch-cfg-card,
body #admin-facturacion .emp-card {
  padding: 30px 28px 24px !important;
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  overflow: visible !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
}

body #fichaje-admin-view .fch-admin-tab-config .fch-cfg-card-title,
body #admin-reportes #rep-horas-config-slot .fch-cfg-card-title,
body #admin-facturacion .emp-card-h {
  position: static !important;
  transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 24px !important;
  line-height: 1.25 !important;
}

body #fichaje-admin-view .fch-admin-tab-config .fch-cfg-card-sub,
body #admin-reportes #rep-horas-config-slot .fch-cfg-card-sub,
body #admin-facturacion .emp-card-sub {
  margin: 0 0 20px !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

body #fichaje-admin-view .fch-admin-tab-config .fch-cfg-row,
body #admin-reportes #rep-horas-config-slot .fch-cfg-row,
body #admin-facturacion .emp-card .fch-cfg-row {
  padding: 16px 0 !important;
}

body #fichaje-admin-view .fch-admin-tab-config .fch-cfg-row:last-child,
body #admin-reportes #rep-horas-config-slot .fch-cfg-row:last-child,
body #admin-facturacion .emp-card .fch-cfg-row:last-child {
  padding-bottom: 0 !important;
}

body #admin-facturacion .emp-body,
body #admin-facturacion .emp-body-config {
  padding-top: 24px !important;
}

/* Horarios > Configuracion: quitar efecto recortado de las tarjetas */
body #admin-shifts #shifts-tab-reglas .fch-cfg-grid {
  padding: 24px 28px 34px !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-grid + .fch-cfg-grid {
  padding-top: 34px !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-card,
body #admin-shifts #shifts-tab-reglas .fch-cfg-tip {
  padding: 30px 28px 24px !important;
  background: #fff !important;
  border: 1px solid #e7def8 !important;
  border-radius: 16px !important;
  overflow: visible !important;
  box-shadow: 0 10px 34px -30px rgba(37, 99, 255, 0.32) !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-card-title,
body #admin-shifts #shifts-tab-reglas .fch-cfg-tip-title {
  position: static !important;
  transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 24px !important;
  line-height: 1.25 !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-card-sub,
body #admin-shifts #shifts-tab-reglas .fch-cfg-tip-text {
  margin: 0 0 20px !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-row {
  padding: 16px 0 !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-row:first-of-type {
  padding-top: 16px !important;
}

body #admin-shifts #shifts-tab-reglas .fch-cfg-row:last-child {
  padding-bottom: 0 !important;
}

/* Datos de empresa > Configuracion: zona peligrosa compacta */
body #admin-facturacion .emp-body-config .emp-danger {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 24px 28px !important;
  background: #fff !important;
  border: 1px solid rgba(239, 68, 68, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 34px -30px rgba(239, 68, 68, 0.24) !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

body #admin-facturacion .emp-body-config .emp-danger-h {
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-sub {
  margin: 0 0 14px !important;
  padding: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  position: static !important;
}

body #admin-facturacion .emp-body-config .emp-danger-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-row .main {
  min-width: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-btn {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  min-width: 96px !important;
  margin: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger.emp-danger-compact,
body #admin-facturacion .emp-danger.emp-danger-compact {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: auto !important;
  justify-self: stretch !important;
}

body #admin-facturacion .emp-body-config .emp-danger-actions,
body #admin-facturacion .emp-danger-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-row.emp-danger-row-compact,
body #admin-facturacion .emp-danger-row.emp-danger-row-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  height: auto !important;
  min-height: 64px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  position: static !important;
  inset: auto !important;
}

body #admin-facturacion .emp-body-config .emp-danger-row.emp-danger-row-compact .emp-danger-btn,
body #admin-facturacion .emp-danger-row.emp-danger-row-compact .emp-danger-btn {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  place-self: center end !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-row.emp-danger-row-compact .main,
body #admin-facturacion .emp-danger-row.emp-danger-row-compact .main {
  min-width: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger.emp-danger-compact {
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger.emp-danger-compact .emp-danger-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  gap: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger.emp-danger-compact .emp-danger-row {
  height: auto !important;
  min-height: 64px !important;
  align-content: center !important;
}

body #admin-facturacion .emp-body-config .emp-danger.emp-danger-compact .emp-danger-row .label {
  line-height: 1.25 !important;
}

body #admin-facturacion .emp-body-config .emp-danger.emp-danger-compact .emp-danger-row .sub {
  line-height: 1.35 !important;
  margin-top: 3px !important;
}

body #admin-facturacion .emp-body-config .emp-danger-list-v2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-item-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-item-v2:last-child {
  border-bottom: none !important;
}

body #admin-facturacion .emp-body-config .emp-danger-copy-v2 {
  min-width: 0 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-label-v2 {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body #admin-facturacion .emp-body-config .emp-danger-sub-v2 {
  color: var(--muted2) !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}

body #admin-facturacion .emp-body-config .emp-danger-item-v2 .emp-danger-btn {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  place-self: center end !important;
  margin: 0 !important;
  min-width: 96px !important;
}

body.heh-fullscreen-open {
  overflow: hidden !important;
}

.heh-subbar-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.heh-fullscreen-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  background: #fff;
  color: #263247;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px -16px rgba(37, 99, 255, 0.5);
}

.heh-fullscreen-btn:hover {
  background: #eaf1ff;
  border-color: #bcd2ff;
  color: #2563ff;
}

.heh-card.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  box-shadow: none !important;
}

.heh-card.is-fullscreen:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

.heh-card.is-fullscreen .heh-subbar {
  flex: 0 0 auto !important;
  padding: 10px 16px !important;
}

.heh-card.is-fullscreen .heh-head,
.heh-card.is-fullscreen .heh-cov-row {
  flex: 0 0 auto !important;
}

.heh-card.is-fullscreen .heh-table-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}