:root {
  --vx-purple: #552863;
  --vx-purple-light: #7a3d8a;
  --vx-purple-dark: #3d1d47;
  --vx-orange: #FC6821;
  --vx-orange-light: #fd8a4e;
  --vx-orange-dark: #d9531a;
  --vx-teal: #33cbb0;
  --vx-teal-light: #5cd6bf;
  --vx-teal-dark: #25a08a;

  --vx-text: #111827;
  --vx-text-soft: #6b7280;
  --vx-border: rgba(0, 0, 0, .08);

  --vx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --vx-radius-sm: .5rem;
  --vx-radius: .75rem;
  --vx-radius-lg: 1rem;
  --vx-radius-xl: 1.5rem;

  --vx-shadow-glass: 0 8px 32px 0 rgba(85, 40, 99, .10);
  --vx-shadow-glass-sm: 0 4px 16px 0 rgba(85, 40, 99, .08);
  --vx-shadow-glass-lg: 0 16px 48px 0 rgba(85, 40, 99, .18);
  --vx-glow-orange: 0 4px 24px 0 rgba(252, 104, 33, .25);
  --vx-glow-teal: 0 4px 24px 0 rgba(51, 203, 176, .25);
  --vx-glow-purple: 0 4px 24px 0 rgba(85, 40, 99, .30);

  --vx-space-1: .25rem;
  --vx-space-2: .5rem;
  --vx-space-3: .75rem;
  --vx-space-4: 1rem;
  --vx-space-5: 1.25rem;
  --vx-space-6: 1.5rem;
}

.vx-glass {
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .50);
}

.vx-card {
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .60);
  box-shadow: var(--vx-shadow-glass);
  border-radius: var(--vx-radius-xl);
}

