:root {
  --font-body: "DM Sans", sans-serif;
  --font-heading: Manrope, sans-serif;
  --font-brand: Manrope, sans-serif;
  --font-compact: "DM Sans", sans-serif;

  --font-size-5xs: 8px;
  --font-size-4xs: 9px;
  --font-size-3xs: 10px;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 11px;
  --font-size-md: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;
  --font-size-3xl: 17px;
  --font-size-4xl: 18px;
  --font-size-5xl: 20px;
  --font-size-6xl: 22px;
  --font-size-page-title: 27px;
  --font-size-hero: 30px;

  --line-height-tight: 1.15;
  --line-height-snug: 1.25;
  --line-height-compact: 1.35;
  --line-height-normal: 1.4;
  --line-height-ui: 1.45;
  --line-height-body: 1.5;
  --line-height-relaxed: 1.55;
  --line-height-copy: 1.6;

  --font-weight-regular: 500;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Semantic colors */
  --text-primary: #19204b;
  --text-secondary: #38406d;
  --text-muted: #69708e;
  --text-subtle: #9298b1;
  --text-on-primary: #fff;

  --surface-page: #f6f7fb;
  --surface-primary: #fff;
  --surface-soft: #fafbfe;
  --surface-accent: #eaf0ff;
  --border-default: #e6e8f0;
  --border-focus: #91a9ff;

  --color-primary: #2c54d8;
  --color-primary-hover: #2449c4;
  --color-primary-soft: #eaf0ff;
  --color-primary-border: #d7e2ff;
  --color-accent: #6e5ae8;
  --color-navy: #1d285e;

  --status-success: #15866b;
  --status-success-bg: #e8f7f1;
  --status-warning: #9b6405;
  --status-warning-bg: #fff5df;
  --status-danger: #b33d52;
  --status-danger-bg: #fff0f2;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 38px;
  --space-14: 46px;

  /* Radius */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-control: 9px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-card: 18px;
  --radius-modal: 20px;
  --radius-hero: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 4px 10px rgba(34, 43, 88, 0.04);
  --shadow-md: 0 8px 28px rgba(26, 34, 78, 0.07);
  --shadow-lg: 0 18px 52px rgba(24, 34, 83, 0.17);
  --shadow-modal: 0 20px 70px rgba(17, 26, 71, 0.28);
  --focus-ring: 0 0 0 3px #ecf1ff;

  /* Controls / layout */
  --control-height-sm: 31px;
  --control-height-md: 39px;
  --control-height-lg: 44px;
  --icon-control-size: 38px;
  --content-max: 1520px;
  --modal-max-md: 540px;
  --modal-max-lg: 660px;

  /* Motion */
  --transition-fast: 0.17s ease;
  --transition-base: 0.18s ease;
  --transition-view: 0.22s ease;
  --transition-layout: 0.25s ease;

  /* Legacy aliases kept for JS/CSS compatibility during migration */
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --muted: var(--text-muted);
  --muted-2: var(--text-subtle);
  --line: var(--border-default);
  --canvas: var(--surface-page);
  --surface: var(--surface-primary);
  --blue: var(--color-primary);
  --blue-2: var(--color-primary-soft);
  --blue-3: var(--color-primary-border);
  --purple: var(--color-accent);
  --green: var(--status-success);
  --green-bg: var(--status-success-bg);
  --amber: var(--status-warning);
  --amber-bg: var(--status-warning-bg);
  --red: var(--status-danger);
  --red-bg: var(--status-danger-bg);
  --navy: var(--color-navy);
  --shadow: var(--shadow-md);
  --radius: var(--radius-card);
  --padding-card: 24px;
  --padding-alert: 20px;

  --gap-0: 0;
  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 1rem;
  --gap-4: 1.5rem;
  --gap-5: 3rem;
}

* {
  box-sizing: border-box;
}
html {
  min-width: 320px;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
.pointer,
button,
select,
.field:has(select),
#view-ddp .ddp-area-filter-control *,
.directory-area-filter *,
#view-vacations .team-calendar-select *,
#view-receipts .receipt-year-select *,
.crm-select-filter *,
#view-directory-profile .directory-month-control,
#directoryRecordModal .directory-month-control,
.naiades-select-click-area,
#view-vacations
  #vacation-panel-saldos
  .vacation-balances-scroll
  :is(button, a, label),
#view-vacations .vacation-administration-scroll :is(select, button, a, label) {
  cursor: pointer;
}
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 24px 14px 16px;
  display: flex;
  flex-direction: column;
  z-index: 15;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 26px;
}
.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: inset 0 -10px 20px rgba(67, 116, 255, 0.4);
}
.brand-mark:before,
.brand-mark:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
}
.brand-mark:before {
  width: 29px;
  height: 29px;
  left: 8px;
  top: 8px;
}
.brand-mark:after {
  width: 19px;
  height: 19px;
  left: -5px;
  top: 1px;
  border-color: #9ec2ff;
}
.brand-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.5px;
}
.brand-subtitle {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin-top: 1px;
}
.nav-section {
  margin: 12px 0 4px;
  padding: 0 12px;
  font-size: var(--font-size-xs);
  color: var(--muted-2);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* [AGRUPADO-002] Estilos 100% idénticos agrupados. Origen: líneas 167, 692, 1510, 4401, 5422, 7441, 7724, 7812, 7945, 8046, 8927. */
.nav,
#view-procedures .procedure-section-links,
.section-button,
#view-vacations .vacation-team-person > div,
#view-vacations .vacation-administration-person > div,
#vacationBalanceDetailModal .vacation-balance-history-table .management-dates,
#view-vacation-balance-detail .vacation-balance-history-table .management-dates,
#view-absences .absence-team-person > div,
#vacationLiquidationReviewModal .vacation-liquidation-nonliquidable > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
  text-decoration: none;
}
.nav-item i {
  width: 17px;
  height: 17px;
  color: #737b9f;
  stroke-width: 2;
}
.nav-item:hover {
  background: #f5f7fc;
  color: var(--blue);
}
.nav-item.active {
  background: var(--blue-2);
  color: var(--blue);
  font-weight: var(--font-weight-bold);
}
/* [AGRUPADO-003] Estilos 100% idénticos agrupados. Origen: líneas 175, 595, 888, 1671, 1755, 2518, 2893, 2895, 3007, 3009, 3220, 3260, 3262, 3814, 3842, 3887, 4107, 4394, 4396, 5014, 5902, 6897, 9176, 9211. */
.nav-item.active i,
.request-summary-row.remaining strong,
#view-performance .performance-cycle-foot strong,
#view-hours .hours-copy-menu button:hover small,
#view-hours .hours-preload-menu button:hover small,
#view-performance .performance-select-filter > i:first-child,
#directoryPersonModal .directory-profile-nav button:hover i,
#directoryPersonModal .directory-profile-nav button.active i,
#view-directory-profile .directory-profile-nav button:hover i,
#view-directory-profile .directory-profile-nav button.active i,
#view-directory-profile.is-self-profile .directory-profile-access-note i,
#view-vacations .vacation-alert i,
#view-vacations .vacation-alert strong,
#view-vacations
  .vacation-request-summary.has-conflict
  .request-summary-row.remaining
  strong,
#absenceDetailModal .absence-detail-progress-step.active strong,
#requestDetailModal .absence-detail-progress-step.active strong,
#absenceRequestModal .absence-request-progress-step.active strong,
#view-directory-profile .directory-leave-summary-card.primary strong,
#view-procedures .procedure-document-select:hover > i,
#view-procedures .procedure-document-select.active > i,
#view-procedures .procedure-document-select.active small,
.objective-score-table td:last-child strong,
#view-support .support-filter-tab.active,
#vacationModal .vacation-linked-calendar-day.is-linked .vacation-day-today,
.intranet-date-picker-day.is-linked .intranet-date-picker-today,
#view-home .home-launch-full-link a:hover {
  color: var(--blue);
}
.nav-badge {
  margin-left: auto;
  min-width: 19px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  font-size: var(--font-size-xs);
  text-align: center;
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.help-card {
  padding: 12px;
  background: #f5f7ff;
  border-radius: 13px;
  margin: 0 4px 11px;
}
.help-card strong {
  font-size: var(--font-size-md);
  display: block;
  margin-bottom: 3px;
}
.help-card p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  line-height: var(--line-height-compact);
  margin: 0 0 9px;
}
.tiny-link {
  font-size: var(--font-size-sm);
  color: var(--blue);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.profile-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 12px;
}
.profile-mini:hover {
  background: #f6f7fb;
}
.avatar img,
.avatar-span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.avatar-span {
  color: #fff !important;
  display: grid;
  place-items: center;
  font-size: var(--font-size-md);
}
/* [AGRUPADO-004] Estilos 100% idénticos agrupados. Origen: líneas 185, 381, 2130. */
.avatar.small,
.org-card .avatar,
.profile-top-trigger .avatar {
  width: 30px;
  height: 30px;
}
/* [AGRUPADO-005] Estilos 100% idénticos agrupados. Origen: líneas 187, 242, 287, 331, 342, 411, 532, 690, 761, 891, 907, 917, 1080, 1135, 1508, 1677, 2108. */
.profile-mini strong,
.hero-meta strong,
.team-person strong,
.line strong,
.ddp-step strong,
.list-copy strong,
#view-vacations .vacation-bag-copy strong,
#view-absences .absence-balance-copy strong,
#view-policies .policies-home-meta strong,
#view-performance .performance-brief-card strong,
.radar-legend strong,
.evaluation-row strong,
#view-vacations .calendar-team-identity strong,
#view-vacations .timeline-intro strong,
.hours-copy-preview strong {
  font-size: var(--font-size-md);
  display: block;
}
/* [AGRUPADO-006] Estilos 100% idénticos agrupados. Origen: líneas 188, 288, 305, 332, 343, 403, 965, 1737. */
.profile-mini span,
.team-person span,
.balance-card span,
.line span,
.table-person span,
.crm-metric small,
#view-hours .timesheet-add-project-copy {
  font-size: var(--font-size-xs);
  color: var(--muted);
}
/* [AGRUPADO-007] Estilos 100% idénticos agrupados. Origen: líneas 189, 551, 1109, 1247, 1293, 1936, 2035, 2197, 2654, 2658, 3779, 3810, 3838, 3852, 3863, 3883, 5124, 5155, 5419, 5791, 5917, 6048, 7489, 7519, 7866, 7983, 8389. */
.main,
.side-panel,
.vacation-submit-confirmation > div,
#vacationModal .request-date-step > div,
.vacation-detail-date-step > div,
#view-org .org-copy,
#view-directory .directory-area-group,
#view-ddp .ddp-main-card,
#view-procedures .procedure-document-main,
#view-procedures .procedure-document-meta,
#absenceRequestModal .absence-request-date-step > div,
#absenceDetailModal .absence-detail-progress-step > div,
#requestDetailModal .absence-detail-progress-step > div,
#requestDetailModal .request-detail-adjustment-observation > div,
#absenceDetailModal .absence-detail-adjustment-observation > div,
#absenceRequestModal .absence-request-progress-step > div,
#view-objectives .objectives-q3-save-text,
#view-documentation .documentation-document-main,
.document-aside-head > div,
#view-assets .asset-ticket-copy,
#view-support .support-ticket-copy,
#view-home .home-alert-copy,
#teamVacationReviewModal .team-vacation-review-request,
#teamVacationReviewModal .team-vacation-nearby,
#teamVacationReviewModal .team-vacation-nearby-copy,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-intro > div,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-intro > div,
#view-about .about-values-shell {
  min-width: 0;
}
.topbar {
  min-height: 76px;
  padding: 0 38px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.83);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(15px);
}
.crumb {
  font-size: var(--font-size-base);
  color: var(--muted);
}
.crumb strong {
  color: var(--ink);
  font-weight: var(--font-weight-bold);
}
/* [AGRUPADO-008] Estilos 100% idénticos agrupados. Origen: líneas 196, 285, 1077, 7723, 8215. */
.top-actions,
.team-person,
#view-vacations .calendar-team-identity,
#view-vacations .vacation-administration-person,
.request-denial-actions > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.search-top {
  height: 38px;
  width: 250px;
  border: 1px solid var(--line);
  background: #fafbfe;
  border-radius: 10px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.search-top i,
.close-btn i,
.button--primary i,
.button--primary svg,
.button--secondary i,
.button--secondary svg,
.button--sm i,
.button--sm svg,
.primary-btn svg,
.secondary-btn i,
.secondary-btn svg,
.small-btn i,
.small-btn svg,
#view-vacations .team-calendar-select i,
#view-vacations .calendar-team-icon i,
#vacationModal .date-picker-trigger i,
.app-date-control .date-picker-trigger i,
#view-policy-transport .transport-policy-options i,
#view-hours .timesheet-week-nav i,
#view-directory .directory-open-icon i,
.directory-month-picker-nav i,
#view-absences .absence-type-icon i,
.absence-benefit-notice > span i,
#view-directory-profile .directory-leave-item-icon i,
#view-objectives .objectives-period-nav i,
#view-home .home-quick-icon i,
#view-home .home-notification-icon i,
#confirmTeamVacationApprovalModal .vacation-approval-confirmation-icon i,
#view-vacations .vacation-administration-filter-icon i,
#vacationBalanceDetailModal .vacation-balance-adjustment-icon i,
.request-review-section-head > span i {
  width: 16px;
  height: 16px;
}
.search-top input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--ink);
}
.icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
/* [AGRUPADO-010] Estilos 100% idénticos agrupados. Origen: líneas 201, 772, 2283. */
.icon-button:hover,
#view-policies .policy-filter.active,
#view-ddp .ddp-detail-tab.active {
  border-color: var(--blue-3);
  color: var(--blue);
  background: var(--blue-2);
}
/* [AGRUPADO-011] Estilos 100% idénticos agrupados. Origen: líneas 202, 851, 1778, 2652, 5154, 5888, 6047, 6428, 6495, 7566, 8316, 8371, 8798. */
.icon-button i,
.policy-read-popup-icon i,
#view-hours .hours-template-card-icon i,
#view-procedures .procedure-document-icon i,
#view-documentation .documentation-document-icon i,
#view-support .support-summary-icon i,
#view-home .home-alert-icon i,
#absenceTeamReviewModal .absence-team-observation-head > span i,
#requestTeamReviewModal .request-observation-head > span i,
#teamVacationReviewModal .team-vacation-denial-head > span i,
#requestTeamReviewModal .request-denial-head > span i,
#view-about .about-section-nav-mark i,
#teamRequestActionModal .team-request-action-head > span i {
  width: 18px;
  height: 18px;
}
.notification-dot {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 7px;
  height: 7px;
  background: #e55772;
  border: 2px solid white;
  border-radius: 50%;
}
.content {
  max-width: var(--content-max);
  padding: 34px 38px 46px;
  margin: 0 auto;
  animation: fade 0.22s ease;
}
/* [AGRUPADO-012] Estilos 100% idénticos agrupados. Origen: líneas 206, 1476, 1662, 1746, 1921, 2640, 3207, 3317, 3728, 4670, 5594, 5925, 6676, 7394, 8149, 8158, 8217, 8585. */
.view.active,
#view-transport .transport-filter-dropdown.is-open .transport-filter-menu,
#view-hours .hours-copy-dropdown.is-open .hours-copy-menu,
#view-hours .hours-preload-dropdown.is-open .hours-preload-menu,
#view-org .org-area-header span,
#view-org .org-section-header span,
#view-policies .policies-home-layout,
#view-procedures .procedures-layout,
#view-reimbursements .transport-filter-dropdown.is-open .transport-filter-menu,
#transportRequestModal .transport-step-panel.active,
#view-absences .absence-panels.active,
#view-objectives .objectives-lead-layout,
#assetIncidentModal .asset-incident-step-panel.active,
#view-support .support-empty.is-visible,
#view-vacation-balance-detail .vacation-balance-card-meta span,
#view-vacations .transport-filter-dropdown.is-open .transport-filter-menu,
#view-absences .transport-filter-dropdown.is-open .transport-filter-menu,
#view-assets .transport-filter-dropdown.is-open .transport-filter-menu,
#view-transport .request-module-panel.active,
#view-reimbursements .request-module-panel.active,
.request-team-panel.active,
.request-team-empty.show,
#view-transport .transport-agenda-empty.show {
  display: block;
}
@keyframes fade {
  from {
    opacity: 0.4;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.eyebrow {
  font-size: var(--font-size-sm);
  color: var(--blue) !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: var(--font-weight-extrabold);
  margin: 0 0 6px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
#absenceDetailModal .absence-detail-adjustment,
#requestDetailModal .absence-detail-adjustment,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card
  .directory-readonly-grid,
#view-absences .absence-team-card {
  margin-top: 0;
}
h1,
h2,
.brand-title,
.month-title,
.intranet-date-picker-month,
.timeline-month-title,
#view-about .identity-font-card.sora {
  font-family: var(--font-heading);
}
h3,
h4,
h5,
h6,
#view-about .about-section-nav-head strong,
#view-about .identity-font-card.manrope {
  font-family: var(--font-body);
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-tight);
  letter-spacing: -1.1px;
  margin: 0;
  color: var(--ink);
}
.heading {
  font-size: var(--font-size-base);
  color: var(--muted);
  margin: 8px 0 0;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  letter-spacing: -0.45px;
  margin: 0;
}
h3 {
  font-size: var(--font-size-base);
  margin: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(285px, 0.9fr);
  gap: 20px;
}
.hero {
  min-height: 224px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(120deg, #1d285e 0%, #2b4cc7 75%, #4e80ea);
  padding: 30px;
  position: relative;
  color: #fff;
}
.hero:before,
.hero:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.hero:before {
  width: 320px;
  height: 320px;
  right: -85px;
  bottom: -145px;
}
.hero:after {
  width: 460px;
  height: 460px;
  right: -175px;
  bottom: -270px;
  border-color: rgba(255, 255, 255, 0.12);
}
.hero .eyebrow {
  color: #bcd2ff;
}
.hero h1 {
  color: #fff;
  max-width: 460px;
  font-size: var(--font-size-hero);
  position: relative;
  z-index: 1;
}
.hero p {
  position: relative;
  z-index: 1;
  color: #e1ebff;
  font-size: var(--font-size-base);
  max-width: 480px;
  line-height: var(--line-height-relaxed);
  margin: 10px 0 18px;
}
.hero .primary-btn {
  background: #fff;
  color: var(--blue);
  position: relative;
  z-index: 1;
}
.hero .primary-btn:hover {
  background: #edf3ff;
}
.hero-meta {
  position: absolute;
  right: 30px;
  top: 30px;
  text-align: right;
  z-index: 2;
}

.hero-meta span {
  font-size: var(--font-size-sm);
  color: #d6e3ff;
}

.quick-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
/* [AGRUPADO-017] Estilos 100% idénticos agrupados. Origen: líneas 247, 387. */
.quick-card h2,
.org-children .org-card strong {
  margin-bottom: 3px;
}
.quick-card > p {
  font-size: var(--font-size-md);
  color: var(--muted);
  margin: 0 0 14px;
}
.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.progress-row strong {
  font-family: var(--font-body);
  font-size: var(--font-size-page-title);
  letter-spacing: -1px;
}
/* [AGRUPADO-018] Estilos 100% idénticos agrupados. Origen: líneas 251, 303, 405. */
.progress-row span,
.balance-card .balance-label,
.receipt-total span {
  font-size: var(--font-size-sm);
  color: var(--muted);
}
.progress {
  height: 8px;
  border-radius: 99px;
  background: #eff1f7;
  overflow: hidden;
}
.progress > span {
  display: block;
  width: 64%;
  height: 100%;
  background: linear-gradient(90deg, #2c54d8, #6c82e8);
  border-radius: inherit;
}
.quick-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  font-size: var(--font-size-sm);
  color: var(--muted);
}
/* .link-arrow {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
} */
/* [AGRUPADO-019] Estilos 100% idénticos agrupados. Origen: líneas 256, 350, 709, 1292, 1527, 1789, 1994, 2506, 2530, 4414, 5179, 5434, 6303, 6357, 6359, 6369, 6413, 6466, 7450, 7487, 7588, 7680, 7829, 7909, 8029, 8032, 8051, 8062, 8291, 8304, 8343, 8382, 8404, 8528, 8891, 8904, 8922, 9212. */
/* .link-arrow i, */
.filter-chip i,
.date-flow-icon i,
#view-hours .template-action i,
#view-directory .directory-view-toggle button i,
#view-performance .evaluation-feedback-state i,
#view-performance .performance-cycle-entry footer i,
#view-procedures .procedure-version-chip i,
.document-visibility-fixed i,
#view-about .identity-outline-cta i,
#absenceTeamReviewModal .ghost-observe-btn i,
#requestTeamReviewModal .ghost-observe-btn i,
#absenceTeamReviewModal .observe-confirm-btn i,
#requestTeamReviewModal .observe-confirm-btn i,
#view-vacations .vacation-team-resolved i,
#teamVacationReviewModal .team-vacation-review-eyebrow i,
#teamVacationReviewModal .team-vacation-denial-actions .danger-btn i,
#view-vacations .vacation-administration-range-fields .ghost-btn i,
#vacationBalanceDetailModal .vacation-balance-add-days-button i,
#view-vacation-balance-detail .vacation-balance-add-days-button i,
#view-absences .absence-admin-tab > i,
#view-absences .absence-admin-kicker i,
#view-absences .absence-team-document i,
#view-absences .absence-team-reviewer i,
#view-absences .absence-team-resolved i,
#view-transport .request-team-resolved i,
#view-reimbursements .request-team-resolved i,
#requestTeamReviewModal #denyRequestTeamReview i,
#requestTeamReviewModal #approveRequestTeamReview i,
#requestTeamReviewModal #confirmRequestTeamDenial i,
#view-about .about-section-link > i,
#view-about .about-carousel-drag-affordance i,
#view-transport .transport-planning-tab i,
#view-vacations .vacation-liquidation-review i,
#vacationLiquidationReviewModal .vacation-liquidation-review-kicker i,
#vacationLiquidationReviewModal .vacation-liquidation-actions button i,
#view-home .home-launch-full-link a i,
#view-home .home-launch-full-link a svg {
  width: 14px;
  height: 14px;
}
.stat-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.stat-card {
  padding: 17px 18px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--line);
}
.stat-icon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: var(--blue-2);
  display: grid;
  place-items: center;
  color: var(--blue);
  margin-bottom: 17px;
}
/* [AGRUPADO-020] Estilos 100% idénticos agrupados. Origen: líneas 260, 277, 290, 319, 940, 987, 1027, 1055, 1107, 1165, 1245, 1291, 1337, 2426, 3734, 3777, 5789, 5886, 5915, 5941, 6032, 6060, 6073. */
.stat-icon.green,
.task-icon.green,
.absence.available,
.event.green,
.time-type.active,
.procedure-scope.area,
.confirmation-icon--success,
#view-vacations .own-absence,
.detail-step.done i,
#vacationModal .request-date-icon.return,
.date-flow-icon.return,
#view-vacations .own-absence-bar,
#view-crm .crm-area-pill.digital,
#view-absences .absence-type-icon.green,
#absenceRequestModal .absence-request-date-icon.return,
#view-assets .asset-ticket-icon.green,
#view-support .support-summary-icon.green,
#view-support .support-ticket-icon.responded,
.support-message.is-team .support-message-avatar,
#view-home .home-direct-action .home-direct-icon.green,
#view-home .home-quick-icon.green,
#view-home .home-notification-icon.green {
  background: var(--green-bg);
  color: var(--green);
}
/* [AGRUPADO-021] Estilos 100% idénticos agrupados. Origen: líneas 261, 940, 1028, 1244, 1290, 2425, 3735, 3776, 6033, 6045, 6061. */
.stat-icon.amber,
.time-type.commercial,
#vacationModal .request-date-icon.end,
.date-flow-icon.end,
#view-crm .crm-area-pill.events,
#view-absences .absence-type-icon.amber,
#absenceRequestModal .absence-request-date-icon.end,
#view-home .home-direct-action .home-direct-icon.amber,
#view-home .home-alert-icon.amber,
#view-home .home-quick-icon.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
/* [AGRUPADO-022] Estilos 100% idénticos agrupados. Origen: líneas 262, 278, 324, 363, 689, 1038, 1507, 2910, 2951, 3024, 3070, 3268, 3515, 3611, 4381, 5916, 6035, 7510, 7865, 7982, 8115. */
.stat-icon i,
.task-icon i,
.more i,
#directoryPersonModal .directory-profile-section-icon i,
#directoryPersonModal .directory-asset-card i,
#view-directory-profile .directory-profile-section-icon i,
#view-directory-profile .directory-asset-card i,
.vacation-cancellation-preview-icon i,
#view-directory-profile .directory-document-icon i,
.documentation-assistant-launcher i,
#view-procedures .procedure-side-icon i,
#view-support .support-ticket-icon i,
#view-home .home-direct-action .home-direct-icon i,
#teamVacationReviewModal .team-vacation-nearby-head > span i,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-icon i,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-icon i,
#absenceTeamReviewModal .absence-team-denial-head i {
  width: 17px;
  height: 17px;
}
.stat-label {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin-bottom: 5px;
}
.stat-value {
  font-family: var(--font-body);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.6px;
}
/* [AGRUPADO-023] Estilos 100% idénticos agrupados. Origen: líneas 265, 2332. */
.stat-detail,
#view-ddp .ddp-competencies-card .section-head p {
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: 4px;
}
.dashboard-lower {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 20px;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
/* [AGRUPADO-024] Estilos 100% idénticos agrupados. Origen: líneas 268, 371, 419, 949, 1974, 2056, 2435, 6024. */
.section-head p,
.org-title-row p,
.modal-head p,
.hours-panel-head p,
.org-person-modal-hero p,
.directory-person-modal-hero p,
.crm-detail-hero p,
#view-home .home-section-head p {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  color: var(--muted);
}
/* [AGRUPADO-025] Estilos 100% idénticos agrupados. Origen: líneas 269, 1757, 2041, 2641, 5146. */
.task-list,
.preload-strategy-list,
#view-directory .directory-area-group-list,
#view-policies .policies-grid.policies-document-list,
#view-procedures .procedures-grid.procedures-document-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #edf0f6;
  border-radius: 13px;
  transition: 0.17s;
  background: #fff;
}
.task:hover {
  border-color: #d7e0fb;
  transform: translateY(-1px);
}
.task-icon {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--amber-bg);
  color: var(--amber);
}
/* [AGRUPADO-026] Estilos 100% idénticos agrupados. Origen: líneas 276, 283, 940, 987, 1026, 1106, 1131, 1336, 1396, 1404, 1481, 1667, 1751, 1787, 1996, 2001, 2424, 2894, 3008, 3212, 3217, 3449, 4395, 4595, 5788, 6046, 6074, 7320, 7342, 7403. */
.task-icon.blue,
.task-status.blue,
.time-type.internal,
.procedure-scope.global,
#view-vacations .team-absence,
#view-vacations .calendar-view-toggle button.active,
#view-vacations .team-absence-bar,
#view-vacations .calendar-nav button:not(:disabled):hover,
#view-receipts .receipt-year-select:hover,
#view-transport .transport-filter-menu button:hover,
#view-transport .transport-filter-menu button.active,
#view-hours .hours-copy-menu button:hover,
#view-hours .hours-preload-menu button:hover,
#view-hours .template-action:hover,
#view-directory .directory-view-toggle button.active,
#view-directory .directory-person-card:hover .directory-open-icon,
#view-crm .crm-area-pill.brand,
#directoryPersonModal .directory-profile-nav button.active,
#view-directory-profile .directory-profile-nav button.active,
#view-reimbursements .transport-filter-menu button:hover,
#view-reimbursements .transport-filter-menu button.active,
.profile-dropdown .profile-dropdown-my-data:hover,
.directory-month-picker-nav:hover,
#view-procedures .procedure-document-select.active,
#view-objectives .objectives-quarter-toggle button.active,
#view-assets .asset-ticket-icon.blue,
#view-home .home-alert-icon.blue,
#view-home .home-notification-icon.blue,
.profile-dropdown .profile-dropdown-support:hover,
#view-support .support-filter-menu button:hover,
#view-support .support-filter-menu button.active,
#view-vacations .transport-filter-menu button:hover,
#view-vacations .transport-filter-menu button.active,
#view-absences .transport-filter-menu button:hover,
#view-absences .transport-filter-menu button.active,
#view-assets .transport-filter-menu button:hover,
#view-assets .transport-filter-menu button.active {
  background: var(--blue-2);
  color: var(--blue);
}

/* [AGRUPADO-027] Estilos 100% idénticos agrupados. Origen: líneas 279, 531, 827, 852, 1561, 1799, 2497, 2853, 3476, 3518, 3753, 4045, 4114, 4222, 4436, 5445, 7835, 8514. */
.task-copy,
.list-copy,
#view-vacations .vacation-bag-copy,
#view-absences .absence-balance-copy,
.policy-read-popup-copy,
.template-preview-item div,
#view-performance .evaluation-row > div,
.modal-evaluation .evaluation-reference > div,
#view-directory-profile .directory-record-card-head > strong,
#view-directory-profile .directory-document-copy,
.absence-benefit-notice div,
#view-hours .timesheet-period-control > span,
#view-directory-profile .directory-leave-item > div,
#view-procedures .procedure-questions-copy,
#vacationBalanceDetailModal .vacation-balance-adjustment-head > div,
#requestTeamReviewModal .transport-day-context-copy {
  flex: 1;
  min-width: 0;
}
.task-copy strong {
  font-size: var(--font-size-md);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* [AGRUPADO-028] Estilos 100% idénticos agrupados. Origen: líneas 281, 926. */
.task-copy span,
.timesheet-summary span {
  font-size: var(--font-size-sm);
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.task-status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--amber-bg);
  color: var(--amber);
  white-space: nowrap;
}

/* [AGRUPADO-029] Estilos 100% idénticos agrupados. Origen: líneas 284, 2567. */
.team-list,
.performance-ddp-modal-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-person .avatar {
  width: 31px;
  height: 31px;
  font-size: var(--font-size-xs);
}

.absence {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--red);
  background: var(--red-bg);
  border-radius: 7px;
  padding: 4px 7px;
  font-weight: var(--font-weight-bold);
}

.notice {
  margin-top: 16px;
  padding: 12px;
  background: #fbfcff;
  border: 1px solid #e1e6f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
  box-shadow: 0 1px 2px rgba(27, 39, 89, 0.025);
}
/* [AGRUPADO-030] Estilos 100% idénticos agrupados. Origen: líneas 296, 1849, 3508, 3626, 5475. */
.notice i,
#view-hours .timesheet-period-control > i,
#view-directory-profile .directory-documents-subtitle i,
.documentation-assistant-chat-context i,
.objectives-privacy-note i {
  width: 16px;
  height: 16px;
  color: var(--blue);
  flex: none;
}
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
}
.module-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin-bottom: 20px;
  padding-bottom: 2px;
}

.balance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.balance-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.balance-card strong {
  font-family: var(--font-body);
  font-size: 26px;
  display: block;
  letter-spacing: -0.9px;
  margin-top: 7px;
}

.calendar-shell {
  padding: 18px 20px;
}
.calendar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.month-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
}
.calendar-nav {
  display: flex;
  gap: 4px;
}
.calendar-nav button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
/* [AGRUPADO-031] Estilos 100% idénticos agrupados. Origen: líneas 311, 860, 1056, 1705, 1714, 2149, 2284, 4156, 4915, 5450, 5987, 7430, 7661, 7663, 8075, 8092, 8155, 8189, 8464, 8513, 8757. */
.calendar-nav i,
.policy-read-popup-close i,
.confirmation-icon i,
#view-hours .time-row-delete i,
#view-hours .timesheet-add-project-button i,
.profile-dropdown a i,
#view-ddp .ddp-detail-tab i,
.login-brand-footer i,
#view-objectives .objective-add-subobjective i,
#view-home .home-spotlight-kicker i,
#view-vacations .vacation-export-xls i,
#view-vacations .vacation-administration-clear-filters i,
#absenceTeamReviewModal .absence-team-review-eyebrow i,
#absenceTeamReviewModal .absence-team-review-section-head i,
#view-transport .request-admin-tab > i,
#view-reimbursements .request-admin-tab > i,
.request-review-eyebrow i,
#view-about .about-carousel-controls button i,
#requestTeamReviewModal .transport-day-context-icon i,
#teamRequestActionModal .team-request-action-eyebrow i {
  width: 15px;
  height: 15px;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.weekday {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: var(--font-weight-extrabold);
  text-align: center;
  padding-bottom: 4px;
}
.day {
  min-height: 61px;
  border: 1px solid #eef0f5;
  border-radius: 10px;
  padding: 7px;
  background: #fff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  position: relative;
}
.day.muted {
  color: #b8becd;
  background: #fbfcfe;
}
.day.today {
  border-color: #9bb2ff;
  background: #f4f7ff;
}
.day .num {
  font-weight: var(--font-weight-bold);
}
.event {
  font-size: var(--font-size-3xs);
  line-height: 1.2;
  padding: 3px 4px;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--blue-2);
  color: var(--blue);
  font-weight: var(--font-weight-bold);
}

/* [AGRUPADO-032] Estilos 100% idénticos agrupados. Origen: líneas 320, 1217, 1704, 1788, 5790. */
.event.red,
.detail-step.rejected i,
#view-hours .time-row-delete:hover,
#view-hours .template-action.delete:hover,
#view-assets .asset-ticket-icon.red {
  background: var(--red-bg);
  color: var(--red);
}
/* [AGRUPADO-033] Estilos 100% idénticos agrupados. Origen: líneas 321, 2034. */
.side-stack,
#view-directory .directory-grid.is-list-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* [AGRUPADO-034] Estilos 100% idénticos agrupados. Origen: líneas 325, 925, 3920. */
.timesheet-summary strong,
#view-documentation-assistant .documentation-assistant-workspace-head strong {
  font-size: var(--font-size-base);
  display: block;
}

/* [AGRUPADO-036] Estilos 100% idénticos agrupados. Origen: líneas 339, 1022, 3730, 8569. */
.split-list,
#view-vacations .vacation-bag-list,
#view-absences .absence-balance-list,
#view-transport .transport-planning-agenda {
  display: flex;
  flex-direction: column;
}
.split-list .line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
/* [AGRUPADO-037] Estilos 100% idénticos agrupados. Origen: líneas 341, 402, 592, 658, 711, 723, 897, 916, 1164, 1529, 1797, 2552, 2572, 2578, 2906, 3020, 3948, 4111, 4536, 4637, 5910, 6333, 6356, 7010, 7438, 7697, 7763, 7811, 7818, 7944, 7951, 8043, 8170, 8255. */
.split-list .line:last-child,
tr:last-child td,
.request-summary-row:last-child,
.ooo-tutorial-step:last-child,
#view-policy-vacations .policy-table tr:last-child td,
.cycle-rule-list>div:last-child,
.evaluation-row:last-child,
.detail-step:last-child,
.template-preview-item:last-child,
#view-performance .evaluation-competency-group .evaluation-row:last-child,
.performance-ddp-competency-row:last-child,
.performance-ddp-modal-meta>div:nth-last-child(-n+2),
#directoryPersonModal .directory-profile-section:last-child,
#view-directory-profile .directory-profile-section:last-child,
#view-directory-profile .directory-leave-item:last-child,
.objective-mini-list>div:last-child,
#view-objectives .objectives-quarter-table tr:last-child td,
#view-support .support-ticket-row:last-child,
#view-about .identity-color:nth-child(n/**/+4),
#view-about .identity-icon-grid>div:nth-child(n/**/+9),
#view-vacations .timeline-name:last-of-type,
#view-vacations .timeline-row:last-child,
#view-vacations .vacation-team-table tbody tr:last-child td,
#view-vacations .vacation-administration-table tbody tr:last-child td,
#view-vacations .vacation-balances-table tbody tr:last-child td,
#vacationBalanceDetailModal .vacation-balance-history-table tr:last-child td,
#vacationBalanceDetailModal .vacation-balance-history-table .vacation-balance-history-note-row:last-child td,
#view-vacation-balance-detail .vacation-balance-history-table tr:last-child td,
#view-vacation-balance-detail .vacation-balance-history-table .vacation-balance-history-note-row:last-child td,
#view-absences .absence-team-table tbody tr:last-child td,
.request-team-table tbody tr:last-child td,
#view-transport .request-team-table tbody tr:last-child td,
#view-reimbursements .request-team-table tbody tr:last-child td {
  border-bottom: 0;
}

.amount {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
}
.toolbar {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 17px;
}

.filter-chip {
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 0 10px;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.directory-area-filter {
  position: relative;
  padding: 0;
  color: var(--ink-2);
  overflow: hidden;
}
/* [AGRUPADO-038] Estilos 100% idénticos agrupados. Origen: líneas 352, 503, 515, 942, 990, 1487, 1719, 2363, 2406, 2536, 3275, 3578, 3649, 4241, 5929, 5951, 6906. */
.directory-area-filter:focus-within,
.search-control:focus-within,
.form-control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.time-input:focus,
.currency-input-control:focus-within,
#view-hours .time-project-select:focus,
#view-ddp .ddp-area-filter-control:focus-within,
#view-crm .crm-select-filter:focus-within,
#view-performance .performance-history-select:focus-within,
.searchable-input:focus-within,
.directory-record-modal .field > select:focus,
.directory-record-modal .field > input:focus,
.directory-record-modal .field > textarea:focus,
.documentation-assistant-input textarea:focus,
#view-documentation-assistant .documentation-assistant-suggestions select:focus,
.support-modal .field textarea:focus,
.support-reply-box textarea:focus,
#vacationModal .date-input-control.is-picker-active .date-input-display {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.directory-area-filter > i:first-child {
  margin-left: 10px;
  color: var(--blue);
  pointer-events: none;
  flex: none;
}
.directory-area-filter > i:last-child {
  margin-right: 9px;
  color: var(--muted);
  pointer-events: none;
  flex: none;
}
.directory-area-filter select {
  height: 32px;
  min-width: 146px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: 0 2px;
  cursor: pointer;
  appearance: none;
}
/* [AGRUPADO-039] Estilos 100% idénticos agrupados. Origen: líneas 356, 950, 1774. */
.directory-grid,
.catalog-grid,
#view-hours .hours-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.person-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  transition: 0.18s;
}
.person-card:hover {
  border-color: #cbd7ff;
  box-shadow: 0 8px 18px rgba(34, 63, 173, 0.08);
  transform: translateY(-2px);
}
/* [AGRUPADO-040] Estilos 100% idénticos agrupados. Origen: líneas 359, 1776, 2526. */
.person-top,
#view-hours .hours-template-card-top,
#view-performance .performance-cycle-entry .performance-cycle-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.person-card .avatar {
  width: 45px;
  height: 45px;
  font-size: var(--font-size-base);
}
.more {
  border: 0;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.more:hover {
  background: #f4f6fb;
  color: var(--blue);
}

.person-card h3 {
  margin: 13px 0 3px;
  font-size: var(--font-size-base);
}
.person-role {
  font-size: var(--font-size-sm);
  color: var(--muted);
  height: 29px;
}
.person-meta {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: var(--font-size-xs);
  color: var(--muted);
}
.person-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* [AGRUPADO-041] Estilos 100% idénticos agrupados. Origen: líneas 368, 576, 783, 792, 1130, 1246, 2664, 3524, 3778, 4512, 5144, 6280, 6360, 6868, 7447, 8059, 8077, 8284, 8466, 9148. */
.person-meta i,
#view-vacations .copy-ooo i,
#view-policies .policy-category-tag i,
#view-policies .policy-card-footer .primary-btn i,
#view-vacations .calendar-view-toggle button i,
#vacationModal .request-date-icon i,
#view-procedures .procedure-document-row .ghost-btn i,
#view-directory-profile .directory-document-link-field a i,
#absenceRequestModal .absence-request-date-icon i,
#view-objectives .objectives-hero-tags i,
#view-documentation .documentation-filter i,
#view-about .identity-hero-footer i,
#view-about .identity-app-drag i,
#vacationModal .vacation-linked-calendar-nav button i,
#view-vacations .vacation-team-actions i,
#view-absences .absence-team-actions .secondary-btn i,
#absenceTeamReviewModal .absence-team-review-steps > i,
#view-transport .request-team-review i,
#view-reimbursements .request-team-review i,
#view-about .about-carousel-hint i,
.intranet-date-picker-nav button i {
  width: 13px;
  height: 13px;
}
.org-wrap {
  padding: 24px;
  overflow: auto;
}
.org-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.org-chart {
  min-width: 820px;
  position: relative;
  padding: 2px 30px 22px;
}
.org-root {
  display: flex;
  justify-content: center;
  position: relative;
}
.org-line-v {
  height: 26px;
  width: 1px;
  background: #cfd6e7;
  margin: 0 auto;
}
.org-branch {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  border-top: 1px solid #cfd6e7;
  padding-top: 26px;
}
.org-branch:before,
.org-branch:after {
  content: "";
  position: absolute;
  top: -1px;
  width: 1px;
  height: 26px;
  background: #cfd6e7;
}
.org-branch:before {
  left: 14%;
}
.org-branch:after {
  right: 14%;
}
.org-col {
  flex: 1;
  text-align: center;
  position: relative;
}
.org-col:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 25px;
  background: #cfd6e7;
  left: 50%;
  top: -27px;
}
.org-card {
  display: inline-flex;
  min-width: 170px;
  max-width: 205px;
  text-align: left;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(34, 43, 88, 0.04);
}

/* [AGRUPADO-042] Estilos 100% idénticos agrupados. Origen: líneas 382, 418, 801, 955, 988, 1039, 1149, 1166, 1800, 2142, 3726, 5999. */
.org-card strong,
.notif strong,
#view-policies .policy-update-item strong,
.catalog-project strong,
.procedure-update strong,
#view-vacations .timeline-name strong,
.detail-step strong,
.template-preview-item strong,
.profile-dropdown-info strong,
#view-absences .absence-hero-stat strong,
#view-home .home-week-chip strong {
  font-size: var(--font-size-sm);
  display: block;
}
/* [AGRUPADO-043] Estilos 100% idénticos agrupados. Origen: líneas 383, 1150, 3291, 3347. */
.org-card span,
#view-vacations .timeline-name small,
.transport-map-preview > div span,
#transportRequestModal .transport-route-summary span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  margin-top: 2px;
}
.org-card.ceo {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.org-card.ceo span {
  color: #c9d6ff;
}
.org-children {
  display: flex;
  gap: 9px;
  margin-top: 20px;
  justify-content: center;
}
.org-children .org-card {
  display: block;
  min-width: 142px;
  padding: 10px;
  text-align: left;
}

.org-children .org-card .role-mark {
  font-size: var(--font-size-2xs);
  color: var(--blue);
  background: var(--blue-2);
  display: inline-block;
  padding: 3px 5px;
  border-radius: 5px;
}
/* [AGRUPADO-044] Estilos 100% idénticos agrupados. Origen: líneas 389, 774, 3742. */
.asset-list,
#view-policies .policies-grid,
#view-absences .absence-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.asset-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.asset-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.asset-icon {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  background: #eef2ff;
  color: var(--blue);
  display: grid;
  place-items: center;
}
/* [AGRUPADO-045] Estilos 100% idénticos agrupados. Origen: líneas 393, 785, 826, 1560, 2432, 3914, 4398, 4435, 5444, 6010. */
.asset-icon i,
#view-policies .policy-card-icon i,
.crm-detail-hero-icon i,
#view-documentation-assistant .documentation-assistant-context-icon i,
#view-procedures .procedure-search-empty i,
#view-procedures .procedure-questions-icon i,
#view-home .home-birthday-icon i {
  width: 20px;
  height: 20px;
}
.asset-card h3 {
  margin: 14px 0 4px;
  font-size: var(--font-size-base);
}
.asset-card p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 0 0 14px;
}
.asset-data {
  border-top: 1px solid var(--line);
  padding-top: 11px;
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--muted);
}
/* [AGRUPADO-046] Estilos 100% idénticos agrupados. Origen: líneas 397, 930, 1381, 1968, 8978. */
.table-card,
.timesheet-card,
#view-vacations .timeline-row,
body.org-expanded,
#view-vacations .vacation-administration-table td:nth-child(1) {
  overflow: hidden;
}
/* [AGRUPADO-047] Estilos 100% idénticos agrupados. Origen: líneas 398, 931, 5009. */
.table-scroll,
.timesheet-scroll,
.objective-score-table-wrap {
  overflow: auto;
}
.card.table-card {
  padding: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
}
th {
  text-align: left;
  background: #fafbfe;
  color: var(--muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-extrabold);
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
}
td {
  font-size: var(--font-size-md);
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-2);
}

/* [AGRUPADO-048] Estilos 100% idénticos agrupados. Origen: líneas 403, 1124, 5974. */
.table-person,
#view-vacations .calendar-top-actions,
#view-home .home-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
} /* [AGRUPADO-049] Estilos 100% idénticos agrupados. Origen: líneas 403, 1148, 2428. */
.table-person .avatar,
#view-vacations .timeline-name .avatar,
#view-crm .crm-referent .avatar {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-2xs);
} /* [AGRUPADO-050] Estilos 100% idénticos agrupados. Origen: líneas 403, 937, 1601, 1683, 2481, 2489, 2952, 3071, 4431, 5440, 6860, 9140. */
.table-person strong,
.time-project strong,
.asset-detail-grid strong,
.hours-template-check strong,
#view-performance .performance-previous-cell strong,
#view-performance .evaluation-reference strong,
#directoryPersonModal .directory-asset-card strong,
#view-directory-profile .directory-asset-card strong,
#view-procedures .procedure-resource strong,
.document-pending-callout strong,
#vacationModal .vacation-linked-calendar-copy strong,
.intranet-date-picker-copy strong {
  font-size: var(--font-size-sm);
  color: var(--ink);
  display: block;
}
.receipt-total {
  background: linear-gradient(135deg, #f2f5ff, #fff);
  border: 1px solid #dde5ff;
  padding: 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.receipt-total strong {
  font-family: var(--font-body);
  font-size: var(--font-size-4xl);
  display: block;
  letter-spacing: -0.6px;
}
.receipt-total-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
.receipt-total-meta .badge {
  font-size: var(--font-size-xs);
  color: var(--blue);
}
.receipt-total-meta .badge i {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}
.ddp-steps {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 3px;
}
.ddp-step {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  min-width: 132px;
  text-align: left;
}
.ddp-step.active {
  border-color: #9fb4ff;
  background: #f6f8ff;
}
.ddp-step small {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  display: block;
  margin-bottom: 7px;
} /* [AGRUPADO-051] Estilos 100% idénticos agrupados. Origen: líneas 411, 802, 918, 955, 977, 1081, 1136, 1166, 2482, 3920, 5007, 5126. */
.ddp-step span,
#view-policies .policy-update-item span,
.evaluation-row span,
.catalog-project span,
.table-subline,
#view-vacations .calendar-team-identity span,
#view-vacations .timeline-intro span,
.detail-step span,
#view-performance .performance-previous-cell span,
.documentation-assistant-workspace-head span,
.objective-score-breakdown-head span:not(.objective-score-total),
#view-objectives .objectives-q3-save-text > span {
  font-size: var(--font-size-xs);
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.ddp-content {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}
.detail-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.detail-block h3 {
  font-size: var(--font-size-md);
  margin-bottom: 8px;
} /* [AGRUPADO-052] Estilos 100% idénticos agrupados. Origen: líneas 413, 989. */
.detail-block p,
.detail-block li,
.procedure-reading p,
.procedure-reading li {
  font-size: var(--font-size-md);
  color: var(--ink-2);
  line-height: var(--line-height-relaxed);
} /* [AGRUPADO-053] Estilos 100% idénticos agrupados. Origen: líneas 413, 1053, 2250, 2534, 5517, 5531, 5551. */
.detail-block p,
.confirmation-body p,
#view-ddp .ddp-title-row h2,
#view-performance .performance-history-toolbar .section-head,
.onboarding-readable .onboarding-matrix td > p {
  margin: 0;
}
.detail-block ul {
  padding-left: 18px;
  margin: 0;
}
.competency {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.competency:last-child {
  border: 0;
}
.competency strong {
  font-size: var(--font-size-sm);
  flex: 1;
}
.dots {
  display: flex;
  gap: 3px;
}
.dot {
  width: 7px;
  height: 7px;
  background: #dce1ef;
  border-radius: 50%;
} /* [AGRUPADO-054] Estilos 100% idénticos agrupados. Origen: líneas 413, 905, 974, 2273, 4655. */
.dot.on,
.legend-swatch.expected,
.priority-dot.blue,
#view-ddp .ddp-competency-section .dot.on,
#view-objectives .status-dot.blue {
  background: var(--blue);
}
.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 19px;
} /* [AGRUPADO-055] Estilos 100% idénticos agrupados. Origen: líneas 414, 480, 798. */
.admin-summary .stat-card,
.card.card--flat,
#view-policies .policies-side-card {
  box-shadow: none;
} /* [AGRUPADO-056] Estilos 100% idénticos agrupados. Origen: líneas 414, 419, 3620. */
.admin-summary .stat-value,
.modal-head h2,
.documentation-assistant-modal .modal-head h2 {
  font-size: var(--font-size-4xl);
} /* [AGRUPADO-057] Estilos 100% idénticos agrupados. Origen: líneas 414, 3412. */
.admin-summary .stat-icon,
#view-directory-profile
  .directory-profile-section.is-editing
  .directory-profile-section-head {
  margin-bottom: 10px;
}
.empty-state {
  text-align: center;
  padding: 35px 18px;
  color: var(--muted);
}
.empty-state i {
  color: var(--blue);
  width: 28px;
  height: 28px;
  margin-bottom: 9px;
} /* [AGRUPADO-058] Estilos 100% idénticos agrupados. Origen: líneas 415, 795, 1792, 5169. */
.empty-state strong,
#view-policies .policy-empty strong,
#view-hours .hours-template-empty strong,
#view-documentation .documentation-empty strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-base);
  margin-bottom: 4px;
} /* [AGRUPADO-059] Estilos 100% idénticos agrupados. Origen: líneas 415, 796, 1793, 5170. */
.empty-state p,
#view-policies .policy-empty p,
#view-hours .hours-template-empty p,
#view-documentation .documentation-empty p {
  font-size: var(--font-size-sm);
  margin: 0;
}
.notif-panel {
  position: fixed;
  right: 28px;
  top: 68px;
  width: 350px;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 52px rgba(24, 34, 83, 0.17);
  border-radius: 16px;
  padding: 12px;
  display: none;
}
.notif-panel.open {
  display: block;
  animation: fade 0.18s ease;
}
.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 5px 11px;
}
.notif-head h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
}
.notif-head button {
  background: transparent;
  border: 0;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}
.notif {
  padding: 11px 8px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 9px;
}

.notif:first-of-type,
#view-directory-profile
  .directory-document-item.is-editing
  + .directory-document-item {
  border-top: 0;
}
.notif i {
  width: 16px;
  height: 16px;
  color: var(--blue);
  margin-top: 2px;
}
.notif p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--muted);
  margin: 3px 0 0;
}
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(18, 25, 58, 0.45);
  align-items: center;
  justify-content: center;
  padding: 18px;
} /* [AGRUPADO-061] Estilos 100% idénticos agrupados. Origen: líneas 419, 1182, 1211, 2505, 3258, 3377, 3670, 5486.  FINAL d-flex*/
.modal-backdrop.open,
.vacation-alert.is-visible,
.vacation-detail-reason,
#view-performance .evaluation-feedback-state.is-visible,
#view-directory-profile
  .directory-profile-section.is-editing
  .directory-edit-note,
#view-directory-profile .directory-profile-self-disclaimer:not([hidden]),
#view-directory-profile
  .directory-profile-section.is-editing
  .directory-profile-section-head,
#view-org .org-html-card.is-expanded > #orgPersonSummaryModal.open,
#view-org .org-html-card:fullscreen > #orgPersonSummaryModal.open {
  display: flex;
}
.modal {
  width: min(540px, 100%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 70px rgba(17, 26, 71, 0.28);
  padding: 22px;
  animation: pop 0.18s ease;
}
@keyframes pop {
  from {
    transform: scale(0.97);
    opacity: 0.5;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.close-btn {
  border: 0;
  background: #f5f6fa;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-info {
  margin-top: 14px;
  padding: 10px 11px;
  background: #f5f7ff;
  border-radius: 10px;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  display: flex;
  gap: 8px;
} /* [AGRUPADO-063] Estilos 100% idénticos agrupados. Origen: líneas 419, 910, 1798, 3257, 3276, 3345, 3353. */
.form-info i,
.radar-note i,
.template-preview-item i,
#view-directory-profile .directory-edit-note i,
.searchable-input > i,
#transportRequestModal .transport-route-summary i,
#transportRequestModal .transport-step-two-summary i {
  width: 15px;
  height: 15px;
  color: var(--blue);
  flex: none;
} /* [AGRUPADO-064] Estilos 100% idénticos agrupados. Origen: líneas 419, 3902. */
.modal-actions,
#absenceRequestModal .absence-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 150;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  background: #1e295f;
  color: #fff;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(18, 26, 65, 0.25);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.toast.show {
  display: flex;
  animation: toast 0.2s ease;
}
@keyframes toast {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.toast > i {
  width: 16px;
  height: 16px;
  color: #b9d1ff;
  flex: none;
}
.toast #toastText {
  min-width: 0;
  flex: 1;
  line-height: var(--line-height-compact);
}
.toast-close {
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dce6ff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.toast-close:hover,
.toast-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}
.toast-close i {
  width: 15px;
  height: 15px;
  color: currentColor;
}
.mobile-menu,
.tab-panel,
#view-vacations .vacation-panel,
#view-vacations .day.holiday::after,
.policy-read-popup.is-read .policy-read-popup-action,
#view-performance .performance-panel,
#view-hours .hours-panel,
#view-crm .crm-panel,
#view-vacations .calendar-view-panel,
#view-hours .hours-week-actions.is-hidden,
#view-ddp .ddp-current-position-chip[hidden],
#view-performance .performance-ddp-link i,
#view-directory-profile .directory-profile-exit-notice[hidden],
#view-directory-profile .directory-readonly-field.select-like i,
#view-directory-profile.is-self-profile .directory-profile-status,
#view-directory-profile .directory-profile-content-head p:empty,
#view-directory-profile
  .directory-profile-section:not(.is-editing)
  .directory-profile-section-head,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card-head
  > strong,
.app.is-auth-hidden,
#view-objectives .objectives-quarter-panel,
.login-screen::before,
#view-assets .assets-panel,
#view-hours .timesheet-readonly-notice[hidden],
#view-about .identity-local-nav::-webkit-scrollbar,
#vacationBalanceDetailModal .vacation-balance-adjustment-panel[hidden],
#view-transport .request-module-panel,
#view-reimbursements .request-module-panel,
.request-team-panel {
  display: none;
}

/* ==========================================================================
   5. SHARED COMPONENTS · canonical visual layer
   Existing class names remain as compatibility aliases; new markup should use
   the semantic base class + modifier.
   ========================================================================== */

/* Buttons */
.button,
.primary-btn,
.secondary-btn,
.ghost-btn,
.small-btn {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-height-md);
  padding: 0 var(--space-6);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
.button--primary,
.primary-btn {
  background: var(--color-primary);
  color: var(--text-on-primary);
  box-shadow: 0 6px 14px rgba(44, 84, 216, 0.18);
}

.button--sm,
.small-btn {
  min-height: var(--control-height-sm);
  padding: 0 11px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.button--icon {
  padding: 0;
  gap: 0;
  min-height: 0;
}

/* [AGRUPADO-072] Estilos 100% idénticos agrupados. Origen: líneas 467, 505. */
.button:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.ghost-btn:focus-visible,
.small-btn:focus-visible,
.chip:focus-visible,
.filter-chip:focus-visible {
  outline: 0;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.button:disabled,
.button[aria-disabled="true"],
.primary-btn:disabled,
.secondary-btn:disabled,
.ghost-btn:disabled,
.small-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}
.button i,
.button svg,
.primary-btn i,
.secondary-btn i,
.small-btn i,
#directoryPersonModal .directory-profile-content-head .close-btn,
#view-directory-profile .directory-profile-content-head .close-btn,
#view-directory-profile .directory-document-link-field,
.documentation-assistant-modal .close-btn,
#view-directory-profile .directory-leave-item > .badge,
#view-documentation .documentation-type-badge,
#view-documentation .documentation-visibility-badge,
#procedureModal .modal-procedure.is-rich-document .modal-actions,
#view-assets .asset-ticket-head .asset-heading-actions {
  flex: none;
}

/* Section headings / tab panels */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}
.section-header--panel {
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
/* [AGRUPADO-074] Estilos 100% idénticos agrupados. Origen: líneas 487, 883, 949, 4522. */
.section-header--panel h2,
#view-performance .performance-cycle-head h2,
.hours-panel-head h2,
.objectives-card-head h2 {
  font-size: var(--font-size-3xl);
}
.section-header--panel p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.tab-panel.active,
#view-vacations .vacation-panel.active {
  display: block;
  animation: fade var(--transition-view);
}

/* Tabs */
.tabs,
.module-tabs {
  display: flex;
  gap: var(--space-2);
  overflow: auto;
  padding-bottom: 2px;
}
.tab {
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  padding: 9px 10px;
  color: var(--text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
}
.tab:hover {
  color: var(--color-primary);
}
.tab:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 -2px var(--color-primary),
    var(--focus-ring);
}
.tab.active,
.tab[aria-selected="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Searches / filters / chips */

.chip,
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  border-radius: var(--radius-control);
}

/* Form controls */
.form-control,
.field input,
.field select {
  height: var(--control-height-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 0 var(--space-4);
  outline: 0;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--surface-primary);
}
textarea.form-control,
.field textarea {
  width: 100%;
  resize: vertical;
  min-height: 105px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: var(--space-4);
  outline: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  background: var(--surface-primary);
}

.field label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

/* Badges / statuses / counters */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 5px var(--space-3);
  border-radius: 7px;
}
.badge--success,
.badge.green {
  background: var(--status-success-bg);
  color: var(--status-success);
}
.badge--warning,
.badge.amber {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}
.badge--info,
.badge.blue {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.badge--danger,
.badge.red {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}
/* [AGRUPADO-075] Estilos 100% idénticos agrupados. Origen: líneas 524, 6034, 6062. */
.badge--accent,
.badge.violet,
#view-home .home-direct-action .home-direct-icon.violet,
#view-home .home-quick-icon.violet {
  background: #f1efff;
  color: #6553b8;
}
.counter-badge,
.tab-counter,
.assets-tab-counter {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}

/* Lists / copy blocks */
.list-row {
  display: flex;
  align-items: center;
}

.list-copy span,
#view-vacations .vacation-bag-copy span,
#view-absences .absence-balance-copy span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* Callouts / empty states */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
}
.empty-state {
  text-align: center;
  color: var(--text-muted);
}

/* Tables */
.data-table,
table {
  border-collapse: collapse;
  width: 100%;
}
.data-table th,
table th {
  font-weight: var(--font-weight-extrabold);
}
.data-table td,
table td {
  color: var(--text-secondary);
}

/* Progress / calendar / pagination */
.progress {
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Contextual menus / side panels: structural base only; dimensions remain module-specific. */
.context-menu {
  z-index: 120;
}

#view-vacations .calendar-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: var(--font-size-xs);
  color: var(--muted);
}
/* [AGRUPADO-077] Estilos 100% idénticos agrupados. Origen: líneas 562, 8078. */
#view-vacations .calendar-legend span,
#absenceTeamReviewModal .absence-team-review-steps span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#view-vacations .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--blue);
}
/* [AGRUPADO-078] Estilos 100% idénticos agrupados. Origen: líneas 564, 906, 929, 974, 4653. FINAL: bg-green*/
#view-vacations .legend-dot.green,
.legend-swatch.actual,
.time-dot.green,
.priority-dot.green,
#view-objectives .status-dot.green {
  background: var(--green);
}
#view-vacations .legend-dot.muted {
  background: #b5bdd2;
}
/* [AGRUPADO-079] Estilos 100% idénticos agrupados. Origen: líneas 566, 929, 1057. FINAL: bg-red*/
#view-vacations .legend-dot.red,
.time-dot.red,
.danger-btn {
  background: var(--red);
}
#view-vacations .ooo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
}

/* [AGRUPADO-080] Estilos 100% idénticos agrupados. Origen: líneas 569, 890, 2458. */
#view-vacations .ooo-heading .info-icon,
#view-performance .performance-brief-card .stat-icon,
#view-performance .performance-guidance-card .stat-icon {
  margin: 0;
  flex: none;
}
#view-vacations .ooo-heading h3 {
  font-size: var(--font-size-base);
  margin: 0 0 3px;
}
/* [AGRUPADO-081] Estilos 100% idénticos agrupados. Origen: líneas 571, 5896. */
#view-vacations .ooo-heading p,
#view-support .support-panel-head p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 0;
}
#view-vacations .ooo-field {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
}
#view-vacations .ooo-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px;
  background: #fafbfe;
  border-bottom: 1px solid var(--line);
}
/* [AGRUPADO-082] Estilos 100% idénticos agrupados. Origen: líneas 574, 986, 1942, 2259, 2622, 3329, 4718, 4954, 5945, 6453, 7584, 8335, 8835. */
#view-vacations .ooo-field-head strong,
.procedures-hero-badge strong,
#view-org .org-person-card.root .org-copy strong,
#view-ddp .ddp-competencies-card .section-head p,
.modal-evaluation .field label,
#transportRequestModal .transport-map-preview > div strong,
#view-objectives .objectives-q-summary > div > span,
#view-objectives .objectives-hero-tags span,
.support-message-head strong,
#absenceTeamReviewModal .absence-team-observation-notice strong,
#requestTeamReviewModal .request-observation-notice strong,
#teamVacationReviewModal .team-vacation-denial-notice strong,
#requestTeamReviewModal .request-denial-notice strong,
#teamRequestActionModal .team-request-action-notice strong {
  font-size: var(--font-size-sm);
}
#view-vacations .copy-ooo {
  border: 0;
  background: transparent;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

#view-vacations .ooo-copy {
  padding: 12px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--ink-2);
}

/* Solicitud de vacaciones */
.vacation-request-summary {
  margin-top: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.request-summary-row {
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-md);
  color: var(--ink-2);
}

.request-summary-row strong {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--ink);
}
/* [AGRUPADO-083] Estilos 100% idénticos agrupados. Origen: líneas 594, 1236, 1446, 6909. FINAL: bg-blue-2*/
.request-summary-row.remaining,
#vacationModal .date-picker-trigger:hover,
.app-date-control .date-picker-trigger:hover,
#vacationModal .date-input-control.is-picker-active .date-picker-trigger {
  background: var(--blue-2);
}

/* [AGRUPADO-084] Estilos 100% idénticos agrupados. Origen: líneas 596, 1827, 2148.  FINAL: bg-red-2*/
.vacation-request-summary.insufficient .request-summary-row.remaining,
.ghost-danger-btn:hover,
.profile-dropdown button:hover,
.profile-dropdown a:hover {
  background: var(--red-bg);
}
/* [AGRUPADO-085] Estilos 100% idénticos agrupados. Origen: líneas 597, 611, 946, 1099, 1187, 1218, 1540, 3767. FINAL: bg-red*/
.vacation-request-summary.insufficient .request-summary-row.remaining strong,
#view-vacations .day.holiday .num,
.day-total.is-red,
#view-vacations .team-calendar-day.holiday .calendar-day-number,
.detail-step.rejected strong,
#view-policy-transport .transport-policy-danger i,
.absence-fixed-duration-counter.is-over .absence-fixed-duration-counter-value {
  color: var(--red);
}

/* Refinamientos de Vacaciones */
#view-vacations .day.holiday {
  background: linear-gradient(135deg, #fff7f8 0%, #fff 92%);
  border-color: #f2cbd3;
}

#view-vacations .day.holiday::after {
  content: attr(data-holiday);
  display: block;
  margin-top: 13px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--red);
  letter-spacing: 0.01em;
}

/* Modal de edición de OOO */
.modal-ooo-template {
  width: min(650px, 100%);
}

.template-variables {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 11px;
  background: #f7f8fe;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  color: var(--ink-2);
}
/* [AGRUPADO-087] Estilos 100% idénticos agrupados. Origen: líneas 628, 2003, 2636, 2711, 7735, 8165, 8928. */
.table-alert strong,
.table-empty span,
.template-variables strong,
#view-directory .person-meta span,
.performance-ddp-competency-row strong,
#view-procedures .procedure-document-category .procedure-scope,
#view-vacations .vacation-administration-empty span,
.request-team-summary .badge,
#vacationLiquidationReviewModal .vacation-liquidation-nonliquidable strong {
  font-size: var(--font-size-xs);
}
.template-variables span {
  padding: 3px 5px;
  border: 1px solid #dfe5f4;
  border-radius: 5px;
  background: #fff;
  color: var(--blue);
  font-weight: var(--font-weight-bold);
}

/* Vacaciones v3 — legibilidad de calendario y OOO */
/* [AGRUPADO-088] Estilos 100% idénticos agrupados. Origen: líneas 635, 8298, 8979. FINAL: gap-8*/
#view-vacations .calendar,
#requestTeamReviewModal .request-review-actions,
#view-vacations .vacation-administration-person {
  gap: 8px;
}
#view-vacations .weekday {
  font-size: var(--font-size-md);
  padding-bottom: 8px;
}
#view-vacations .day {
  min-height: 88px;
  padding: 10px;
  font-size: var(--font-size-lg);
  border-radius: 12px;
}
#view-vacations .day .num {
  font-size: var(--font-size-lg);
  line-height: 1;
  font-weight: var(--font-weight-extrabold);
}
#view-vacations .day-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
#view-vacations .event {
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
  padding: 5px 6px;
  margin-top: 10px;
  border-radius: 7px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: var(--font-weight-bold);
}
#view-vacations .day.holiday {
  background: #fff;
  border-color: #edf0f6;
}

#view-vacations .holiday-label {
  display: inline-flex;
  align-items: center;
  color: var(--red);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.01em;
  line-height: 1;
}
#view-vacations .ooo-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Tutorial OOO */
.modal-ooo-tutorial {
  width: min(660px, 100%);
}
.ooo-tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}
.ooo-tutorial-step {
  display: flex;
  gap: 11px;
  padding: 13px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.tutorial-number {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
}
.ooo-tutorial-step strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
  margin: 1px 0 3px;
}
.ooo-tutorial-step p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  line-height: var(--line-height-ui);
}
.ooo-tutorial-step em {
  font-style: normal;
  color: var(--blue);
  font-weight: var(--font-weight-bold);
}
.ooo-tutorial-note {
  margin-top: 14px;
}

/* [AGRUPADO-090] Estilos 100% idénticos agrupados. Origen: líneas 683, 1501, 4375. */
#view-procedures .procedure-side-nav {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 116px);
  overflow: auto;
}
/* [AGRUPADO-091] Estilos 100% idénticos agrupados. Origen: líneas 687, 1505, 5416. */
.document-aside-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 7px 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.document-aside-head strong {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--ink);
}

/* [AGRUPADO-092] Estilos 100% idénticos agrupados. Origen: líneas 688, 1506, 4380. */
#view-procedures .procedure-side-icon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
  flex: none;
}

/* [AGRUPADO-093] Estilos 100% idénticos agrupados. Origen: líneas 691, 1372, 1509, 1801, 4383, 4432. */
.template-preview-item small,
#view-procedures .procedure-side-heading span,
#view-procedures .procedure-resource span {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* [AGRUPADO-094] Estilos 100% idénticos agrupados. Origen: líneas 696, 1514, 1995, 4393, 4403, 4594, 5424. */
#view-directory .directory-view-toggle button:hover,
#view-procedures .procedure-document-select:hover,
#view-procedures .procedure-section-link:hover,
#view-objectives .objectives-quarter-toggle button:hover {
  background: #f5f7ff;
  color: var(--blue);
}
/* [AGRUPADO-095] Estilos 100% idénticos agrupados. Origen: líneas 697, 1515, 4404, 5425. */
#view-procedures .procedure-section-link.active {
  background: var(--blue-2);
  color: var(--blue);
  font-weight: var(--font-weight-extrabold);
}

/* [AGRUPADO-109] Estilos 100% idénticos agrupados. Origen: líneas 716, 1534, 4420, 4645, 5674. */
#view-procedures .procedure-section p:last-child,
#view-objectives .objective-comment-cell p:last-child,
#requestCancelModal .confirmation-body {
  margin-bottom: 0;
}
/* [AGRUPADO-110] Estilos 100% idénticos agrupados. Origen: líneas 717, 1535, 4421. */
#view-policy-vacations .policy-bullet-list,
#view-policy-transport .policy-bullet-list,
#view-procedures .procedure-number-list,
#view-procedures .procedure-bullet-list {
  padding-left: 20px;
  margin: 0;
}
/* [AGRUPADO-111] Estilos 100% idénticos agrupados. Origen: líneas 718, 1536, 4422. */
#view-policy-vacations .policy-bullet-list li,
#view-policy-transport .policy-bullet-list li,
#view-procedures .procedure-number-list li,
#view-procedures .procedure-bullet-list li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-copy);
  color: var(--ink-2);
  padding-left: 3px;
  margin: 5px 0;
}
#view-policy-vacations .policy-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 15px 0 17px;
}
#view-policy-vacations .policy-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
#view-policy-vacations .policy-table th {
  background: #f5f7ff;
  color: var(--ink);
  font-size: var(--font-size-sm);
  text-transform: none;
  letter-spacing: 0;
  padding: 12px;
  text-align: left;
}
#view-policy-vacations .policy-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-md);
  color: var(--ink-2);
}

/* [AGRUPADO-112] Estilos 100% idénticos agrupados. Origen: líneas 724, 1537, 3952, 4423. */
#view-policy-vacations .policy-callout,
#view-policy-transport .policy-callout,
#view-policy-absences .policy-callout,
#view-procedures .procedure-callout {
  display: flex;
  gap: 9px;
  padding: 12px;
  background: #f5f7ff;
  border-radius: 11px;
  color: var(--ink-2);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  margin-top: 13px;
}
/* [AGRUPADO-113] Estilos 100% idénticos agrupados. Origen: líneas 725, 898, 1538, 1605, 2532, 3953, 4424, 4540. */
#view-policy-vacations .policy-callout i,
.cycle-rule-list i,
#view-policy-transport .policy-callout i,
.asset-detail-notice i,
#view-performance .performance-cycle-note i,
#view-policy-absences .policy-callout i,
#view-procedures .procedure-callout i,
.objective-alert-list i,
.objective-permission-list i {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--blue);
  margin-top: 1px;
}
/* [AGRUPADO-114] Estilos 100% idénticos agrupados. Origen: líneas 730, 1121, 1122, 1308, 1969, 2051. */
.modal-ooo-template,
.modal-confirmation,
.modal-standard-size,
#vacationModal .modal,
#confirmVacationRequestModal .modal,
#cancelVacationRequestModal .modal,
#vacationDetailModal .modal,
.org-person-modal,
.directory-person-modal {
  width: min(540px, 100%);
}

/* Home del módulo Políticas */
#view-policies .policies-home-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(130deg, #1d285e, #2d54d4 73%, #6682eb);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
#view-policies .policies-home-hero::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  right: -90px;
  top: -115px;
}
/* [AGRUPADO-124] Estilos 100% idénticos agrupados. Origen: líneas 756, 985, 1013, 2103, 3143, 3721, 4150, 4506. */
#view-policies .policies-home-hero > *,
#view-procedures .procedures-hero > *,
#view-vacations .vacation-balance-hero > *,
#view-directory-profile .directory-profile-sidebar,
#view-directory-profile .directory-profile-content,
#view-absences .absence-hero > *,
.login-brand-lockup,
.login-brand-copy,
.login-brand-footer,
#view-objectives .objectives-hero > * {
  position: relative;
  z-index: 1;
}
/* [AGRUPADO-125] Estilos 100% idénticos agrupados. Origen: líneas 757, 2104, 3722. */
#view-policies .policies-home-hero .eyebrow,
#view-absences .absence-hero .eyebrow {
  color: #bed2ff;
}
/* [AGRUPADO-126] Estilos 100% idénticos agrupados. Origen: líneas 758, 2105. */
#view-policies .policies-home-hero h2 {
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  margin: 0;
  color: #fff;
  max-width: 590px;
}
/* [AGRUPADO-127] Estilos 100% idénticos agrupados. Origen: líneas 759, 2106. */
#view-policies .policies-home-hero p:not(.eyebrow) {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: #e6eeff;
  margin: 9px 0 0;
  max-width: 600px;
}
/* [AGRUPADO-128] Estilos 100% idénticos agrupados. Origen: líneas 760, 2107. */
#view-policies .policies-home-meta {
  width: 200px;
  flex: none;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

/* [AGRUPADO-129] Estilos 100% idénticos agrupados. Origen: líneas 762, 2109. */
#view-policies .policies-home-meta span {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
  color: #d9e5ff;
  margin-top: 5px;
}

#view-policies .policy-home-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}
#view-policies .policy-search {
  max-width: 360px;
}
#view-policies .policy-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#view-policies .policy-filter {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  min-height: 33px;
  padding: 0 10px;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
#view-policies .policy-filter:hover {
  border-color: #c9d6ff;
  color: var(--blue);
}

#view-policies .policies-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}

#view-policies .policy-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  min-height: 245px;
  transition: var(--transition-base);
}
#view-policies .policy-card:hover {
  transform: translateY(-2px);
  border-color: #ccd8ff;
  box-shadow: 0 10px 24px rgba(36, 57, 145, 0.08);
}
#view-policies .policy-card.featured {
  border-color: #bfd0ff;
  background: linear-gradient(145deg, #f7f9ff, #fff 65%);
}
#view-policies .policy-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
}
#view-policies .policy-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

#view-policies .policy-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-2);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 18px 0 13px;
}

#view-policies .policy-card h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  letter-spacing: -0.35px;
  margin: 0 0 7px;
}
/* [AGRUPADO-131] Estilos 100% idénticos agrupados. Origen: líneas 788, 5877. */
#view-policies .policy-card p,
#view-support .support-intro-note p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  color: var(--muted);
  margin: 0;
}
#view-policies .policy-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
/* [AGRUPADO-132] Estilos 100% idénticos agrupados. Origen: líneas 790, 2117. */
#view-policies .policy-card-footer > span,
#view-documentation .documentation-card footer span {
  font-size: var(--font-size-xs);
  color: var(--muted);
  font-weight: var(--font-weight-bold);
}
#view-policies .policy-card-footer .primary-btn {
  min-height: 33px;
  padding: 0 10px;
  font-size: var(--font-size-xs);
}

#view-policies .policy-empty {
  text-align: center;
  padding: 42px 20px;
  background: #fff;
  border: 1px dashed #ccd4e6;
  border-radius: 16px;
  color: var(--muted);
}
#view-policies .policy-empty i {
  width: 26px;
  height: 26px;
  color: var(--blue);
  margin-bottom: 8px;
}

/* [AGRUPADO-133] Estilos 100% idénticos agrupados. Origen: líneas 797, 988. */
#view-policies .policies-side-column,
.procedures-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#view-policies .policy-update-item {
  display: flex;
  gap: 9px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
#view-policies .policy-update-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 4px;
  flex: none;
}

/* Consultas de la Política de Vacaciones */
/* [AGRUPADO-137] Estilos 100% idénticos agrupados. Origen: líneas 819, 1555, 4433. */
#view-procedures .procedure-questions {
  margin: 22px 30px 30px;
  padding: 20px;
  border: 1px solid #dce4ff;
  border-radius: 15px;
  background: linear-gradient(135deg, #f6f8ff, #fff);
  display: flex;
  align-items: center;
  gap: 14px;
}
/* [AGRUPADO-138] Estilos 100% idénticos agrupados. Origen: líneas 823, 1559, 4434, 5443. */
#view-procedures .procedure-questions-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-2);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}

/* [AGRUPADO-139] Estilos 100% idénticos agrupados. Origen: líneas 828, 1562, 3600, 4437, 5446, 8391. */
#view-procedures .procedure-questions-copy .eyebrow {
  margin: 0 0 4px;
}
/* [AGRUPADO-140] Estilos 100% idénticos agrupados. Origen: líneas 829, 1563, 4438. */
#view-procedures .procedure-questions-copy h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  letter-spacing: -0.35px;
  margin: 0 0 4px;
}
/* [AGRUPADO-141] Estilos 100% idénticos agrupados. Origen: líneas 830, 1564, 4439. */
#view-procedures .procedure-questions-copy p:not(.eyebrow) {
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
  color: var(--muted);
  margin: 0;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table td,
#vacationModal .request-date-step strong,
.vacation-detail-date-step strong,
#view-receipts .receipts-history-table th,
#view-receipts .receipts-history-table td,
#view-hours .hours-copy-trigger,
#view-hours .hours-preload-trigger,
#view-directory .directory-grid.is-list-view .person-meta span,
#view-performance .performance-tabs .tab,
#view-directory-profile .directory-profile-back,
#view-directory-profile .directory-profile-edit,
#view-procedures .procedure-questions .primary-btn,
#view-home .home-alert .ghost-btn {
  white-space: nowrap;
}

/* Confirmación de lectura: popup al final de la política */
.policy-read-popup {
  position: fixed;
  z-index: 120;
  right: 26px;
  bottom: 22px;
  width: min(490px, calc(100vw - 52px));
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 13px 13px 14px;
  background: #fff;
  border: 1px solid #d8e0f5;
  border-radius: 15px;
  box-shadow: 0 16px 42px rgba(19, 31, 82, 0.18);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.policy-read-popup.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.policy-read-popup-icon {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--blue-2);
  color: var(--blue);
}

/* [AGRUPADO-145] Estilos 100% idénticos agrupados. Origen: líneas 853, 1110, 1371, 1549, 1771, 2459, 3322, 3519, 3874, 4382, 4550, 5006, 5125, 5598, 7475, 7501. */
.policy-read-popup-copy strong,
.vacation-submit-confirmation strong,
.team-vacation-summary-status strong,
#view-policy-transport .transport-policy-options strong,
.preload-strategy-card strong,
#view-performance .performance-guidance-card strong,
#transportRequestModal .transport-step-intro strong,
#view-directory-profile .directory-document-copy strong,
.absence-cancel-callout strong,
#view-procedures .procedure-side-heading strong,
.objective-action-queue strong,
.objective-score-breakdown-head strong,
#view-objectives .objectives-q3-save-text strong,
#assetIncidentModal .asset-incident-step-intro strong,
#confirmTeamVacationApprovalModal .vacation-approval-confirmation strong,
#teamVacationReviewModal .team-vacation-review-meta strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
}
/* [AGRUPADO-146] Estilos 100% idénticos agrupados. Origen: líneas 854, 1670, 1684, 1754, 3520, 4116. */
.policy-read-popup-copy span,
#view-hours .hours-copy-menu small,
.hours-template-check small,
#view-hours .hours-preload-menu small,
#view-directory-profile .directory-document-copy span,
#view-directory-profile .directory-leave-item > div > span {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
  color: var(--muted);
  margin-top: 3px;
}
.policy-read-popup-action {
  min-height: 34px;
  white-space: nowrap;
  padding: 0 10px;
  font-size: var(--font-size-xs);
}
.policy-read-popup-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.policy-read-popup-close:hover {
  background: #f3f5fb;
  color: var(--ink);
}

.policy-read-popup.is-read {
  border-color: #bde8d9;
  background: var(--green-bg);
}
.policy-read-popup.is-read .policy-read-popup-icon {
  background: #fff;
  color: var(--green);
}
/* [AGRUPADO-147] Estilos 100% idénticos agrupados. Origen: líneas 863, 946, 1250, 1282, 1296, 3763, 3782, 3816, 3844, 3889, 4916. */
.policy-read-popup.is-read .policy-read-popup-copy strong,
.day-total.is-green,
#vacationModal .request-date-step.return strong,
#view-vacations .vacation-return-date,
.vacation-detail-date-step.return strong,
.absence-fixed-duration-counter.is-complete
  .absence-fixed-duration-counter-value,
#absenceRequestModal .absence-request-date-step.return strong,
#absenceDetailModal .absence-detail-progress-step.complete strong,
#requestDetailModal .absence-detail-progress-step.complete strong,
#absenceRequestModal .absence-request-progress-step.complete strong,
#view-objectives .objectives-overachievement-notice > i {
  color: var(--green);
}

/* v3.1 — Módulos nuevos: Evaluación, Horas, CRM y Procedimientos */
.tab i {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 3px;
}
.tab-counter {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}

/* Evaluación de desempeño */

/* [AGRUPADO-148] Estilos 100% idénticos agrupados. Origen: líneas 878, 923, 966, 3111. */
#view-performance .performance-panel.active,
#view-hours .hours-panel.active,
#view-crm .crm-panel.active,
#view-directory-profile .directory-profile-section.active {
  display: block;
  animation: fade 0.22s ease;
}
#view-performance .performance-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.8fr);
  gap: 16px;
  margin-bottom: 17px;
}
#view-performance .performance-cycle-card {
  padding: 18px;
  border: 1px solid #dce4ff;
  border-radius: 16px;
  background: linear-gradient(140deg, #f6f8ff, #fff);
}
#view-performance .performance-cycle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#view-performance .performance-cycle-head .eyebrow {
  margin-bottom: 5px;
}

/* [AGRUPADO-149] Estilos 100% idénticos agrupados. Origen: líneas 884, 2199. */
#view-performance .performance-cycle-head p:not(.eyebrow),
#view-ddp .ddp-head > div > p:not(.eyebrow) {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 5px 0 0;
}
#view-performance .performance-progress {
  height: 8px;
  background: #e8ecf6;
  border-radius: 99px;
  overflow: hidden;
  margin: 19px 0 8px;
}
#view-performance .performance-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #758bed);
  border-radius: inherit;
}
#view-performance .performance-cycle-foot {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--font-size-sm);
}

#view-performance .performance-brief-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 17px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

/* [AGRUPADO-150] Estilos 100% idénticos agrupados. Origen: líneas 892, 5777. */
#view-performance .performance-brief-card p,
#view-assets .asset-ticket-head p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
  color: var(--muted);
  margin: 4px 0 0;
}
.performance-gap {
  font-size: var(--font-size-xs);
  color: var(--amber);
  font-weight: var(--font-weight-extrabold);
  background: var(--amber-bg);
  border-radius: 6px;
  padding: 4px 6px;
}
.performance-gap.neutral {
  color: var(--muted);
  background: #f2f4f9;
}
.cycle-rule-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cycle-rule-list > div {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-md);
  color: var(--ink-2);
  line-height: var(--line-height-ui);
}

.performance-history-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.radar-shell {
  min-height: 260px;
  display: grid;
  place-items: center;
}
.radar-shell svg {
  width: 100%;
  max-width: 300px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  fill: var(--muted);
}
.radar-legend {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.radar-legend > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  margin-top: 3px;
}

.radar-legend p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 2px 0 0;
}
.radar-note {
  padding: 11px;
  background: #f5f7ff;
  border-radius: 10px;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  line-height: var(--line-height-normal);
}

.modal-evaluation {
  width: min(610px, 100%);
}
.evaluation-legend {
  display: flex;
  gap: 15px;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-bottom: 12px;
}
/* [AGRUPADO-151] Estilos 100% idénticos agrupados. Origen: líneas 913, 1836, 4576. */
.evaluation-legend span,
#view-hours .timesheet-period-picker,
#view-objectives .objectives-year-control {
  display: flex;
  align-items: center;
  gap: 5px;
}
.evaluation-rows {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.evaluation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.evaluation-row select {
  height: 34px;
  width: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  color: var(--ink);
  font-weight: var(--font-weight-extrabold);
  background: #fff;
}

/* Registro de horas */

.timesheet-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}

.timesheet-key {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.timesheet-key span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin: 0;
}
.time-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
} /* [AGRUPADO-152] Estilos 100% idénticos agrupados. Origen: líneas 929, 4654. */
.time-dot.amber,
#view-objectives .status-dot.amber {
  background: #d69c2f;
}

.timesheet-table {
  min-width: 950px;
}
/* [AGRUPADO-153] Estilos 100% idénticos agrupados. Origen: líneas 933, 6104, 6972, 8057, 8176, 8273. */
.timesheet-table th,
#view-vacations .vacation-team-table th:last-child,
#view-vacations .vacation-team-table td.vacation-team-action-cell,
#view-vacations .timeline-month-scale span:nth-child(2),
#view-vacations .timeline-month-scale span:nth-child(3),
#view-absences .absence-team-action-cell,
#view-absences .absence-team-table th:last-child,
.request-team-actions,
#view-transport .request-team-action-cell,
#view-reimbursements .request-team-action-cell,
#view-transport .request-team-table th:last-child,
#view-reimbursements .request-team-table th:last-child {
  text-align: center;
}
.timesheet-table th:first-child {
  text-align: left;
  min-width: 245px;
}
.timesheet-table td {
  text-align: center;
  padding: 10px 9px;
}
/* [AGRUPADO-154] Estilos 100% idénticos agrupados. Origen: líneas 936, 6971, 7603. */
.timesheet-table td:first-child,
#view-vacations .timeline-month-scale span:first-child,
#view-vacations .vacation-team-action-cell {
  text-align: left;
}

/* [AGRUPADO-155] Estilos 100% idénticos agrupados. Origen: líneas 938, 988, 2143, 5421. */
.time-project small,
.procedure-update small,
.profile-dropdown-info span,
.document-aside-head > div > span {
  font-size: var(--font-size-2xs);
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.time-type {
  display: inline-flex;
  font-size: var(--font-size-2xs);
  padding: 3px 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  font-weight: var(--font-weight-extrabold);
}

.time-input {
  width: 66px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 7px;
  text-align: center;
  color: var(--ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  outline: 0;
}

.timesheet-table .row-total {
  font-size: var(--font-size-xs);
  color: var(--muted);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.timesheet-table tfoot td {
  background: #fafbfe;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
}
.day-total {
  border-radius: 7px;
}
.day-total.is-amber {
  color: var(--amber);
}
.timesheet-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--font-size-xs);
  color: var(--muted);
}
.hours-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.catalog-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  padding: 16px;
}
.catalog-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.catalog-card h3 {
  margin: 13px 0 4px;
  font-size: var(--font-size-lg);
}
.catalog-card > p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 0 0 12px;
}
.catalog-project {
  border-top: 1px solid var(--line);
  padding: 9px 0 0;
  margin-top: 9px;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-bottom: 16px;
}
.bar-report {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bar-report > div {
  display: grid;
  grid-template-columns: 210px 65px minmax(100px, 1fr);
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-sm);
}
/* [AGRUPADO-156] Estilos 100% idénticos agrupados. Origen: líneas 959, 5919, 9027. */
.bar-report span,
#view-support .support-ticket-kicker strong,
#view-vacations .vacation-liquidation-liquidable-cell {
  color: var(--ink-2);
  font-weight: var(--font-weight-bold);
}
.bar-report strong {
  color: var(--ink);
  font-size: var(--font-size-sm);
  text-align: right;
}
.bar-report i {
  height: 9px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--blue), #7b91eb);
  display: block;
}

/* CRM */
#view-crm .crm-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-bottom: 18px;
}
.crm-metric {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.crm-metric span {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--muted);
}
.crm-metric strong {
  font-family: var(--font-body);
  font-size: var(--font-size-5xl);
  letter-spacing: -0.5px;
  display: block;
  margin: 6px 0 4px;
}

.crm-toolbar,
.procedures-toolbar {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.crm-kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  overflow: auto;
  padding-bottom: 4px;
}
.crm-column {
  background: #f2f4f9;
  border: 1px solid #e6eaf2;
  border-radius: 14px;
  padding: 10px;
  min-height: 370px;
}
.crm-column > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--ink);
  font-weight: var(--font-weight-extrabold);
  margin: 2px 2px 10px;
}
.crm-column > header span {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--muted);
  font-size: var(--font-size-xs);
}
.crm-card {
  background: #fff;
  border: 1px solid #e2e6f0;
  border-radius: 11px;
  padding: 11px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(29, 39, 83, 0.03);
}
.crm-card.standby {
  border-left: 3px solid #dfa636;
}
.crm-card.approved {
  border-left: 3px solid var(--green);
}
.crm-card.rejected {
  opacity: 0.65;
}
.crm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
}
.crm-client {
  font-size: var(--font-size-xs);
  color: var(--blue);
  font-weight: var(--font-weight-extrabold);
}
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.priority-dot.amber {
  background: #d8a23c;
}
.crm-card h3 {
  font-size: var(--font-size-md);
  line-height: var(--line-height-compact);
  margin: 8px 0 4px;
} /* [AGRUPADO-157] Estilos 100% idénticos agrupados. Origen: líneas 975, 981. */
.crm-card p,
.client-profile-card p {
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin: 0;
}
.crm-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 8px;
  font-size: var(--font-size-xs);
  color: var(--muted);
}
.crm-card-meta strong {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--ink);
}

.client-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.client-profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.client-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-weight: var(--font-weight-extrabold);
  font-family: var(--font-body);
  flex: none;
}
.client-logo.google {
  background: linear-gradient(145deg, #5080e5, #244bba);
}
.client-logo.orange {
  background: linear-gradient(145deg, #e78559, #b54d35);
}
.client-logo.purple {
  background: linear-gradient(145deg, #9472d3, #5d4397);
}
.client-profile-card h3 {
  font-size: var(--font-size-md);
  margin: 0 0 3px;
} /* [AGRUPADO-158] Estilos 100% idénticos agrupados. Origen: líneas 981, 989. */
.client-profile-card .ghost-btn,
.procedure-attachment .ghost-btn {
  margin-left: auto;
}

/* Procedimientos */
#view-procedures .procedures-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 25px;
  background: linear-gradient(135deg, #1c285f, #2c54d8 76%, #7690ec);
  border-radius: 19px;
  color: #fff;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
#view-procedures .procedures-hero:after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  right: -88px;
  top: -100px;
}
#view-procedures .procedures-hero .eyebrow {
  color: #bdd2ff;
}
#view-procedures .procedures-hero h2 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 23px;
  letter-spacing: -0.6px;
  max-width: 510px;
  margin: 0;
}
#view-procedures .procedures-hero p:not(.eyebrow) {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: #e2ebff;
  max-width: 580px;
  margin: 7px 0 0;
}
.procedures-hero-badge {
  width: 150px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.procedures-hero-badge i {
  width: 17px;
  height: 17px;
  color: #dbe7ff;
}
.procedures-hero-badge span {
  font-size: var(--font-size-2xs);
  color: #dfe9ff;
}
.procedures-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
}
.procedures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.procedure-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 245px;
  transition: 0.18s;
}
.procedure-card:hover {
  border-color: #cbd7ff;
  box-shadow: 0 9px 20px rgba(32, 50, 127, 0.07);
  transform: translateY(-1px);
} /* [AGRUPADO-159] Estilos 100% idénticos agrupados. Origen: líneas 987, 6058. */
.procedure-card-top,
#view-home .home-quick-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.procedure-scope {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  padding: 4px 6px;
  border-radius: 6px;
} /* [AGRUPADO-160] Estilos 100% idénticos agrupados. Origen: líneas 987, 3550, 4688, 5164. */
.procedure-scope i,
#transportRequestModal .transport-map-single .transport-map-label i,
#view-objectives .objective-info-tooltip i,
.documentation-visibility-badge i {
  width: 12px;
  height: 12px;
}
.procedure-version {
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
}
.procedure-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f2f4fb;
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 17px 0 12px;
} /* [AGRUPADO-161] Estilos 100% idénticos agrupados. Origen: líneas 987, 3984, 5787. */
.procedure-card-icon i,
.file-dropzone-icon i,
#view-assets .asset-ticket-icon i {
  width: 19px;
  height: 19px;
}
.procedure-card h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  letter-spacing: -0.3px;
  margin: 0 0 6px;
} /* [AGRUPADO-162] Estilos 100% idénticos agrupados. Origen: líneas 987, 2528, 3602, 5448. */
.procedure-card p,
#view-performance .performance-cycle-entry p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  line-height: var(--line-height-ui);
  margin: 0;
}
.procedure-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: auto;
  font-size: var(--font-size-2xs);
  color: var(--muted);
}
.procedure-card .ghost-btn {
  padding: 8px 0 0;
  justify-content: flex-start;
}
.procedure-update {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.procedure-update > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 4px;
  flex: none;
}
/* [AGRUPADO-163] Estilos 100% idénticos agrupados. Origen: líneas 989, 6167. */
.modal-procedure,
#teamVacationReviewModal .team-vacation-denial-panel {
  width: min(700px, 100%);
}
.procedure-reading {
  max-height: 400px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
}
.procedure-reading h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  margin: 0 0 7px;
} /* [AGRUPADO-164] Estilos 100% idénticos agrupados. Origen: líneas 989, 2547. */
.procedure-reading p,
#view-performance .evaluation-reference {
  margin: 0 0 14px;
}
.procedure-reading ol {
  margin: 0 0 14px;
  padding-left: 19px;
}
.procedure-reading li {
  margin: 5px 0;
}
.procedure-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f7ff;
  border-radius: 9px;
  padding: 9px;
  font-size: var(--font-size-xs);
  color: var(--ink-2);
} /* [AGRUPADO-165] Estilos 100% idénticos agrupados. Origen: líneas 989, 1138. */
.procedure-attachment i,
#view-vacations .timeline-hint i {
  width: 14px;
  height: 14px;
  color: var(--blue);
}
.field textarea {
  width: 100%;
  resize: vertical;
  min-height: 105px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  outline: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--ink);
  background: #fff;
}

/* Base visual for skeleton loading, available to all asynchronous module states */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: #edf0f6;
  border-radius: 8px;
}
.skeleton-shimmer:after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* [AGRUPADO-168] Estilos 100% idénticos agrupados. Origen: líneas 1020, 4163. */
#view-vacations .vacation-balance-hero-icon i,
.login-form-icon i {
  width: 22px;
  height: 22px;
}

/* [AGRUPADO-169] Estilos 100% idénticos agrupados. Origen: líneas 1023, 3731. */
#view-vacations .vacation-bag-row,
#view-absences .absence-balance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

#view-vacations .vacation-bag-value {
  text-align: right;
  white-space: nowrap;
}
#view-vacations .vacation-bag-value strong {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  display: block;
}
/* [AGRUPADO-170] Estilos 100% idénticos agrupados. Origen: líneas 1034, 1782, 5946, 8374, 8547. */
#view-vacations .vacation-bag-value span,
#view-hours .hours-template-card-footer > span,
.support-message-head span,
#view-about .about-section-nav-head span:not(.about-section-nav-mark),
#view-transport .transport-planning-map-head span {
  font-size: var(--font-size-2xs);
  color: var(--muted);
}
/* [AGRUPADO-171] Estilos 100% idénticos agrupados. Origen: líneas 1035, 1227, 1437, 2408, 2470, 2538, 3467, 4813. */
#view-vacations .vacation-bag-value.muted strong,
#vacationModal .date-input-display.is-placeholder,
.app-date-control .date-input-display.is-placeholder,
#view-crm .crm-select-filter > i:last-child,
#view-performance .performance-select-filter > i:last-child,
#view-performance .performance-history-select > i:last-child,
#view-directory-profile
  .directory-month-control
  .date-input-display.is-placeholder,
#directoryRecordModal
  .directory-month-control
  .date-input-display.is-placeholder,
#view-objectives .objective-consultant-score.muted {
  color: var(--muted);
}

.date-input-control:has(> input[disabled]),
label:has(input[disabled]),
label[disabled] {
  opacity: 0.5;
}

#view-vacations .team-calendar-select {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
}

#view-vacations .team-calendar-select select {
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
#view-vacations .calendar-area-caption {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin-top: 3px;
}
#view-vacations .ooo-message-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}
#view-vacations .ooo-message-card p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--ink-2);
  margin: 0;
}
#view-vacations .ooo-message-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}
.modal-confirmation {
  width: min(470px, 100%);
}
.confirmation-body {
  display: flex;
  gap: 11px;
  padding: 12px;
  border-radius: 11px;
  background: #fff7f8;
  color: var(--ink-2);
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
}

.confirmation-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}

.danger-btn:hover {
  background: #9f3247;
}

#view-vacations .calendar-team-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: #f7f9ff;
  border: 1px solid #e0e7fa;
  border-radius: 12px;
  margin-bottom: 13px;
}

/* [AGRUPADO-172] Estilos 100% idénticos agrupados. Origen: líneas 1078, 6031. */
#view-vacations .calendar-team-icon,
#view-home .home-direct-action .home-direct-icon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
}

#view-vacations .team-month-calendar {
  padding: 18px;
  overflow: auto;
}
#view-vacations .team-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  gap: 6px;
  min-width: 785px;
}
#view-vacations .team-weekday {
  padding: 7px 8px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#view-vacations .team-weekday.weekend-label {
  background: #f1f3f8;
  border-radius: 7px;
  color: #9ba2b5;
  text-align: center;
}
#view-vacations .team-calendar-day {
  min-height: 96px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  position: relative;
}
#view-vacations .team-calendar-day.weekend {
  background: #f5f6f9;
  border-color: #edf0f4;
}
#view-vacations .team-calendar-day.outside {
  background: #fafbfc;
  color: #aeb4c2;
}
#view-vacations .team-calendar-day.today {
  border: 2px solid #9eb4ff;
  background: #f6f8ff;
  padding: 7px;
}
#view-vacations .calendar-day-number {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
}
#view-vacations .team-calendar-day.weekend .calendar-day-number,
#view-vacations .team-calendar-day.outside .calendar-day-number {
  color: #a2a9b9;
}
#view-vacations .calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
#view-vacations .team-calendar-day.holiday {
  background: #fffafa;
  border-color: #f2d6dc;
}

#view-vacations .holiday-label {
  font-size: var(--font-size-2xs);
  color: var(--red);
  font-weight: var(--font-weight-extrabold);
}
#view-vacations .calendar-absence {
  margin-top: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  line-height: 1.2;
}
/* [AGRUPADO-173] Estilos 100% idénticos agrupados. Origen: líneas 1104, 5936. */
#view-vacations .calendar-absence strong,
.support-upload-zone span {
  display: block;
  font-size: var(--font-size-xs);
}
#view-vacations .calendar-absence span {
  display: block;
  font-size: var(--font-size-2xs);
  margin-top: 2px;
  opacity: 0.9;
}

.vacation-submit-confirmation {
  display: flex;
  gap: 11px;
  padding: 13px;
  border-radius: 11px;
  background: #f5f7ff;
  color: var(--ink-2);
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
}

.vacation-submit-confirmation p {
  margin: 4px 0 0;
}

/* Vacaciones — consistencia de lightboxes, detalle y planificación 3 meses */

/* [AGRUPADO-177] Estilos 100% idénticos agrupados. Origen: líneas 1125, 4589. */
#view-vacations .calendar-view-toggle,
#view-objectives .objectives-quarter-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
#view-vacations .calendar-view-toggle button {
  border: 0;
  background: transparent;
  border-radius: 7px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* [AGRUPADO-178] Estilos 100% idénticos agrupados. Origen: líneas 1133, 5771. */
#view-vacations .calendar-view-panel.active,
#view-assets .assets-panel.active {
  display: block;
  animation: fade 0.2s ease;
}
#view-vacations .timeline-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin: 4px 0 13px;
}

#view-vacations .timeline-hint {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#view-vacations .vacation-timeline-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#view-vacations .vacation-timeline {
  display: grid;
  grid-template-columns: 220px repeat(3, minmax(210px, 1fr));
  min-width: 850px;
  background: #fff;
}
#view-vacations .timeline-head {
  height: 39px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* [AGRUPADO-179] Estilos 100% idénticos agrupados. Origen: líneas 1144, 5911. */
#view-vacations .timeline-name-head,
#view-support .support-ticket-row:hover {
  background: #fafbfe;
}
#view-vacations .timeline-month {
  justify-content: center;
  border-left: 1px solid var(--line);
  background: #fafbfe;
}
#view-vacations .timeline-name {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}
#view-vacations .timeline-name.own {
  background: #fbfffd;
}

#view-vacations .timeline-row {
  position: relative;
  min-height: 58px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(
    to right,
    transparent 9.5%,
    #edf0f6 10%,
    transparent 10.5%,
    transparent 19.5%,
    #edf0f6 20%,
    transparent 20.5%,
    transparent 29.5%,
    #edf0f6 30%,
    transparent 30.5%,
    transparent 39.5%,
    #edf0f6 40%,
    transparent 40.5%,
    transparent 49.5%,
    #edf0f6 50%,
    transparent 50.5%,
    transparent 59.5%,
    #edf0f6 60%,
    transparent 60.5%,
    transparent 69.5%,
    #edf0f6 70%,
    transparent 70.5%,
    transparent 79.5%,
    #edf0f6 80%,
    transparent 80.5%,
    transparent 89.5%,
    #edf0f6 90%,
    transparent 90.5%
  );
}
#view-vacations .timeline-bar {
  position: absolute;
  top: 19px;
  height: 21px;
  border-radius: 6px;
  padding: 4px 6px;
  color: #fff;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  white-space: nowrap;
}
#view-vacations .bar-jime {
  left: 10%;
  width: 19%;
  background: #5879dd;
}
.bar-luciana {
  left: 41%;
  width: 17%;
  background: #7c66de;
}
.own-bar {
  left: 54%;
  width: 23%;
  background: var(--green);
}
.own-bar.pending {
  left: 37%;
  width: 12%;
  background: #63a78f;
}
.bar-paula {
  left: 74%;
  width: 13%;
  background: #ca8a44;
}
.bar-anto {
  left: 20%;
  width: 14%;
  background: #4c97b9;
}
.bar-naara {
  left: 30%;
  width: 17%;
  background: #956fd3;
}

.vacation-detail-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.vacation-detail-status > div {
  padding: 11px 12px;
  border-right: 1px solid var(--line);
} /* [AGRUPADO-180] Estilos 100% idénticos agrupados. Origen: líneas 1156, 1867, 2577, 3677, 3790, 6333, 6347, 6356. */
.vacation-detail-status > div:last-child,
#view-hours .timesheet-add-project-row td:first-child,
.performance-ddp-modal-meta > div:nth-child(2n),
.request-detail-status > div:last-child,
.absence-detail-status > div:last-child,
#view-about .identity-color:nth-child(3n),
#view-about .identity-font-card:last-child,
#view-about .identity-icon-grid > div:nth-child(8n) {
  border-right: 0;
}
/* [AGRUPADO-181] Estilos 100% idénticos agrupados. Origen: líneas 1157, 1600. */
.vacation-detail-status span,
.vacation-detail-grid span,
.asset-detail-grid span {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-bottom: 4px;
}
/* [AGRUPADO-182] Estilos 100% idénticos agrupados. Origen: líneas 1158, 2612, 3744, 8656. */
.vacation-detail-status strong,
#view-performance .evaluation-reference strong,
.absence-guide-card h3 {
  font-size: var(--font-size-md);
}
.vacation-detail-block {
  padding-top: 16px;
} /* [AGRUPADO-183] Estilos 100% idénticos agrupados. Origen: líneas 1159, 4529. */
.vacation-detail-block h3,
.objective-detail-card h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  margin: 0 0 8px;
}
/* [AGRUPADO-184] Estilos 100% idénticos agrupados. Origen: líneas 1160, 3680, 3793, 4650. */
.vacation-detail-grid,
.request-detail-grid,
.absence-detail-grid,
#view-objectives .objective-status-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vacation-detail-grid > div {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
}
/* [AGRUPADO-185] Estilos 100% idénticos agrupados. Origen: líneas 1162, 2390, 4010, 4012. */
.vacation-detail-grid strong,
#view-ddp .ddp-competency-section .competency strong,
#view-hours .time-project strong,
#view-hours .catalog-project strong {
  font-size: var(--font-size-md);
  line-height: var(--line-height-compact);
}
.vacation-detail-timeline {
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
/* [AGRUPADO-186] Estilos 100% idénticos agrupados. Origen: líneas 1164, 1796. */
.detail-step,
.template-preview-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
}
.detail-step i {
  width: 17px;
  height: 17px;
  padding: 3px;
  border-radius: 50%;
  background: #f0f2f7;
  color: #9aa1b3;
  flex: none;
}

/* Validación de superposición de vacaciones dentro del equipo */
.vacation-alert {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #f2cbd3;
  border-radius: 11px;
  background: #fff7f8;
  color: var(--ink-2);
}

/* [AGRUPADO-188] Estilos 100% idénticos agrupados. Origen: líneas 1183, 1726. */
.vacation-alert i,
.hours-delete-warning i {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--red);
  margin-top: 1px;
}
/* [AGRUPADO-189] Estilos 100% idénticos agrupados. Origen: líneas 1184, 1213. */
.vacation-alert strong,
.vacation-detail-reason strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--red);
}
/* [AGRUPADO-190] Estilos 100% idénticos agrupados. Origen: líneas 1185, 1214. */
.vacation-alert p,
.vacation-detail-reason p {
  margin: 3px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.42;
  color: var(--ink-2);
}

#submitVacation:disabled {
  background: #c9cfdf;
  color: #788095;
  box-shadow: none;
  cursor: not-allowed;
}

/* Calendario de vacaciones: estados y contenido dinámico por equipo */
/* [AGRUPADO-191] Estilos 100% idénticos agrupados. Origen: líneas 1196, 1338. */
#view-vacations .calendar-absence.pending-absence,
#view-vacations .calendar-absence-bar.pending-absence {
  border: 1px dashed #64a98f;
  background: #f4fbf8;
}
#view-vacations .timeline-bar.pending {
  background: #63a78f !important;
  opacity: 0.9;
}

/* Vacaciones — detalle de solicitud denegada */
.vacation-detail-reason[hidden] {
  display: none;
}
.vacation-detail-reason {
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid #f1c9d1;
  border-radius: 10px;
  background: #fff7f8;
}

.vacation-detail-reason i {
  width: 16px;
  height: 16px;
  color: var(--red);
  flex: none;
  margin-top: 1px;
}

/* Vacaciones — picker de fecha con ícono interactivo y fechas compactas en tabla */
/* [AGRUPADO-192] Estilos 100% idénticos agrupados. Origen: líneas 1222, 1432. */
#vacationModal .date-input-control,
.app-date-control {
  position: relative;
  height: 39px;
}
/* [AGRUPADO-193] Estilos 100% idénticos agrupados. Origen: líneas 1223, 1433. */
#vacationModal .date-input-display,
.app-date-control .date-input-display {
  height: var(--control-height-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 0 42px 0 10px;
  display: flex;
  align-items: center;
  font-size: var(--font-size-md);
  color: var(--ink);
  background: #fff;
  pointer-events: none;
}

/* [AGRUPADO-194] Estilos 100% idénticos agrupados. Origen: líneas 1228, 1438. */
#vacationModal input[type="date"],
.app-date-control input[type="date"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
/* [AGRUPADO-195] Estilos 100% idénticos agrupados. Origen: líneas 1231, 1441. */
#vacationModal .date-picker-trigger,
.app-date-control .date-picker-trigger {
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  display: grid;
  place-items: center;
  cursor: pointer;
}

#vacationModal .vacation-request-date-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}
/* [AGRUPADO-196] Estilos 100% idénticos agrupados. Origen: líneas 1242, 3774. */
#vacationModal .request-date-step,
#absenceRequestModal .absence-request-date-step {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
/* [AGRUPADO-197] Estilos 100% idénticos agrupados. Origen: líneas 1243, 3775. */
#vacationModal .request-date-icon,
#absenceRequestModal .absence-request-date-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--blue-2);
  color: var(--blue);
}

/* [AGRUPADO-198] Estilos 100% idénticos agrupados. Origen: líneas 1248, 3780. */
#vacationModal .request-date-step span,
#absenceRequestModal .absence-request-date-step span {
  display: block;
  font-size: 8.5px;
  color: var(--muted);
  line-height: 1.2;
}
#vacationModal .request-date-step strong {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--ink);
  line-height: 1.32;
  margin-top: 3px;
}

/* [AGRUPADO-199] Estilos 100% idénticos agrupados. Origen: líneas 1251, 3783. */
#vacationModal .request-date-arrow,
#absenceRequestModal .absence-request-date-arrow {
  width: 13px;
  height: 13px;
  color: #a9b2c7;
  justify-self: center;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table {
  min-width: 1110px;
  table-layout: fixed;
}
/* [AGRUPADO-200] Estilos 100% idénticos agrupados. Origen: líneas 1253, 1258. */
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-date-column,
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  th:nth-child(-n + 3),
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  td:nth-child(-n + 3) {
  width: 138px;
}
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-days-column {
  width: 78px;
}
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-status-column {
  width: 156px;
}
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-update-column {
  width: 126px;
}
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-action-column {
  width: 84px;
}

#view-vacations #vacation-panel-mis-solicitudes .vacation-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #8b95a7;
  cursor: pointer;
  transition:
    background-color 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
  line-height: 1;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action i {
  width: 14px;
  height: 14px;
  stroke-width: 1.65;
  display: block;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action:hover,
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action:focus-visible {
  background: rgba(23, 35, 63, 0.055);
  color: #344054;
  outline: none;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action:active {
  transform: scale(0.94);
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action.cancel {
  color: #98a2b3;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-icon-action.cancel:hover,
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-icon-action.cancel:focus-visible {
  background: rgba(188, 52, 58, 0.065);
  color: #a43b40;
}
.vacation-action-tooltip {
  position: fixed;
  z-index: 100000;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #273142;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16);
}
.vacation-action-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vacation-detail-date-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}
.vacation-detail-date-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.date-flow-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--blue-2);
  color: var(--blue);
}

.vacation-detail-date-step span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  line-height: 1.2;
}
.vacation-detail-date-step strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--ink);
  line-height: var(--line-height-compact);
  margin-top: 3px;
}

.date-flow-arrow {
  width: 15px;
  height: 15px;
  color: #a9b2c7;
  justify-self: center;
}
/* [AGRUPADO-201] Estilos 100% idénticos agrupados. Origen: líneas 1298, 2305. */
.vacation-detail-meta-grid,
#view-ddp .ddp-requirement-grid p {
  margin-top: 8px;
}
.vacation-detail-meta-grid > div:last-child {
  grid-column: auto;
}

/* Vacaciones — lightboxes compactos con fechas breves */

/* Calendario mensual — ausencias como barras continuas por período */
/* [AGRUPADO-205] Estilos 100% idénticos agrupados. Origen: líneas 1322, 1459, 1654, 1738, 2243, 3114, 3191, 5172, 5412, 6850, 7323, 7361, 9131. */
#view-vacations .team-calendar-grid,
#view-transport .transport-filter-dropdown,
#view-hours .hours-copy-dropdown,
#view-hours .hours-preload-dropdown,
#view-ddp .ddp-step,
#view-directory-profile .directory-profile-nav button,
#view-reimbursements .transport-filter-dropdown,
.modal-procedure,
#vacationModal .modal,
#view-support .support-filter-dropdown,
#view-vacations .transport-filter-dropdown,
#view-absences .transport-filter-dropdown,
#view-assets .transport-filter-dropdown,
.intranet-date-control {
  position: relative;
}
#view-vacations .team-calendar-day {
  z-index: 1;
  min-height: 112px;
}
#view-vacations .calendar-absence-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
#view-vacations .calendar-absence-bar {
  position: absolute;
  min-width: 0;
  height: 21px;
  padding: 0 7px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 1px 1px rgba(30, 42, 91, 0.04);
}
#view-vacations .calendar-absence-bar span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calendario — selector de equipo */

/* Calendario — detalle resumido de ausencias */
#view-vacations .calendar-absence-bar {
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
#view-vacations .calendar-absence-bar:hover {
  filter: brightness(0.97);
  box-shadow: 0 2px 5px rgba(30, 42, 91, 0.12);
}
#view-vacations .calendar-absence-bar:focus-visible,
#view-vacations .timeline-bar:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
#view-vacations .timeline-bar {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
/* [AGRUPADO-206] Estilos 100% idénticos agrupados. Origen: líneas 1361, 6333. */
#view-vacations .timeline-bar:hover,
#view-about .identity-color:hover {
  filter: brightness(0.96);
}
.team-vacation-summary-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}
/* [AGRUPADO-207] Estilos 100% idénticos agrupados. Origen: líneas 1366, 2908, 3022. */
.team-vacation-summary-status > div,
#directoryPersonModal .directory-profile-section-heading,
#view-directory-profile .directory-profile-section-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.team-vacation-summary-status > div > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  flex: none;
}

.team-vacation-summary-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: var(--font-size-xs);
  color: var(--muted);
}
/* [AGRUPADO-208] Estilos 100% idénticos agrupados. Origen: líneas 1377, 3354, 6986, 7725, 8913. */
.team-vacation-summary-meta strong,
#transportRequestModal .transport-step-two-summary strong,
#view-vacations .timeline-name strong,
#view-vacations .vacation-administration-person strong,
#vacationLiquidationReviewModal .vacation-liquidation-period strong,
#vacationLiquidationReviewModal .vacation-liquidation-buckets strong {
  font-size: var(--font-size-sm);
  color: var(--ink);
}

/* Planificación 3 meses — períodos breves contenidos dentro de la celda */

#view-vacations .timeline-bar {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#view-vacations .timeline-bar.compact {
  justify-content: center;
  padding: 4px 5px;
  z-index: 4;
}

/* Calendario y planificación — navegación junio a diciembre 2026 */

#view-vacations .calendar-nav button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: #f7f8fb;
  color: #a4acbd;
}

/* Recibos — selector de año y columnas estables */
#view-receipts .receipt-year-select {
  position: relative;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 0 9px;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* [AGRUPADO-209] Estilos 100% idénticos agrupados. Origen: líneas 1405, 1468, 3200, 7330, 7379. */
#view-receipts .receipt-year-select i,
#view-transport .transport-filter-trigger i,
#view-reimbursements .transport-filter-trigger i,
#view-support .support-filter-trigger i,
#view-vacations .transport-filter-trigger i,
#view-absences .transport-filter-trigger i,
#view-assets .transport-filter-trigger i {
  width: 14px;
  height: 14px;
  pointer-events: none;
}
#view-receipts .receipt-year-select .receipt-year-chevron {
  width: 13px;
  height: 13px;
  margin-left: 1px;
}
#view-receipts .receipt-year-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  border: 0;
  background: transparent;
}
#view-receipts .receipts-history-table {
  table-layout: fixed;
  min-width: 730px;
}
#view-receipts .receipts-period-column {
  width: 210px;
}
#view-receipts .receipts-type-column {
  width: 160px;
}
#view-receipts .receipts-published-column {
  width: 135px;
}
#view-receipts .receipts-status-column {
  width: 115px;
}
#view-receipts .receipts-action-column,
#view-about .pack-logo {
  width: 110px;
}

.transport-modal,
.support-modal {
  width: min(620px, 100%);
}
.transport-modal .form-info {
  margin-top: 13px;
}
.transport-file-input {
  height: auto !important;
  padding: 9px 10px !important;
  cursor: pointer;
}
.transport-file-hint {
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: -1px;
}

/* Campos de fecha coherentes en toda la intranet */

#absenceRequestModal .absence-auto-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #eef1f6;
  color: #727b8f;
  font-size: 8.5px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}
#absenceRequestModal .absence-auto-date-badge[hidden],
#absenceRequestModal .absence-auto-date-hint[hidden],
#view-directory .directory-area-group.is-hidden,
#view-directory .directory-person-card.is-hidden,
#view-ddp .ddp-detail-tab-panel[hidden],
#view-ddp .ddp-area-empty[hidden],
#view-directory-profile .directory-readonly-field.select-like i,
#cancelVacationFromDetail[hidden],
#view-directory-profile .directory-profile-edit-cancel[hidden],
#view-directory-profile.is-self-profile .directory-profile-edit,
#view-directory-profile.is-self-profile .directory-profile-edit-cancel,
.vacation-cancellation-current-fields[hidden],
#view-directory-profile.is-self-profile .directory-profile-access-note,
#view-directory-profile.is-self-profile .directory-profile-back,
#view-directory-profile .directory-month-control [data-directory-month-value],
#directoryRecordModal .directory-month-control [data-directory-month-value],
.directory-month-picker[hidden],
#view-directory-profile .directory-probation-days[hidden],
#view-directory-profile.is-self-profile #directoryProfileDocumentationNav,
#view-directory-profile.is-self-profile #directory-profile-documentacion,
#view-directory-profile .directory-company-team-field[hidden],
#transportRequestModal .transport-step-panel[hidden],
#view-directory-profile.is-self-profile .directory-probation-field,
#view-directory-profile.is-self-profile .directory-probation-days,
.absence-benefit-notice[hidden],
.absence-fixed-duration-counter[hidden],
.absence-detail-adjustment[hidden],
#absenceDetailModal .absence-detail-progress[hidden],
#absenceDetailModal .absence-detail-step[hidden],
#absenceDetailModal #absenceDetailStepOneActions[hidden],
#absenceDetailModal #openAbsenceDetailAdjustment[hidden],
#view-absences [data-absence-cancel-request][hidden],
#absenceDetailModal #cancelAbsenceFromDetail[hidden],
#requestDetailModal .absence-detail-progress[hidden],
#requestDetailModal .absence-detail-step[hidden],
#requestDetailModal #requestDetailStepOneActions[hidden],
#requestDetailModal #openRequestDetailAdjustment[hidden],
#absenceRequestModal .absence-evidence-field[hidden],
#absenceRequestModal .absence-request-step[hidden],
#absenceRequestModal .absence-request-actions[hidden],
#view-hours .timesheet-current-week-badge[hidden],
#view-directory-profile.is-self-profile #directoryProfileVacationsNav,
#view-directory-profile.is-self-profile #directoryProfileLicensesNav,
#view-directory-profile.is-self-profile #directory-profile-vacaciones,
#view-directory-profile.is-self-profile #directory-profile-licencias,
#view-directory-profile:has(
    .directory-profile-section.active[data-directory-profile-section="activos"]
  )
  #directoryProfileEditButton,
#view-directory-profile:has(
    .directory-profile-section.active[data-directory-profile-section="activos"]
  )
  #directoryProfileEditCancelButton,
#view-directory-profile:has(
    .directory-profile-section.active[data-directory-profile-section="vacaciones"]
  )
  #directoryProfileEditButton,
#view-directory-profile:has(
    .directory-profile-section.active[data-directory-profile-section="vacaciones"]
  )
  #directoryProfileEditCancelButton,
#view-directory-profile:has(
    .directory-profile-section.active[data-directory-profile-section="licencias"]
  )
  #directoryProfileEditButton,
#view-directory-profile:has(
    .directory-profile-section.active[data-directory-profile-section="licencias"]
  )
  #directoryProfileEditCancelButton,
#view-procedures .procedure-document-category .procedure-scope i,
#view-procedures .procedure-scope i,
#view-objectives .objectives-score-summary-link[hidden],
.objective-score-breakdown[hidden],
#view-objectives .objectives-save-button,
.document-visibility-fixed[hidden],
#assetIncidentModal .asset-incident-step-panel[hidden],
#view-transport .request-action-source,
#view-reimbursements .request-action-source,
#view-absences #absence-panel-requests .absence-action-source,
#view-transport .request-load-more[hidden],
#view-reimbursements .request-load-more[hidden],
#view-vacations #vacation-panel-mis-solicitudes .request-load-more[hidden],
#view-vacations #vacation-panel-mi-equipo .request-load-more[hidden],
#view-directory-profile.is-self-profile #directoryProfileAssetsNav,
#view-directory-profile.is-self-profile #directory-profile-activos,
#teamVacationReviewModal .team-vacation-review-layout[hidden],
#teamVacationReviewModal .team-vacation-review-actions[hidden],
#teamVacationReviewModal .team-vacation-review-steps,
#absenceTeamReviewModal .absence-team-review-steps,
#absenceTeamReviewModal .absence-team-review-content[hidden],
#absenceTeamReviewModal .absence-team-review-actions[hidden],
#view-about .about-values-shell[hidden],
#view-about .about-identity-shell[hidden],
#absenceTeamReviewModal .absence-team-observation-panel[hidden],
#requestTeamReviewModal .request-observation-panel[hidden],
.table-alert[hidden],
#vacationPartnerField[hidden],
#vacationApprovalInfo[hidden],
#vacationModal .vacation-linked-calendar[hidden],
#teamVacationReviewModal .team-vacation-denial-panel[hidden],
#teamVacationReviewModal #teamVacationCoverageSummary[hidden],
#teamVacationReviewModal #teamVacationNearbyList[hidden],
#view-vacations .vacation-administration-empty[hidden],
.request-denial-panel[hidden],
#requestTeamReviewModal #requestTeamReviewContent[hidden],
#requestTeamReviewModal .request-review-actions[hidden],
#requestTeamReviewModal .request-denial-panel[hidden],
#requestTeamReviewModal .transport-day-context[hidden],
#teamRequestActionModal .team-request-action-form[hidden],
#vacationLiquidationReviewModal .vacation-liquidation-nonliquidable[hidden],
#vacationLiquidationReviewModal #vacationLiquidationActions[hidden],
#vacationLiquidationReviewModal #vacationLiquidationActions button[hidden],
#view-vacations
  #clearVacationAdministrationFilters
  .vacation-filter-count[hidden],
#view-vacations #clearVacationBalanceFilters .vacation-filter-count[hidden],
#vacationLiquidationReviewModal
  #vacationLiquidationActions
  button[aria-hidden="true"],
.intranet-date-picker[hidden],
#view-home .home-full-version[hidden],
.pagination[hidden] {
  display: none !important;
}
#absenceRequestModal .absence-auto-date-badge i,
#view-ddp .ddp-competency-section .dot,
#view-vacations .vacation-administration-scroll::-webkit-scrollbar,
#view-vacations
  #vacation-panel-saldos
  .vacation-balances-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#absenceRequestModal .absence-auto-date-hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: -3px;
  color: #7b8496;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-compact);
}
#absenceRequestModal .absence-auto-date-hint i {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 1px;
}
#absenceRequestModal .app-date-control.is-auto-filled .date-input-display {
  background: #f1f3f7;
  border-color: #d9dee8;
  color: #70798b;
}
#absenceRequestModal
  .app-date-control.is-auto-filled
  .date-input-display.is-placeholder {
  color: #9299a8;
}
#absenceRequestModal .app-date-control.is-auto-filled .date-picker-trigger {
  color: #9ba3b2;
  cursor: not-allowed;
  pointer-events: none;
}
#absenceRequestModal
  .app-date-control.is-auto-filled
  .date-picker-trigger:hover,
.sidebar .nav::-webkit-scrollbar-track {
  background: transparent;
}

/* Traslados — filtro y campos de formulario */

/* [AGRUPADO-215] Estilos 100% idénticos agrupados. Origen: líneas 1460, 3192. */
#view-transport .transport-filter-trigger,
#view-reimbursements .transport-filter-trigger {
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 0 9px;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
/* [AGRUPADO-216] Estilos 100% idénticos agrupados. Origen: líneas 1464, 1841, 3196, 4581, 6867, 6887, 7371, 9147, 9166. */
#view-transport .transport-filter-trigger:hover,
#view-transport .transport-filter-dropdown.is-open .transport-filter-trigger,
#view-hours .timesheet-week-nav:hover:not(:disabled),
#view-reimbursements .transport-filter-trigger:hover,
#view-reimbursements
  .transport-filter-dropdown.is-open
  .transport-filter-trigger,
#view-objectives .objectives-period-nav:hover,
#vacationModal .vacation-linked-calendar-nav button:hover,
#vacationModal .vacation-linked-calendar-day:hover:not(:disabled),
#view-vacations .transport-filter-trigger:hover,
#view-vacations .transport-filter-dropdown.is-open .transport-filter-trigger,
#view-absences .transport-filter-trigger:hover,
#view-absences .transport-filter-dropdown.is-open .transport-filter-trigger,
#view-assets .transport-filter-trigger:hover,
#view-assets .transport-filter-dropdown.is-open .transport-filter-trigger,
.intranet-date-picker-nav button:hover,
.intranet-date-picker-day:hover:not(:disabled) {
  background: var(--blue-2);
  border-color: #c9d6ff;
  color: var(--blue);
}

/* [AGRUPADO-217] Estilos 100% idénticos agrupados. Origen: líneas 1469, 3201. */
#view-transport .transport-filter-trigger .transport-filter-chevron,
#view-reimbursements .transport-filter-trigger .transport-filter-chevron {
  width: 13px;
  height: 13px;
  margin-left: 1px;
  transition: transform 0.16s ease;
}
/* [AGRUPADO-218] Estilos 100% idénticos agrupados. Origen: líneas 1470, 1657, 1741, 3202, 7332, 7385. */
#view-transport .transport-filter-dropdown.is-open .transport-filter-chevron,
#view-hours .hours-copy-dropdown.is-open .hours-copy-chevron,
#view-hours .hours-preload-dropdown.is-open .hours-preload-chevron,
#view-reimbursements
  .transport-filter-dropdown.is-open
  .transport-filter-chevron,
#view-support .support-filter-dropdown.is-open .support-filter-chevron,
#view-vacations .transport-filter-dropdown.is-open .transport-filter-chevron,
#view-absences .transport-filter-dropdown.is-open .transport-filter-chevron,
#view-assets .transport-filter-dropdown.is-open .transport-filter-chevron {
  transform: rotate(180deg);
}
#view-transport .transport-filter-menu {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  min-width: 148px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(28, 42, 92, 0.14);
  display: none;
}

/* [AGRUPADO-219] Estilos 100% idénticos agrupados. Origen: líneas 1477, 3208. */
#view-transport .transport-filter-menu button,
#view-reimbursements .transport-filter-menu button {
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  padding: 0 8px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.currency-input-control {
  height: var(--control-height-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.currency-input-control > span {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.04em;
  background: #fafbfe;
}
.currency-input-control input {
  min-width: 0;
  flex: 1;
  height: 37px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.field textarea,
#view-directory-profile .directory-month-control .date-picker-trigger,
#directoryRecordModal .directory-month-control .date-picker-trigger {
  font-family: inherit;
}

#view-policy-transport .transport-policy-danger {
  background: #fff7f8;
  border: 1px solid #f1c9d1;
}

#view-policy-transport .transport-policy-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
#view-policy-transport .transport-policy-options > div {
  display: flex;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
#view-policy-transport .transport-policy-options > div > span {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blue-2);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}

#view-policy-transport .transport-policy-options p {
  font-size: var(--font-size-sm);
  margin: 4px 0 0;
}
/* [AGRUPADO-221] Estilos 100% idénticos agrupados. Origen: líneas 1553, 2946, 3065, 6925, 7442, 7670, 7734, 8047, 8907. */
.table-alert strong,
#directoryPersonModal .directory-record-card-head strong,
#view-directory-profile .directory-record-card-head strong,
#view-vacations .timeline-intro > div > strong,
#view-vacations .vacation-team-person strong,
#view-vacations .vacation-administration-filter-copy strong,
#view-vacations .vacation-administration-empty strong,
#view-absences .absence-team-person strong,
#vacationLiquidationReviewModal .vacation-liquidation-review-person strong {
  font-size: var(--font-size-md);
  color: var(--ink);
}

/* Mis equipos — detalle y soporte */
.asset-modal,
.hours-preload-modal,
.hours-template-preview-modal,
.hours-template-editor-modal,
.absence-detail-modal {
  width: min(560px, 100%);
}
.asset-detail-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
/* [AGRUPADO-223] Estilos 100% idénticos agrupados. Origen: líneas 1589, 2431. */
.asset-detail-icon,
.crm-detail-hero-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-2);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
/* [AGRUPADO-224] Estilos 100% idénticos agrupados. Origen: líneas 1592, 2113, 2380, 3599. */
.asset-detail-icon i,
#view-documentation .documentation-card-icon i,
#view-ddp .ddp-area-empty-icon i {
  width: 21px;
  height: 21px;
}
/* [AGRUPADO-225] Estilos 100% idénticos agrupados. Origen: líneas 1593, 4428. */
.asset-detail-hero strong,
#view-procedures .procedure-role-grid strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
  margin-top: 5px;
}
.asset-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.asset-detail-grid > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.asset-detail-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 11px;
  border-radius: 10px;
  background: #f5f7ff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

/* [AGRUPADO-227] Estilos 100% idénticos agrupados. Origen: líneas 1610, 3236, 5715, 6683, 7356, 8533. */
#view-assets .asset-heading-actions,
#view-directory-profile .directory-profile-header-actions,
#view-transport .request-list-filters,
#view-reimbursements .request-list-filters,
#view-vacations .vacation-request-head-actions,
#view-vacations .request-list-filters,
#view-absences .request-list-filters,
#view-assets .request-list-filters,
#view-transport .transport-planning-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
#view-assets .asset-incident-btn {
  background: #fffafb;
  border-color: #efc8d0;
  color: var(--red);
  box-shadow: none;
}
#view-assets .asset-incident-btn:hover {
  background: var(--red-bg);
  border-color: #dfaab5;
  color: #9f3247;
}
.asset-incident-modal,
.absence-request-modal {
  width: min(640px, 100%);
}
.asset-incident-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px solid #efc8d0;
  border-radius: 12px;
  background: #fffafb;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}
/* [AGRUPADO-229] Estilos 100% idénticos agrupados. Origen: líneas 1618, 3873. */
.asset-incident-alert > i,
.absence-cancel-callout > i {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--red);
}
/* [AGRUPADO-230] Estilos 100% idénticos agrupados. Origen: líneas 1619, 4541. */
.asset-incident-alert strong,
.objective-alert-list strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: var(--font-size-sm);
}
.asset-incident-policy-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: var(--font-weight-bold);
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asset-incident-policy-link:hover {
  color: #315fcb;
}
.asset-incident-policy-link i {
  width: 12px;
  height: 12px;
  flex: none;
}
.asset-security-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}
.asset-security-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  cursor: pointer;
}
.asset-security-option input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--blue);
  flex: none;
}
.asset-incident-upload-note {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* Registro de horas — duración por proyecto */
#view-hours .time-input {
  width: 82px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-body);
  letter-spacing: -0.2px;
}
/* [AGRUPADO-232] Estilos 100% idénticos agrupados. Origen: líneas 1647, 7876, 8000. */
#view-hours .row-total,
#view-hours .day-total,
#view-hours #weekTotal,
#vacationBalanceAdjustmentModal
  .vacation-balance-adjustment-field-meta
  small:last-child,
#vacationBalanceAdvanceModal
  .vacation-balance-adjustment-field-meta
  small:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Registro de horas — acciones de semana y plantillas */
/* [AGRUPADO-233] Estilos 100% idénticos agrupados. Origen: líneas 1653, 6686, 7322, 7906, 8163. */
#view-hours .hours-heading-actions,
#view-support .support-panel-actions,
#view-vacation-balance-detail .vacation-balance-detail-heading-actions,
.request-team-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

/* [AGRUPADO-234] Estilos 100% idénticos agrupados. Origen: líneas 1656, 1740. */
#view-hours .hours-copy-trigger .hours-copy-chevron,
#view-hours .hours-preload-trigger .hours-preload-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.16s ease;
}

#view-hours .hours-copy-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 35;
  width: 270px;
  padding: 6px;
  display: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 13px 28px rgba(28, 42, 92, 0.15);
}

/* [AGRUPADO-235] Estilos 100% idénticos agrupados. Origen: líneas 1663, 1747. */
#view-hours .hours-copy-menu button,
#view-hours .hours-preload-menu button {
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 9px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}

/* [AGRUPADO-236] Estilos 100% idénticos agrupados. Origen: líneas 1668, 1752. */
#view-hours .hours-copy-menu button > i,
#view-hours .hours-preload-menu button > i {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
}
/* [AGRUPADO-237] Estilos 100% idénticos agrupados. Origen: líneas 1669, 1753, 3310, 5587, 8107. */
#view-hours .hours-copy-menu strong,
#view-hours .hours-preload-menu strong,
#transportRequestModal .transport-step-indicator strong,
#assetIncidentModal .asset-incident-step-indicator strong,
#absenceTeamReviewModal .absence-team-review-document strong {
  display: block;
  font-size: var(--font-size-sm);
  color: inherit;
}

.hours-copy-modal,
.hours-template-modal,
.hours-unsaved-modal,
.objective-info-modal {
  width: min(520px, 100%);
}
.hours-copy-preview {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
.hours-copy-preview > i {
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex: none;
}

.hours-copy-preview span {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--muted);
}
.hours-template-check {
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  cursor: pointer;
}

.hours-template-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  flex: none;
}

/* Registro de horas — proyectos y acciones por fila */
#view-hours .timesheet-table {
  min-width: 1030px;
}
#view-hours .timesheet-table th:first-child {
  min-width: 280px;
}
#view-hours .timesheet-table th:last-child {
  width: 52px;
}
#view-hours .time-actions-heading,
#view-hours .time-row-actions {
  width: 52px;
  text-align: center !important;
}
#view-hours .time-row-delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-2);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

#view-hours .timesheet-add-project-row td {
  padding: 8px !important;
  background: #fbfcff;
  border-top: 1px dashed #dbe2ef !important;
  text-align: left !important;
}
#view-hours .timesheet-add-project-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 3px;
  cursor: pointer;
}
#view-hours .timesheet-add-project-button:hover {
  color: #2348c5;
}

#view-hours .time-project-select {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 28px 0 9px;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  outline: 0;
  cursor: pointer;
}

/* [AGRUPADO-240] Estilos 100% idénticos agrupados. Origen: líneas 1720, 8540. */
#view-hours .time-project-select-meta,
#view-transport .transport-day-button small {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-2xs);
  color: var(--muted);
}
.hours-delete-modal {
  width: min(500px, 100%);
}
.hours-delete-warning {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #f1c9d1;
  border-radius: 11px;
  background: #fff7f8;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

/* Registro de horas — precarga y plantillas */
#view-hours .timesheet-add-project-row td {
  padding: 10px 9px !important;
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 0 !important;
}
#view-hours .timesheet-add-project-row td:first-child {
  border-right: 1px solid #f0f2f7;
}
#view-hours .timesheet-add-project-button {
  min-height: 28px;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
}

#view-hours .hours-preload-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 35;
  width: 320px;
  padding: 6px;
  display: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 13px 28px rgba(28, 42, 92, 0.15);
}

.preload-strategy-card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: 0.16s ease;
}
.preload-strategy-card:hover,
.preload-strategy-card.is-selected {
  border-color: #b9cbff;
  background: #f7f9ff;
}
/* [AGRUPADO-241] Estilos 100% idénticos agrupados. Origen: líneas 1763, 6296. */
.preload-strategy-card input,
#view-about .identity-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.preload-strategy-check {
  width: 18px;
  height: 18px;
  border: 1px solid #cbd3e4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  margin-top: 1px;
}
.preload-strategy-check i {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.preload-strategy-card.is-selected .preload-strategy-check {
  border-color: var(--blue);
  background: var(--blue);
}
.preload-strategy-card.is-selected .preload-strategy-check i,
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-editable-cell:hover::after,
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-editable-cell:focus::after {
  opacity: 1;
}

/* [AGRUPADO-243] Estilos 100% idénticos agrupados. Origen: líneas 1772, 3323, 5441, 5599. */
.preload-strategy-card small,
#transportRequestModal .transport-step-intro span,
.document-pending-callout span,
#assetIncidentModal .asset-incident-step-intro span {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-xs);
  color: var(--muted);
  line-height: var(--line-height-normal);
}
/* [AGRUPADO-244] Estilos 100% idénticos agrupados. Origen: líneas 1773, 2546. */
.preload-template-field,
#view-performance .evaluation-legend {
  margin: 0 0 12px;
}

#view-hours .hours-template-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  min-height: 210px;
}

#view-hours .hours-template-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
}

#view-hours .hours-template-card h3 {
  font-size: var(--font-size-base);
  margin: 13px 0 4px;
  line-height: var(--line-height-compact);
}
/* [AGRUPADO-245] Estilos 100% idénticos agrupados. Origen: líneas 1780, 6077. */
#view-hours .hours-template-card p,
#view-home .home-notification p {
  font-size: var(--font-size-xs);
  color: var(--muted);
  line-height: var(--line-height-ui);
  margin: 0;
}
#view-hours .hours-template-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
}

#view-hours .template-action-group {
  display: flex;
  gap: 2px;
}
#view-hours .template-action {
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

#view-hours .hours-template-empty {
  text-align: center;
  padding: 42px 20px;
  border: 1px dashed #ccd4e6;
  border-radius: 15px;
  background: #fff;
  color: var(--muted);
}
#view-hours .hours-template-empty i {
  width: 26px;
  height: 26px;
  color: var(--blue);
  margin-bottom: 7px;
}

.template-preview-summary {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  margin-bottom: 12px;
}
.template-preview-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}

.template-preview-item span {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

/* Registro de horas — acciones de guardado y cambios sin guardar */

.hours-unsaved-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f6f8ff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
/* [AGRUPADO-246] Estilos 100% idénticos agrupados. Origen: líneas 1821, 3321, 3795, 3801, 4725, 5439, 5597, 5875. */
.hours-unsaved-callout i,
#transportRequestModal .transport-step-intro > i,
.absence-detail-review-note > i,
.absence-detail-adjustment-head > i,
.objective-info-modal-body i,
.document-pending-callout > i,
#assetIncidentModal .asset-incident-step-intro > i,
#view-support .support-intro-note i {
  width: 18px;
  height: 18px;
  color: var(--blue);
  flex: none;
  margin-top: 1px;
}
.hours-unsaved-actions {
  flex-wrap: wrap;
}
.ghost-danger-btn {
  min-height: 39px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--red);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

/* Registro de horas — selector de período laboral */
#view-directory-profile
  .directory-profile-section[data-directory-profile-section="vacaciones"]
  .directory-profile-section-head,
#view-directory-profile
  .directory-profile-section[data-directory-profile-section="licencias"]
  .directory-profile-section-head,
#view-transport .request-team-head-actions,
#view-reimbursements .request-team-head-actions {
  align-items: center;
}
#view-hours .timesheet-summary-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#view-hours .timesheet-week-nav {
  width: 32px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}

#view-hours .timesheet-week-nav:disabled {
  cursor: not-allowed;
  color: #c3c8d6;
  background: #fafbfe;
}

#view-hours .timesheet-period-control {
  min-height: 34px;
  position: relative;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  min-width: 184px;
  cursor: pointer;
}
/* [AGRUPADO-249] Estilos 100% idénticos agrupados. Origen: líneas 1848, 2468. */
#view-hours .timesheet-period-control:hover,
#view-performance .performance-select-filter:hover,
#view-performance .performance-select-filter:focus-within {
  border-color: #c9d6ff;
  background: #fbfcff;
}

#view-hours .timesheet-period-control span,
.modal-evaluation .evaluation-reference > div {
  min-width: 0;
  display: block;
}
#view-hours .timesheet-period-control strong {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--ink);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}
#view-hours .timesheet-period-control small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  line-height: var(--line-height-tight);
}
#view-hours .timesheet-period-control input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}

/* Registro de horas — fila de alta de proyecto simplificada */

#view-hours .timesheet-add-project-row td {
  text-align: left !important;
}

/* Organigrama — motor data-driven preparado para integración con ABM */

/* #view-org .org-html-card {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
} */
#view-org .org-html-scroll {
  overflow: auto;
  background: #fff;
  scrollbar-color: #b8c2dc #f4f6fb;
  scrollbar-width: thin;
}
#view-org .org-html-scroll::-webkit-scrollbar {
  height: 11px;
  width: 11px;
}
#view-org .org-html-scroll::-webkit-scrollbar-track,
#view-vacations .vacation-administration-scroll::-webkit-scrollbar-track,
#view-vacations
  #vacation-panel-saldos
  .vacation-balances-scroll::-webkit-scrollbar-track {
  background: #f4f6fb;
}
/* [AGRUPADO-252] Estilos 100% idénticos agrupados. Origen: líneas 1880, 7685, 8019. */
#view-org .org-html-scroll::-webkit-scrollbar-thumb,
#view-vacations .vacation-administration-scroll::-webkit-scrollbar-thumb,
#view-vacations
  #vacation-panel-saldos
  .vacation-balances-scroll::-webkit-scrollbar-thumb {
  background: #b8c2dc;
  border: 3px solid #f4f6fb;
  border-radius: 999px;
}
#view-org .org-html-canvas {
  width: var(--org-canvas-width, 2300px);
  min-width: var(--org-canvas-width, 2300px);
  height: var(--org-canvas-height, 1080px);
  position: relative;
  overflow: hidden;
  background: #fff;
  font-family: var(--font-body);
  color: #202020;
}
#view-org .org-level-line {
  position: absolute;
  z-index: 0;
  left: 52px;
  right: 0;
  border-top: 1px solid rgba(44, 84, 216, 0.09);
  pointer-events: none;
}
#view-org .org-grade {
  position: absolute;
  z-index: 6;
  left: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.06em;
}
#view-org .org-connector-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#view-org .org-connector-layer path {
  fill: none;
  stroke: #4d5570;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
#view-org .org-connection-label-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
#view-org .org-connection-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 14px;
  padding: 0 6px;
  border: 1px solid #cad8ff;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: var(--font-size-3xs);
  line-height: 1;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(30, 48, 120, 0.08);
  transform: translateX(-50%);
}
#view-org .org-html-scroll {
  cursor: ew-resize;
  overscroll-behavior: contain;
}
#view-org .org-html-scroll.is-dragging,
#view-vacations .vacation-administration-scroll.is-dragging {
  cursor: ew-resize;
  user-select: none;
}
#view-org .org-html-scroll.is-dragging *,
#view-vacations .vacation-administration-scroll.is-dragging * {
  user-select: none;
}
#view-org .org-area-header,
#view-org .org-section-header {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
  border-radius: 7px;
  color: #fff;
  box-shadow: 0 1px 2px rgba(21, 30, 68, 0.14);
  box-sizing: border-box;
}
#view-org .org-area-header {
  min-height: 40px;
  background: #1d285e;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.05;
}
#view-org .org-section-header {
  min-height: 34px;
  background: #2c54d8;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}

#view-org .org-person-card {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--node-width, 178px);
  min-height: 58px;
  padding: 5px 9px 5px 5px;
  border: 1px solid #cdd5ea;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(31, 45, 101, 0.05);
}
#view-org .org-person-card.root {
  width: 184px;
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  text-align: center;
  border-radius: 16px;
  border-color: #1d285e;
}
#view-org .org-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.04em;
  border: 1px solid rgba(14, 24, 49, 0.13);
  background: linear-gradient(
    145deg,
    var(--avatar-a, #7684c7),
    var(--avatar-b, #36447d)
  );
  box-shadow: 0 1px 2px rgba(20, 28, 63, 0.13);
}
#view-org .org-person-card.root .org-avatar {
  width: 51px;
  height: 51px;
  border: 0;
  font-size: var(--font-size-md);
}

#view-org .org-copy strong {
  display: block;
  color: #202539;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-org .org-copy span {
  display: block;
  color: #66708d;
  font-size: 8.5px;
  line-height: 1.2;
  margin-top: 3px;
  white-space: normal;
}
#view-org .org-person-card.root .org-copy,
#view-directory-profile .directory-month-control,
#directoryRecordModal .directory-month-control,
#view-hours .timesheet-period-title-row,
.login-brand-lockup .brand-logo {
  width: 100%;
}

/* [AGRUPADO-256] Estilos 100% idénticos agrupados. Origen: líneas 1943, 2665, 3330. */
#view-org .org-person-card.root .org-copy span,
#view-procedures .procedure-document-row .procedure-scope,
#transportRequestModal .transport-map-preview > div span {
  font-size: var(--font-size-2xs);
}

/* Organigrama — interacción, búsqueda, detalle y pantalla ampliada */

#view-org .org-person-card {
  cursor: pointer;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
#view-org .org-person-card:hover {
  border-color: #95adff;
  box-shadow: 0 7px 16px rgba(38, 65, 165, 0.13);
  transform: translateY(-1px);
}
#view-org .org-person-card:focus-visible {
  outline: 3px solid rgba(44, 84, 216, 0.28);
  outline-offset: 3px;
}
#view-org
  .org-html-canvas.has-active-search
  .org-person-card:not(.is-search-match) {
  opacity: 0.23;
}
#view-org .org-person-card.is-search-match {
  border-color: var(--blue);
  box-shadow:
    0 0 0 4px rgba(44, 84, 216, 0.14),
    0 9px 20px rgba(36, 68, 180, 0.18);
  transform: translateY(-2px) scale(1.02);
  z-index: 8;
}
#view-org .org-html-card.is-expanded,
#view-org .org-html-card:fullscreen {
  position: fixed;
  inset: 14px;
  z-index: 190;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(18, 28, 72, 0.28);
}
#view-org .org-html-card.is-expanded .org-html-scroll,
#view-org .org-html-card:fullscreen .org-html-scroll {
  flex: 1;
  min-height: 0;
}

/* [AGRUPADO-257] Estilos 100% idénticos agrupados. Origen: líneas 1970, 2052. */
.org-person-modal-hero,
.directory-person-modal-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcff;
}

/* [AGRUPADO-258] Estilos 100% idénticos agrupados. Origen: líneas 1972, 2054, 2433. */
.org-person-modal-hero .eyebrow,
.directory-person-modal-hero .eyebrow,
.crm-detail-hero .eyebrow {
  margin: 0 0 3px;
  font-size: var(--font-size-2xs);
}
/* [AGRUPADO-259] Estilos 100% idénticos agrupados. Origen: líneas 1973, 2055, 2434. */
.org-person-modal-hero h2,
.directory-person-modal-hero h2,
.crm-detail-hero h2 {
  font-size: var(--font-size-3xl);
  margin: 0;
  letter-spacing: -0.4px;
}

/* [AGRUPADO-260] Estilos 100% idénticos agrupados. Origen: líneas 1975, 2057. */
.org-person-detail-grid,
.directory-person-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
/* [AGRUPADO-261] Estilos 100% idénticos agrupados. Origen: líneas 1976, 2058, 2437, 3681, 3793. */
.org-person-detail-grid > div,
.directory-person-detail-grid > div,
.crm-detail-grid > div,
.request-detail-grid > div,
.absence-detail-grid > div {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}
/* [AGRUPADO-262] Estilos 100% idénticos agrupados. Origen: líneas 1977, 2059, 2438, 2756, 2915, 3034. */
.org-person-detail-grid > div.full,
.directory-person-detail-grid > div.full,
.crm-detail-grid > div.full,
.modal-evaluation #evaluationForm:not(.has-feedback) .field.full,
#directoryPersonModal .directory-readonly-field.full,
#view-directory-profile .directory-readonly-field.full {
  grid-column: 1 / -1;
}
/* [AGRUPADO-263] Estilos 100% idénticos agrupados. Origen: líneas 1978, 2060. */
.org-person-detail-grid span,
.directory-person-detail-grid span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
/* [AGRUPADO-264] Estilos 100% idénticos agrupados. Origen: líneas 1979, 2061. */
.org-person-detail-grid strong,
.directory-person-detail-grid strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

/* Directorio — vistas, filtro y ficha de colaborador */
#view-directory .directory-view-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
#view-directory .directory-view-toggle button {
  border: 0;
  background: transparent;
  border-radius: 7px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--muted);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#view-directory .directory-person-card {
  cursor: pointer;
  outline: none;
}
#view-directory .directory-person-card:focus-visible {
  outline: 3px solid rgba(44, 84, 216, 0.24);
  outline-offset: 3px;
}
#view-directory .directory-open-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: var(--transition-fast);
}

#view-directory .person-meta,
#view-vacation-balance-detail
  .vacation-balance-summary-grid
  article:first-child,
#vacationLiquidationReviewModal .vacation-liquidation-liquidable-days {
  justify-content: flex-start;
}

#view-directory .directory-area-filter {
  position: relative;
  min-width: 176px;
  padding: 0 30px 0 14px;
  gap: 7px;
}
#view-directory .directory-area-filter > i:first-child {
  width: 15px;
  height: 15px;
  flex: none;
  margin-left: 0;
}
#view-directory .directory-area-filter select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 0;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
#view-directory .directory-area-filter > i:last-child {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  color: var(--muted);
}
/* [AGRUPADO-268] Estilos 100% idénticos agrupados. Origen: líneas 2015, 2081. */
#view-directory .directory-external-pill,
#directoryPersonModal .directory-external-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}
/* [AGRUPADO-269] Estilos 100% idénticos agrupados. Origen: líneas 2019, 7708. */
#view-directory .directory-status-filter,
#view-vacations .vacation-administration-table th:nth-child(11),
#view-vacations .vacation-administration-table td:nth-child(11) {
  min-width: 190px;
}
#view-directory .directory-person-card[data-directory-status="inactive"] {
  background: #fafbfc;
  border-color: #dfe3eb;
}
#view-directory
  .directory-person-card[data-directory-status="inactive"]
  .avatar {
  filter: saturate(0.55);
}
#view-directory .directory-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #f4b8b2;
  background: #fff1f0;
  color: #b42318;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}
#view-directory .directory-status-filter select option[value="inactive"],
#view-directory .directory-status-filter.is-inactive select,
#view-directory .directory-status-filter.is-inactive > i:first-child {
  color: #b42318;
}

.directory-person-modal-status,
#directoryPersonModal .directory-person-modal-status {
  display: none;
  margin-top: 7px;
}
.directory-person-modal-status.is-visible,
#directoryPersonModal .directory-person-modal-status.is-visible {
  display: inline-flex;
}
#directoryPersonModalEmailButton,
.org-person-modal .primary-btn {
  text-decoration: none;
}

#view-directory .directory-area-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 2px;
}
#view-directory .directory-area-group-header::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
#view-directory .directory-area-group-header .directory-area-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#view-directory .directory-area-group-header h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  letter-spacing: -0.25px;
  white-space: nowrap;
}

#view-directory .directory-grid.is-list-view .directory-person-card {
  display: grid;
  grid-template-columns:
    44px minmax(170px, 1.15fr) minmax(170px, 1fr) minmax(150px, 0.8fr)
    28px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  min-height: 64px;
}
#view-directory .directory-grid.is-list-view .person-top {
  display: contents;
}
#view-directory .directory-grid.is-list-view .person-top .avatar {
  grid-column: 1;
  grid-row: 1;
}
#view-directory .directory-grid.is-list-view .directory-open-icon {
  grid-column: 5;
  grid-row: 1;
}
#view-directory .directory-grid.is-list-view h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--font-size-md);
}
#view-directory .directory-grid.is-list-view .person-role {
  grid-column: 3;
  grid-row: 1;
  height: auto;
  margin: 0;
  font-size: var(--font-size-sm);
}
#view-directory .directory-grid.is-list-view .person-meta {
  grid-column: 4;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
}
#view-directory .directory-grid .person-top .avatar img,
.org-person-modal-avatar span,
.org-person-modal-avatar span img {
  width: 46px !important;
  height: 46px !important;
  font-size: var(--font-size-base);
}
.directory-person-modal-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 2px 6px rgba(25, 34, 76, 0.15);
}

#view-directory label.filter-chip {
  width: 220px;
  padding: 0;
}
#view-directory label svg:first-child {
  position: relative;
  left: 12px;
  height: 20px;
}
#view-directory select {
  width: 180px !important;
  position: absolute;
  left: 40px;
}
#view-directory select + svg {
  position: relative;
  left: 158px;
  height: 20px;
  pointer-events: none;
}

/* Directorio — pill de colaborador externo en fichas ampliadas */

/* Navegación — Documentación, logo y perfil */
.brand {
  margin: 0;
  padding: 0 12px 26px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.brand-logo {
  display: block;
  width: 100%;
  line-height: 0;
}
.brand-logo svg,
.login-card-simple .login-brand-lockup svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Centro de Documentación */

#view-documentation .documentation-document-row[hidden] {
  display: none !important;
}
#view-documentation-sections h3[id^="document-"],
#view-documentation-sections h3[id^="transport-policy-"] {
  scroll-margin-top: 90px;
}
#view-documentation .documentation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#view-documentation .documentation-card {
  padding: 20px;
  min-height: 235px;
  display: flex;
  flex-direction: column;
}
#view-documentation .documentation-card-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-2);
  color: var(--blue);
  margin-bottom: 17px;
}

#view-documentation .documentation-card h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  letter-spacing: -0.4px;
  margin: 0 0 7px;
}
#view-documentation .documentation-card p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--muted);
  margin: 0;
}
#view-documentation .documentation-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#view-documentation.view.content,
#view-documentation-sections .view.content {
  display: none;
}
#view-documentation.view.content.active,
#view-documentation-sections .view.content.active {
  display: block;
}

.profile-top-menu {
  position: relative;
  display: flex;
  align-items: center;
}
.profile-top-trigger {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  padding: 4px 8px 4px 5px;
  text-align: left;
}
.profile-top-trigger:hover,
.profile-top-menu.is-open .profile-top-trigger {
  border-color: #c9d6ff;
  background: var(--blue-2);
}

.profile-top-copy {
  min-width: 0;
  display: block;
  line-height: 1.1;
}
.profile-top-copy strong {
  display: block;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.profile-top-trigger > i {
  width: 15px;
  height: 15px;
  color: #8b93ae;
  transition: transform 0.18s ease;
}
.profile-top-menu.is-open .profile-top-trigger > i {
  transform: rotate(180deg);
  color: var(--blue);
}
.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: 230px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(24, 37, 91, 0.16);
  display: none;
}
.profile-top-menu.is-open .profile-dropdown {
  display: block;
  animation: fade 0.16s ease;
}
.profile-dropdown-info {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 7px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
}
.profile-dropdown-info .avatar {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
}

.profile-dropdown button,
.profile-dropdown a {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--red);
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-decoration: none;
}

/* Menú — logo compacto y navegación vertical con scroll contextual */
.brand-logo {
  width: 95px;
}

#sidebarHomeButton:focus-visible {
  outline: 3px solid rgba(44, 84, 216, 0.24);
  outline-offset: 3px;
  border-radius: 10px;
}
.sidebar .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 7px 24px 0;
  margin-right: -7px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sidebar .nav::-webkit-scrollbar {
  width: 9px;
}

.sidebar .nav::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
.sidebar:hover .nav,
.sidebar:focus-within .nav {
  scrollbar-color: #aebad8 transparent;
}
.sidebar:hover .nav::-webkit-scrollbar-thumb,
.sidebar:focus-within .nav::-webkit-scrollbar-thumb {
  background: #aebad8;
  background-clip: content-box;
}
.sidebar-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 13px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #dfe5f1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #75809c;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(31, 45, 101, 0.09);
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.sidebar.has-nav-overflow:not(.nav-at-end) .sidebar-scroll-hint {
  opacity: 0.58;
  transform: translateX(-50%);
}
.sidebar.has-nav-overflow:not(.nav-at-end):hover .sidebar-scroll-hint,
.sidebar.has-nav-overflow:not(.nav-at-end):focus-within .sidebar-scroll-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}
.sidebar-scroll-hint-arrow {
  font-size: var(--font-size-base);
  line-height: 0.7;
  animation: sidebarScrollNudge 1.25s ease-in-out infinite;
}
@keyframes sidebarScrollNudge {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(2px);
  }
}

/* Descripciones de puesto — Área de Cuentas */
#view-ddp .ddp-steps {
  padding: 2px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: #c4cde0 transparent;
}
#view-ddp .ddp-step {
  flex: 0 0 168px;
  min-height: 88px;
  cursor: pointer;
  transition: var(--transition-base);
}
#view-ddp .ddp-step:hover {
  border-color: #c4d1ff;
  background: #fbfcff;
  transform: translateY(-1px);
}
#view-ddp .ddp-step.active {
  border-color: #9fb4ff;
  background: #f6f8ff;
  box-shadow: 0 5px 12px rgba(43, 75, 181, 0.08);
}
#view-ddp .ddp-step strong {
  line-height: 1.28;
}

#view-ddp .ddp-head,
#view-performance .evaluation-row,
#view-objectives .objectives-heading,
.objective-info-modal-body,
#view-support .support-page-heading,
#view-vacations .vacation-bag-row-benefit,
#view-assets .asset-ticket-head,
#view-vacation-balance-detail .vacation-balance-detail-heading,
#view-vacations #vacation-panel-mi-equipo .vacation-team-head {
  align-items: flex-start;
}

#view-ddp .ddp-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 2px;
}
/* [AGRUPADO-277] Estilos 100% idénticos agrupados. Origen: líneas 2201, 2914, 3033, 3898. */
#view-ddp .ddp-meta-grid > div,
#directoryPersonModal .directory-readonly-field,
#view-directory-profile .directory-readonly-field,
#absenceRequestModal .absence-request-review > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  background: #fbfcff;
  min-width: 0;
}
/* [AGRUPADO-278] Estilos 100% idénticos agrupados. Origen: líneas 2202, 3678, 3791, 4617, 4847. */
#view-ddp .ddp-meta-grid span,
#view-ddp .ddp-requirement-grid > div > span,
#view-ddp .ddp-experience-grid span,
.request-detail-status span,
.request-detail-grid span,
.absence-detail-status span,
.absence-detail-grid span,
#view-objectives .objective-weight-box span,
#view-objectives .objective-contribution-box span,
#view-objectives .objective-sheet-metrics .objective-weight-box span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#view-ddp .ddp-meta-grid strong {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}
#view-ddp .ddp-function-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#view-ddp .ddp-function-list li {
  position: relative;
  padding: 0 0 0 17px;
  font-size: var(--font-size-md);
  line-height: 1.52;
  color: var(--ink-2);
}
#view-ddp .ddp-function-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
/* [AGRUPADO-279] Estilos 100% idénticos agrupados. Origen: líneas 2207, 2948, 3067. */
#view-ddp .ddp-requirement-grid,
#directoryPersonModal .directory-assets-grid,
#view-directory-profile .directory-assets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* [AGRUPADO-280] Estilos 100% idénticos agrupados. Origen: líneas 2208, 4426. */
#view-ddp .ddp-requirement-grid > div,
#view-procedures .procedure-role-grid > div {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  background: #fbfcff;
}
#view-ddp .ddp-requirement-grid p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  color: var(--ink-2);
  margin: 7px 0 0;
}
#view-ddp .ddp-experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
#view-ddp .ddp-experience-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
}
#view-ddp .ddp-experience-grid strong {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  color: var(--blue);
  white-space: nowrap;
}
#view-ddp .ddp-competencies-card {
  position: sticky;
  top: 96px;
}
#view-ddp .ddp-competency-section + .ddp-competency-section,
#transportRequestModal .transport-step-actions {
  margin-top: 17px;
}
#view-ddp .ddp-competency-section h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  color: var(--ink);
  margin: 0 0 6px;
}
#view-ddp .ddp-competency-section .competency {
  gap: 7px;
  padding: 8px 0;
}
#view-ddp .ddp-competency-section .competency strong {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}
#view-ddp .ddp-competency-section .dots {
  gap: 2px;
  flex: none;
}
#view-ddp .ddp-competency-section .dot {
  width: 6px;
  height: 6px;
}
#view-ddp .ddp-level-reference {
  margin-top: 17px;
  padding: 11px;
  border-radius: 10px;
  background: #f5f7ff;
  color: var(--ink-2);
}
#view-ddp .ddp-level-reference > strong {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--blue);
}
#view-ddp .ddp-level-reference ol {
  margin: 7px 0 0;
  padding: 0 0 0 16px;
}
#view-ddp .ddp-level-reference li {
  font-size: var(--font-size-2xs);
  line-height: 1.42;
  margin: 3px 0;
}

/* DDP — jerarquía de posición, competencias y detalles complementarios */

#view-ddp .ddp-current-position {
  padding-top: 29px;
}
#view-ddp .ddp-current-position-tag {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: 0.01em;
}
/* [AGRUPADO-285] Estilos 100% idénticos agrupados. Origen: líneas 2249, 2655, 3413. */
#view-ddp .ddp-title-row,
#view-procedures .procedure-document-titleline,
#view-directory-profile .directory-editing-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#view-ddp .ddp-current-position-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

/* [AGRUPADO-286] Estilos 100% idénticos agrupados. Origen: líneas 2257, 2560. */
#view-ddp .ddp-competencies-card .section-head,
.performance-ddp-modal .modal-head {
  margin-bottom: 15px;
}
/* [AGRUPADO-287] Estilos 100% idénticos agrupados. Origen: líneas 2258, 6023, 8461, 8919. */
#view-ddp .ddp-competencies-card .section-head h2,
#view-home .home-section-head h2,
#view-about .about-carousel-counter strong,
#vacationLiquidationReviewModal .vacation-liquidation-buckets strong {
  font-size: var(--font-size-2xl);
}

/* [AGRUPADO-288] Estilos 100% idénticos agrupados. Origen: líneas 2260, 3510. */
#view-ddp .ddp-competency-section + .ddp-competency-section,
#view-directory-profile
  .directory-document-item
  + .directory-documents-subtitle {
  margin-top: 20px;
}
#view-ddp .ddp-competency-section h3 {
  font-size: var(--font-size-base);
  margin-bottom: 8px;
}
#view-ddp .ddp-competency-section .competency {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
#view-ddp .ddp-competency-section .competency strong {
  font-size: var(--font-size-sm);
  line-height: 1.3;
}
#view-ddp .ddp-competency-scale {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
#view-ddp .ddp-competency-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
}
#view-ddp .ddp-competency-section .dots {
  gap: 3px;
}
#view-ddp .ddp-competency-section .dot {
  width: 9px;
  height: 9px;
  background: #dce2f0;
}

#view-ddp .ddp-detail-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 21px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
#view-ddp .ddp-detail-tab {
  min-height: 35px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
}
#view-ddp .ddp-detail-tab:hover {
  border-color: #c9d6ff;
  background: #f7f9ff;
  color: var(--blue);
}

#view-ddp .ddp-detail-tab-panel {
  padding-top: 15px;
  animation: fade 0.18s ease;
}

#view-ddp .ddp-detail-tab-panel > #ddpExperienceDescription {
  font-size: var(--font-size-md);
  line-height: 1.52;
  color: var(--ink-2);
  margin: 0;
}

/* DDP — legibilidad de contenido y proporción de columnas */
#view-ddp .ddp-content {
  grid-template-columns: minmax(390px, 0.82fr) minmax(470px, 1.18fr);
}
#view-ddp .ddp-step {
  min-height: 72px;
}
#view-ddp .ddp-step:not(.ddp-current-position) {
  padding-top: 14px;
}
#view-ddp .ddp-function-list li,
#view-ddp .ddp-requirement-grid p,
#view-ddp .ddp-detail-tab-panel > #ddpExperienceDescription {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* DDP — balance de columnas y jerarquía de competencias */
#view-ddp .ddp-content {
  grid-template-columns: minmax(460px, 1.05fr) minmax(390px, 0.95fr);
}
#view-ddp .ddp-competencies-card .section-head {
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
#view-ddp .ddp-competencies-card .section-head h2 {
  font-size: var(--font-size-4xl);
  letter-spacing: -0.45px;
  color: var(--ink);
}

#view-ddp .ddp-competency-section h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f5f7ff;
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
#view-ddp .ddp-competency-section h3::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
#view-ddp .ddp-competency-level {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
}
#view-ddp .ddp-competency-section .dots {
  gap: 4px;
}

/* DDP — filtro de áreas con acceso para liderazgo */
#view-ddp .ddp-page-heading,
#view-objectives .objectives-heading {
  align-items: flex-end;
}
#view-ddp .ddp-area-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 300px;
  padding: 11px 12px;
  border: 1px solid #dce4f7;
  border-radius: 14px;
  background: #fbfcff;
}
#view-ddp .ddp-area-filter-control {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--blue);
}

#view-ddp .ddp-area-filter-control > i:first-child {
  width: 17px;
  height: 17px;
  flex: none;
}
#view-ddp .ddp-area-filter-control > i:last-child {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex: none;
  pointer-events: none;
}
#view-ddp .ddp-area-filter-control > div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
#view-ddp .ddp-area-filter-control label {
  font-size: var(--font-size-2xs);
  line-height: 1;
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
#view-ddp .ddp-area-filter-control select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
}
#view-ddp .ddp-area-filter-disclaimer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 8px 1px 0;
  border-top: 1px solid #e6ebf5;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}
#view-ddp .ddp-area-filter-disclaimer i {
  width: 13px;
  height: 13px;
  color: var(--blue);
  flex: none;
}
#view-ddp .ddp-area-empty {
  padding: 42px 24px;
  text-align: center;
}

#view-ddp .ddp-area-empty-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: var(--blue-2);
  color: var(--blue);
  display: grid;
  place-items: center;
}

#view-ddp .ddp-area-empty h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  letter-spacing: -0.35px;
  margin: 0 0 6px;
}
#view-ddp .ddp-area-empty p {
  max-width: 430px;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

/* v3.42 — refinamientos DDP, evaluación y CRM comercial */

#view-performance .performance-cycle-head p:not(.eyebrow) {
  max-width: 490px;
}

#view-crm .crm-toolbar,
.modal-evaluation #evaluationForm {
  align-items: stretch;
}
#view-crm .crm-select-filter {
  min-height: 37px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  position: relative;
  min-width: 160px;
}

/* [AGRUPADO-292] Estilos 100% idénticos agrupados. Origen: líneas 2407, 2469. */
#view-crm .crm-select-filter > i,
#view-performance .performance-select-filter > i {
  width: 14px;
  height: 14px;
  flex: none;
  pointer-events: none;
}

#view-crm .crm-select-filter select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  flex: 1;
  height: 35px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
#view-crm .crm-column {
  position: relative;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
#view-crm .crm-column > header {
  position: relative;
  padding: 6px 6px 10px;
  margin: 0 0 10px;
  border-bottom: 2px solid #cfd7ea;
}
#view-crm .crm-column.crm-stage-process > header {
  border-color: var(--blue);
  color: var(--blue);
}
#view-crm .crm-column.crm-stage-review > header {
  border-color: #8b6ee7;
  color: #654dc5;
}
#view-crm .crm-column.crm-stage-client > header {
  border-color: #d79a36;
  color: #9b6405;
}
#view-crm .crm-column.crm-stage-approved > header {
  border-color: var(--green);
  color: var(--green);
}
#view-crm .crm-column.crm-stage-rejected > header {
  border-color: var(--red);
  color: var(--red);
}
#view-crm .crm-column.is-drag-over {
  border-color: var(--blue);
  background: #eef3ff;
  box-shadow: inset 0 0 0 1px rgba(44, 84, 216, 0.12);
}
#view-crm .crm-card {
  cursor: grab;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}
#view-crm .crm-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(31, 49, 130, 0.09);
}
#view-crm .crm-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
#view-crm .crm-card:focus-visible {
  outline: 3px solid rgba(44, 84, 216, 0.25);
  outline-offset: 2px;
}
#view-crm .crm-table {
  min-width: 1040px;
}
#view-crm .crm-area-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

#view-crm .crm-referent {
  min-width: 135px;
}

.crm-detail-modal {
  width: min(600px, 100%);
}
.crm-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcff;
}

.crm-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

/* [AGRUPADO-293] Estilos 100% idénticos agrupados. Origen: líneas 2439, 2659. */
.crm-detail-grid span,
#view-procedures .procedure-document-meta > span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.crm-detail-grid strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
  overflow-wrap: anywhere;
}
#view-policies .policies-home-layout,
#view-procedures .procedures-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* v3.43 — Evaluación de desempeño: ciclo trimestral, evidencia y comparabilidad */
#view-performance .performance-cycle-card {
  min-height: 168px;
}
#view-performance .performance-cycle-head h2 {
  font-size: 19px;
  letter-spacing: -0.42px;
}
#view-performance .performance-cycle-head p:not(.eyebrow) {
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
  max-width: 500px;
}
#view-performance .performance-guidance-card {
  border: 1px solid #dbe4ff;
  border-radius: 16px;
  background: linear-gradient(145deg, #f6f8ff, #fff);
  padding: 17px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

#view-performance .performance-guidance-card p {
  font-size: var(--font-size-sm);
  line-height: 1.48;
  color: var(--muted);
  margin: 4px 0 0;
}
#view-performance .performance-guidance-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
#view-performance .performance-guidance-list span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #dfe6f6;
  color: var(--ink-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}
/* [AGRUPADO-294] Estilos 100% idénticos agrupados. Origen: líneas 2463, 3338, 7525. */
#view-performance .performance-guidance-list i,
#transportRequestModal .transport-route-address-grid .transport-map-label i,
#teamVacationReviewModal .team-vacation-nearby-copy p i {
  width: 12px;
  height: 12px;
  color: var(--blue);
}
#view-performance .performance-select-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 37px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
}

#view-performance .performance-select-filter select {
  min-width: 0;
  height: 35px;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#view-performance .performance-ddp-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--blue);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  text-align: left;
  line-height: var(--line-height-compact);
  cursor: pointer;
}
#view-performance .performance-ddp-link:hover,
#view-directory-profile .directory-document-link-field a:hover {
  text-decoration: underline;
}
#view-performance .performance-ddp-link i {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-left: 3px;
}
#view-performance .performance-previous-cell {
  min-width: 146px;
}

#view-performance .performance-previous-cell .badge {
  margin-top: 4px;
}
#view-performance .performance-avatar {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(17, 28, 75, 0.42);
  font-weight: var(--font-weight-extrabold);
}
#view-performance .evaluation-reference {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 13px 0 0;
  padding: 11px 12px;
  border: 1px solid #dde5f9;
  border-radius: 11px;
  background: #fbfcff;
}
/* [AGRUPADO-296] Estilos 100% idénticos agrupados. Origen: líneas 2488, 3748. */
#view-performance .evaluation-reference > i,
.absence-request-intro i {
  width: 17px;
  height: 17px;
  color: var(--blue);
  flex: none;
  margin-top: 1px;
}

#view-performance .evaluation-reference p {
  margin: 3px 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
  color: var(--muted);
}
#view-performance .evaluation-rows {
  max-height: min(43vh, 420px);
  overflow: auto;
}
#view-performance .evaluation-section-heading {
  padding: 9px 12px;
  background: #f7f9fe;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-xs);
  color: var(--blue);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#view-performance .evaluation-row strong {
  line-height: 1.3;
}
#view-performance .evaluation-row span {
  line-height: 1.42;
  max-width: 520px;
}
#view-performance .evaluation-row .evaluation-expected {
  color: var(--blue);
  font-weight: var(--font-weight-extrabold);
  margin-top: 5px;
}
#view-performance .evaluation-row select {
  flex: none;
  margin-top: 1px;
}
#view-performance .evaluation-feedback-state {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--green-bg);
  color: var(--green);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

#view-performance .performance-empty-filter {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: var(--font-size-sm);
}

/* v3.44 — Evaluación de desempeño: lightboxes, ciclos e historial más claros */

#view-performance .performance-cycle-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
#view-performance .performance-cycle-entry {
  min-height: 142px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--ink-2);
}
#view-performance .performance-cycle-entry:hover {
  border-color: #bfd0ff;
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(36, 57, 145, 0.07);
}
#view-performance .performance-cycle-entry.is-current {
  border-color: #b9caff;
  background: linear-gradient(145deg, #f5f8ff, #fff);
}

#view-performance .performance-cycle-entry strong {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  letter-spacing: -0.25px;
  color: var(--ink);
}

#view-performance .performance-cycle-entry footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--blue);
}

#view-performance .performance-cycle-note {
  margin-top: 15px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #dfe6f7;
  border-radius: 11px;
  background: #fbfcff;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
  color: var(--ink-2);
}

#view-performance .performance-history-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

#view-performance .performance-history-select {
  position: relative;
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
}

#view-performance .performance-history-select > i {
  width: 15px;
  height: 15px;
  flex: none;
  pointer-events: none;
}

#view-performance .performance-history-select select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
}
#view-performance .performance-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 16px;
}
/* [AGRUPADO-298] Estilos 100% idénticos agrupados. Origen: líneas 2541, 7499. */
#view-performance .performance-history-summary > div,
#teamVacationReviewModal .team-vacation-review-meta > div {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}
/* [AGRUPADO-299] Estilos 100% idénticos agrupados. Origen: líneas 2542, 2579, 2916, 3035, 4105, 4532. */
#view-performance .performance-history-summary span,
.performance-ddp-modal-meta span,
#directoryPersonModal .directory-readonly-field span,
#view-directory-profile .directory-readonly-field span,
#view-directory-profile .directory-leave-summary-card span,
.objective-detail-grid span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
/* [AGRUPADO-300] Estilos 100% idénticos agrupados. Origen: líneas 2543, 4533. */
#view-performance .performance-history-summary strong,
.objective-detail-grid strong {
  display: block;
  margin-top: 5px;
  font-size: var(--font-size-md);
  color: var(--ink);
  line-height: var(--line-height-compact);
}

.modal-evaluation {
  width: min(1080px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
}

#view-performance .evaluation-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-height: none;
  overflow: visible;
}
/* [AGRUPADO-301] Estilos 100% idénticos agrupados. Origen: líneas 2549, 4109, 4535. */
#view-performance .evaluation-competency-group,
#view-directory-profile .directory-leave-list,
.objective-mini-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
#view-performance .evaluation-section-heading {
  padding: 10px 12px;
  background: #f5f7ff;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-xs);
  color: var(--blue);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#view-performance .evaluation-competency-group .evaluation-row {
  padding: 12px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

#view-performance .evaluation-row strong {
  font-size: var(--font-size-md);
  line-height: 1.32;
  color: var(--ink);
}
#view-performance .evaluation-row .evaluation-description {
  display: block;
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.48;
  color: #59617c;
  max-width: none;
}
#view-performance .evaluation-row .evaluation-expected {
  display: inline-flex;
  align-items: center;
  margin: 7px 0 0;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-xs);
  line-height: 1;
  font-weight: var(--font-weight-extrabold);
}
#view-performance .evaluation-row select {
  width: 56px;
  height: 35px;
  border-color: #cfd8ee;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
}
#view-performance .evaluation-feedback-state {
  margin-top: 12px;
}

.performance-ddp-modal {
  width: min(980px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.performance-ddp-modal-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 14px;
}
.performance-ddp-modal-functions,
.performance-ddp-modal-competencies,
.performance-ddp-modal-meta {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.performance-ddp-modal-functions {
  padding: 15px;
}
.performance-ddp-modal-content h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  margin: 0 0 9px;
  color: var(--ink);
}
.performance-ddp-modal-functions ol {
  margin: 0;
  padding-left: 19px;
  max-height: 390px;
  overflow: auto;
}
.performance-ddp-modal-functions li {
  font-size: var(--font-size-md);
  line-height: 1.52;
  color: var(--ink-2);
  padding-left: 3px;
  margin: 6px 0;
}

.performance-ddp-modal-competencies {
  padding: 14px;
}
.performance-ddp-modal-competency-group
  + .performance-ddp-modal-competency-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.performance-ddp-modal-competency-group h4 {
  margin: 0 0 7px;
  font-size: var(--font-size-xs);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
.performance-ddp-competency-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #edf0f6;
}

.performance-ddp-competency-row span {
  font-size: var(--font-size-sm);
  line-height: 1.28;
  color: var(--ink-2);
}
.performance-ddp-competency-row strong {
  white-space: nowrap;
  color: var(--blue);
  font-size: var(--font-size-xs);
}
.performance-ddp-modal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}
.performance-ddp-modal-meta > div {
  padding: 10px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* [AGRUPADO-302] Estilos 100% idénticos agrupados. Origen: líneas 2580, 3901. */
.performance-ddp-modal-meta strong,
#absenceRequestModal .absence-request-review strong {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--ink);
}

/* CRM — estados legibles a escala de columna */
#view-crm .crm-column.crm-stage-process {
  background: #f4f7ff;
  border-color: #d8e2ff;
}
#view-crm .crm-column.crm-stage-review {
  background: #faf8ff;
  border-color: #e2d9fb;
}
#view-crm .crm-column.crm-stage-client {
  background: #fffbf3;
  border-color: #f4e2bd;
}
#view-crm .crm-column.crm-stage-approved {
  background: #f4fbf8;
  border-color: #d3eee4;
}
#view-crm .crm-column.crm-stage-rejected {
  background: #fff8f9;
  border-color: #f2d8de;
}
#view-crm .crm-column > header {
  background: rgba(255, 255, 255, 0.58);
  border-radius: 9px;
  padding: 8px 8px 10px;
}
#view-crm .crm-referent .avatar,
#view-crm .crm-referent.avatar {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(16, 25, 66, 0.48);
  font-weight: var(--font-weight-extrabold);
}

/* v3.45 — Desempeño, documentación y CRM: refinamientos de legibilidad y estructura */
/* Evaluación: jerarquía, ritmo y modal de carga */
.modal-evaluation {
  width: min(1100px, calc(100vw - 36px));
  padding: 24px 26px 22px;
  border-radius: 20px;
}
.modal-evaluation .modal-head {
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.modal-evaluation .modal-head h2 {
  font-size: var(--font-size-5xl);
  letter-spacing: -0.48px;
  margin: 0;
}
.modal-evaluation .modal-head p:not(.eyebrow) {
  max-width: 690px;
  margin: 5px 0 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
  color: var(--muted);
}
#view-performance .evaluation-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  font-size: var(--font-size-xs);
}
#view-performance .evaluation-reference {
  padding: 12px 13px;
  margin: 12px 0 14px;
  border-color: #dfe6f7;
}

#view-performance .evaluation-reference p {
  font-size: var(--font-size-sm);
  line-height: 1.44;
}
#view-performance .evaluation-rows {
  gap: 12px;
}
#view-performance .evaluation-section-heading {
  padding: 10px 13px;
  font-size: var(--font-size-xs);
  letter-spacing: 0.055em;
}
#view-performance .evaluation-competency-group .evaluation-row {
  padding: 12px 13px;
  gap: 14px;
}
#view-performance .evaluation-row strong {
  font-size: var(--font-size-md);
  line-height: 1.32;
}
#view-performance .evaluation-row .evaluation-description {
  font-size: 10.5px;
  line-height: 1.42;
  color: #66708c;
}
#view-performance .evaluation-row .evaluation-expected {
  margin-top: 6px;
  font-size: var(--font-size-2xs);
}
#view-performance .evaluation-row select {
  width: 60px;
  height: 36px;
  font-size: var(--font-size-base);
}
.modal-evaluation .field.full {
  margin-top: 14px !important;
}

.modal-evaluation .modal-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* DDP consultada desde evaluación: sólo funciones y competencias, sin scroll interno. */
.performance-ddp-modal {
  width: min(1020px, calc(100vw - 36px));
  padding: 24px 25px 22px;
}
.performance-ddp-modal-content {
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr);
  gap: 16px;
  align-items: start;
}
.performance-ddp-modal-functions {
  padding: 17px;
}
.performance-ddp-modal-functions ol {
  max-height: none;
  overflow: visible;
  padding-left: 20px;
}
.performance-ddp-modal-functions li {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  margin: 7px 0;
}
/* [AGRUPADO-304] Estilos 100% idénticos agrupados. Origen: líneas 2631, 5737. */
.performance-ddp-modal-competencies,
#view-vacations #vacation-panel-mis-solicitudes .request-list-pager,
#view-vacations #vacation-panel-mi-equipo .request-list-pager {
  padding: 16px;
}
.performance-ddp-modal-content h3 {
  font-size: var(--font-size-lg);
  margin-bottom: 11px;
}
.performance-ddp-modal-competency-group h4 {
  font-size: var(--font-size-xs);
  margin-bottom: 8px;
}
.performance-ddp-competency-row {
  padding: 7px 0;
}
.performance-ddp-competency-row span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-compact);
}

/* Documentación: filas de consulta, en lugar de tarjetas. */

#view-procedures .procedure-document-row {
  display: grid;
  grid-template-columns:
    44px minmax(290px, 1.5fr) minmax(130px, 0.64fr) minmax(118px, 0.5fr)
    auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
#view-procedures .procedure-document-row:hover {
  transform: none;
  border-color: #bfd0ff;
  box-shadow: 0 7px 16px rgba(36, 57, 145, 0.06);
}
/* [AGRUPADO-305] Estilos 100% idénticos agrupados. Origen: líneas 2650, 5153. */
#view-procedures .procedure-document-icon,
#view-documentation .documentation-document-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
}

#view-procedures .procedure-document-row h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  letter-spacing: -0.2px;
  margin: 0;
}
/* [AGRUPADO-306] Estilos 100% idénticos agrupados. Origen: líneas 2657, 5794, 6500. */
#view-procedures .procedure-document-row p,
#view-assets .asset-ticket-copy p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--muted);
  margin: 4px 0 0;
}
#view-procedures .procedure-document-meta strong {
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-procedures .procedure-document-row .ghost-btn {
  min-height: 32px;
  padding: 0 9px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  justify-self: end;
}

/* [AGRUPADO-307] Estilos 100% idénticos agrupados. Origen: líneas 2666, 5553. */
#view-procedures .procedures-hero,
.onboarding-readable .onboarding-maintenance {
  margin-bottom: 16px;
}

/* CRM: encabezados de etapa con contenedor completo, no borde inferior. */
#view-crm .crm-column > header {
  border: 1px solid #cfd7ea !important;
  margin: 0 0 10px !important;
  padding: 8px 9px !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
#view-crm .crm-column.crm-stage-process > header {
  border-color: #afc2ff !important;
  background: #edf3ff !important;
  color: var(--blue) !important;
}
#view-crm .crm-column.crm-stage-review > header {
  border-color: #cfc0f5 !important;
  background: #f4f0ff !important;
  color: #654dc5 !important;
}
#view-crm .crm-column.crm-stage-client > header {
  border-color: #ecd29f !important;
  background: #fff8e8 !important;
  color: #9b6405 !important;
}
#view-crm .crm-column.crm-stage-approved > header {
  border-color: #bce4d6 !important;
  background: #edf9f4 !important;
  color: var(--green) !important;
}
#view-crm .crm-column.crm-stage-rejected > header {
  border-color: #efc4cd !important;
  background: #fff1f3 !important;
  color: var(--red) !important;
}

/* v3.46 — Documentación y evaluación: mayor legibilidad y composición estable */
#view-procedures .procedure-document-row {
  grid-template-columns:
    44px minmax(330px, 1.45fr) minmax(150px, 0.68fr)
    minmax(126px, 0.54fr) auto;
  align-items: start;
  min-height: 92px;
  padding: 15px 16px;
}
/* [AGRUPADO-309] Estilos 100% idénticos agrupados. Origen: líneas 2699, 3553. */
#view-procedures .procedure-document-icon,
#transportRequestModal .transport-route-summary {
  margin-top: 2px;
}
#view-procedures .procedure-document-main {
  padding: 1px 0;
}
/* [AGRUPADO-310] Estilos 100% idénticos agrupados. Origen: líneas 2703, 4909. */
#view-procedures .procedure-document-titleline,
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-comment-cell
  p {
  min-height: 20px;
}
#view-procedures .procedure-document-row h2 {
  font-size: var(--font-size-lg);
  line-height: 1.3;
}
#view-procedures .procedure-document-category {
  display: flex;
  align-items: center;
  min-height: 22px;
  margin-top: 4px;
}

#view-procedures .procedure-document-row p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.52;
  color: var(--ink-2);
  max-width: 720px;
}
#view-procedures .procedure-document-meta {
  padding-top: 8px;
}
#view-procedures .procedure-document-meta > span {
  font-size: var(--font-size-2xs);
  margin-bottom: 5px;
}
#view-procedures .procedure-document-meta strong {
  font-size: var(--font-size-sm);
  white-space: normal;
}
#view-procedures .procedure-document-row .ghost-btn {
  align-self: center;
}

/* Evaluación trimestral: una jerarquía estable con las competencias siempre en dos columnas en desktop. */
.modal-evaluation {
  width: min(1160px, calc(100vw - 40px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}
.modal-evaluation .modal-head {
  flex: none;
  margin: 0;
  padding: 22px 26px 15px;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.modal-evaluation .modal-head h2 {
  font-size: var(--font-size-5xl);
  line-height: 1.2;
}
.modal-evaluation .modal-head p:not(.eyebrow) {
  font-size: var(--font-size-md);
  line-height: 1.48;
}
.modal-evaluation #evaluationForm {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas: "legend reference" "rows rows" "comment feedback" "actions actions";
  gap: 12px 14px;
  padding: 16px 26px 20px;
  overflow: auto;
  min-height: 0;
}
.modal-evaluation .evaluation-legend {
  grid-area: legend;
  margin: 0 !important;
  min-height: 60px;
  align-items: center;
}
.modal-evaluation .evaluation-reference {
  grid-area: reference;
  margin: 0 !important;
  min-height: 60px;
  padding: 11px 12px;
}
.modal-evaluation .evaluation-rows {
  grid-area: rows;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-height: none !important;
  overflow: visible !important;
}
.modal-evaluation .evaluation-competency-group {
  border-radius: 12px;
}
.modal-evaluation .evaluation-section-heading {
  padding: 11px 13px;
  font-size: var(--font-size-xs);
  line-height: 1.2;
}
.modal-evaluation .evaluation-competency-group .evaluation-row {
  padding: 12px 13px;
  gap: 13px;
}
.modal-evaluation .evaluation-row strong {
  font-size: var(--font-size-md);
  line-height: 1.33;
}
.modal-evaluation .evaluation-row .evaluation-description {
  font-size: var(--font-size-sm);
  line-height: 1.46;
  color: #5e6884;
}
.modal-evaluation .evaluation-row .evaluation-expected {
  font-size: 9.5px;
  margin-top: 7px;
}
.modal-evaluation .evaluation-row select {
  width: 62px;
  height: 37px;
  font-size: var(--font-size-base);
}
.modal-evaluation .field.full {
  grid-area: comment;
  margin: 0 !important;
  align-self: stretch;
}

.modal-evaluation .field textarea {
  min-height: 82px;
  height: 100%;
  font-size: var(--font-size-md);
}
.modal-evaluation .evaluation-feedback-state {
  grid-area: feedback;
  margin: 0;
  align-self: stretch;
  min-height: 82px;
  padding: 12px;
  font-size: var(--font-size-sm);
}
.modal-evaluation .modal-actions {
  grid-area: actions;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

/* v3.47 — Evaluación trimestral: referencias y devolución con alineación consistente */

.modal-evaluation .evaluation-reference {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0;
  box-sizing: border-box;
  background: #f8faff !important;
  border: 1px solid #dbe4fb !important;
  border-radius: 11px !important;
}
.modal-evaluation .evaluation-reference > svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: var(--blue) !important;
  stroke-width: 2 !important;
  margin-top: 1px !important;
}

.modal-evaluation .evaluation-reference strong {
  display: block !important;
  font-size: var(--font-size-md) !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
.modal-evaluation .evaluation-reference p {
  display: block !important;
  margin: 4px 0 0 !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.48 !important;
  color: var(--muted) !important;
}
.modal-evaluation .evaluation-feedback-state {
  display: none;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #c2e9dc;
  border-radius: 11px;
  background: var(--green-bg);
  color: var(--green);
}
.modal-evaluation .evaluation-feedback-state.is-visible {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.modal-evaluation .evaluation-feedback-state > svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: var(--green) !important;
  stroke-width: 2.2 !important;
}
.modal-evaluation .evaluation-feedback-state span {
  display: block;
  min-width: 0;
  font-size: var(--font-size-sm) !important;
  line-height: 1.42 !important;
  font-weight: var(--font-weight-extrabold) !important;
  color: var(--green) !important;
}

/* v3.48 — Evaluación trimestral: referencia del ciclo anterior con altura adaptable */
.modal-evaluation .evaluation-reference {
  min-height: 92px !important;
  height: auto !important;
  align-self: stretch !important;
  overflow: visible !important;
}

.modal-evaluation .evaluation-reference p {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Directorio — perfil integral de colaborador (solo lectura) */
/* [AGRUPADO-311] Estilos 100% idénticos agrupados. Origen: líneas 2864, 2978. */
#directoryPersonModal .directory-profile-modal,
#view-directory-profile .directory-profile-modal {
  width: min(1180px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}
/* [AGRUPADO-312] Estilos 100% idénticos agrupados. Origen: líneas 2868, 2982. */
#directoryPersonModal .directory-profile-sidebar,
#view-directory-profile .directory-profile-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f7f8fd;
  border-right: 1px solid var(--line);
  overflow: auto;
}
/* [AGRUPADO-313] Estilos 100% idénticos agrupados. Origen: líneas 2871, 2985. */
#directoryPersonModal .directory-profile-sidebar-top,
#view-directory-profile .directory-profile-sidebar-top {
  padding: 22px 18px 17px;
  border-bottom: 1px solid var(--line);
}
/* [AGRUPADO-314] Estilos 100% idénticos agrupados. Origen: líneas 2872, 2986. */
#directoryPersonModal .directory-profile-photo,
#view-directory-profile .directory-profile-photo {
  width: 78px;
  height: 78px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #d3dcf0;
  background: #eaf0ff;
  box-shadow: 0 5px 15px rgba(32, 54, 132, 0.12);
  margin-bottom: 13px;
}
/* [AGRUPADO-315] Estilos 100% idénticos agrupados. Origen: líneas 2876, 2990. */
#directoryPersonModal .directory-profile-photo svg,
#view-directory-profile .directory-profile-photo svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* [AGRUPADO-316] Estilos 100% idénticos agrupados. Origen: líneas 2877, 2991. */
#directoryPersonModal .directory-profile-sidebar .eyebrow,
#view-directory-profile .directory-profile-sidebar .eyebrow {
  margin: 0 0 4px;
  font-size: var(--font-size-2xs);
}
/* [AGRUPADO-317] Estilos 100% idénticos agrupados. Origen: líneas 2878, 2992. */
#directoryPersonModal .directory-profile-sidebar h2,
#view-directory-profile .directory-profile-sidebar h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  letter-spacing: -0.45px;
  margin: 0;
  line-height: 1.2;
}
/* [AGRUPADO-318] Estilos 100% idénticos agrupados. Origen: líneas 2879, 2993. */
#directoryPersonModal .directory-profile-sidebar .directory-profile-role,
#view-directory-profile .directory-profile-sidebar .directory-profile-role {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.42;
  color: var(--muted);
}
/* [AGRUPADO-319] Estilos 100% idénticos agrupados. Origen: líneas 2880, 2944, 2994, 3063. */
#directoryPersonModal .directory-profile-sidebar .directory-profile-status,
#directoryPersonModal .directory-record-card + .directory-record-card,
#view-directory-profile .directory-profile-sidebar .directory-profile-status,
#view-directory-profile .directory-record-card + .directory-record-card {
  margin-top: 10px;
}
/* [AGRUPADO-320] Estilos 100% idénticos agrupados. Origen: líneas 2881, 2995. */
#directoryPersonModal .directory-profile-demo-note,
#view-directory-profile .directory-profile-demo-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 15px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dfe5f3;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: 1.42;
}
/* [AGRUPADO-321] Estilos 100% idénticos agrupados. Origen: líneas 2885, 2999, 3137. */
#directoryPersonModal .directory-profile-demo-note i,
#view-directory-profile .directory-profile-demo-note i,
#view-directory-profile .directory-profile-access-note i {
  width: 14px;
  height: 14px;
  color: var(--blue);
  flex: none;
  margin-top: 1px;
}
/* [AGRUPADO-322] Estilos 100% idénticos agrupados. Origen: líneas 2886, 3000. */
#directoryPersonModal .directory-profile-nav,
#view-directory-profile .directory-profile-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 10px 18px;
}
/* [AGRUPADO-323] Estilos 100% idénticos agrupados. Origen: líneas 2887, 3001. */
#directoryPersonModal .directory-profile-nav button,
#view-directory-profile .directory-profile-nav button {
  width: 100%;
  min-height: 35px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
/* [AGRUPADO-324] Estilos 100% idénticos agrupados. Origen: líneas 2891, 3005. */
#directoryPersonModal .directory-profile-nav button i,
#view-directory-profile .directory-profile-nav button i {
  width: 15px;
  height: 15px;
  color: #7d87a5;
  flex: none;
}
/* [AGRUPADO-325] Estilos 100% idénticos agrupados. Origen: líneas 2892, 3006. */
#directoryPersonModal .directory-profile-nav button:hover,
#view-directory-profile .directory-profile-nav button:hover {
  background: #edf2ff;
  color: var(--blue);
}

/* [AGRUPADO-326] Estilos 100% idénticos agrupados. Origen: líneas 2896, 3010. */
#directoryPersonModal .directory-profile-content,
#view-directory-profile .directory-profile-content {
  min-width: 0;
  overflow: auto;
  background: #fff;
  scroll-behavior: smooth;
}
/* [AGRUPADO-327] Estilos 100% idénticos agrupados. Origen: líneas 2897, 3011. */
#directoryPersonModal .directory-profile-content-head,
#view-directory-profile .directory-profile-content-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 26px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
/* [AGRUPADO-328] Estilos 100% idénticos agrupados. Origen: líneas 2901, 3015, 3251. */
#directoryPersonModal .directory-profile-content-head .eyebrow,
#view-directory-profile .directory-profile-content-head .eyebrow,
#view-directory-profile .directory-readonly-field.is-editing > span {
  margin: 0 0 5px;
}
/* [AGRUPADO-329] Estilos 100% idénticos agrupados. Origen: líneas 2902, 3016. */
#directoryPersonModal .directory-profile-content-head h2,
#view-directory-profile .directory-profile-content-head h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  letter-spacing: -0.5px;
  margin: 0;
}
/* [AGRUPADO-330] Estilos 100% idénticos agrupados. Origen: líneas 2903, 3017. */
#directoryPersonModal .directory-profile-content-head p:not(.eyebrow),
#view-directory-profile .directory-profile-content-head p:not(.eyebrow) {
  margin: 5px 0 0;
  font-size: var(--font-size-sm);
  color: var(--muted);
  line-height: 1.42;
}

/* [AGRUPADO-331] Estilos 100% idénticos agrupados. Origen: líneas 2905, 3019. */
#directoryPersonModal .directory-profile-section,
#view-directory-profile .directory-profile-section {
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 84px;
}

/* [AGRUPADO-332] Estilos 100% idénticos agrupados. Origen: líneas 2907, 3021. */
#directoryPersonModal .directory-profile-section-head,
#view-directory-profile .directory-profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* [AGRUPADO-333] Estilos 100% idénticos agrupados. Origen: líneas 2909, 2950, 3023, 3069, 3733. */
#directoryPersonModal .directory-profile-section-icon,
#directoryPersonModal .directory-asset-card > span,
#view-directory-profile .directory-profile-section-icon,
#view-directory-profile .directory-asset-card > span,
#view-absences .absence-type-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
  flex: none;
}

/* [AGRUPADO-334] Estilos 100% idénticos agrupados. Origen: líneas 2911, 3025. */
#directoryPersonModal .directory-profile-section h3,
#view-directory-profile .directory-profile-section h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  letter-spacing: -0.3px;
  margin: 0;
}
/* [AGRUPADO-335] Estilos 100% idénticos agrupados. Origen: líneas 2912, 3026. */
#directoryPersonModal .directory-profile-section-head p,
#view-directory-profile .directory-profile-section-head p {
  margin: 3px 0 0;
  font-size: var(--font-size-xs);
  color: var(--muted);
  line-height: 1.38;
}
/* [AGRUPADO-336] Estilos 100% idénticos agrupados. Origen: líneas 2913, 3027. */
#directoryPersonModal .directory-readonly-grid,
#view-directory-profile .directory-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

/* [AGRUPADO-337] Estilos 100% idénticos agrupados. Origen: líneas 2917, 3036. */
#directoryPersonModal .directory-readonly-field strong,
#view-directory-profile .directory-readonly-field strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.34;
  overflow-wrap: anywhere;
}
/* [AGRUPADO-338] Estilos 100% idénticos agrupados. Origen: líneas 2918, 3037. */
#directoryPersonModal .directory-readonly-field p,
#view-directory-profile .directory-readonly-field p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: 1.46;
  overflow-wrap: anywhere;
}
/* [AGRUPADO-339] Estilos 100% idénticos agrupados. Origen: líneas 2919, 3038. */
#directoryPersonModal .directory-readonly-field.select-like,
#view-directory-profile .directory-readonly-field.select-like {
  position: relative;
  padding-right: 34px;
}
/* [AGRUPADO-340] Estilos 100% idénticos agrupados. Origen: líneas 2920, 3039. */
#directoryPersonModal .directory-readonly-field.select-like i,
#view-directory-profile .directory-readonly-field.select-like i {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transform: translateY(2px);
}
/* [AGRUPADO-341] Estilos 100% idénticos agrupados. Origen: líneas 2921, 3040. */
#directoryPersonModal .directory-profile-map,
#view-directory-profile .directory-profile-map {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  border: 1px solid #dce3f2;
  border-radius: 12px;
  background: #edf2fa;
}
/* [AGRUPADO-342] Estilos 100% idénticos agrupados. Origen: líneas 2924, 3043. */
#directoryPersonModal .directory-profile-map::before,
#view-directory-profile .directory-profile-map::before {
  content: "";
  position: absolute;
  inset: -25px;
  background:
    linear-gradient(
      25deg,
      transparent 39%,
      rgba(255, 255, 255, 0.96) 40% 47%,
      transparent 48%
    ),
    linear-gradient(
      109deg,
      transparent 42%,
      rgba(255, 255, 255, 0.94) 43% 49%,
      transparent 50%
    ),
    linear-gradient(
      164deg,
      transparent 46%,
      rgba(255, 255, 255, 0.95) 47% 55%,
      transparent 56%
    ),
    linear-gradient(
      72deg,
      transparent 42%,
      rgba(190, 202, 225, 0.7) 43% 44%,
      transparent 45%
    ),
    linear-gradient(#e7edf8, #f3f6fc);
  transform: rotate(-3deg);
}
/* [AGRUPADO-343] Estilos 100% idénticos agrupados. Origen: líneas 2933, 3052. */
#directoryPersonModal .directory-map-label,
#view-directory-profile .directory-map-label {
  position: absolute;
  left: 14px;
  top: 13px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--ink-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 2px 7px rgba(37, 53, 113, 0.1);
}
/* [AGRUPADO-344] Estilos 100% idénticos agrupados. Origen: líneas 2937, 3056. */
#directoryPersonModal .directory-map-marker,
#view-directory-profile .directory-map-marker {
  position: absolute;
  left: 56%;
  top: 49%;
  width: 31px;
  height: 31px;
  border-radius: 50% 50% 50% 0;
  background: var(--blue);
  transform: rotate(-45deg);
  box-shadow: 0 5px 12px rgba(27, 55, 170, 0.28);
}
/* [AGRUPADO-345] Estilos 100% idénticos agrupados. Origen: líneas 2941, 3060. */
#directoryPersonModal .directory-map-marker::after,
#view-directory-profile .directory-map-marker::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
}
/* [AGRUPADO-346] Estilos 100% idénticos agrupados. Origen: líneas 2942, 3061. */
#directoryPersonModal .directory-map-caption,
#view-directory-profile .directory-map-caption {
  position: absolute;
  right: 13px;
  bottom: 12px;
  font-size: var(--font-size-2xs);
  color: #6d7896;
  font-weight: var(--font-weight-bold);
}
/* [AGRUPADO-347] Estilos 100% idénticos agrupados. Origen: líneas 2943, 3062. */
#directoryPersonModal .directory-record-card,
#view-directory-profile .directory-record-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* [AGRUPADO-348] Estilos 100% idénticos agrupados. Origen: líneas 2945, 3064. */
#directoryPersonModal .directory-record-card-head,
#view-directory-profile .directory-record-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* [AGRUPADO-349] Estilos 100% idénticos agrupados. Origen: líneas 2947, 3066. */
#directoryPersonModal .directory-record-card-head span,
#view-directory-profile .directory-record-card-head span {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--blue-2);
  color: var(--blue);
  white-space: nowrap;
}

/* [AGRUPADO-350] Estilos 100% idénticos agrupados. Origen: líneas 2949, 3068. */
#directoryPersonModal .directory-asset-card,
#view-directory-profile .directory-asset-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}

/* [AGRUPADO-351] Estilos 100% idénticos agrupados. Origen: líneas 2953, 3072. */
#directoryPersonModal .directory-asset-card small,
#view-directory-profile .directory-asset-card small {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--muted);
  line-height: var(--line-height-normal);
}
/* [AGRUPADO-352] Estilos 100% idénticos agrupados. Origen: líneas 2954, 3073. */
#directoryPersonModal .directory-profile-footer,
#view-directory-profile .directory-profile-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 26px;
  background: #fbfcff;
}
/* Directorio — perfil integral de colaborador (solo lectura) */

#view-directory-profile .directory-profile-exit-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 13px;
  border: 1px solid #f0b8bd;
  border-radius: 11px;
  background: #fff5f5;
  color: var(--red);
}

#view-directory-profile .directory-profile-exit-notice > i {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}
#view-directory-profile .directory-profile-exit-notice strong {
  display: block;
  font-size: var(--font-size-md);
  line-height: 1.3;
}
#view-directory-profile .directory-profile-exit-notice span {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
  color: #9e3440;
}

/* Directorio — ficha en vista principal, con paneles independientes */
#view-directory-profile .directory-profile-page {
  max-width: 1320px;
  margin: 0 auto;
}
#view-directory-profile .directory-profile-modal {
  width: 100%;
  height: auto;
  max-height: none;
  min-height: calc(100vh - 156px);
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: visible;
  box-shadow: var(--shadow);
  background: #fff;
}
#view-directory-profile .directory-profile-sidebar {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  align-self: start;
  overflow: auto;
  border-right: 1px solid var(--line);
  border-radius: 20px 0 0 20px;
  background: #f7f8fd;
}
#view-directory-profile .directory-profile-content {
  min-width: 0;
  overflow: visible;
  background: #fff;
}
#view-directory-profile .directory-profile-content-head {
  top: 76px;
}
#view-directory-profile .directory-profile-section {
  display: none;
  border-bottom: 0;
  min-height: 500px;
}

/* [AGRUPADO-368] Estilos 100% idénticos agrupados. Origen: líneas 3112, 5524. */
#view-directory-profile .directory-profile-footer,
.onboarding-readable .onboarding-matrix tr + tr {
  border-top: 1px solid var(--line);
}

#view-directory-profile .directory-profile-nav button.active::after {
  content: "";
  position: absolute;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Directorio — refinamientos de legajo de colaborador */
#view-directory-profile .directory-readonly-field.select-like {
  padding-right: 11px;
}

#view-directory-profile .directory-profile-access-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 15px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dfe5f3;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: 1.42;
}

#view-directory-profile .directory-profile-modal {
  position: relative;
  align-items: stretch;
}
#view-directory-profile .directory-profile-modal::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 276px;
  border-radius: 20px 0 0 20px;
  background: #f7f8fd;
  border-right: 1px solid var(--line);
  pointer-events: none;
}

#view-directory-profile .directory-profile-sidebar {
  align-self: stretch;
  background: transparent;
  border-right: 0;
}
/* [AGRUPADO-369] Estilos 100% idénticos agrupados. Origen: líneas 3146, 9208. */
#view-directory-profile .directory-profile-content,
#view-home .home-launch-grid > .home-panel,
#view-home .home-launch-grid > .home-birthday {
  min-height: 100%;
}

/* v3.52 — Directorio: ficha más clara y sidebar anclado arriba */
#view-directory-profile .directory-profile-sidebar {
  align-self: start;
  height: fit-content;
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
}
#view-directory-profile .directory-profile-seniority {
  margin: 5px 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
  color: var(--muted);
  font-weight: var(--font-weight-bold);
}
#view-directory-profile .directory-readonly-field.select-like {
  padding-right: 11px !important;
}

#view-directory-profile .directory-record-card {
  position: relative;
  margin-top: 17px !important;
  padding: 18px 14px 14px;
  border-color: #dce4f4;
  background: linear-gradient(145deg, #f9fbff, #fff 66%);
  box-shadow: 0 5px 14px rgba(32, 54, 132, 0.045);
}
/* [AGRUPADO-371] Estilos 100% idénticos agrupados. Origen: líneas 3173, 3392. */
#view-directory-profile .directory-record-card + .directory-record-card,
#view-directory-profile .directory-record-timeline .directory-record-card {
  margin-top: 16px !important;
}
#view-directory-profile .directory-record-card::before {
  position: absolute;
  left: 13px;
  top: -9px;
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border: 1px solid #d4e0ff;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
#view-directory-profile
  #directory-profile-formacion
  .directory-record-card:nth-of-type(1)::before,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:nth-of-type(1)[data-record-type="formacion"]::before {
  content: "Formación 01";
}
#view-directory-profile
  #directory-profile-formacion
  .directory-record-card:nth-of-type(2)::before,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:nth-of-type(2)[data-record-type="formacion"]::before {
  content: "Formación 02";
}
#view-directory-profile
  #directory-profile-experiencia
  .directory-record-card:nth-of-type(1)::before,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:nth-of-type(
    1
  )[data-record-type="experiencia"]::before {
  content: "Experiencia 01";
}
#view-directory-profile
  #directory-profile-experiencia
  .directory-record-card:nth-of-type(2)::before,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:nth-of-type(
    2
  )[data-record-type="experiencia"]::before {
  content: "Experiencia 02";
}
#view-directory-profile
  #directory-profile-experiencia
  .directory-record-card:nth-of-type(3)::before,
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:nth-of-type(
    3
  )[data-record-type="experiencia"]::before {
  content: "Experiencia 03";
}
#view-directory-profile .directory-record-card-head {
  padding-bottom: 10px;
  border-bottom: 1px solid #e7ebf5;
  margin-bottom: 12px;
}
#view-directory-profile .directory-record-card .directory-readonly-field,
#view-about .identity-color-ratio .white {
  background: #fff;
}
.profile-top-copy {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
}
.profile-top-copy > span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.profile-top-trigger {
  min-height: 47px;
}

/* v3.52 — Reintegros como módulo independiente */

#view-reimbursements .transport-filter-menu {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  min-width: 158px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(28, 42, 92, 0.14);
  display: none;
}

/* v3.53 — Acceso a Mis datos desde el menú de perfil */
/* [AGRUPADO-378] Estilos 100% idénticos agrupados. Origen: líneas 3216, 5366, 6509, 7319, 7810, 7943. */
.profile-dropdown .profile-dropdown-my-data,
#view-vacations .vacation-bag-policy-link:hover,
.profile-dropdown .profile-dropdown-support,
#vacationBalanceDetailModal .vacation-balance-history-table td,
#view-vacation-balance-detail .vacation-balance-history-table td {
  color: var(--ink-2);
}

.profile-dropdown-divider {
  height: 1px;
  margin: 5px 3px;
  background: var(--line);
}
#view-directory-profile.is-self-profile .directory-profile-access-note {
  background: #f5f7ff;
  border-color: #dce4ff;
}

#view-directory-profile.is-self-profile .directory-profile-sidebar-top {
  padding-bottom: 19px;
}

/* v3.54 — Mis datos, edición de legajo, cancelación y formularios operativos */

#view-directory-profile.is-self-profile .directory-profile-access-note {
  display: block;
  margin-top: 16px;
  padding: 13px 13px 13px 40px;
  position: relative;
  border: 1px solid #cddaff;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff4ff, #fff);
  color: var(--ink-2);
  box-shadow: 0 4px 11px rgba(38, 71, 174, 0.06);
}
#view-directory-profile.is-self-profile .directory-profile-access-note > i {
  position: absolute;
  left: 13px;
  top: 14px;
  width: 18px;
  height: 18px;
  color: var(--blue);
}
#view-directory-profile.is-self-profile #directoryProfileAccessNoteText {
  display: block;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
#view-directory-profile.is-self-profile #directoryProfileAccessNoteText strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: var(--font-size-md);
}
#view-directory-profile.is-self-profile #directoryProfileAccessNoteText span {
  display: block;
  color: var(--ink-2);
}
/* [AGRUPADO-379] Estilos 100% idénticos agrupados. Origen: líneas 3249, 3588, 8171. */
#view-directory-profile .directory-profile-section.is-editing,
.support-evidence-field .transport-file-input,
.request-team-table tbody tr:hover {
  background: #fbfcff;
}
#view-directory-profile .directory-readonly-field.is-editing {
  padding: 8px 9px;
  background: #f7f9ff;
  border-color: #c7d5ff;
}

#view-directory-profile .directory-inline-editor {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbd7f5;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  padding: 7px 8px;
  outline: 0;
}
/* [AGRUPADO-380] Estilos 100% idénticos agrupados. Origen: líneas 3253, 3433, 3471. */
#view-directory-profile .directory-inline-editor:focus,
#view-directory-profile
  .directory-month-control:focus-within
  .date-input-display,
#view-directory-profile .directory-month-control.is-open .date-input-display,
#directoryRecordModal .directory-month-control:focus-within .date-input-display,
#directoryRecordModal .directory-month-control.is-open .date-input-display,
#view-directory-profile .directory-phone-editor select:focus {
  border-color: #7d9dff;
  box-shadow: 0 0 0 3px #eaf0ff;
}
#view-directory-profile select.directory-inline-editor {
  height: 35px;
  padding: 0 8px;
  cursor: pointer;
}
#view-directory-profile textarea.directory-inline-editor {
  resize: vertical;
  min-height: 76px;
  font-weight: var(--font-weight-medium);
}
#view-directory-profile .directory-edit-note {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #f5f7ff;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: 1.42;
}

#view-vacations .vacation-alert {
  border-color: #d7e1ff;
  background: #f6f8ff;
}

#view-vacations
  .vacation-request-summary.has-conflictc
  .request-summary-row.remaining {
  background: #f6f8ff;
}

.vacation-cancellation-current-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* [AGRUPADO-381] Estilos 100% idénticos agrupados. Origen: líneas 3265, 3281, 4108, 4649. */
.vacation-cancellation-hint,
.transport-address-hint,
.transport-project-hint,
#view-directory-profile .directory-leave-summary-card small,
#view-objectives .objectives-q-summary small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}
.vacation-cancellation-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce4ff;
  border-radius: 11px;
  background: #f6f8ff;
}
.vacation-cancellation-preview-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
}

.vacation-cancellation-preview span:not(.vacation-cancellation-preview-icon) {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-xs);
}
.vacation-cancellation-preview strong {
  display: block;
  margin-top: 3px;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
}
.vacation-cancellation-preview small {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}
.vacation-cancellation-admin-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 11px;
  border: 1px solid #ece3bf;
  border-radius: 10px;
  background: #fffdf6;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: 1.42;
}
.vacation-cancellation-admin-note i {
  width: 16px;
  height: 16px;
  color: var(--amber);
  flex: none;
  margin-top: 1px;
}
.searchable-input {
  height: var(--control-height-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.searchable-input input {
  min-width: 0;
  flex: 1;
  height: 37px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.searchable-input:has(input:disabled) {
  background: #f4f6fa;
  border-color: #e2e6ef;
}
.searchable-input input:disabled {
  color: #9098aa;
  cursor: not-allowed;
}
.transport-address-readonly {
  background: #f3f5f9 !important;
  color: #7f889b !important;
  cursor: not-allowed;
}

.transport-map-preview {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  border: 1px solid #dbe2f0;
  border-radius: 11px;
  background: linear-gradient(135deg, #f5f7fc 0%, #eef3fb 100%);
}
.transport-map-preview:before,
.transport-map-preview:after {
  content: "";
  position: absolute;
  background: #fff;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  transform: rotate(-8deg);
}
.transport-map-preview:before {
  left: -6%;
  top: 30%;
  width: 56%;
  height: 17px;
}
.transport-map-preview:after {
  right: -8%;
  top: 50%;
  width: 62%;
  height: 16px;
  transform: rotate(13deg);
}
.transport-map-route {
  position: absolute;
  left: 5%;
  top: 58%;
  width: 94%;
  height: 3px;
  border-radius: 99px;
  background: #9ab2f3;
  transform: rotate(-4deg);
}
.transport-map-block {
  position: absolute;
  border: 1px solid #d6ddea;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(28, 43, 91, 0.04);
}
.transport-map-block.block-one {
  left: 14%;
  top: 16%;
  width: 68px;
  height: 32px;
}
.transport-map-block.block-two {
  left: 53%;
  top: 18%;
  width: 52px;
  height: 37px;
}
.transport-map-block.block-three {
  right: 12%;
  bottom: 13%;
  width: 58px;
  height: 30px;
}
.transport-map-pin {
  position: absolute;
  z-index: 2;
  left: 43%;
  top: 35%;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  transform: rotate(-45deg);
  box-shadow: 0 5px 12px rgba(27, 55, 170, 0.28);
}
.transport-map-pin i {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
}
.transport-map-preview > div {
  position: absolute;
  z-index: 3;
  left: 11px;
  right: 11px;
  bottom: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(211, 221, 241, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(5px);
}
.transport-map-preview > div strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Solicitud de traslados — flujo en dos pasos y mapas de recorrido */
#transportRequestModal .transport-request-modal {
  width: min(890px, 100%);
  max-height: calc(100vh - 34px);
  overflow: auto;
}
/* [AGRUPADO-382] Estilos 100% idénticos agrupados. Origen: líneas 3299, 5584. */
#transportRequestModal .transport-stepper,
#assetIncidentModal .asset-incident-stepper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: -2px 0 18px;
}
/* [AGRUPADO-383] Estilos 100% idénticos agrupados. Origen: líneas 3302, 5585. */
#transportRequestModal .transport-step-indicator,
#assetIncidentModal .asset-incident-step-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--muted);
  transition: var(--transition-base);
}
/* [AGRUPADO-384] Estilos 100% idénticos agrupados. Origen: líneas 3306, 5586. */
#transportRequestModal .transport-step-indicator > span,
#assetIncidentModal .asset-incident-step-indicator > span {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: #f0f2f7;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

/* [AGRUPADO-385] Estilos 100% idénticos agrupados. Origen: líneas 3311, 5588. */
#transportRequestModal .transport-step-indicator small,
#assetIncidentModal .asset-incident-step-indicator small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-snug);
  color: var(--muted);
}
/* [AGRUPADO-386] Estilos 100% idénticos agrupados. Origen: líneas 3312, 5589. */
#transportRequestModal .transport-step-indicator.active,
#assetIncidentModal .asset-incident-step-indicator.active {
  border-color: #bfd0ff;
  background: #f6f8ff;
  color: var(--blue);
}
/* [AGRUPADO-387] Estilos 100% idénticos agrupados. Origen: líneas 3313, 4687, 4858, 5590. */
#transportRequestModal .transport-step-indicator.active > span,
#view-objectives .objective-info-tooltip:hover,
#view-objectives .objective-final-metric .stat-icon,
#assetIncidentModal .asset-incident-step-indicator.active > span {
  background: var(--blue);
  color: #fff;
}
/* [AGRUPADO-388] Estilos 100% idénticos agrupados. Origen: líneas 3314, 5591. */
#transportRequestModal .transport-step-indicator.complete,
#assetIncidentModal .asset-incident-step-indicator.complete {
  border-color: #c7eadf;
  background: #fbfffd;
  color: var(--green);
}
/* [AGRUPADO-389] Estilos 100% idénticos agrupados. Origen: líneas 3315, 5592. */
#transportRequestModal .transport-step-indicator.complete > span,
#assetIncidentModal .asset-incident-step-indicator.complete > span {
  background: var(--green);
  color: #fff;
}
/* [AGRUPADO-390] Estilos 100% idénticos agrupados. Origen: líneas 3316, 5593. */
#transportRequestModal .transport-step-panel,
#assetIncidentModal .asset-incident-step-panel {
  display: none;
  animation: fade 0.18s ease;
}

/* [AGRUPADO-391] Estilos 100% idénticos agrupados. Origen: líneas 3318, 5596. */
#transportRequestModal .transport-step-intro,
#assetIncidentModal .asset-incident-step-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 15px;
  padding: 11px 12px;
  border: 1px solid #dce4ff;
  border-radius: 11px;
  background: #f7f9ff;
}

#transportRequestModal .transport-route-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 13px;
}
#transportRequestModal .transport-map-preview {
  min-height: 215px;
  border-radius: 13px;
}
#transportRequestModal .transport-map-preview:before {
  top: 24%;
  height: 22px;
}
#transportRequestModal .transport-map-preview:after {
  top: 54%;
  height: 21px;
}
#transportRequestModal .transport-map-preview > div {
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 9px 10px;
}

#transportRequestModal .transport-map-preview.destination-map-preview {
  background: linear-gradient(135deg, #f8f5ff 0%, #f1effc 100%);
}
#transportRequestModal
  .transport-map-preview.destination-map-preview
  .transport-map-route {
  background: #b3a0ef;
  transform: rotate(7deg);
}
#transportRequestModal
  .transport-map-preview.destination-map-preview
  .transport-map-pin {
  background: var(--purple);
  left: 58%;
  top: 31%;
}
#transportRequestModal .transport-route-address-grid .transport-map-label {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(211, 221, 241, 0.95);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--ink-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}

/* [AGRUPADO-392] Estilos 100% idénticos agrupados. Origen: líneas 3339, 3551. */
#transportRequestModal .destination-map-preview .transport-map-label i,
#transportRequestModal .destination-map-preview .transport-map-label {
  color: var(--purple);
}
#transportRequestModal .transport-route-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
}
#transportRequestModal .transport-route-summary > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

#transportRequestModal .transport-route-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--ink);
}

#transportRequestModal .transport-route-arrow {
  width: 18px !important;
  height: 18px !important;
  color: var(--muted) !important;
}

#transportRequestModal .transport-step-actions .primary-btn {
  min-width: 132px;
}
#transportRequestModal .transport-step-actions .secondary-btn {
  min-width: 88px;
}
#transportRequestModal .transport-step-two-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}

/* v3.56 — Mis datos, historial de trayectoria y edición integral del legajo */
#view-directory-profile .directory-profile-self-disclaimer {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 14px 0;
  padding: 14px;
  border: 1px solid #c3d3ff;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef4ff 0%, #f8faff 100%);
  box-shadow: 0 4px 14px rgba(65, 95, 175, 0.08);
  color: var(--ink-2);
}

#view-directory-profile .directory-profile-self-disclaimer > i,
#view-directory-profile .directory-profile-self-disclaimer > svg {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 7px;
  flex: none;
  border-radius: 9px;
  background: #dce7ff;
  color: var(--blue);
  margin-top: 0;
}
#view-directory-profile .directory-profile-self-disclaimer strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-base);
  line-height: var(--line-height-compact);
}
#view-directory-profile .directory-profile-self-disclaimer span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

#view-directory-profile .directory-record-timeline {
  position: relative;
  padding: 2px 0 2px 30px;
}
#view-directory-profile .directory-record-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: #cbd8fb;
}

#view-directory-profile
  .directory-record-timeline
  .directory-record-card:first-child {
  margin-top: 10px !important;
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card::after {
  content: "";
  position: absolute;
  left: -25px;
  top: 25px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 4px #f7f9ff;
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card::before {
  z-index: 1;
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:nth-of-type(n)::before {
  content: attr(data-record-label);
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:not([data-record-label])::before {
  content: "Registro";
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card[data-record-type="formacion"]::before {
  content: "Formación";
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card[data-record-type="experiencia"]::before {
  content: "Experiencia";
}

#view-directory-profile .directory-profile-add-record {
  min-height: 33px;
  padding: 0 10px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

#view-directory-profile .directory-inline-editor:disabled {
  background: #eef1f6;
  border-color: #e0e4ee;
  color: #858da0;
  cursor: not-allowed;
  box-shadow: none;
}
#view-directory-profile .directory-inline-editor[type="date"],
#view-directory-profile .directory-inline-editor[type="month"] {
  font-variant-numeric: tabular-nums;
}
/* Legajo · Formación y experiencia — picker de mes/año con la lógica visual común */

#view-directory-profile .directory-month-control .date-input-display,
#directoryRecordModal .directory-month-control .date-input-display {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.directory-month-picker {
  position: fixed;
  z-index: 100001;
  width: 286px;
  padding: 12px;
  border: 1px solid #dfe5f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(28, 42, 73, 0.18);
  font-family: var(--font-body);
}

.directory-month-picker-head {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.directory-month-picker-head strong {
  font-size: var(--font-size-base);
  text-align: center;
  color: var(--ink);
  font-weight: var(--font-weight-extrabold);
}
.directory-month-picker-nav {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.directory-month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.directory-month-picker-month {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f7f9fc;
  color: var(--ink-2);
  font:
    600 11px/1 "DM Sans",
    sans-serif;
  cursor: pointer;
}
.directory-month-picker-month:hover {
  border-color: #cbd8fb;
  background: #eef3ff;
  color: var(--blue);
}
/* [AGRUPADO-398] Estilos 100% idénticos agrupados. Origen: líneas 3457, 3813, 3841, 3886, 6888, 9167. */
.directory-month-picker-month.is-selected,
#absenceDetailModal .absence-detail-progress-step.active > span,
#requestDetailModal .absence-detail-progress-step.active > span,
#absenceRequestModal .absence-request-progress-step.active > span,
#vacationModal .vacation-linked-calendar-day.is-selected,
#vacationModal .vacation-linked-calendar-day.is-range-start,
#vacationModal .vacation-linked-calendar-day.is-range-end,
.intranet-date-picker-day.is-selected,
.intranet-date-picker-day.is-range-start,
.intranet-date-picker-day.is-range-end {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
  color: #fff !important;
}
.directory-month-picker-month.is-current:not(.is-selected) {
  border-color: #b8c8ef;
  color: var(--blue);
  background: #f4f7ff;
}

/* Legajo · Mes/año — tipografía consistente con el resto de los campos */
#view-directory-profile .directory-month-control .date-input-display {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--ink);
}
#directoryRecordModal .directory-month-control .date-input-display {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--ink);
}

#view-directory-profile .directory-phone-editor {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 6px;
}
#view-directory-profile .directory-phone-editor select {
  height: 35px;
  min-width: 0;
  border: 1px solid #cbd7f5;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  padding: 0 6px;
  outline: 0;
}

#view-directory-profile
  .directory-profile-section.is-editing
  .directory-readonly-field.directory-probation-field,
#view-directory-profile
  .directory-profile-section.is-editing
  .directory-readonly-field.directory-probation-days {
  background: #f1f3f7;
  border-color: #e1e5ed;
}
#view-directory-profile .directory-record-card.is-new-record {
  border-style: dashed;
  background: #fbfdff;
}
#view-directory-profile .directory-record-card.is-new-record::after {
  border-color: var(--green);
}

#view-directory-profile .directory-record-delete-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid #f1c7c7;
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
#view-directory-profile .directory-record-delete-button:hover {
  border-color: #e59b9b;
  background: #fff5f5;
  color: #8f1710;
}
#view-directory-profile .directory-record-delete-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.13);
}
/* [AGRUPADO-399] Estilos 100% idénticos agrupados. Origen: líneas 3485, 3851, 3859, 3862, 7426. */
#view-directory-profile .directory-record-delete-button svg,
#requestDetailModal .request-detail-adjustment-observation-icon i,
#absenceDetailModal .absence-detail-observation-icon i,
#absenceDetailModal .absence-detail-adjustment-observation-icon i {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

/* v3.57 — Legajo: edición contextual, documentación y consistencia de timeline */
#view-directory-profile
  .directory-record-timeline
  .directory-record-card::after {
  left: -28px;
}
#view-directory-profile .directory-profile-sidebar {
  align-self: start !important;
  height: fit-content !important;
  position: sticky !important;
  top: 96px !important;
  max-height: calc(100vh - 116px) !important;
}
#view-directory-profile
  .directory-profile-section[data-directory-profile-section="documentacion"] {
  min-height: 500px;
}

#view-directory-profile .directory-documents-subtitle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 8px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}

#view-directory-profile .directory-documents-subtitle h4 {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  color: var(--ink);
  letter-spacing: -0.12px;
}

#view-directory-profile .directory-document-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
#view-directory-profile .directory-document-item:first-child {
  padding-top: 0;
}
#view-directory-profile .directory-document-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
#view-directory-profile .directory-document-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: var(--blue-2);
  color: var(--blue);
}

#view-directory-profile
  .directory-document-item.is-loaded
  .directory-document-icon {
  background: #eaf8ef;
  color: #168447;
}
#view-directory-profile
  .directory-document-item.is-missing
  .directory-document-icon {
  background: #fff4d8;
  color: #b77900;
}

#view-directory-profile .directory-document-link-field a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  text-decoration: none;
  white-space: nowrap;
}

#view-directory-profile .directory-document-item.is-editing {
  align-items: flex-start;
  padding: 13px;
  background: #fbfcff;
  border-radius: 10px;
  border: 1px solid #dce4f7;
  margin: 8px 0;
}

#view-directory-profile .directory-document-link-editor {
  width: 100%;
  min-width: 250px;
}
#view-directory-profile .directory-probation-field.is-finalized {
  background: #edf9f4 !important;
  border-color: #cce9dc !important;
}
#view-directory-profile .directory-probation-field.is-finalized span,
#view-directory-profile .directory-probation-field.is-finalized strong {
  color: var(--green) !important;
}
#view-directory-profile
  .directory-inline-editor.directory-success-readonly:disabled {
  background: #edf9f4 !important;
  border-color: #cce9dc !important;
  color: var(--green) !important;
}
#view-directory-profile .directory-inline-editor.directory-calculated:disabled {
  background: #eef1f6 !important;
  color: #858da0 !important;
}

#view-directory-profile .directory-add-record-modal-hint {
  margin: 0 0 12px;
  padding: 10px 11px;
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #f5f7ff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
.directory-record-modal {
  width: min(680px, 100%);
}
.directory-record-modal .form-grid {
  gap: 11px;
}
.directory-record-modal .field textarea {
  min-height: 90px;
}

/* v3.58 — Ajustes de flujo, acciones y formularios del legajo */
#transportRequestModal .transport-stepper.transport-stepper-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#transportRequestModal .transport-map-single {
  margin-top: 14px;
  min-height: 250px;
}
#transportRequestModal .transport-map-single .transport-map-label {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid #dce4f7;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}

/* [AGRUPADO-400] Estilos 100% idénticos agrupados. Origen: líneas 3559, 3831. */
#view-vacations .vacation-current-cancel-action,
#vacationDetailModal #cancelVacationFromDetail,
#absenceDetailModal #cancelAbsenceFromDetail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
#view-vacations .vacation-current-cancel-action i,
#vacationDetailModal #cancelVacationFromDetail i {
  width: 15px;
  height: 15px;
  flex: none;
  stroke-width: 2;
}
#view-vacations .vacation-current-cancel-action:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  pointer-events: none;
}

.directory-record-modal .field > span {
  display: block;
  margin: 0 0 6px;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}
.directory-record-modal .field > input,
.directory-record-modal .field > select,
.directory-record-modal .field > textarea {
  width: 100%;
  font-family: inherit;
  color: var(--ink);
  font-size: var(--font-size-md);
}
.directory-record-modal .field > select,
.directory-record-modal .field > input:not([type="file"]) {
  height: var(--control-height-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 0 10px;
  background: #fff;
  outline: 0;
}
.directory-record-modal .field > textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  line-height: var(--line-height-ui);
  outline: 0;
}

/* v3.59 — Soporte, documentación contextual y ajustes de perfil */
.support-evidence-field label span {
  font-size: var(--font-size-xs);
  color: var(--muted);
  font-weight: var(--font-weight-semibold);
}

.documentation-assistant-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #c8d5ff;
  border-radius: 12px;
  background: #fff;
  color: var(--blue);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 13px 30px rgba(27, 48, 132, 0.16);
}
.documentation-assistant-launcher.is-visible {
  display: inline-flex;
  animation: fade 0.18s ease;
}
.documentation-assistant-launcher:hover {
  background: var(--blue-2);
  border-color: #aebfff;
}
.documentation-assistant-launcher[hidden] {
  display: none;
}

/* Asistente de documentación — ventana de conversación */
.documentation-assistant-modal {
  width: min(790px, 100%);
  height: min(720px, calc(100vh - 46px));
  max-height: calc(100vh - 46px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
}
.documentation-assistant-modal .modal-head {
  flex: none;
  align-items: center;
  margin: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.documentation-assistant-modal .modal-head p {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.42;
}

.documentation-assistant-chat-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 18px 0;
  padding: 9px 10px;
  border: 1px solid #dce5ff;
  border-radius: 10px;
  background: #f6f8ff;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}

/* [AGRUPADO-401] Estilos 100% idénticos agrupados. Origen: líneas 3627, 7505, 7521, 8936. */
.documentation-assistant-chat-context strong,
#teamVacationReviewModal .team-vacation-review-note strong,
#teamVacationReviewModal .team-vacation-nearby-copy strong,
#vacationLiquidationReviewModal .vacation-liquidation-history-copy strong {
  color: var(--ink);
  font-size: var(--font-size-xs);
}
.documentation-assistant-chat-body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 13px 18px 0;
}
.documentation-assistant-thread {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding: 2px 3px 14px;
  scrollbar-width: thin;
  scrollbar-color: #c4cde0 transparent;
}
.documentation-assistant-thread::-webkit-scrollbar {
  width: 8px;
}
.documentation-assistant-thread::-webkit-scrollbar-thumb {
  background: #c4cde0;
  border-radius: 999px;
}
.documentation-assistant-message {
  max-width: min(84%, 560px);
  padding: 11px 12px;
  border-radius: 13px;
  font-size: var(--font-size-md);
  line-height: 1.48;
  box-shadow: 0 1px 2px rgba(26, 40, 95, 0.04);
}
.documentation-assistant-message.assistant {
  background: #eef3ff;
  color: var(--ink-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.documentation-assistant-message.user {
  background: var(--blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.documentation-assistant-suggestions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.documentation-assistant-suggestions button {
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  padding: 0 10px;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.documentation-assistant-suggestions button:hover {
  border-color: #bfd0ff;
  background: var(--blue-2);
  color: var(--blue);
}
.documentation-assistant-input {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
  margin: 0;
  padding: 13px 18px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.documentation-assistant-input textarea {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  max-height: 118px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  outline: 0;
  font: inherit;
  font-size: var(--font-size-md);
  line-height: 1.42;
  color: var(--ink);
  background: #fff;
}

.documentation-assistant-input .primary-btn {
  min-height: 44px;
  white-space: nowrap;
}

/* v3.60 — Solicitudes con detalle, asistencia con IA y legajo más limpio */

.request-row-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  text-align: right;
}
.request-row-actions .ghost-btn {
  min-height: 28px;
  padding: 0 5px;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.request-detail-modal {
  width: min(580px, 100%);
}
/* [AGRUPADO-402] Estilos 100% idénticos agrupados. Origen: líneas 3675, 3789. */
.request-detail-status,
.absence-detail-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 13px;
}
/* [AGRUPADO-403] Estilos 100% idénticos agrupados. Origen: líneas 3676, 3790. */
.request-detail-status > div,
.absence-detail-status > div {
  padding: 10px 11px;
  background: #fbfcff;
  border-right: 1px solid var(--line);
}

.request-detail-status strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--font-size-md);
}

.request-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}
.request-detail-grid > div.request-detail-observation {
  position: relative;
  grid-column: 1/-1;
  padding: 13px 14px 13px 46px;
  border-color: #d9cdfd;
  background: #f8f5ff;
}
.request-detail-grid > div.request-detail-observation > span {
  color: #6f46c7;
}
.request-detail-grid > div.request-detail-observation > strong {
  margin-top: 5px;
  color: #362468;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}
.request-detail-observation-icon {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #eee8ff;
  color: #7047c8;
}
/* [AGRUPADO-404] Estilos 100% idénticos agrupados. Origen: líneas 3692, 3701. */
.request-detail-observation-icon i,
.request-detail-summary-icon i {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}
.request-detail-grid > div.request-detail-summary {
  position: relative;
  grid-column: 1/-1;
  padding: 13px 14px 13px 46px;
  border-color: #bfe4ce;
  background: #f2fbf6;
}
.request-detail-grid > div.request-detail-summary > span {
  color: #237a4a;
}
.request-detail-grid > div.request-detail-summary > strong {
  margin-top: 5px;
  color: #174f34;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}
.request-detail-summary-icon {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #dff4e7;
  color: #237a4a;
}

/* v3.63 — Accesos temporales sin contenido visible. */
#view-home:empty {
  min-height: 1px;
}

/* v3.62 — Ausencias y licencias + Asistente de documentación como pantalla */
#view-absences .absence-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 25px;
  border-radius: 19px;
  background: linear-gradient(135deg, #1d285e, #2d54d4 76%, #728cec);
  color: #fff;
  margin-bottom: 18px;
}
#view-absences .absence-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -82px;
  top: -104px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

#view-absences .absence-hero h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 23px;
  letter-spacing: -0.6px;
}
#view-absences .absence-hero p:not(.eyebrow) {
  margin: 7px 0 0;
  color: #e5edff;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  max-width: 570px;
}
#view-absences .absence-hero-stat {
  min-width: 178px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
}
.absence-hero-stat span {
  display: block;
  margin-top: 4px;
  color: #dce7ff;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-compact);
}
#view-absences .absence-panels {
  display: none;
  animation: fade 0.2s ease;
}

#view-absences .absence-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(270px, 0.78fr);
  gap: 18px;
}

/* [AGRUPADO-407] Estilos 100% idénticos agrupados. Origen: líneas 3732, 9085. */
#view-absences .absence-balance-row:first-child,
#vacationLiquidationReviewModal .vacation-liquidation-month-row:first-child {
  border-top: 0;
  padding-top: 0;
}

#view-absences .absence-status-note {
  padding: 11px 12px;
  border: 1px solid #dce5ff;
  border-radius: 11px;
  background: #f6f8ff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
#view-absences .absence-status-note strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-sm);
  margin-bottom: 3px;
}
#view-absences .absence-status-note i {
  width: 16px;
  height: 16px;
  color: var(--blue);
  vertical-align: -3px;
  margin-right: 5px;
}

#view-absences .absence-guide-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
#view-absences .absence-guide-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* [AGRUPADO-408] Estilos 100% idénticos agrupados. Origen: líneas 3744, 3916. */
.absence-guide-card p,
#view-documentation-assistant .documentation-assistant-context-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: 1.48;
}
#view-absences .absence-guide-card ul {
  padding-left: 16px;
  margin: 10px 0 0;
}
.absence-guide-card li {
  margin: 4px 0;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: 1.42;
}

.absence-request-intro {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid #dce5ff;
  border-radius: 11px;
  background: #f6f8ff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

.absence-benefit-notice {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #bfe4d2;
  border-radius: 12px;
  background: #effaf5;
  color: #245f49;
}

.absence-benefit-notice > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: #d8f2e5;
  color: var(--green);
}

.absence-benefit-notice strong {
  display: block;
  margin-bottom: 3px;
  color: #174c39;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-compact);
}
.absence-benefit-notice p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.48;
  color: #356b57;
}
.absence-fixed-duration-counter {
  display: block;
  padding: 12px 13px;
  border: 1px solid #dce5ff;
  border-radius: 12px;
  background: #f6f8ff;
  text-align: left;
}

.absence-fixed-duration-counter-copy {
  min-width: 0;
  text-align: left;
}
.absence-fixed-duration-counter-copy span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}
.absence-fixed-duration-counter-value {
  display: block;
  margin-top: 3px;
  color: var(--blue);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  text-align: left;
  white-space: nowrap;
}
.absence-fixed-duration-counter-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-align: left;
}
.absence-fixed-duration-counter.is-complete {
  border-color: #bfe4d2;
  background: #effaf5;
}

.absence-fixed-duration-counter.is-short {
  border-color: #f2d48b;
  background: #fffaf0;
}
.absence-fixed-duration-counter.is-short .absence-fixed-duration-counter-value {
  color: #946200;
}
.absence-fixed-duration-counter.is-over {
  border-color: #f5caca;
  background: #fff7f7;
}

/* Ausencias — trayectoria de fechas con la misma lógica visual que Vacaciones */
#absenceRequestModal .absence-request-date-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}

#absenceRequestModal .absence-request-date-step strong {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--ink);
  line-height: 1.32;
  margin-top: 3px;
  white-space: nowrap;
}

.absence-detail-status strong,
.absence-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.absence-detail-review-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 13px;
  padding: 12px;
  border: 1px solid #dce5ff;
  border-radius: 11px;
  background: #f6f8ff;
  color: var(--ink-2);
}

/* [AGRUPADO-409] Estilos 100% idénticos agrupados. Origen: líneas 3796, 3802, 8515. */
.absence-detail-review-note strong,
.absence-detail-adjustment-head strong,
#requestTeamReviewModal .transport-day-context-copy strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-compact);
}
.absence-detail-review-note p {
  margin: 3px 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
.absence-detail-adjustment {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #d9e2ff;
  border-radius: 12px;
  background: #f8f9ff;
}

.absence-detail-adjustment-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.absence-detail-adjustment-head p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
.absence-detail-adjustment textarea {
  min-height: 88px;
  resize: vertical;
}
.absence-detail-adjustment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}
/* [AGRUPADO-410] Estilos 100% idénticos agrupados. Origen: líneas 3806, 3834, 3880. */
#absenceDetailModal .absence-detail-progress,
#requestDetailModal .absence-detail-progress,
#absenceRequestModal .absence-request-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

/* [AGRUPADO-411] Estilos 100% idénticos agrupados. Origen: líneas 3808, 3836, 3881. */
#absenceDetailModal .absence-detail-progress-step,
#requestDetailModal .absence-detail-progress-step,
#absenceRequestModal .absence-request-progress-step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--muted);
}
/* [AGRUPADO-412] Estilos 100% idénticos agrupados. Origen: líneas 3809, 3837, 3882. */
#absenceDetailModal .absence-detail-progress-step > span,
#requestDetailModal .absence-detail-progress-step > span,
#absenceRequestModal .absence-request-progress-step > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #d8deec;
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

/* [AGRUPADO-413] Estilos 100% idénticos agrupados. Origen: líneas 3811, 3839, 3884. */
#absenceDetailModal .absence-detail-progress-step strong,
#requestDetailModal .absence-detail-progress-step strong,
#absenceRequestModal .absence-request-progress-step strong {
  display: block;
  color: var(--ink-2);
  font-size: 10.5px;
  line-height: var(--line-height-snug);
}
/* [AGRUPADO-414] Estilos 100% idénticos agrupados. Origen: líneas 3812, 3840, 3885. */
#absenceDetailModal .absence-detail-progress-step small,
#requestDetailModal .absence-detail-progress-step small,
#absenceRequestModal .absence-request-progress-step small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8.5px;
  line-height: var(--line-height-snug);
}

/* [AGRUPADO-415] Estilos 100% idénticos agrupados. Origen: líneas 3815, 3843, 3888. */
#absenceDetailModal .absence-detail-progress-step.complete > span,
#requestDetailModal .absence-detail-progress-step.complete > span,
#absenceRequestModal .absence-request-progress-step.complete > span {
  border-color: #bfe4d2;
  background: var(--green-bg);
  color: var(--green);
}

/* [AGRUPADO-416] Estilos 100% idénticos agrupados. Origen: líneas 3817, 3845, 3890. */
#absenceDetailModal .absence-detail-progress-line,
#requestDetailModal .absence-detail-progress-line,
#absenceRequestModal .absence-request-progress-line {
  height: 1px;
  background: #d8deec;
}
/* [AGRUPADO-417] Estilos 100% idénticos agrupados. Origen: líneas 3818, 3846, 3891. */
#absenceDetailModal .absence-detail-progress-line.complete,
#requestDetailModal .absence-detail-progress-line.complete,
#absenceRequestModal .absence-request-progress-line.complete {
  background: #8fcdb0;
}
/* [AGRUPADO-418] Estilos 100% idénticos agrupados. Origen: líneas 3819, 3847, 3893. */
#absenceDetailModal .absence-detail-step,
#requestDetailModal .absence-detail-step,
#absenceRequestModal .absence-request-step {
  animation: fade 0.18s ease;
}
#view-absences .absence-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
#view-absences .absence-row-actions .ghost-danger-btn {
  min-height: 34px;
  padding: 0 9px;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

#absenceDetailModal #cancelAbsenceFromDetail i {
  width: 15px;
  height: 15px;
  flex: none;
}

/* [AGRUPADO-421] Estilos 100% idénticos agrupados. Origen: líneas 3849, 3860. */
#requestDetailModal .request-detail-adjustment-observation,
#absenceDetailModal .absence-detail-adjustment-observation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 13px;
  border: 1px solid #d8c9f5;
  border-radius: 11px;
  background: #f7f3ff;
}
/* [AGRUPADO-422] Estilos 100% idénticos agrupados. Origen: líneas 3850, 3861. */
#requestDetailModal .request-detail-adjustment-observation-icon,
#absenceDetailModal .absence-detail-adjustment-observation-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: #ebe2fb;
  color: #6f46c7;
}

/* [AGRUPADO-423] Estilos 100% idénticos agrupados. Origen: líneas 3853, 3864. */
#requestDetailModal .request-detail-adjustment-observation > div > span,
#absenceDetailModal .absence-detail-adjustment-observation > div > span {
  display: block;
  color: #6f46c7;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* [AGRUPADO-424] Estilos 100% idénticos agrupados. Origen: líneas 3854, 3865. */
#requestDetailModal .request-detail-adjustment-observation strong,
#absenceDetailModal .absence-detail-adjustment-observation strong {
  display: block;
  margin-top: 4px;
  color: #362468;
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
}
#absenceDetailModal .absence-detail-grid > div.absence-detail-observation {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid #d8c9f5;
  border-radius: 11px;
  background: #f7f3ff;
}
#absenceDetailModal
  .absence-detail-grid
  > div.absence-detail-observation
  > span {
  grid-column: 2;
  color: #6f46c7;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#absenceDetailModal
  .absence-detail-grid
  > div.absence-detail-observation
  > strong {
  grid-column: 2;
  margin-top: 4px;
  color: #362468;
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
}
#absenceDetailModal .absence-detail-observation-icon {
  grid-column: 1;
  grid-row: 1/3;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: #ebe2fb;
  color: #6f46c7;
}

.absence-cancel-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid #f5d3d3;
  border-radius: 12px;
  background: #fff8f8;
  color: var(--ink-2);
}

.absence-cancel-callout p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

/* Ausencias — solicitud en dos pasos */

#absenceRequestModal .absence-request-step-heading {
  margin-bottom: 13px;
}
#absenceRequestModal .absence-request-step-heading h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  letter-spacing: -0.15px;
}
#absenceRequestModal .absence-request-step-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: var(--line-height-ui);
}
#absenceRequestModal .absence-request-review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 13px;
}

#absenceRequestModal .absence-request-review span {
  display: block;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#view-documentation-assistant .documentation-assistant-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}
#view-documentation-assistant .documentation-assistant-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
#view-documentation-assistant .documentation-assistant-context-card {
  padding: 17px;
  border: 1px solid #d7e1ff;
  border-radius: 16px;
  background: linear-gradient(145deg, #f6f8ff, #fff);
  align-self: start;
}
#view-documentation-assistant .documentation-assistant-context-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-2);
  color: var(--blue);
  margin-bottom: 13px;
}

#view-documentation-assistant .documentation-assistant-context-card h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  letter-spacing: -0.3px;
  margin: 0 0 7px;
}

#view-documentation-assistant
  .documentation-assistant-context-card
  .documentation-assistant-chat-context {
  margin: 14px 0 0;
}
#view-documentation-assistant .documentation-assistant-workspace {
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
#view-documentation-assistant .documentation-assistant-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

#view-documentation-assistant .documentation-assistant-chat-body {
  padding: 17px 18px 0;
}
#view-documentation-assistant .documentation-assistant-input {
  padding: 13px 18px 18px;
}

/* v3.64 — Ajustes de inicio, ausencias y estabilidad de navegación */
#view-home.active {
  display: block !important;
  min-height: 1px;
}
/* [AGRUPADO-426] Estilos 100% idénticos agrupados. Origen: líneas 3938, 3989. */
#view-directory.active,
#view-org.active,
#view-ddp.active,
.file-dropzone.is-selected .file-dropzone-selected {
  display: block !important;
}
#view-absences .absence-guide-card p {
  font-size: var(--font-size-md);
  line-height: 1.52;
}
#view-absences .absence-guide-card li {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

/* v3.66 — Carga de archivos: dropzone moderna y consistente */
.file-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 94px;
  width: 100%;
  padding: 14px 15px;
  border: 1.5px dashed #bcc9eb;
  border-radius: 12px;
  background: #fbfcff;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
  overflow: hidden;
}
.file-dropzone:hover,
.file-dropzone:focus-within,
.file-dropzone.is-dragover {
  border-color: var(--blue);
  background: #f4f7ff;
  box-shadow: 0 0 0 3px rgba(44, 84, 216, 0.1);
}
.file-dropzone.is-selected {
  border-style: solid;
  border-color: #a9cbef;
  background: #f7fbff;
}
.file-dropzone-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
}
.file-dropzone-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--blue-2);
  color: var(--blue);
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}
.file-dropzone:hover .file-dropzone-icon,
.file-dropzone.is-dragover .file-dropzone-icon {
  transform: translateY(-1px);
  background: #dce6ff;
}

/* [AGRUPADO-427] Estilos 100% idénticos agrupados. Origen: líneas 3985, 7913. */
.file-dropzone-copy,
#view-vacation-balance-detail .vacation-balance-person-summary > div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
/* [AGRUPADO-428] Estilos 100% idénticos agrupados. Origen: líneas 3986, 8098. */
.file-dropzone-copy strong,
#absenceTeamReviewModal .absence-team-review-meta-grid strong {
  font-size: var(--font-size-sm);
  color: var(--ink);
  line-height: var(--line-height-compact);
}
/* [AGRUPADO-429] Estilos 100% idénticos agrupados. Origen: líneas 3987, 6066. */
.file-dropzone-copy span,
#view-home .home-quick-card span {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--muted);
}
.file-dropzone-selected {
  display: none !important;
  color: var(--green) !important;
  font-weight: var(--font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-dropzone-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #ccd8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}
.file-dropzone:hover .file-dropzone-cta,
.file-dropzone.is-dragover .file-dropzone-cta {
  border-color: var(--blue-3);
  background: var(--blue-2);
}

/* v3.67 — Fecha clickeable, jerarquía de lectura y relación Ausencias / OOO */

/* Campos secundarios pero relevantes: legibles sin sobredimensionar la interfaz. */

/* [AGRUPADO-430] Estilos 100% idénticos agrupados. Origen: líneas 4011, 4013. */
#view-hours .time-project small,
#view-hours .catalog-project span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

#view-hours .catalog-card > p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

/* Semana actual: señal visual dentro del selector de período. */
#view-hours .timesheet-period-title-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#view-hours .timesheet-period-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-hours .timesheet-current-week-badge {
  display: inline-flex !important;
  align-items: center;
  flex: none;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-2xs) !important;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  white-space: nowrap;
}

/* Trayectoria: el hito del timeline usa el nombre real de la formación o experiencia. */
#view-directory-profile .directory-record-timeline .directory-record-card {
  padding-top: 27px;
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card[data-record-label]::before {
  content: attr(data-record-label) !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-size-2xs);
  max-width: min(370px, calc(100% - 42px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-directory-profile .directory-record-timeline .directory-record-card-head {
  justify-content: flex-end;
  min-height: 20px;
}

/* [AGRUPADO-431] Estilos 100% idénticos agrupados. Origen: líneas 4033, 8524. */
#view-directory-profile
  .directory-record-timeline
  .directory-record-card-head
  > span,
#requestTeamReviewModal .transport-day-context-item strong {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}

/* v3.68 — Registro de horas: selector estable y trayectorias con hito titular */
#view-hours .timesheet-period-control {
  width: 262px;
  min-width: 262px;
  flex: 0 0 262px;
}

#view-hours .timesheet-period-title-row strong {
  flex: 1;
}

/* El nombre de cada hito es la pieza principal de lectura dentro de la línea de tiempo. */
#view-directory-profile .directory-record-timeline {
  padding: 8px 0 6px 42px;
}
#view-directory-profile .directory-record-timeline::before {
  left: 15px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #b9c9f4;
}
#view-directory-profile .directory-record-timeline .directory-record-card {
  position: relative;
  margin-top: 34px !important;
  padding: 30px 15px 15px;
  border-color: #d8e2f6;
  background: linear-gradient(145deg, #f9fbff, #fff 68%);
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card:first-child {
  margin-top: 22px !important;
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card[data-record-label]::before {
  left: 16px;
  top: -16px;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  max-width: calc(100% - 162px);
  border: 1px solid #bed0ff;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 10px rgba(36, 63, 150, 0.1);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.16px;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-directory-profile
  .directory-record-timeline
  .directory-record-card::after {
  left: -36px;
  top: -9px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--blue);
  background: #fff;
  box-shadow: 0 0 0 5px #f7f9ff;
}
#view-directory-profile .directory-record-timeline .directory-record-card-head {
  position: absolute;
  right: 15px;
  top: -16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
  max-width: 132px;
  margin: 0;
  padding: 0;
  border: 0;
}

#view-directory-profile
  .directory-record-timeline
  .directory-record-card-head
  > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #dce4f4;
  border-radius: 8px;
  background: #f7f9ff;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  text-align: center;
  white-space: nowrap;
}

/* Vacaciones y licencias: información ampliada disponible solo desde el legajo. */

#view-directory-profile .directory-leave-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}
#view-directory-profile .directory-leave-summary-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
#view-directory-profile .directory-leave-summary-card.primary {
  border-color: #cad8ff;
  background: linear-gradient(135deg, #f3f6ff, #fff);
}

#view-directory-profile .directory-leave-summary-card strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  letter-spacing: -0.25px;
}

#view-directory-profile .directory-leave-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

#view-directory-profile .directory-leave-item-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 9px;
  background: var(--blue-2);
  color: var(--blue);
}

#view-directory-profile .directory-leave-item strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-md);
  line-height: 1.3;
}

/* Acceso — simulación de login con Google Workspace */

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(105, 137, 239, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 86%,
      rgba(44, 84, 216, 0.14),
      transparent 34%
    ),
    #f5f7fc;
}
.login-screen.is-active {
  display: flex;
  animation: fade 0.22s ease;
}
.login-card {
  width: min(940px, 100%);
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
  overflow: hidden;
  border: 1px solid #dfe4f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(21, 34, 83, 0.16);
}
.login-brand-panel {
  position: relative;
  overflow: hidden;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, #1d285e 0%, #2c54d8 72%, #6f88ef 100%);
  color: #fff;
}
.login-brand-panel::before,
.login-brand-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.login-brand-panel::before {
  width: 330px;
  height: 330px;
  right: -180px;
  top: -150px;
}
.login-brand-panel::after {
  width: 260px;
  height: 260px;
  left: -135px;
  bottom: -150px;
}

.login-brand-lockup {
  width: 128px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(13, 24, 68, 0.14);
}

.login-brand-copy h1 {
  max-width: 360px;
  color: #fff;
  font-size: 31px;
  line-height: 1.14;
  letter-spacing: -1.2px;
  margin: 0;
}
.login-brand-copy p {
  max-width: 360px;
  margin: 12px 0 0;
  color: #e5edff;
  font-size: var(--font-size-base);
  line-height: 1.58;
}
.login-brand-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dbe6ff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.login-form-panel {
  padding: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.login-form-content {
  width: 100%;
  max-width: 380px;
}
.login-form-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: var(--blue-2);
  color: var(--blue);
}

.login-form-content .eyebrow {
  margin-bottom: 7px;
}
.login-form-content h2 {
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin: 0;
  color: var(--ink);
}
.login-form-content > p:not(.eyebrow) {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--muted);
  margin: 10px 0 24px;
}
.google-workspace-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d8ddea;
  border-radius: 11px;
  background: #fff;
  color: #27304f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 16px;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 2px 5px rgba(28, 42, 92, 0.05);
  cursor: pointer;
}
.google-workspace-button:hover {
  border-color: #aebff3;
  background: #f8faff;
  box-shadow: 0 5px 13px rgba(44, 84, 216, 0.09);
}
.google-workspace-button:disabled {
  cursor: wait;
  opacity: 0.72;
}
.google-mark {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
}
.login-access-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f6f8ff;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  line-height: 1.42;
}
/* [AGRUPADO-433] Estilos 100% idénticos agrupados. Origen: líneas 4179, 7503. */
.login-access-note i,
#teamVacationReviewModal .team-vacation-review-note > i {
  width: 15px;
  height: 15px;
  color: var(--blue);
  flex: none;
  margin-top: 1px;
}
.login-help {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-69-profile-hours-documentation-refinements
   -------------------------------------------------------------------------- */

/* v3.69 — Legajo: vacaciones/licencias solo de consulta. */

#view-directory-profile
  .directory-profile-section[data-directory-profile-section="vacaciones"]
  .directory-profile-section-head::after,
#view-directory-profile
  .directory-profile-section[data-directory-profile-section="licencias"]
  .directory-profile-section-head::after {
  content: "Solo consulta";
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #dce4f7;
  border-radius: 999px;
  background: #f5f7ff;
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}
#view-directory-profile .directory-leave-countdown {
  border-color: #cad8ff;
  background: linear-gradient(135deg, #f4f7ff, #fff);
}
#view-directory-profile .directory-leave-countdown strong {
  color: var(--blue);
  font-size: var(--font-size-4xl);
}

/* Registro de horas: el control mantiene el mismo ancho, con o sin el pill “Esta semana”. */
#view-hours .timesheet-period-control {
  width: 264px;
  min-width: 264px;
  flex: 0 0 264px;
}

#view-hours .timesheet-period-title-row strong {
  flex: 1 1 auto;
}
#view-hours .timesheet-current-week-badge {
  min-width: 76px;
  justify-content: center;
}

/* Asistente IA: el documento se selecciona desde un control único y genera el primer mensaje. */
#view-documentation-assistant .documentation-assistant-suggestions {
  display: block;
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
#view-documentation-assistant .documentation-assistant-suggestions label {
  display: block;
  margin: 0 0 7px;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}
#view-documentation-assistant .documentation-assistant-suggestions select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  outline: 0;
  cursor: pointer;
}

#view-documentation-assistant .documentation-assistant-suggestions small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-72-profile-leave-edit-button-hard-lock
   -------------------------------------------------------------------------- */

/* Legajo: Vacaciones y Licencias son estrictamente de solo lectura. */

/* --------------------------------------------------------------------------
   Migrated source: v3-162-directory-leave-details-styles
   -------------------------------------------------------------------------- */

#view-directory-profile .directory-leave-detail-btn {
  flex: none;
  min-width: auto;
  padding: 7px 10px;
  font-size: var(--font-size-sm);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
}
#directoryLeaveDetailModal .directory-leave-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
#directoryLeaveDetailModal .directory-leave-detail-field {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
}

#directoryLeaveDetailModal .directory-leave-detail-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
#directoryLeaveDetailModal .directory-leave-detail-field strong,
#directoryLeaveDetailModal .directory-leave-detail-field p {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-73-action-modal-protection-styles
   -------------------------------------------------------------------------- */

/* Lightboxes de acción: se cierran únicamente desde controles explícitos para evitar pérdidas accidentales. */
.modal-backdrop.protected-action-modal .modal-head .close-btn {
  position: relative;
  width: 34px;
  height: 34px;
  background: var(--blue-2);
  border: 1px solid #c9d6ff;
  color: var(--blue);
  box-shadow: 0 0 0 3px rgba(44, 84, 216, 0.08);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
.modal-backdrop.protected-action-modal .modal-head .close-btn:hover,
.modal-backdrop.protected-action-modal .modal-head .close-btn:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(44, 84, 216, 0.16);
  transform: scale(1.04);
  outline: 0;
}
.modal-backdrop.protected-action-modal .modal-head .close-btn::after {
  content: "Cerrar";
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font:
    700 9px/1 "DM Sans",
    sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  box-shadow: 0 5px 12px rgba(20, 30, 71, 0.15);
}
/* [AGRUPADO-434] Estilos 100% idénticos agrupados. Origen: líneas 4334, 5083, 6360, 8405. */
.modal-backdrop.protected-action-modal .modal-head .close-btn:hover::after,
.modal-backdrop.protected-action-modal
  .modal-head
  .close-btn:focus-visible::after,
.objective-subobjective-floating-tooltip.is-visible,
#view-about .identity-app-carousel:hover .identity-app-drag,
#view-about .identity-app-carousel:focus-visible .identity-app-drag,
#view-about .about-values-carousel:hover .about-carousel-drag-affordance,
#view-about
  .about-values-carousel:focus-visible
  .about-carousel-drag-affordance {
  opacity: 1;
  transform: none;
}
/* Todos los lightboxes comparten la misma señal visual cuando se intenta cerrar desde el fondo. */
.modal-backdrop .close-btn.action-close-attention {
  animation: actionCloseAttention 0.48s ease;
}
@keyframes actionCloseAttention {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(44, 84, 216, 0.08);
  }
  45% {
    transform: scale(1.12);
    box-shadow: 0 0 0 7px rgba(44, 84, 216, 0.2);
  }
}

/* --------------------------------------------------------------------------
   Migrated source: v3-74-hours-documentation-procedures-layout
   -------------------------------------------------------------------------- */

/* v3.74 — Registro de horas: el control no cambia de alto ni de ancho al alternar “Esta semana”. */
#view-hours .timesheet-period-control {
  height: 50px !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  width: 262px !important;
  min-width: 262px !important;
  flex: 0 0 262px !important;
  align-items: center !important;
}
#view-hours .timesheet-period-control > span {
  display: grid !important;
  grid-template-rows: 18px 15px;
  align-content: center;
  min-height: 37px !important;
}
#view-hours .timesheet-period-title-row {
  min-height: 18px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
#view-hours .timesheet-current-week-badge {
  min-width: 76px !important;
  justify-content: center !important;
}
#view-hours .timesheet-current-week-badge[hidden] {
  display: inline-flex !important;
  visibility: hidden !important;
}

/* Documentación: cuando aparece el recordatorio de lectura, la consulta con IA se desplaza y conserva su propio espacio. */
.documentation-assistant-launcher {
  transition:
    bottom 0.2s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}
.policy-read-popup.is-visible ~ .documentation-assistant-launcher.is-visible {
  bottom: 126px;
}

/* Procedimientos: la lectura adopta la misma estructura de navegación lateral + desarrollo de las políticas. */

#view-procedures .procedure-side-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 13px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

#view-procedures .procedure-side-search {
  width: 100%;
  max-width: none;
  margin: 0 0 8px;
  background: #fbfcff;
}
/* [AGRUPADO-435] Estilos 100% idénticos agrupados. Origen: líneas 4385, 6451, 7504, 7583, 7669, 8334, 8834. */
#view-procedures .procedure-document-list,
#absenceTeamReviewModal .absence-team-observation-notice > div,
#requestTeamReviewModal .request-observation-notice > div,
#teamVacationReviewModal .team-vacation-review-note div,
#teamVacationReviewModal .team-vacation-denial-notice > div,
#view-vacations .vacation-administration-filter-copy > div,
#requestTeamReviewModal .request-denial-notice > div,
#teamRequestActionModal .team-request-action-notice > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#view-procedures .procedure-document-select {
  width: 100%;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
#view-procedures .procedure-document-select > i {
  width: 15px;
  height: 15px;
  color: #7d87a5;
}
#view-procedures .procedure-document-select strong {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.24;
  color: inherit;
}
#view-procedures .procedure-document-select small {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-snug);
  color: var(--muted);
}

#view-procedures .procedure-search-empty {
  padding: 18px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#view-procedures .procedure-side-divider {
  height: 1px;
  background: var(--line);
  margin: 12px 7px 10px;
}
#view-procedures .procedure-side-label {
  display: block;
  margin: 0 7px 5px;
  color: var(--muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#view-procedures .procedure-section-link {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  padding: 8px;
  text-align: left;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 650;
  line-height: var(--line-height-snug);
  cursor: pointer;
}

#view-procedures .procedure-section-number {
  padding-top: 4px;
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
}
#view-procedures .procedure-section h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 19px;
  letter-spacing: -0.5px;
}
#view-procedures .procedure-section h3 {
  margin: 18px 0 7px;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--ink);
}

#view-procedures .procedure-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
}

#view-procedures .procedure-role-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

#view-procedures .procedure-resource {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
#view-procedures .procedure-resource > i {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-75-procedures-policies-footer-refinements
   -------------------------------------------------------------------------- */

/* v3.75 — Documentación: categorías sin iconografía redundante. */

#view-procedures .procedure-document-category .procedure-scope,
#view-procedures .procedure-scope {
  gap: 0 !important;
}

/* La asistencia IA contextual queda dentro del pie del documento: no duplica ni compite con los avisos fijos. */

#view-procedures .procedure-questions {
  margin-bottom: 154px !important;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-76-objectives-module
   -------------------------------------------------------------------------- */

/* v3.76 — Módulo de Objetivos: reemplaza desempeño. */

#view-objectives .objectives-heading-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#view-objectives .objectives-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 25px;
  margin-bottom: 17px;
  border-radius: 20px;
  background: linear-gradient(130deg, #1d285e, #2d54d4 74%, #6c85eb);
  color: #fff;
  overflow: hidden;
  position: relative;
}
#view-objectives .objectives-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  right: -85px;
  top: -112px;
}

#view-objectives .objectives-hero .eyebrow {
  color: #bdd2ff;
  margin-bottom: 6px;
}
#view-objectives .objectives-hero h2 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  margin: 0;
  max-width: 680px;
}
#view-objectives .objectives-hero p:not(.eyebrow) {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: #e5eeff;
  margin: 9px 0 0;
  max-width: 690px;
}
#view-objectives .objectives-hero-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 15px;
}
#view-objectives .objectives-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: #f3f7ff;
}

#view-objectives .objectives-score-card {
  width: 205px;
  flex: none;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
}
#view-objectives .objectives-score-card span {
  display: block;
  font-size: var(--font-size-xs);
  color: #dbe7ff;
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#view-objectives .objectives-score-card strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 32px;
  letter-spacing: -1px;
  color: #fff;
}
#view-objectives .objectives-score-card small {
  display: block;
  margin-top: 4px;
  color: #e3ebff;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}
.objectives-metrics-grid,
.objectives-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 17px;
}
#view-objectives .objectives-layout,
.objectives-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: start;
}
/* [AGRUPADO-436] Estilos 100% idénticos agrupados. Origen: líneas 4519, 4520. */
#view-objectives .objectives-main-stack,
#view-objectives .objectives-side-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.objectives-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
}

.objectives-card-head p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
  color: var(--muted);
  margin: 4px 0 0;
}
.objectives-table {
  min-width: 930px;
  table-layout: fixed;
}
.objectives-table th:first-child {
  width: 280px;
}
.objectives-table th:nth-child(4) {
  width: 140px;
}
.objectives-table th:last-child {
  width: 92px;
}
.objective-progress {
  height: 8px;
  border-radius: 99px;
  background: #edf0f6;
  overflow: hidden;
  margin-bottom: 5px;
}
.objective-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #7f93ed);
}
.objectives-table small {
  font-size: var(--font-size-xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
}

.objective-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 17px;
}
.objective-detail-grid > div {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
  min-width: 0;
}

.objective-subsection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.objective-mini-list > div {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}
.objective-mini-list strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
  line-height: 1.32;
}
.objective-mini-list span {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--muted);
  line-height: var(--line-height-normal);
}
/* [AGRUPADO-437] Estilos 100% idénticos agrupados. Origen: líneas 4538, 4542, 4548, 6038. */
.objective-alert-list,
.objective-permission-list,
.objective-checklist,
.objective-action-queue,
#view-home .home-alert-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.objective-alert-list > div,
.objective-permission-list > div {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--ink-2);
}

.objective-alert-list span,
.objective-permission-list span {
  font-size: var(--font-size-sm);
  line-height: 1.42;
}

.objective-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.objective-checklist input {
  accent-color: var(--blue);
}
.objective-formula {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.objective-formula > div {
  text-align: center;
  padding: 11px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}
.objective-formula span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
}
.objective-formula strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--font-size-4xl);
  color: var(--blue);
}

.objective-action-queue > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
.objective-action-queue span {
  display: block;
  margin: 4px 0 9px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-77-objectives-lead-q-tables
   -------------------------------------------------------------------------- */

#view-objectives .objectives-lead-hero {
  margin-bottom: 18px;
}
#view-objectives .objectives-period-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}
#view-objectives .objectives-period-copy h2 {
  font-size: var(--font-size-3xl);
  margin: 0;
}
#view-objectives .objectives-period-copy p {
  font-size: var(--font-size-md);
  color: var(--muted);
  margin: 5px 0 0;
}
/* [AGRUPADO-440] Estilos 100% idénticos agrupados. Origen: líneas 4575, 7652. */
#view-objectives .objectives-period-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#view-objectives .objectives-period-nav {
  width: 34px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  display: grid;
  place-items: center;
}

#view-objectives .objectives-year-display {
  min-width: 102px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 5px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#view-objectives .objectives-year-display span {
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
#view-objectives .objectives-year-display strong {
  font-size: var(--font-size-base);
  color: var(--ink);
  line-height: var(--line-height-tight);
  margin-top: 2px;
}

#view-objectives .objectives-quarter-toggle button {
  min-width: 42px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
}

#view-objectives .objectives-quarter-panel.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fade 0.18s ease;
}
#view-objectives .objectives-quarter-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
#view-objectives .objectives-quarter-intro h2 {
  font-size: var(--font-size-4xl);
  margin: 0;
}
#view-objectives .objectives-quarter-intro p:not(.eyebrow) {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--muted);
  margin: 5px 0 0;
  max-width: 790px;
}
#view-objectives .objectives-quarter-objective {
  overflow: hidden;
  box-shadow: none;
}
#view-objectives .objective-sheet-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f7f9ff, #fff);
  border-bottom: 1px solid var(--line);
}
#view-objectives .objective-sheet-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: 7px;
}
#view-objectives .objective-sheet-head h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  letter-spacing: -0.35px;
  line-height: var(--line-height-snug);
  margin: 0;
  color: var(--ink);
}
#view-objectives .objective-weight-box {
  min-width: 112px;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  text-align: right;
  align-self: flex-start;
}

#view-objectives .objective-weight-box strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 21px;
  color: var(--blue);
  letter-spacing: -0.5px;
}
#view-objectives .objectives-quarter-table {
  min-width: 1280px;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
#view-objectives .objectives-quarter-table th {
  background: #f5f7ff;
  color: var(--ink);
  font-size: var(--font-size-sm);
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
#view-objectives .objectives-quarter-table th:nth-child(1) {
  width: 98px;
}
/* [AGRUPADO-441] Estilos 100% idénticos agrupados. Origen: líneas 4627, 4628. */
#view-objectives .objectives-quarter-table th:nth-child(2),
#view-objectives .objectives-quarter-table th:nth-child(3) {
  width: 250px;
}

#view-objectives .objectives-quarter-table th:nth-child(4) {
  width: 120px;
}
#view-objectives .objectives-quarter-table th:nth-child(5) {
  width: 132px;
}
#view-objectives .objectives-quarter-table th:nth-child(6) {
  width: 360px;
}
#view-objectives .objectives-quarter-table th:nth-child(7) {
  width: 142px;
}
#view-objectives .objectives-quarter-table td {
  padding: 13px;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-md);
  line-height: var(--line-height-ui);
  color: var(--ink-2);
  vertical-align: top;
  white-space: normal;
}

#view-objectives .objective-sub-id {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  background: #f0f2f8;
  color: var(--ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
}
#view-objectives .objective-consultant-score {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
  line-height: 1;
}
#view-objectives .objectives-quarter-table small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}
#view-objectives .objective-comment-cell p {
  margin: 0 0 9px;
}

#view-objectives .badge.neutral {
  background: #f0f2f7;
  color: var(--muted);
}
#view-objectives .objectives-q-summary {
  grid-template-columns: repeat(3, 1fr);
}
#view-objectives .objectives-q-summary div {
  min-height: 86px;
}

#view-objectives .objective-status-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  font-weight: var(--font-weight-bold);
}
#view-objectives .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

#view-objectives .status-dot.neutral {
  background: #a8b0c3;
}
#view-objectives .objectives-empty-quarter .empty-state {
  padding: 55px 18px;
}

/* v3.78 — Objetivos: ancho completo, tablas sin scroll horizontal y encabezado fijo */

#view-objectives .objectives-main-stack {
  width: 100%;
  max-width: none;
}
/* [AGRUPADO-444] Estilos 100% idénticos agrupados. Origen: líneas 4672, 4673, 8159. */
#view-objectives .objectives-quarter-objective,
#view-objectives .objectives-quarter-objective .table-scroll,
.request-team-card {
  overflow: visible;
}

#view-objectives .objectives-quarter-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
#view-objectives .objectives-quarter-table thead th {
  position: sticky;
  top: 76px;
  z-index: 7;
  box-shadow:
    0 1px 0 var(--line),
    0 5px 12px rgba(28, 42, 92, 0.06);
}
#view-objectives .objectives-quarter-table th:nth-child(1) {
  width: 8%;
}
/* [AGRUPADO-445] Estilos 100% idénticos agrupados. Origen: líneas 4677, 4678, 8064. */
#view-objectives .objectives-quarter-table th:nth-child(2),
#view-objectives .objectives-quarter-table th:nth-child(3),
#view-absences .absence-team-type-col {
  width: 18%;
}

/* [AGRUPADO-446] Estilos 100% idénticos agrupados. Origen: líneas 4679, 4680, 7453, 8069. */
#view-objectives .objectives-quarter-table th:nth-child(4),
#view-objectives .objectives-quarter-table th:nth-child(5),
#view-vacations .vacation-team-days-col,
#view-absences .absence-team-actions-col {
  width: 10%;
}

/* [AGRUPADO-447] Estilos 100% idénticos agrupados. Origen: líneas 4681, 7452, 8181. */
#view-objectives .objectives-quarter-table th:nth-child(6),
#view-vacations .vacation-team-period-col,
.request-team-detail-col {
  width: 25%;
}
/* [AGRUPADO-448] Estilos 100% idénticos agrupados. Origen: líneas 4682, 8067, 8183. */
#view-objectives .objectives-quarter-table th:nth-child(7),
#view-absences .absence-team-reviewer-col,
.request-team-status-col {
  width: 11%;
}
#view-objectives .objective-info-tooltip {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  vertical-align: -4px;
  cursor: help;
}

#view-objectives .objectives-q-summary > div > span {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* v3.79 — Objetivos: breadcrumb dinámico, encabezados fijos compuestos y textos más legibles */
#view-objectives .objective-sheet-head {
  position: sticky;
  top: var(--objective-sticky-top, 76px);
  z-index: 12;
  min-height: 88px;
  box-shadow:
    0 1px 0 var(--line),
    0 8px 18px rgba(28, 42, 92, 0.07);
}
#view-objectives .objectives-quarter-table thead th {
  top: calc(
    var(--objective-sticky-top, 76px) + var(--objective-head-height, 88px)
  );
  z-index: 11;
}
#view-objectives .objectives-quarter-table th {
  font-size: var(--font-size-base);
  line-height: 1.3;
}
#view-objectives .objectives-quarter-table td {
  font-size: var(--font-size-base);
  line-height: 1.52;
}
#view-objectives .objectives-period-copy p,
#view-objectives .objectives-quarter-intro p:not(.eyebrow),
#view-objectives .objectives-card-head p,
#view-objectives .objective-formula small,
#view-objectives .notice,
#view-objectives .stat-detail {
  font-size: var(--font-size-base);
  line-height: var(--line-height-ui);
}

.objective-info-modal-body {
  display: flex;
  gap: 11px;
  padding: 13px;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f6f8ff;
  color: var(--ink-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-80-objectives-q3-tooltip-sticky-refinements
   -------------------------------------------------------------------------- */

/* Objetivos — ajustes de tooltips, sticky headers y Q3 en proceso */
#view-objectives .objective-sheet-head {
  z-index: 8;
  background: linear-gradient(135deg, #f7f9ff, #fff);
}
#view-objectives .objectives-quarter-table thead th {
  z-index: 7;
}
#view-objectives .objectives-q-summary > div > span {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  min-height: 22px;
}
#view-objectives .objective-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-left: 2px;
  padding: 0;
  vertical-align: middle;
  line-height: 1;
  cursor: pointer;
}
#view-objectives .objective-info-tooltip i {
  width: 12px;
  height: 12px;
  display: block;
}
#view-objectives .objective-info-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(3px);
  min-width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #1d285e;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(23, 34, 82, 0.18);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  z-index: 60;
}
#view-objectives .objective-info-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: #1d285e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 61;
}
#view-objectives .objective-info-tooltip:hover::after,
#view-objectives .objective-info-tooltip:hover::before,
#view-objectives .objective-info-tooltip:focus-visible::after,
#view-objectives .objective-info-tooltip:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%);
}

#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-sheet-head {
  background: linear-gradient(135deg, #f7f9ff, #fff);
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objectives-quarter-table
  td:nth-child(3) {
  color: var(--muted);
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-81-objectives-summary-contribution-refinements
   -------------------------------------------------------------------------- */

/* v3.81 — Objetivos: resumen final destacado, aportes por objetivo y tooltips ampliados */
.topbar {
  z-index: 80;
}
#view-objectives .objective-sheet-head {
  top: calc(var(--objective-sticky-top, 76px) + 1px);
  z-index: 6;
}
#view-objectives .objectives-quarter-table thead th {
  top: calc(
    var(--objective-sticky-top, 76px) + var(--objective-head-height, 88px) + 1px
  );
  z-index: 5;
}
#view-objectives .objective-sheet-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: flex-start;
  min-width: 250px;
}
#view-objectives .objective-sheet-metrics .objective-weight-box,
#view-objectives .objective-sheet-metrics .objective-contribution-box {
  min-width: 0;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  text-align: right;
}
#view-objectives .objective-contribution-box {
  background: linear-gradient(145deg, #f5f8ff, #fff) !important;
  border-color: #cbd8ff !important;
}

#view-objectives .objective-contribution-box strong,
#view-objectives .objective-sheet-metrics .objective-weight-box strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 21px;
  color: var(--blue);
  letter-spacing: -0.5px;
}
#view-objectives .objective-final-metric {
  border-color: #b8c9ff;
  background: linear-gradient(145deg, #eef4ff, #fff 70%);
  box-shadow: 0 12px 28px rgba(44, 84, 216, 0.12);
}

#view-objectives .objective-final-metric .stat-label {
  color: var(--blue);
  font-weight: 900;
  font-size: var(--font-size-md);
}
#view-objectives .objective-final-metric .stat-value {
  font-size: 28px;
  color: var(--blue);
}
#view-objectives .objective-final-formula {
  border-color: #b8c9ff !important;
  background: linear-gradient(145deg, #eef4ff, #fff 70%) !important;
  box-shadow: 0 10px 24px rgba(44, 84, 216, 0.11);
}
#view-objectives .objective-final-formula span {
  color: var(--blue) !important;
}
#view-objectives .objective-final-formula strong {
  font-size: 26px !important;
  color: var(--blue) !important;
}
#view-objectives .objective-info-tooltip {
  vertical-align: 0;
  margin-left: 4px;
}
#view-objectives .notice .objective-info-tooltip {
  margin-left: 6px;
  vertical-align: -4px;
}

.objective-info-modal-body p {
  margin: 0;
  padding: 0;
  line-height: var(--line-height-body);
}
#view-objectives .objectives-q-summary div {
  padding-bottom: 11px;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-82-objectives-lead-manager-editable-q3
   -------------------------------------------------------------------------- */

/* v3.82 — Objetivos: Q3 editable, envío a revisión y tabla más clara */
#view-objectives .objectives-review-submit {
  min-height: 38px;
  white-space: nowrap;
  transition: 0.16s ease;
}
#view-objectives .objectives-review-submit:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(44, 84, 216, 0.18);
}
#view-objectives .objectives-review-submit:not(:disabled):hover {
  background: #2449c4;
}
#view-objectives .objectives-review-submit:disabled {
  background: #eef1f7;
  border-color: #dfe4ef;
  color: #7f879c;
  box-shadow: none;
  cursor: not-allowed;
}
#view-objectives .objectives-quarter-table thead th {
  background: linear-gradient(135deg, #2449c4, #2c54d8) !important;
  color: #fff !important;
  border-bottom-color: #2449c4 !important;
  box-shadow:
    0 1px 0 rgba(17, 28, 76, 0.08),
    0 7px 15px rgba(30, 48, 120, 0.12) !important;
}
/* [AGRUPADO-449] Estilos 100% idénticos agrupados. Origen: líneas 4897, 7716, 7779. */
#view-objectives .objectives-quarter-table tbody tr:nth-child(even) td,
#view-vacations .vacation-administration-filter-row th.has-active-filter,
#view-vacations .vacation-balance-filter-row th.has-active-filter {
  background: #f7f9ff;
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objectives-quarter-table
  td.objective-editable-cell {
  position: relative;
  background: #fffdf8;
  border-left: 2px solid rgba(44, 84, 216, 0.18);
  outline: none;
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objectives-quarter-table
  tbody
  tr:nth-child(even)
  td.objective-editable-cell {
  background: #f9fbff;
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-editable-cell:focus {
  background: #fff;
  border-left-color: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(44, 84, 216, 0.16);
}

#view-objectives .objective-add-subobjective {
  margin: 12px 0 0;
  border: 1px dashed #b9c8f4;
  background: #f7f9ff;
  color: var(--blue);
  border-radius: 10px;
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
}
#view-objectives .objective-add-subobjective:hover {
  background: var(--blue-2);
  border-color: #9eb4ff;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-83-objectives-lead-period-refinements
   -------------------------------------------------------------------------- */

/* v3.83 — Objetivos: período, títulos destacados y selectores estables */
#view-objectives .objectives-quarter-table thead th {
  background: #f5f7ff !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
#view-objectives .objective-sheet-head h2 {
  color: var(--blue);
  font-size: var(--font-size-4xl);
  line-height: 1.23;
}
#view-objectives .objectives-review-submit {
  width: 260px;
  min-width: 260px;
  justify-content: center;
}
#view-objectives .objectives-period-nav:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background: #f7f8fb;
  color: #a2aabd;
}
#view-objectives .objectives-period-nav:disabled:hover {
  border-color: var(--line);
  background: #f7f8fb;
  color: #a2aabd;
}

#view-objectives .objectives-score-summary-link {
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-compact);
  text-align: left;
  cursor: pointer;
}
#view-objectives .objectives-score-summary-link:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#view-objectives .objectives-score-summary-link :is(i, svg) {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
  margin: 0;
}

#view-objectives .objectives-quarter-summary.is-direct-target {
  animation: objectives-summary-focus 1.15s ease both;
}
@keyframes objectives-summary-focus {
  0% {
    box-shadow: 0 0 0 0 rgba(44, 84, 216, 0);
  }
  35% {
    box-shadow:
      0 0 0 4px rgba(44, 84, 216, 0.18),
      0 16px 36px rgba(23, 42, 112, 0.12);
  }
  100% {
    box-shadow: var(--shadow);
  }
}

/* --------------------------------------------------------------------------
   Migrated source: v3-84-objectives-permissions-score-breakdown
   -------------------------------------------------------------------------- */

/* Q3 · permisos de Líder / Manager */
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-weight-box
  strong {
  max-width: 150px;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--muted);
  letter-spacing: 0;
}
#view-objectives .objective-consultant-pending {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #f1f3f8;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-add-subobjective {
  margin: 14px 16px 20px;
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-editable-cell::after {
  content: "Editable";
  position: absolute;
  right: 6px;
  top: 5px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* [AGRUPADO-450] Estilos 100% idénticos agrupados. Origen: líneas 4999, 8407. */
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  td:not(.objective-editable-cell),
#view-about .about-carousel-footer,
#view-about .about-carousel-footer button {
  cursor: default;
}

/* Lightbox · desglose de Nota objetiva */
.objective-info-modal.has-score-breakdown {
  width: min(860px, 100%);
}
.objective-score-breakdown {
  margin-top: 14px;
  border: 1px solid #dce4ff;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
}

.objective-score-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  background: #f6f8ff;
  border-bottom: 1px solid #dce4ff;
}

.objective-score-total {
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: var(--font-weight-extrabold);
  color: var(--blue);
  white-space: nowrap;
}

.objective-score-table {
  min-width: 720px;
  table-layout: fixed;
}
.objective-score-table th {
  padding: 9px 10px;
  font-size: var(--font-size-2xs);
  background: #fafbfe;
  color: var(--muted);
}
.objective-score-table td {
  padding: 9px 10px;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
/* [AGRUPADO-451] Estilos 100% idénticos agrupados. Origen: líneas 5013, 5086, 6501, 6974. */
.objective-score-table td:last-child,
.objective-score-table th:last-child,
.objective-final-score-table th:not(:first-child),
.objective-final-score-table td:not(:first-child),
#view-vacations .vacation-next-expiry-value,
#view-vacations .timeline-month-scale span:last-child {
  text-align: right;
}

.objective-score-table tfoot td {
  background: #f6f8ff;
  border-top: 1px solid #dce4ff;
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
}
.objective-score-table tfoot td:last-child strong {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  color: var(--blue);
}
.objective-score-cap-note {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-87-objectives-numbering-modern-login
   -------------------------------------------------------------------------- */

/* Login simple con el lenguaje visual actual de la intranet. */
.login-screen {
  padding: 28px;
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(44, 84, 216, 0.12),
      transparent 31%
    ),
    radial-gradient(
      circle at 84% 82%,
      rgba(110, 90, 232, 0.09),
      transparent 29%
    ),
    #f4f6fb;
}
.login-card.login-card-simple {
  position: relative;
  width: min(470px, 100%);
  min-height: 510px;
  display: block;
  overflow: hidden;
  border: 1px solid #e1e5f0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 24px 70px rgba(25, 37, 92, 0.16),
    0 4px 14px rgba(25, 37, 92, 0.06);
}
/* [AGRUPADO-452] Estilos 100% idénticos agrupados. Origen: líneas 5041, 5287. */

.login-card-simple .login-form-panel {
  min-height: 508px;
  padding: 52px 42px 46px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}
.login-card-simple .login-form-content {
  max-width: 360px;
  text-align: center;
}
.login-card-simple .login-brand-lockup {
  width: 122px;
  margin: 0 auto 38px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(29, 48, 116, 0.1);
}
.login-card-simple .login-form-content h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.8px;
  color: var(--ink);
}
.login-card-simple .login-form-content > p:not(.login-domain-hint) {
  margin: 10px 0 30px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  color: var(--muted);
}
.login-card-simple .google-workspace-button {
  min-height: 48px;
  border-color: #dce1ec;
  border-radius: 12px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  background: #fff;
  box-shadow: 0 4px 12px rgba(31, 49, 111, 0.06);
  transition: var(--transition-base);
}
.login-card-simple .google-workspace-button:hover {
  transform: translateY(-1px);
  border-color: #b8c7f3;
  background: #f8faff;
  box-shadow: 0 8px 20px rgba(44, 84, 216, 0.12);
}
.login-card-simple .google-workspace-button:active {
  transform: none;
}
.login-card-simple .login-domain-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 22px 0 0 !important;
  padding: 0 10px;
  border-radius: 999px;
  background: #f2f5ff;
  color: var(--ink-2) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-bold);
}

/* Objetivos Q2: nombres reales y tooltips de subobjetivos. */
.objective-score-table .objective-score-name {
  white-space: normal;
  line-height: var(--line-height-compact);
  font-weight: var(--font-weight-bold);
  color: var(--ink);
  width: 260px;
}
.objective-subobjective-floating-tooltip {
  position: fixed;
  z-index: 400;
  max-width: 360px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #1d285e;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  box-shadow: 0 10px 28px rgba(20, 31, 77, 0.24);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

#view-objectives [data-objectives-panel="2026-Q2"] .objective-sub-id {
  cursor: help;
}
.objective-final-score-table {
  min-width: 600px;
}

/* Objetivos Q3: todos los campos editables comparten el mismo tratamiento. */

#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objectives-quarter-table
  td.objective-editable-cell,
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objectives-quarter-table
  tbody
  tr:nth-child(even)
  td.objective-editable-cell {
  position: relative;
  background: #fff7df !important;
  border-left: 2px solid #e6b64f !important;
  padding-top: 25px;
  outline: none;
  color: var(--ink) !important;
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-editable-cell:focus {
  background: #fff3ce !important;
  border-left-color: #c58a15 !important;
  box-shadow: inset 0 0 0 2px rgba(197, 138, 21, 0.2);
}
#view-objectives
  .objectives-quarter-panel[data-objectives-panel="2026-Q3"]
  .objective-editable-cell::after {
  content: "Editable";
  position: absolute;
  right: 7px;
  top: 6px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #f2c35b;
  color: #654300;
  font-size: var(--font-size-3xs);
  font-weight: 900;
  line-height: 1;
  opacity: 1;
  pointer-events: none;
}
#view-objectives .objectives-q3-save-bar {
  position: fixed;
  left: 302px;
  right: 38px;
  bottom: 18px;
  z-index: 108;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1450px;
  margin-left: auto;
  padding: 13px 15px;
  border: 1px solid #cbd8ff;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 42px rgba(22, 38, 98, 0.18);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}
#view-objectives .objectives-q3-save-bar.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
/* [AGRUPADO-453] Estilos 100% idénticos agrupados. Origen: líneas 5114, 8172. */
#view-objectives .objectives-q3-save-copy,
.request-team-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#view-objectives .objectives-q3-save-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--amber-bg);
  color: var(--amber);
  line-height: 1;
  text-align: center;
  align-self: center;
  box-sizing: border-box;
}
#view-objectives .objectives-q3-save-icon :is(i, svg) {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  position: static !important;
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  vertical-align: middle;
}

#view-objectives .objectives-q3-save-bar .primary-btn {
  min-width: 170px;
  flex: none;
}
body.objectives-unsaved-active #view-objectives {
  padding-bottom: 86px;
}

/* [AGRUPADO-454] Estilos 100% idénticos agrupados. Origen: líneas 5142, 7520. */
#view-documentation .documentation-filter-group,
#teamVacationReviewModal .team-vacation-nearby-copy > div {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
#view-documentation .documentation-filter {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#view-documentation .documentation-filter:hover,
#view-documentation .documentation-filter.active {
  border-color: #bdccfb;
  background: var(--blue-2);
  color: var(--blue);
}

#view-documentation .documentation-document-titleline {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
#view-documentation .documentation-document-titleline h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 0;
}
#view-documentation .documentation-document-main p {
  margin: 8px 0 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: var(--ink-2);
  max-width: 760px;
}
#view-documentation .documentation-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border-radius: 6px;
  background: #f3f5fa;
  color: var(--muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}
#view-documentation .documentation-visibility-slot {
  min-width: 1px;
  min-height: 1px;
}

.documentation-visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 7px;
  border-radius: 7px;
  background: #eef1f7;
  color: #66708c;
  font-size: var(--font-size-2xs);
  font-weight: 900;
  white-space: nowrap;
}

.documentation-visibility-badge.restricted {
  background: #fff0d5;
  color: #8a5b00;
  border: 1px solid #f0cf8a;
}

#view-documentation .documentation-empty {
  text-align: center;
  padding: 34px 18px;
  border: 1px dashed #ccd4e6;
  border-radius: 14px;
  background: #fff;
  color: var(--muted);
}
#view-documentation .documentation-empty i {
  width: 25px;
  height: 25px;
  color: var(--blue);
  margin-bottom: 7px;
}

/* [AGRUPADO-455] Estilos 100% idénticos agrupados. Origen: líneas 5171, 8111. */
#view-documentation .documentation-assistant-card,
#absenceTeamReviewModal .absence-team-review-actions {
  margin-top: 18px;
}

.document-visibility-fixed {
  position: fixed;
  right: 24px;
  top: 22px;
  z-index: 145;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #efc66d;
  border-radius: 999px;
  background: #fff3d7;
  color: #7d5100;
  box-shadow: 0 8px 22px rgba(83, 58, 12, 0.18);
  font-size: var(--font-size-xs);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-88-login-refinement
   -------------------------------------------------------------------------- */

/* Login refinado: simple, actual y alineado con la intranet. */
.login-screen {
  padding: 28px;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(44, 84, 216, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 84%,
      rgba(110, 90, 232, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #f7f8fc 0%, #eef2fb 100%);
}
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(44, 84, 216, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 84, 216, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 78%);
}
.login-card.login-card-simple {
  position: relative;
  width: min(500px, 100%);
  min-height: 470px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(218, 224, 240, 0.95);
  border-radius: 28px;
  background: #fff;
  box-shadow:
    0 32px 85px rgba(28, 42, 92, 0.17),
    0 8px 24px rgba(28, 42, 92, 0.07);
}

.login-card.login-card-simple::after {
  content: "";
  position: absolute;
  width: 245px;
  height: 245px;
  border: 1px solid rgba(44, 84, 216, 0.13);
  border-radius: 50%;
  right: -105px;
  top: -115px;
  z-index: 0;
  pointer-events: none;
}
.login-card-simple .login-form-panel {
  position: relative;
  z-index: 1;
  min-height: 470px;
  padding: 38px 46px 38px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}
.login-card-simple .login-form-content {
  width: 100%;
  max-width: 382px;
  text-align: center;
}
.login-card-simple .login-brand-lockup {
  width: 145px;
  margin: 7px auto 57px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* [AGRUPADO-458] Estilos 100% idénticos agrupados. Origen: líneas 5235, 5305. */
.login-card-simple .login-brand-lockup .brand-logo {
  width: 100%;
  margin: 0 auto;
}

.login-card-simple .login-form-content h2 {
  font-family: var(--font-heading);
  font-size: 29px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.18;
  letter-spacing: -1px;
  color: var(--ink);
  margin: 0;
}
.login-card-simple .login-form-content > p:not(.login-domain-hint) {
  max-width: 310px;
  margin: 10px auto 28px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--muted);
}
.login-card-simple .google-workspace-button {
  min-height: 50px;
  border: 1px solid #d8deec;
  border-radius: 13px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  background: #fff;
  box-shadow: 0 5px 14px rgba(31, 49, 111, 0.07);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.login-card-simple .google-workspace-button:hover {
  transform: translateY(-2px);
  border-color: #aebff2;
  background: #f8faff;
  box-shadow: 0 10px 24px rgba(44, 84, 216, 0.14);
}
/* [AGRUPADO-459] Estilos 100% idénticos agrupados. Origen: líneas 5251, 5323. */
.login-card-simple .google-workspace-button:active {
  transform: translateY(0);
}
.login-card-simple .login-domain-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  margin: 20px 0 0 !important;
  padding: 0;
  background: transparent;
  color: var(--muted) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-bold);
}
/* [AGRUPADO-460] Estilos 100% idénticos agrupados. Origen: líneas 5256, 5328. */
.login-card-simple .login-domain-hint::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-bg);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-89-login-layout-fix
   -------------------------------------------------------------------------- */

/* Login: composición más equilibrada, sin cortes visuales detrás del título. */
.login-screen {
  padding: 28px;
  background:
    radial-gradient(
      circle at 16% 14%,
      rgba(44, 84, 216, 0.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 86% 82%,
      rgba(110, 90, 232, 0.1),
      transparent 30%
    ),
    linear-gradient(145deg, #f7f8fc 0%, #eef2fb 100%);
}

.login-card.login-card-simple {
  position: relative;
  width: min(470px, 100%);
  min-height: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(216, 222, 238, 0.96);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 30px 80px rgba(28, 42, 92, 0.16),
    0 8px 24px rgba(28, 42, 92, 0.06);
}

.login-card.login-card-simple::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  right: -135px;
  top: -145px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(44, 84, 216, 0.1) 0%,
    rgba(110, 90, 232, 0.055) 42%,
    transparent 70%
  );
  border: 1px solid rgba(44, 84, 216, 0.08);
}
.login-card-simple .login-form-panel {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 44px 44px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.login-card-simple .login-form-content {
  width: 100%;
  max-width: 370px;
  text-align: center;
}
.login-card-simple .login-brand-lockup {
  width: 138px;
  margin: 2px auto 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.login-card-simple .login-form-content h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.18;
  letter-spacing: -0.9px;
  color: var(--ink);
}
.login-card-simple .login-form-content > p:not(.login-domain-hint) {
  max-width: 310px;
  margin: 10px auto 27px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--muted);
}
.login-card-simple .google-workspace-button {
  min-height: 52px;
  border: 1px solid #d7ddeb;
  border-radius: 13px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  background: #fff;
  box-shadow: 0 4px 13px rgba(31, 49, 111, 0.07);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.login-card-simple .google-workspace-button:hover {
  transform: translateY(-1px);
  border-color: #aebff2;
  background: #f8faff;
  box-shadow: 0 9px 22px rgba(44, 84, 216, 0.13);
}

.login-card-simple .login-domain-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  margin: 18px 0 0 !important;
  padding: 0;
  background: transparent;
  color: var(--muted) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-92-documentation-refinement
   -------------------------------------------------------------------------- */

/* Home de documentación: tipo, acceso y fecha en una sola línea clara. */
.card-documentation {
  grid-template-columns: 44px minmax(330px, 1fr) minmax(118px, 0.22fr) auto;
}
#view-documentation .documentation-document-titleline {
  align-items: center;
  gap: 6px;
}

#view-documentation .documentation-visibility-badge {
  min-height: 21px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: var(--font-size-2xs);
  line-height: 1;
}
#view-documentation .documentation-document-meta {
  min-width: 105px;
}
#view-documentation .documentation-document-meta > span {
  margin-bottom: 4px;
}
#view-documentation .documentation-document-meta strong {
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* Documento ampliado: lectura cómoda para documentos extensos. */
#procedureModal .modal-procedure.is-rich-document {
  width: min(940px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
}
#procedureModal .modal-procedure.is-rich-document .modal-head {
  flex: none;
  padding-right: 150px;
}
#procedureModal .modal-procedure.is-rich-document .procedure-reading {
  max-height: none;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 22px 24px;
}

#procedureModal .document-visibility-fixed {
  position: absolute;
  right: 58px;
  top: 20px;
}
.document-visibility-fixed {
  gap: 0;
}

.document-rich-table-wrap {
  overflow: auto;
  margin: 14px 0 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.document-rich-table {
  min-width: 580px;
}
.document-rich-table th {
  background: #f5f7ff;
  color: var(--ink);
  font-size: var(--font-size-xs);
  text-transform: none;
  letter-spacing: 0;
  padding: 11px 12px;
}
.document-rich-table td {
  font-size: 11.5px;
  line-height: var(--line-height-ui);
  padding: 11px 12px;
}

/* DOCUMENTACIÓN PÁGINA INTERNA */

.aside-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.document-aside {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow: auto;
  scrollbar-width: thin;
}

.section-button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: left;
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 650;
  line-height: 1.28;
  cursor: pointer;
}

.section-button:hover,
.section-button.active {
  background: #f5f7ff;
  color: var(--blue);
  font-weight: var(--font-weight-extrabold);
}

.document-aside-foot {
  display: flex;
  gap: 7px;
  padding: 12px 7px 3px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: var(--line-height-compact);
}

.document-detail-hero h2 {
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.7px;
  color: #fff;
  margin: 0;
  max-width: 720px;
}
.document-detail-hero p:not(.eyebrow) {
  max-width: 690px;
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: var(--line-height-body);
  color: #e4edff;
}

.document-pending-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid #dce4ff;
  border-radius: 11px;
  background: #f6f8ff;
}

.document-detail-assistant {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 30px 30px;
  padding: 18px;
  border: 1px solid #dce4ff;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6f8ff, #fff);
}

.document-detail-assistant h2 {
  font-size: var(--font-size-2xl);
  margin: 0 0 4px;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-94-objectives-privacy-and-document-updates
   -------------------------------------------------------------------------- */

.objectives-privacy-note {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin: -4px 0 16px;
  padding: 9px 12px;
  border: 1px solid #dce4ff;
  border-radius: 10px;
  background: #f6f8ff;
  color: #39456f;
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-96-consistency-fixes
   -------------------------------------------------------------------------- */

/* Organigrama ampliado: el detalle vive dentro de la misma capa fullscreen. */
#view-org .org-html-card.is-expanded > #orgPersonSummaryModal,
#view-org .org-html-card:fullscreen > #orgPersonSummaryModal {
  z-index: 260;
}

/* Encabezados laterales de documentación: una sola geometría para todos los íconos Lucide. */
.document-aside-head > .document-aside-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  line-height: 1;
  border-radius: 10px;
  background: var(--blue-2);
  color: var(--blue);
  padding: 0 10px;
}
.document-aside-head > .document-aside-icon :is(svg, i) {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0;
  transform: none;
}

/* Todo el contenedor visual de un selector funciona como área clickeable. */

.naiades-select-click-area :is(svg, i) {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-99-onboarding-readability
   -------------------------------------------------------------------------- */

/* Onboarding: misma base visual del módulo, con jerarquía y matrices de lectura más claras. */
.documentation-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0;
}

.onboarding-readable .onboarding-section-intro {
  max-width: 900px;
  margin-bottom: 14px;
}

.onboarding-readable .onboarding-matrix-wrap {
  overflow: hidden;
  margin: 12px 0 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.onboarding-readable .onboarding-matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.onboarding-readable .onboarding-matrix th {
  width: 185px;
  padding: 15px 16px;
  vertical-align: top;
  text-align: left;
  background: #f6f8ff;
  border-right: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: var(--line-height-normal);
  color: var(--ink);
}
.onboarding-readable .onboarding-matrix td {
  padding: 13px 17px;
  vertical-align: top;
}

.onboarding-readable .onboarding-phase {
  overflow: hidden;
  margin: 14px 0 22px;
  border: 1px solid #dce4ff;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(45, 70, 145, 0.055);
}
.onboarding-readable .onboarding-phase-title {
  margin: 0 !important;
  padding: 15px 18px !important;
  border: 0 !important;
  background: #eef3ff;
  color: #2449b7;
  font-size: var(--font-size-xl) !important;
  letter-spacing: -0.2px !important;
}
.onboarding-readable .onboarding-phase-matrix-wrap {
  margin: 0;
  border: 0;
  border-top: 1px solid #dce4ff;
  border-radius: 0;
}
/* [AGRUPADO-464] Estilos 100% idénticos agrupados. Origen: líneas 5544, 7439, 7696, 7762, 8044, 8900. */
.onboarding-readable .onboarding-phase-matrix th,
#view-vacations .vacation-team-table tbody tr:hover,
#view-vacations .vacation-administration-table tbody tr:hover td,
#view-vacations .vacation-balances-table tbody tr:hover td,
#view-absences .absence-team-table tbody tr:hover,
#view-vacations .vacation-administration-table tbody tr:hover td:nth-child(14),
#view-vacations .vacation-administration-table tbody tr:hover td:nth-child(15) {
  background: #fafbff;
}

.onboarding-readable .onboarding-closure {
  margin: 14px 0 24px;
  padding: 16px 18px;
  border: 1px solid #efd79d;
  border-left: 4px solid #e0a72f;
  border-radius: 12px;
  background: #fffaf0;
}
.onboarding-readable .onboarding-closure-title {
  margin: 0 0 9px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--font-size-lg) !important;
}

/* [AGRUPADO-465] Estilos 100% idénticos agrupados. Origen: líneas 5554, 7434. */
.onboarding-readable .onboarding-schedule,
#view-vacations .vacation-team-card {
  margin-top: 16px;
}
.onboarding-readable .onboarding-schedule .document-rich-table-wrap,
.onboarding-readable .onboarding-schedule.document-rich-table-wrap {
  border-radius: 14px;
}
.onboarding-readable .onboarding-schedule .document-rich-table th,
.onboarding-readable
  .onboarding-schedule.document-rich-table-wrap
  .document-rich-table
  th {
  background: #eef3ff;
  font-size: 10.5px;
  padding: 12px 14px;
}
/* .onboarding-readable .onboarding-schedule .document-rich-table td,
.onboarding-readable
  .onboarding-schedule.document-rich-table-wrap
  .document-rich-table
  td {
  padding: 12px 14px;
  font-size: 11.5px;
} */

/* v3.123 — Reporte de robo o extravío en dos pasos */
#assetIncidentModal .asset-incident-modal {
  width: min(690px, 100%);
  max-height: calc(100vh - 34px);
  overflow: auto;
}

#assetIncidentModal .asset-incident-step-actions .primary-btn,
#assetIncidentModal .asset-incident-step-actions .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-129-vacation-overflow-menu-styles
   -------------------------------------------------------------------------- */

#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-action-column {
  width: 54px;
}
/* [AGRUPADO-466] Estilos 100% idénticos agrupados. Origen: líneas 5610, 5687. */
#view-vacations #vacation-panel-mis-solicitudes .vacation-row-actions,
#view-absences #absence-panel-requests .absence-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
/* [AGRUPADO-467] Estilos 100% idénticos agrupados. Origen: líneas 5613, 5656, 5690. */
#view-vacations #vacation-panel-mis-solicitudes .vacation-more-trigger,
#view-transport .request-more-trigger,
#view-reimbursements .request-more-trigger,
#view-absences #absence-panel-requests .absence-more-trigger {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: #667085;
  cursor: pointer;
  transition:
    background-color 0.14s ease,
    color 0.14s ease;
  line-height: 1;
}
/* [AGRUPADO-468] Estilos 100% idénticos agrupados. Origen: líneas 5618, 5662, 5695. */
#view-vacations #vacation-panel-mis-solicitudes .vacation-more-trigger i,
#view-vacations #vacation-panel-mis-solicitudes .vacation-more-trigger svg,
#view-transport .request-more-trigger i,
#view-transport .request-more-trigger svg,
#view-reimbursements .request-more-trigger i,
#view-reimbursements .request-more-trigger svg,
#view-absences #absence-panel-requests .absence-more-trigger i,
#view-absences #absence-panel-requests .absence-more-trigger svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  display: block;
}
/* [AGRUPADO-469] Estilos 100% idénticos agrupados. Origen: líneas 5622, 5666, 5699. */
#view-vacations #vacation-panel-mis-solicitudes .vacation-more-trigger:hover,
#view-vacations #vacation-panel-mis-solicitudes .vacation-more-trigger:focus-visible,
#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-more-trigger[aria-expanded="true"],
#view-transport .request-more-trigger:hover,
#view-transport .request-more-trigger:focus-visible,
#view-transport .request-more-trigger[aria-expanded="true"],
#view-reimbursements .request-more-trigger:hover,
#view-reimbursements .request-more-trigger:focus-visible,
#view-reimbursements .request-more-trigger[aria-expanded="true"],
#view-absences #absence-panel-requests .absence-more-trigger:hover,
#view-absences #absence-panel-requests .absence-more-trigger:focus-visible,
#view-absences
  #absence-panel-requests
  .absence-more-trigger[aria-expanded="true"] {
  background: #f2f4f7;
  color: #344054;
  outline: none;
}

.vacation-overflow-menu {
  position: fixed;
  z-index: 100000;
  width: 174px;
  padding: 5px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 14px 34px rgba(16, 24, 40, 0.14),
    0 2px 8px rgba(16, 24, 40, 0.06);
  opacity: 0;
  transform: translateY(-3px) scale(0.985);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}
.vacation-overflow-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.vacation-overflow-menu button {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  display: flex;
  align-items: center;
  text-align: left;
  color: #344054;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-compact);
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}
.vacation-overflow-menu button:hover,
.vacation-overflow-menu button:focus-visible {
  background: #f5f7fa;
  color: #101828;
  outline: none;
}
.vacation-overflow-menu button[data-tone="danger"] {
  color: #7f3b3f;
}
.vacation-overflow-menu button[data-tone="danger"]:hover,
.vacation-overflow-menu button[data-tone="danger"]:focus-visible {
  background: #fff4f4;
  color: #b42318;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-140-request-overflow-menu-styles
   -------------------------------------------------------------------------- */

#view-transport .request-row-actions,
#view-reimbursements .request-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
#view-transport .request-overflow-actions,
#view-reimbursements .request-overflow-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: none;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-134-absence-overflow-menu-styles
   -------------------------------------------------------------------------- */

#view-absences #absence-panel-requests table th:last-child,
#view-absences #absence-panel-requests table td:last-child {
  width: 54px;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-144-request-period-filter-and-status-styles
   -------------------------------------------------------------------------- */

#view-reimbursements .task-icon.violet {
  background: #f1efff !important;
  color: #6553b8 !important;
}

#view-transport .request-list-filters .transport-filter-menu,
#view-reimbursements .request-list-filters .transport-filter-menu {
  min-width: 172px;
}
#view-transport .request-list-pager,
#view-reimbursements .request-list-pager,
#view-vacations #vacation-panel-mis-solicitudes .request-list-pager,
#view-vacations #vacation-panel-mi-equipo .request-list-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
}
#view-transport .request-load-more,
#view-reimbursements .request-load-more,
#view-vacations #vacation-panel-mis-solicitudes .request-load-more,
#view-vacations #vacation-panel-mi-equipo .request-load-more {
  min-width: 136px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-146-cancellation-requested-status-styles
   -------------------------------------------------------------------------- */

.badge.cancellation-requested {
  background: #fff0e8;
  color: #b54708;
}
.task-icon.cancellation-requested {
  background: #fff0e8 !important;
  color: #b54708 !important;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-147-assets-tickets-tab-styles
   -------------------------------------------------------------------------- */

#view-assets .assets-tab-counter {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
}

#view-assets .asset-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
#view-assets .asset-ticket-head h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
}

#view-assets .asset-ticket-list {
  display: grid;
  gap: 10px;
}
#view-assets .asset-ticket-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
#view-assets .asset-ticket-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
}

#view-assets .asset-ticket-kicker {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
/* [AGRUPADO-470] Estilos 100% idénticos agrupados. Origen: líneas 5793, 8915. */
#view-assets .asset-ticket-copy h3,
#vacationLiquidationReviewModal .vacation-liquidation-section-head h3 {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-151-timesheet-editing-rules
   -------------------------------------------------------------------------- */

/* Registro de horas: feriados y ventana de edición (semana actual + anterior). */
#view-hours .timesheet-readonly-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #dfe4ee;
  border-radius: 11px;
  background: #f8f9fc;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

#view-hours .timesheet-readonly-notice i {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}
#view-hours .timesheet-table th.is-timesheet-holiday {
  min-width: 88px;
  background: #fff7f8;
  color: var(--red);
}
#view-hours .timesheet-table th.is-timesheet-holiday > span {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.1;
}
#view-hours .timesheet-table th.is-timesheet-holiday > small {
  display: inline-flex;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--red-bg);
  color: var(--red);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}
#view-hours .timesheet-table td.is-timesheet-holiday {
  background: #fffafb;
}
#view-hours .time-input:disabled {
  cursor: not-allowed;
  background: #f3f5f8;
  border-color: #e2e6ee;
  color: #8991a3;
  box-shadow: none;
  opacity: 1;
}
#view-hours td.is-timesheet-holiday .time-input:disabled {
  background: #fff3f5;
  border-color: #f0d2d8;
  color: #b26a78;
}
#view-hours .day-total.is-timesheet-holiday {
  color: var(--red) !important;
  background: #fff3f5;
  font-size: var(--font-size-2xs);
}
#view-hours .timesheet-add-project-button:disabled,
#view-hours .time-row-delete:disabled,
#view-hours .time-project-select:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}
#view-hours .hours-week-actions.is-timesheet-readonly button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Legajo: el título principal de la vista ya identifica cada sección.
       El contenedor se conserva para acciones dinámicas de edición. */
#view-directory-profile .directory-profile-section-head:empty {
  display: none !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-163-my-data-assets-hidden
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Migrated source: v3-165-intranet-support-styles
   -------------------------------------------------------------------------- */

#view-support .support-intro-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid #dfe6ff;
  border-radius: 13px;
  background: #f6f8ff;
  color: var(--ink-2);
}

#view-support .support-intro-note strong {
  display: block;
  font-size: var(--font-size-md);
  margin-bottom: 2px;
  color: var(--ink);
}

#view-support .support-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
#view-support .support-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(25, 32, 75, 0.035);
}
#view-support .support-summary-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
  flex: none;
}

#view-support .support-summary-icon.neutral {
  background: #f1f3f8;
  color: var(--ink-2);
}

#view-support .support-summary-copy span {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--muted);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
#view-support .support-summary-copy strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-5xl);
  line-height: 1.1;
  margin-top: 3px;
  color: var(--ink);
}
#view-support .support-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow);
  overflow: visible;
}
#view-support .support-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 13px;
  border-bottom: 1px solid var(--line);
}
#view-support .support-panel-head h2 {
  font-size: var(--font-size-xl);
  margin: 0 0 3px;
}

#view-support .support-filter-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  overflow: auto;
}
#view-support .support-filter-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 12px 8px 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  position: relative;
  white-space: nowrap;
}

#view-support .support-filter-tab.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}
#view-support .support-filter-tab .tab-counter {
  margin-left: 4px;
}
#view-support .support-ticket-list {
  display: flex;
  flex-direction: column;
  padding: 4px 18px 8px;
}
#view-support .support-ticket-row {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  text-align: left;
  border-bottom: 1px solid #edf0f5;
  color: inherit;
}

#view-support .support-ticket-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
}

#view-support .support-ticket-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-bottom: 3px;
}

#view-support .support-ticket-copy h3 {
  font-size: var(--font-size-md);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-support .support-ticket-copy p {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-support .support-ticket-updated {
  font-size: var(--font-size-xs);
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
#view-support .support-ticket-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted-2);
}
#view-support .support-empty {
  display: none;
  padding: 36px 18px;
  text-align: center;
  color: var(--muted);
  font-size: var(--font-size-md);
}

.support-modal .field textarea {
  min-height: 128px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  outline: 0;
  font: inherit;
  font-size: var(--font-size-md);
  color: var(--ink);
  background: #fff;
}

.support-upload-zone {
  min-height: 92px;
  border: 1px dashed #cbd3e6;
  border-radius: 11px;
  background: #fafbfe;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
  color: var(--muted);
}
.support-upload-zone i {
  width: 20px;
  height: 20px;
  color: var(--blue);
}
.support-upload-zone strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  margin-bottom: 2px;
}

.support-ticket-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -8px 0 15px;
}
.support-conversation {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: 340px;
  overflow: auto;
  padding: 2px 3px 4px;
}
.support-message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
}
.support-message-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--blue-2);
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

.support-message-bubble {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  background: #fff;
}
.support-message.is-team .support-message-bubble {
  background: #f5fbf8;
  border-color: #d9eee6;
}
.support-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.support-message-bubble p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--ink-2);
  margin: 0;
  white-space: pre-wrap;
}
.support-reply-box {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.support-reply-box label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--ink-2);
  font-weight: var(--font-weight-bold);
  margin-bottom: 6px;
}
.support-reply-box textarea {
  width: 100%;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-size: var(--font-size-md);
  resize: vertical;
  outline: 0;
}

.support-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Migrated source: home-dashboard-v182
   -------------------------------------------------------------------------- */

#view-home {
  padding-bottom: 10px;
}
#view-home .home-heading {
  align-items: flex-end;
  margin-bottom: 22px;
}

#view-home .home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.78fr);
  gap: 18px;
}
#view-home .home-spotlight {
  min-height: 230px;
  border-radius: 22px;
  padding: 28px 30px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(125deg, #1d285e 0%, #294fc7 68%, #477ce9 100%);
  color: #fff;
  box-shadow: 0 16px 36px rgba(29, 40, 94, 0.16);
}
#view-home .home-spotlight::before,
#view-home .home-spotlight::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
#view-home .home-spotlight::before {
  width: 330px;
  height: 330px;
  right: -70px;
  bottom: -190px;
}
#view-home .home-spotlight::after {
  width: 470px;
  height: 470px;
  right: -210px;
  bottom: -290px;
  border-color: rgba(255, 255, 255, 0.1);
}
#view-home .home-spotlight-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd9ff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

#view-home .home-spotlight h2 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: var(--font-size-page-title);
  line-height: 1.18;
  max-width: 560px;
  letter-spacing: -0.9px;
  margin-bottom: 10px;
}
#view-home .home-spotlight p {
  position: relative;
  z-index: 1;
  color: #e5edff;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  max-width: 560px;
  margin: 0 0 20px;
}
#view-home .home-spotlight-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
#view-home .home-spotlight .primary-btn {
  background: #fff;
  color: var(--blue);
  box-shadow: none;
}
#view-home .home-spotlight .primary-btn:hover {
  background: #f0f4ff;
}
#view-home .home-spotlight .secondary-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
#view-home .home-spotlight .secondary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
#view-home .home-week-chip {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 1;
  text-align: right;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

#view-home .home-week-chip span {
  display: block;
  font-size: var(--font-size-xs);
  color: #d9e5ff;
  margin-top: 3px;
}
#view-home .home-birthday {
  min-height: 230px;
  border-radius: 22px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fff3f7 0%, #f6efff 58%, #edf2ff 100%);
  border: 1px solid #eadff2;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
#view-home .home-birthday::before,
#view-home .home-birthday::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}
#view-home .home-birthday::before {
  width: 145px;
  height: 145px;
  background: #ffd6e5;
  right: -55px;
  top: -55px;
}
#view-home .home-birthday::after {
  width: 105px;
  height: 105px;
  background: #d9dcff;
  left: -38px;
  bottom: -42px;
}
#view-home .home-birthday-icon {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: #fff;
  color: #9c4f78;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(118, 63, 100, 0.1);
  position: relative;
  z-index: 1;
}

#view-home .home-birthday .eyebrow {
  color: #9c4f78;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
#view-home .home-birthday h2 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.65px;
  position: relative;
  z-index: 1;
}
#view-home .home-birthday p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  color: #626883;
  margin: 8px 0 18px;
  position: relative;
  z-index: 1;
}
#view-home .home-birthday .ghost-btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 0;
  color: #7c4a76;
  position: relative;
  z-index: 1;
}
#view-home .home-birthday-spark {
  position: absolute;
  color: #b76592;
  opacity: 0.6;
}
#view-home .home-birthday-spark.one {
  right: 34px;
  top: 70px;
  width: 16px;
  height: 16px;
  transform: rotate(15deg);
}
#view-home .home-birthday-spark.two {
  right: 74px;
  top: 45px;
  width: 12px;
  height: 12px;
  transform: rotate(-18deg);
}
#view-home .home-birthday-spark.three {
  right: 24px;
  top: 110px;
  width: 10px;
  height: 10px;
}
#view-home .home-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

#view-home .home-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

#view-home .home-direct-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
#view-home .home-direct-action {
  min-height: 92px;
  padding: 14px 12px;
  border: 1px solid #e8ebf3;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: var(--transition-fast);
}
#view-home .home-direct-action:hover {
  border-color: #cfd9fb;
  background: #f9faff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(33, 61, 167, 0.07);
}

#view-home .home-direct-action strong {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}
#view-home .home-content-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
  gap: 18px;
}

#view-home .home-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #eceef5;
  border-radius: 14px;
  background: #fff;
  transition: var(--transition-fast);
}
#view-home .home-alert:hover {
  border-color: #d7def5;
  background: #fcfcff;
}
#view-home .home-alert-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f1efff;
  color: #6553b8;
}

#view-home .home-alert-copy strong {
  display: block;
  font-size: var(--font-size-md);
  color: var(--ink);
  margin-bottom: 3px;
}
#view-home .home-alert-copy span {
  display: block;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
  color: var(--muted);
}

/* [AGRUPADO-475] Estilos 100% idénticos agrupados. Origen: líneas 6052, 8095. */
#view-home .home-quick-grid,
#absenceTeamReviewModal .absence-team-review-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#view-home .home-quick-card {
  border: 1px solid #e8ebf3;
  border-radius: 14px;
  background: #fff;
  padding: 15px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-fast);
}
#view-home .home-quick-card:hover {
  border-color: #cfdbff;
  background: #fbfcff;
}

#view-home .home-quick-icon {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: var(--blue-2);
  color: var(--blue);
  display: grid;
  place-items: center;
}

#view-home .home-quick-card small {
  font-size: var(--font-size-2xs);
  color: var(--muted);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
#view-home .home-quick-card strong {
  font-family: var(--font-body);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.5px;
  margin: 14px 0 4px;
  color: var(--ink);
}

#view-home .home-quick-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 11px;
}
#view-home .home-notification-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#view-home .home-notification {
  border: 1px solid #eceef5;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  background: #fff;
}
#view-home .home-notification-icon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: #f2f4f9;
  color: var(--ink-2);
  display: grid;
  place-items: center;
}

#view-home .home-notification strong {
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: 3px;
}

#view-home .home-notification time {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--muted-2);
  margin-top: 7px;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-187-vacation-team-actions-alignment
   -------------------------------------------------------------------------- */

#view-vacations .vacation-team-actions {
  width: 100%;
  justify-content: center;
  align-items: center;
}
#view-vacations .vacation-team-resolved {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-188-vacation-team-denial-step-actions-fix
   -------------------------------------------------------------------------- */

/* Keep the action heading and its contents on the same visual axis. */
#view-vacations .vacation-team-actions-col,
#view-vacations .vacation-team-status-col,
#view-transport .request-team-status-col,
#view-reimbursements .request-team-status-col {
  width: 13%;
}
#view-vacations .vacation-team-status-col,
#view-vacations .vacation-team-actions-col,
#view-absences .absence-team-period-col {
  width: 16%;
}
#view-vacations .vacation-team-table th:last-child,
#view-vacations .vacation-team-table td.vacation-team-action-cell {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
#view-vacations .vacation-team-actions {
  width: 100%;
  min-width: 0;
  justify-content: center;
  align-items: center;
}
#view-vacations .vacation-team-actions .vacation-team-review {
  min-width: 84px;
  justify-content: center;
}

#teamVacationReviewModal .team-vacation-review-steps {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  line-height: 1;
}
#teamVacationReviewModal .team-vacation-review-steps > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
#teamVacationReviewModal .team-vacation-review-steps > span b {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink-3);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
}
#teamVacationReviewModal .team-vacation-review-steps > span.active,
#absenceTeamReviewModal .absence-team-review-steps span.active {
  color: var(--blue);
  font-weight: var(--font-weight-bold);
}
#teamVacationReviewModal .team-vacation-review-steps > span.active b {
  border-color: #b9c8ff;
  background: #eef2ff;
  color: var(--blue);
}
#teamVacationReviewModal .team-vacation-review-steps > span.complete {
  color: #39775a;
}
#teamVacationReviewModal .team-vacation-review-steps > span.complete b {
  border-color: #c7e3d3;
  background: #eef9f3;
  color: #39775a;
}
#teamVacationReviewModal .team-vacation-review-steps > i {
  width: 12px;
  height: 12px;
  color: #a5aec0;
}
#teamVacationReviewModal .team-vacation-denial-panel {
  max-width: 700px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-189-vacation-team-denial-step-final-fix
   -------------------------------------------------------------------------- */

/* The denial form is a real second step: hide the review content and its footer completely. */

/* Use the shared primary button foundation so the destructive confirmation keeps its geometry. */
/* [AGRUPADO-481] Estilos 100% idénticos agrupados. Origen: líneas 6170, 6218, 8338. */
#teamVacationReviewModal #confirmTeamVacationDenial,
#absenceTeamReviewModal #confirmAbsenceTeamDenial,
#requestTeamReviewModal #confirmRequestTeamDenial {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}
/* [AGRUPADO-482] Estilos 100% idénticos agrupados. Origen: líneas 6174, 8342. */
#teamVacationReviewModal #confirmTeamVacationDenial > span,
#requestTeamReviewModal #confirmRequestTeamDenial > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* [AGRUPADO-483] Estilos 100% idénticos agrupados. Origen: líneas 6175, 8344. */
#teamVacationReviewModal #confirmTeamVacationDenial:disabled,
#requestTeamReviewModal #confirmRequestTeamDenial:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-201-team-review-denial-flow-cleanup
   -------------------------------------------------------------------------- */

/* La denegación es una acción alternativa, no un paso obligatorio del flujo. */

/* Al entrar a la denegación desaparecen por completo la revisión y sus acciones. */

/* Misma geometría para Denegar en ambos módulos. */
/* [AGRUPADO-484] Estilos 100% idénticos agrupados. Origen: líneas 6193, 8299. */
#teamVacationReviewModal #denyTeamVacationReview,
#absenceTeamReviewModal #denyAbsenceTeamReview,
#requestTeamReviewModal #denyRequestTeamReview,
#requestTeamReviewModal #approveRequestTeamReview {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}
/* [AGRUPADO-485] Estilos 100% idénticos agrupados. Origen: líneas 6207, 6231, 7613. */
#teamVacationReviewModal #denyTeamVacationReview svg,
#teamVacationReviewModal #denyTeamVacationReview i,
#absenceTeamReviewModal #denyAbsenceTeamReview svg,
#absenceTeamReviewModal #denyAbsenceTeamReview i,
#absenceTeamReviewModal #confirmAbsenceTeamDenial svg,
#absenceTeamReviewModal #confirmAbsenceTeamDenial i {
  width: 14px;
  height: 14px;
  flex: none;
  margin: 0;
}

/* Mantener también centrada la confirmación destructiva de ausencias. */

/* --------------------------------------------------------------------------
   Migrated source: identity-brand-styles
   -------------------------------------------------------------------------- */

#view-about .about-identity-shell {
  min-width: 0;
  --id-blue: #1700fd;
  --id-green: #b7ff3c;
  --id-black: #000;
  --id-taupe: #212121;
  --id-silver: #e6e6e6;
  --id-white: #fff;
  color: #000;
}
#view-about .identity-svg-defs {
  position: absolute;
  pointer-events: none;
}
#view-about .identity-local-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  display: flex;
  gap: 4px;
  overflow: auto;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px solid #dadde6;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}

#view-about .identity-local-nav button {
  flex: 1;
  min-width: max-content;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 10px 11px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #656565;
  transition: 0.2s;
}
#view-about .identity-local-nav button:hover {
  background: #f0f0f0;
  color: #000;
}
/* [AGRUPADO-486] Estilos 100% idénticos agrupados. Origen: líneas 6251, 6309, 6336, 6339, 6357, 6359. */
#view-about .identity-local-nav button.active,
#view-about .identity-logo-preview.black,
#view-about .identity-color.black,
#view-about .identity-color-ratio .black,
#view-about .identity-outline-cta:hover {
  background: #000;
  color: #fff;
}
#view-about .identity-hero {
  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #000;
  color: #fff;
  padding: var(--padding-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}
#view-about .identity-hero-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 85%);
}
#view-about .identity-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  width: 68%;
  aspect-ratio: 1;
  left: -29%;
  top: -45%;
  border-radius: 50%;
  background: var(--id-blue);
  filter: blur(2px);
  opacity: 0.9;
}
#view-about .identity-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 43%;
  aspect-ratio: 1;
  right: -17%;
  bottom: -30%;
  border-radius: 47% 53% 39% 61%;
  background: var(--id-green);
  transform: rotate(22deg);
}
#view-about .identity-hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  pointer-events: none;
}
#view-about .identity-hero-orbit-a {
  width: 520px;
  height: 520px;
  right: -90px;
  top: -120px;
  animation: idOrbit 18s linear infinite;
}
#view-about .identity-hero-orbit-b {
  width: 300px;
  height: 300px;
  right: 160px;
  bottom: -150px;
  border-color: rgba(183, 255, 60, 0.65);
  animation: idOrbit 12s linear reverse infinite;
}
#view-about .identity-hero-blur {
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  left: 48%;
  top: 34%;
  border-radius: 50%;
  background: var(--id-green);
  filter: blur(105px);
  opacity: 0.28;
}
@keyframes idOrbit {
  to {
    transform: rotate(360deg);
  }
}
#view-about .identity-hero-top,
#view-about .identity-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 2;
}
#view-about .identity-hero-logo {
  width: 138px;
  height: auto;
  color: #fff;
}
#view-about .identity-hero-top > span {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
}
#view-about .identity-hero-main {
  position: relative;
  z-index: 2;
  max-width: 950px;
  margin: 55px auto 45px;
  width: 100%;
}
#view-about .identity-kicker {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--id-green);
}
#view-about .identity-animated-claim {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: clamp(54px, 5.4vw, 102px);
  line-height: 0.82;
  letter-spacing: -0.075em;
  text-align: center;
}
#view-about .identity-claim-word {
  display: inline-block;
  will-change: transform, opacity;
}
#view-about .identity-claim-word.creativity {
  animation: idCreativity 1.25s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
#view-about .identity-claim-word.strategy {
  animation: idStrategy 1.25s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
#view-about .identity-claim-word sup {
  font-size: 0.18em;
  vertical-align: top;
  letter-spacing: 0;
  margin-left: 4px;
}
#view-about .identity-claim-join {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--id-green);
  animation: idJoin 0.8s 0.55s both;
}
#view-about .identity-claim-join i {
  display: block;
  width: 25px;
  height: 1px;
  background: currentColor;
}
#view-about .identity-claim-join em {
  font-style: normal;
}
@keyframes idCreativity {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes idStrategy {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes idJoin {
  from {
    opacity: 0;
    transform: scaleX(0.35);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#view-about .identity-hero-copy {
  max-width: 650px;
  margin: 34px auto 0;
  font-family: var(--font-body);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-body);
  text-align: center;
  color: rgba(255, 255, 255, 0.76);
}
#view-about .identity-hero-footer {
  font-family: var(--font-body);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* [AGRUPADO-487] Estilos 100% idénticos agrupados. Origen: líneas 6279, 6359, 8459. */
#view-about .identity-hero-footer span,
#view-about .about-carousel-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* [AGRUPADO-488] Estilos 100% idénticos agrupados. Origen: líneas 6280, 6352. */
#view-about .identity-hero-code,
#view-about .identity-graphics-controls input:checked + span i {
  color: var(--id-green);
}

#view-about .identity-section {
  scroll-margin-top: 130px;
  padding: 92px 4px 0;
}
#view-about .identity-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin: 0 0 28px;
}
#view-about .identity-section-head > div:first-child {
  position: relative;
  padding-left: 54px;
}
#view-about .identity-section-index {
  position: absolute;
  left: 0;
  top: 5px;
  font:
    700 10px/1 "DM Sans",
    sans-serif;
  color: #8f8f8f;
  letter-spacing: 0.12em;
}
#view-about .identity-section-head p {
  margin: 0 0 5px;
  font:
    700 9px/1.2 "DM Sans",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #6d6d6d;
}
#view-about .identity-section-head h2 {
  margin: 0;
  font:
    700 clamp(32px, 4.2vw, 58px)/0.95 Manrope,
    sans-serif;
  letter-spacing: -0.055em;
  color: #000;
}
#view-about .identity-section-head > p {
  max-width: 420px;
  margin: 0;
  font:
    400 12px/1.55 "DM Sans",
    sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: #666;
}
#view-about .identity-label {
  display: block;
  margin-bottom: 5px;
  font:
    700 8px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7b7b7b;
}
#view-about .identity-asset-block {
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 16px;
}
#view-about .identity-asset-toolbar {
  min-height: 78px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #e3e3e3;
}
#view-about .identity-asset-toolbar h3 {
  margin: 0;
  font:
    700 20px/1.05 Manrope,
    sans-serif;
  letter-spacing: -0.03em;
  color: #000;
}
#view-about .identity-asset-toolbar p {
  margin: 6px 0 0;
  font:
    400 10px/1.4 "DM Sans",
    sans-serif;
  color: #707070;
}
#view-about .identity-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#view-about .identity-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  font:
    600 9px/1 "DM Sans",
    sans-serif;
  color: #333;
  cursor: pointer;
}

#view-about .identity-switch span {
  width: 31px;
  height: 18px;
  border-radius: 999px;
  background: #d7d7d7;
  padding: 2px;
  transition: 0.2s;
}
#view-about .identity-switch span::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: 0.2s;
}
#view-about .identity-switch input:checked + span {
  background: var(--id-blue);
}
#view-about .identity-switch input:checked + span::after {
  transform: translateX(13px);
}
#view-about .identity-logo-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#view-about .identity-logo-preview {
  min-height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: #000;
}
#view-about .identity-logo-preview:nth-child(odd) {
  border-right: 1px solid rgba(128, 128, 128, 0.25);
}
#view-about .identity-logo-preview:nth-child(-n/**/+2) {
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
#view-about .identity-logo-preview > span {
  position: absolute;
  left: 15px;
  top: 13px;
  font:
    700 8px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
#view-about .identity-logo-preview.light,
#view-about .identity-color.white {
  background: #fff;
  color: #000;
}
#view-about .identity-logo-preview.blue,
#view-about .identity-rule.minimum,
#view-about .identity-color.electric,
#view-about .identity-color-ratio .electric {
  background: var(--id-blue);
  color: #fff;
}
#view-about .identity-logo-preview.green,
#view-about .identity-color.apple {
  background: var(--id-green);
  color: #000;
}
#view-about .identity-safe-box {
  position: relative;
  width: 82%;
  max-width: 500px;
  aspect-ratio: 272.2/105.2;
  box-sizing: border-box;
}
#view-about .identity-safe-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed currentColor;
  opacity: 0;
  transition: opacity 0.2s;
}
#view-about .identity-logo-previews.show-safe .identity-safe-box::before {
  opacity: 0.38;
}
#view-about .identity-preview-logo {
  position: absolute;
  left: 10.4335%;
  top: 28.7072%;
  display: block;
  width: 79.133%;
  height: 42.5856%;
  color: inherit;
}
#view-about .identity-safe-n {
  position: absolute;
  display: block;
  width: 10.4335%;
  height: 28.7072%;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  transition: opacity 0.2s;
}
#view-about .identity-logo-previews.show-safe .identity-safe-n {
  opacity: 0.68;
}
#view-about .identity-safe-n-top {
  left: 44.7832%;
  top: 0;
}
#view-about .identity-safe-n-right {
  left: 89.5665%;
  top: 42.5856%;
}
#view-about .identity-safe-n-bottom {
  left: 44.7832%;
  top: 71.2928%;
}
#view-about .identity-safe-n-left {
  left: 0;
  top: 42.5856%;
}
#view-about .identity-iso-block {
  background: #000 !important;
  color: #fff;
  border-color: #000;
}
#view-about .identity-iso-block .identity-asset-toolbar {
  border-color: #333;
}
#view-about .identity-iso-block .identity-label,
#view-about .identity-iso-block .identity-asset-toolbar p {
  color: #aaa;
} /* [AGRUPADO-492] Estilos 100% idénticos agrupados. Origen: líneas 6321, 6342, 6352, 6891, 9170. */
#view-about .identity-iso-block .identity-asset-toolbar h3,
#view-about .identity-type-section,
#view-about .identity-graphics-controls input:checked + span strong,
#vacationModal .vacation-linked-calendar-day.is-selected .vacation-day-today,
.intranet-date-picker-day.is-selected .intranet-date-picker-today,
.intranet-date-picker-day.is-range-start .intranet-date-picker-today,
.intranet-date-picker-day.is-range-end .intranet-date-picker-today {
  color: #fff !important;
}
#view-about .identity-iso-preview {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.7fr);
}
#view-about .identity-iso-stage {
  display: grid;
  place-items: center;
  border-right: 1px solid #292929;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(23, 0, 253, 0.32),
    transparent 48%
  );
}
#view-about .identity-main-iso {
  width: 110px;
  color: #fff;
}
#view-about .identity-iso-scales {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: #151515;
}
#view-about .identity-iso-scales div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
}
#view-about .identity-iso-scales svg {
  display: block;
  color: #fff;
}
#view-about .identity-iso-scales .s64 {
  width: 64px;
}
#view-about .identity-iso-scales .s48 {
  width: 48px;
}
#view-about .identity-iso-scales .s32 {
  width: 32px;
}
#view-about .identity-iso-scales span {
  font:
    600 8px/1 "DM Sans",
    sans-serif;
  color: #999;
}
#view-about .identity-rules-quickview {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.8fr;
  gap: 10px;
  margin-top: 16px;
}
#view-about .identity-rule {
  border-radius: var(--radius-card);
  padding: var(--padding-card);
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
#view-about .identity-rule > i {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
}
#view-about .identity-rule strong {
  display: block;
  margin: 1px 0 6px;
  font:
    700 13px/1 Manrope,
    sans-serif;
}
#view-about .identity-rule p {
  margin: 0;
  font:
    400 10px/1.45 "DM Sans",
    sans-serif;
}
#view-about .identity-rule.yes {
  background: #edffd0;
}
#view-about .identity-rule.yes > i {
  color: #347100;
}
#view-about .identity-rule.no {
  background: #f1f1f1;
} /* [AGRUPADO-493] Estilos 100% idénticos agrupados. Origen: líneas 6329, 6342, 6356. */
#view-about .identity-rule.no > i,
#view-about .identity-type-section .identity-section-head h2,
#view-about .identity-icon-grid > div:hover small {
  color: #000;
}
#view-about .identity-rule.minimum > span {
  font:
    800 29px/0.85 Manrope,
    sans-serif;
}

#view-about .identity-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #d7d7d7;
}
#view-about .identity-color {
  position: relative;
  min-height: 230px;
  border: 0;
  border-right: 1px solid rgba(128, 128, 128, 0.22);
  border-bottom: 1px solid rgba(128, 128, 128, 0.22);
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  transition:
    transform 0.22s,
    filter 0.22s;
  overflow: hidden;
}
#view-about .identity-color:active {
  transform: scale(0.985);
}
#view-about .identity-color::after {
  content: "COPIAR";
  position: absolute;
  right: 16px;
  top: 15px;
  font:
    700 8px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.2s;
}
#view-about .identity-color:hover::after {
  opacity: 0.7;
  transform: none;
}
#view-about .identity-color span {
  font:
    700 10px/1 "DM Sans",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#view-about .identity-color strong {
  margin-top: 8px;
  font:
    700 21px/1 Manrope,
    sans-serif;
  letter-spacing: -0.02em;
}
#view-about .identity-color i {
  position: absolute;
  right: 17px;
  bottom: 18px;
  width: 16px;
  height: 16px;
  opacity: 0.55;
}
/* [AGRUPADO-494] Estilos 100% idénticos agrupados. Origen: líneas 6336, 6339. */
#view-about .identity-color.taupe,
#view-about .identity-color-ratio .taupe {
  background: var(--id-taupe);
  color: #fff;
}
#view-about .identity-color.silver {
  background: var(--id-silver);
  color: #000;
}
#view-about .identity-color-ratio-wrap {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #dcdcdc;
  border-radius: 18px;
  background: #fff;
}
#view-about .identity-color-ratio-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font:
    700 10px/1 "DM Sans",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#view-about .identity-color-ratio-head span {
  color: #888;
}
#view-about .identity-color-ratio {
  display: flex;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #cfcfcf;
}
#view-about .identity-color-ratio > div {
  flex: var(--ratio);
  display: flex;
  align-items: flex-end;
  padding: 8px;
  font:
    700 8px/1 "DM Sans",
    sans-serif;
}
#view-about .identity-color-ratio .apple {
  background: var(--id-green);
}
#view-about .identity-color-ratio .silver {
  background: var(--id-silver);
}
#view-about .identity-color-warning {
  margin-top: 14px;
  border-radius: 16px;
  padding: 17px 18px;
  background: #000;
  color: #fff;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#view-about .identity-color-warning > i {
  width: 25px;
  height: 25px;
  color: var(--id-green);
  stroke-width: 1.6;
  flex: none;
}
#view-about .identity-color-warning strong {
  font:
    700 12px/1.2 Manrope,
    sans-serif;
}
#view-about .identity-color-warning p {
  margin: 5px 0 0;
  font:
    400 11px/1.5 "DM Sans",
    sans-serif;
  color: #bbb;
}

#view-about .identity-type-section::before {
  content: "";
  position: absolute;
}
#view-about .identity-type-tester {
  border-radius: 20px 20px 0 0;
  background: #000;
  padding: 24px 25px 20px;
  color: #fff;
}
#view-about .identity-type-tester > label {
  display: block;
  margin-bottom: 10px;
  font:
    700 9px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--id-green);
}
#view-about .identity-type-tester textarea {
  width: 100%;
  min-height: 105px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid #3b3b3b;
  background: transparent;
  color: #fff;
  padding: 0 0 15px;
  outline: none;
  font:
    600 clamp(34px, 5vw, 70px)/1 Manrope,
    sans-serif;
  letter-spacing: -0.055em;
}
#view-about .identity-type-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 13px;
}
#view-about .identity-type-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  font:
    600 9px/1 "DM Sans",
    sans-serif;
  color: #aaa;
}
#view-about .identity-type-controls input {
  accent-color: var(--id-green);
  width: 120px;
}
#view-about .identity-type-controls output {
  width: 26px;
}
#view-about .identity-type-controls button {
  width: 34px;
  height: 30px;
  border: 1px solid #444;
  border-radius: 7px;
  background: transparent;
  color: #aaa;
  font:
    600 10px/1 "DM Sans",
    sans-serif;
}
#view-about .identity-type-controls button.active {
  background: var(--id-green);
  border-color: var(--id-green);
  color: #000;
}
#view-about .identity-font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #000;
  border-top: 1px solid #292929;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
#view-about .identity-font-card {
  min-height: 420px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #292929;
}
#view-about .identity-font-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
#view-about .identity-font-meta span {
  grid-column: 1/-1;
  margin-bottom: 7px;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #818181;
}
#view-about .identity-font-meta strong {
  font-size: 24px;
  letter-spacing: -0.04em;
}
#view-about .identity-font-meta em {
  font-size: var(--font-size-2xs);
  font-style: normal;
  color: #888;
}
#view-about .identity-font-sample {
  margin: auto 0;
  font-size: clamp(35px, 4.4vw, 62px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}
#view-about .identity-weight-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  font-size: var(--font-size-3xs);
  color: #999;
}
#view-about .identity-functional-example {
  margin-top: auto;
}
#view-about .identity-functional-example small {
  color: var(--id-green);
  font-size: var(--font-size-3xs);
  letter-spacing: 0.1em;
}
#view-about .identity-functional-example h4 {
  margin: 11px 0 7px;
  font-size: 24px;
  letter-spacing: -0.04em;
}
#view-about .identity-functional-example p {
  margin: 0 0 16px;
  max-width: 350px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-body);
  color: #aaa;
}
#view-about .identity-functional-example button {
  height: 32px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  background: var(--id-blue);
  color: #fff;
  font:
    700 8px/1 "DM Sans",
    sans-serif;
}

#view-about .identity-graphics-lab {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  border: 1px solid #d6d6d6;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
#view-about .identity-graphics-controls {
  padding: 12px;
  background: #f5f5f5;
  border-right: 1px solid #d6d6d6;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#view-about .identity-graphics-controls input {
  position: absolute;
  opacity: 0;
}
#view-about .identity-graphics-controls span {
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px;
  display: grid;
  grid-template-columns: 27px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  background: #fff;
  color: #777;
  transition: 0.2s;
}
#view-about .identity-graphics-controls i {
  grid-row: 1/3;
  width: 18px;
  height: 18px;
}
#view-about .identity-graphics-controls strong {
  font:
    700 10px/1.2 Manrope,
    sans-serif;
  color: #333;
}
#view-about .identity-graphics-controls small {
  font:
    400 8px/1.2 "DM Sans",
    sans-serif;
}
#view-about .identity-graphics-controls input:checked + span {
  background: #000;
  border-color: #000;
  color: #aaa;
}
#view-about .identity-graphics-stage {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
#view-about .graphic-layer {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.3s,
    transform 0.4s;
}
#view-about .graphic-layer.is-off {
  opacity: 0 !important;
  transform: scale(0.96);
  pointer-events: none;
}
#view-about .graphic-base {
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 55px;
}
#view-about .graphic-base span {
  font:
    700 clamp(60px, 8vw, 118px)/0.78 Manrope,
    sans-serif;
  letter-spacing: -0.08em;
  color: #fff;
}
#view-about .graphic-base sup {
  font-size: 0.15em;
}
#view-about .graphic-mask {
  z-index: 3;
}
#view-about .graphic-mask i {
  position: absolute;
  display: block;
}
#view-about .graphic-mask i:nth-child(1) {
  width: 44%;
  height: 58%;
  right: 7%;
  top: 5%;
  background: var(--id-blue);
  border-radius: 50% 50% 8% 50%;
  mix-blend-mode: screen;
}
#view-about .graphic-mask i:nth-child(2) {
  width: 31%;
  height: 43%;
  left: 12%;
  bottom: -9%;
  background: var(--id-green);
  border-radius: 50% 8% 50% 50%;
  mix-blend-mode: screen;
}
#view-about .graphic-mask i:nth-child(3) {
  width: 150px;
  height: 150px;
  right: 32%;
  bottom: 13%;
  border: 2px solid #fff;
  border-radius: 50%;
}
#view-about .graphic-blur {
  z-index: 2;
}
#view-about .graphic-blur i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
#view-about .graphic-blur i:first-child {
  width: 240px;
  height: 240px;
  right: 6%;
  top: 8%;
  background: var(--id-blue);
}
#view-about .graphic-blur i:last-child {
  width: 190px;
  height: 190px;
  left: 15%;
  bottom: 6%;
  background: var(--id-green);
}
#view-about .graphic-grain {
  z-index: 5;
  opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
#view-about .graphic-type {
  z-index: 4;
  inset: auto -5% -12% auto;
  font:
    800 96px/0.68 Manrope,
    sans-serif;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
  transform: rotate(-9deg);
  white-space: nowrap;
}
#view-about .graphic-type.is-off {
  transform: rotate(-9deg) scale(0.96);
}
#view-about .graphic-misc {
  z-index: 6;
  color: #fff;
  font:
    700 10px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.12em;
}
#view-about .graphic-misc span {
  position: absolute;
}
#view-about .graphic-misc span:nth-child(1) {
  left: 25px;
  top: 23px;
}
#view-about .graphic-misc span:nth-child(2) {
  right: 26px;
  top: 24px;
  font-size: var(--font-size-hero);
  color: var(--id-green);
}
#view-about .graphic-misc span:nth-child(3) {
  right: 26px;
  bottom: 25px;
  color: var(--id-green);
}
#view-about .graphic-misc span:nth-child(4) {
  left: 25px;
  bottom: 25px;
}
#view-about .graphic-misc span:nth-child(5) {
  left: 48%;
  top: 8%;
  font-size: 28px;
}
#view-about .identity-resource-descriptions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: 10px;
}
#view-about .identity-resource-descriptions p {
  margin: 0;
  border: 1px solid #dedede;
  border-radius: 12px;
  padding: 13px;
  font:
    400 10px/1.45 "DM Sans",
    sans-serif;
  color: #666;
}
#view-about .identity-resource-descriptions strong {
  display: block;
  margin-bottom: 4px;
  color: #000;
  font-size: var(--font-size-2xs);
}

#view-about .identity-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
#view-about .identity-icon-grid > div {
  aspect-ratio: 1;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  transition: 0.2s;
}
#view-about .identity-icon-grid > div:hover {
  background: var(--id-green);
  transform: scale(0.97);
}
#view-about .identity-icon-grid i {
  width: 30px;
  height: 30px;
  stroke-width: 1.35;
}
#view-about .identity-icon-grid small {
  font:
    500 10px/1 "DM Sans",
    sans-serif;
  color: #777;
}
#view-about .identity-outline-cta {
  margin: 14px 0 0 auto;
  height: 38px;
  border: 1px solid #000;
  border-radius: 9px;
  padding: 0 14px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    700 9px/1 "DM Sans",
    sans-serif;
  text-decoration: none !important;
}

#view-about .identity-app-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #000;
  cursor: grab;
  outline: none;
  touch-action: pan-y;
  user-select: none;
} /* [AGRUPADO-495] Estilos 100% idénticos agrupados. Origen: líneas 6360, 8398. */
#view-about .identity-app-carousel.is-dragging,
#view-about .about-values-carousel.is-dragging {
  cursor: grabbing;
}
#view-about .identity-app-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.2, 1);
}
#view-about .identity-app-slide {
  flex: 0 0 100%;
  min-width: 0;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
#view-about .identity-app-slide .app-art {
  flex: 1;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#view-about .identity-app-slide footer {
  height: 60px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #000;
  color: #fff;
  border-top: 1px solid #2e2e2e;
}
#view-about .identity-app-slide footer span {
  font:
    700 10px/1 "DM Sans",
    sans-serif;
  color: var(--id-green);
}
#view-about .identity-app-slide footer strong {
  font:
    600 12px/1 Manrope,
    sans-serif;
}
#view-about .identity-app-drag {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  backdrop-filter: blur(10px);
  font:
    700 8px/1 "DM Sans",
    sans-serif;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.2s;
  pointer-events: none;
}
#view-about .identity-app-slide.social .app-art {
  gap: 24px;
  background: var(--id-silver);
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.04) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.04) 50%,
    rgba(0, 0, 0, 0.04) 75%,
    transparent 75%
  );
  background-size: 22px 22px;
}
#view-about .social-frame {
  width: min(330px, 36%);
  aspect-ratio: 4/5;
  background: var(--id-blue);
  color: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.23);
  transform: rotate(-4deg);
}
#view-about .social-frame.secondary {
  background: var(--id-green);
  color: #000;
  transform: rotate(5deg) translateY(20px);
}
#view-about .social-frame span,
#view-about .social-frame em {
  font:
    700 8px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.12em;
  font-style: normal;
}
#view-about .social-frame strong {
  font:
    800 clamp(34px, 4vw, 61px)/0.78 Manrope,
    sans-serif;
  letter-spacing: -0.07em;
}
#view-about .social-frame.secondary strong {
  font-size: clamp(50px, 6vw, 86px);
}
#view-about .identity-app-slide.screens .app-art {
  background: #121212;
}
#view-about .screen-wall {
  position: relative;
  width: 78%;
  height: 70%;
  border: 7px solid #252525;
  background: var(--id-blue);
  box-shadow: 0 30px 70px #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#view-about .screen-wall > i {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--id-green);
  right: -18%;
  top: -28%;
}
#view-about .screen-wall > div {
  position: relative;
  width: 80%;
  z-index: 2;
  color: #fff;
}
#view-about .screen-wall .app-logo {
  width: 130px;
  color: #fff;
}
#view-about .screen-wall strong {
  display: block;
  margin-top: 65px;
  font:
    700 clamp(45px, 6vw, 88px)/0.82 Manrope,
    sans-serif;
  letter-spacing: -0.07em;
}
#view-about .identity-app-slide.outdoor .app-art {
  background: linear-gradient(#aeb5ba 0 55%, #656565 55%);
}
#view-about .billboard {
  position: relative;
  width: 78%;
  height: 64%;
  background: #000;
  color: #fff;
  padding: 34px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}
#view-about .billboard::after {
  content: "";
  position: absolute;
  width: 47%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--id-green);
  right: -8%;
  bottom: -35%;
}
#view-about .billboard span {
  font:
    700 clamp(48px, 7vw, 105px)/0.75 Manrope,
    sans-serif;
  letter-spacing: -0.075em;
}
#view-about .billboard strong {
  position: absolute;
  right: 35px;
  top: 35px;
  z-index: 2;
  font:
    800 clamp(43px, 5vw, 78px)/0.85 Manrope,
    sans-serif;
  color: var(--id-green);
}
#view-about .billboard em {
  position: absolute;
  left: 35px;
  bottom: 28px;
  font:
    600 9px/1 "DM Sans",
    sans-serif;
  font-style: normal;
  letter-spacing: 0.1em;
}
#view-about .identity-app-slide.badges .app-art {
  gap: 50px;
  background: var(--id-blue);
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(183, 255, 60, 0.45),
      transparent 25%
    ),
    radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.55), transparent 30%);
}
#view-about .badge {
  position: relative;
  width: 245px;
  height: 365px;
  border-radius: 10px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
#view-about .badge::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 10px;
  border-radius: 999px;
  background: #161616;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}
#view-about .lanyard-a {
  background: #fff;
  color: #000;
  transform: rotate(-6deg);
}
#view-about .lanyard-b {
  background: var(--id-green);
  color: #000;
  transform: rotate(7deg) translateY(22px);
}
#view-about .badge-logo {
  width: 100px;
  margin-top: 25px;
}
#view-about .badge-iso {
  width: 48px;
  margin-top: 20px;
}
#view-about .badge strong {
  margin-top: auto;
  font:
    800 34px/0.86 Manrope,
    sans-serif;
  letter-spacing: -0.05em;
}
#view-about .badge span {
  margin-top: 14px;
  font:
    700 8px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.12em;
}
#view-about .identity-app-slide.merch .app-art {
  gap: 30px;
  background: #e2e2e2;
}
#view-about .shirt {
  position: relative;
  width: 340px;
  height: 390px;
  background: #000;
  clip-path: polygon(
    25% 0,
    42% 7%,
    58% 7%,
    75% 0,
    100% 22%,
    83% 38%,
    74% 28%,
    74% 100%,
    26% 100%,
    26% 28%,
    17% 38%,
    0 22%
  );
  display: grid;
  place-items: center;
  color: #fff;
}
#view-about .shirt span {
  font:
    800 40px/0.78 Manrope,
    sans-serif;
  letter-spacing: -0.06em;
}
#view-about .cap {
  width: 200px;
  height: 130px;
  border-radius: 100px 100px 20px 20px;
  background: var(--id-blue);
  display: grid;
  place-items: center;
  transform: translateY(80px) rotate(5deg);
}
#view-about .cap::after {
  content: "";
  position: absolute;
  width: 125px;
  height: 45px;
  border-radius: 50%;
  background: var(--id-blue);
  right: -65px;
  bottom: 0;
}
#view-about .cap-iso {
  width: 38px;
  color: #fff;
}
#view-about .tote {
  width: 230px;
  height: 300px;
  background: var(--id-green);
  padding: 45px 25px;
  font:
    800 45px/0.8 Manrope,
    sans-serif;
  letter-spacing: -0.06em;
  transform: rotate(-4deg);
}
#view-about .tote::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 70px;
  border: 8px solid #000;
  border-bottom: 0;
  border-radius: 70px 70px 0 0;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
}
#view-about .identity-app-slide.packaging .app-art {
  gap: 12px;
  background: #161616;
  perspective: 900px;
}
#view-about .box {
  width: 250px;
  height: 330px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 28px 55px #000;
}
#view-about .box-a {
  background: #fff;
  transform: rotateY(15deg) rotateX(3deg);
}
#view-about .box-b {
  background: var(--id-blue);
  color: #fff;
  transform: translateY(35px);
}
#view-about .box-c {
  width: 170px;
  height: 250px;
  background: var(--id-green);
  font:
    800 115px/1 Manrope,
    sans-serif;
  align-items: center;
  justify-content: center;
  transform: rotateY(-14deg) rotateX(2deg);
}
#view-about .box-a span,
#view-about .box-b strong {
  font:
    800 42px/0.8 Manrope,
    sans-serif;
  letter-spacing: -0.06em;
}
#view-about .box-b em {
  font:
    700 9px/1 "DM Sans",
    sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
}
#view-about .identity-app-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
#view-about .identity-app-dots button {
  width: 30px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #d3d3d3;
  padding: 0;
  transition: 0.2s;
}
#view-about .identity-app-dots button.active {
  width: 58px;
  background: #000;
}

#view-about .identity-closing {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  margin-top: 94px;
  border-radius: 24px;
  background: #000;
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
#view-about .identity-closing-shape {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--id-blue);
  right: -30%;
  top: -60%;
  box-shadow: -260px 330px 0 -70px var(--id-green);
}
#view-about .identity-closing-iso {
  position: absolute;
  right: 48px;
  bottom: 42px;
  width: 78px;
  color: #fff;
  z-index: 2;
}
#view-about .identity-closing > p,
#view-about .identity-closing > h2,
#view-about .identity-closing > div {
  position: relative;
  z-index: 2;
}
#view-about .identity-closing > p {
  margin: 0 0 18px;
  font:
    700 9px/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--id-green);
}
#view-about .identity-closing h2 {
  margin: 0 0 38px;
  font:
    700 clamp(52px, 7vw, 98px)/0.83 Manrope,
    sans-serif;
  letter-spacing: -0.075em;
}
#view-about .identity-closing > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-234-team-review-observe-styles
   -------------------------------------------------------------------------- */

/* Acción Observar: alternativa intermedia y claramente diferenciada. */
#absenceTeamReviewModal .ghost-observe-btn,
#requestTeamReviewModal .ghost-observe-btn {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #cfc5f7;
  border-radius: 9px;
  background: #f5f2ff;
  color: #684eb6;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-base);
}
#absenceTeamReviewModal .ghost-observe-btn:hover,
#requestTeamReviewModal .ghost-observe-btn:hover {
  border-color: #a995ef;
  background: #ece7ff;
  color: #533b9f;
  transform: translateY(-1px);
}

#absenceTeamReviewModal .absence-team-observation-panel,
#requestTeamReviewModal .request-observation-panel {
  width: min(700px, 100%);
  padding: 18px;
  border: 1px solid #d9cff8;
  border-radius: 15px;
  background: #fcfaff;
}
/* [AGRUPADO-504] Estilos 100% idénticos agrupados. Origen: líneas 6422, 7562, 8312. */
#absenceTeamReviewModal .absence-team-observation-head,
#requestTeamReviewModal .request-observation-head,
#teamVacationReviewModal .team-vacation-denial-head,
#requestTeamReviewModal .request-denial-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
#absenceTeamReviewModal .absence-team-observation-head > span,
#requestTeamReviewModal .request-observation-head > span {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: #eee9ff;
  color: #684eb6;
}

/* [AGRUPADO-505] Estilos 100% idénticos agrupados. Origen: líneas 6430, 7567, 8199, 8317, 8799. */
#absenceTeamReviewModal .absence-team-observation-head h3,
#requestTeamReviewModal .request-observation-head h3,
#teamVacationReviewModal .team-vacation-denial-head h3,
.request-review-section-head h3,
#requestTeamReviewModal .request-denial-head h3,
#teamRequestActionModal .team-request-action-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-size-lg);
}
/* [AGRUPADO-506] Estilos 100% idénticos agrupados. Origen: líneas 6432, 7568, 8318. */
#absenceTeamReviewModal .absence-team-observation-head p,
#requestTeamReviewModal .request-observation-head p,
#teamVacationReviewModal .team-vacation-denial-head p,
#requestTeamReviewModal .request-denial-head p {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
}
/* [AGRUPADO-507] Estilos 100% idénticos agrupados. Origen: líneas 6434, 7569, 8319, 8803. */
#absenceTeamReviewModal .absence-team-observation-field,
#requestTeamReviewModal .request-observation-field,
#teamVacationReviewModal .team-vacation-denial-field,
#requestTeamReviewModal .request-denial-field,
#teamRequestActionModal .team-request-action-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
/* [AGRUPADO-508] Estilos 100% idénticos agrupados. Origen: líneas 6436, 7570, 8320, 8809. */
#absenceTeamReviewModal .absence-team-observation-field > span,
#requestTeamReviewModal .request-observation-field > span,
#teamVacationReviewModal .team-vacation-denial-field > span,
#requestTeamReviewModal .request-denial-field > span,
#teamRequestActionModal .team-request-action-field > span {
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
#absenceTeamReviewModal .absence-team-observation-field textarea,
#requestTeamReviewModal .request-observation-field textarea {
  width: 100%;
  min-height: 112px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  outline: none;
  resize: vertical;
}
#absenceTeamReviewModal .absence-team-observation-field textarea:focus,
#requestTeamReviewModal .request-observation-field textarea:focus {
  border-color: #9d8ce8;
  box-shadow: 0 0 0 3px rgba(110, 90, 232, 0.1);
}
#absenceTeamReviewModal .absence-team-observation-notice,
#requestTeamReviewModal .request-observation-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #d9cff8;
  border-radius: 11px;
  background: #f3efff;
  color: #5e479f;
}
/* [AGRUPADO-509] Estilos 100% idénticos agrupados. Origen: líneas 6449, 7582, 8333, 8833. */
#absenceTeamReviewModal .absence-team-observation-notice > i,
#requestTeamReviewModal .request-observation-notice > i,
#teamVacationReviewModal .team-vacation-denial-notice > i,
#requestTeamReviewModal .request-denial-notice > i,
#teamRequestActionModal .team-request-action-notice > i {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}

/* [AGRUPADO-510] Estilos 100% idénticos agrupados. Origen: líneas 6455, 6926, 7585, 8336, 8836. */
#absenceTeamReviewModal .absence-team-observation-notice span,
#requestTeamReviewModal .request-observation-notice span,
#view-vacations .timeline-intro > div > span,
#teamVacationReviewModal .team-vacation-denial-notice span,
#requestTeamReviewModal .request-denial-notice span,
#teamRequestActionModal .team-request-action-notice span {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
/* [AGRUPADO-511] Estilos 100% idénticos agrupados. Origen: líneas 6457, 7586. */
#absenceTeamReviewModal .absence-team-observation-actions,
#requestTeamReviewModal .request-observation-actions,
#teamVacationReviewModal .team-vacation-denial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
#absenceTeamReviewModal .observe-confirm-btn,
#requestTeamReviewModal .observe-confirm-btn {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: #6e5ae8;
  background: #6e5ae8;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}
#absenceTeamReviewModal .observe-confirm-btn:hover,
#requestTeamReviewModal .observe-confirm-btn:hover {
  background: #5d49cf;
  border-color: #5d49cf;
}

#absenceTeamReviewModal .observe-confirm-btn:disabled,
#requestTeamReviewModal .observe-confirm-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
#view-absences .absence-team-resolved.observed,
#view-transport .request-team-resolved.observed,
#view-reimbursements .request-team-resolved.observed {
  color: #684eb6;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-237-vacation-summary-refresh-styles
   -------------------------------------------------------------------------- */

#view-vacations .vacation-next-expiry-value strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-6xl);
  line-height: 1;
  color: #8b6500;
}
#view-vacations .vacation-next-expiry-value span {
  display: block;
  margin-top: 5px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
  color: #725b1d;
}
#view-vacations .vacation-bag-description {
  margin: 5px 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--ink-3);
}
#view-vacations .vacation-bag-policy-note {
  margin: 7px 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
  color: var(--muted);
  max-width: 600px;
}
#view-vacations .vacation-bag-policy-link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#view-vacations #vacation-panel-resumen .date-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
#view-vacations #vacation-panel-resumen .date-square strong {
  margin: 0;
  line-height: 1;
}
#view-vacations #vacation-panel-resumen .date-square .date-square-month {
  display: block;
  margin: 0;
  color: inherit;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.02em;
}

#view-vacations .vacation-bag-row-benefit .vacation-bag-value {
  padding-top: 1px;
}

/* --------------------------------------------------------------------------
   Migrated source: vacation-request-detail-timeline-v239
   -------------------------------------------------------------------------- */

/* Vacaciones · seguimiento visual de cada solicitud */
#vacationDetailModal .vacation-detail-timeline {
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 3px 0 1px 2px;
}
#vacationDetailModal .vacation-detail-timeline .detail-step {
  position: relative;
  display: block;
  min-height: 45px;
  padding: 0 0 20px 39px;
  border: 0;
}
#vacationDetailModal .vacation-detail-timeline .detail-step:last-child {
  min-height: 30px;
  padding-bottom: 0;
}
#vacationDetailModal
  .vacation-detail-timeline
  .detail-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 13px;
  top: 27px;
  bottom: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
#vacationDetailModal .vacation-detail-timeline .detail-step > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step > i {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 7px;
  border: 1px solid #e1e5ee;
  border-radius: 50%;
  background: #f5f6f9;
  color: #8f97a8;
}
#vacationDetailModal .vacation-detail-timeline .detail-step.done > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step.done > i {
  border-color: #cdebdc;
  background: var(--green-bg);
  color: var(--green);
}
#vacationDetailModal .vacation-detail-timeline .detail-step.rejected > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step.rejected > i {
  border-color: #f2cbd3;
  background: var(--red-bg);
  color: var(--red);
}
#vacationDetailModal .vacation-detail-timeline .detail-step strong {
  display: block;
  padding-top: 1px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-compact);
}
#vacationDetailModal .vacation-detail-timeline .detail-step span {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Migrated source: vacation-request-detail-timeline-v240
   -------------------------------------------------------------------------- */

/* Vacaciones · íconos con mayor presencia y estados diferenciados */
#vacationDetailModal .vacation-detail-timeline .detail-step {
  min-height: 48px;
  padding-left: 42px;
}
#vacationDetailModal
  .vacation-detail-timeline
  .detail-step:not(:last-child)::after {
  left: 14px;
  top: 29px;
}
#vacationDetailModal .vacation-detail-timeline .detail-step > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step > i {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-width: 2px;
  stroke-width: 2.6;
}
#vacationDetailModal .vacation-detail-timeline .detail-step.in-progress > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step.in-progress > i {
  border-color: #c9d4ff;
  background: var(--blue-2);
  color: var(--blue);
}
#vacationDetailModal .vacation-detail-timeline .detail-step.pending > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step.pending > i {
  border-color: #efd28a;
  background: var(--amber-bg);
  color: var(--amber);
}
#vacationDetailModal .vacation-detail-timeline .detail-step.upcoming > svg,
#vacationDetailModal .vacation-detail-timeline .detail-step.upcoming > i {
  border-color: #dfe3eb;
  background: #f3f4f7;
  color: #8c94a5;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-242-vacation-request-detail-action-styles
   -------------------------------------------------------------------------- */

#view-vacations
  #vacation-panel-mis-solicitudes
  .vacation-requests-table
  .vacation-action-column {
  width: 116px;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-request-detail {
  min-width: 104px;
  min-height: 34px;
  padding: 0 11px;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
#view-vacations #vacation-panel-mis-solicitudes .vacation-request-detail i,
#view-vacations #vacation-panel-mis-solicitudes .vacation-request-detail svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-248-vacation-balances-consolidated-styles
   -------------------------------------------------------------------------- */

#view-vacations .vacation-balances-table {
  min-width: 980px;
}
#view-vacations .vacation-balances-table th:nth-child(3),
#view-vacations .vacation-balances-table td:nth-child(3),
#view-vacations .vacation-balances-table th:nth-child(4),
#view-vacations .vacation-balances-table td:nth-child(4),
#view-vacations .vacation-balances-table th:nth-child(5),
#view-vacations .vacation-balances-table td:nth-child(5) {
  min-width: 118px;
  text-align: center;
}
#view-vacations .vacation-balances-table th:nth-child(6),
#view-vacations .vacation-balances-table td:nth-child(6) {
  min-width: 145px;
  text-align: center;
}
#view-vacations .vacation-balances-table th:nth-child(7),
#view-vacations .vacation-balances-table td:nth-child(7) {
  min-width: 120px;
  text-align: center;
}
#view-vacation-balance-detail .vacation-balance-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: var(--line-height-compact);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-275-partner-vacation-styles
   -------------------------------------------------------------------------- */

.heading-actions .primary-btn {
  width: 210px;
  white-space: nowrap;
}
/* Íconos de las acciones principales: mismo tamaño que el Lucide Plus del botón contiguo. */
.heading-actions .primary-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex: none;
}
#view-vacations #openPartnerVacation svg {
  transform: none;
  stroke-width: 2;
}

/* Responsive global — lightboxes a pantalla completa */

/* --------------------------------------------------------------------------
   Migrated source: v3-289-responsive-modal-width-fix
   -------------------------------------------------------------------------- */

/* Responsive global — evita desbordes horizontales dentro de lightboxes fullscreen. */

/* --------------------------------------------------------------------------
   Migrated source: vacation-timeline-visual-refinement-v301
   -------------------------------------------------------------------------- */

/* Vacaciones · Planificación 3 meses — refinamiento visual */
#view-vacations .timeline-intro {
  align-items: center;
  margin: 2px 0 14px;
  padding: 12px 14px;
  border: 1px solid #e4e8f1;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbfcff, #fff);
}

#view-vacations .timeline-hint {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #dce4ff;
  border-radius: 999px;
  background: #f6f8ff;
  color: #61709a;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}
#view-vacations .vacation-timeline-scroll {
  border: 1px solid #dfe4ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(31, 45, 101, 0.055);
  scrollbar-width: thin;
  scrollbar-color: #bdc7da #f6f8fb;
}
#view-vacations .vacation-timeline-scroll::-webkit-scrollbar {
  height: 10px;
}
#view-vacations .vacation-timeline-scroll::-webkit-scrollbar-track {
  background: #f6f8fb;
}
#view-vacations .vacation-timeline-scroll::-webkit-scrollbar-thumb {
  background: #bdc7da;
  border: 3px solid #f6f8fb;
  border-radius: 999px;
}
#view-vacations .vacation-timeline {
  grid-template-columns: 220px repeat(3, minmax(235px, 1fr));
  min-width: 925px;
  background: #fff;
}
#view-vacations .timeline-head {
  height: 52px;
  padding: 0 12px;
  background: #f8f9fc;
  border-bottom: 1px solid #dfe4ef;
  color: #67708b;
  letter-spacing: 0.035em;
}
#view-vacations .timeline-name-head {
  position: sticky;
  left: 0;
  z-index: 9;
  background: #f8f9fc;
  border-right: 1px solid #dfe4ef;
  color: #4f5872;
}
#view-vacations .timeline-month {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-left: 1px solid #dfe4ef;
  color: #38406d;
  text-transform: none;
  letter-spacing: 0;
}
#view-vacations .timeline-month.current-month {
  background: #f2f5ff;
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}
#view-vacations .timeline-month-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}
#view-vacations .timeline-current-chip {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#view-vacations .timeline-month-scale {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  color: #a0a7b8;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

#view-vacations .timeline-name {
  position: sticky;
  left: 0;
  z-index: 5;
  min-height: 64px;
  padding: 9px 12px;
  background: #fff;
  border-right: 1px solid #e4e8f1;
  border-bottom: 1px solid #edf0f5;
}
#view-vacations .timeline-name.is-alt {
  background: #fbfcfe;
}
#view-vacations .timeline-name.own {
  background: #f3fbf8;
  box-shadow: inset 3px 0 0 var(--green);
}
#view-vacations .timeline-name .avatar {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-2xs);
  box-shadow: 0 2px 5px rgba(24, 34, 83, 0.1);
}

#view-vacations .timeline-name small {
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-snug);
}
#view-vacations .timeline-row {
  min-height: 64px;
  border-left: 1px solid #e4e8f1;
  border-bottom: 1px solid #edf0f5;
  background-color: #fff;
  background-image: linear-gradient(
    to right,
    transparent 24.75%,
    rgba(226, 230, 239, 0.72) 25%,
    transparent 25.25%,
    transparent 49.75%,
    rgba(226, 230, 239, 0.72) 50%,
    transparent 50.25%,
    transparent 74.75%,
    rgba(226, 230, 239, 0.72) 75%,
    transparent 75.25%
  );
}
#view-vacations .timeline-row.is-alt {
  background-color: #fbfcfe;
}
#view-vacations .timeline-row.current-month {
  background-color: #fcfdff;
}
#view-vacations .timeline-row.current-month::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--today-left, 50%);
  width: 1px;
  background: rgba(44, 84, 216, 0.3);
  pointer-events: none;
  z-index: 1;
}
#view-vacations .timeline-bar {
  top: 19px;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: var(--font-size-2xs);
  line-height: 26px;
  box-shadow: 0 2px 5px rgba(26, 38, 87, 0.11);
  z-index: 3;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    filter 0.14s ease;
}
#view-vacations .timeline-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 9px rgba(26, 38, 87, 0.17);
  filter: brightness(0.98);
}
#view-vacations .timeline-bar.pending {
  border: 1px dashed rgba(21, 134, 107, 0.72);
  box-shadow: none;
  line-height: 24px;
}
#view-vacations .timeline-bar.compact {
  padding: 0 6px;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-308-vacation-balance-disabled-actions
   -------------------------------------------------------------------------- */

/* Saldos: misma lógica de formularios que el resto de la intranet.
     La acción primaria permanece grisada hasta completar todos los campos obligatorios. */
#vacationBalanceAdjustmentModal .primary-btn:disabled,
#vacationBalanceAdvanceModal .primary-btn:disabled {
  background: #c9cfdf;
  color: #788095;
  border-color: #c9cfdf;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-166-support-filter-profile-styles
   -------------------------------------------------------------------------- */

#view-support .support-filter-trigger {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
#view-support .support-filter-trigger:hover,
#view-support .support-filter-dropdown.is-open .support-filter-trigger {
  border-color: #b9c8ff;
  background: var(--blue-2);
  color: var(--blue);
}

#view-support .support-filter-chevron {
  width: 13px !important;
  height: 13px !important;
  transition: transform 0.16s ease;
}

#view-support .support-filter-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 35;
  display: none;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(24, 37, 91, 0.16);
}
#view-support .support-filter-dropdown.is-open .support-filter-menu {
  display: block;
  animation: fade 0.14s ease;
}
#view-support .support-filter-menu button {
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
}

#view-support .support-ticket-icon.closed {
  background: #f1f3f8;
  color: #697089;
}
#view-support .badge.gray {
  background: #eef0f4;
  color: #626a7f;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-168-request-date-type-filter-styles
   -------------------------------------------------------------------------- */

#view-vacations .transport-filter-trigger,
#view-absences .transport-filter-trigger,
#view-assets .transport-filter-trigger {
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 0 9px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

#view-vacations .transport-filter-chevron,
#view-absences .transport-filter-chevron,
#view-assets .transport-filter-chevron {
  width: 13px !important;
  height: 13px !important;
  margin-left: 1px;
  transition: transform 0.16s ease;
}

#view-vacations .transport-filter-menu,
#view-absences .transport-filter-menu,
#view-assets .transport-filter-menu {
  position: absolute;
  z-index: 40;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(28, 42, 92, 0.14);
  display: none;
}

#view-vacations .transport-filter-menu button,
#view-absences .transport-filter-menu button,
#view-assets .transport-filter-menu button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  padding: 7px 8px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-183-vacation-team-admin-styles
   -------------------------------------------------------------------------- */

#view-vacations .vacation-admin-tab .tab-counter {
  margin-left: 1px;
}
#view-vacations .vacation-team-head {
  align-items: flex-end;
  gap: 18px;
}

/* [AGRUPADO-533] Estilos 100% idénticos agrupados. Origen: líneas 7431, 8036. */
#view-vacations .vacation-team-summary,
#view-absences .absence-team-summary {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* [AGRUPADO-534] Estilos 100% idénticos agrupados. Origen: líneas 7432, 8037. */
#view-vacations .vacation-team-summary > span,
#view-absences .absence-team-summary > span {
  min-width: 92px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  text-align: left;
}
/* [AGRUPADO-535] Estilos 100% idénticos agrupados. Origen: líneas 7433, 8038. */
#view-vacations .vacation-team-summary strong,
#view-absences .absence-team-summary strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: var(--font-size-3xl);
  line-height: 1;
}

#view-vacations .vacation-team-table {
  min-width: 980px;
  width: 100%;
  border-collapse: collapse;
}
#view-vacations .vacation-team-table th,
#view-vacations .vacation-team-table td {
  padding: 14px 15px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
/* [AGRUPADO-536] Estilos 100% idénticos agrupados. Origen: líneas 7437, 8042, 8253. */
#view-vacations .vacation-team-table th,
#view-absences .absence-team-table th,
#view-transport .request-team-table th,
#view-reimbursements .request-team-table th {
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fbfcff;
}

/* [AGRUPADO-537] Estilos 100% idénticos agrupados. Origen: líneas 7440, 8045. */
#view-vacations .vacation-team-person,
#view-absences .absence-team-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

/* [AGRUPADO-538] Estilos 100% idénticos agrupados. Origen: líneas 7443, 7494, 7790, 7861, 7915, 7978, 8048, 8087. */
#view-vacations .vacation-team-person span:not(.avatar),
#teamVacationReviewModal .team-vacation-review-person > div span,
#vacationBalanceDetailModal .vacation-balance-person-summary div span,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-person div span,
#view-vacation-balance-detail .vacation-balance-person-summary div span,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-person div span,
#view-absences .absence-team-person span:not(.avatar),
#absenceTeamReviewModal .absence-team-review-person span {
  font-size: var(--font-size-xs);
  color: var(--ink-3);
}
/* [AGRUPADO-539] Estilos 100% idénticos agrupados. Origen: líneas 7444, 8049. */
#view-vacations .vacation-team-return,
#view-absences .absence-team-period-meta {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
}
#view-vacations .vacation-team-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  min-width: 96px;
}
/* [AGRUPADO-540] Estilos 100% idénticos agrupados. Origen: líneas 7446, 8058. */
#view-vacations .vacation-team-actions .primary-btn,
#view-vacations .vacation-team-actions .secondary-btn,
#view-absences .absence-team-actions .secondary-btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--font-size-xs);
  gap: 6px;
}

#view-vacations .vacation-team-resolved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2f7c59;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
/* [AGRUPADO-541] Estilos 100% idénticos agrupados. Origen: líneas 7449, 8061. */
#view-vacations .vacation-team-resolved.denied,
#view-absences .absence-team-resolved.denied {
  color: #b13c46;
}

#view-vacations .vacation-team-person-col {
  width: 24%;
}

/* [AGRUPADO-542] Estilos 100% idénticos agrupados. Origen: líneas 7454, 8068. */
#view-vacations .vacation-team-requested-col,
#view-absences .absence-team-status-col {
  width: 12%;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-309-vacation-approval-confirmation-styles
   -------------------------------------------------------------------------- */

#confirmTeamVacationApprovalModal {
  z-index: 135;
}
#confirmTeamVacationApprovalModal .vacation-approval-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid #dce4ff;
  border-radius: 12px;
  background: #f6f8ff;
}
#confirmTeamVacationApprovalModal .vacation-approval-confirmation-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--green-bg);
  color: var(--green);
}

#confirmTeamVacationApprovalModal .vacation-approval-confirmation p {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-184-vacation-team-review-styles
   -------------------------------------------------------------------------- */

/* [AGRUPADO-543] Estilos 100% idénticos agrupados. Origen: líneas 7483, 8071, 8185, 8295. */
#teamVacationReviewModal,
#absenceTeamReviewModal,
.request-review-modal-backdrop,
#requestTeamReviewModal {
  padding: 22px;
}
/* [AGRUPADO-544] Estilos 100% idénticos agrupados. Origen: líneas 7484, 8296. */
#teamVacationReviewModal .team-vacation-review-modal,
#requestTeamReviewModal .request-review-modal {
  width: min(940px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 24px;
}
/* [AGRUPADO-545] Estilos 100% idénticos agrupados. Origen: líneas 7485, 8073, 8187. */
#teamVacationReviewModal .modal-head,
#absenceTeamReviewModal .modal-head,
.request-review-modal .modal-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
#teamVacationReviewModal .team-vacation-review-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

#teamVacationReviewModal .team-vacation-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.88fr);
  gap: 18px;
  align-items: start;
}

#teamVacationReviewModal .team-vacation-review-person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
}
#teamVacationReviewModal .team-vacation-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 5px 13px rgba(26, 39, 90, 0.12);
}
/* [AGRUPADO-546] Estilos 100% idénticos agrupados. Origen: líneas 7492, 7788, 7859, 7976, 8906. */
#teamVacationReviewModal .team-vacation-review-person > div,
#vacationBalanceDetailModal .vacation-balance-person-summary > div,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-person > div,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-person > div,
#vacationLiquidationReviewModal .vacation-liquidation-review-person > div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
/* [AGRUPADO-547] Estilos 100% idénticos agrupados. Origen: líneas 7493, 7789, 7860, 7977, 8086. */
#teamVacationReviewModal .team-vacation-review-person strong,
#vacationBalanceDetailModal .vacation-balance-person-summary strong,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-person strong,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-person strong,
#absenceTeamReviewModal .absence-team-review-person strong {
  font-size: var(--font-size-base);
  color: var(--ink);
}

#teamVacationReviewModal .team-vacation-review-date-block {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
#teamVacationReviewModal .team-vacation-review-date-block h3 {
  margin: 0 0 13px;
  font-size: var(--font-size-md);
}
#teamVacationReviewModal .vacation-detail-date-flow {
  padding: 0;
  background: transparent;
  border: 0;
}
#teamVacationReviewModal .team-vacation-review-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

#teamVacationReviewModal .team-vacation-review-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}

#teamVacationReviewModal .team-vacation-review-note {
  display: flex;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--blue-2);
  color: var(--ink-2);
}

#teamVacationReviewModal .team-vacation-review-note span {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
#teamVacationReviewModal .team-vacation-nearby {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #f8faff;
}
#teamVacationReviewModal .team-vacation-nearby-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 11px;
}
#teamVacationReviewModal .team-vacation-nearby-head > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: #fff;
  color: var(--blue);
  border: 1px solid #dce4ff;
}

#teamVacationReviewModal .team-vacation-nearby-head h3 {
  margin: 0;
  font-size: var(--font-size-md);
}
/* [AGRUPADO-548] Estilos 100% idénticos agrupados. Origen: líneas 7512, 8916. */
#teamVacationReviewModal .team-vacation-nearby-head p,
#vacationLiquidationReviewModal .vacation-liquidation-section-head p {
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
}
#teamVacationReviewModal .team-vacation-coverage-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid #d6e8df;
  border-radius: 10px;
  background: #f1faf5;
  color: #306c50;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
#teamVacationReviewModal .team-vacation-coverage-summary.attention {
  border-color: #f0dfb9;
  background: #fff9ec;
  color: #825d17;
}
#teamVacationReviewModal .team-vacation-coverage-summary i {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
}
#teamVacationReviewModal .team-vacation-nearby-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
#teamVacationReviewModal .team-vacation-nearby-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
#teamVacationReviewModal .team-vacation-nearby-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef2ff;
  color: var(--blue);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
}

#teamVacationReviewModal .team-vacation-nearby-copy .badge {
  font-size: var(--font-size-3xs);
  padding: 3px 5px;
}
#teamVacationReviewModal .team-vacation-nearby-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--font-size-3xs);
}
#teamVacationReviewModal .team-vacation-nearby-copy p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: var(--font-size-2xs);
}

#teamVacationReviewModal .team-vacation-nearby-relation {
  align-self: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: #f4f6fb;
  color: var(--ink-3);
  font-size: var(--font-size-3xs);
  white-space: nowrap;
}
#teamVacationReviewModal .team-vacation-review-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
#teamVacationReviewModal .team-vacation-review-actions .ghost-danger-btn {
  min-height: 36px;
}

#teamVacationReviewModal .team-vacation-coverage-summary.conflict {
  border-color: #efc7cb;
  background: #fff4f5;
  color: #a22f3b;
}
#teamVacationReviewModal .team-vacation-nearby-item.is-conflict {
  border-color: #e9aeb5;
  background: #fff7f8;
  box-shadow: 0 0 0 1px rgba(174, 47, 62, 0.04);
}
#teamVacationReviewModal
  .team-vacation-nearby-item.is-conflict
  .team-vacation-nearby-relation {
  background: #fde8eb;
  color: #a22f3b;
  font-weight: var(--font-weight-bold);
}
#teamVacationReviewModal .team-vacation-denial-panel {
  padding: 18px;
  border: 1px solid #efc7cb;
  border-radius: 15px;
  background: #fffafb;
}

/* [AGRUPADO-549] Estilos 100% idénticos agrupados. Origen: líneas 7563, 8313. */
#teamVacationReviewModal .team-vacation-denial-head > span,
#requestTeamReviewModal .request-denial-head > span {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  background: #fde8eb;
  color: #aa3340;
}

/* [AGRUPADO-550] Estilos 100% idénticos agrupados. Origen: líneas 7571, 8321, 8810. */
#teamVacationReviewModal .team-vacation-denial-field select,
#teamVacationReviewModal .team-vacation-denial-field textarea,
#requestTeamReviewModal .request-denial-field select,
#requestTeamReviewModal .request-denial-field textarea,
#teamRequestActionModal .team-request-action-field select,
#teamRequestActionModal .team-request-action-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-sm);
  outline: none;
}
/* [AGRUPADO-551] Estilos 100% idénticos agrupados. Origen: líneas 7575, 8325, 8821. */
#teamVacationReviewModal .team-vacation-denial-field select,
#requestTeamReviewModal .request-denial-field select,
#teamRequestActionModal .team-request-action-field select {
  height: 40px;
  padding: 0 36px 0 12px;
}
/* [AGRUPADO-552] Estilos 100% idénticos agrupados. Origen: líneas 7576, 8326. */
#teamVacationReviewModal .team-vacation-denial-field textarea,
#requestTeamReviewModal .request-denial-field textarea {
  min-height: 92px;
  padding: 11px 12px;
  line-height: var(--line-height-body);
  resize: vertical;
}
/* [AGRUPADO-553] Estilos 100% idénticos agrupados. Origen: líneas 7577, 7678, 8327, 8823. */
#teamVacationReviewModal .team-vacation-denial-field select:focus,
#teamVacationReviewModal .team-vacation-denial-field textarea:focus,
#view-vacations .vacation-administration-range-fields input:focus,
#requestTeamReviewModal .request-denial-field select:focus,
#requestTeamReviewModal .request-denial-field textarea:focus,
#teamRequestActionModal .team-request-action-field select:focus,
#teamRequestActionModal .team-request-action-field textarea:focus {
  border-color: #8ba7ff;
  box-shadow: 0 0 0 3px rgba(65, 103, 224, 0.1);
}
/* [AGRUPADO-554] Estilos 100% idénticos agrupados. Origen: líneas 7579, 8329. */
#teamVacationReviewModal .team-vacation-denial-notice,
#requestTeamReviewModal .request-denial-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #e9aeb5;
  border-radius: 11px;
  background: #fdeff1;
  color: #8f2935;
}

#teamVacationReviewModal .team-vacation-denial-actions .danger-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#view-vacations .vacation-team-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: min(100%, 430px);
}
/* [AGRUPADO-555] Estilos 100% idénticos agrupados. Origen: líneas 7602, 7885, 8001. */
#view-vacations .vacation-team-head-actions .request-list-filters,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-actions,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-actions {
  justify-content: flex-end;
}

#view-vacations .vacation-team-actions {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
}
#view-vacations .vacation-team-actions .vacation-team-review {
  min-width: 88px;
  justify-content: center;
}
#view-vacations .vacation-team-resolved {
  min-height: 32px;
  align-items: center;
}
#teamVacationReviewModal #denyTeamVacationReview {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  line-height: 1;
}

/* Keep every action centered on the same axis as the column heading. */
#view-vacations .vacation-team-table th:last-child,
#view-vacations .vacation-team-table td.vacation-team-action-cell {
  text-align: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#view-vacations .vacation-team-actions {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center !important;
  justify-content: center !important;
}
#view-vacations .vacation-team-actions .vacation-team-review,
#view-vacations .vacation-team-actions .vacation-team-resolved {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-191-vacation-administration-styles
   -------------------------------------------------------------------------- */

/* #view-vacations .vacation-administration-result-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
#view-vacations .vacation-administration-result-count strong {
  color: var(--ink);
  font-size: var(--font-size-2xl);
  line-height: 1;
} */
#view-vacations .vacation-administration-month-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 8px 5px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
#view-vacations .vacation-administration-month-filter select {
  width: 154px;
  height: 28px;
  padding: 0 28px 0 8px;
  border: 1px solid #e0e5ee;
  border-radius: 7px;
  background: #fafbfe;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  outline: none;
  cursor: pointer;
}
/* [AGRUPADO-556] Estilos 100% idénticos agrupados. Origen: líneas 7657, 7712, 7718, 7775. */
#view-vacations .vacation-administration-month-filter:focus-within,
#view-vacations .vacation-administration-filter-row input:focus,
#view-vacations .vacation-administration-filter-row select:focus,
#view-vacations .vacation-table-search:focus-within,
#view-vacations .vacation-balance-filter-row input:focus,
#view-vacations .vacation-balance-filter-row select:focus {
  border-color: #8ba7ff;
  box-shadow: 0 0 0 2px rgba(65, 103, 224, 0.1);
}
#view-vacations .vacation-administration-month-filter.is-filtered {
  border-color: #6f8fe8;
  background: #f7f9ff;
  box-shadow: 0 0 0 2px rgba(65, 103, 224, 0.08);
  color: #355db8;
}
#view-vacations .vacation-administration-month-filter select.is-filtered {
  border-color: #aebfed;
  background: #fff;
  color: #244a9b;
}
#view-vacations .vacation-export-xls {
  min-height: 38px;
  gap: 7px;
}

#view-vacations .vacation-administration-clear-filters {
  min-height: 38px;
  gap: 7px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

#view-vacations .vacation-administration-clear-filters:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  background: #f4f6fa;
  border-color: #e1e6ef;
  color: #8b95a8;
  box-shadow: none;
}
#view-vacations .vacation-administration-clear-filters:not(:disabled) {
  background: #fff;
  border-color: #c8d3ea;
  color: var(--ink-2);
}
#view-vacations .vacation-administration-clear-filters:not(:disabled):hover {
  background: #f6f8ff;
  border-color: #9fb2e3;
  color: var(--blue);
}
#view-vacations .vacation-administration-filter-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 15px 16px;
}
#view-vacations .vacation-administration-filter-copy {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
}

/* [AGRUPADO-557] Estilos 100% idénticos agrupados. Origen: líneas 7671, 7803, 7936, 8094, 8117. */
#view-vacations .vacation-administration-filter-copy p,
#vacationBalanceDetailModal .vacation-balance-history-head p,
#view-vacation-balance-detail .vacation-balance-history-head p,
#absenceTeamReviewModal .absence-team-review-section-head p,
#absenceTeamReviewModal .absence-team-denial-head p {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
}
#view-vacations .vacation-administration-filter-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 10px;
  background: #eef3ff;
  color: var(--blue);
}

#view-vacations .vacation-administration-range-fields {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
#view-vacations .vacation-administration-range-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#view-vacations .vacation-administration-range-fields label > span {
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#view-vacations .vacation-administration-range-fields input {
  height: 38px;
  min-width: 145px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
  outline: none;
}

#view-vacations .vacation-administration-range-fields .ghost-btn {
  min-height: 38px;
  gap: 6px;
}

/* [AGRUPADO-558] Estilos 100% idénticos agrupados. Origen: líneas 7681, 7755. */
#view-vacations .vacation-administration-card,
#view-vacations .vacation-balances-card {
  margin-top: 12px;
  overflow: hidden;
}
#view-vacations .vacation-administration-scroll {
  position: relative;
  max-height: 620px;
  overflow: auto;
  cursor: ew-resize;
  overscroll-behavior: contain;
  scrollbar-color: #b8c2dc #f4f6fb;
  scrollbar-width: thin;
}

/* [AGRUPADO-559] Estilos 100% idénticos agrupados. Origen: líneas 7688, 8020. */
#view-vacations
  .vacation-administration-scroll
  :is(input, select, button, a, label),
#view-vacations
  #vacation-panel-saldos
  .vacation-balances-scroll
  :is(input, select) {
  cursor: auto;
}
#view-vacations .vacation-administration-scroll:focus-visible {
  outline: 3px solid rgba(65, 103, 224, 0.18);
  outline-offset: -3px;
}
#view-vacations .vacation-administration-table {
  width: 100%;
  min-width: 1880px;
  border-collapse: separate;
  border-spacing: 0;
}
/* [AGRUPADO-560] Estilos 100% idénticos agrupados. Origen: líneas 7691, 7757. */
#view-vacations .vacation-administration-table th,
#view-vacations .vacation-administration-table td,
#view-vacations .vacation-balances-table th,
#view-vacations .vacation-balances-table td {
  padding: 12px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
/* [AGRUPADO-561] Estilos 100% idénticos agrupados. Origen: líneas 7693, 7759. */
#view-vacations
  .vacation-administration-table
  .vacation-administration-header-row
  th,
#view-vacations .vacation-balances-table .vacation-balance-header-row th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f8faff;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
/* [AGRUPADO-562] Estilos 100% idénticos agrupados. Origen: líneas 7694, 7760. */
#view-vacations
  .vacation-administration-table
  .vacation-administration-filter-row
  th,
#view-vacations .vacation-balances-table .vacation-balance-filter-row th {
  position: sticky;
  top: 37px;
  z-index: 3;
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid #cfd8ee;
}
/* [AGRUPADO-563] Estilos 100% idénticos agrupados. Origen: líneas 7695, 7761. */
#view-vacations .vacation-administration-table tbody td,
#view-vacations .vacation-balances-table tbody td {
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  background: #fff;
}

#view-vacations .vacation-administration-table th:nth-child(1),
#view-vacations .vacation-administration-table td:nth-child(1) {
  min-width: 225px;
}
#view-vacations .vacation-administration-table th:nth-child(2),
#view-vacations .vacation-administration-table td:nth-child(2) {
  min-width: 155px;
}
#view-vacations .vacation-administration-table th:nth-child(3),
#view-vacations .vacation-administration-table td:nth-child(3) {
  min-width: 90px;
}
#view-vacations .vacation-administration-table th:nth-child(4),
#view-vacations .vacation-administration-table td:nth-child(4),
#view-vacations .vacation-administration-table th:nth-child(5),
#view-vacations .vacation-administration-table td:nth-child(5),
#view-vacations .vacation-administration-table th:nth-child(8),
#view-vacations .vacation-administration-table td:nth-child(8),
#view-vacations .vacation-administration-table th:nth-child(10),
#view-vacations .vacation-administration-table td:nth-child(10) {
  min-width: 138px;
}
#view-vacations .vacation-administration-table th:nth-child(6),
#view-vacations .vacation-administration-table td:nth-child(6) {
  min-width: 92px;
  text-align: center;
}
#view-vacations .vacation-administration-table th:nth-child(7),
#view-vacations .vacation-administration-table td:nth-child(7) {
  min-width: 150px;
}
#view-vacations .vacation-administration-table th:nth-child(9),
#view-vacations .vacation-administration-table td:nth-child(9) {
  min-width: 165px;
}

/* [AGRUPADO-564] Estilos 100% idénticos agrupados. Origen: líneas 7709, 7772. */
#view-vacations .vacation-administration-filter-row input,
#view-vacations .vacation-administration-filter-row select,
#view-vacations .vacation-balance-filter-row input,
#view-vacations .vacation-balance-filter-row select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: var(--font-weight-regular);
  outline: none;
}
/* [AGRUPADO-565] Estilos 100% idénticos agrupados. Origen: líneas 7711, 7774. */
#view-vacations .vacation-administration-filter-row select,
#view-vacations .vacation-balance-filter-row select {
  padding-right: 27px;
}

/* [AGRUPADO-566] Estilos 100% idénticos agrupados. Origen: líneas 7714, 7777. */
#view-vacations .vacation-administration-filter-row input.is-filtered,
#view-vacations .vacation-administration-filter-row select.is-filtered,
#view-vacations .vacation-balance-filter-row input.is-filtered,
#view-vacations .vacation-balance-filter-row select.is-filtered {
  border-color: #6f8fe8;
  background: #f2f6ff;
  color: #244a9b;
  box-shadow: 0 0 0 2px rgba(65, 103, 224, 0.08);
}

#view-vacations .vacation-table-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

#view-vacations .vacation-table-search.is-filtered {
  border-color: #6f8fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 2px rgba(65, 103, 224, 0.08);
}
#view-vacations .vacation-table-search.is-filtered i {
  color: #355db8;
}
#view-vacations .vacation-table-search i {
  position: static;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transform: none;
  color: var(--ink-3);
  pointer-events: none;
}
#view-vacations .vacation-table-search input {
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* [AGRUPADO-567] Estilos 100% idénticos agrupados. Origen: líneas 7726, 7795, 7920, 8782, 8908, 8937. */
#view-vacations .vacation-administration-person span:not(.avatar),
#vacationBalanceDetailModal .vacation-balance-summary-grid article > small,
#view-vacation-balance-detail .vacation-balance-summary-grid article > small,
#teamRequestActionModal .team-request-action-person span,
#vacationLiquidationReviewModal .vacation-liquidation-review-person > div span,
#vacationLiquidationReviewModal .vacation-liquidation-history-copy span {
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
}
#view-vacations .vacation-day-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
}
/* [AGRUPADO-568] Estilos 100% idénticos agrupados. Origen: líneas 7728, 8886. */
#view-vacations .vacation-day-type-pill.reglamentarios,
#view-vacations .vacation-day-type-pill.liquidable {
  background: #eef3ff;
  color: #355db8;
}
#view-vacations .vacation-day-type-pill.beneficio {
  background: #f3edff;
  color: #7351ae;
}
#view-vacations .vacation-day-type-pill.mixto {
  background: #fff4df;
  color: #9a6a16;
}
.table-alert,
#view-vacations .vacation-administration-empty {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink-3);
  background: #fff;
}

.table-alert i,
#view-vacations .vacation-administration-empty i {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  color: #8ca0c6;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-195-vacation-balances-styles
   -------------------------------------------------------------------------- */

#view-vacations .vacation-balances-table {
  width: 100%;
  min-width: 1240px;
  border-collapse: separate;
  border-spacing: 0;
}

#view-vacations .vacation-balances-table th:nth-child(1),
#view-vacations .vacation-balances-table td:nth-child(1) {
  min-width: 175px;
}
#view-vacations .vacation-balances-table th:nth-child(2),
#view-vacations .vacation-balances-table td:nth-child(2) {
  min-width: 110px;
}
#view-vacations .vacation-balances-table th:nth-child(3),
#view-vacations .vacation-balances-table td:nth-child(3),
#view-vacations .vacation-balances-table th:nth-child(4),
#view-vacations .vacation-balances-table td:nth-child(4),
#view-vacations .vacation-balances-table th:nth-child(5),
#view-vacations .vacation-balances-table td:nth-child(5),
#view-vacations .vacation-balances-table th:nth-child(9),
#view-vacations .vacation-balances-table td:nth-child(9),
#view-vacations .vacation-balances-table th:nth-child(10),
#view-vacations .vacation-balances-table td:nth-child(10) {
  min-width: 120px;
}
#view-vacations .vacation-balances-table th:nth-child(6),
#view-vacations .vacation-balances-table td:nth-child(6),
#view-vacations .vacation-balances-table th:nth-child(7),
#view-vacations .vacation-balances-table td:nth-child(7),
#view-vacations .vacation-balances-table th:nth-child(8),
#view-vacations .vacation-balances-table td:nth-child(8) {
  min-width: 135px;
}
#view-vacations .vacation-balances-table th:nth-child(3),
#view-vacations .vacation-balances-table td:nth-child(3),
#view-vacations .vacation-balances-table th:nth-child(4),
#view-vacations .vacation-balances-table td:nth-child(4),
#view-vacations .vacation-balances-table th:nth-child(5),
#view-vacations .vacation-balances-table td:nth-child(5),
#view-vacations .vacation-balances-table th:nth-child(6),
#view-vacations .vacation-balances-table td:nth-child(6),
#view-vacations .vacation-balances-table th:nth-child(7),
#view-vacations .vacation-balances-table td:nth-child(7),
#view-vacations .vacation-balances-table th:nth-child(8),
#view-vacations .vacation-balances-table td:nth-child(8),
#view-vacations .vacation-balances-table th:nth-child(9),
#view-vacations .vacation-balances-table td:nth-child(9),
#view-vacations .vacation-balances-table th:nth-child(10),
#view-vacations .vacation-balances-table td:nth-child(10),
#view-vacations .vacation-balances-table th:nth-child(11),
#view-vacations .vacation-balances-table td:nth-child(11) {
  text-align: center;
}

#view-vacations .vacation-balance-zero {
  color: #97a0b1;
}
#view-vacations .vacation-total-balance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eaf7ef;
  color: #24754b;
  font-weight: var(--font-weight-bold);
}
#view-vacations .vacation-balance-detail-button {
  min-height: 31px;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

#vacationBalanceDetailModal .vacation-balance-detail-modal {
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
}
#vacationBalanceDetailModal .vacation-balance-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: min(68vh, 690px);
  overflow: auto;
  padding-right: 3px;
}
/* [AGRUPADO-571] Estilos 100% idénticos agrupados. Origen: líneas 7786, 7857, 7974. */
#vacationBalanceDetailModal .vacation-balance-person-summary,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-person,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcff;
}
#vacationBalanceDetailModal .vacation-balance-person-summary > .avatar {
  width: 42px;
  height: 42px;
  font-size: var(--font-size-md);
  background: linear-gradient(145deg, #8a78cc, #57469a);
}

#vacationBalanceDetailModal .vacation-balance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
#vacationBalanceDetailModal .vacation-balance-summary-grid article {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
/* [AGRUPADO-572] Estilos 100% idénticos agrupados. Origen: líneas 7793, 7918. */
#vacationBalanceDetailModal .vacation-balance-summary-grid article > span,
#view-vacation-balance-detail .vacation-balance-summary-grid article > span {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--ink-3);
}
#vacationBalanceDetailModal .vacation-balance-summary-grid article > strong {
  font-size: var(--font-size-5xl);
  line-height: 1.1;
  color: var(--ink);
}

/* [AGRUPADO-573] Estilos 100% idénticos agrupados. Origen: líneas 7796, 7921. */
#vacationBalanceDetailModal .vacation-balance-summary-grid article.total,
#view-vacation-balance-detail .vacation-balance-summary-grid article.total {
  border-color: #bedfc9;
  background: #f2fbf5;
}
/* [AGRUPADO-574] Estilos 100% idénticos agrupados. Origen: líneas 7797, 7922. */
#vacationBalanceDetailModal
  .vacation-balance-summary-grid
  article.total
  > strong,
#view-vacation-balance-detail
  .vacation-balance-summary-grid
  article.total
  > strong {
  color: #24754b;
}
#vacationBalanceDetailModal .vacation-balance-consumption-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #d5dff7;
  border-radius: 11px;
  background: #f5f8ff;
  color: #36538f;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
/* [AGRUPADO-575] Estilos 100% idénticos agrupados. Origen: líneas 7799, 7932. */
#vacationBalanceDetailModal .vacation-balance-consumption-note i,
#view-vacation-balance-detail .vacation-balance-consumption-note i {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}
#vacationBalanceDetailModal .vacation-balance-history-section {
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}
#vacationBalanceDetailModal .vacation-balance-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcff;
}
#vacationBalanceDetailModal .vacation-balance-history-head h3 {
  margin: 0 0 3px;
  font-size: var(--font-size-base);
  color: var(--ink);
}

#vacationBalanceDetailModal .vacation-balance-history-head > span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #355db8;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
#vacationBalanceDetailModal .vacation-balance-history-scroll {
  max-height: 310px;
}
#vacationBalanceDetailModal .vacation-balance-history-table {
  width: 100%;
  min-width: 870px;
  border-collapse: collapse;
}
/* [REVISAR-001] SIMILARES, NO AGRUPADOS. A: "#vacationBalanceDetailModal .vacation-balance-history-table th,
  #vacationBalanceDetailModal .vacation-balance-history-table td" (línea 7807); B: "#view-vacation-balance-detail .vacation-balance-history-table th,
  #view-vacation-balance-detail .vacation-balance-history-table td" (línea 7940). Comparten 5/6 estilos con el mismo valor. Diferencias: padding: A=10px 11px / B=12px 13px. */
#vacationBalanceDetailModal .vacation-balance-history-table th,
#vacationBalanceDetailModal .vacation-balance-history-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 9.5px;
  white-space: nowrap;
}
/* [AGRUPADO-576] Estilos 100% idénticos agrupados. Origen: líneas 7809, 7942. */
#vacationBalanceDetailModal .vacation-balance-history-table th,
#view-vacation-balance-detail .vacation-balance-history-table th {
  background: #f8faff;
  color: var(--ink-3);
  font-size: 8.5px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* [AGRUPADO-577] Estilos 100% idénticos agrupados. Origen: líneas 7813, 7873, 7946. */
#vacationBalanceDetailModal
  .vacation-balance-history-table
  .management-dates
  span,
#vacationBalanceAdjustmentModal
  .vacation-balance-adjustment-fields
  label
  > small,
#view-vacation-balance-detail
  .vacation-balance-history-table
  .management-dates
  span {
  font-size: 8.5px;
  color: var(--ink-3);
}
/* [AGRUPADO-578] Estilos 100% idénticos agrupados. Origen: líneas 7814, 7947. */
#vacationBalanceDetailModal
  .vacation-balance-history-table
  .vacation-balance-history-manual-row
  td,
#view-vacation-balance-detail
  .vacation-balance-history-table
  .vacation-balance-history-manual-row
  td {
  border-bottom: 0;
  background: #f6f8ff;
}
/* [AGRUPADO-579] Estilos 100% idénticos agrupados. Origen: líneas 7815, 7948. */
#vacationBalanceDetailModal
  .vacation-balance-history-table
  .vacation-balance-history-manual-row
  td:first-child,
#view-vacation-balance-detail
  .vacation-balance-history-table
  .vacation-balance-history-manual-row
  td:first-child {
  border-left: 3px solid #5577c8;
  border-radius: 9px 0 0 0;
}
/* [AGRUPADO-580] Estilos 100% idénticos agrupados. Origen: líneas 7816, 7949. */
#vacationBalanceDetailModal
  .vacation-balance-history-table
  .vacation-balance-history-manual-row
  td:last-child,
#view-vacation-balance-detail
  .vacation-balance-history-table
  .vacation-balance-history-manual-row
  td:last-child {
  border-radius: 0 9px 0 0;
}
#vacationBalanceDetailModal
  .vacation-balance-history-table
  .vacation-balance-history-note-row
  td {
  padding: 0 11px 11px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid #5577c8;
  border-radius: 0 0 9px 9px;
  white-space: normal;
  background: #f6f8ff;
}

#vacationBalanceDetailModal .vacation-balance-admin-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid #d8e0f4;
  border-radius: 0;
  background: transparent;
  color: #465a84;
  line-height: var(--line-height-ui);
}
/* [AGRUPADO-581] Estilos 100% idénticos agrupados. Origen: líneas 7820, 7953. */
#vacationBalanceDetailModal .vacation-balance-admin-note i,
#view-vacation-balance-detail .vacation-balance-admin-note i {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  color: #4d6fbd;
}
/* [AGRUPADO-582] Estilos 100% idénticos agrupados. Origen: líneas 7821, 7954. */
#vacationBalanceDetailModal .vacation-balance-admin-note > div,
#view-vacation-balance-detail .vacation-balance-admin-note > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
/* [AGRUPADO-583] Estilos 100% idénticos agrupados. Origen: líneas 7822, 7955. */
#vacationBalanceDetailModal .vacation-balance-admin-note strong,
#view-vacation-balance-detail .vacation-balance-admin-note strong {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #35538d;
}
/* [AGRUPADO-584] Estilos 100% idénticos agrupados. Origen: líneas 7823, 7956. */
#vacationBalanceDetailModal .vacation-balance-admin-note span,
#view-vacation-balance-detail .vacation-balance-admin-note span {
  font-size: 9.5px;
  color: #53617b;
  overflow-wrap: anywhere;
}
/* [AGRUPADO-585] Estilos 100% idénticos agrupados. Origen: líneas 7824, 7957. */
#vacationBalanceDetailModal .vacation-balance-impact,
#view-vacation-balance-detail .vacation-balance-impact {
  font-weight: var(--font-weight-bold);
  color: #355db8;
}
/* [AGRUPADO-586] Estilos 100% idénticos agrupados. Origen: líneas 7825, 7958. */
#vacationBalanceDetailModal .vacation-balance-impact.neutral,
#view-vacation-balance-detail .vacation-balance-impact.neutral {
  color: #7a8497;
}
#vacationBalanceDetailModal .vacation-balance-detail-actions {
  align-items: center;
  justify-content: space-between;
}
/* [AGRUPADO-587] Estilos 100% idénticos agrupados. Origen: líneas 7827, 7907. */
#vacationBalanceDetailModal .vacation-balance-add-days-button,
#view-vacation-balance-detail .vacation-balance-add-days-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #cfd8ee;
  color: #304c87;
  background: #f7f9ff;
}
/* [AGRUPADO-588] Estilos 100% idénticos agrupados. Origen: líneas 7828, 7908. */
#vacationBalanceDetailModal .vacation-balance-add-days-button:hover,
#view-vacation-balance-detail .vacation-balance-add-days-button:hover {
  border-color: #aebfe4;
  background: #eef3ff;
}

#vacationBalanceDetailModal .vacation-balance-adjustment-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 15px;
  border: 1px solid #cfd9ef;
  border-radius: 13px;
  background: linear-gradient(145deg, #f8faff, #f2f6ff);
}
#vacationBalanceDetailModal .vacation-balance-adjustment-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: #e4ebff;
  color: #355db8;
}

#vacationBalanceDetailModal .vacation-balance-adjustment-head h3 {
  margin: 1px 0 3px;
  font-size: var(--font-size-md);
  color: var(--ink);
}
#vacationBalanceDetailModal .vacation-balance-adjustment-head p {
  margin: 0;
  font-size: 9.5px;
  line-height: var(--line-height-ui);
  color: var(--ink-3);
}
#vacationBalanceDetailModal .vacation-balance-adjustment-period {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #355db8;
  font-size: 8.5px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-fields {
  display: grid;
  grid-template-columns: minmax(145px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
}
/* [AGRUPADO-589] Estilos 100% idénticos agrupados. Origen: líneas 7840, 7870, 7987. */
#vacationBalanceDetailModal .vacation-balance-adjustment-fields label,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields label,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-fields label > span {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--ink-2);
}
#vacationBalanceDetailModal
  .vacation-balance-adjustment-fields
  label
  > span
  small {
  font-size: 8.5px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-3);
}
/* [AGRUPADO-590] Estilos 100% idénticos agrupados. Origen: líneas 7843, 7877, 7991. */
#vacationBalanceDetailModal .vacation-balance-adjustment-fields input,
#vacationBalanceDetailModal .vacation-balance-adjustment-fields textarea,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields input,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields textarea,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields input,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields textarea {
  width: 100%;
  border: 1px solid #cfd8eb;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-xs);
  outline: 0;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-fields input {
  height: 38px;
  padding: 0 10px;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-fields textarea {
  min-height: 38px;
  padding: 9px 10px;
  resize: vertical;
}
/* [AGRUPADO-591] Estilos 100% idénticos agrupados. Origen: líneas 7847, 7881, 7996. */
#vacationBalanceDetailModal .vacation-balance-adjustment-fields input:focus,
#vacationBalanceDetailModal .vacation-balance-adjustment-fields textarea:focus,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields input:focus,
#vacationBalanceAdjustmentModal
  .vacation-balance-adjustment-fields
  textarea:focus,
#vacationBalanceAdvanceModal
  .vacation-balance-advance-fields
  input:not(:disabled):focus,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px #e9efff;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5f6f91;
  font-size: 8.8px;
  line-height: var(--line-height-compact);
}
#vacationBalanceDetailModal .vacation-balance-adjustment-notice i {
  width: 13px;
  height: 13px;
  flex: none;
  color: #4d6fb4;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
#vacationBalanceDetailModal .vacation-day-type-pill.ajuste {
  background: #e9f7ef;
  color: #237047;
}

/* [AGRUPADO-592] Estilos 100% idénticos agrupados. Origen: líneas 7855, 7972. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-modal,
#vacationBalanceAdvanceModal .vacation-balance-advance-modal {
  width: min(610px, calc(100vw - 32px));
  max-width: 610px;
}
/* [AGRUPADO-593] Estilos 100% idénticos agrupados. Origen: líneas 7856, 7973. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-body,
#vacationBalanceAdvanceModal .vacation-balance-advance-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* [AGRUPADO-594] Estilos 100% idénticos agrupados. Origen: líneas 7858, 7975. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-person > .avatar,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-person > .avatar {
  width: 42px;
  height: 42px;
  flex: none;
  font-size: var(--font-size-md);
  background: linear-gradient(145deg, #8a78cc, #57469a);
}

/* [AGRUPADO-595] Estilos 100% idénticos agrupados. Origen: líneas 7862, 7979. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-period,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-period {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #355db8;
  font-size: 8.5px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* [AGRUPADO-596] Estilos 100% idénticos agrupados. Origen: líneas 7863, 7980. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-intro,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-intro {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid #cfd9ef;
  border-radius: 13px;
  background: linear-gradient(145deg, #f8faff, #f2f6ff);
}
/* [AGRUPADO-597] Estilos 100% idénticos agrupados. Origen: líneas 7864, 7981. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-icon,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: #e4ebff;
  color: #355db8;
}

/* [AGRUPADO-598] Estilos 100% idénticos agrupados. Origen: líneas 7867, 7984. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-intro strong,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-intro strong {
  display: block;
  margin: 1px 0 4px;
  font-size: 11.5px;
  color: var(--ink);
}
/* [AGRUPADO-599] Estilos 100% idénticos agrupados. Origen: líneas 7868, 7985. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-intro p,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-intro p {
  margin: 0;
  font-size: 9.5px;
  line-height: var(--line-height-body);
  color: var(--ink-3);
}
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields {
  display: grid;
  grid-template-columns: minmax(145px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
}

/* [AGRUPADO-600] Estilos 100% idénticos agrupados. Origen: líneas 7871, 7989. */
#vacationBalanceAdjustmentModal
  .vacation-balance-adjustment-fields
  label
  > span,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields label > span {
  font-size: 9.5px;
  font-weight: var(--font-weight-bold);
  color: var(--ink-2);
}
/* [AGRUPADO-601] Estilos 100% idénticos agrupados. Origen: líneas 7872, 7990. */
#vacationBalanceAdjustmentModal
  .vacation-balance-adjustment-fields
  label
  > span
  em,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields label > span em {
  color: #d05757;
  font-style: normal;
}

#vacationBalanceAdjustmentModal .vacation-balance-adjustment-field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 8.5px;
  font-weight: var(--font-weight-medium);
  color: var(--ink-3);
}
/* [AGRUPADO-602] Estilos 100% idénticos agrupados. Origen: líneas 7875, 7999. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-field-meta small,
#vacationBalanceAdvanceModal .vacation-balance-adjustment-field-meta small {
  font-size: inherit;
  color: inherit;
}

/* [AGRUPADO-603] Estilos 100% idénticos agrupados. Origen: líneas 7879, 7993. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields input,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields input {
  height: 40px;
  padding: 0 10px;
}
/* [AGRUPADO-604] Estilos 100% idénticos agrupados. Origen: líneas 7880, 7995. */
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields textarea,
#vacationBalanceAdvanceModal .vacation-balance-advance-fields textarea {
  min-height: 92px;
  padding: 10px;
  resize: vertical;
}

#vacationBalanceAdjustmentModal .vacation-balance-adjustment-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #5f6f91;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-normal);
}
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-notice i {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  color: #4d6fb4;
}

/* [AGRUPADO-605] Estilos 100% idénticos agrupados. Origen: líneas 7889, 7898. */
#vacationBalanceDetailModal .vacation-balance-person-summary > .badge,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-period {
  margin-left: 53px;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-head {
  flex-wrap: wrap;
}
#vacationBalanceDetailModal .vacation-balance-adjustment-period {
  margin-left: 44px;
}

#vacationBalanceDetailModal .vacation-balance-adjustment-actions {
  width: 100%;
  justify-content: flex-end;
}
/* [AGRUPADO-606] Estilos 100% idénticos agrupados. Origen: líneas 7895, 7900. */
#vacationBalanceDetailModal .vacation-balance-detail-actions,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-actions {
  align-items: stretch;
  flex-direction: column-reverse;
}
/* [AGRUPADO-607] Estilos 100% idénticos agrupados. Origen: líneas 7896, 7901. */
#vacationBalanceDetailModal .vacation-balance-detail-actions button,
#vacationBalanceAdjustmentModal .vacation-balance-adjustment-actions button {
  justify-content: center;
  width: 100%;
}

/* Detalle de saldos como página completa */

#view-vacation-balance-detail .vacation-balance-detail-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#view-vacation-balance-detail .vacation-balance-person-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(33, 45, 76, 0.045);
}
#view-vacation-balance-detail .vacation-balance-person-summary > .avatar {
  width: 46px;
  height: 46px;
  flex: none;
  font-size: var(--font-size-md);
}
#view-vacation-balance-detail .vacation-balance-person-summary > .avatar img {
  width: 46px;
  height: 46px;
}

#view-vacation-balance-detail .vacation-balance-person-summary strong {
  font-size: var(--font-size-lg);
  color: var(--ink);
}

#view-vacation-balance-detail .vacation-balance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
#view-vacation-balance-detail .vacation-balance-summary-grid article {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

#view-vacation-balance-detail .vacation-balance-summary-grid article > strong {
  font-size: var(--font-size-6xl);
  line-height: 1.1;
  color: var(--ink);
}

#view-vacation-balance-detail
  .vacation-balance-summary-grid
  article.vacation-balance-advance-simulation-card {
  border-color: #d7c8f4;
  background: #f8f4ff;
  box-shadow: inset 0 0 0 1px rgba(110, 90, 232, 0.04);
}
#view-vacation-balance-detail
  .vacation-balance-summary-grid
  article.vacation-balance-advance-simulation-card
  > span,
#view-vacation-balance-detail
  .vacation-balance-summary-grid
  article.vacation-balance-advance-simulation-card
  > strong {
  color: #6e5ae8;
}
#view-vacation-balance-detail
  .vacation-balance-summary-grid
  article.vacation-balance-advance-simulation-card
  > small {
  color: #7b6ca8;
}
#view-vacation-balance-detail .vacation-balance-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--line-height-compact);
}
/* [AGRUPADO-608] Estilos 100% idénticos agrupados. Origen: líneas 7930, 8643, 8714. */
#view-vacation-balance-detail .vacation-balance-breakdown span,
#vacationBalanceDetailModal .vacation-balance-breakdown-empty,
#view-vacation-balance-detail
  .vacation-balance-breakdown
  .vacation-balance-breakdown-empty {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--ink-3);
}
#view-vacation-balance-detail .vacation-balance-consumption-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid #d5dff7;
  border-radius: 11px;
  background: #f5f8ff;
  color: #36538f;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}

#view-vacation-balance-detail .vacation-balance-history-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(33, 45, 76, 0.035);
}
#view-vacation-balance-detail .vacation-balance-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 17px;
  border-bottom: 1px solid var(--line);
  background: #fbfcff;
}
/* [AGRUPADO-609] Estilos 100% idénticos agrupados. Origen: líneas 7935, 8116. */
#view-vacation-balance-detail .vacation-balance-history-head h2,
#absenceTeamReviewModal .absence-team-denial-head h3 {
  margin: 0 0 3px;
  font-size: var(--font-size-lg);
  color: var(--ink);
}

#view-vacation-balance-detail .vacation-balance-history-head > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef3ff;
  color: #355db8;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
#view-vacation-balance-detail .vacation-balance-history-scroll {
  max-height: none;
  overflow: auto;
}
#view-vacation-balance-detail .vacation-balance-history-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}
#view-vacation-balance-detail .vacation-balance-history-table th,
#view-vacation-balance-detail .vacation-balance-history-table td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 9.5px;
  white-space: nowrap;
}

#view-vacation-balance-detail
  .vacation-balance-history-table
  .vacation-balance-history-note-row
  td {
  padding: 0 13px 13px 16px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid #5577c8;
  border-radius: 0 0 9px 9px;
  white-space: normal;
  background: #f6f8ff;
}

#view-vacation-balance-detail .vacation-balance-admin-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid #d8e0f4;
  border-radius: 0;
  background: transparent;
  color: #465a84;
  line-height: var(--line-height-ui);
}

/* Saldos · Adelantamiento de vacaciones */

#vacationBalanceAdvanceModal .vacation-balance-advance-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

#vacationBalanceAdvanceModal .vacation-balance-advance-fields input:disabled {
  background: #f0f2f6;
  border-color: #d9dee8;
  color: #7b8496;
  cursor: not-allowed;
}

#vacationBalanceAdvanceModal .vacation-balance-adjustment-field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 8.5px !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--ink-3) !important;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-199-vacation-balances-no-drag-styles
   -------------------------------------------------------------------------- */

#view-vacations #vacation-panel-saldos .vacation-balances-scroll {
  position: relative;
  max-height: 620px;
  overflow: auto;
  cursor: default;
  overscroll-behavior: contain;
  scrollbar-color: #b8c2dc #f4f6fb;
  scrollbar-width: thin;
  touch-action: auto;
  user-select: auto;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-200-absence-team-admin-styles
   -------------------------------------------------------------------------- */

#view-absences .absence-team-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 16px;
}
#view-absences .absence-admin-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#view-absences .absence-team-head h2 {
  margin: 0 0 5px;
  font-size: var(--font-size-5xl);
  color: var(--ink);
}
#view-absences .absence-team-head p {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--font-size-md);
}
#view-absences .absence-team-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#view-absences .absence-team-table {
  min-width: 1180px;
  width: 100%;
  border-collapse: collapse;
}
#view-absences .absence-team-table th,
#view-absences .absence-team-table td {
  padding: 14px 13px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

#view-absences .absence-team-document,
#view-absences .absence-team-reviewer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* [AGRUPADO-610] Estilos 100% idénticos agrupados. Origen: líneas 8052, 8082. */
#view-absences .absence-team-document.ok,
#absenceTeamReviewModal .absence-team-review-steps span.complete {
  color: #2f7c59;
}
#view-absences .absence-team-document.neutral {
  color: var(--ink-3);
}
#view-absences .absence-team-reviewer {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #3f5ca8;
  font-weight: var(--font-weight-semibold);
}
#view-absences .absence-team-reviewer.administration {
  background: #f4f0ff;
  color: #6b4fb1;
}
#view-absences .absence-team-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 104px;
}

#view-absences .absence-team-resolved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2f7c59;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* [AGRUPADO-611] Estilos 100% idénticos agrupados. Origen: líneas 8063, 8179. */
#view-absences .absence-team-person-col,
.request-team-type-col {
  width: 19%;
}

#view-absences .absence-team-document-col {
  width: 14%;
}

/* [AGRUPADO-612] Estilos 100% idénticos agrupados. Origen: líneas 8072, 8186. */
#absenceTeamReviewModal .absence-team-review-modal,
.request-review-modal {
  width: min(900px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 24px;
}

/* [AGRUPADO-613] Estilos 100% idénticos agrupados. Origen: líneas 8074, 8188. */
#absenceTeamReviewModal .absence-team-review-eyebrow,
.request-review-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#absenceTeamReviewModal .absence-team-review-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
}

#absenceTeamReviewModal .absence-team-review-steps b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: var(--font-size-2xs);
}

#absenceTeamReviewModal .absence-team-review-steps span.active b {
  border-color: #b9c8ff;
  background: var(--blue-2);
}

#absenceTeamReviewModal .absence-team-review-person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcff;
}
#absenceTeamReviewModal .absence-team-review-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
#absenceTeamReviewModal .absence-team-review-person > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

#absenceTeamReviewModal .absence-team-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 16px;
  margin-top: 16px;
}
#absenceTeamReviewModal .absence-team-review-main,
#absenceTeamReviewModal .absence-team-review-side {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
/* [AGRUPADO-614] Estilos 100% idénticos agrupados. Origen: líneas 8090, 8196. */
#absenceTeamReviewModal .absence-team-review-section-head,
.request-review-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
#absenceTeamReviewModal .absence-team-review-section-head > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: var(--blue-2);
  color: var(--blue);
}

#absenceTeamReviewModal .absence-team-review-section-head h3 {
  margin: 0 0 2px;
  font-size: var(--font-size-base);
  color: var(--ink);
}

#absenceTeamReviewModal .absence-team-review-meta-grid > div {
  padding: 11px;
  border-radius: 10px;
  background: #f8f9fc;
}
/* [AGRUPADO-615] Estilos 100% idénticos agrupados. Origen: líneas 8097, 8203. */
#absenceTeamReviewModal .absence-team-review-meta-grid span,
#absenceTeamReviewModal .absence-team-review-context > span,
#absenceTeamReviewModal .absence-team-review-rule > span,
#absenceTeamReviewModal .absence-team-review-document span,
.request-review-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#absenceTeamReviewModal .absence-team-review-context {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e7eaf3;
  border-radius: 10px;
  background: #fcfcfe;
}
#absenceTeamReviewModal .absence-team-review-context p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}
#absenceTeamReviewModal .absence-team-review-rule {
  padding: 12px;
  border-radius: 10px;
  background: #f8f9fc;
}
#absenceTeamReviewModal .absence-team-review-rule strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: var(--font-size-md);
}
#absenceTeamReviewModal .absence-team-review-rule small {
  display: block;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
#absenceTeamReviewModal .absence-team-review-document {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #d9ecdf;
  border-radius: 10px;
  background: #f3faf5;
  color: #2f7c59;
}
#absenceTeamReviewModal .absence-team-review-document.neutral {
  border-color: var(--line);
  background: #fafbfc;
  color: var(--ink-3);
}
#absenceTeamReviewModal .absence-team-review-document > i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

#absenceTeamReviewModal .absence-team-review-document small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-normal);
}
#absenceTeamReviewModal .absence-team-review-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f4f7ff;
  color: #4a5f98;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
#absenceTeamReviewModal .absence-team-review-notice i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

#absenceTeamReviewModal .absence-team-denial-panel {
  padding: 17px;
  border: 1px solid #f0d4d7;
  border-radius: 13px;
  background: #fffafa;
}
#absenceTeamReviewModal .absence-team-denial-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}
#absenceTeamReviewModal .absence-team-denial-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff0f1;
  color: #b13c46;
}

#absenceTeamReviewModal .absence-team-denial-field {
  display: block;
  margin-top: 11px;
}
#absenceTeamReviewModal .absence-team-denial-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
#absenceTeamReviewModal .absence-team-denial-field select,
#absenceTeamReviewModal .absence-team-denial-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-sm);
  padding: 10px 11px;
}
#absenceTeamReviewModal .absence-team-denial-field textarea {
  resize: vertical;
}
#absenceTeamReviewModal .absence-team-denial-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #fff1f2;
  color: #a43843;
}
/* [AGRUPADO-616] Estilos 100% idénticos agrupados. Origen: líneas 8123, 8207. */
#absenceTeamReviewModal .absence-team-denial-notice i,
.request-review-policy i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
}
#absenceTeamReviewModal .absence-team-denial-notice strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--font-size-xs);
}
#absenceTeamReviewModal .absence-team-denial-notice span {
  display: block;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-normal);
}
#absenceTeamReviewModal .absence-team-denial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
#absenceTeamReviewModal .danger-btn {
  background: #b13c46;
  border-color: #b13c46;
  color: #fff;
}
#absenceTeamReviewModal .danger-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-203-request-team-admin-styles
   -------------------------------------------------------------------------- */

#view-transport .request-module-tabs,
#view-reimbursements .request-module-tabs {
  margin-bottom: 22px;
}
#view-transport .request-admin-tab,
#view-reimbursements .request-admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.request-team-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.request-team-head h2 {
  margin: 0 0 5px;
  font-size: var(--font-size-4xl);
  color: var(--ink);
}
.request-team-head p {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.request-team-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.request-team-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.request-team-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
}
.request-team-table th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.request-team-table td {
  padding: 14px;
  border-bottom: 1px solid #edf1f7;
  color: var(--ink-2);
  font-size: var(--font-size-md);
  vertical-align: middle;
}

.request-team-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.request-team-person strong,
.request-team-main strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-md);
  line-height: var(--line-height-compact);
}
.request-team-person span,
.request-team-main span {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.request-team-actions .secondary-btn {
  min-width: 92px;
  justify-content: center;
}
.request-team-resolved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  color: var(--ink-3);
  font-size: var(--font-size-sm);
}

.request-team-person-col {
  width: 21%;
}

.request-team-date-col {
  width: 15%;
}

.request-team-actions-col {
  width: 9%;
  text-align: center;
}

.request-review-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
}
.request-review-person-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.request-review-person-main strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-lg);
}
.request-review-person-main span {
  display: block;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: var(--font-size-sm);
}
.request-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 16px;
  margin-top: 16px;
}
.request-review-section {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.request-review-section-head > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: #edf3ff;
  color: var(--blue);
}

.request-review-section-head p {
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
.request-review-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.request-review-meta div {
  padding: 11px 12px;
  border-radius: 10px;
  background: #f7f9fc;
}

.request-review-meta strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
.request-review-note {
  margin-top: 12px;
  padding: 12px 13px;
  border-left: 3px solid #9cb7ef;
  border-radius: 8px;
  background: #f4f7ff;
  color: var(--ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.request-review-policy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border-radius: 11px;
  background: #f4f8f5;
  color: #285a3d;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

.request-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.request-review-actions .danger-btn,
.request-review-actions .primary-btn,
.request-denial-actions .danger-btn,
.request-denial-actions .secondary-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  line-height: 1;
}
.request-denial-panel {
  margin-top: 5px;
}

.request-denial-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 13px 0 16px;
  padding: 13px 14px;
  border: 1px solid #f0d3d0;
  border-radius: 11px;
  background: #fff7f6;
  color: #8b3732;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}
.request-denial-callout i {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}
.request-denial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.request-team-empty {
  display: none;
  padding: 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--font-size-md);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-204-request-team-design-consistency
   -------------------------------------------------------------------------- */

/* Encabezado + tabla con la misma composición que Vacaciones y Ausencias. */
#view-transport .request-team-head,
#view-reimbursements .request-team-head {
  align-items: flex-end;
  margin-bottom: 16px;
}

#view-transport .request-team-card,
#view-reimbursements .request-team-card {
  margin-top: 0;
  overflow: hidden;
}
#view-transport .request-team-table-wrap,
#view-reimbursements .request-team-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#view-transport .request-team-table,
#view-reimbursements .request-team-table {
  min-width: 980px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#view-transport .request-team-table th,
#view-transport .request-team-table td,
#view-reimbursements .request-team-table th,
#view-reimbursements .request-team-table td {
  padding: 14px 13px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

/* Avatar circular e iniciales perfectamente centradas. */
#view-transport .request-team-avatar,
#view-reimbursements .request-team-avatar,
#requestTeamReviewModal .request-team-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
#requestTeamReviewModal .request-team-avatar {
  width: 42px;
  height: 42px;
  font-size: var(--font-size-md);
}

/* Columna y acción idénticas a las vistas administrativas existentes. */
#view-transport .request-team-actions-col,
#view-reimbursements .request-team-actions-col {
  width: 12%;
  text-align: center;
}

#view-transport .request-team-actions,
#view-reimbursements .request-team-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  text-align: center;
}
#view-transport .request-team-review,
#view-reimbursements .request-team-review {
  min-width: 88px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--font-size-xs);
  line-height: 1;
  white-space: nowrap;
}

#view-transport .request-team-resolved,
#view-reimbursements .request-team-resolved {
  min-width: 88px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2f7c59;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Lightbox: misma escala, botones y paso alternativo de denegación. */

#requestTeamReviewModal .request-review-person {
  padding: 13px;
  border-radius: 14px;
}

#requestTeamReviewModal .request-denial-panel {
  width: min(700px, 100%);
  padding: 18px;
  border: 1px solid #efc7cb;
  border-radius: 15px;
  background: #fffafb;
}

#requestTeamReviewModal .request-denial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Migrated source: inline-style-70
   -------------------------------------------------------------------------- */

/* v3.205 — Nosotros / Valores */
#view-about {
  --about-border: #dfe5f3;
}
#view-about .about-page-heading {
  margin-bottom: 19px;
}
#view-about .about-layout {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
#view-about .about-section-nav {
  position: sticky;
  top: 88px;
  border: 1px solid var(--about-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(25, 32, 75, 0.055);
}
#view-about .about-section-nav-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px;
  border-bottom: 1px solid var(--about-border);
  background: #f8f9fd;
}
#view-about .about-section-nav-mark {
  width: 37px;
  height: 37px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #17204e;
  color: #fff;
  flex: none;
}

#view-about .about-section-link {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  text-align: left;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}
#view-about .about-section-link > span {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.05em;
  color: #a5aec5;
}
#view-about .about-section-link > strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: inherit;
}

#view-about .about-section-link > small {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  color: #a8b0c3;
}
#view-about .about-section-link:hover {
  background: #f5f7fc;
  color: var(--ink);
}
#view-about .about-section-link.active {
  background: #eaf0ff;
  color: #254dba;
}
#view-about .about-section-link.active > span {
  color: #5276d3;
}

#view-about .about-values-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  min-height: 520px;
  background: #2f6bff;
  outline: none;
  box-shadow: 0 24px 58px rgba(25, 32, 75, 0.18);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

#view-about .about-carousel-drag-affordance {
  position: absolute;
  z-index: 6;
  right: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(10, 18, 46, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

#view-about .about-value-slides {
  position: relative;
  min-height: 452px;
}
#view-about .about-value-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.45fr);
  align-items: stretch;
  background: var(--value-color);
  color: var(--value-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateX(4%);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0.45s;
}
#view-about .about-value-slide.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 2;
}
#view-about .about-value-slide::before {
  content: "";
  position: absolute;
  right: -11%;
  top: -31%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--value-ink) 23%, transparent);
}
#view-about .about-value-slide::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -36%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--value-color-deep) 42%, transparent);
}
#view-about .about-value-visual {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--value-ink) 24%, transparent);
  min-height: 452px;
}
#view-about .about-value-visual > span {
  position: absolute;
  left: 23px;
  top: 19px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.12em;
  opacity: 0.72;
}
#view-about .about-value-visual > i {
  position: absolute;
  width: 278px;
  height: 278px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-52%, -45%);
  border: 62px solid color-mix(in srgb, var(--value-ink) 15%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--value-ink) 24%, transparent);
}
#view-about .about-value-visual > i::before,
#view-about .about-value-visual > i::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: -98px;
  border: 1px solid color-mix(in srgb, var(--value-ink) 18%, transparent);
}
#view-about .about-value-visual > i::after {
  inset: 69px;
  background: color-mix(in srgb, var(--value-ink) 12%, transparent);
  border: 0;
}
#view-about .about-value-copy {
  position: relative;
  z-index: 3;
  padding: var(--padding-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#view-about .about-value-copy > p {
  margin: 0 0 17px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.74;
}
#view-about .about-value-copy h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(47px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.065em;
  color: inherit;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#view-about .about-value-rule {
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  margin: 27px 0 24px;
  opacity: 0.88;
}
#view-about .about-value-copy blockquote {
  margin: 0;
  max-width: 650px;
  font-size: clamp(16px, 1.8vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.015em;
  font-weight: var(--font-weight-medium);
  color: inherit;
}
#view-about .about-carousel-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  padding: 0 22px 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(8, 17, 46, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(13px);
  color: #fff;
}
#view-about .about-carousel-progress {
  display: flex;
  align-items: stretch;
  gap: 7px;
  flex: 1;
  max-width: 680px;
  min-width: 0;
}
#view-about .about-carousel-progress button {
  min-width: 0;
  height: 42px;
  flex: 1;
  padding: 6px 0 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  color: #fff;
  text-align: left;
}
#view-about .about-carousel-progress-line {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.29);
  transition: var(--transition-layout);
}
#view-about .about-carousel-progress button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}
#view-about
  .about-carousel-progress
  button:hover
  .about-carousel-progress-line {
  background: rgba(255, 255, 255, 0.54);
}
#view-about .about-carousel-progress button:hover small {
  color: rgba(255, 255, 255, 0.88);
}
#view-about
  .about-carousel-progress
  button.active
  .about-carousel-progress-line {
  background: #fff;
  height: 4px;
}
#view-about .about-carousel-progress button.active small {
  color: #fff;
  font-weight: var(--font-weight-extrabold);
}

#view-about .about-carousel-counter {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-right: 5px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-style: normal;
  opacity: 0.86;
}
.about-carousel-counter em {
  font-style: normal;
  opacity: 0.55;
}
#view-about .about-carousel-controls button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.2s;
}
#view-about .about-carousel-controls button:hover {
  background: #fff;
  color: #18214c;
  transform: translateY(-1px);
}

#view-about .about-carousel-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 10px 4px 0;
  font-size: var(--font-size-2xs);
  color: #8d97ae;
}

#view-about .about-values-carousel:focus-visible {
  box-shadow:
    0 0 0 4px rgba(47, 107, 255, 0.18),
    0 24px 58px rgba(25, 32, 75, 0.18);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-216-transport-planning-overlap-styles
   -------------------------------------------------------------------------- */

/* Contexto logístico dentro del lightbox de aprobación */
#requestTeamReviewModal .transport-day-context {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

#requestTeamReviewModal .transport-day-context-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
#requestTeamReviewModal .transport-day-context-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: #edf3ff;
  color: var(--blue);
}

#requestTeamReviewModal .transport-day-context-copy > span {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
#requestTeamReviewModal .transport-day-context.is-clear {
  border-color: #cce8dc;
  background: #fbfffd;
}
#requestTeamReviewModal
  .transport-day-context.is-clear
  .transport-day-context-icon {
  background: #e8f7ef;
  color: #2f7c59;
}
#requestTeamReviewModal .transport-day-context.has-routes {
  border-color: #eadfb6;
  background: #fffdf6;
}
#requestTeamReviewModal
  .transport-day-context.has-routes
  .transport-day-context-icon {
  background: #fff4cf;
  color: #9a6b00;
}
#requestTeamReviewModal .transport-day-context-list {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}
#requestTeamReviewModal .transport-day-context-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(217, 207, 166, 0.65);
}
#requestTeamReviewModal .transport-day-context-item time {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
}

#requestTeamReviewModal .transport-day-context-item span {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-normal);
}

/* Planning logístico de Traslados */

#view-transport .transport-planning-panel {
  padding-top: 2px;
}
#view-transport .transport-planning-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}
#view-transport .transport-planning-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 19px;
  letter-spacing: -0.4px;
}
#view-transport .transport-planning-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}

#view-transport .transport-planning-datebar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-width: thin;
}
#view-transport .transport-day-button {
  min-width: 112px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: 0.16s ease;
}
/* [AGRUPADO-624] Estilos 100% idénticos agrupados. Origen: líneas 8536, 8575. */
#view-transport .transport-day-button:hover,
#view-transport .transport-agenda-item:hover {
  border-color: #b9c8ef;
  transform: translateY(-1px);
}
#view-transport .transport-day-button.active {
  border-color: var(--blue);
  background: #f3f6ff;
  color: var(--blue);
  box-shadow: 0 5px 16px rgba(23, 0, 253, 0.08);
}
#view-transport .transport-day-button span {
  display: block;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#view-transport .transport-day-button strong {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-md);
}

#view-transport .transport-day-button.active small {
  color: #5d65a8;
}
#view-transport .transport-planning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.72fr);
  gap: 14px;
  min-height: 520px;
}
#view-transport .transport-planning-map-card,
#view-transport .transport-planning-agenda {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
#view-transport .transport-planning-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
#view-transport .transport-planning-map-head strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-md);
}
#view-transport .transport-planning-map-head strong i {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

#view-transport .transport-map-canvas {
  position: relative;
  min-height: 458px;
  overflow: hidden;
  background: linear-gradient(135deg, #f6f8fb 0%, #eef2f6 100%);
}
#view-transport .transport-map-canvas:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(33, 33, 33, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 33, 33, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
}
#view-transport .transport-map-street {
  position: absolute;
  height: 18px;
  border: 1px solid #dfe4eb;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0.92;
}
#view-transport .transport-map-street.s1 {
  width: 68%;
  left: -8%;
  top: 21%;
  transform: rotate(-10deg);
}
#view-transport .transport-map-street.s2 {
  width: 72%;
  right: -13%;
  top: 44%;
  transform: rotate(13deg);
}
#view-transport .transport-map-street.s3 {
  width: 78%;
  left: 8%;
  bottom: 18%;
  transform: rotate(-4deg);
}
#view-transport .transport-map-street.s4 {
  width: 55%;
  left: 35%;
  top: 13%;
  transform: rotate(74deg);
}
#view-transport .transport-map-district {
  position: absolute;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(222, 228, 236, 0.9);
  color: #7d8798;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  backdrop-filter: blur(3px);
}
#view-transport .transport-map-district.d1 {
  left: 12%;
  top: 12%;
}
.transport-map-district.d2 {
  right: 12%;
  top: 17%;
}
.transport-map-district.d3 {
  left: 18%;
  bottom: 12%;
}
.transport-map-district.d4 {
  right: 18%;
  bottom: 19%;
}
#view-transport .transport-routes-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#view-transport .transport-route-line {
  fill: none;
  stroke: #1700fd;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
  filter: drop-shadow(0 3px 5px rgba(23, 0, 253, 0.16));
  cursor: pointer;
  transition: var(--transition-base);
}
#view-transport .transport-route-line.route-alt {
  stroke: #212121;
}
.transport-route-line.route-lime {
  stroke: #8ecf1a;
}
#view-transport .transport-route-line:not(.active) {
  opacity: 0.25;
  stroke-width: 4;
}
#view-transport .transport-route-marker {
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 3px 6px rgba(33, 33, 33, 0.18));
  cursor: pointer;
}
#view-transport .transport-route-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  fill: #212121;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
#view-transport .transport-map-empty {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 26px;
  text-align: center;
}
#view-transport .transport-map-empty.show {
  display: grid;
}
#view-transport .transport-map-empty > div {
  max-width: 300px;
  padding: 24px;
  border: 1px dashed #cfd7e3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(5px);
}
#view-transport .transport-map-empty i {
  width: 28px;
  height: 28px;
  color: #8b96a8;
}
#view-transport .transport-map-empty strong {
  display: block;
  margin-top: 9px;
  font-size: var(--font-size-base);
}
#view-transport .transport-map-empty span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}

#view-transport .transport-agenda-head {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}
#view-transport .transport-agenda-head p {
  margin: 0;
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#view-transport .transport-agenda-head h3 {
  margin: 5px 0 0;
  font-family: var(--font-body);
  font-size: var(--font-size-2xl);
}
#view-transport .transport-agenda-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow: auto;
}
#view-transport .transport-agenda-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: 0.16s ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

#view-transport .transport-agenda-item.active {
  border-color: var(--blue);
  background: #f5f7ff;
  box-shadow: 0 4px 14px rgba(23, 0, 253, 0.07);
}
#view-transport .transport-agenda-time {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
}
#view-transport .transport-agenda-main strong {
  display: block;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-compact);
}
#view-transport .transport-agenda-main span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-ui);
}
#view-transport .transport-agenda-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
#view-transport .transport-agenda-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1700fd;
}
#view-transport .transport-agenda-item[data-tone="lime"] .transport-agenda-dot {
  background: #8ecf1a;
}
#view-transport .transport-agenda-item[data-tone="dark"] .transport-agenda-dot {
  background: #212121;
}
#view-transport .transport-agenda-empty {
  display: none;
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   Migrated source: v3-221-vacation-balance-breakdown-styles
   -------------------------------------------------------------------------- */

#vacationBalanceDetailModal .vacation-balance-breakdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  margin-top: 9px;
  line-height: 1.2;
}
/* [AGRUPADO-625] Estilos 100% idénticos agrupados. Origen: líneas 8603, 8674. */
#vacationBalanceDetailModal .vacation-balance-breakdown-label,
#view-vacation-balance-detail
  .vacation-balance-breakdown
  .vacation-balance-breakdown-label {
  display: block;
  margin-bottom: 1px;
  color: var(--ink-3);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* [AGRUPADO-626] Estilos 100% idénticos agrupados. Origen: líneas 8612, 8683. */
#vacationBalanceDetailModal .vacation-balance-breakdown-row,
#view-vacation-balance-detail
  .vacation-balance-breakdown
  .vacation-balance-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 27px;
  padding: 5px 7px;
  border: 1px solid rgba(25, 32, 75, 0.1);
  border-radius: 8px;
  background: rgba(25, 32, 75, 0.045);
}
/* [AGRUPADO-627] Estilos 100% idénticos agrupados. Origen: líneas 8623, 8694. */
#vacationBalanceDetailModal .vacation-balance-breakdown-year,
#view-vacation-balance-detail
  .vacation-balance-breakdown
  .vacation-balance-breakdown-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(25, 32, 75, 0.09);
  color: var(--ink-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}
/* [AGRUPADO-628] Estilos 100% idénticos agrupados. Origen: líneas 8636, 8707. */
#vacationBalanceDetailModal .vacation-balance-breakdown-row strong,
#view-vacation-balance-detail
  .vacation-balance-breakdown
  .vacation-balance-breakdown-row
  strong {
  margin: 0;
  color: var(--ink-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-233-vacation-summary-team-balance-refinements
   -------------------------------------------------------------------------- */

#view-vacations .vacation-summary-support-inline p {
  margin: 5px 0 10px;
}

#view-vacations
  #vacation-panel-mi-equipo
  .vacation-team-head-actions
  .request-list-filters {
  width: auto;
  justify-content: flex-end;
}

#view-vacation-balance-detail .vacation-balance-breakdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-235-independent-team-action-modal-styles
   -------------------------------------------------------------------------- */

/* Denegar y observar se resuelven en un lightbox compacto e independiente. */
#teamRequestActionModal {
  z-index: 1600;
  padding: 18px;
}
#teamRequestActionModal .team-request-action-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 22px;
  border-radius: 18px;
}
#teamRequestActionModal .modal-head {
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
#teamRequestActionModal .team-request-action-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--blue);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#teamRequestActionModal .team-request-action-person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfe;
}
#teamRequestActionModal .team-request-action-person-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #7189c7, #425e9f);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

#teamRequestActionModal .team-request-action-person strong {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#teamRequestActionModal .team-request-action-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 15px;
}
#teamRequestActionModal .team-request-action-head > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
}

#teamRequestActionModal .team-request-action-head p {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-ui);
}
#teamRequestActionModal
  .team-request-action-form.is-denial
  .team-request-action-head
  > span {
  background: #fde8eb;
  color: #aa3340;
}
/* [AGRUPADO-629] Estilos 100% idénticos agrupados. Origen: líneas 8802, 8888. */
#teamRequestActionModal
  .team-request-action-form.is-observation
  .team-request-action-head
  > span,
#view-vacations .vacation-liquidation-partial {
  background: #eee9ff;
  color: #684eb6;
}

#teamRequestActionModal .team-request-action-field textarea {
  min-height: 108px;
  padding: 11px 12px;
  line-height: var(--line-height-body);
  resize: vertical;
}

#teamRequestActionModal .team-request-action-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border-radius: 11px;
}

#teamRequestActionModal .is-denial .team-request-action-notice {
  border: 1px solid #e9aeb5;
  background: #fdeff1;
  color: #8f2935;
}
#teamRequestActionModal .is-observation .team-request-action-notice {
  border: 1px solid #d9cff8;
  background: #f5f1ff;
  color: #684eb6;
}
#teamRequestActionModal .team-request-action-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
#teamRequestActionModal .team-request-action-actions button {
  min-height: 38px;
}
#teamRequestActionModal #confirmTeamRequestObservation {
  background: #684eb6;
  border-color: #684eb6;
  box-shadow: 0 8px 18px rgba(104, 78, 182, 0.18);
}
#teamRequestActionModal #confirmTeamRequestObservation:hover {
  background: #573f9f;
  border-color: #573f9f;
}
#teamRequestActionModal .team-request-action-actions .primary-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-257-vacation-liquidation-log-styles
   -------------------------------------------------------------------------- */

#view-vacations .vacation-administration-table {
  min-width: 2040px !important;
  table-layout: auto;
}
#view-vacations .vacation-administration-table th,
#view-vacations .vacation-administration-table td {
  padding-left: 9px;
  padding-right: 9px;
}
#view-vacations .vacation-administration-table th:nth-child(1),
#view-vacations .vacation-administration-table td:nth-child(1) {
  min-width: 205px !important;
}
#view-vacations .vacation-administration-table th:nth-child(2),
#view-vacations .vacation-administration-table td:nth-child(2) {
  min-width: 112px !important;
  width: 112px !important;
  max-width: 126px;
  white-space: normal;
  line-height: var(--line-height-snug);
}
#view-vacations .vacation-administration-table th:nth-child(3),
#view-vacations .vacation-administration-table td:nth-child(3),
#view-vacations .vacation-administration-table th:nth-child(4),
#view-vacations .vacation-administration-table td:nth-child(4) {
  min-width: 104px !important;
  width: 104px !important;
}
#view-vacations .vacation-administration-table th:nth-child(5),
#view-vacations .vacation-administration-table td:nth-child(5) {
  min-width: 86px !important;
  width: 86px !important;
  text-align: center;
}
#view-vacations .vacation-administration-table th:nth-child(6),
#view-vacations .vacation-administration-table td:nth-child(6) {
  min-width: 105px !important;
  width: 105px !important;
  text-align: left !important;
}
#view-vacations .vacation-administration-table th:nth-child(7),
#view-vacations .vacation-administration-table td:nth-child(7),
#view-vacations .vacation-administration-table th:nth-child(8),
#view-vacations .vacation-administration-table td:nth-child(8),
#view-vacations .vacation-administration-table th:nth-child(9),
#view-vacations .vacation-administration-table td:nth-child(9) {
  min-width: 88px !important;
  width: 88px !important;
  text-align: center;
}
#view-vacations .vacation-administration-table th:nth-child(10),
#view-vacations .vacation-administration-table td:nth-child(10),
#view-vacations .vacation-administration-table th:nth-child(12),
#view-vacations .vacation-administration-table td:nth-child(12) {
  min-width: 112px !important;
  width: 112px !important;
}
#view-vacations .vacation-administration-table th:nth-child(11),
#view-vacations .vacation-administration-table td:nth-child(11) {
  min-width: 130px !important;
  width: 130px !important;
}
#view-vacations .vacation-administration-table th:nth-child(13),
#view-vacations .vacation-administration-table td:nth-child(13) {
  min-width: 145px !important;
  width: 145px !important;
}
#view-vacations .vacation-administration-table th:nth-child(14),
#view-vacations .vacation-administration-table td:nth-child(14) {
  min-width: 178px !important;
  width: 178px !important;
}
#view-vacations .vacation-administration-table th:nth-child(15),
#view-vacations .vacation-administration-table td:nth-child(15) {
  min-width: 110px !important;
  width: 110px !important;
  text-align: center;
}
#view-vacations .vacation-admin-stacked-head {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
  text-align: center;
}
#view-vacations .vacation-admin-stacked-head small {
  font: inherit;
  font-size: var(--font-size-5xs);
  letter-spacing: 0.035em;
  color: inherit;
}

#view-vacations .vacation-liquidation-neutral {
  background: #f0f2f6;
  color: #697386;
}

#view-vacations .vacation-liquidation-empty {
  color: #9aa3b2;
}
/* #view-vacations .vacation-liquidation-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  font-size: var(--font-size-xs);
  cursor: pointer !important;
} */

#view-vacations .vacation-administration-scroll input {
  cursor: text;
}

/* Las dos últimas columnas quedan bloqueadas a la derecha. */
#view-vacations .vacation-administration-table th:nth-child(15),
#view-vacations .vacation-administration-table td:nth-child(15) {
  position: sticky;
  right: 0;
  z-index: 5;
  background: #fff;
}
#view-vacations .vacation-administration-table th:nth-child(14),
#view-vacations .vacation-administration-table td:nth-child(14) {
  position: sticky;
  right: 110px;
  z-index: 5;
  background: #fff;
  box-shadow: -10px 0 16px -16px rgba(18, 31, 65, 0.55);
}
#view-vacations
  .vacation-administration-table
  .vacation-administration-header-row
  th:nth-child(14),
#view-vacations
  .vacation-administration-table
  .vacation-administration-header-row
  th:nth-child(15) {
  z-index: 9;
  background: #f8faff;
}
#view-vacations
  .vacation-administration-table
  .vacation-administration-filter-row
  th:nth-child(14),
#view-vacations
  .vacation-administration-table
  .vacation-administration-filter-row
  th:nth-child(15) {
  z-index: 8;
  background: #fff;
}

#vacationLiquidationReviewModal .vacation-liquidation-review-modal {
  width: min(650px, 100%);
  max-height: calc(100vh - 34px);
  overflow: auto;
}
#vacationLiquidationReviewModal .vacation-liquidation-review-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

#vacationLiquidationReviewModal .vacation-liquidation-review-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfcff;
}

#vacationLiquidationReviewModal .vacation-liquidation-review-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #7189c7, #425e9f);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}
#vacationLiquidationReviewModal .vacation-liquidation-period {
  display: grid;
  grid-template-columns: 1.55fr 0.7fr 0.8fr;
  gap: 8px;
  margin-top: 10px;
}
#vacationLiquidationReviewModal .vacation-liquidation-period > div,
#vacationLiquidationReviewModal .vacation-liquidation-buckets > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
#vacationLiquidationReviewModal .vacation-liquidation-period span,
#vacationLiquidationReviewModal .vacation-liquidation-buckets span {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: var(--ink-3);
}

#vacationLiquidationReviewModal .vacation-liquidation-review-section {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

#vacationLiquidationReviewModal .vacation-liquidation-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 9px;
}
#vacationLiquidationReviewModal .vacation-liquidation-buckets > div {
  background: #f8faff;
}

#vacationLiquidationReviewModal .vacation-liquidation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#vacationLiquidationReviewModal .vacation-liquidation-actions button {
  min-height: 36px;
  gap: 6px;
  font-size: var(--font-size-xs);
}

#vacationLiquidationReviewModal .vacation-liquidation-partial-action {
  border-color: #cabff0;
  color: #684eb6;
  background: #f8f5ff;
}
#vacationLiquidationReviewModal .vacation-liquidation-nonliquidable {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #dfe4ed;
  border-radius: 11px;
  background: #f7f8fa;
  color: var(--ink-2);
}

#vacationLiquidationReviewModal .vacation-liquidation-nonliquidable i {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--ink-3);
}

#vacationLiquidationReviewModal .vacation-liquidation-nonliquidable span {
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-normal);
  color: var(--ink-3);
}
#vacationLiquidationReviewModal .vacation-liquidation-history {
  display: flex;
  flex-direction: column;
  margin-top: 9px;
}
#vacationLiquidationReviewModal .vacation-liquidation-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  padding-bottom: 11px;
}
#vacationLiquidationReviewModal
  .vacation-liquidation-history-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 25px;
  bottom: 0;
  width: 1px;
  background: #dce3ef;
}
#vacationLiquidationReviewModal .vacation-liquidation-history-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  z-index: 1;
  border-radius: 50%;
  background: #eef3ff;
  color: var(--blue);
}
#vacationLiquidationReviewModal .vacation-liquidation-history-icon i {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}
#vacationLiquidationReviewModal .vacation-liquidation-history-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

#vacationLiquidationReviewModal .vacation-liquidation-history-empty {
  padding: 12px;
  border: 1px dashed #d8deea;
  border-radius: 11px;
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  background: #fbfcfe;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-262-vacation-liquidation-action-visibility-fix
   -------------------------------------------------------------------------- */

/* Los botones del estado de liquidación respetan estrictamente el atributo hidden.
     Evita que estilos base de botones vuelvan visibles acciones que no corresponden al estado actual. */

/* --------------------------------------------------------------------------
   Migrated source: v3-259-vacation-request-log-sticky-collaborator-filter-count
   -------------------------------------------------------------------------- */

/* Colaborador permanece visible al navegar horizontalmente, con un ancho más compacto. */
#view-vacations .vacation-administration-table th:nth-child(1),
#view-vacations .vacation-administration-table td:nth-child(1) {
  position: sticky !important;
  left: 0 !important;
  min-width: 160px !important;
  width: 160px !important;
  max-width: 160px !important;
  background: #fff !important;
  background-clip: padding-box;
  z-index: 7 !important;
  box-shadow: 10px 0 18px -19px rgba(18, 31, 65, 0.7);
}
#view-vacations
  .vacation-administration-table
  .vacation-administration-header-row
  th:nth-child(1) {
  z-index: 13 !important;
  background: #f8faff !important;
}
#view-vacations
  .vacation-administration-table
  .vacation-administration-filter-row
  th:nth-child(1) {
  z-index: 12 !important;
  background: #fff !important;
}
#view-vacations .vacation-administration-table tbody tr:hover td:nth-child(1) {
  background: #fafbff !important;
}

#view-vacations .vacation-administration-person > div {
  min-width: 0;
  overflow: hidden;
}
#view-vacations .vacation-administration-person strong,
#view-vacations .vacation-administration-person span:not(.avatar) {
  max-width: 102px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-vacations .vacation-administration-filter-row th:nth-child(1) {
  padding-left: 7px !important;
  padding-right: 7px !important;
}
#view-vacations
  .vacation-administration-filter-row
  th:nth-child(1)
  .vacation-table-search {
  min-width: 0;
  width: 100%;
}
#view-vacations
  .vacation-administration-filter-row
  th:nth-child(1)
  .vacation-table-search
  input {
  min-width: 0;
  width: 100%;
  padding-right: 6px;
}

/* Contador de filtros activos dentro de Limpiar filtros. */

#view-vacations .button-clear {
  position: relative;
  overflow: visible;
  gap: 6px;
}
#view-vacations .vacation-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue, #2f62d0);
  color: #fff;
  font-size: var(--font-size-2xs);
  line-height: 1;
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-261-vacation-log-liquidable-column-modal-rules
   -------------------------------------------------------------------------- */

/* Registro: Días corridos sale de la tabla y Días liquidables se ubica junto a Tipo de saldo. */
#view-vacations .vacation-administration-table {
  min-width: 1980px !important;
}
#view-vacations .vacation-administration-table th:nth-child(6),
#view-vacations .vacation-administration-table td:nth-child(6) {
  min-width: 102px !important;
  width: 102px !important;
  text-align: left !important;
}
#view-vacations .vacation-administration-table th:nth-child(7),
#view-vacations .vacation-administration-table td:nth-child(7) {
  min-width: 96px !important;
  width: 96px !important;
  text-align: center !important;
}
#view-vacations .vacation-administration-table th:nth-child(8),
#view-vacations .vacation-administration-table td:nth-child(8),
#view-vacations .vacation-administration-table th:nth-child(9),
#view-vacations .vacation-administration-table td:nth-child(9),
#view-vacations .vacation-administration-table th:nth-child(10),
#view-vacations .vacation-administration-table td:nth-child(10) {
  min-width: 84px !important;
  width: 84px !important;
  text-align: center !important;
}

/* Liquidación: las cuatro lecturas quedan alineadas en una sola fila en desktop/laptop. */
#vacationLiquidationReviewModal .vacation-liquidation-review-modal {
  width: min(800px, calc(100vw - 32px)) !important;
  max-width: 800px !important;
}
#vacationLiquidationReviewModal .vacation-liquidation-buckets {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
#vacationLiquidationReviewModal .vacation-liquidation-buckets > div {
  min-width: 0 !important;
  padding: 9px 9px !important;
}
#vacationLiquidationReviewModal .vacation-liquidation-liquidable-days {
  order: 4 !important;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-263-vacation-liquidable-days-style-fix
   -------------------------------------------------------------------------- */

/* Reordena la lectura de días liquidables para evitar que mes y cantidad queden pegados. */

#vacationLiquidationReviewModal #vacationLiquidationLiquidableDays {
  display: block;
  width: 100%;
  line-height: 1.2;
}
#vacationLiquidationReviewModal
  #vacationLiquidationLiquidableDays.has-month-breakdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 1px;
}
#vacationLiquidationReviewModal .vacation-liquidation-month-row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding-top: 5px;
  border-top: 1px solid rgba(53, 93, 184, 0.12);
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#vacationLiquidationReviewModal .vacation-liquidation-month-row small {
  color: var(--ink-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: capitalize;
}
#vacationLiquidationReviewModal .vacation-liquidation-month-row b {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
  white-space: nowrap;
}
#vacationLiquidationReviewModal
  .vacation-liquidation-month-row.is-current
  small,
#vacationLiquidationReviewModal .vacation-liquidation-month-row.is-current b {
  color: #355db8 !important;
}
#vacationLiquidationReviewModal .vacation-liquidation-month-row.is-muted small,
#vacationLiquidationReviewModal .vacation-liquidation-month-row.is-muted b {
  color: #9aa3b2 !important;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-265-vacation-liquidation-action-visibility-hard-guard
   -------------------------------------------------------------------------- */

/* Guard final: ninguna acción oculta puede reaparecer por estilos heredados. */

/* --------------------------------------------------------------------------
   Migrated source: v3-294-intranet-date-picker-styles
   -------------------------------------------------------------------------- */

/* Calendario estándar de la intranet.
     Vacaciones, Ausencias/Licencias, Traslados y el resto de los campos .app-date-control
     comparten esta misma base visual. */

.intranet-date-picker {
  position: fixed;
  z-index: 1000;
  width: 286px;
  max-width: calc(100vw - 20px);
  margin: 0;
  padding: 10px;
  border: 1px solid #dce4f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(29, 42, 91, 0.16);
  box-sizing: border-box;
}

.intranet-date-control.is-picker-active .date-input-display {
  border-color: var(--border-focus) !important;
  box-shadow: var(--focus-ring) !important;
}
.intranet-date-control.is-picker-active .date-picker-trigger {
  background: var(--blue-2) !important;
}

/* v3.99 — Header responsive: solo avatar y sin borde por debajo de 1025 px */

/* Module exception · Absences copy needs a slightly more generous secondary line-height. */
#view-absences .absence-balance-copy span {
  line-height: var(--line-height-normal);
}

/* Inicio · lanzamiento inicial: solo alertas de Vacaciones + cumpleaños. */
#view-home .home-launch-version {
  display: grid;
  gap: 18px;
}
#view-home .home-launch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 18px;
  align-items: stretch;
}

#view-home .home-launch-full-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2px;
}
#view-home .home-launch-full-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: var(--transition-fast);
}

/*******************************
Clases nuevas a reemplazar
*******************************/

/*Placeholder/skeleton*/

.is-loading .placeholder-wave,
.is-loading .placeholder-static {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  text-shadow: none !important;
  background: #d9dde5 !important;
  border-color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.is-loading .placeholder-wave *,
.is-loading .placeholder-static * {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
}

.is-loading .placeholder-wave > *,
.is-loading .placeholder-static > * {
  opacity: 0 !important;
}

.is-loading img.placeholder-wave,
.is-loading img.placeholder-static,
.is-loading svg.placeholder-wave,
.is-loading svg.placeholder-static {
  opacity: 1 !important;
  object-position: -9999px;
}

.is-loading .placeholder-wave {
  animation: placeholder-glow 1.6s linear infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.5;
  }
}

.heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.heading-actions .primary-btn {
  width: 210px;
  white-space: nowrap;
}

.heading-actions .primary-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex: none;
}

.blue-banner-section {
  padding: var(--padding-card);
  border-radius: var(--radius-card);
  color: #fff;
  background: var(--blue);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.blue-banner-section .eyebrow {
  color: #bed2ff !important;
}

.blue-banner-section h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 23px;
  letter-spacing: -0.6px;
}

.blue-banner-section p:not(.eyebrow) {
  margin: 7px 0 0;
  color: #e5edff;
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  max-width: 480px;
}

.blue-banner-section::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  right: -75px;
  bottom: -115px;
}
.blue-banner-section .icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.blue-banner-section.banner-document {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.blue-banner-section .icon i {
  width: 22px;
  height: 22px;
}

.blue-banner-section .hero-stat {
  min-width: 178px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
}
.blue-banner-section .hero-stat strong {
  display: block;
  font-size: var(--font-size-sm);
}
.blue-banner-section .hero-stat span {
  display: block;
  margin-top: 4px;
  color: #dce7ff;
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-compact);
}

.yellow-banner {
  display: grid;
  border-radius: var(--radius);
  padding: var(--radius-card);
  grid-template-columns: 40px minmax(0, 1fr) minmax(170px, 220px);
  gap: 12px;
  align-items: center;
  border: solid 1px #ead89b;
  background: #fffaea;
  box-shadow: 0 8px 18px rgba(116, 86, 0, 0.05);
}

.yellow-banner .eyebrow {
  color: #8b6500 !important;
}

.yellow-banner strong {
  font-size: var(--font-size-base);
  color: var(--ink);
}

.yellow-banner p {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}

.card-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  margin-bottom: 0;
}

.card-head.card-head-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.card-head.card-head-row .table-heading {
  gap: var(--gap-1);
  display: flex;
  flex-direction: column;
}

.card-head p {
  font-size: var(--font-size-md);
  color: var(--muted);
  margin-bottom: 0;
}

.head-table {
  margin-bottom: var(--space-7);
}

.head-table .result {
  background: var(--surface-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin-bottom: 12px;
  flex-direction: column;
}

.icon.icon-xl {
  width: 38px;
  min-width: 38px;
  height: 38px;
}

.icon.icon-text {
  width: 200px !important;
  padding: 10px !important;
  height: fit-content;
  margin-bottom: 10px !important;
  gap: 5px;
  text-align: left;
  justify-items: start;
}

.icon span {
  font-size: var(--font-size-4xs) !important;
  line-height: 1 !important;
}

.icon strong {
  font-size: var(--font-size-md) !important;
  line-height: 1 !important;
}

.icon-blue {
  background: var(--blue-2);
  color: var(--blue);
}

.icon-green {
  color: var(--green);
  background: var(--green-bg);
}

.icon-yellow {
  color: var(--amber);
  background: var(--amber-bg);
}

.icon-white {
  background: var(--blue-2);
  color: var(--blue);
}

.icon strong {
  font-size: var(--font-size-base);
}

.divider {
  height: 1px;
  margin: 17px 0 15px;
  background: var(--line);
}

.card {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--padding-card);
  overflow: hidden;
}

.card-blue-light {
  border: 1px solid #dce4ff;
  background: #f6f8ff;
}

.card-blue-light h3 {
  margin-top: 0 !important;
}

.card-blue-light p {
  margin-bottom: 0 !important;
}

.card.p-0 {
  padding: 0 !important;
}

.card-row {
  display: flex;
  flex-direction: row;
}

.card-title-h4 {
  font-size: var(--font-size-base);
  font-weight: bolder;
  margin-bottom: 5px;
}

.card p {
  font-size: var(--font-size-md);
  color: var(--muted);
  line-height: var(--line-height-normal);
  margin: 0;
}

.button {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
}

.button svg {
  width: 18px;
  height: 18px;
}

.button-link-arrow {
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--blue) !important;
  margin-top: 8px;
}

.button-link-arrow svg {
  width: 18px;
  height: 18px;
}

.button-blue-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  box-shadow: 0 6px 14px rgba(44, 84, 216, 0.18);
}

.button-blue-primary:hover {
  background: var(--color-primary-hover);
}

.button-border {
  border: 1px solid var(--blue);
  border-radius: var(--radius-md);
  min-height: var(--control-height-md);
  padding: 0 var(--space-6);
  background: transparent;
  color: var(--blue);
}

.button-border:hover {
  background: var(--blue-2);
}

.button-secondary {
  background: var(--surface-primary);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.button-secondary:hover {
  background: #fafbff;
  border-color: #cfd6ea;
}

.button-blue {
  background: var(--id-blue);
  color: #ffffff;
}

.button-blue:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(23, 0, 253, 0.2);
}

.button-black {
  background: #000000;
  color: #ffffff;
}

.button-black:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background-color: var(--surface-primary);
  color: #000000;
}

.button-green {
  background-color: var(--id-green);
  color: #000000;
}

.button-green:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(183, 254, 61, 0.2);
  background-color: var(--surface-primary);
  color: #000000;
}

.buttons-arrow-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.buttons-arrow-controls span {
  margin-right: 6px;
  font:
    700 9px / 1 "DM Sans",
    sans-serif;
  color: #777;
}

.buttons-arrow-controls button {
  width: 36px;
  height: 36px;
  display: grid;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(214, 214, 214);
  border-image: none;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  place-items: center;
}

.buttons-arrow-controls button:hover {
  color: rgb(255, 255, 255);
  background: rgb(0, 0, 0);
}

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  padding: var(--padding-alert);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
  margin-top: var(--space-7);
}

.alert-info {
  background: #fbfcff;
  border: 1px solid #e1e6f0;
  color: var(--ink-2);
}

.alert-danger {
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger);
  color: var(--status-danger);
}

.alert-danger i {
  fill: var(--status-danger);
}

.alert-success {
  background: var(--status-success-bg);
  border: 1px solid var(--status-success);
  color: var(--status-success);
}

.alert-success i {
  fill: var(--status-success);
}

.table-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex-direction: row !important;
}

.admin-view {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-direction: row !important;
}

.title-top {
  display: block;
  font-size: var(--font-size-2xs);
  line-height: 1.2;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b6500;
  margin-bottom: 0;
}

.color-yellow {
  color: #8b6500;
}

.item-list-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
}

.item-list-row:last-child {
  border: 0;
  padding-bottom: 0;
}

.item-list-row span {
  font-size: var(--font-size-sm);
  line-height: 125%;
}

.item-list-row strong {
  font-size: var(--font-size-md);
}

.card .item-list-row p {
  font-size: var(--font-size-md) !important;
  color: var(--ink) !important;
}

.search-bar {
  gap: 8px;
  flex: 1;
  background: #fff;
  min-width: 180px;
  max-width: 340px;
  height: 37px;
}
.search-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0 10px;
}

.search-control i {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.search-control input {
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--ink);
}

.inline-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
  max-width: 340px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 10px;
  border-radius: 10px;
  height: 37px;
}
.inline-search i {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.inline-search input {
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: var(--font-size-md);
  color: var(--ink);
}

.card-documentation {
  display: grid !important;
  grid-template-columns: 54px minmax(330px, 1fr) minmax(118px, 0.22fr) auto !important;
  transition: all ease 0.3s;
  cursor: pointer;
  align-items: center;
  padding: 20px !important;
}

.card-documentation:hover {
  border-color: #bfd0ff;
  box-shadow: 0 7px 16px rgba(36, 57, 145, 0.06) !important;
}

.card-documentation .icon {
  margin-bottom: 0;
}

.card-documentation h2 {
  font-size: var(--font-size-lg);
}

.card-documentation p {
  margin-top: 5px;
}

.badge-floating {
  position: fixed;
  right: 32px;
  top: 91px;
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px !important;
  border: 1px solid #f0d49a;
  box-shadow: 0 9px 24px rgba(71, 49, 6, 0.14);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

.badge {
  min-height: 21px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: var(--font-size-2xs);
  line-height: 1;
}

.badge-yellow {
  background: #fff0d5;
  color: #8a5b00;
  border: 1px solid #f0cf8a;
}

.badge-grey {
  background: #f3f5fa;
  color: var(--muted);
}

.version span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--font-size-4xs);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.version strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-compact);
}

.banner-white h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  letter-spacing: -0.25px;
  margin: 0 0 4px;
}

.banner-white {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
}

.banner-white .eyebrow {
  font-size: 11px;
  color: var(--blue);
}

.document-container {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.document-detail {
  padding: var(--padding-card);
  color: var(--ink);
  padding-top: 0 !important;
}

.document-detail h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-4xl);
  line-height: 1.3;
  letter-spacing: -0.35px;
  margin: 27px 0 10px;
  padding-top: 3px;
  color: var(--ink) !important;
}

.document-detail h4 {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.38;
  margin: 19px 0 7px;
  color: var(--ink) !important;
}
.document-detail p,
.document-detail td {
  font-size: 12.5px;
  line-height: 1.62;
  margin: 0 0 10px;
  color: var(--ink) !important;
}

.document-detail a {
  color: var(--blue);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.document-detail ul {
  list-style: none;
  margin: 7px 0 13px;
  padding: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.document-detail li {
  position: relative;
  padding-left: 17px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

.document-detail li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.document-tip {
  padding: var(--padding-alert);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #f5f7ff;
}

.filter-container {
  position: relative;
}

.filter-chevron {
  width: 13px !important;
  height: 13px !important;
  margin-left: 1px;
  transition: transform 0.16s ease;
}

.filter-container.is-open .filter-chevron {
  transform: rotate(180deg);
}

.filter-container.is-open .filter-dropdown {
  display: block;
}

.filter-dropdown {
  position: absolute;
  z-index: 40;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(28, 42, 92, 0.14);
  display: none;
}

.filter-dropdown button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  padding: 7px 8px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  cursor: pointer;
  justify-content: start;
}

.filter-dropdown button.active,
.filter-dropdown button:hover {
  background: var(--blue-2);
  color: var(--blue);
}

.page-heading h2 {
  font-size: 22px;
}

.page-heading p:not(.eyebrown) {
  max-width: 455px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

#view-about .identity-asset-block {
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 16px;
}

.identity-icon-grid img {
  width: 30px;
  height: 30px;
}

/* --------------------------------------------------------------------------
   Migrated source: v3-293-vacation-linked-picker-styles
   -------------------------------------------------------------------------- */

/* Vacaciones · date range picker compacto, encadenado como selector de vuelos */

#vacationModal .vacation-linked-calendar {
  position: absolute;
  z-index: 35;
  width: 286px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 10px;
  border: 1px solid #dce4f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(29, 42, 91, 0.16);
}

/* [AGRUPADO-513] Estilos 100% idénticos agrupados. Origen: líneas 6856, 9138. */
#vacationModal .vacation-linked-calendar-head,
.intranet-date-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
/* [AGRUPADO-514] Estilos 100% idénticos agrupados. Origen: líneas 6859, 8661, 9139. */
#vacationModal .vacation-linked-calendar-copy,
#view-vacations #vacation-panel-mi-equipo .vacation-team-head-actions,
.intranet-date-picker-copy {
  min-width: 0;
  padding-top: 1px;
}

/* [AGRUPADO-515] Estilos 100% idénticos agrupados. Origen: líneas 6861, 9141. */
#vacationModal .vacation-linked-calendar-copy span,
.intranet-date-picker-copy span {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-2xs);
  color: var(--muted);
  line-height: 1.3;
}
/* [AGRUPADO-516] Estilos 100% idénticos agrupados. Origen: líneas 6862, 9142. */
#vacationModal .vacation-linked-calendar-nav,
.intranet-date-picker-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
}
/* [AGRUPADO-517] Estilos 100% idénticos agrupados. Origen: líneas 6863, 9143. */
#vacationModal .vacation-linked-calendar-nav button,
.intranet-date-picker-nav button {
  width: 27px;
  height: 27px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* [AGRUPADO-518] Estilos 100% idénticos agrupados. Origen: líneas 6869, 9149. */
#vacationModal .vacation-linked-calendar-month,
.intranet-date-picker-month {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
}
/* [AGRUPADO-519] Estilos 100% idénticos agrupados. Origen: líneas 6873, 9153. */
#vacationModal .vacation-linked-calendar-weekdays,
#vacationModal .vacation-linked-calendar-grid,
.intranet-date-picker-weekdays,
.intranet-date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
/* [AGRUPADO-520] Estilos 100% idénticos agrupados. Origen: líneas 6875, 9154. */
#vacationModal .vacation-linked-calendar-weekdays span,
.intranet-date-picker-weekdays span {
  padding: 3px 0;
  text-align: center;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--muted-2);
  text-transform: uppercase;
}
/* [AGRUPADO-521] Estilos 100% idénticos agrupados. Origen: líneas 6878, 9157. */
#vacationModal .vacation-linked-calendar-day,
.intranet-date-picker-day {
  position: relative;
  min-width: 0;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
/* [AGRUPADO-522] Estilos 100% idénticos agrupados. Origen: líneas 6883, 9162. */
#vacationModal .vacation-linked-calendar-day .vacation-day-number,
.intranet-date-picker-day .intranet-date-picker-number {
  display: block;
  line-height: 1;
}
/* [AGRUPADO-523] Estilos 100% idénticos agrupados. Origen: líneas 6884, 9163. */
#vacationModal .vacation-linked-calendar-day .vacation-day-today,
.intranet-date-picker-today {
  display: block;
  margin-top: 2px;
  font-size: 6.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--blue);
}

/* [AGRUPADO-524] Estilos 100% idénticos agrupados. Origen: líneas 6894, 9173. */
#vacationModal .vacation-linked-calendar-day.is-linked,
.intranet-date-picker-day.is-linked {
  border-color: #8fa9f2;
  background: #eef3ff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px #dbe5ff;
}

/* [AGRUPADO-525] Estilos 100% idénticos agrupados. Origen: líneas 6898, 9177. */
#vacationModal .vacation-linked-calendar-day.is-in-range,
.intranet-date-picker-day.is-in-range {
  border-radius: 5px;
  background: #f0f4ff;
  color: var(--blue);
}
/* [AGRUPADO-526] Estilos 100% idénticos agrupados. Origen: líneas 6901, 9178. */
#vacationModal .vacation-linked-calendar-day:disabled,
.intranet-date-picker-day:disabled {
  cursor: not-allowed;
  background: #f7f8fa;
  color: #c4c9d2;
  text-decoration: none;
}
/* [AGRUPADO-527] Estilos 100% idénticos agrupados. Origen: líneas 6904, 9179. */
#vacationModal .vacation-linked-calendar-day:disabled .vacation-day-today,
.intranet-date-picker-day:disabled .intranet-date-picker-today {
  color: #aab1bf;
}
/* [AGRUPADO-528] Estilos 100% idénticos agrupados. Origen: líneas 6905, 9180. */
#vacationModal .vacation-linked-calendar-empty,
.intranet-date-picker-empty {
  height: 32px;
}

#vacationModal .vacation-linked-calendar-day .vacation-day-feriado {
  color: var(--status-success);
}
#vacationModal .vacation-linked-calendar-day:has(.vacation-day-feriado) {
  background-color: var(--status-success-bg);
}

/******Media Querys*******/

@media (min-width: 861px) and (max-width: 1449px) {
  .app {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .sidebar {
    width: 72px;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    z-index: 60;
    transition:
      width 0.22s ease,
      box-shadow 0.22s ease,
      padding 0.22s ease;
  }

  .mobile-menu {
    display: grid;
  }
  .sidebar.is-pinned {
    width: 264px;
    padding-left: 14px;
    padding-right: 14px;
    box-shadow: 16px 0 34px rgba(20, 27, 66, 0.12);
  }
  .topbar {
    z-index: 10;
  }

  .sidebar .brand {
    min-height: 44px;
    padding: 0 0 22px;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .sidebar .brand-logo {
    width: 95px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease;
  }
  .sidebar .brand::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff url("../img/isologo-blue.svg") center/28px 28px no-repeat;
  }
  .sidebar.is-pinned .brand {
    justify-content: flex-start;
    padding-left: 12px;
  }
  .sidebar.is-pinned .brand::before {
    display: none;
  }
  .sidebar.is-pinned .brand-logo {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
  }

  .sidebar .nav {
    padding-right: 0;
    margin-right: 0;
    overflow-x: hidden;
  }
  .sidebar .nav-item {
    min-width: 54px;
    justify-content: flex-start;
    gap: 0;
    padding-left: 18px;
    padding-right: 0;
    white-space: nowrap;
  }
  .sidebar .nav-item > i {
    flex: none;
    width: 17px;
    height: 17px;
    min-width: 17px;
    margin: 0;
  }
  .sidebar .nav-item > span:not(.nav-badge),
  .sidebar .nav-badge,
  .sidebar .nav-section {
    opacity: 0;
    width: 0;
    max-width: 0;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .sidebar.is-pinned .nav-item {
    min-width: 0;
    justify-content: flex-start;
    gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sidebar.is-pinned .nav-item > span:not(.nav-badge) {
    opacity: 1;
    width: auto;
    max-width: 190px;
    overflow: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease 0.2s;
  }

  .sidebar.is-pinned .nav-badge {
    opacity: 1;
    width: auto;
    max-width: none;
    min-width: 19px;
    margin-left: auto;
    padding-left: 6px;
    padding-right: 6px;
    overflow: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease 0.2s;
  }
  .sidebar:hover .nav-section {
    opacity: 1;
    width: auto;
    max-width: none;
    margin: 12px 0 4px;
    padding: 0 12px;
    overflow: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease 0.3s;
    height: auto;
    line-height: normal;
  }

  .sidebar.is-pinned .sidebar-scroll-hint {
    left: 50%;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 5px 8px;
    gap: 5px;
  }

  .sidebar.has-nav-overflow:not(.nav-at-end) .sidebar-scroll-hint {
    opacity: 0.72;
    transform: translateX(-50%);
  }
  .sidebar:hover .sidebar-scroll-hint {
    left: 50%;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 5px 8px;
    gap: 5px;
    transition:
      left 0.1s ease 0.3s,
      opacity 0.18s ease 0.3s,
      transform 0.18s ease 0.3s;
  }
  .sidebar.is-pinned .sidebar-scroll-hint > span:last-child {
    display: inline;
  }
  .sidebar.has-nav-overflow:not(.nav-at-end):hover .sidebar-scroll-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(-1px);
  }

  /* --------------------------------------------------------------------------
   Migrated source: responsiveSidebarCollapseRefinementV323
   -------------------------------------------------------------------------- */
  /* Sidebar laptop · refinamiento conservado: tamaño de íconos y safe-area inferior. */

  /* Lucide reemplaza <i> por <svg>; fijamos ambos para evitar que algunos
     íconos de navegación cambien de tamaño en estado colapsado. */
  .sidebar .nav-item > svg,
  .sidebar .nav-item > i {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    flex: 0 0 17px !important;
    margin: 0 !important;
  }

  /* Reservamos una zona real al final del scroll para que el último ícono
     nunca quede debajo de la flecha de "Deslizá para ver más". */
  .sidebar .nav {
    padding-bottom: 58px !important;
  }
  .sidebar .sidebar-scroll-hint {
    z-index: 80;
    bottom: 9px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 12px rgba(31, 45, 101, 0.12);
  }

  /* --------------------------------------------------------------------------
   Migrated source: responsiveSidebarHideNavSectionsLaptopV327
   -------------------------------------------------------------------------- */

  /* Sidebar laptop (colapsado y expandido): sin rótulos de sección ni espacio reservado.
   Desktop full conserva los nav-section originales. */

  .sidebar .nav-section,
  .sidebar:hover .nav-section {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }
  .sidebar .nav-section + .nav-item,
  .sidebar:hover .nav-section + .nav-item {
    margin-top: 0 !important;
  }
}

@media (max-width: 1360px) {
  #view-vacations #vacation-panel-mis-solicitudes .table-scroll {
    overflow-x: auto;
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table {
    min-width: 680px;
    table-layout: fixed;
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table th,
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table td {
    padding: 9px 7px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    th:nth-child(6),
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    td:nth-child(6),
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    col.vacation-update-column {
    display: none;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-date-column,
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    th:nth-child(-n + 3),
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    td:nth-child(-n + 3) {
    width: 108px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-days-column {
    width: 68px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-status-column {
    width: 128px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-action-column {
    width: 96px;
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table th {
    font-size: var(--font-size-2xs);
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table td {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 1250px) {
  #view-home .home-direct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #view-home .home-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1160px) {
  #view-ddp .ddp-competencies-card {
    position: static;
  }
  #view-ddp .ddp-competencies-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  #view-ddp .ddp-competencies-card > .section-head,
  #view-ddp .ddp-level-reference {
    grid-column: 1 / -1;
  }
  #view-ddp .ddp-competency-section + .ddp-competency-section {
    margin-top: 0;
  }

  .directory-grid,
  .admin-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  #view-objectives .objectives-quarter-objective .table-scroll {
    overflow: auto;
  }
  #view-objectives .objectives-quarter-table {
    min-width: 1180px;
  }
  #view-objectives .objectives-quarter-table thead th {
    top: calc(
      var(--objective-sticky-top, 63px) + var(--objective-head-height, 88px)
    );
  }

  #view-objectives .objective-sheet-head {
    top: var(--objective-sticky-top, 63px);
  }
  #view-objectives .objectives-side-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .objectives-admin-metrics,
  .objectives-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1060px) {
  /* [AGRUPADO-166] Estilos 100% idénticos agrupados. Origen: líneas 996, 996, 996, 996, 996. */
  #view-performance .performance-overview,
  .performance-history-layout,
  .catalog-grid,
  .client-directory-grid,
  .report-metrics,
  #view-crm .crm-metrics,
  .procedures-layout {
    grid-template-columns: 1fr;
  }
  .radar-shell {
    justify-content: start;
  }
  .procedures-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1050px) {
  #view-policies .policies-home-layout {
    grid-template-columns: 1fr;
  }
  #view-policies .policies-side-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #view-about .about-layout,
  #view-about .about-value-slide {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table {
    min-width: 610px;
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table th,
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table td {
    padding: 8px 5px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-date-column,
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    th:nth-child(-n + 3),
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    td:nth-child(-n + 3) {
    width: 96px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-days-column {
    width: 62px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-status-column {
    width: 120px;
  }
  #view-vacations
    #vacation-panel-mis-solicitudes
    .vacation-requests-table
    .vacation-action-column {
    width: 88px;
  }
  #view-vacations #vacation-panel-mis-solicitudes .badge {
    padding: 4px 6px;
    font-size: var(--font-size-2xs);
  }

  #view-about .about-value-copy {
    padding-left: 38px;
    padding-right: 38px;
  }
  #view-about .about-value-visual > i {
    width: 220px;
    height: 220px;
    border-width: 48px;
  }

  .profile-top-copy,
  .profile-top-trigger > svg {
    display: none !important;
  }
  .profile-top-trigger {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    height: 38px;
    padding: 3px;
    justify-content: center;
    border: 0 !important;
    border-radius: 10px;
  }
  .profile-top-trigger .avatar {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 980px) {
  /* [AGRUPADO-115] Estilos 100% idénticos agrupados. Origen: líneas 732, 1567, 4442, 4665, 5453. */
  #view-procedures .procedure-detail-layout,
  #view-objectives .objectives-q-summary,
  .aside-layout {
    grid-template-columns: 1fr;
  }
  /* [AGRUPADO-116] Estilos 100% idénticos agrupados. Origen: líneas 733, 1568, 4443, 5454. */
  #view-procedures .procedure-side-nav,
  .document-aside {
    position: relative;
    top: auto;
    max-height: none;
  }
  /* [AGRUPADO-117] Estilos 100% idénticos agrupados. Origen: líneas 734, 1569, 4444, 4445, 5455. */
  #view-procedures .procedure-document-list,
  #view-procedures .procedure-section-links,
  .section-button {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-hours .timesheet-summary {
    align-items: flex-start;
  }
  #view-hours .timesheet-summary-controls {
    justify-content: flex-start;
  }

  #view-transport .transport-planning-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  #view-objectives .objective-sheet-metrics {
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  #view-objectives .objectives-period-card {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-objectives .objectives-period-controls {
    justify-content: flex-start;
    width: 100%;
  }
  #view-objectives .objectives-quarter-intro,
  #view-objectives .objective-sheet-head {
    flex-direction: column;
  }
  #view-objectives .objectives-quarter-intro .secondary-btn {
    width: 100%;
  }

  #view-objectives .objective-weight-box,
  #view-objectives .objective-sheet-metrics .objective-weight-box,
  #view-objectives .objective-sheet-metrics .objective-contribution-box {
    text-align: left;
  }

  #view-objectives .objectives-review-submit {
    width: 100%;
    justify-content: center;
  }

  #view-objectives .objectives-review-submit {
    width: 100%;
    min-width: 0;
  }
  #view-transport .transport-map-canvas {
    min-height: 390px;
  }
  #view-home .home-dashboard,
  #view-home .home-notification-list {
    grid-template-columns: 1fr;
  }
  #view-home .home-full,
  #view-home .home-content-grid {
    grid-column: auto;
  }
  #view-home .home-birthday {
    min-height: 200px;
  }
}

@media (max-width: 920px) {
  #view-hours .hours-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
    .yellow-banner {
    grid-template-columns: 40px minmax(0, 1fr);
  }

}

@media (max-width: 900px) {
  #directoryPersonModal .directory-profile-modal,
  #view-directory-profile .directory-profile-modal {
    width: min(720px, calc(100vw - 28px));
    height: min(860px, calc(100vh - 28px));
    max-height: calc(100vh - 28px);
    grid-template-columns: 1fr;
  }
  #directoryPersonModal .directory-profile-sidebar,
  #view-directory-profile .directory-profile-sidebar {
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  #directoryPersonModal .directory-profile-sidebar-top,
  #view-directory-profile .directory-profile-sidebar-top {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
  }
  #directoryPersonModal .directory-profile-photo,
  #view-directory-profile .directory-profile-photo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    grid-row: 1 / 3;
    margin: 0;
  }
  #directoryPersonModal .directory-profile-demo-note,
  #view-directory-profile .directory-profile-demo-note {
    grid-column: 1 / -1;
    margin-top: 13px;
  }
  #directoryPersonModal .directory-profile-nav,
  #view-directory-profile .directory-profile-nav {
    display: flex;
    flex-direction: row;
    overflow: auto;
    padding: 9px 12px;
    gap: 5px;
    border-top: 1px solid var(--line);
  }
  #directoryPersonModal .directory-profile-nav button,
  #view-directory-profile .directory-profile-nav button {
    width: auto;
    min-width: max-content;
    padding: 0 9px;
  }
  #directoryPersonModal .directory-profile-content,
  #view-directory-profile .directory-profile-content {
    overflow: auto;
  }

  #view-directory-profile .directory-profile-modal {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 17px;
    overflow: hidden;
  }
  #view-directory-profile .directory-profile-sidebar {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    overflow: visible;
  }
  #view-directory-profile .directory-profile-content-head {
    position: static;
  }
  #view-directory-profile .directory-profile-section {
    min-height: 0;
  }

  .version {
    display: none;
  }
  #view-directory-profile .directory-profile-modal::before,
  .profile-top-copy > span,
  #view-documentation .documentation-document-meta,
  #view-documentation .documentation-visibility-slot {
    display: none;
  }
  #view-directory-profile .directory-profile-sidebar {
    background: #f7f8fd;
    border-bottom: 1px solid var(--line);
  }

  /* v3.52 — Vacaciones: acción para períodos en curso */

  #view-directory-profile .directory-profile-sidebar {
    position: static;
    height: auto;
    max-height: none;
    align-self: auto;
  }

  .profile-top-trigger {
    min-height: 38px;
  }

  #view-directory-profile .directory-profile-sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
  }

  #view-absences .absence-summary-grid,
  #view-documentation-assistant .documentation-assistant-layout,
  .request-review-grid,
  #view-home .home-launch-grid {
    grid-template-columns: 1fr;
  }
  #view-documentation-assistant .documentation-assistant-workspace {
    min-height: 610px;
  }

  #view-vacation-balance-detail .vacation-balance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-documentation {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
  }

  .card-documentation .primary-btn {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
  .card-documentation {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  #view-about .identity-hero {
    min-height: 540px;
    padding: 28px;
  }
  #view-about .identity-claim-join {
    width: 100%;
    justify-content: center;
  }
  #view-about .identity-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  #view-about .identity-asset-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-about .identity-toolbar-actions {
    justify-content: flex-start;
  }
  #view-about .identity-rules-quickview,
  #view-about .identity-iso-preview,
  #view-about .identity-font-grid,
  #view-about .identity-graphics-lab {
    grid-template-columns: 1fr;
  }
  #view-about .identity-iso-stage {
    min-height: 260px;
    border-right: 0;
    border-bottom: 1px solid #292929;
  }
  #view-about .identity-iso-scales {
    min-height: 170px;
  }
  #view-about .identity-font-card {
    border-right: 0;
    border-bottom: 1px solid #292929;
  }
  #view-about .identity-font-card:last-child {
    border-bottom: 0;
  }
  #view-about .identity-graphics-controls {
    border-right: 0;
    border-bottom: 1px solid #d6d6d6;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  #view-about .identity-graphics-controls span {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  #view-about .identity-graphics-controls i {
    grid-row: auto;
  }
  #view-about .identity-graphics-controls small,
  #view-about .cap {
    display: none;
  }
  #view-about .identity-app-slide {
    min-height: 500px;
  }
  #view-about .identity-app-slide .app-art {
    min-height: 440px;
  }
  #view-about .social-frame {
    width: 41%;
  }
  #view-about .badge {
    width: 205px;
    height: 320px;
  }
  #view-about .shirt {
    width: 285px;
    height: 340px;
  }
  #view-about .tote {
    width: 190px;
    height: 250px;
  }
  #view-about .box {
    width: 210px;
    height: 290px;
  }
  #view-about .box-c {
    width: 140px;
    height: 220px;
  }
  #view-vacations .vacation-administration-filter-card,
  #view-transport .request-team-head,
  #view-reimbursements .request-team-head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* [AGRUPADO-570] Estilos 100% idénticos agrupados. Origen: líneas 7740, 8220. */
  #view-vacations .vacation-administration-range-fields,
  .request-team-head-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 860px) {
  #view-vacations .day.holiday::after {
    font-size: var(--font-size-2xs);
    margin-top: 10px;
  }

  #view-vacations .calendar {
    gap: 7px;
  }
  #view-vacations .weekday {
    font-size: var(--font-size-sm);
  }
  #view-vacations .day {
    min-height: 82px;
    padding: 9px;
  }
  #view-vacations .day .num {
    font-size: var(--font-size-base);
  }
  #view-vacations .event {
    font-size: var(--font-size-sm);
    padding: 4px 5px;
    margin-top: 8px;
  }

  #view-vacations .vacation-balance-hero h2 {
    font-size: 24px;
  }

  .profile-top-trigger {
    width: 38px;
    min-height: 38px;
    justify-content: center;
    padding: 3px;
    border-radius: 10px;
  }
  .profile-top-trigger .avatar {
    width: 30px;
    height: 30px;
  }
  .profile-dropdown {
    right: 0;
    width: 222px;
  }

  .sidebar .nav {
    padding-bottom: 28px;
  }
  .sidebar-scroll-hint {
    bottom: 12px;
  }

  #view-performance .performance-history-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  #view-performance .performance-history-select {
    width: 100%;
  }

  .modal-evaluation,
  .performance-ddp-modal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
  }

  .performance-ddp-modal-functions ol {
    max-height: none;
  }

  #view-procedures .procedure-document-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  #view-procedures .procedure-document-row .ghost-btn {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  #view-procedures .procedure-document-row {
    min-height: 82px;
    align-items: center;
  }
  #view-procedures .procedure-document-row p {
    font-size: var(--font-size-md);
  }

  .modal-evaluation .modal-head {
    padding: 18px 18px 13px;
  }
  .modal-evaluation #evaluationForm {
    padding: 14px 18px 18px;
    grid-template-columns: 1fr;
    grid-template-areas: "legend" "reference" "rows" "comment" "feedback" "actions";
  }

  .modal-evaluation .evaluation-reference,
  .modal-evaluation .evaluation-feedback-state {
    min-height: auto !important;
  }

  .modal-evaluation .evaluation-reference {
    min-height: 0 !important;
  }

  /* Safari iOS hace zoom al enfocar controles con tipografía menor a 16px. */
  @supports (-webkit-touch-callout: none) {
    input,
    select,
    textarea {
      font-size: var(--font-size-2xl) !important;
    }
  }

  .app {
    display: block;
    grid-template-columns: 1fr !important;
  }
  #view-objectives .objectives-q3-save-bar {
    left: 18px;
    right: 18px;
    bottom: 14px;
  }
  .modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  .modal-backdrop.open {
    display: flex !important;
  }
  .modal-backdrop > .modal {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #crumbExtra {
    display: none !important;
  }
  #view-absences .absence-team-head {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-absences .absence-team-head-actions {
    align-items: flex-start;
    width: 100%;
  }
  #view-absences .absence-team-summary {
    justify-content: flex-start;
  }
  .request-team-head {
    flex-direction: column;
  }
  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-105%);
    transition: var(--transition-layout);
    box-shadow: 16px 0 35px rgba(20, 27, 66, 0.13);
    width: 270px;
  }
  .sidebar.open {
    transform: none;
  }
  .mobile-menu {
    display: grid;
  }
  .topbar {
    padding: 0 18px;
  }
  .content {
    padding: 24px 18px 36px;
  }
  .search-top,
  .profile-mini,
  .hero-meta,
  .profile-top-copy,
  .profile-top-trigger > i,
  #view-procedures .procedure-document-meta {
    display: none;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 20px;
  }
  .balance-grid,
  .directory-grid,
  .side-stack,
  .stat-grid,
  .asset-list,
  .ddp-content,
  .form-grid,
  #view-vacations .ooo-layout,
  #view-performance .performance-cycle-directory,
  #view-performance .performance-history-summary,
  #view-performance .evaluation-rows,
  .performance-ddp-modal-content,
  .modal-evaluation .evaluation-rows,
  #absenceTeamReviewModal .absence-team-review-grid {
    grid-template-columns: 1fr;
  }
  .calendar {
    min-width: 510px;
  }
  .calendar-shell {
    overflow: auto;
  }
  .notif-panel {
    right: 14px;
    left: 14px;
    width: auto;
    top: 63px;
  }
  .modal {
    padding: 18px;
  }
  .field.full {
    grid-column: auto;
  }
  .modal-backdrop > .modal {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }

  /* Todo bloque directo debe poder contraerse al ancho real del viewport. */
  .modal-backdrop > .modal > *,
  .modal-backdrop > .modal .modal-head,
  .modal-backdrop > .modal .form-grid,
  .modal-backdrop > .modal .field {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Controles de formulario: nunca fuerzan un ancho mayor al modal. */
  /* [REVISAR-002] SIMILARES, NO AGRUPADOS. A: ".modal-backdrop > .modal input,
    .modal-backdrop > .modal select,
    .modal-backdrop > .modal textarea,
    .modal-backdrop > .modal .app-date-control,
    .modal-backdrop > .modal .date-input-control,
    .modal-backdrop > .modal .currency-input-control" (línea 6754); B: ".modal-backdrop > .modal .table-scroll,
    .modal-backdrop > .modal .timesheet-scroll,
    .modal-backdrop > .modal .procedure-reading" (línea 6820). Comparten 4/6 estilos con el mismo valor. Diferencias: -webkit-overflow-scrolling: A=— / B=touch; overflow-x: A=— / B=auto !important. */
  .modal-backdrop > .modal input,
  .modal-backdrop > .modal select,
  .modal-backdrop > .modal textarea,
  .modal-backdrop > .modal .app-date-control,
  .modal-backdrop > .modal .date-input-control,
  .modal-backdrop > .modal .currency-input-control {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grillas de detalle/formulario pasan a una sola columna en mobile. */
  .modal-backdrop > .modal .form-grid,
  .modal-backdrop > .modal .vacation-detail-grid,
  .modal-backdrop > .modal .vacation-detail-status,
  .modal-backdrop > .modal .vacation-detail-date-flow,
  .modal-backdrop > .modal .vacation-request-date-flow,
  .modal-backdrop > .modal .directory-person-detail-grid,
  .modal-backdrop > .modal .org-person-detail-grid,
  .modal-backdrop > .modal .asset-detail-grid,
  .modal-backdrop > .modal .transport-policy-options,
  .modal-backdrop > .modal .ddp-meta-grid,
  .modal-backdrop > .modal .ddp-requirement-grid,
  .modal-backdrop > .modal .ddp-experience-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal-backdrop > .modal .field.full,
  .modal-backdrop > .modal .vacation-detail-grid > .full,
  .modal-backdrop > .modal .directory-person-detail-grid > .full,
  .modal-backdrop > .modal .org-person-detail-grid > .full {
    grid-column: auto !important;
  }

  /* Filas flexibles no deben empujar contenido fuera de pantalla. */
  .modal-backdrop > .modal .modal-actions,
  .modal-backdrop > .modal .evaluation-row,
  .modal-backdrop > .modal .procedure-attachment,
  .modal-backdrop > .modal .team-vacation-summary-status,
  .modal-backdrop > .modal .vacation-submit-confirmation {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  /* Textos largos pueden cortar línea sin ensanchar el lightbox. */
  .modal-backdrop > .modal p,
  .modal-backdrop > .modal span,
  .modal-backdrop > .modal strong,
  .modal-backdrop > .modal small,
  .modal-backdrop > .modal label,
  .modal-backdrop > .modal a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Medios y previews contenidos dentro del viewport. */
  .modal-backdrop > .modal img,
  .modal-backdrop > .modal video,
  .modal-backdrop > .modal canvas,
  .modal-backdrop > .modal svg {
    max-width: 100%;
  }

  /* Cuando exista una tabla o bloque deliberadamente ancho, scrollea adentro y no el modal entero. */
  .modal-backdrop > .modal .table-scroll,
  .modal-backdrop > .modal .timesheet-scroll,
  .modal-backdrop > .modal .procedure-reading {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 800px) {
  #view-about .about-layout {
    grid-template-columns: 1fr;
  }
  #view-support .support-summary-grid {
    grid-template-columns: 1fr;
  }
  #view-support .support-ticket-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  #view-support .support-ticket-updated {
    display: none;
  }
  #view-about .about-section-nav {
    position: static;
    overflow: visible;
  }
  /* [AGRUPADO-622] Estilos 100% idénticos agrupados. Origen: líneas 8478, 8481. */
  #view-about .about-section-nav-head,
  #view-about .about-section-link > small {
    display: none;
  }
  #view-about .about-section-nav nav {
    display: flex;
    gap: 6px;
    overflow: auto;
    padding: 7px;
  }
  #view-about .about-section-link {
    min-width: max-content;
    width: auto;
    grid-template-columns: 20px auto auto;
    padding: 0 11px;
  }

  #view-about .about-values-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  #view-about .about-value-slide {
    grid-template-columns: 1fr;
    align-content: stretch;
  }
  #view-about .about-value-visual {
    position: absolute;
    inset: 0;
    border-right: 0;
    min-height: 0;
    opacity: 0.55;
  }
  #view-about .about-value-visual > i {
    left: 14%;
    top: 45%;
    width: 260px;
    height: 260px;
  }
  #view-about .about-value-copy {
    padding: 48px 30px 100px;
    justify-content: flex-end;
    min-height: 510px;
  }
  #view-about .about-value-copy h3 {
    font-size: clamp(44px, 12vw, 74px);
  }
  /* [AGRUPADO-623] Estilos 100% idénticos agrupados. Origen: líneas 8488, 8489. */
  #view-about .about-values-carousel,
  #view-about .about-value-slides {
    min-height: 510px;
  }
}

@media (max-width: 780px) {
  .login-screen {
    padding: 14px;
  }
  .login-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .login-brand-panel {
    min-height: 220px;
    padding: 28px;
  }
  .login-brand-copy h1 {
    font-size: 25px;
  }
  .login-brand-footer {
    display: none;
  }
  .login-form-panel {
    padding: 32px 28px;
  }
}

@media (max-width: 760px) {
  #view-performance .performance-overview,
  #view-directory-profile .directory-leave-overview,
  #view-objectives .objectives-side-stack,
  .objective-detail-grid,
  .objective-subsection-grid,
  .objectives-admin-metrics,
  .objectives-metrics-grid,
  #vacationBalanceDetailModal .vacation-balance-adjustment-fields,
  #vacationBalanceAdjustmentModal .vacation-balance-adjustment-fields {
    grid-template-columns: 1fr;
  }
  #view-performance .performance-guidance-list {
    gap: 5px;
  }
  #view-performance .performance-select-filter {
    flex: 1;
    min-width: 160px;
  }

  #view-directory-profile .directory-leave-item,
  #vacationBalanceDetailModal .vacation-balance-person-summary,
  #vacationBalanceAdjustmentModal .vacation-balance-adjustment-person {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #view-directory-profile .directory-leave-item > .badge {
    margin-left: 42px;
  }

  #view-objectives .objectives-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }
  #view-objectives .objectives-score-card,
  .objectives-card-head .secondary-btn,
  .heading-actions .primary-btn {
    width: 100%;
  }

  .objectives-card-head,
  #view-assets .asset-ticket-head {
    flex-direction: column;
  }
  #view-about .identity-animated-claim {
    font-size: clamp(46px, 6.3vw, 82px);
  }
  #view-about .identity-icon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  #view-about .identity-icon-grid > div:nth-child(4n),
  #view-about .identity-icon-grid > div:nth-child(8n) {
    border-right: 0;
  }
  #view-about .identity-icon-grid>div:nth-child(n/**/+9) {
    border-bottom: 1px solid #e2e2e2;
  }
  #view-about .identity-icon-grid>div:nth-child(n/**/+13) {
    border-bottom: 0;
  }
  #view-about .identity-resource-descriptions {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-grid,
  .dashboard-lower,
  .page-grid,
  .ddp-content,
  #view-ddp .ddp-content,
  #view-objectives .objectives-layout,
  .objectives-admin-layout {
    grid-template-columns: 1fr;
  }
  .quick-card {
    min-height: 0;
  }
  .hero {
    min-height: 205px;
  }
  .stat-grid {
    grid-column: auto;
  }
  .side-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #vacationBalanceDetailModal .vacation-balance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .documentation-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .onboarding-readable .onboarding-matrix,
  .onboarding-readable .onboarding-matrix tbody,
  .onboarding-readable .onboarding-matrix tr,
  .onboarding-readable .onboarding-matrix th,
  .onboarding-readable .onboarding-matrix td {
    display: block;
    width: 100%;
  }
  .onboarding-readable .onboarding-matrix tr + tr {
    border-top: 1px solid var(--line);
  }
  .onboarding-readable .onboarding-matrix th {
    padding: 11px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .onboarding-readable .onboarding-matrix td {
    padding: 12px 14px 14px;
  }
  .onboarding-readable .onboarding-phase-title {
    padding: 13px 14px !important;
  }
  .onboarding-readable .onboarding-closure {
    padding: 14px;
  }
  #view-transport .request-row-actions,
  #view-reimbursements .request-row-actions {
    gap: 7px;
  }
  #view-assets .asset-ticket-head .asset-heading-actions,
  #view-vacations .vacation-request-head-actions,
  .heading-actions,
  #view-vacations .request-list-filters,
  #view-absences .request-list-filters,
  #view-assets .request-list-filters,
  #view-vacations .vacation-team-summary,
  #view-vacations #vacation-panel-mi-equipo .vacation-team-head-actions,
  #view-vacations
    #vacation-panel-mi-equipo
    .vacation-team-head-actions
    .request-list-filters {
    width: 100%;
    justify-content: flex-start;
  }
  #view-assets .asset-ticket-head .asset-heading-actions .primary-btn,
  #view-assets .asset-ticket-head .asset-heading-actions .secondary-btn {
    flex: 1;
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table {
    min-width: 570px;
  }
  #view-vacations .timeline-intro {
    align-items: flex-start;
    padding: 11px 12px;
  }
  #view-vacations .timeline-hint {
    white-space: normal;
    border-radius: 9px;
    padding: 6px 8px;
  }
  #view-vacations .vacation-timeline {
    grid-template-columns: 190px repeat(3, minmax(220px, 1fr));
    min-width: 850px;
  }
  #view-vacations .timeline-name {
    padding: 8px 10px;
  }
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table th,
  #view-vacations #vacation-panel-mis-solicitudes .vacation-requests-table td {
    padding: 7px 4px;
  }
  #view-absences #absence-panel-requests > .section-head,
  #view-assets .asset-ticket-head,
  #view-vacations .vacation-team-head,
  #vacationBalanceDetailModal .vacation-balance-adjustment-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-vacations .vacation-team-head-actions {
    align-items: flex-start;
    width: 100%;
    min-width: 0;
  }
  #view-vacations .vacation-team-head-actions .request-list-filters,
  #view-vacations .vacation-team-summary {
    justify-content: flex-start;
  }
  #teamVacationReviewModal {
    padding: 10px;
  }
  #teamVacationReviewModal .team-vacation-review-modal {
    max-height: calc(100vh - 20px);
    padding: 18px;
  }
  #teamVacationReviewModal .team-vacation-review-layout {
    grid-template-columns: 1fr;
  }
  #teamVacationReviewModal .team-vacation-review-person {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #teamVacationReviewModal .team-vacation-review-person > .badge {
    margin-left: 49px;
  }
}

@media (max-width: 740px) {
  /* [AGRUPADO-134] Estilos 100% idénticos agrupados. Origen: líneas 809, 2119. */
  #view-policies .policies-home-hero {
    padding: 22px;
    flex-direction: column;
    align-items: flex-start;
  }
  /* [AGRUPADO-135] Estilos 100% idénticos agrupados. Origen: líneas 810, 999, 2120. */
  #view-policies .policies-home-meta,
  .procedures-hero-badge {
    width: auto;
  }
  #view-policies .policy-home-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #view-policies .policy-search {
    max-width: none;
  }
  /* [AGRUPADO-136] Estilos 100% idénticos agrupados. Origen: líneas 813, 814, 999, 999, 2121. */
  #view-policies .policies-grid,
  #view-policies .policies-side-column,
  .procedures-grid,
  .procedures-side,
  #view-documentation .documentation-grid {
    grid-template-columns: 1fr;
  }

  .timesheet-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .timesheet-key {
    justify-content: flex-start;
  }
  .hours-panel-head {
    flex-direction: column;
  }
  .bar-report > div {
    grid-template-columns: 1fr auto;
  }
  .bar-report i {
    grid-column: 1/-1;
  }
  .crm-kanban {
    grid-template-columns: repeat(5, 260px);
  }
  .procedures-hero {
    align-items: flex-start !important;
    flex-direction: column;
  }

  #view-ddp .ddp-page-heading {
    align-items: stretch;
  }
  #view-ddp .ddp-area-filter-wrap {
    width: 100%;
    min-width: 0;
  }

  #view-documentation .documentation-assistant-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  #view-documentation .documentation-assistant-card .secondary-btn {
    grid-column: 1/-1;
    width: 100%;
  }
  .documentation-assistant-launcher {
    right: 12px;
    bottom: 12px;
  }
  .documentation-assistant-launcher span {
    display: none;
  }
  .documentation-assistant-launcher {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .documentation-assistant-modal {
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }
  .documentation-assistant-modal .modal-head {
    padding: 16px 15px 14px;
  }
  .documentation-assistant-chat-context {
    margin: 11px 14px 0;
  }
  .documentation-assistant-chat-body {
    padding: 12px 14px 0;
  }
  .documentation-assistant-input {
    grid-template-columns: 1fr;
    padding: 11px 14px 14px;
  }
  .documentation-assistant-input .primary-btn {
    width: 100%;
  }
  .documentation-assistant-message {
    max-width: 92%;
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 720px) {
  /* [AGRUPADO-174] Estilos 100% idénticos agrupados. Origen: líneas 1113, 1169. */
  #view-vacations .calendar-team-summary,
  #view-vacations .calendar-top {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-vacations .ooo-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  /* [AGRUPADO-175] Estilos 100% idénticos agrupados. Origen: líneas 1115, 5742. */
  #view-transport .request-list-filters,
  #view-reimbursements .request-list-filters {
    width: 100%;
    justify-content: flex-start;
  }
  /* [AGRUPADO-176] Estilos 100% idénticos agrupados. Origen: líneas 1116, 1688, 1689. */
  #view-vacations .ooo-message-actions .secondary-btn,
  #view-hours .hours-heading-actions > .secondary-btn,
  #view-hours .hours-heading-actions > .primary-btn,
  #view-hours .hours-copy-dropdown {
    flex: 1;
  }

  #view-vacations .calendar-top-actions {
    width: 100%;
    justify-content: space-between;
  }
  #view-vacations .calendar-view-toggle {
    overflow: auto;
    max-width: calc(100% - 74px);
  }
  #view-vacations .timeline-intro {
    flex-direction: column;
  }
  /* [AGRUPADO-187] Estilos 100% idénticos agrupados. Origen: líneas 1173, 2074, 2444. */
  .vacation-detail-status,
  .directory-person-detail-grid,
  .crm-detail-grid {
    grid-template-columns: 1fr;
  }
  .vacation-detail-status > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .vacation-detail-status > div:last-child {
    border-bottom: 0;
  }

  #view-hours .hours-heading-actions {
    justify-content: flex-start;
  }

  #view-hours .hours-copy-trigger,
  #view-directory .directory-area-filter select {
    width: 100%;
  }
  #view-hours .hours-copy-menu {
    left: 0;
    right: auto;
    width: min(100%, 300px);
  }

  #view-directory .directory-area-filter {
    flex: 1 1 180px;
  }

  #view-directory .directory-area-group-header {
    margin-bottom: 7px;
  }
  #view-directory .directory-area-group-header h2 {
    font-size: var(--font-size-base);
  }
  #view-directory .directory-grid.is-list-view .directory-person-card {
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 10px;
  }
  #view-directory .directory-grid.is-list-view h3 {
    grid-column: 2;
    grid-row: 1;
  }
  #view-directory .directory-grid.is-list-view .person-role {
    grid-column: 2;
    grid-row: 2;
  }
  #view-directory .directory-grid.is-list-view .person-meta {
    grid-column: 2;
    grid-row: 3;
  }
  #view-directory .directory-grid.is-list-view .person-top .avatar {
    grid-column: 1;
    grid-row: 1 / 4;
  }
  #view-directory .directory-grid.is-list-view .directory-open-icon {
    grid-column: 3;
    grid-row: 1 / 4;
  }

  .directory-person-detail-grid > div.full,
  .crm-detail-grid > div.full {
    grid-column: auto;
  }

  #view-crm .crm-select-filter {
    flex: 1;
    min-width: 155px;
  }
}

@media (max-width: 700px) {
  #transportRequestModal .transport-route-address-grid,
  #transportRequestModal .transport-stepper.transport-stepper-three,
  #directoryLeaveDetailModal .directory-leave-detail-grid,
  .section-button,
  #view-about .identity-logo-previews,
  #view-about .identity-resource-descriptions {
    grid-template-columns: 1fr;
  }
  #transportRequestModal .transport-map-preview {
    min-height: 185px;
  }

  #transportRequestModal .transport-map-single {
    min-height: 205px;
  }

  #view-directory-profile .directory-leave-item > .badge {
    margin-left: 42px;
  }
  #view-directory-profile .directory-leave-detail-btn {
    margin-left: auto;
  }

  #directoryLeaveDetailModal .directory-leave-detail-field.full {
    grid-column: auto;
  }

  #view-about .identity-local-nav {
    top: 68px;
  }
  .objectives-privacy-note {
    width: 100%;
    align-items: flex-start;
  }
  #procedureModal .modal-procedure.is-rich-document {
    max-height: calc(100vh - 20px);
  }
  #procedureModal .modal-procedure.is-rich-document .modal-head {
    padding-right: 38px;
  }
  #procedureModal .modal-procedure.is-rich-document .procedure-reading {
    padding: 17px 16px;
  }
  #procedureModal .document-visibility-fixed {
    position: static;
    align-self: flex-start;
    margin: 0 0 12px 0;
  }
  .document-rich-content h3 {
    font-size: var(--font-size-2xl);
  }
  .document-rich-content p {
    font-size: var(--font-size-md);
  }
  .document-detail-hero {
    padding: 21px;
    flex-direction: column;
  }
  .document-detail-hero h2 {
    font-size: 21px;
  }

  .document-detail-assistant {
    margin: 0 18px 18px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .document-detail-assistant .primary-btn,
  #view-about .identity-toolbar-actions {
    width: 100%;
  }

  .badge-floating {
    position: static;
    margin: -5px 0 16px;
    width: max-content;
    max-width: 100%;
    right: 18px;
    top: 83px;
  }
  #view-about .identity-hero {
    min-height: 500px;
    padding: 24px 20px;
  }
  #view-about .identity-hero-logo {
    width: 115px;
  }
  #view-about .identity-hero-top > span,
  #view-about .identity-hero-footer {
    font-size: 7px;
  }
  #view-about .identity-animated-claim {
    font-size: clamp(45px, 15vw, 72px);
    gap: 10px;
    flex-direction: column;
  }
  #view-about .identity-claim-join {
    width: auto;
  }
  #view-about .identity-hero-copy {
    font-size: var(--font-size-lg);
  }
  #view-about .identity-hero-code {
    display: none !important;
  }
  #view-about .identity-section {
    padding-top: 68px;
  }
  #view-about .identity-section-head > div:first-child {
    padding-left: 38px;
  }
  #view-about .identity-section-head h2 {
    font-size: 36px;
  }
  #view-about .identity-logo-preview {
    min-height: 190px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
  }
  #view-about .identity-logo-preview:last-child {
    border-bottom: 0 !important;
  }
  #view-about .identity-color-grid,
  #view-about .identity-graphics-controls {
    grid-template-columns: 1fr 1fr;
  }
  #view-about .identity-color {
    min-height: 175px;
  }
  #view-about .identity-color:nth-child(3n) {
    border-right: 1px solid rgba(128, 128, 128, 0.22);
  }
  #view-about .identity-color:nth-child(2n),
  #view-about .identity-icon-grid > div:nth-child(2n) {
    border-right: 0;
  }
  #view-about .identity-color:nth-child(n/**/+4) {
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
  }
  #view-about .identity-color:nth-child(n/**/+5), #view-about .identity-icon-grid>div:nth-child(n/**/+15) {
    border-bottom: 0;
  }
  #view-about .identity-color-ratio {
    height: 48px;
  }
  #view-about .identity-color-ratio span {
    display: none;
  }
  #view-about .identity-type-tester,
  #view-about .identity-font-card {
    padding: 20px;
  }
  #view-about .identity-type-tester textarea {
    min-height: 90px;
    font-size: 38px;
  }
  #view-about .identity-type-controls {
    flex-wrap: wrap;
  }
  #view-about .identity-type-controls label {
    width: 100%;
    margin-bottom: 6px;
  }
  #view-about .identity-font-sample {
    font-size: 42px;
  }
  #view-about .identity-graphics-stage {
    min-height: 480px;
  }
  #view-about .graphic-base {
    padding: 28px;
  }
  #view-about .graphic-base span {
    font-size: 67px;
  }
  #view-about .graphic-type {
    font-size: 68px;
  }
  #view-about .identity-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #view-about .identity-icon-grid > div:nth-child(4n) {
    border-right: 1px solid #e2e2e2;
  }
  #view-about .identity-icon-grid>div:nth-child(n/**/+13) {
    border-bottom: 1px solid #e2e2e2;
  }
  #view-about .identity-app-slide {
    min-height: 450px;
  }
  #view-about .identity-app-slide .app-art {
    min-height: 390px;
  }
  #view-about .social-frame {
    width: 43%;
    padding: 18px;
  }
  #view-about .social-frame strong {
    font-size: 32px;
  }
  #view-about .screen-wall {
    width: 90%;
    height: 72%;
  }
  #view-about .screen-wall strong {
    margin-top: 40px;
    font-size: 46px;
  }
  #view-about .billboard {
    width: 90%;
    height: 64%;
  }
  #view-about .billboard span {
    font-size: 56px;
  }
  #view-about .billboard strong {
    font-size: 44px;
  }
  #view-about .identity-app-slide.badges .app-art {
    gap: 10px;
  }
  #view-about .badge {
    width: 155px;
    height: 260px;
    padding: 18px;
  }
  #view-about .badge strong {
    font-size: 24px;
  }
  #view-about .shirt {
    width: 235px;
    height: 300px;
  }
  #view-about .shirt span {
    font-size: 31px;
  }
  #view-about .tote {
    width: 145px;
    height: 210px;
    font-size: 31px;
  }
  #view-about .box {
    width: 145px;
    height: 240px;
    padding: 16px;
  }
  #view-about .box-c {
    width: 100px;
    height: 180px;
    font-size: 78px;
  }
  #view-about .box-a span,
  #view-about .box-b strong {
    font-size: 28px;
  }
  #view-about .identity-closing {
    min-height: 450px;
    padding: 30px 22px;
  }
  #view-about .identity-closing h2 {
    font-size: 53px;
  }
  #view-about .identity-closing-iso {
    width: 45px;
    right: 23px;
    bottom: 23px;
  }
}

@media (max-width: 680px) {
  #view-vacations .vacation-next-expiry-value {
    grid-column: 2;
    text-align: left;
  }
  #view-vacations .vacation-next-expiry-value strong {
    font-size: 19px;
  }
}

@media (max-width: 650px) {
  #vacationLiquidationReviewModal .vacation-liquidation-buckets {
    grid-template-columns: 1fr 1fr !important;
  }
  .objective-score-breakdown-head {
    align-items: flex-start;
  }
  .objective-score-total {
    font-size: var(--font-size-5xl);
  }
  #view-documentation .documentation-filter-group {
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .card-documentation {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 13px;
  }
  .card-documentation .primary-btn {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    margin-top: 3px;
  }
  .document-visibility-fixed {
    right: 12px;
    top: 12px;
    max-width: calc(100vw - 24px);
  }
  .card-documentation {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  #view-home .home-week-chip {
    position: relative;
    right: auto;
    top: auto;
    display: inline-block;
    text-align: left;
    margin-bottom: 18px;
  }
  #view-home .home-spotlight {
    padding: 22px;
  }
  #view-home .home-spotlight h2 {
    font-size: 23px;
  }
  #view-home .home-direct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-home .home-alert {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #view-home .home-alert .ghost-btn {
    grid-column: 2;
    justify-self: start;
    padding-left: 0;
  }
  #absenceTeamReviewModal .absence-team-review-actions,
  #requestTeamReviewModal .request-review-actions {
    flex-wrap: wrap;
  }
  #absenceTeamReviewModal .absence-team-observation-actions,
  #requestTeamReviewModal .request-observation-actions,
  #vacationLiquidationReviewModal .vacation-liquidation-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  #view-support .support-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-support .support-panel-actions {
    width: 100%;
    justify-content: space-between;
  }
  #view-vacation-balance-detail .vacation-balance-detail-heading-actions {
    width: 100%;
    justify-content: stretch;
  }
  #view-vacation-balance-detail
    .vacation-balance-detail-heading-actions
    button {
    flex: 1;
    justify-content: center;
  }
  #view-vacation-balance-detail .vacation-balance-person-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #view-vacation-balance-detail .vacation-balance-person-summary > .badge {
    margin-left: 58px;
  }
  #view-vacation-balance-detail .vacation-balance-summary-grid {
    grid-template-columns: 1fr;
  }
  #view-vacation-balance-detail .vacation-balance-history-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #view-transport .transport-planning-summary {
    justify-content: flex-start;
  }
  #view-transport .transport-map-canvas {
    min-height: 330px;
  }

  #vacationBalanceAdvanceModal .vacation-balance-adjustment-person {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #vacationBalanceAdvanceModal .vacation-balance-adjustment-period {
    margin-left: 53px;
  }

  #vacationBalanceAdvanceModal .vacation-balance-adjustment-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  #vacationBalanceAdvanceModal .vacation-balance-adjustment-actions button {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 640px) {
  #view-policy-transport .transport-policy-options,
  #view-hours .hours-template-grid,
  .org-person-detail-grid,
  #view-ddp .ddp-meta-grid,
  #view-ddp .ddp-requirement-grid,
  #view-ddp .ddp-experience-grid,
  #view-ddp .ddp-competencies-card,
  .request-detail-status,
  .request-detail-grid,
  #view-absences .absence-guide-grid,
  .absence-detail-status,
  .absence-detail-grid,
  #view-procedures .procedure-document-list,
  #view-procedures .procedure-section-links,
  #view-procedures .procedure-role-grid,
  #view-home .home-quick-grid {
    grid-template-columns: 1fr;
  }

  /* [AGRUPADO-143] Estilos 100% idénticos agrupados. Origen: líneas 833, 1579, 4455. */
  #view-procedures .procedure-questions {
    margin: 16px 18px 18px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  /* [AGRUPADO-144] Estilos 100% idénticos agrupados. Origen: líneas 834, 1580, 1809, 1983, 2234, 3928, 3931, 4456. */
  #view-hours .hours-preload-trigger,
  #view-org .org-search-status,
  #view-ddp .ddp-head .secondary-btn,
  .absence-hero-stat,
  #view-documentation-assistant
    .documentation-assistant-page-head
    .secondary-btn,
  #view-procedures .procedure-questions .primary-btn {
    width: 100%;
  }

  .policy-read-popup {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    padding: 12px;
    align-items: flex-start;
  }
  .policy-read-popup-action {
    padding: 0 8px;
  }
  .policy-read-popup-copy span {
    font-size: var(--font-size-2xs);
  }

  #view-hours .hours-preload-dropdown {
    flex: 1;
  }

  #view-hours .hours-preload-menu {
    left: 0;
    right: auto;
    width: min(100%, 330px);
  }

  #view-org .org-toolbar,
  #view-ddp .ddp-detail-tabs {
    align-items: stretch;
  }

  #view-org .org-html-card.is-expanded {
    inset: 0;
    border-radius: 0;
  }

  /* [AGRUPADO-266] Estilos 100% idénticos agrupados. Origen: líneas 1986, 2236, 3707, 3930. */
  .org-person-detail-grid > div.full,
  #view-ddp .ddp-competencies-card > .section-head,
  #view-ddp .ddp-level-reference,
  .request-detail-grid > div.full,
  .absence-detail-grid > div.full {
    grid-column: auto;
  }

  #view-ddp .ddp-step {
    flex-basis: 154px;
    min-height: 82px;
    padding: 10px;
  }
  #view-ddp .ddp-head,
  #view-documentation-assistant .documentation-assistant-page-head {
    flex-direction: column;
  }

  #view-ddp .ddp-competency-section + .ddp-competency-section {
    margin-top: 17px;
  }
  #view-ddp .ddp-experience-grid > div,
  #view-absences .absence-hero,
  #view-transport .transport-planning-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #view-ddp .ddp-current-position {
    padding-top: 28px;
  }
  #view-ddp .ddp-competency-section .competency {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  #view-ddp .ddp-competency-scale {
    justify-content: space-between;
    width: 100%;
  }

  #view-ddp .ddp-detail-tab,
  #view-directory-profile .directory-profile-header-actions button {
    flex: 1;
    justify-content: center;
  }

  #view-directory-profile .directory-profile-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .transport-map-preview {
    min-height: 108px;
  }

  #view-directory-profile .directory-record-card-head {
    flex-wrap: wrap;
  }
  #view-directory-profile .directory-record-delete-button {
    margin-left: auto;
  }

  #view-directory-profile .directory-profile-self-disclaimer {
    padding: 12px 14px;
  }
  #view-directory-profile .directory-record-timeline {
    padding-left: 24px;
  }
  #view-directory-profile .directory-record-timeline::before {
    left: 8px;
  }
  #view-directory-profile
    .directory-record-timeline
    .directory-record-card::after {
    left: -21px;
  }
  #view-directory-profile .directory-phone-editor {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  #view-directory-profile
    .directory-record-timeline
    .directory-record-card::after {
    left: -25px;
  }

  #view-directory-profile .directory-document-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #view-directory-profile .directory-document-link-field {
    width: 100%;
    padding-left: 47px;
  }
  #view-directory-profile .directory-document-link-editor {
    min-width: 0;
  }

  .request-row-actions {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    margin-top: 4px;
  }

  .request-detail-status > div,
  .absence-detail-status > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .request-detail-status > div:last-child,
  .absence-detail-status > div:last-child {
    border-bottom: 0;
  }

  #view-documentation-assistant .documentation-assistant-workspace {
    min-height: calc(100vh - 190px);
  }

  #view-directory-profile .directory-record-timeline {
    padding-left: 34px;
  }
  #view-directory-profile .directory-record-timeline::before {
    left: 12px;
  }
  #view-directory-profile .directory-record-timeline .directory-record-card {
    padding: 40px 13px 13px;
    margin-top: 38px !important;
  }
  #view-directory-profile
    .directory-record-timeline
    .directory-record-card[data-record-label]::before {
    left: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
    min-height: 30px;
    font-size: var(--font-size-sm);
  }
  #view-directory-profile
    .directory-record-timeline
    .directory-record-card::after {
    left: -29px;
    top: -9px;
  }
  #view-directory-profile
    .directory-record-timeline
    .directory-record-card-head {
    left: 12px;
    right: auto;
    top: 18px;
    max-width: calc(100% - 24px);
  }

  .policy-read-popup.is-visible ~ .documentation-assistant-launcher.is-visible {
    bottom: 142px;
  }

  #view-procedures .procedure-questions {
    margin-bottom: 132px !important;
  }
}

@media (max-width: 620px) {
  /* [AGRUPADO-202] Estilos 100% idénticos agrupados. Origen: líneas 1301, 3785. */
  #vacationModal .vacation-request-date-flow,
  .vacation-detail-date-flow,
  #absenceRequestModal .absence-request-date-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* [AGRUPADO-203] Estilos 100% idénticos agrupados. Origen: líneas 1302, 3786. */
  #vacationModal .request-date-arrow,
  .date-flow-arrow,
  #absenceRequestModal .absence-request-date-arrow {
    transform: rotate(90deg);
    justify-self: start;
    margin-left: 6px;
  }
  /* [AGRUPADO-204] Estilos 100% idénticos agrupados. Origen: líneas 1303, 1638, 2971, 2973, 3090, 3092, 8005, 8939. */
  .vacation-detail-meta-grid,
  .asset-security-options,
  #directoryPersonModal .directory-readonly-grid,
  #directoryPersonModal .directory-assets-grid,
  #view-directory-profile .directory-readonly-grid,
  #view-directory-profile .directory-assets-grid,
  #vacationBalanceAdvanceModal .vacation-balance-advance-fields,
  #vacationLiquidationReviewModal .vacation-liquidation-period,
  #vacationLiquidationReviewModal .vacation-liquidation-buckets {
    grid-template-columns: 1fr;
  }

  #view-assets .page-heading {
    align-items: flex-start;
  }
  #view-assets .asset-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
  #view-assets .asset-heading-actions .primary-btn,
  #view-assets .asset-heading-actions .secondary-btn,
  #view-hours .timesheet-period-control {
    flex: 1;
  }

  .hours-unsaved-actions > *,
  #view-hours .timesheet-period-picker,
  #directoryPersonModal .directory-profile-footer .secondary-btn,
  #view-directory-profile .directory-profile-footer .secondary-btn,
  #absenceTeamReviewModal .absence-team-observation-actions button,
  #requestTeamReviewModal .request-observation-actions button,
  #vacationLiquidationReviewModal .vacation-liquidation-actions button {
    width: 100%;
  }

  #directoryPersonModal .directory-profile-modal,
  #view-directory-profile .directory-profile-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  #directoryPersonModal .directory-profile-sidebar-top,
  #view-directory-profile .directory-profile-sidebar-top {
    padding: 13px 14px;
  }
  #directoryPersonModal .directory-profile-content-head,
  #view-directory-profile .directory-profile-content-head {
    padding: 16px 15px 14px;
  }
  #directoryPersonModal .directory-profile-content-head h2,
  #view-directory-profile .directory-profile-content-head h2 {
    font-size: var(--font-size-4xl);
  }
  #directoryPersonModal .directory-profile-section,
  #view-directory-profile .directory-profile-section {
    padding: 18px 15px;
  }

  #directoryPersonModal .directory-readonly-field.full,
  #view-directory-profile .directory-readonly-field.full,
  #vacationBalanceAdvanceModal .vacation-balance-advance-fields label.full {
    grid-column: auto;
  }

  #directoryPersonModal .directory-profile-footer,
  #view-directory-profile .directory-profile-footer {
    padding: 14px 15px;
  }

  #view-hours .timesheet-period-control {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  #view-hours .timesheet-period-control {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  #view-hours .timesheet-period-control {
    height: 50px !important;
    min-height: 50px !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 560px) {
  .asset-detail-grid,
  #view-performance .evaluation-rows,
  .performance-ddp-modal-content,
  #absenceTeamReviewModal .absence-team-review-meta-grid,
  .request-review-meta {
    grid-template-columns: 1fr;
  }

  .modal-evaluation,
  .performance-ddp-modal {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

  #view-performance .evaluation-legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  #view-procedures .procedure-document-row,
  #view-assets .asset-ticket-card {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }
  #view-procedures .procedure-document-row .ghost-btn {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    margin-top: 3px;
  }

  #view-vacations .vacation-administration-range-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #view-support .support-panel-head,
  .request-review-person {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-support .support-panel-head .primary-btn {
    width: 100%;
    justify-content: center;
  }
  #view-support .support-ticket-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
  }
  #view-support .support-ticket-row .badge {
    display: none;
  }
  #view-support .support-ticket-copy h3,
  #view-support .support-ticket-copy p {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #view-assets .asset-ticket-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  #view-assets .asset-ticket-card > .badge {
    grid-column: 2;
    justify-self: start;
  }
  #view-assets .asset-ticket-head .asset-heading-actions,
  .request-review-actions,
  .request-denial-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #view-assets .asset-ticket-head .asset-heading-actions .primary-btn,
  #view-assets .asset-ticket-head .asset-heading-actions .secondary-btn,
  .request-review-actions button,
  .request-denial-actions button,
  .request-denial-actions > div,
  #requestTeamReviewModal .request-denial-actions button,
  #teamRequestActionModal .team-request-action-actions button {
    width: 100%;
  }
  #view-vacations .vacation-administration-range-fields label,
  #view-vacations .vacation-administration-range-fields input {
    width: 100%;
    min-width: 0;
  }
  #view-vacations .vacation-administration-range-fields .ghost-btn {
    grid-column: 1/-1;
  }

  #view-vacations .vacation-export-xls {
    flex: 1;
  }
}

@media (max-width: 540px) {
  #view-vacations .ooo-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #view-vacations .ooo-panel-actions {
    width: 100%;
    justify-content: stretch;
  }
  #view-vacations .ooo-panel-actions .secondary-btn {
    flex: 1;
  }
  #view-vacations .holiday-label {
    font-size: var(--font-size-2xs);
  }

  #view-directory-profile .directory-profile-modal {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  #view-directory-profile .directory-profile-back {
    width: auto;
  }

  .file-dropzone {
    align-items: flex-start;
    min-height: 104px;
    padding: 13px;
    gap: 10px;
  }
  .file-dropzone-cta {
    position: absolute;
    right: 12px;
    bottom: 12px;
  }
  .file-dropzone-copy {
    padding-right: 2px;
    padding-bottom: 31px;
  }

  #view-hours .timesheet-period-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  #view-directory-profile
    .directory-record-timeline
    .directory-record-card[data-record-label]::before {
    max-width: calc(100% - 26px);
  }

  #teamVacationReviewModal .team-vacation-denial-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .login-screen {
    padding: 12px;
    background: #f4f6fb;
  }
  .login-card.login-card-simple {
    width: 100%;
    min-height: calc(100vh - 24px);
    border: 1px solid #e1e5f0;
    border-radius: 20px;
  }
  .login-card-simple .login-form-panel {
    min-height: calc(100vh - 24px);
    padding: 44px 24px 36px;
  }
  .login-card-simple .login-brand-lockup {
    margin-bottom: 34px;
  }
  .login-card.login-card-simple {
    width: 100%;
    border-radius: 22px;
  }
  .login-card-simple .login-form-panel {
    padding: 38px 24px 34px;
  }
  .login-card-simple .login-brand-lockup {
    width: 128px;
    margin: 0 auto 31px;
  }
  #view-objectives .objectives-q3-save-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
    padding: 12px;
  }

  #view-objectives .objectives-q3-save-text > span {
    line-height: var(--line-height-compact);
  }
  body.objectives-unsaved-active #view-objectives {
    padding-bottom: 142px;
  }
  .login-screen {
    padding: 12px;
  }
  .login-card.login-card-simple {
    width: 100%;
    min-height: calc(100vh - 24px);
    border-radius: 22px;
  }
  .login-card-simple .login-form-panel {
    min-height: calc(100vh - 24px);
    padding: 38px 24px 34px;
  }
  .login-card-simple .login-brand-lockup {
    width: 132px;
    margin: 8px auto 62px;
  }
  .login-card-simple .login-form-content h2 {
    font-size: 26px;
  }
  #teamVacationReviewModal .team-vacation-review-steps {
    align-items: flex-start;
    flex-wrap: wrap;
    line-height: 1.3;
  }
  #teamVacationReviewModal .team-vacation-review-steps > i {
    margin-top: 3px;
  }
  #teamVacationReviewModal .team-vacation-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #teamVacationReviewModal
    .team-vacation-review-actions
    #closeTeamVacationReviewFooter {
    grid-column: 1/-1;
    order: 3;
  }
  #teamVacationReviewModal .team-vacation-nearby-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  #teamVacationReviewModal .team-vacation-nearby-relation {
    grid-column: 2;
    justify-self: start;
  }
  .modal-backdrop > .modal {
    padding-left: max(15px, env(safe-area-inset-left)) !important;
    padding-right: max(15px, env(safe-area-inset-right)) !important;
  }
  /* [AGRUPADO-617] Estilos 100% idénticos agrupados. Origen: líneas 8136, 8224, 8350, 8856. */
  #absenceTeamReviewModal,
  .request-review-modal-backdrop,
  #requestTeamReviewModal,
  #teamRequestActionModal {
    padding: 10px;
  }
  /* [AGRUPADO-618] Estilos 100% idénticos agrupados. Origen: líneas 8137, 8225, 8351, 8857. */
  #absenceTeamReviewModal .absence-team-review-modal,
  .request-review-modal,
  #requestTeamReviewModal .request-review-modal,
  #teamRequestActionModal .team-request-action-modal {
    max-height: calc(100vh - 20px);
    padding: 17px;
  }

  #absenceTeamReviewModal .absence-team-review-person {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .request-denial-actions > div {
    flex-direction: column;
  }
  #requestTeamReviewModal .request-denial-actions,
  #teamRequestActionModal .team-request-action-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #view-about .about-value-copy {
    padding: 38px 22px 100px;
  }
  #view-about .about-value-copy blockquote {
    font-size: var(--font-size-2xl);
  }
  #view-about .about-carousel-footer {
    padding: 0 13px;
    height: 68px;
    gap: 10px;
  }
  #view-about .about-carousel-progress {
    gap: 4px;
  }
  #view-about .about-carousel-progress button {
    height: 46px;
    gap: 6px;
  }
  #view-about .about-carousel-progress button small {
    font-size: 6px;
    letter-spacing: 0;
  }

  #view-about .about-carousel-controls button {
    width: 32px;
    height: 32px;
  }
  #view-about .about-carousel-hint {
    justify-content: flex-start;
  }
  .intranet-date-picker {
    width: 276px;
    max-width: calc(100vw - 16px);
    padding: 9px;
  }
  .modal-backdrop > .modal .modal-actions > button,
  .modal-backdrop > .modal .modal-actions > .primary-btn,
  .modal-backdrop > .modal .modal-actions > .secondary-btn {
    max-width: 100% !important;
  }

  .hero {
    padding: 23px;
  }
  .hero h1 {
    font-size: 25px;
  }

  .button {
    width: 100%;
  }
  .primary-btn,
  .secondary-btn,
  .page-heading .primary-btn,
  #view-vacations .team-calendar-select,
  #view-vacations .team-calendar-select select,
  #view-objectives .objectives-q3-save-bar .primary-btn {
    width: 100%;
  }
  .topbar {
    min-height: 63px;
  }
  .top-actions {
    gap: 5px;
  }
  .content {
    padding-top: 20px;
  }
  .top-actions .icon-button {
    width: 35px;
    height: 35px;
  }
  .stat-grid {
    gap: 10px;
  }

  #vacationModal .vacation-linked-calendar {
    width: 276px;
    max-width: calc(100% - 20px);
    padding: 9px;
  }
  #vacationModal .vacation-linked-calendar-day,
  #vacationModal .vacation-linked-calendar-empty,
  .intranet-date-picker-day,
  .intranet-date-picker-empty {
    height: 31px;
  }
}

@media (max-width: 520px) {
  #transportRequestModal .transport-stepper,
  #absenceRequestModal .absence-request-review,
  #assetIncidentModal .asset-incident-stepper,
  #teamVacationReviewModal .team-vacation-review-meta {
    grid-template-columns: 1fr;
  }
  #transportRequestModal .transport-step-indicator,
  #assetIncidentModal .asset-incident-step-indicator {
    min-height: 44px;
  }
  #transportRequestModal .transport-step-actions,
  #absenceDetailModal .absence-detail-adjustment-actions,
  #requestDetailModal .absence-detail-adjustment-actions,
  #assetIncidentModal .asset-incident-step-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  #transportRequestModal .transport-step-actions .primary-btn,
  #transportRequestModal .transport-step-actions .secondary-btn,
  #absenceDetailModal .absence-detail-adjustment-actions button,
  #requestDetailModal .absence-detail-adjustment-actions button,
  #assetIncidentModal .asset-incident-step-actions .primary-btn,
  #assetIncidentModal .asset-incident-step-actions .secondary-btn,
  #teamVacationReviewModal .team-vacation-denial-actions button {
    width: 100%;
  }
  #transportRequestModal .transport-route-summary {
    align-items: flex-start;
  }
  #transportRequestModal .transport-route-arrow {
    margin-top: 10px;
  }

  #absenceDetailModal .absence-detail-progress,
  #requestDetailModal .absence-detail-progress,
  #absenceRequestModal .absence-request-progress {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  #absenceDetailModal .absence-detail-progress-line,
  #requestDetailModal .absence-detail-progress-line,
  #view-about .about-carousel-counter {
    display: none;
  }

  #absenceRequestModal .absence-request-progress-line {
    width: 1px;
    height: 12px;
    margin-left: 13px;
  }

  #absenceRequestModal .absence-request-review > div.full {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  #vacationLiquidationReviewModal .vacation-liquidation-buckets {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 440px) {
  .login-screen {
    padding: 0;
    background: #fff;
  }
  .login-card {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .login-brand-panel {
    min-height: 190px;
    padding: 24px;
  }
  .login-brand-lockup {
    width: 112px;
  }
  .login-brand-copy p {
    font-size: var(--font-size-md);
  }
  .login-form-panel {
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-about .identity-hero-orbit,
  #view-about .identity-claim-word,
  #view-about .identity-claim-join {
    animation: none !important;
  }
  #view-about .identity-app-track {
    transition: none;
  }

  .is-loading .placeholder-wave::after {
    animation: none;
  }
}