.vx-glass--orange { background: rgba(252, 104, 33, .10); border: 1px solid rgba(252, 104, 33, .20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vx-glass--teal   { background: rgba(51, 203, 176, .10); border: 1px solid rgba(51, 203, 176, .20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vx-glass--purple { background: rgba(85, 40, 99, .08);  border: 1px solid rgba(85, 40, 99, .15);  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.vx-sidebar {
  background: rgba(85, 40, 99, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .10);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vx-glass  { background: rgba(255, 255, 255, .95); }
  .vx-card   { background: rgba(255, 255, 255, .97); }
  .vx-sidebar { background: #552863; }
}

.vx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vx-space-2);
  padding: .5rem 1rem;
  border: none;
  border-radius: var(--vx-radius);
  font-family: var(--vx-font);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
}
.vx-btn:active { transform: scale(.95); }
.vx-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; pointer-events: none; }

.vx-btn--primary { background: var(--vx-orange); color: #fff; box-shadow: var(--vx-glow-orange); }
.vx-btn--primary:hover { background: var(--vx-orange-dark); }

.vx-btn--teal { background: var(--vx-teal); color: #fff; box-shadow: var(--vx-glow-teal); }
.vx-btn--teal:hover { background: var(--vx-teal-dark); }

.vx-btn--secondary {
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .50);
  color: var(--vx-purple);
  box-shadow: var(--vx-shadow-glass-sm);
}
.vx-btn--secondary:hover { background: rgba(255, 255, 255, .92); }

.vx-input {
  width: 100%;
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--vx-border, rgba(0, 0, 0, .08));
  border-radius: var(--vx-radius);
  padding: .625rem 1rem;
  font-family: var(--vx-font);
  font-size: .875rem;
  color: #1f2937;
  outline: none;
  transition: all .2s ease;
}
.vx-input::placeholder { color: #9ca3af; }
.vx-input:focus {
  box-shadow: 0 0 0 2px rgba(252, 104, 33, .40);
  border-color: rgba(252, 104, 33, .50);
}

.vx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-1);
  padding: .125rem .625rem;
  border-radius: 9999px;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 500;
}
.vx-badge--orange { background: rgba(252, 104, 33, .10); color: var(--vx-orange-dark); }
.vx-badge--teal   { background: rgba(51, 203, 176, .15); color: var(--vx-teal-dark); }
.vx-badge--purple { background: rgba(85, 40, 99, .10);  color: var(--vx-purple); }

.vx-table-row-hover {
  cursor: pointer;
  transition: background-color .15s ease;
}
.vx-table-row-hover:hover { background-color: rgba(252, 104, 33, .05); }
.vx-table-row-selected {
  border-left: 2px solid rgb(85, 40, 99);
  background-color: rgba(85, 40, 99, .10);
}

.vx-toolbar-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: var(--vx-radius, .75rem);
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.vx-toolbar-btn-sm:active:not(:disabled) { transform: scale(.95); }
.vx-toolbar-btn-sm:disabled { cursor: not-allowed; }

.vx-toolbar-btn-sm--primary { background: var(--vx-orange); color: #fff; box-shadow: var(--vx-glow-orange); }
.vx-toolbar-btn-sm--primary:hover:not(:disabled) { background: var(--vx-orange-dark); }

.vx-toolbar-btn-sm--purple {
  border-color: rgba(85, 40, 99, .20);
  background: rgba(85, 40, 99, .05);
  color: var(--vx-purple);
}
.vx-toolbar-btn-sm--purple:hover:not(:disabled) { background: rgba(85, 40, 99, .10); }
.vx-toolbar-btn-sm--purple:disabled {
  border-color: var(--vx-border, rgba(0, 0, 0, .08));
  background: rgba(0, 0, 0, .02);
  color: #d1d5db;
}

.vx-toolbar-btn-sm--danger {
  border-color: rgba(220, 38, 38, .20);
  background: #fef2f2;
  color: #dc2626;
}
.vx-toolbar-btn-sm--danger:hover:not(:disabled) { background: #fee2e2; }
.vx-toolbar-btn-sm--danger:disabled {
  border-color: var(--vx-border, rgba(0, 0, 0, .08));
  background: rgba(0, 0, 0, .02);
  color: #d1d5db;
}

.vx-toolbar-btn-sm--orange-tint {
  border-color: rgba(252, 104, 33, .20);
  background: rgba(252, 104, 33, .10);
  color: var(--vx-orange-dark);
  box-shadow: var(--vx-glow-orange);
}
.vx-toolbar-btn-sm--orange-tint:hover:not(:disabled) { background: rgba(252, 104, 33, .20); }
.vx-toolbar-btn-sm--orange-tint:disabled {
  border-color: var(--vx-border, rgba(0, 0, 0, .08));
  background: rgba(0, 0, 0, .02);
  color: #d1d5db;
  box-shadow: none;
}

.vx-label {
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 500;
  color: var(--vx-text-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vx-title {
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--vx-text);
  letter-spacing: -.01em;
}

.vx-nav {
  display: flex;
  align-items: center;
  gap: var(--vx-space-3);
  width: 100%;
  padding: .625rem 1rem;
  border: none;
  background: transparent;
  border-radius: var(--vx-radius);
  font-family: var(--vx-font);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .70);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
}
.vx-nav:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.vx-nav--active { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

.vx-row { transition: background-color .15s ease; cursor: pointer; }
.vx-row:hover { background: rgba(252, 104, 33, .05); }
.vx-row--selected { background: rgba(85, 40, 99, .10); border-left: 2px solid var(--vx-purple); }

@keyframes vxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vxSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vx-anim-fade { animation: vxFadeIn .3s ease-out; }
.vx-anim-up   { animation: vxSlideUp .3s ease-out; }

.vx-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--vx-radius, .75rem);
  background: linear-gradient(135deg, var(--vx-purple, #552863), var(--vx-purple-light, #7a3d8a));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.vx-card-list { display: flex; flex-direction: column; gap: .625rem; }

.vx-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--vx-radius-lg, 1rem);
}
.vx-list-card-title { margin: 0; font-size: .85rem; font-weight: 700; color: var(--vx-text, #111827); }
.vx-list-card-sub { margin: .15rem 0 0; font-size: .75rem; color: var(--vx-text-soft, #6b7280); }
.vx-list-section-title {
  margin: 0 0 .625rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--vx-purple, #552863);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vx-collab-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .625rem .875rem;
  border: none;
  border-radius: var(--vx-radius-lg, 1rem);
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  text-align: left;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  transition: background-color .15s ease;
}
.vx-collab-row:hover { background: rgba(252, 104, 33, .08); }
.vx-collab-row-name { margin: 0; font-size: .8rem; font-weight: 600; color: var(--vx-text, #111827); }

.vx-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .8rem;
  font-weight: 700;
  color: var(--vx-purple, #552863);
  cursor: pointer;
}
.vx-link-btn:hover { color: var(--vx-orange-dark, #d9531a); }

/* Matches React's .glass-card.rounded-2xl.p-4.border.border-gray-100 exactly
   (values captured live from the running prototype, not guessed). */
.vx-info-card {
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: .8px solid #f3f4f6;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85, 40, 99, .10));
}
.vx-info-card + .vx-info-card { margin-top: 1rem; }

.vx-info-label.vx-info-section-title { margin-bottom: .75rem; }

.vx-info-row { display: flex; align-items: center; gap: .75rem; }
.vx-info-text { flex: 1; min-width: 0; }

.vx-info-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
}
.vx-info-icon--purple { background: rgba(85, 40, 99, .10); color: #552863; }
.vx-info-icon--teal { background: rgba(51, 203, 176, .10); color: #25a08a; }

.vx-info-label {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  color: #9ca3af;
}
.vx-info-label--upper { text-transform: uppercase; letter-spacing: .05em; }

.vx-info-value {
  margin: .125rem 0 0;
  font-size: .875rem;
  font-weight: 700;
}
.vx-info-value--purple { color: #552863; }
.vx-info-value--dark { color: #1f2937; }

.vx-info-desc {
  margin: .5rem 0 0;
  font-size: .6875rem;
  color: #9ca3af;
}

.vx-info-badge { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; }

.vx-icon-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--vx-radius, .75rem);
  background: transparent;
  color: var(--vx-text-soft, #6b7280);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.vx-icon-btn:hover { background: rgba(0, 0, 0, .06); color: var(--vx-text, #111827); }

.vx-role-edit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}

.vx-edit-panel {
  background: rgba(85, 40, 99, .04);
  border: 1px solid rgba(85, 40, 99, .10);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.vx-edit-panel > .vx-info-label {
  margin-bottom: -.25rem;
}
.vx-edit-panel-field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  width: 100%;
}
.vx-edit-panel-field > .vx-info-label { margin-bottom: 0; }
.vx-edit-panel .dxbl-fl-cpt {
  font-weight: 600;
  color: var(--vx-purple, #552863);
}

.vx-subarea-checkbox {
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .8rem;
  font-weight: 500;
  color: var(--vx-text, #1f2937);
}

/* Turnos tab — values captured live from the React prototype's Turnos card. */
.vx-turno-heading {
  margin: 0 0 .75rem;
  font-size: 12px;
  font-weight: 600;
  color: #552863;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.vx-turno-card {
  border-radius: 16px;
  padding: 16px;
}
.vx-turno-card--active {
  background: rgba(252, 104, 33, .1);
  border: .8px solid rgba(252, 104, 33, .2);
}
.vx-turno-card--inactive {
  background: rgba(255, 255, 255, .7);
  border: .8px solid #f3f4f6;
  opacity: .6;
}

.vx-turno-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }

.vx-turno-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.vx-turno-card--active .vx-turno-title { font-size: 14px; font-weight: 700; color: #1f2937; }
.vx-turno-card--inactive .vx-turno-title { font-size: 12px; font-weight: 600; color: #4b5563; }

.vx-turno-icon { flex-shrink: 0; }
.vx-turno-card--active .vx-turno-icon { color: #fc6821; }
.vx-turno-card--inactive .vx-turno-icon { color: #9ca3af; }

.vx-turno-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
}
.vx-turno-card--active .vx-turno-badge {
  background: rgba(252, 104, 33, .1);
  color: #d9531a;
  font-size: 12px;
  padding: 2px 10px;
}
.vx-turno-card--inactive .vx-turno-badge {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 10px;
  padding: 2px 8px;
}

.vx-turno-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; }

.vx-turno-date { margin: 0; font-weight: 600; }
.vx-turno-card--active .vx-turno-date { margin-top: 12px; font-size: 10px; color: #d9531a; }
.vx-turno-card--inactive .vx-turno-date { margin-top: 8px; font-size: 9px; color: #9ca3af; }

/* Subordinados tab — values captured live from the React prototype's "Colaboradores a Cargo" list. */
.vx-subordinate-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #552863;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.vx-subordinate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .625rem;
  width: 100%;
  padding: 12px;
  border: .8px solid #f3f4f6;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
  text-align: left;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  transition: background-color .15s ease;
}
.vx-subordinate-row:hover { background: rgba(249, 250, 251, .55); }

.vx-subordinate-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vx-subordinate-badge { font-size: 10px !important; flex-shrink: 0; }

/* Calendarios tab — values captured live from the React prototype's "Calendarios Festivos Asignados" grid. */
.vx-calendar-heading {
  margin: 0 0 .75rem;
  font-size: 12px;
  font-weight: 600;
  color: #552863;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.vx-calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .vx-calendar-grid { grid-template-columns: 1fr; }
}

.vx-calendar-card {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  background: rgba(51, 203, 176, .1);
  border: .8px solid rgba(51, 203, 176, .2);
  border-radius: 16px;
  padding: 16px;
}

.vx-calendar-icon { flex-shrink: 0; margin-top: 2px; color: #25a08a; }

.vx-calendar-name { margin: 0; font-size: 12px; font-weight: 700; color: #1f2937; }
.vx-calendar-desc { margin: 4px 0 0; font-size: 10px; color: #6b7280; }

/* Permutas tab — values captured live from the React prototype's "Permutas Registradas" list. */
.vx-permuta-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #552863;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.vx-permuta-card {
  background: rgba(255, 255, 255, .7);
  border: .8px solid #f3f4f6;
  border-radius: 16px;
  padding: 16px;
}

.vx-permuta-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}
.vx-permuta-icon { flex-shrink: 0; color: #552863; }

.vx-permuta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #f9fafb;
  font-size: 11px;
}
.vx-permuta-label { margin: 0; color: #9ca3af; }
.vx-permuta-value { margin: 0; font-weight: 500; color: #374151; }

.vx-permuta-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 4px;
  font-size: 9px;
  color: #9ca3af;
}

.vx-solicitud-card {
  background: rgba(255, 255, 255, .7);
  border: .8px solid #f3f4f6;
  border-radius: 16px;
  padding: 16px;
}

.vx-solicitud-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.vx-solicitud-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: #1f2937; }
.vx-solicitud-icon { flex-shrink: 0; color: #552863; }

.vx-solicitud-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 9px !important; }

.vx-solicitud-collab { display: block; margin-top: 4px; font-size: 11px; }
.vx-solicitud-days { margin: 2px 0 0; font-size: 11px; color: #6b7280; }
.vx-solicitud-days-value { font-weight: 600; }

.vx-solicitud-card--placeholder {
  height: 91px;
  background: rgba(0, 0, 0, .03);
  animation: vxSolicitudPlaceholderPulse 1.2s ease-in-out infinite;
}
@keyframes vxSolicitudPlaceholderPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: .9; }
}

/* Transferencias — stepper, pestañas tipo pill y tabla de solicitudes (valores medidos en vivo del prototipo React). */
.vx-transfer-shell { display: flex; flex-direction: column; gap: 1.5rem; flex: 1 1 auto; width: 100%; }
.vx-transfer-shell .vx-card { border-radius: var(--vx-radius-lg); }

.vx-stepper { display: flex; align-items: center; }
.vx-stepper-item { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.vx-stepper-item:last-child { flex: 0 0 auto; }
.vx-stepper-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--vx-font);
  text-align: left;
}
.vx-stepper-btn:disabled { cursor: default; }

.vx-stepper-circle {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  transition: all .3s ease;
}
.vx-stepper-circle--done { background: var(--vx-teal); color: #fff; box-shadow: var(--vx-glow-teal); }
.vx-stepper-circle--active { background: var(--vx-orange); color: #fff; box-shadow: var(--vx-glow-orange); }
.vx-stepper-circle--pending {
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .50);
  color: #9ca3af;
}

.vx-stepper-label { display: none; min-width: 0; }
.vx-stepper-label p { margin: 0; font-size: .75rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-stepper-label--active p { color: var(--vx-text); }
.vx-stepper-label--done p { color: var(--vx-teal-dark); }
.vx-stepper-label--pending p { color: #9ca3af; }
@container vx-page-body (min-width: 768px) { .vx-stepper-label { display: block; } }

.vx-stepper-line { flex: 1 1 auto; height: 2px; margin: 0 .75rem; border-radius: 9999px; background: #f3f4f6; transition: background-color .5s ease; }
.vx-stepper-line--done { background: var(--vx-teal); }

.vx-transfer-picker { overflow: hidden; }
.vx-transfer-picker-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 16px 24px;
  border-bottom: .8px solid rgba(255, 255, 255, .40);
}
.vx-transfer-picker-title { display: flex; align-items: center; gap: .5rem; }
.vx-transfer-picker-toolbar { display: flex; gap: .5rem; align-items: center; }
.vx-transfer-picker-toolbar .vx-search { flex: 1; }
.vx-transfer-picker-toolbar .vx-solicitudes-sort-btn { flex: 0 0 auto; }
.vx-transfer-picker-title h3,
.vx-transfer-section-title h3,
.vx-transfer-requests-title-row h3 { margin: 0; font-size: 1rem; letter-spacing: normal; }
@container vx-page-body (min-width: 640px) {
  .vx-transfer-picker-header { flex-direction: row; align-items: center; justify-content: space-between; }
}

.vx-search { position: relative; }
.vx-search__icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.vx-search input.vx-input { padding-left: 2rem; }

.vx-transfer-table-wrap { overflow-x: auto; max-height: 50vh; overflow-y: auto; }
.vx-transfer-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.vx-transfer-table th {
  padding: 12px 24px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--vx-text, #111827);
  border-bottom: 1px solid #f3f4f6;
}
.vx-transfer-table td { padding: 14px 24px; border-top: 1px solid #f9fafb; }
.vx-transfer-table .vx-td-name { font-weight: 500; color: #1f2937; }
.vx-transfer-table tbody tr:first-child td { border-top: none; }
.vx-transfer-table .vx-td-id {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #9ca3af;
}
.vx-transfer-table tbody tr { cursor: pointer; transition: background-color .15s ease; }
.vx-transfer-table tbody tr:hover { background: rgba(252, 104, 33, .05); }
.vx-transfer-row--selected { background: rgba(252, 104, 33, .05); border-left: 1.6px solid var(--vx-orange); }
.vx-transfer-row--disabled { opacity: .55; cursor: not-allowed; }
.vx-transfer-row--disabled:hover { background: transparent; }
.vx-transfer-pending-badge { margin-left: .5rem; font-size: .6875rem; }

.vx-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: .25rem;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.vx-checkbox--checked { background: var(--vx-orange); border-color: var(--vx-orange); }

.vx-transfer-picker-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 16px 24px;
  border-top: .8px solid rgba(255, 255, 255, .40);
  background: rgba(252, 104, 33, .05);
}
.vx-transfer-picker-footer p { margin: 0; font-size: .875rem; color: #4b5563; }
.vx-transfer-picker-footer strong { color: var(--vx-orange); }
@container vx-page-body (min-width: 640px) {
  .vx-transfer-picker-footer { flex-direction: row; align-items: center; justify-content: space-between; }
}

.vx-transfer-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }

.vx-transfer-form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@container vx-page-body (min-width: 768px) { .vx-transfer-form-grid { grid-template-columns: 1fr 1fr; } }
.vx-transfer-form-full { grid-column: 1 / -1; }

.vx-transfer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  min-height: 2.625rem;
  padding: .625rem 1rem;
  border-radius: var(--vx-radius);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--vx-border, rgba(0, 0, 0, .08));
}
.vx-transfer-chips .vx-badge { gap: .25rem; padding: .25rem .375rem; }
.vx-transfer-chips .vx-badge button { border: none; background: none; padding: 0; display: flex; color: inherit; cursor: pointer; }
.vx-transfer-chips .vx-badge button:hover { color: var(--vx-orange-dark); }

.vx-transfer-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }

.vx-transfer-confirm-groups { display: flex; flex-direction: column; gap: 1rem; }
.vx-transfer-confirm-block { border-radius: var(--vx-radius); padding: 1rem; }
.vx-transfer-confirm-block > p:first-child { margin: 0 0 .5rem; }
.vx-transfer-confirm-value { margin: 0; font-size: .875rem; font-weight: 600; color: #1f2937; }
.vx-transfer-confirm-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }

.vx-transfer-requests-header { padding: 16px 24px; border-bottom: .8px solid rgba(255, 255, 255, .40); }
.vx-transfer-requests-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

.vx-pill-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.vx-pill-tab {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: var(--vx-radius);
  border: none;
  background: none;
  font-family: var(--vx-font);
  font-size: .875rem;
  font-weight: 500;
  color: var(--vx-text-soft);
  cursor: pointer;
  transition: all .2s ease;
}
.vx-pill-tab:hover { background: rgba(0, 0, 0, .05); color: #4b5563; }
.vx-pill-tab--active,
.vx-pill-tab--active:hover { background: var(--vx-purple); color: #fff; box-shadow: var(--vx-glow-purple); }
.vx-pill-tab-badge {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--vx-orange);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vx-transfer-requests-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: .8px solid rgba(255, 255, 255, .40);
}
.vx-transfer-requests-toolbar .vx-input { width: auto; }

.vx-transfer-requests-table-wrap { overflow-x: auto; }
.vx-transfer-requests-table { width: 100%; border-collapse: collapse; }
.vx-transfer-requests-table th {
  padding: 12px 24px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--vx-text-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
}
.vx-transfer-requests-table td { padding: 14px 24px; border-top: 1px solid #f9fafb; }
.vx-transfer-td-placeholder { height: 52px; padding: 0; }
.vx-transfer-requests-table tbody tr:first-child td { border-top: none; }
.vx-transfer-requests-table tbody tr:hover { background: rgba(252, 104, 33, .05); }
.vx-transfer-requests-table .vx-td-id { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #9ca3af; white-space: nowrap; }
.vx-transfer-requests-table .vx-td-primary { font-size: 14px; font-weight: 500; color: #1f2937; white-space: nowrap; }
.vx-transfer-requests-table .vx-td-secondary { font-size: 14px; color: #4b5563; white-space: nowrap; }
.vx-transfer-requests-table .vx-td-muted { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.vx-transfer-requests-table .vx-td-comment { font-size: 12px; color: #6b7280; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-transfer-requests-table .vx-td-actions { display: flex; gap: .5rem; }

.vx-transfer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  color: #9ca3af;
}
.vx-transfer-empty p { margin: .75rem 0 0; font-size: .875rem; }

.vx-transfer-request-actions { display: flex; gap: .5rem; margin-top: .75rem; }

.vx-badge--red { background: #fef2f2; color: #dc2626; }

.vx-btn--sm { padding: .35rem .75rem; font-size: .75rem; }

.vx-p-4 { padding: var(--vx-space-4); }
.vx-p-5 { padding: var(--vx-space-5); }
.vx-p-6 { padding: var(--vx-space-6); }

/* Dispositivos (Sincronizar usuarios) — valores medidos en vivo del prototipo React. */
.vx-device-shell { display: flex; flex-direction: column; gap: 1.5rem; flex: 1 1 auto; width: 100%; }
.vx-device-shell .vx-card { border-radius: var(--vx-radius-lg); }

.vx-device-tabs { padding: .5rem; }
.vx-device-tabs .vx-pill-tab { flex: 1 1 0; justify-content: center; }
.vx-device-tabs .vx-pill-tab--active,
.vx-device-tabs .vx-pill-tab--active:hover {
  background: linear-gradient(135deg, var(--vx-purple) 0%, var(--vx-purple-light) 50%, var(--vx-purple) 100%);
}

.vx-device-view { display: flex; flex-direction: column; gap: 1.25rem; }

.vx-device-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vx-text);
}

.vx-device-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; }
@container vx-page-body (min-width: 768px) { .vx-device-form-grid { grid-template-columns: repeat(4, 1fr); } }
.vx-device-form-grid label { display: block; margin-bottom: .375rem; }
.vx-device-form-submit { display: flex; align-items: flex-end; }
.vx-device-form-btn { width: 100%; }

.vx-device-subarea-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; }
.vx-device-subarea-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.vx-device-subarea-trigger svg { flex-shrink: 0; color: var(--vx-text-soft, #9ca3af); }
.vx-device-subarea-list { max-height: 45vh; overflow-y: auto; }
.vx-device-subarea-list .vx-column-chooser-item { white-space: normal; }
.vx-device-subarea-group-label {
  padding: .5rem .5rem .25rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vx-text-soft, #9ca3af);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-device-sync-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; margin-bottom: 1rem; }
@container vx-page-body (min-width: 768px) { .vx-device-sync-grid { grid-template-columns: repeat(3, 1fr); } }
.vx-device-sync-grid label { display: block; margin-bottom: .375rem; }

.vx-device-sync-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: end; margin-bottom: 1.25rem; }
@container vx-page-body (min-width: 768px) { .vx-device-sync-grid-2 { grid-template-columns: repeat(2, 1fr); } }
.vx-device-sync-grid-2 label { display: block; margin-bottom: .375rem; }

.vx-device-list-card { overflow: hidden; }
.vx-device-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: .8px solid rgba(255, 255, 255, .40);
}
.vx-device-list-title { display: flex; align-items: center; gap: .5rem; }
.vx-device-list-title h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--vx-text); }
.vx-device-list-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vx-device-list-actions .vx-search input.vx-input { width: 11rem; }

.vx-device-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.25rem;
}
@container vx-page-body (min-width: 768px) { .vx-device-grid { grid-template-columns: repeat(2, 1fr); } }
@container vx-page-body (min-width: 1024px) { .vx-device-grid { grid-template-columns: repeat(3, 1fr); } }

.vx-device-card {
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.vx-device-card:hover { box-shadow: var(--vx-shadow-glass-sm); }
.vx-device-card--selected { border-color: rgba(252, 104, 33, .45) !important; box-shadow: 0 0 0 2px rgba(252, 104, 33, .35); }

.vx-device-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.vx-device-card-heading { display: flex; align-items: center; gap: .5rem; }

.vx-device-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgba(85, 40, 99, .15);
  color: var(--vx-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vx-device-lastact { font-size: .625rem; color: #9ca3af; white-space: nowrap; }

.vx-device-serial { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; font-size: .875rem; color: #1f2937; }
.vx-device-location { margin: .125rem 0 0; font-size: .75rem; color: var(--vx-text-soft); }

.vx-device-card-bottom .vx-badge { font-size: .625rem; }

.vx-device-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: .8px solid rgba(255, 255, 255, .40);
}
.vx-device-delete-btn:hover { color: var(--vx-orange); background: rgba(252, 104, 33, .10); }

.vx-device-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: #9ca3af;
}
.vx-device-empty p { margin: .75rem 0 0; font-size: .875rem; }

.vx-device-dest-panel { border-radius: var(--vx-radius-lg); padding: 1rem; }

.vx-device-dest-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@container vx-page-body (min-width: 640px) { .vx-device-dest-grid { grid-template-columns: repeat(2, 1fr); } }
@container vx-page-body (min-width: 768px) { .vx-device-dest-grid { grid-template-columns: repeat(3, 1fr); } }

.vx-device-dest-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.vx-device-dest-serial { margin: 0; font-size: .75rem; font-weight: 600; color: #374151; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.vx-device-dest-location { margin: 0; font-size: .625rem; color: #9ca3af; }

.vx-device-dest-count { margin: .75rem 0 0; font-size: .75rem; font-weight: 500; color: var(--vx-teal-dark); }

.vx-checkbox--checked-teal { background: var(--vx-teal); border-color: var(--vx-teal); }

/* Glass override for DevExpress editors — wins on specificity over the global
   .dxbl-text-edit restyle in layout.css without replacing the component. */
.dxbl-text-edit.vx-input-dx {
  background: rgba(255, 255, 255, .70) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--vx-border, rgba(0, 0, 0, .08)) !important;
}
.dxbl-text-edit.vx-input-dx:focus-within {
  border-color: rgba(252, 104, 33, .55) !important;
  box-shadow: 0 0 0 2px rgba(252, 104, 33, .35) !important;
}
.vx-input-dx .dxbl-text-edit-input {
  background: transparent !important;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .875rem;
  padding: .625rem 1rem;
}

.vx-scroll-none { scrollbar-width: none; }
.vx-scroll-none::-webkit-scrollbar { display: none; }

.vx-event-shell { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; gap: 1rem; }
@media (min-width: 640px) { .vx-event-shell { gap: 1.5rem; } }

.vx-event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--vx-radius-lg, 1rem) !important;
  padding: .75rem !important;
}
@media (min-width: 640px) { .vx-event-header { padding: 1rem !important; } }
@media (min-width: 768px) { .vx-event-header { padding: 1.5rem !important; } }

.vx-event-header h2 { font-size: 1.125rem; }
@media (min-width: 640px) { .vx-event-header h2 { font-size: 1.25rem; } }
@media (min-width: 768px) { .vx-event-header h2 { font-size: 1.5rem; } }

.vx-event-subtitle { margin: .125rem 0 0; font-size: .75rem; color: #9ca3af; }
@media (min-width: 768px) { .vx-event-subtitle { font-size: .875rem; } }

.vx-event-new-btn { flex-shrink: 0; }

.vx-event-form-card {
  border-radius: var(--vx-radius-lg, 1rem) !important;
  border-color: rgba(252, 104, 33, .20) !important;
  padding: .75rem !important;
}
@media (min-width: 640px) { .vx-event-form-card { padding: 1rem !important; } }
@media (min-width: 768px) { .vx-event-form-card { padding: 1.5rem !important; } }

.vx-event-form-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vx-text, #111827);
}
.vx-event-form-title svg { color: var(--vx-orange); flex-shrink: 0; }

.vx-event-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container vx-page-body (min-width: 768px) { .vx-event-form-grid { grid-template-columns: repeat(3, 1fr); } }
.vx-event-form-grid label { display: block; margin-bottom: .375rem; font-size: .75rem; }
@media (min-width: 640px) { .vx-event-form-grid label { font-size: .875rem; } }
.vx-event-form-grid .vx-input { padding: .5rem 1rem; }

.vx-event-form-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

.vx-event-table-card { border-radius: var(--vx-radius-lg, 1rem) !important; }

.vx-event-table-toolbar {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: .8px solid rgba(255, 255, 255, .40);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
@container vx-page-body (min-width: 640px) {
  .vx-event-table-toolbar { flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; }
}

.vx-event-search { position: relative; flex: 1 1 auto; max-width: 24rem; }
.vx-event-search .vx-input { padding-left: 2rem; }
.vx-event-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }

.vx-event-table-title { display: flex; align-items: center; gap: .5rem; }
.vx-event-table-title .vx-title { font-size: 1rem; }

.vx-event-table-meta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.vx-column-chooser { position: relative; }
.vx-column-chooser-panel {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  z-index: 20;
  min-width: 14rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: .5rem;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .60);
  border-radius: var(--vx-radius, .75rem);
  box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85, 40, 99, .10));
}
.vx-column-chooser-panel--up {
  top: auto;
  bottom: calc(100% + .375rem);
}
.vx-column-chooser-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem;
  border-radius: var(--vx-radius-sm, .5rem);
  font-size: .8125rem;
  color: var(--vx-text, #1f2937);
  cursor: pointer;
  white-space: nowrap;
}
.vx-column-chooser-item:hover { background: rgba(85, 40, 99, .06); }
.vx-event-table-meta span { font-size: .75rem; color: #9ca3af; white-space: nowrap; }

.vx-event-table-wrap { overflow-x: auto; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.vx-event-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vx-event-table th {
  padding: .5rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 500;
  color: var(--vx-text-soft, #6b7280);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: .8px solid rgba(0, 0, 0, .06);
}
@media (min-width: 768px) { .vx-event-table th { padding: .75rem 1.5rem; } }
.vx-event-table-actions-col { text-align: right !important; }
.vx-event-table td {
  padding: .5rem 1rem;
  border-bottom: .8px solid rgba(0, 0, 0, .04);
  vertical-align: middle;
}
@media (min-width: 768px) { .vx-event-table td { padding: .625rem 1.5rem; } }
.vx-event-table tbody tr:hover { background: rgba(252, 104, 33, .05); }
.vx-eventtype-table th:nth-child(1), .vx-eventtype-table td:nth-child(1) { display: none; }
.vx-eventtype-table th:nth-child(3), .vx-eventtype-table td:nth-child(3) { display: none; }
.vx-eventtype-table th:nth-child(4), .vx-eventtype-table td:nth-child(4),
.vx-eventtype-table th:nth-child(5), .vx-eventtype-table td:nth-child(5) { display: none; }
@container vx-page-body (min-width: 640px) {
  .vx-eventtype-table th:nth-child(1), .vx-eventtype-table td:nth-child(1) { display: table-cell; }
}
@container vx-page-body (min-width: 768px) {
  .vx-eventtype-table th:nth-child(3), .vx-eventtype-table td:nth-child(3) { display: table-cell; }
}
@container vx-page-body (min-width: 1024px) {
  .vx-eventtype-table th:nth-child(4), .vx-eventtype-table td:nth-child(4),
  .vx-eventtype-table th:nth-child(5), .vx-eventtype-table td:nth-child(5) { display: table-cell; }
}

.vx-event-id { font-size: .625rem; font-family: monospace; color: #9ca3af; }

.vx-eventtype-table td:nth-child(2) { font-weight: 500; color: #1f2937; }
.vx-eventtype-table td:nth-child(4) { color: #4b5563; }
.vx-eventtype-table td:nth-child(5) { font-size: .75rem; color: #9ca3af; }

.vx-event-name-cell { display: flex; align-items: center; gap: .5rem; }

/* Turnos table — dedicated class, values measured directly from Turnos.tsx via getComputedStyle */
.vx-workshift-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--vx-text-soft, #6b7280); }
.vx-workshift-table th {
  padding: .5rem 1rem;
  text-align: left;
  font-size: .625rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: .8px solid rgba(0, 0, 0, .06);
}
@media (min-width: 768px) { .vx-workshift-table th { padding: .75rem 1.5rem; } }
.vx-workshift-table td {
  padding: .5rem 1rem;
  border-bottom: .8px solid rgba(0, 0, 0, .04);
  vertical-align: middle;
}
@media (min-width: 768px) { .vx-workshift-table td { padding: .625rem 1.5rem; } }
.vx-workshift-table tbody tr:hover { background: rgba(252, 104, 33, .05); }

.vx-ws-id { font-size: .75rem; font-weight: 600; color: var(--vx-purple, #552863); }
.vx-ws-name { font-size: .875rem; font-weight: 600; color: #1f2937; }
.vx-ws-muted { font-size: .75rem; color: var(--vx-text-soft, #6b7280); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-ws-gray { font-size: .75rem; color: #4b5563; }
.vx-ws-duration { font-size: .75rem; color: #374151; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.vx-ws-badge { font-size: .5625rem; }
.vx-event-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
.vx-event-dot--root { background: var(--vx-teal); }
.vx-event-dot--child { background: var(--vx-orange); }

.vx-event-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.vx-icon-btn--edit:hover { background: rgba(51, 203, 176, .10); color: var(--vx-teal-dark, #25a08a); }
.vx-icon-btn--danger:hover { background: rgba(252, 104, 33, .10); color: var(--vx-orange, #FC6821); }

.vx-event-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  gap: .5rem;
}
.vx-event-empty svg { color: #e5e7eb; }
.vx-event-empty p { margin: 0; font-size: .875rem; color: #9ca3af; }

/* Solicitudes (Vacaciones / Permisos) */
.vx-solicitudes-shell { display: flex; flex-direction: column; gap: 1rem; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }

.vx-solicitudes-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  padding: 1rem;
  border-radius: var(--vx-radius-lg);
}
.vx-solicitudes-field { flex: 1 1 160px; min-width: 140px; }
.vx-solicitudes-field--btn { flex: 0 0 auto; }
.vx-solicitudes-field .vx-label { display: block; margin-bottom: .375rem; }

.vx-solicitudes-results { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--vx-radius-lg); }
.vx-solicitudes-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .75);
  border-bottom: .8px solid rgba(255, 255, 255, .6);
  flex-wrap: wrap;
}
.vx-solicitudes-results-header h3 { margin: 0; font-size: .875rem; font-weight: 600; color: #1f2937; }
.vx-solicitudes-results-actions { display: flex; align-items: center; gap: .5rem; }
.vx-solicitudes-sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .375rem .625rem;
  border: 1px solid rgba(255, 255, 255, .50);
  border-radius: var(--vx-radius, .75rem);
  background: rgba(255, 255, 255, .70);
  color: var(--vx-purple, #552863);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.vx-solicitudes-sort-btn:hover { background: rgba(255, 255, 255, .92); }
.vx-solicitudes-sort-btn svg { flex-shrink: 0; }

.vx-permutas-selectall { cursor: pointer; flex-shrink: 0; }
.vx-permutas-selectall.vx-checkbox--disabled { cursor: not-allowed; border-color: #e5e7eb; opacity: .5; }

.vx-solicitudes-table-wrap { overflow: auto; }
.vx-solicitudes-table { width: 100%; border-collapse: collapse; }
.vx-solicitudes-table th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .625rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(249, 250, 251, .8);
  border-bottom: .8px solid rgba(0, 0, 0, .06);
  position: sticky;
  top: 0;
}
.vx-solicitudes-table td { padding: .75rem 1rem; border-bottom: .8px solid rgba(0, 0, 0, .04); vertical-align: middle; }
.vx-solicitudes-table tbody tr:hover { background: rgba(252, 104, 33, .05); }
.vx-solicitudes-table .vx-td-actions { display: flex; gap: .5rem; }
.vx-solicitudes-td-id { font-size: .75rem; font-weight: 600; color: var(--vx-purple); white-space: nowrap; }
.vx-solicitudes-td-name { font-size: .875rem; font-weight: 600; color: #1f2937; }
.vx-solicitudes-td-sub { display: block; font-size: .6875rem; font-weight: 400; color: #9ca3af; margin-top: .125rem; }
.vx-solicitudes-td-day { font-size: .75rem; color: #4b5563; font-weight: 500; white-space: nowrap; }
.vx-solicitudes-td-placeholder { height: 64px; padding: 0; }

.vx-empty-state { padding: 2rem 1rem; text-align: center; color: #9ca3af; font-style: italic; }

/* Permutas */
.container:has(.vx-permutas-shell),
.container:has(.rest-day-swap-page),
.container:has(.vx-calfest-shell),
.container:has(.vx-turnochange-shell),
.container:has(.vx-payroll-shell),
.container:has(.vx-geofence-shell) { display: flex; flex-direction: column; }
.container:has(.vx-calfest-shell) > .main-layout,
.container:has(.vx-calfest-shell) .dxbl-loading-panel,
.container:has(.vx-calfest-shell) .dxbl-loading-panel-target-content,
.container:has(.vx-permutas-shell) > .main-layout,
.container:has(.vx-permutas-shell) .dxbl-loading-panel,
.container:has(.vx-permutas-shell) .dxbl-loading-panel-target-content,
.container:has(.rest-day-swap-page) > .main-layout,
.container:has(.rest-day-swap-page) .dxbl-loading-panel,
.container:has(.rest-day-swap-page) .dxbl-loading-panel-target-content,
.container:has(.rest-day-swap-page) form,
.container:has(.vx-turnochange-shell) > .main-layout,
.container:has(.vx-turnochange-shell) .dxbl-loading-panel,
.container:has(.vx-turnochange-shell) .dxbl-loading-panel-target-content,
.container:has(.vx-turnochange-shell) form,
.container:has(.vx-payroll-shell) > .main-layout,
.container:has(.vx-payroll-shell) .dxbl-loading-panel,
.container:has(.vx-payroll-shell) .dxbl-loading-panel-target-content,
.container:has(.vx-geofence-shell) > .main-layout,
.container:has(.vx-geofence-shell) .dxbl-loading-panel,
.container:has(.vx-geofence-shell) .dxbl-loading-panel-target-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Pantalla dividida */
.vx-pane-body:has(.vx-permutas-shell),
.vx-pane-body:has(.rest-day-swap-page),
.vx-pane-body:has(.vx-calfest-shell),
.vx-pane-body:has(.vx-turnochange-shell),
.vx-pane-body:has(.vx-payroll-shell),
.vx-pane-body:has(.vx-geofence-shell) { display: flex; flex-direction: column; }
.vx-pane-body:has(.vx-calfest-shell) .dxbl-loading-panel,
.vx-pane-body:has(.vx-calfest-shell) .dxbl-loading-panel-target-content,
.vx-pane-body:has(.vx-permutas-shell) .dxbl-loading-panel,
.vx-pane-body:has(.vx-permutas-shell) .dxbl-loading-panel-target-content,
.vx-pane-body:has(.rest-day-swap-page) .dxbl-loading-panel,
.vx-pane-body:has(.rest-day-swap-page) .dxbl-loading-panel-target-content,
.vx-pane-body:has(.rest-day-swap-page) form,
.vx-pane-body:has(.vx-turnochange-shell) .dxbl-loading-panel,
.vx-pane-body:has(.vx-turnochange-shell) .dxbl-loading-panel-target-content,
.vx-pane-body:has(.vx-turnochange-shell) form,
.vx-pane-body:has(.vx-payroll-shell) .dxbl-loading-panel,
.vx-pane-body:has(.vx-payroll-shell) .dxbl-loading-panel-target-content,
.vx-pane-body:has(.vx-geofence-shell) .dxbl-loading-panel,
.vx-pane-body:has(.vx-geofence-shell) .dxbl-loading-panel-target-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Columnas responsivas por ancho real del contenedor */
.container:has(.vx-permutas-shell),
.container:has(.vx-turnochange-shell),
.container:has(.vx-calfest-shell),
.container:has(.vx-dash),
.container:has(.vx-config-shell),
.container:has(.vx-transfer-shell),
.container:has(.vx-device-shell),
.container:has(.vx-event-shell),
.container:has(.vx-geofence-shell),
.container:has(.vx-payroll-shell),
.vx-pane-body:has(.vx-permutas-shell),
.vx-pane-body:has(.vx-turnochange-shell),
.vx-pane-body:has(.vx-calfest-shell),
.vx-pane-body:has(.vx-dash),
.vx-pane-body:has(.vx-config-shell),
.vx-pane-body:has(.vx-transfer-shell),
.vx-pane-body:has(.vx-device-shell),
.vx-pane-body:has(.vx-event-shell),
.vx-pane-body:has(.vx-geofence-shell),
.vx-pane-body:has(.vx-payroll-shell) {
  container-type: inline-size;
  container-name: vx-page-body;
}

.vx-permutas-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: 2fr 3fr; gap: 1rem; flex: 1; min-height: 0; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
@container vx-page-body (min-width: 1024px) { .vx-permutas-shell { grid-template-columns: 1fr 3fr; grid-template-rows: none; } }

.rest-day-swap-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rest-day-swap-main { flex: 1; min-height: 0; align-items: stretch !important; }
.rest-day-swap-left.vx-permutas-side { overflow: hidden; }
.rest-day-swap-right { overflow-y: auto; }

@media (max-width: 992px) {
  .rest-day-swap-page { flex: none; min-height: 0; }
  .rest-day-swap-main { flex: none; flex-wrap: nowrap !important; min-height: 0; }
  .rest-day-swap-left, .rest-day-swap-right { min-width: 0 !important; width: 100%; }
  .rest-day-swap-left.vx-permutas-side { overflow: visible; max-height: 60vh; }
  .rest-day-swap-left .vx-permutas-list { max-height: 40vh; }
}

.row.gy-3 {
  container-type: inline-size;
  container-name: vx-calendar-row;
}
.row.gy-3 > .col-md-6 { max-width: 100%; flex: 0 0 100%; }
.row.gy-3 .dxbl-calendar {
  width: 100%;
  max-width: 22rem;
  --dxbl-calendar-content-padding-x: .375rem;
  --dxbl-calendar-content-cell-padding-x: .125rem;
  --dxbl-calendar-header-padding-x: 0;
}
@container vx-calendar-row (min-width: 480px) {
  .row.gy-3 > .col-md-6 { flex: 0 0 calc(50% - .5rem); max-width: calc(50% - .5rem); }
  .row.gy-3 .dxbl-calendar { max-width: none; }
}

.vx-permutas-side { display: flex; flex-direction: column; overflow: hidden; }
.vx-permutas-side-header { padding: 1rem; border-bottom: .8px solid rgba(255, 255, 255, .6); }
.vx-permutas-side-toolbar { display: flex; gap: .5rem; align-items: center; }
.vx-permutas-side-toolbar .vx-search { flex: 1; min-width: 0; }
.vx-permutas-side-toolbar .vx-solicitudes-sort-btn { flex: 0 0 auto; }
.vx-permutas-side-header h3 { margin: 0 0 .625rem; font-size: .8125rem; font-weight: 600; color: #1f2937; }
.vx-permutas-side-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  border-top: .8px solid rgba(255, 255, 255, .6);
  background: rgba(249, 250, 251, .5);
}
.vx-permutas-side-footer span { font-size: .625rem; color: #9ca3af; }
.vx-permutas-clear-btn { border: none; background: none; padding: 0; font-size: .625rem; font-weight: 500; color: var(--vx-orange); cursor: pointer; }
.vx-permutas-clear-btn:hover { text-decoration: underline; }
.vx-permutas-side-actions { padding: .75rem 1rem; }

.vx-permutas-list { flex: 1; overflow-y: auto; }
.vx-permutas-collab-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .625rem 1rem;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-permutas-collab-row:last-child { border-bottom: none; }
.vx-permutas-collab-row:hover { background: rgba(0, 0, 0, .02); }
.vx-permutas-collab-item { min-width: 0; }
.vx-permutas-collab-name { margin: 0; font-size: .75rem; font-weight: 700; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-permutas-collab-role { margin: .125rem 0 0; font-size: .625rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vx-permutas-results { display: flex; flex-direction: column; overflow: hidden; }
.vx-permutas-results .vx-solicitudes-table-wrap { flex: 1; }

.vx-permutas-td-comment { display: flex; align-items: center; gap: .25rem; font-size: .6875rem; color: #9ca3af; font-style: italic; margin-top: .25rem; }

/* Permutas — Crear (página, no modal) */
.vx-permutas-back {
  display: inline-block;
  background: none;
  border: none;
  padding: 0 0 .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  color: var(--vx-orange, #FC6821);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.vx-permutas-back:hover { text-decoration: underline; }

.vx-modal-header-icon--danger { background: rgba(220, 38, 38, .12); color: #dc2626; }

.vx-permutas-picker-filters { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: .75rem 0; }
@container vx-page-body (min-width: 480px) { .vx-permutas-picker-filters { grid-template-columns: 1fr 1fr; } }

.vx-permutas-create-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.vx-permutas-create-header h4 { margin: 0; }

.vx-permutas-error-list { margin: 0; padding: 0; list-style: none; }
.vx-permutas-error-list li {
  padding: .625rem .75rem;
  margin-bottom: .5rem;
  border-radius: var(--vx-radius, .75rem);
  background: rgba(220, 38, 38, .06);
  color: #b91c1c;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .8125rem;
}
.vx-permutas-error-list li:last-child { margin-bottom: 0; }

/* Calendario DevExpress (DxCalendar) — Permutas/Crear, Cambio de turno y cualquier dropdown de fecha */
.dxbl-calendar,
.dxbl-calendar table,
.dxbl-calendar tbody,
.dxbl-calendar thead,
.dxbl-calendar tr,
.dxbl-calendar th,
.dxbl-calendar td,
.dxbl-calendar-days-of-week,
.dxbl-calendar-week-row,
dxbl-calendar-table-container {
  background-color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dxbl-calendar {
  border-radius: var(--vx-radius-lg, 1rem) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  overflow: hidden;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.dxbl-calendar-header,
.dxbl-calendar-header-title-btn,
.dxbl-calendar-header-previous-year-btn,
.dxbl-calendar-header-previous-month-btn,
.dxbl-calendar-header-next-month-btn,
.dxbl-calendar-header-next-year-btn {
  background-color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dxbl-calendar-header { padding: .5rem .375rem; }
.dxbl-calendar-header-title-btn .dxbl-btn-caption {
  font-weight: 600;
  font-size: .8125rem;
  color: var(--vx-text, #111827);
}
.dxbl-calendar-header-previous-year-btn,
.dxbl-calendar-header-previous-month-btn,
.dxbl-calendar-header-next-month-btn,
.dxbl-calendar-header-next-year-btn {
  border-radius: 9999px !important;
}
.dxbl-calendar-header-previous-month-btn:not(:disabled):hover,
.dxbl-calendar-header-next-month-btn:not(:disabled):hover,
.dxbl-calendar-header-previous-year-btn:not(:disabled):hover,
.dxbl-calendar-header-next-year-btn:not(:disabled):hover {
  background: rgba(252, 104, 33, .10) !important;
  color: var(--vx-orange, #FC6821) !important;
}

.dxbl-calendar-days-of-week th {
  font-size: .625rem;
  font-weight: 600;
  color: var(--vx-text-soft, #6b7280);
  text-transform: uppercase;
}

.dxbl-calendar-day { padding: 1px !important; }
.dxbl-calendar-day > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 1px auto;
  border-radius: .5rem !important;
  font-size: .6875rem;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--mycolor, #9ca3af) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--mycolor, #9ca3af) 30%, transparent);
  color: color-mix(in srgb, var(--mycolor, #6b7280) 80%, black 15%) !important;
  transition: transform .1s ease;
}
.dxbl-calendar-day:not(.dxbl-calendar-disabled-item) > a:hover { transform: scale(1.08); }
.dxbl-calendar-day.dxbl-calendar-disabled-item > a { opacity: .45; }
.dxbl-calendar-day.dxbl-calendar-selected-item > a { background: var(--vx-purple, #552863) !important; border-color: var(--vx-purple, #552863) !important; color: #fff !important; }
.dxbl-calendar-week-number { color: #d1d5db; font-size: .625rem; }

.dxbl-calendar-footer { background-color: #fff !important; border: 0 !important; box-shadow: none !important; padding: .5rem; }
.dxbl-calendar-footer .dxbl-btn {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .10) !important;
  border-radius: var(--vx-radius, .75rem) !important;
  color: var(--vx-text-soft, #6b7280) !important;
  font-size: .75rem !important;
}
.dxbl-calendar-footer .dxbl-btn:hover { background: rgba(0, 0, 0, .03) !important; }

.vx-calendar-legend { border-top: 1px solid rgba(0, 0, 0, .06); padding-top: .75rem; margin-top: .75rem; }
.vx-calendar-legend-title {
  margin: 0 0 .5rem;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vx-text-soft, #6b7280);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-calendar-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.legend-item { display: flex; align-items: center; gap: .375rem; font-size: .6875rem; color: var(--vx-text-soft, #6b7280); font-family: var(--vx-font, 'Inter', system-ui, sans-serif); margin-bottom: 0; }
.legend-color {
  width: .625rem;
  height: .625rem;
  flex-shrink: 0;
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--mycolor, #9ca3af) 40%, transparent) !important;
  background: color-mix(in srgb, var(--mycolor, #9ca3af) 30%, transparent) !important;
}

.vx-turnochange-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: 3fr 2fr; gap: 1rem; flex: 1; min-height: 0; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
@container vx-page-body (min-width: 1024px) { .vx-turnochange-shell { grid-template-columns: 7fr 5fr; grid-template-rows: none; } }
.vx-turnochange-shell .vx-card { border-radius: var(--vx-radius-lg); }

@media (max-width: 1023px) {
  .vx-turnochange-shell { flex: none; min-height: 0; height: 100%; overflow-y: auto; grid-template-rows: auto auto; align-items: start; }
  .vx-turnochange-left, .vx-turnochange-right { min-width: 0; width: 100%; }
  .vx-turnochange-left { overflow: visible; max-height: 85vh; }
  .vx-turnochange-table-wrap { height: 30vh; max-height: 30vh; }
  .vx-turnochange-right { overflow: visible; max-height: none; }
  .vx-turnochange-right-body { overflow: visible; }
}

.vx-turnochange-left { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

.vx-turnochange-toolbar {
  padding: .75rem;
  border-bottom: .8px solid rgba(255, 255, 255, .4);
  background: rgba(249, 250, 251, .3);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: .5rem;
  flex-shrink: 0;
}
@media (min-width: 640px) { .vx-turnochange-toolbar { align-items: center; justify-content: space-between; } }
.vx-turnochange-filter { flex: 1 1 auto; min-width: 0; }
@media (min-width: 640px) { .vx-turnochange-filter { flex: 0 1 auto; width: 100%; max-width: 16rem; } }
.vx-turnochange-filter .vx-label { display: block; margin-bottom: .25rem; }
.vx-turnochange-toolbar-actions { display: flex; gap: .5rem; align-items: flex-end; flex-shrink: 0; }

.vx-turnochange-history-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: var(--vx-radius, .75rem);
  border: .8px solid rgba(85, 40, 99, .20);
  background: rgba(85, 40, 99, .05);
  color: var(--vx-purple);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.vx-turnochange-history-btn:hover:not(:disabled) { background: rgba(85, 40, 99, .10); }
.vx-turnochange-history-btn:active:not(:disabled) { transform: scale(.95); }
.vx-turnochange-history-btn:disabled { border-color: var(--vx-border, rgba(0, 0, 0, .08)); background: rgba(0, 0, 0, .03); color: #d1d5db; cursor: not-allowed; }

.vx-turnochange-search-row { display: flex; gap: .5rem; align-items: center; padding: .75rem; border-bottom: .8px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .3); flex-shrink: 0; }
.vx-turnochange-search-row .vx-search { flex: 1; min-width: 0; }
.vx-turnochange-search-row .vx-solicitudes-sort-btn { flex: 0 0 auto; }

.vx-turnochange-table-wrap { flex: 1 1 auto; overflow: auto; min-height: 0; }
.vx-turnochange-table { width: 100%; border-collapse: collapse; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
.vx-turnochange-table thead { position: sticky; top: 0; z-index: 1; background: rgba(249, 250, 251, .9); }
.vx-turnochange-table th {
  padding: 1rem;
  text-align: left;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  border-bottom: .8px solid rgba(0, 0, 0, .06);
}

.vx-turnochange-filter .dxbl-text-edit-input { font-size: .75rem !important; }
.vx-turnochange-th-check { width: 3rem; }
.vx-turnochange-th-check .vx-checkbox { cursor: pointer; }
.vx-turnochange-table td { padding: .75rem 1rem; border-bottom: .8px solid rgba(0, 0, 0, .04); font-size: .75rem; vertical-align: middle; }
.vx-turnochange-table tbody tr { cursor: pointer; transition: background-color .15s ease; }
.vx-turnochange-table tbody tr:hover { background: rgba(252, 104, 33, .05); }
.vx-turnochange-td-name { font-weight: 600; color: #1f2937; }
.vx-turnochange-td-shift { font-weight: 500; color: #4b5563; }
.vx-turnochange-td-sub { color: #6b7280; font-style: italic; }

.vx-turnochange-footer { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-top: .8px solid rgba(255, 255, 255, .4); background: rgba(249, 250, 251, .5); flex-shrink: 0; }
.vx-turnochange-footer span { font-size: .625rem; color: #9ca3af; }

.vx-turnochange-right { display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem; min-height: 0; }
.vx-turnochange-right-header { display: flex; align-items: center; gap: .375rem; padding-bottom: .75rem; border-bottom: .8px solid rgba(0, 0, 0, .06); flex-shrink: 0; }
.vx-turnochange-right-header svg { color: var(--vx-orange); flex-shrink: 0; }
.vx-turnochange-right-header h3 { margin: 0; font-size: .875rem; font-weight: 600; color: var(--vx-text, #111827); font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
.vx-turnochange-right-body { flex: 1 1 auto; overflow-y: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.vx-turnochange-field .vx-label { display: block; margin-bottom: .375rem; }
.vx-turnochange-right-footer { padding-top: 1rem; border-top: .8px solid rgba(0, 0, 0, .06); flex-shrink: 0; display: flex; justify-content: flex-end; }

.vx-turnochange-history-modal { max-width: 32rem; }

.vx-turnochange-right .dxbl-calendar,
.vx-turnochange-right .dxbl-calendar table { width: 100%; }
.vx-turnochange-right .dxbl-calendar-day > a { width: 100%; max-width: 2.5rem; height: 1.875rem; font-size: .75rem; }
.vx-turnochange-history-modal .vx-solicitudes-table th { background: transparent; }

/* Calendarios festivos */
.vx-calfest-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
@container vx-page-body (min-width: 1024px) { .vx-calfest-shell { grid-template-columns: 1fr 2fr; grid-template-rows: none; } }
.vx-calfest-shell .vx-card { border-radius: var(--vx-radius-lg); }

.vx-calfest-side { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

.vx-calfest-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem;
  border-bottom: .8px solid rgba(255, 255, 255, .4);
  background: rgba(249, 250, 251, .3);
  flex-shrink: 0;
}
.vx-calfest-side-header h3 {
  margin: 0;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--vx-text, #111827);
}

.vx-calfest-mini-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .75rem; font-size: .75rem; flex-shrink: 0; }
.vx-calfest-side-header .vx-calfest-mini-btn { padding: .25rem .625rem; }

.vx-calfest-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.vx-calfest-list-empty { margin: 0; padding: 1.5rem 0; text-align: center; font-size: .75rem; font-style: italic; color: #9ca3af; }

.vx-calfest-card {
  padding: .75rem;
  border-radius: var(--vx-radius, .75rem);
  border: .8px solid #f3f4f6;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: all .2s;
}
.vx-calfest-card:hover { background: rgba(249, 250, 251, .5); }
.vx-calfest-card--selected,
.vx-calfest-card--selected:hover {
  background: rgba(85, 40, 99, .05);
  border-color: rgba(85, 40, 99, .2);
  box-shadow: var(--vx-shadow-glass-sm);
}

.vx-calfest-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.vx-calfest-card-name { margin: 0; font-size: .75rem; font-weight: 700; line-height: 1.375; color: #1f2937; }
.vx-calfest-card-actions { display: flex; align-items: center; gap: .125rem; flex-shrink: 0; }
.vx-calfest-card-badge { font-size: .5625rem !important; line-height: 1rem; }
.vx-calfest-card-btn { width: 1.25rem; height: 1.25rem; color: #9ca3af; }

.vx-calfest-card-desc {
  margin: .375rem 0 0;
  font-size: .625rem;
  line-height: 1.5;
  color: #9ca3af;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vx-calfest-card-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .25rem;
  border-top: 1px solid #f9fafb;
  font-size: .5rem;
  font-weight: 600;
  color: #9ca3af;
}

.vx-calfest-detail { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

.vx-calfest-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  text-align: center;
  color: #d1d5db;
}
.vx-calfest-placeholder p { margin: 0; font-size: .75rem; color: #9ca3af; }

.vx-calfest-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem;
  border-bottom: .8px solid rgba(255, 255, 255, .4);
  background: rgba(249, 250, 251, .2);
  flex-shrink: 0;
}
.vx-calfest-detail-heading { min-width: 0; }
.vx-calfest-detail-heading h3 {
  margin: 0;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--vx-purple, #552863);
}
.vx-calfest-detail-heading p { margin: .25rem 0 0; font-size: .75rem; line-height: 1rem; color: #9ca3af; }

.vx-calfest-tabs {
  display: flex;
  gap: .5rem;
  padding: .5rem 1rem 0;
  border-bottom: .8px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .2);
  flex-shrink: 0;
  overflow-x: auto;
}
.vx-calfest-tab {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .25rem .625rem;
  border: none;
  border-bottom: 1.6px solid transparent;
  background: none;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1rem;
  color: #9ca3af;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
}
.vx-calfest-tab:hover { color: #4b5563; }
.vx-calfest-tab--active,
.vx-calfest-tab--active:hover { border-bottom-color: var(--vx-orange, #FC6821); color: var(--vx-orange, #FC6821); }

.vx-calfest-viewport { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem; }
.vx-calfest-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vx-calfest-pane-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-shrink: 0; }
.vx-calfest-pane-label {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-calfest-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-top: .75rem;
  border: .8px solid #f9fafb;
  border-radius: var(--vx-radius-lg, 1rem);
}
.vx-calfest-table { width: 100%; border-collapse: collapse; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
.vx-calfest-table thead { position: sticky; top: 0; z-index: 1; background: #f9fafb; }
.vx-calfest-table th {
  padding: .625rem 1rem;
  text-align: left;
  font-size: .5625rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  white-space: nowrap;
}
.vx-calfest-table tbody { background: rgba(255, 255, 255, .3); }
.vx-calfest-table td { padding: .625rem 1rem; font-size: .75rem; line-height: 1rem; color: #6b7280; border-top: 1px solid #f9fafb; vertical-align: middle; }
.vx-calfest-table tbody tr:first-child td { border-top: none; }
.vx-calfest-table tbody tr:hover { background: rgba(249, 250, 251, .4); }

.vx-calfest-table th.vx-calfest-th-center,
.vx-calfest-table td.vx-calfest-th-center { text-align: center; }
.vx-calfest-table th.vx-calfest-th-actions { text-align: right; }
.vx-calfest-table td.vx-calfest-td-strong { font-weight: 700; color: #1f2937; }
.vx-calfest-table td.vx-calfest-td-muted { color: #9ca3af; }
.vx-calfest-table td.vx-calfest-td-date { font-weight: 600; color: #4b5563; white-space: nowrap; }
.vx-calfest-td-sub { display: block; margin-top: .125rem; font-size: .625rem; line-height: .9375rem; font-weight: 400; color: #9ca3af; }
.vx-calfest-badge { font-size: .5625rem !important; line-height: 1rem; }
.vx-calfest-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }

.vx-calfest-confirm-modal { max-width: 28rem; }

/* Disparador del picker de colaborador paginado (CollaboratorPickerModal) */
.vx-collab-trigger {
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.vx-collab-trigger::after {
  content: '';
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid var(--vx-text-soft, #6b7280);
  border-bottom: 1.5px solid var(--vx-text-soft, #6b7280);
  transform: rotate(45deg);
  margin-top: -.25rem;
}

/* Selector de colaboradores (CollaboratorsSearch) */
.vx-collabpicker { display: flex; flex-direction: column; gap: .75rem; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
.vx-collabpicker-toolbar { display: flex; gap: .5rem; align-items: center; }
.vx-collabpicker-toolbar .vx-collabpicker-search { flex: 1; }
.vx-collabpicker-toolbar .vx-solicitudes-sort-btn { flex: 0 0 auto; }
.vx-collabpicker-search .vx-input { font-size: .8125rem; }
.vx-collabpicker-loading { margin: 0; padding: 1.5rem 0; text-align: center; font-size: .8125rem; font-style: italic; color: #9ca3af; }

.vx-collabpicker-table-wrap { max-height: 50vh; }
.vx-collabpicker .vx-solicitudes-table th { position: static; background: transparent; }
.vx-collabpicker .vx-solicitudes-table tbody tr { cursor: pointer; transition: background-color .15s ease; }
.vx-collabpicker .vx-solicitudes-table tbody tr.vx-collabpicker-row--selected,
.vx-collabpicker .vx-solicitudes-table tbody tr.vx-collabpicker-row--selected:hover { background: rgba(85, 40, 99, .06); }

.vx-collabpicker-th-check { width: 2.75rem; }
.vx-collabpicker-th-check .vx-checkbox { cursor: pointer; }
.vx-collabpicker .vx-checkbox {
  background: rgba(255, 255, 255, .9);
  border-color: #9ca3af;
  box-shadow: 0 1px 2px rgba(85, 40, 99, .08);
}
.vx-collabpicker .vx-checkbox--checked {
  background: var(--vx-orange);
  border-color: var(--vx-orange);
  box-shadow: var(--vx-glow-orange);
}

.vx-collabpicker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .4);
}
.vx-collabpicker-footer > span { font-size: .6875rem; color: #9ca3af; }
.vx-collabpicker-actions { display: flex; gap: .5rem; }
.vx-collabpicker-actions .vx-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.vx-calfest-form-page { display: flex; flex-direction: column; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
.vx-calfest-form-page .vx-permutas-back { align-self: flex-start; }

.vx-calfest-form-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; }
.vx-calfest-form-title svg { color: var(--vx-orange, #FC6821); flex-shrink: 0; }
.vx-calfest-form-title h4 { margin: 0; }

@media (max-width: 1023px) {
  .vx-calfest-shell { flex: none; min-height: 0; grid-template-rows: auto auto; align-items: start; }
  .vx-calfest-side, .vx-calfest-detail { min-width: 0; width: 100%; }
  .vx-calfest-side { overflow: visible; max-height: none; }
  .vx-calfest-list { height: 30vh; max-height: 30vh; }
  .vx-calfest-detail { overflow: visible; max-height: none; }
  .vx-calfest-viewport { overflow: visible; }
  .vx-calfest-pane { height: auto; }
  .vx-calfest-table-wrap { height: 40vh; max-height: 40vh; }
}

@media (max-width: 767px) {
  .vx-calfest-table--dates th:nth-child(2), .vx-calfest-table--dates td:nth-child(2),
  .vx-calfest-table--dates th:nth-child(6), .vx-calfest-table--dates td:nth-child(6),
  .vx-calfest-table--members th:nth-child(3), .vx-calfest-table--members td:nth-child(3),
  .vx-calfest-table--members th:nth-child(4), .vx-calfest-table--members td:nth-child(4) { display: none; }
}

@media (max-width: 639px) {
  .vx-calfest-pane-header { flex-direction: column; align-items: stretch; gap: .5rem; }
  .vx-calfest-pane-header .vx-calfest-mini-btn { align-self: flex-start; }
  .vx-calfest-detail-heading h3 { font-size: .9375rem; }
  .vx-calfest-table--dates th:nth-child(5), .vx-calfest-table--dates td:nth-child(5) { display: none; }
  .vx-calfest-table th, .vx-calfest-table td { padding: .625rem .5rem; }
  .vx-calfest-row-actions { gap: 0; }
}

* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.vx-config-shell { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; gap: 1rem; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
@media (min-width: 640px) { .vx-config-shell { gap: 1.5rem; } }

.vx-config-header { display: flex; align-items: center; gap: .75rem; border-radius: var(--vx-radius-lg); }
.vx-config-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--vx-radius);
  background: rgba(85, 40, 99, .10);
  color: var(--vx-purple);
}
.vx-config-header .vx-title { font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.025em; }
@media (min-width: 640px) { .vx-config-header .vx-title { font-size: 1.25rem; line-height: 1.75rem; } }
@media (min-width: 768px) { .vx-config-header .vx-title { font-size: 1.5rem; line-height: 2rem; } }

.vx-config-subtitle { margin: .125rem 0 0; font-size: .875rem; line-height: 1.25rem; color: #9ca3af; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }

.vx-config-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@container vx-page-body (min-width: 640px) { .vx-config-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
@container vx-page-body (min-width: 1024px) { .vx-config-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@container vx-page-body (min-width: 1280px) { .vx-config-grid { grid-template-columns: repeat(4, 1fr); } }

.vx-config-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  cursor: pointer;
  border-radius: var(--vx-radius-lg);
  padding: .75rem;
  box-shadow: var(--vx-shadow-glass-sm);
  transition: box-shadow .3s ease, transform .3s ease;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
@media (min-width: 640px) { .vx-config-card { padding: 1.25rem; } }
.vx-config-card:hover { box-shadow: var(--vx-shadow-glass); transform: translateY(-2px); }
.vx-config-card:hover .vx-config-card-chevron { opacity: 1; }

.vx-config-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .75rem; }
@media (min-width: 640px) { .vx-config-card-top { margin-bottom: 1rem; } }

.vx-config-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--vx-radius);
}
@media (min-width: 640px) { .vx-config-card-icon { width: 44px; height: 44px; } }
.vx-config-card-icon--orange { background: rgba(252, 104, 33, .15); color: var(--vx-orange); }
.vx-config-card-icon--teal   { background: rgba(51, 203, 176, .15); color: var(--vx-teal-dark); }
.vx-config-card-icon--purple { background: rgba(85, 40, 99, .15);  color: var(--vx-purple); }

.vx-config-card-chevron { opacity: 0; margin-top: .125rem; flex-shrink: 0; transition: opacity .2s ease; }
.vx-config-card-chevron--orange { color: var(--vx-orange); }
.vx-config-card-chevron--teal   { color: var(--vx-teal); }
.vx-config-card-chevron--purple { color: var(--vx-purple); }

.vx-config-card-title { margin: 0 0 .25rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--vx-text); font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
@media (min-width: 640px) { .vx-config-card-title { font-size: 1rem; line-height: 1.5rem; } }
.vx-config-card-desc {
  margin: 0 0 .5rem;
  font-size: .625rem;
  line-height: 1rem;
  color: var(--vx-text-soft);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) { .vx-config-card-desc { font-size: .75rem; margin-bottom: .75rem; } }
.vx-config-card-badge { width: fit-content; }

.vx-config-system { border-radius: var(--vx-radius-lg); }
.vx-config-system-title { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--vx-text); font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
@media (min-width: 640px) { .vx-config-system-title { font-size: 1rem; line-height: 1.5rem; margin-bottom: 1rem; } }
.vx-config-system-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@container vx-page-body (min-width: 768px) { .vx-config-system-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.vx-config-system-tile { border-radius: var(--vx-radius); padding: .5rem 1rem; }
@media (min-width: 640px) { .vx-config-system-tile { padding: 1rem; } }
.vx-config-system-label { margin: 0 0 .25rem; font-size: .5625rem; line-height: 1rem; color: var(--vx-text-soft); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); }
@media (min-width: 640px) { .vx-config-system-label { font-size: .75rem; } }
.vx-config-system-value { margin: 0; font-size: .75rem; line-height: 1rem; font-weight: 600; color: #1f2937; font-family: var(--vx-font, 'Inter', system-ui, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .vx-config-system-value { font-size: .875rem; line-height: 1.25rem; } }

/* Exportación de Nómina */
.vx-payroll-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-payroll-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  flex-shrink: 0;
  padding: 1rem;
  border-radius: var(--vx-radius-lg);
}
@container vx-page-body (min-width: 768px) { .vx-payroll-filters { flex-direction: row; align-items: flex-end; } }

.vx-payroll-field { width: 100%; }
@container vx-page-body (min-width: 768px) { .vx-payroll-field { width: 11rem; } }
.vx-payroll-field .vx-label { display: block; margin-bottom: .375rem; }

.vx-payroll-clear-btn { width: 100%; padding: .5rem 1.25rem; white-space: nowrap; }
@container vx-page-body (min-width: 768px) { .vx-payroll-clear-btn { width: auto; } }

.vx-payroll-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--vx-radius-lg);
}

.vx-payroll-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  background: rgba(249, 250, 251, .3);
  border-bottom: .8px solid rgba(255, 255, 255, .4);
}

.vx-payroll-toolbar-title {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: #1f2937;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-payroll-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

.vx-payroll-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.vx-payroll-table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
.vx-payroll-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(249, 250, 251, .8);
}
.vx-payroll-table th {
  padding: .75rem 1rem;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03125rem;
  color: #9ca3af;
  border-bottom: .8px solid rgba(0, 0, 0, .05);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  white-space: nowrap;
}
.vx-payroll-table td {
  padding: .75rem 1rem;
  border-top: .8px solid rgba(0, 0, 0, .05);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  white-space: nowrap;
}
.vx-payroll-table tbody tr:first-child td { border-top: none; }
.vx-payroll-table td.vx-payroll-td-id { font-size: .75rem; font-weight: 600; color: var(--vx-purple); }
.vx-payroll-table td.vx-payroll-td-strong { font-size: .75rem; font-weight: 600; color: #374151; }
.vx-payroll-table td.vx-payroll-td-muted { font-size: .75rem; font-weight: 500; color: #4b5563; }
.vx-payroll-table td.vx-payroll-td-bold { font-size: .75rem; font-weight: 700; color: #374151; }
.vx-payroll-placeholder-row td {
  text-align: center;
  color: var(--vx-text-soft, #6b7280);
  font-style: italic;
}
@media (min-width: 640px) { .vx-config-system-value { font-size: .875rem; } }

/* Geocercas */
.vx-geofence-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 1rem; }

.vx-geofence-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.25rem;
  flex-wrap: wrap;
  border-radius: var(--vx-radius-lg, 1rem) !important;
}
.vx-geofence-header-heading { min-width: 0; }
.vx-geofence-subtitle {
  margin: .125rem 0 0;
  font-size: .8125rem;
  color: var(--vx-text-soft, #6b7280);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-geofence-add-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.vx-geofence-add-btn { display: inline-flex; align-items: center; gap: .375rem; }

.vx-geofence-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 1rem;
}
@container vx-page-body (min-width: 1024px) {
  .vx-geofence-body {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "list map" "list detail";
    height: 100%;
  }
  .vx-geofence-list-panel { grid-area: list; }
  .vx-geofence-map-panel { grid-area: map; }
  .vx-geofence-detail { grid-area: detail; }
}

.vx-geofence-list-panel {
  display: flex;
  flex-direction: column;
  height: 38vh;
  min-height: 0;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: .8px solid rgba(255, 255, 255, .60);
  box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85, 40, 99, .10));
  border-radius: var(--vx-radius-lg, 1rem);
  overflow: hidden;
}

.vx-geofence-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.vx-geofence-list-empty {
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  font-size: .75rem;
  font-style: italic;
  color: #9ca3af;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-geofence-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: .8px solid rgba(0, 0, 0, .04);
  cursor: pointer;
  transition: background-color .15s ease;
}
.vx-geofence-item:last-child { border-bottom: none; }
.vx-geofence-item:hover { background: rgba(0, 0, 0, .025); }
.vx-geofence-item--selected {
  background: rgba(51, 203, 176, .08);
  border-left: 1.6px solid var(--vx-teal, #33cbb0);
  padding-left: calc(1rem - 1.6px);
}

.vx-geofence-item-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--vx-radius-sm, .5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vx-geofence-item-icon--teal { background: rgba(51, 203, 176, .15); color: var(--vx-teal-dark, #25a08a); }
.vx-geofence-item-icon--orange { background: rgba(252, 104, 33, .15); color: var(--vx-orange-dark, #d9531a); }

.vx-geofence-item-info { flex: 1 1 auto; min-width: 0; }
.vx-geofence-item-name {
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-geofence-item-type {
  margin: .125rem 0 0;
  font-size: .75rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-geofence-item-input { padding: .25rem .5rem; font-size: .875rem; }
.vx-geofence-item-dot {
  flex-shrink: 0;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--vx-teal, #33cbb0);
}

.vx-geofence-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-top: .8px solid rgba(255, 255, 255, .40);
  flex-shrink: 0;
}
.vx-geofence-list-count {
  margin: 0;
  font-size: .75rem;
  color: var(--vx-text-soft, #6b7280);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-geofence-drawing-hint {
  margin: 0;
  padding: .5rem .75rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  color: var(--vx-orange-dark, #d9531a);
  background: rgba(252, 104, 33, .10);
  border-top: .8px solid rgba(252, 104, 33, .20);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-geofence-map-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 62vh;
  min-height: 0;
}
@container vx-page-body (min-width: 1024px) {
  .vx-geofence-list-panel { height: 100%; }
  .vx-geofence-map-panel { height: 100%; }
}

.vx-geofence-map-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  overflow: hidden;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: .8px solid rgba(255, 255, 255, .60);
  box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85, 40, 99, .10));
  border-radius: var(--vx-radius-lg, 1rem);
}

.vx-geofence-map { width: 100%; height: 100%; }

.vx-geofence-search-wrap {
  position: absolute;
  z-index: 5;
  top: .75rem;
  left: .75rem;
  width: min(280px, calc(100% - 1.5rem));
}
.vx-geofence-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.vx-geofence-search.vx-input {
  padding-left: 2rem;
  background: rgba(255, 255, 255, .90);
  box-shadow: var(--vx-shadow-glass-sm, 0 4px 16px 0 rgba(85, 40, 99, .08));
}

.vx-geofence-map-btn {
  position: absolute;
  z-index: 5;
  right: .75rem;
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem;
  border: none;
  border-radius: var(--vx-radius, .75rem);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--vx-teal-dark, #25a08a);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  transition: background-color .15s ease;
}
.vx-geofence-map-btn:hover { background: rgba(255, 255, 255, .90); }
.vx-geofence-map-btn--top { top: .75rem; }
.vx-geofence-map-btn--bottom { bottom: .75rem; padding: .5rem .75rem; }

.vx-geofence-detail {
  flex-shrink: 0;
  padding: 1.25rem;
  border-radius: var(--vx-radius-lg, 1rem) !important;
}
.vx-geofence-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.vx-geofence-detail-heading { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.vx-geofence-detail-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--vx-radius, .75rem); }
.vx-geofence-detail-name {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--vx-text, #111827);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-geofence-detail-id {
  margin: .125rem 0 0;
  font-size: .75rem;
  color: #9ca3af;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-geofence-detail-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.vx-geofence-detail-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.vx-geofence-detail-tile { padding: .75rem; border-radius: var(--vx-radius, .75rem); }
.vx-geofence-detail-tile-value {
  margin: .25rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: #1f2937;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-geofence-detail--empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  color: #d1d5db;
}
.vx-geofence-detail--empty p {
  margin: 0;
  font-size: .875rem;
  color: var(--vx-text-soft, #6b7280);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-geofence-modal-label { display: block; margin-bottom: .375rem; }
.vx-geofence-modal-error {
  margin: .375rem 0 0;
  font-size: .75rem;
  color: #dc2626;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}
.vx-geofence-confirm-modal { max-width: 26rem; }
.vx-geofence-confirm-title {
  margin: 0;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--vx-text, #111827);
}

/* Identificación biométrica */
.vx-biometric-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1 1 auto;
  width: 100%;
}

.vx-biometric-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--vx-radius-lg, 1rem);
}

.vx-biometric-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1rem;
}

.vx-biometric-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 28rem;
}

.vx-biometric-hint {
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
  font-size: .8125rem;
  color: var(--vx-text-soft, #6b7280);
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-biometric-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-biometric-selected__name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--vx-text, #111827);
}

.vx-biometric-selected__id {
  font-size: .75rem;
  color: var(--vx-text-soft, #6b7280);
}

.vx-biometric-result {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  border-radius: var(--vx-radius, .75rem);
  border: 1px solid transparent;
  font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-biometric-result i {
  flex-shrink: 0;
  margin-top: .1rem;
  font-size: 1rem;
}

.vx-biometric-result__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .8125rem;
}

.vx-biometric-result__meta {
  color: var(--vx-text-soft, #6b7280);
  font-size: .75rem;
}

.vx-biometric-result--match {
  background: rgba(51, 203, 176, .10);
  border-color: rgba(51, 203, 176, .25);
  color: var(--vx-teal-dark, #25a08a);
}

.vx-biometric-result--nomatch {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, .20);
  color: #dc2626;
}

.vx-biometric-results {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.vx-biometric-results__title {
  margin: 0;
  font-size: .9375rem;
}

/* Acciones biométricas en el encabezado del detalle de Empleados */
.vx-employee-biometrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  margin-left: auto;
}

.vx-employee-biometrics .vx-btn {
  white-space: nowrap;
}