/* =========================================================
   UBICACIÓN:
   frontend/src/pages/capital-humano/roles-responsabilidades/roles-responsabilidades.css

   WIRTZ HUB · CAPITAL HUMANO
   ROLES Y RESPONSABILIDADES

   PARTE 1 DE 2
   ========================================================= */

/* =========================================================
   VARIABLES
   ========================================================= */

.roles-responsibilities-page {
  --rr-bg:
    #ffffff;

  --rr-surface:
    #ffffff;

  --rr-surface-soft:
    #f7f7f7;

  --rr-surface-strong:
    #eeeeee;

  --rr-border:
    rgba(
      0,
      0,
      0,
      0.14
    );

  --rr-border-strong:
    rgba(
      0,
      0,
      0,
      0.26
    );

  --rr-text:
    #111111;

  --rr-text-soft:
    #555555;

  --rr-text-muted:
    #7a7a7a;

  --rr-inverse:
    #ffffff;

  --rr-radius-xs:
    7px;

  --rr-radius-sm:
    9px;

  --rr-radius:
    12px;

  --rr-radius-lg:
    15px;

  --rr-transition:
    160ms ease;

  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 100%;
  min-width: 0;

  padding: 8px;

  background: transparent;

  color:
    var(
      --rr-text
    );

  font-family:
    "DM Sans",
    sans-serif;

  overflow-x: hidden;
}

/* =========================================================
   RESET LOCAL
   ========================================================= */

.roles-responsibilities-page *,
.roles-responsibilities-page *::before,
.roles-responsibilities-page *::after {
  box-sizing: border-box;
}

.roles-responsibilities-page button,
.roles-responsibilities-page input,
.roles-responsibilities-page select,
.roles-responsibilities-page textarea {
  font: inherit;
}

.roles-responsibilities-page button {
  color: inherit;
}

.roles-responsibilities-page textarea {
  resize: vertical;
}

.roles-responsibilities-page .icon {
  width: 17px;
  height: 17px;

  stroke-width: 1.8;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes rrFadeUp {
  from {
    opacity: 0;
    transform:
      translateY(
        4px
      );
  }

  to {
    opacity: 1;
    transform:
      translateY(
        0
      );
  }
}

@keyframes rrSpin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

.roles-responsibilities-page .is-spinning {
  animation:
    rrSpin
    0.8s
    linear
    infinite;
}

/* =========================================================
   HEADER
   ========================================================= */

.roles-responsibilities-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  width: 100%;
  min-width: 0;

  padding: 14px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius:
    var(
      --rr-radius-lg
    );

  background:
    var(
      --rr-surface
    );

  animation:
    rrFadeUp
    180ms
    ease
    both;
}

.roles-responsibilities-head__brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
  flex: 1;
}

.roles-responsibilities-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  border:
    1px
    solid
    var(
      --rr-border-strong
    );

  border-radius: 10px;

  background:
    var(
      --rr-text
    );

  color:
    var(
      --rr-inverse
    );

  line-height: 0;
}

.roles-responsibilities-head__icon svg {
  display: block;

  width: 20px;
  height: 20px;

  margin: 0;
}

.roles-responsibilities-head__brand > div {
  min-width: 0;
}

.roles-responsibilities-head__brand > div > span {
  display: block;

  margin-bottom: 3px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.roles-responsibilities-head__brand h1 {
  margin: 0;

  color:
    var(
      --rr-text
    );

  font-size: 28px;
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.roles-responsibilities-head__brand p {
  max-width: 720px;

  margin: 5px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 12px;
  line-height: 1.45;
}

/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.roles-responsibilities-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;

  min-width: 0;
}

.roles-responsibilities-update {
  min-width: 120px;

  padding: 4px 7px;

  text-align: right;
}

.roles-responsibilities-update span,
.roles-responsibilities-update strong {
  display: block;
}

.roles-responsibilities-update span {
  color:
    var(
      --rr-text-muted
    );

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.roles-responsibilities-update strong {
  margin-top: 2px;

  color:
    var(
      --rr-text
    );

  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.roles-responsibilities-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 38px;

  padding: 0 12px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text
    );

  font-size: 11px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transition:
    background
      var(
        --rr-transition
      ),
    border-color
      var(
        --rr-transition
      ),
    color
      var(
        --rr-transition
      ),
    opacity
      var(
        --rr-transition
      );
}

.roles-responsibilities-btn:hover:not(:disabled) {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-btn:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}

.roles-responsibilities-btn--primary {
  border-color:
    #111111;

  background:
    #111111;

  color:
    #ffffff;
}

.roles-responsibilities-btn--primary span,
.roles-responsibilities-btn--primary .icon {
  color:
    #ffffff;
}

.roles-responsibilities-btn--primary:hover:not(:disabled) {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}

.roles-responsibilities-btn--danger {
  border-color:
    rgba(
      180,
      0,
      0,
      0.28
    );

  color:
    #8f1111;
}

.roles-responsibilities-btn--danger:hover:not(:disabled) {
  border-color:
    rgba(
      180,
      0,
      0,
      0.45
    );

  background:
    rgba(
      180,
      0,
      0,
      0.05
    );
}

/* =========================================================
   MAIN
   ========================================================= */

.roles-responsibilities-main {
  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 100%;
  min-width: 0;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.roles-responsibilities-summary {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );

  gap: 6px;

  width: 100%;
  min-width: 0;
}

/* =========================================================
   KPI
   ========================================================= */

.roles-responsibilities-kpi {
  min-width: 0;
  min-height: 132px;

  padding: 11px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 10px;

  background:
    var(
      --rr-surface
    );

  animation:
    rrFadeUp
    190ms
    ease
    both;
}

.roles-responsibilities-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.roles-responsibilities-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );

  line-height: 0;
}

.roles-responsibilities-kpi__icon svg {
  display: block;

  width: 15px;
  height: 15px;

  margin: 0;
}

.roles-responsibilities-kpi__flag {
  display: inline-flex;
  align-items: center;

  min-height: 22px;

  padding: 0 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 999px;

  background:
    var(
      --rr-surface-soft
    );

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 750;
}

.roles-responsibilities-kpi__body {
  margin-top: 14px;
}

.roles-responsibilities-kpi__body > span {
  display: block;

  color:
    var(
      --rr-text-muted
    );

  font-size: 9px;
  font-weight: 750;
}

.roles-responsibilities-kpi__body > strong {
  display: block;

  margin-top: 4px;

  color:
    var(
      --rr-text
    );

  font-size: 30px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

.roles-responsibilities-kpi__body > p {
  margin: 6px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  line-height: 1.4;
}

/* =========================================================
   TABS
   ========================================================= */

.roles-responsibilities-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  width: fit-content;
  max-width: 100%;

  padding: 4px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 10px;

  background:
    var(
      --rr-surface
    );

  overflow-x: auto;
}

.roles-responsibilities-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 32px;

  padding: 0 10px;

  border:
    1px
    solid
    transparent;

  border-radius: 7px;

  background: transparent;

  color:
    var(
      --rr-text-muted
    );

  font-size: 10px;
  font-weight: 750;

  white-space: nowrap;

  cursor: pointer;
}

.roles-responsibilities-tab:hover {
  border-color:
    var(
      --rr-border
    );

  background:
    var(
      --rr-surface-soft
    );

  color:
    var(
      --rr-text
    );
}

.roles-responsibilities-tab.is-active {
  border-color:
    var(
      --rr-text
    );

  background:
    var(
      --rr-text
    );

  color:
    var(
      --rr-inverse
    );
}

.roles-responsibilities-tab .icon {
  width: 14px;
  height: 14px;
}

/* =========================================================
   VIEW
   ========================================================= */

.roles-responsibilities-view {
  width: 100%;
  min-width: 0;

  padding: 11px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius:
    var(
      --rr-radius
    );

  background:
    var(
      --rr-surface
    );

  animation:
    rrFadeUp
    200ms
    ease
    both;
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

.roles-responsibilities-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  margin-bottom: 9px;
}

.roles-responsibilities-section-head > div {
  min-width: 0;
}

.roles-responsibilities-section-head > div > span {
  display: block;

  margin-bottom: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.roles-responsibilities-section-head h2 {
  margin: 0;

  color:
    var(
      --rr-text
    );

  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.roles-responsibilities-section-head p {
  max-width: 700px;

  margin: 4px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 10px;
  line-height: 1.4;
}

.roles-responsibilities-section-head > strong {
  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding: 0 9px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );

  color:
    var(
      --rr-text
    );

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.roles-responsibilities-toolbar {
  display: grid;

  grid-template-columns:
    minmax(
      260px,
      1.5fr
    )
    repeat(
      3,
      minmax(
        150px,
        0.6fr
      )
    )
    auto;

  gap: 7px;

  margin-bottom: 9px;

  padding: 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 9px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-toolbar__search {
  position: relative;

  min-width: 0;
}

.roles-responsibilities-toolbar__search > .icon {
  position: absolute;

  top: 50%;
  left: 10px;

  width: 14px;
  height: 14px;

  color:
    var(
      --rr-text-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events: none;
}

.roles-responsibilities-toolbar__search input {
  width: 100%;
  height: 36px;

  padding:
    0
    10px
    0
    32px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  outline: none;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text
    );

  font-size: 10px;
}

.roles-responsibilities-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 3px;

  min-width: 0;
}

.roles-responsibilities-toolbar__field > span {
  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 750;
}

.roles-responsibilities-toolbar__field select {
  width: 100%;
  height: 36px;

  padding: 0 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  outline: none;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text
    );

  font-size: 10px;
}

.roles-responsibilities-toolbar__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  align-self: end;

  min-height: 36px;

  padding: 0 9px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  font-weight: 700;
}

.roles-responsibilities-toolbar__check input {
  width: 14px;
  height: 14px;

  accent-color:
    #111111;
}

/* =========================================================
   PEOPLE GRID
   ========================================================= */

.roles-responsibilities-people-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;
}

/* =========================================================
   PERSON CARD
   ========================================================= */

.roles-responsibilities-person {
  min-width: 0;

  padding: 10px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 10px;

  background:
    var(
      --rr-surface
    );

  cursor: pointer;

  transition:
    background
      var(
        --rr-transition
      ),
    border-color
      var(
        --rr-transition
      );
}

.roles-responsibilities-person:hover {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-person__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;

  min-width: 0;
}

.roles-responsibilities-person__identity {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

.roles-responsibilities-person__identity > div {
  min-width: 0;
}

.roles-responsibilities-person__identity strong,
.roles-responsibilities-person__identity span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-person__identity strong {
  color:
    var(
      --rr-text
    );

  font-size: 11px;
  font-weight: 800;
}

.roles-responsibilities-person__identity span {
  margin-top: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
}

/* =========================================================
   AVATAR
   ========================================================= */

.roles-responsibilities-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  border:
    1px
    solid
    var(
      --rr-border-strong
    );

  border-radius: 50%;

  background:
    var(
      --rr-text
    );

  color:
    var(
      --rr-inverse
    );

  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.roles-responsibilities-avatar--large {
  width: 46px;
  height: 46px;
  flex-basis: 46px;

  font-size: 13px;
}

/* =========================================================
   STATUS
   ========================================================= */

.roles-responsibilities-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-height: 24px;

  padding: 0 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 999px;

  background:
    var(
      --rr-surface-soft
    );

  color:
    var(
      --rr-text-soft
    );

  font-size: 8px;
  font-weight: 750;

  white-space: nowrap;
}

.roles-responsibilities-status .icon {
  width: 10px;
  height: 10px;
}

/* =========================================================
   PERSON ROLE
   ========================================================= */

.roles-responsibilities-person__role {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;
  padding: 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-person__role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  flex: 0 0 31px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );

  line-height: 0;
}

.roles-responsibilities-person__role-icon svg {
  display: block;

  width: 14px;
  height: 14px;

  margin: 0;
}

.roles-responsibilities-person__role > div {
  min-width: 0;
}

.roles-responsibilities-person__role small,
.roles-responsibilities-person__role strong,
.roles-responsibilities-person__role > div > span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-person__role small {
  color:
    var(
      --rr-text-muted
    );

  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.roles-responsibilities-person__role strong {
  margin-top: 2px;

  color:
    var(
      --rr-text
    );

  font-size: 11px;
  font-weight: 800;
}

.roles-responsibilities-person__role > div > span {
  margin-top: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
}

/* =========================================================
   PERSON META
   ========================================================= */

.roles-responsibilities-person__meta {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 5px;

  margin-top: 7px;
}

.roles-responsibilities-person__meta > div {
  min-width: 0;

  padding: 6px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );
}

.roles-responsibilities-person__meta span,
.roles-responsibilities-person__meta strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-person__meta span {
  color:
    var(
      --rr-text-muted
    );

  font-size: 7px;
}

.roles-responsibilities-person__meta strong {
  margin-top: 2px;

  color:
    var(
      --rr-text
    );

  font-size: 9px;
  font-weight: 750;
}

/* =========================================================
   PERSON FOOTER
   ========================================================= */

.roles-responsibilities-person__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;

  margin-top: 8px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  line-height: 1.35;
}

.roles-responsibilities-person__footer > span:first-child {
  min-width: 0;
  flex: 1;
}

.roles-responsibilities-person__open {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  color:
    var(
      --rr-text
    );

  font-weight: 750;
  white-space: nowrap;
}

.roles-responsibilities-person__open .icon {
  width: 11px;
  height: 11px;
}

/* =========================================================
   ROLES GRID
   ========================================================= */

.roles-responsibilities-roles-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;
}

/* =========================================================
   ROLE CARD
   ========================================================= */

.roles-responsibilities-role-card {
  min-width: 0;

  padding: 10px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 10px;

  background:
    var(
      --rr-surface
    );

  cursor: pointer;

  transition:
    border-color
      var(
        --rr-transition
      ),
    background
      var(
        --rr-transition
      );
}

.roles-responsibilities-role-card:hover {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-role-card.is-inactive {
  opacity: 0.68;
}

.roles-responsibilities-role-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.roles-responsibilities-role-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 33px;
  height: 33px;
  flex: 0 0 33px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );

  line-height: 0;
}

.roles-responsibilities-role-card__icon svg {
  display: block;

  width: 15px;
  height: 15px;

  margin: 0;
}

.roles-responsibilities-role-card__body {
  margin-top: 11px;

  min-width: 0;
}

.roles-responsibilities-role-card__body > span {
  display: block;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.roles-responsibilities-role-card__body h3 {
  margin: 3px 0 0;

  overflow: hidden;

  color:
    var(
      --rr-text
    );

  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-role-card__body small {
  display: block;

  margin-top: 3px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
}

.roles-responsibilities-role-card__body p {
  min-height: 38px;

  margin: 7px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  line-height: 1.4;
}

/* =========================================================
   ROLE METRICS
   ========================================================= */

.roles-responsibilities-role-card__metrics {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 4px;

  margin-top: 9px;
}

.roles-responsibilities-role-card__metrics > div {
  min-width: 0;

  padding: 6px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface-soft
    );

  text-align: center;
}

.roles-responsibilities-role-card__metrics strong,
.roles-responsibilities-role-card__metrics span {
  display: block;
}

.roles-responsibilities-role-card__metrics strong {
  color:
    var(
      --rr-text
    );

  font-size: 11px;
  font-weight: 850;
}

.roles-responsibilities-role-card__metrics span {
  margin-top: 2px;

  overflow: hidden;

  color:
    var(
      --rr-text-muted
    );

  font-size: 7px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   ORGANIGRAMA
   ========================================================= */

.roles-responsibilities-org {
  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 100%;
  min-width: 0;
}

.roles-responsibilities-org-branch {
  position: relative;

  min-width: 0;
}

.roles-responsibilities-org-children {
  display: flex;
  flex-direction: column;
  gap: 6px;

  margin-top: 6px;
  margin-left: 24px;
  padding-left: 18px;

  border-left:
    1px
    solid
    var(
      --rr-border-strong
    );
}

.roles-responsibilities-org-node {
  display: grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;
  gap: 9px;

  min-width: 0;

  padding: 9px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 9px;

  background:
    var(
      --rr-surface-soft
    );

  cursor: pointer;

  transition:
    background
      var(
        --rr-transition
      ),
    border-color
      var(
        --rr-transition
      );
}

.roles-responsibilities-org-node:hover {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface
    );
}

.roles-responsibilities-org-node__body {
  min-width: 0;
}

.roles-responsibilities-org-node__body strong,
.roles-responsibilities-org-node__body span,
.roles-responsibilities-org-node__body small {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-org-node__body strong {
  color:
    var(
      --rr-text
    );

  font-size: 11px;
  font-weight: 800;
}

.roles-responsibilities-org-node__body span {
  margin-top: 2px;

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
}

.roles-responsibilities-org-node__body small {
  margin-top: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
}

.roles-responsibilities-org-node__level {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  padding: 0 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 999px;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 750;

  white-space: nowrap;
}

/* =========================================================
   STATE / EMPTY
   ========================================================= */

.roles-responsibilities-state,
.roles-responsibilities-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height: 180px;

  padding: 22px;

  text-align: center;
}

.roles-responsibilities-state {
  min-height: 320px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius:
    var(
      --rr-radius
    );

  background:
    var(
      --rr-surface
    );
}

.roles-responsibilities-state__icon,
.roles-responsibilities-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  margin-bottom: 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 9px;

  background:
    var(
      --rr-surface-soft
    );

  color:
    var(
      --rr-text-muted
    );

  line-height: 0;
}

.roles-responsibilities-state__icon svg,
.roles-responsibilities-empty__icon svg {
  display: block;

  margin: 0;
}

.roles-responsibilities-state strong,
.roles-responsibilities-empty strong {
  color:
    var(
      --rr-text
    );

  font-size: 12px;
  font-weight: 800;
}

.roles-responsibilities-state p,
.roles-responsibilities-empty p {
  max-width: 440px;

  margin: 4px 0 0;

  color:
    var(
      --rr-text-muted
    );

  font-size: 9px;
  line-height: 1.45;
}

/* =========================================================
   DRAWER BACKDROP
   ========================================================= */

.roles-responsibilities-drawer-backdrop {
  position: fixed;
  inset: 0;

  z-index: 1190;

  visibility: hidden;

  background:
    rgba(
      0,
      0,
      0,
      0.48
    );

  opacity: 0;

  transition:
    opacity
      var(
        --rr-transition
      ),
    visibility
      var(
        --rr-transition
      );
}

.roles-responsibilities-drawer-backdrop.is-open {
  visibility: visible;
  opacity: 1;
}

/* =========================================================
   DRAWER
   ========================================================= */

.roles-responsibilities-drawer {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 1200;

  display: flex;
  flex-direction: column;

  width:
    min(
      720px,
      95vw
    );

  min-width: 0;

  border-left:
    1px
    solid
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface
    );

  transform:
    translateX(
      100%
    );

  transition:
    transform
      200ms
      ease;
}

.roles-responsibilities-drawer.is-open {
  transform:
    translateX(
      0
    );
}

/* =========================================================
   DRAWER HEAD
   ========================================================= */

.roles-responsibilities-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 13px;

  border-bottom:
    1px
    solid
    var(
      --rr-border
    );
}

.roles-responsibilities-drawer__identity {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;
}

.roles-responsibilities-drawer__identity > div {
  min-width: 0;
}

.roles-responsibilities-drawer__identity > div > span {
  display: block;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.roles-responsibilities-drawer__identity h2 {
  margin: 2px 0 0;

  overflow: hidden;

  color:
    var(
      --rr-text
    );

  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-drawer__identity p {
  margin: 3px 0 0;

  color:
    var(
      --rr-text-muted
    );

  font-size: 9px;
}

/* =========================================================
   DRAWER ROLE ICON
   ========================================================= */

.roles-responsibilities-drawer__role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  border:
    1px
    solid
    var(
      --rr-border-strong
    );

  border-radius: 10px;

  background:
    var(
      --rr-text
    );

  color:
    var(
      --rr-inverse
    );

  line-height: 0;
}

.roles-responsibilities-drawer__role-icon svg {
  display: block;

  width: 20px;
  height: 20px;

  margin: 0;
}

/* =========================================================
   ICON BUTTON
   ========================================================= */

.roles-responsibilities-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  padding: 0;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );

  color:
    var(
      --rr-text
    );

  line-height: 0;

  cursor: pointer;
}

.roles-responsibilities-icon-btn svg {
  display: block;

  margin: 0;
}

.roles-responsibilities-icon-btn:hover {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface
    );
}

/* =========================================================
   DRAWER BODY
   ========================================================= */

.roles-responsibilities-drawer__body {
  flex: 1;

  min-height: 0;

  padding: 10px;

  overflow-y: auto;

  scrollbar-width: thin;
}

/* =========================================================
   DETAIL BLOCK
   ========================================================= */

.roles-responsibilities-detail-block {
  width: 100%;
  min-width: 0;

  margin-bottom: 8px;
  padding: 10px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 10px;

  background:
    var(
      --rr-surface
    );
}

.roles-responsibilities-detail-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 8px;
}

.roles-responsibilities-detail-block__head > div:first-child {
  min-width: 0;
}

.roles-responsibilities-detail-block__head > div:first-child > span {
  display: block;

  margin-bottom: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.roles-responsibilities-detail-block__head h3 {
  margin: 0;

  color:
    var(
      --rr-text
    );

  font-size: 15px;
  font-weight: 850;
}

.roles-responsibilities-detail-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =========================================================
   DETAIL GRID
   ========================================================= */

.roles-responsibilities-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}

/* =========================================================
   ROLE SUMMARY
   ========================================================= */

.roles-responsibilities-role-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 5px;
}

.roles-responsibilities-role-summary > div {
  min-width: 0;

  padding: 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-role-summary span,
.roles-responsibilities-role-summary strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-role-summary span {
  color:
    var(
      --rr-text-muted
    );

  font-size: 7px;
}

.roles-responsibilities-role-summary strong {
  margin-top: 2px;

  color:
    var(
      --rr-text
    );

  font-size: 9px;
  font-weight: 800;
}

/* =========================================================
   OBJECTIVE
   ========================================================= */

.roles-responsibilities-objective {
  margin-top: 7px;
  padding: 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-objective > span {
  display: block;

  color:
    var(
      --rr-text-muted
    );

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.roles-responsibilities-objective p {
  margin: 4px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  line-height: 1.45;
}

/* =========================================================
   LIST
   ========================================================= */

.roles-responsibilities-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.roles-responsibilities-list-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;

  padding: 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-list-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;
  flex: 0 0 27px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );

  line-height: 0;
}

.roles-responsibilities-list-item__icon svg {
  display: block;

  width: 13px;
  height: 13px;

  margin: 0;
}

.roles-responsibilities-list-item > div {
  min-width: 0;
}

.roles-responsibilities-list-item strong {
  display: block;

  color:
    var(
      --rr-text
    );

  font-size: 10px;
  font-weight: 800;
}

.roles-responsibilities-list-item p {
  margin: 3px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 8px;
  line-height: 1.4;
}

.roles-responsibilities-list-item small {
  display: block;

  margin-top: 3px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 7px;
}

/* =========================================================
   CONTINÚA EN PARTE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · CAPITAL HUMANO
   ROLES Y RESPONSABILIDADES

   PARTE 2 DE 2
   ========================================================= */

/* =========================================================
   INDICADORES
   ========================================================= */

.roles-responsibilities-indicators {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 5px;
}

.roles-responsibilities-indicator {
  display: flex;
  align-items: flex-start;
  gap: 7px;

  min-width: 0;

  padding: 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-indicator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );

  line-height: 0;
}

.roles-responsibilities-indicator__icon svg {
  display: block;

  width: 13px;
  height: 13px;

  margin: 0;
}

.roles-responsibilities-indicator > div {
  min-width: 0;
}

.roles-responsibilities-indicator strong,
.roles-responsibilities-indicator span,
.roles-responsibilities-indicator p {
  display: block;
}

.roles-responsibilities-indicator strong {
  color:
    var(
      --rr-text
    );

  font-size: 10px;
  font-weight: 800;
}

.roles-responsibilities-indicator p {
  margin: 3px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 8px;
  line-height: 1.4;
}

.roles-responsibilities-indicator span {
  margin-top: 4px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 750;
}

/* =========================================================
   ASSIGNMENTS
   ========================================================= */

.roles-responsibilities-assignments {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.roles-responsibilities-assignment {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto
    auto;

  align-items: center;
  gap: 8px;

  min-width: 0;

  padding: 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-assignment.is-active {
  border-color:
    var(
      --rr-border-strong
    );
}

.roles-responsibilities-assignment__main {
  display: flex;
  align-items: center;
  gap: 7px;

  min-width: 0;
}

.roles-responsibilities-assignment__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 29px;
  height: 29px;
  flex: 0 0 29px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );

  line-height: 0;
}

.roles-responsibilities-assignment__icon svg {
  display: block;

  width: 13px;
  height: 13px;

  margin: 0;
}

.roles-responsibilities-assignment__main > div {
  min-width: 0;
}

.roles-responsibilities-assignment__main strong,
.roles-responsibilities-assignment__main span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-assignment__main strong {
  color:
    var(
      --rr-text
    );

  font-size: 10px;
  font-weight: 800;
}

.roles-responsibilities-assignment__main span {
  margin-top: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
}

.roles-responsibilities-assignment__dates {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color:
    var(
      --rr-text-soft
    );

  font-size: 8px;
  white-space: nowrap;
}

.roles-responsibilities-assignment__dates small {
  color:
    var(
      --rr-text-muted
    );
}

.roles-responsibilities-assignment__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* =========================================================
   PEOPLE OF ROLE
   ========================================================= */

.roles-responsibilities-role-people {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.roles-responsibilities-role-person {
  display: grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;
  gap: 8px;

  width: 100%;
  min-width: 0;

  padding: 7px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  background:
    var(
      --rr-surface-soft
    );

  text-align: left;

  cursor: pointer;
}

.roles-responsibilities-role-person:hover {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface
    );
}

.roles-responsibilities-role-person > span:nth-child(2) {
  min-width: 0;
}

.roles-responsibilities-role-person strong,
.roles-responsibilities-role-person small {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-responsibilities-role-person strong {
  color:
    var(
      --rr-text
    );

  font-size: 10px;
  font-weight: 800;
}

.roles-responsibilities-role-person small {
  margin-top: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
}

.roles-responsibilities-role-person > .icon {
  width: 13px;
  height: 13px;
}

/* =========================================================
   MODAL LAYER
   ========================================================= */

.roles-responsibilities-modal-layer {
  position: fixed;
  inset: 0;

  z-index: 1300;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
}

.roles-responsibilities-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.5
    );
}

/* =========================================================
   MODAL
   ========================================================= */

.roles-responsibilities-modal {
  position: relative;

  z-index: 1;

  display: flex;
  flex-direction: column;

  width:
    min(
      720px,
      100%
    );

  max-height:
    calc(
      100vh -
      36px
    );

  min-width: 0;

  border:
    1px
    solid
    var(
      --rr-border-strong
    );

  border-radius:
    var(
      --rr-radius-lg
    );

  background:
    var(
      --rr-surface
    );

  overflow: hidden;

  animation:
    rrFadeUp
    160ms
    ease
    both;
}

/* =========================================================
   MODAL HEAD
   ========================================================= */

.roles-responsibilities-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 13px;

  border-bottom:
    1px
    solid
    var(
      --rr-border
    );
}

.roles-responsibilities-modal__head > div {
  min-width: 0;
}

.roles-responsibilities-modal__head > div > span {
  display: block;

  margin-bottom: 2px;

  color:
    var(
      --rr-text-muted
    );

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.roles-responsibilities-modal__head h2 {
  margin: 0;

  color:
    var(
      --rr-text
    );

  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.roles-responsibilities-modal__head p {
  max-width: 560px;

  margin: 4px 0 0;

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  line-height: 1.4;
}

/* =========================================================
   MODAL BODY
   ========================================================= */

.roles-responsibilities-modal__body {
  flex: 1;

  min-height: 0;

  padding: 11px;

  overflow-y: auto;

  scrollbar-width: thin;
}

/* =========================================================
   MODAL FOOTER
   ========================================================= */

.roles-responsibilities-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;

  padding: 10px 11px;

  border-top:
    1px
    solid
    var(
      --rr-border
    );

  background:
    var(
      --rr-surface-soft
    );
}

/* =========================================================
   FORM
   ========================================================= */

.roles-responsibilities-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}

.roles-responsibilities-field {
  display: flex;
  flex-direction: column;
  gap: 4px;

  min-width: 0;
}

.roles-responsibilities-field--wide {
  grid-column:
    1 /
    -1;
}

.roles-responsibilities-field > span {
  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  font-weight: 750;
}

.roles-responsibilities-field input,
.roles-responsibilities-field select,
.roles-responsibilities-field textarea {
  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 8px;

  outline: none;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text
    );

  font-size: 10px;

  transition:
    border-color
      var(
        --rr-transition
      ),
    background
      var(
        --rr-transition
      );
}

.roles-responsibilities-field input,
.roles-responsibilities-field select {
  height: 38px;

  padding: 0 9px;
}

.roles-responsibilities-field textarea {
  min-height: 82px;

  padding: 8px 9px;

  line-height: 1.45;
}

.roles-responsibilities-field input:focus,
.roles-responsibilities-field select:focus,
.roles-responsibilities-field textarea:focus {
  border-color:
    var(
      --rr-border-strong
    );

  background:
    var(
      --rr-surface-soft
    );
}

/* =========================================================
   CHECK
   ========================================================= */

.roles-responsibilities-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 34px;

  color:
    var(
      --rr-text-soft
    );

  font-size: 9px;
  font-weight: 700;
}

.roles-responsibilities-check input {
  width: 15px;
  height: 15px;

  accent-color:
    #111111;
}

/* =========================================================
   EDITOR
   ========================================================= */

.roles-responsibilities-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;

  width: 100%;
  min-width: 0;
}

.roles-responsibilities-editor__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roles-responsibilities-editor-item {
  display: grid;

  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    )
    auto;

  align-items: start;
  gap: 7px;

  padding: 8px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 9px;

  background:
    var(
      --rr-surface-soft
    );
}

.roles-responsibilities-editor-item__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text-muted
    );

  font-size: 9px;
  font-weight: 800;
}

.roles-responsibilities-editor-item__fields {
  display: flex;
  flex-direction: column;
  gap: 5px;

  min-width: 0;
}

.roles-responsibilities-editor-item__fields input,
.roles-responsibilities-editor-item__fields textarea {
  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(
      --rr-border
    );

  border-radius: 7px;

  outline: none;

  background:
    var(
      --rr-surface
    );

  color:
    var(
      --rr-text
    );

  font-size: 10px;
}

.roles-responsibilities-editor-item__fields input {
  height: 36px;

  padding: 0 8px;
}

.roles-responsibilities-editor-item__fields textarea {
  min-height: 66px;

  padding: 8px;

  line-height: 1.4;
}

.roles-responsibilities-editor-item__fields input:focus,
.roles-responsibilities-editor-item__fields textarea:focus {
  border-color:
    var(
      --rr-border-strong
    );
}

.roles-responsibilities-editor-item__split {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 5px;
}

/* =========================================================
   TOAST
   ========================================================= */

.roles-responsibilities-toast {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 1500;

  display: flex;
  align-items: flex-start;
  gap: 8px;

  width:
    min(
      360px,
      calc(
        100vw -
        36px
      )
    );

  padding: 10px;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.22
    );

  border-radius: 10px;

  background:
    #ffffff;

  color:
    #111111;

  opacity: 0;

  transform:
    translateY(
      8px
    );

  transition:
    opacity
      160ms
      ease,
    transform
      160ms
      ease;
}

.roles-responsibilities-toast.is-visible {
  opacity: 1;

  transform:
    translateY(
      0
    );
}

.roles-responsibilities-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.14
    );

  border-radius: 7px;

  background:
    #f6f6f6;

  line-height: 0;
}

.roles-responsibilities-toast__icon svg {
  display: block;

  width: 14px;
  height: 14px;

  margin: 0;
}

.roles-responsibilities-toast__body {
  min-width: 0;
}

.roles-responsibilities-toast__body strong {
  display: block;

  font-size: 10px;
  font-weight: 800;
}

.roles-responsibilities-toast__body p {
  margin: 3px 0 0;

  color:
    #555555;

  font-size: 8px;
  line-height: 1.4;
}

.roles-responsibilities-toast.is-error {
  border-color:
    rgba(
      160,
      0,
      0,
      0.35
    );
}

.roles-responsibilities-toast.is-success {
  border-color:
    rgba(
      0,
      90,
      25,
      0.28
    );
}

/* =========================================================
   BODY LOCK
   ========================================================= */

body.roles-responsibilities-drawer-open,
body.roles-responsibilities-modal-open {
  overflow: hidden;
}

/* =========================================================
   FOCUS
   ========================================================= */

.roles-responsibilities-page button:focus-visible,
.roles-responsibilities-page input:focus-visible,
.roles-responsibilities-page select:focus-visible,
.roles-responsibilities-page textarea:focus-visible,
.roles-responsibilities-page [tabindex="0"]:focus-visible {
  outline:
    2px
    solid
    currentColor;

  outline-offset: 2px;
}

/* =========================================================
   DARK MODE · NEGRO REAL
   ========================================================= */

:root[data-theme="dark"] .roles-responsibilities-page {
  --rr-bg:
    #000000;

  --rr-surface:
    #000000;

  --rr-surface-soft:
    #080808;

  --rr-surface-strong:
    #111111;

  --rr-border:
    rgba(
      255,
      255,
      255,
      0.15
    );

  --rr-border-strong:
    rgba(
      255,
      255,
      255,
      0.28
    );

  --rr-text:
    #ffffff;

  --rr-text-soft:
    #c7c7c7;

  --rr-text-muted:
    #8d8d8d;

  --rr-inverse:
    #000000;

  background:
    #000000;
}

:root[data-theme="dark"] #rolesResponsibilitiesPageMount {
  background:
    #000000;
}

:root[data-theme="dark"] .roles-responsibilities-head,
:root[data-theme="dark"] .roles-responsibilities-view,
:root[data-theme="dark"] .roles-responsibilities-drawer,
:root[data-theme="dark"] .roles-responsibilities-modal,
:root[data-theme="dark"] .roles-responsibilities-state {
  background:
    #000000;
}

:root[data-theme="dark"] .roles-responsibilities-btn--primary,
:root[data-theme="dark"] .roles-responsibilities-head__icon,
:root[data-theme="dark"] .roles-responsibilities-avatar,
:root[data-theme="dark"] .roles-responsibilities-drawer__role-icon {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}

:root[data-theme="dark"] .roles-responsibilities-btn--primary span,
:root[data-theme="dark"] .roles-responsibilities-btn--primary .icon {
  color:
    #000000;
}

:root[data-theme="dark"] .roles-responsibilities-btn--primary:hover:not(:disabled) {
  border-color:
    #dedede;

  background:
    #dedede;

  color:
    #000000;
}

:root[data-theme="dark"] .roles-responsibilities-tab.is-active {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}

:root[data-theme="dark"] .roles-responsibilities-toolbar__check input,
:root[data-theme="dark"] .roles-responsibilities-check input {
  accent-color:
    #ffffff;
}

:root[data-theme="dark"] .roles-responsibilities-btn--danger {
  border-color:
    rgba(
      255,
      90,
      90,
      0.34
    );

  color:
    #ff9c9c;
}

:root[data-theme="dark"] .roles-responsibilities-btn--danger:hover:not(:disabled) {
  background:
    rgba(
      255,
      80,
      80,
      0.08
    );
}

:root[data-theme="dark"] .roles-responsibilities-toast {
  border-color:
    rgba(
      255,
      255,
      255,
      0.22
    );

  background:
    #000000;

  color:
    #ffffff;
}

:root[data-theme="dark"] .roles-responsibilities-toast__icon {
  border-color:
    rgba(
      255,
      255,
      255,
      0.14
    );

  background:
    #080808;
}

:root[data-theme="dark"] .roles-responsibilities-toast__body p {
  color:
    #bcbcbc;
}

/* =========================================================
   ICONOS · CENTRADO GLOBAL
   ========================================================= */

.roles-responsibilities-head__icon,
.roles-responsibilities-kpi__icon,
.roles-responsibilities-person__role-icon,
.roles-responsibilities-role-card__icon,
.roles-responsibilities-state__icon,
.roles-responsibilities-empty__icon,
.roles-responsibilities-drawer__role-icon,
.roles-responsibilities-icon-btn,
.roles-responsibilities-list-item__icon,
.roles-responsibilities-indicator__icon,
.roles-responsibilities-assignment__icon,
.roles-responsibilities-toast__icon {
  display: grid !important;

  place-items: center !important;

  padding: 0 !important;

  line-height: 0 !important;
}

.roles-responsibilities-head__icon > *,
.roles-responsibilities-kpi__icon > *,
.roles-responsibilities-person__role-icon > *,
.roles-responsibilities-role-card__icon > *,
.roles-responsibilities-state__icon > *,
.roles-responsibilities-empty__icon > *,
.roles-responsibilities-drawer__role-icon > *,
.roles-responsibilities-icon-btn > *,
.roles-responsibilities-list-item__icon > *,
.roles-responsibilities-indicator__icon > *,
.roles-responsibilities-assignment__icon > *,
.roles-responsibilities-toast__icon > * {
  display: block !important;

  margin: auto !important;
}

/* =========================================================
   RESPONSIVE · 1500
   ========================================================= */

@media (
  max-width:
    1500px
) {
  .roles-responsibilities-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-roles-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}

/* =========================================================
   RESPONSIVE · 1250
   ========================================================= */

@media (
  max-width:
    1250px
) {
  .roles-responsibilities-people-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-toolbar {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-toolbar__search {
    grid-column:
      1 /
      -1;
  }

  .roles-responsibilities-toolbar__check {
    align-self: stretch;
  }
}

/* =========================================================
   RESPONSIVE · 980
   ========================================================= */

@media (
  max-width:
    980px
) {
  .roles-responsibilities-page {
    padding: 6px;
  }

  .roles-responsibilities-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .roles-responsibilities-head__actions {
    width: 100%;

    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .roles-responsibilities-update {
    margin-right: auto;

    padding-left: 0;

    text-align: left;
  }

  .roles-responsibilities-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-roles-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-detail-grid {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-role-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-assignment {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-assignment__dates {
    justify-content: flex-start;
  }

  .roles-responsibilities-assignment__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
    760px
) {
  .roles-responsibilities-page {
    gap: 6px;

    padding: 4px;
  }

  .roles-responsibilities-head {
    padding: 11px;
  }

  .roles-responsibilities-head__brand {
    align-items: flex-start;
  }

  .roles-responsibilities-head__brand h1 {
    font-size: 24px;
  }

  .roles-responsibilities-head__brand p {
    font-size: 11px;
  }

  .roles-responsibilities-head__actions {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-update {
    grid-column:
      1 /
      -1;
  }

  .roles-responsibilities-head__actions .roles-responsibilities-btn {
    width: 100%;
  }

  .roles-responsibilities-summary {
    gap: 5px;
  }

  .roles-responsibilities-kpi {
    min-height: 124px;

    padding: 10px;
  }

  .roles-responsibilities-kpi__body > strong {
    font-size: 26px;
  }

  .roles-responsibilities-tabs {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;

    overflow: visible;
  }

  .roles-responsibilities-tab {
    width: 100%;
  }

  .roles-responsibilities-view {
    padding: 9px;
  }

  .roles-responsibilities-section-head {
    flex-direction: column;
  }

  .roles-responsibilities-section-head h2 {
    font-size: 18px;
  }

  .roles-responsibilities-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-toolbar__search {
    grid-column:
      1 /
      -1;
  }

  .roles-responsibilities-people-grid,
  .roles-responsibilities-roles-grid {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-drawer {
    width: 100vw;

    border-left: 0;
  }

  .roles-responsibilities-drawer__head {
    padding: 11px;
  }

  .roles-responsibilities-drawer__identity h2 {
    font-size: 18px;
  }

  .roles-responsibilities-drawer__body {
    padding: 8px;
  }

  .roles-responsibilities-modal-layer {
    padding: 8px;
  }

  .roles-responsibilities-modal {
    width: 100%;

    max-height:
      calc(
        100vh -
        16px
      );
  }

  .roles-responsibilities-form-grid {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-field--wide {
    grid-column: auto;
  }
}

/* =========================================================
   RESPONSIVE · 560
   ========================================================= */

@media (
  max-width:
    560px
) {
  .roles-responsibilities-summary {
    grid-template-columns:
      1fr
      1fr;
  }

  .roles-responsibilities-kpi {
    min-height: 118px;
  }

  .roles-responsibilities-kpi__body > span {
    font-size: 8px;
  }

  .roles-responsibilities-kpi__body > strong {
    font-size: 24px;
  }

  .roles-responsibilities-kpi__body > p {
    font-size: 8px;
  }

  .roles-responsibilities-toolbar {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-toolbar__search {
    grid-column: auto;
  }

  .roles-responsibilities-person__meta {
    grid-template-columns:
      1fr
      1fr;
  }

  .roles-responsibilities-person__meta > div:last-child {
    grid-column:
      1 /
      -1;
  }

  .roles-responsibilities-person__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .roles-responsibilities-role-card__metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-role-summary {
    grid-template-columns:
      1fr
      1fr;
  }

  .roles-responsibilities-indicators {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-detail-block__head {
    flex-direction: column;
  }

  .roles-responsibilities-detail-actions {
    width: 100%;
  }

  .roles-responsibilities-detail-actions .roles-responsibilities-btn {
    flex: 1;
  }

  .roles-responsibilities-org-children {
    margin-left: 12px;
    padding-left: 10px;
  }

  .roles-responsibilities-org-node {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }

  .roles-responsibilities-org-node__level {
    grid-column:
      2 /
      3;

    justify-self: start;
  }

  .roles-responsibilities-editor-item {
    grid-template-columns:
      24px
      minmax(
        0,
        1fr
      )
      auto;
  }

  .roles-responsibilities-editor-item__index {
    width: 24px;
    height: 24px;
  }
}

/* =========================================================
   RESPONSIVE · 390
   ========================================================= */

@media (
  max-width:
    390px
) {
  .roles-responsibilities-head__brand {
    gap: 8px;
  }

  .roles-responsibilities-head__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .roles-responsibilities-head__brand h1 {
    font-size: 21px;
  }

  .roles-responsibilities-summary {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-kpi {
    min-height: auto;
  }

  .roles-responsibilities-tabs {
    gap: 3px;

    padding: 3px;
  }

  .roles-responsibilities-tab {
    min-height: 34px;

    padding: 0 6px;

    font-size: 9px;
  }

  .roles-responsibilities-role-summary {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-person__meta {
    grid-template-columns:
      1fr;
  }

  .roles-responsibilities-person__meta > div:last-child {
    grid-column: auto;
  }

  .roles-responsibilities-modal__footer {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .roles-responsibilities-modal__footer .roles-responsibilities-btn {
    width: 100%;
  }

  .roles-responsibilities-editor-item__split {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .roles-responsibilities-page *,
  .roles-responsibilities-page *::before,
  .roles-responsibilities-page *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .roles-responsibilities-head__actions,
  .roles-responsibilities-tabs,
  .roles-responsibilities-toolbar,
  .roles-responsibilities-drawer,
  .roles-responsibilities-drawer-backdrop,
  .roles-responsibilities-modal-layer,
  .roles-responsibilities-toast {
    display: none !important;
  }

  .roles-responsibilities-page {
    padding: 0;

    background:
      #ffffff !important;

    color:
      #000000 !important;
  }

  .roles-responsibilities-head,
  .roles-responsibilities-view,
  .roles-responsibilities-kpi,
  .roles-responsibilities-person,
  .roles-responsibilities-role-card,
  .roles-responsibilities-org-node {
    break-inside: avoid;

    border-color:
      #bdbdbd !important;

    background:
      #ffffff !important;

    color:
      #000000 !important;
  }
}/* =========================================================
   FIX · DRAWER SOBRE TOPBAR
   ========================================================= */

.roles-responsibilities-drawer-backdrop {
  z-index: 99998 !important;
}

.roles-responsibilities-drawer {
  z-index: 99999 !important;
}/* =========================================================
   FIX · DRAWER DEBAJO DEL TOPBAR
   ========================================================= */

.roles-responsibilities-drawer-backdrop {
  top: var(--topbar-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  z-index: 1190 !important;
}

.roles-responsibilities-drawer {
  top: var(--topbar-height) !important;
  right: 0 !important;
  bottom: 0 !important;

  height: calc(100dvh - var(--topbar-height)) !important;

  z-index: 1200 !important;
}
/* =========================================================
   UBICACIÓN:
   frontend/src/pages/capital-humano/roles-responsabilidades/roles-responsabilidades.css

   REEMPLAZAR / AJUSTAR:
   .roles-responsibilities-avatar
   ========================================================= */

.roles-responsibilities-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  padding: 0;

  border:
    1px
    solid
    var(
      --rr-border-strong
    );

  border-radius: 50%;

  background:
    var(
      --rr-text
    );

  color:
    var(
      --rr-inverse
    );

  font-size: 12px;
  font-weight: 850;
  line-height: 1;

  text-align: center;
  letter-spacing: 0;

  overflow: hidden;
}


/* =========================================================
   AVATAR GRANDE
   ========================================================= */

.roles-responsibilities-avatar--large {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;

  font-size: 15px;
}


/* =========================================================
   ASEGURAR CENTRADO INTERNO
   ========================================================= */

.roles-responsibilities-person__identity
.roles-responsibilities-avatar,
.roles-responsibilities-org-node
.roles-responsibilities-avatar,
.roles-responsibilities-role-person
.roles-responsibilities-avatar {
  display: grid;

  place-items: center;

  padding: 0;

  line-height: 1;
}/* =========================================================
   UBICACIÓN:
   frontend/src/pages/capital-humano/roles-responsabilidades/roles-responsabilidades.css

   AJUSTE · TEXTO MÁS GRANDE EN TARJETAS DE PERSONAS
   ========================================================= */


/* NOMBRE: Administrador / Matias / Huevo / etc. */
.roles-responsibilities-person__identity strong {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}


/* EMAIL / USUARIO */
.roles-responsibilities-person__identity span {
  margin-top: 3px;

  font-size: 10px;
  line-height: 1.3;
}


/* BADGE: ACTIVO / SIN ROL */
.roles-responsibilities-status {
  min-height: 27px;

  padding: 0 9px;

  font-size: 10px;
  font-weight: 800;
}


.roles-responsibilities-status .icon {
  width: 12px;
  height: 12px;
}


/* LABEL: ROL PRINCIPAL */
.roles-responsibilities-person__role small {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}


/* NOMBRE DEL ROL: Operador Logístico / Sin rol asignado */
.roles-responsibilities-person__role strong {
  margin-top: 3px;

  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}


/* ÁREA: Operaciones / Sin área */
.roles-responsibilities-person__role > div > span {
  margin-top: 3px;

  font-size: 10px;
  line-height: 1.3;
}


/* REPORTA A / RESPONSABILIDADES / DESDE */
.roles-responsibilities-person__meta span {
  font-size: 9px;
  line-height: 1.2;
}


/* Sin responsable / 0 / fecha */
.roles-responsibilities-person__meta strong {
  margin-top: 3px;

  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}


/* TEXTO INFERIOR */
.roles-responsibilities-person__footer {
  font-size: 10px;
  line-height: 1.45;
}


/* VER DETALLE */
.roles-responsibilities-person__open {
  font-size: 10px;
  font-weight: 850;
}


/* UN POCO MÁS DE AIRE EN LA TARJETA */
.roles-responsibilities-person {
  padding: 12px;
}


.roles-responsibilities-person__role {
  margin-top: 11px;
  padding: 10px;
}


.roles-responsibilities-person__meta {
  margin-top: 8px;
}


.roles-responsibilities-person__meta > div {
  padding: 8px;
}


.roles-responsibilities-person__footer {
  margin-top: 10px;
}/* =========================================================
   ROLES Y RESPONSONSABILIDADES
   AJUSTE FINAL

   - MÁS RÁPIDO
   - RESPONSIVE FULL
   - SIN SCROLL HORIZONTAL
   - LETRAS MÁS MARCADAS
   - DIVISIONES MÁS VISIBLES
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.roles-responsibilities-page {
  --rr-border:
    rgba(
      0,
      0,
      0,
      0.20
    );

  --rr-border-strong:
    rgba(
      0,
      0,
      0,
      0.38
    );

  --rr-text:
    #080808;

  --rr-text-soft:
    #303030;

  --rr-text-muted:
    #555555;

  --rr-transition:
    70ms ease;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden !important;
}


:root[data-theme="dark"]
.roles-responsibilities-page {
  --rr-border:
    rgba(
      255,
      255,
      255,
      0.20
    );

  --rr-border-strong:
    rgba(
      255,
      255,
      255,
      0.38
    );

  --rr-text:
    #ffffff;

  --rr-text-soft:
    #e0e0e0;

  --rr-text-muted:
    #aaaaaa;
}


/* =========================================================
   SIN DESBORDES HORIZONTALES
   ========================================================= */

#rolesResponsibilitiesPageMount,
.roles-responsibilities-page,
.roles-responsibilities-main,
.roles-responsibilities-head,
.roles-responsibilities-summary,
.roles-responsibilities-view,
.roles-responsibilities-toolbar,
.roles-responsibilities-people-grid,
.roles-responsibilities-roles-grid,
.roles-responsibilities-org,
.roles-responsibilities-org-branch,
.roles-responsibilities-org-children,
.roles-responsibilities-person,
.roles-responsibilities-role-card,
.roles-responsibilities-drawer,
.roles-responsibilities-drawer__head,
.roles-responsibilities-drawer__body,
.roles-responsibilities-detail-block,
.roles-responsibilities-detail-grid,
.roles-responsibilities-role-summary,
.roles-responsibilities-list,
.roles-responsibilities-list-item,
.roles-responsibilities-indicators,
.roles-responsibilities-indicator,
.roles-responsibilities-assignments,
.roles-responsibilities-assignment,
.roles-responsibilities-role-people,
.roles-responsibilities-role-person,
.roles-responsibilities-modal-layer,
.roles-responsibilities-modal,
.roles-responsibilities-modal__head,
.roles-responsibilities-modal__body,
.roles-responsibilities-modal__footer,
.roles-responsibilities-form-grid,
.roles-responsibilities-editor,
.roles-responsibilities-editor__list,
.roles-responsibilities-editor-item,
.roles-responsibilities-editor-item__fields,
.roles-responsibilities-editor-item__split {
  min-width:
    0 !important;

  max-width:
    100% !important;
}


html,
body {
  max-width:
    100vw;

  overflow-x:
    hidden;
}


#rolesResponsibilitiesPageMount {
  width:
    100%;

  max-width:
    100%;

  overflow-x:
    hidden !important;
}


/* =========================================================
   RENDIMIENTO / VELOCIDAD VISUAL
   ========================================================= */

.roles-responsibilities-page *,
.roles-responsibilities-page *::before,
.roles-responsibilities-page *::after {
  animation-duration:
    80ms !important;

  transition-duration:
    70ms !important;
}


.roles-responsibilities-head,
.roles-responsibilities-kpi,
.roles-responsibilities-view,
.roles-responsibilities-modal {
  animation:
    none !important;
}


.roles-responsibilities-person,
.roles-responsibilities-role-card,
.roles-responsibilities-org-node,
.roles-responsibilities-btn,
.roles-responsibilities-tab,
.roles-responsibilities-icon-btn,
.roles-responsibilities-role-person,
.roles-responsibilities-list-item,
.roles-responsibilities-indicator,
.roles-responsibilities-assignment {
  transition:
    background
    60ms
    ease,
    border-color
    60ms
    ease,
    color
    60ms
    ease,
    opacity
    60ms
    ease !important;
}


.roles-responsibilities-drawer {
  transition:
    transform
    110ms
    ease !important;
}


.roles-responsibilities-drawer-backdrop {
  transition:
    opacity
    90ms
    ease,
    visibility
    90ms
    ease !important;
}


/* =========================================================
   TIPOGRAFÍA GENERAL MÁS MARCADA
   ========================================================= */

.roles-responsibilities-page {
  font-weight:
    600;
}


.roles-responsibilities-head__brand h1,
.roles-responsibilities-section-head h2,
.roles-responsibilities-drawer__identity h2,
.roles-responsibilities-detail-block__head h3,
.roles-responsibilities-modal__head h2 {
  font-weight:
    900;
}


.roles-responsibilities-head__brand > div > span,
.roles-responsibilities-update span,
.roles-responsibilities-kpi__body > span,
.roles-responsibilities-section-head > div > span,
.roles-responsibilities-person__role small,
.roles-responsibilities-role-card__body > span,
.roles-responsibilities-detail-block__head > div:first-child > span,
.roles-responsibilities-objective > span,
.roles-responsibilities-modal__head > div > span {
  font-weight:
    850;
}


.roles-responsibilities-head__brand p,
.roles-responsibilities-section-head p,
.roles-responsibilities-kpi__body > p,
.roles-responsibilities-person__identity span,
.roles-responsibilities-person__role > div > span,
.roles-responsibilities-person__footer,
.roles-responsibilities-role-card__body p,
.roles-responsibilities-org-node__body span,
.roles-responsibilities-org-node__body small,
.roles-responsibilities-drawer__identity p,
.roles-responsibilities-objective p,
.roles-responsibilities-list-item p,
.roles-responsibilities-indicator p,
.roles-responsibilities-modal__head p {
  font-weight:
    650;
}


.roles-responsibilities-person__identity strong,
.roles-responsibilities-person__role strong,
.roles-responsibilities-person__meta strong,
.roles-responsibilities-role-card__body h3,
.roles-responsibilities-role-card__metrics strong,
.roles-responsibilities-org-node__body strong,
.roles-responsibilities-list-item strong,
.roles-responsibilities-indicator strong,
.roles-responsibilities-assignment__main strong,
.roles-responsibilities-role-person strong {
  font-weight:
    850;
}


/* =========================================================
   HEADER
   ========================================================= */

.roles-responsibilities-head {
  border-color:
    var(
      --rr-border-strong
    );

  border-bottom-width:
    2px;
}


.roles-responsibilities-head__icon {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-update {
  border-left:
    1px solid
    var(
      --rr-border
    );

  padding-left:
    12px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.roles-responsibilities-btn {
  border-color:
    var(
      --rr-border-strong
    );

  font-weight:
    800;
}


.roles-responsibilities-icon-btn {
  border-color:
    var(
      --rr-border-strong
    );
}


/* =========================================================
   KPI
   ========================================================= */

.roles-responsibilities-kpi {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-kpi__icon {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-kpi__body > strong {
  font-weight:
    900;
}


/* =========================================================
   TABS
   ========================================================= */

.roles-responsibilities-tabs {
  width:
    100%;

  max-width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  overflow:
    hidden !important;

  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-tab {
  width:
    100%;

  min-width:
    0;

  border-color:
    transparent;

  font-weight:
    800;

  white-space:
    normal;
}


.roles-responsibilities-tab:not(:last-child) {
  border-right:
    1px solid
    var(
      --rr-border
    );
}


.roles-responsibilities-tab.is-active {
  border-color:
    var(
      --rr-text
    );
}


/* =========================================================
   VIEW
   ========================================================= */

.roles-responsibilities-view {
  border-color:
    var(
      --rr-border-strong
    );
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.roles-responsibilities-section-head {
  padding-bottom:
    10px;

  border-bottom:
    1px solid
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-section-head > strong {
  border-color:
    var(
      --rr-border-strong
    );
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.roles-responsibilities-toolbar {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-toolbar__search input,
.roles-responsibilities-toolbar__field select,
.roles-responsibilities-toolbar__check {
  min-width:
    0;

  border-color:
    var(
      --rr-border-strong
    );

  font-weight:
    700;
}


.roles-responsibilities-toolbar__field > span {
  font-weight:
    800;
}


/* =========================================================
   PERSONAS
   ========================================================= */

.roles-responsibilities-person {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-person__role {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-person__role-icon {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-person__meta > div {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-person__footer {
  padding-top:
    8px;

  border-top:
    1px solid
    var(
      --rr-border
    );
}


.roles-responsibilities-status {
  border-color:
    var(
      --rr-border-strong
    );

  font-weight:
    850;
}


/* =========================================================
   ROLES
   ========================================================= */

.roles-responsibilities-role-card {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-role-card__icon {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-role-card__metrics {
  padding-top:
    8px;

  border-top:
    1px solid
    var(
      --rr-border
    );
}


.roles-responsibilities-role-card__metrics > div {
  border-color:
    var(
      --rr-border-strong
    );
}


/* =========================================================
   ORGANIGRAMA
   ========================================================= */

.roles-responsibilities-org {
  overflow-x:
    hidden !important;
}


.roles-responsibilities-org-children {
  min-width:
    0;

  max-width:
    100%;

  border-left:
    2px solid
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-org-node {
  width:
    100%;

  max-width:
    100%;

  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-org-node__level {
  max-width:
    100%;

  border-color:
    var(
      --rr-border-strong
    );

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-weight:
    800;
}


/* =========================================================
   DRAWER
   ========================================================= */

.roles-responsibilities-drawer {
  max-width:
    100vw !important;

  overflow-x:
    hidden !important;

  border-left:
    2px solid
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-drawer__head {
  border-bottom:
    2px solid
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-drawer__body {
  overflow-x:
    hidden !important;

  overflow-y:
    auto;
}


.roles-responsibilities-drawer__role-icon {
  border-color:
    var(
      --rr-border-strong
    );
}


/* =========================================================
   DETAIL BLOCKS
   ========================================================= */

.roles-responsibilities-detail-block {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-detail-block__head {
  padding-bottom:
    8px;

  border-bottom:
    1px solid
    var(
      --rr-border
    );
}


.roles-responsibilities-role-summary > div,
.roles-responsibilities-objective,
.roles-responsibilities-list-item,
.roles-responsibilities-indicator,
.roles-responsibilities-assignment,
.roles-responsibilities-role-person {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-list-item__icon,
.roles-responsibilities-indicator__icon,
.roles-responsibilities-assignment__icon {
  border-color:
    var(
      --rr-border-strong
    );
}


/* =========================================================
   MODAL
   ========================================================= */

.roles-responsibilities-modal-layer {
  max-width:
    100vw;

  overflow-x:
    hidden !important;
}


.roles-responsibilities-modal {
  max-width:
    100%;

  overflow-x:
    hidden !important;

  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-modal__head {
  border-bottom:
    2px solid
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-modal__body {
  overflow-x:
    hidden !important;

  overflow-y:
    auto;
}


.roles-responsibilities-modal__footer {
  border-top:
    2px solid
    var(
      --rr-border-strong
    );
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.roles-responsibilities-field > span {
  font-weight:
    800;
}


.roles-responsibilities-field input,
.roles-responsibilities-field select,
.roles-responsibilities-field textarea,
.roles-responsibilities-editor-item__fields input,
.roles-responsibilities-editor-item__fields textarea {
  max-width:
    100%;

  border-color:
    var(
      --rr-border-strong
    );

  font-weight:
    700;
}


.roles-responsibilities-check {
  font-weight:
    800;
}


/* =========================================================
   EDITORES
   ========================================================= */

.roles-responsibilities-editor-item {
  border-color:
    var(
      --rr-border-strong
    );
}


.roles-responsibilities-editor-item__index {
  border-color:
    var(
      --rr-border-strong
    );

  font-weight:
    850;
}


/* =========================================================
   TOAST
   ========================================================= */

.roles-responsibilities-toast {
  border-width:
    2px;

  font-weight:
    700;
}


.roles-responsibilities-toast__body strong {
  font-weight:
    850;
}


/* =========================================================
   RESPONSIVE · 1400
   ========================================================= */

@media (
  max-width:
    1400px
) {
  .roles-responsibilities-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-roles-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-toolbar {
    grid-template-columns:
      minmax(
        0,
        2fr
      )
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-toolbar__search {
    grid-column:
      auto;
  }
}


/* =========================================================
   RESPONSIVE · 1100
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .roles-responsibilities-people-grid,
  .roles-responsibilities-roles-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-toolbar__search {
    grid-column:
      1 /
      -1;
  }


  .roles-responsibilities-detail-grid {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-role-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   RESPONSIVE · 850
   ========================================================= */

@media (
  max-width:
    850px
) {
  .roles-responsibilities-page {
    padding:
      5px;

    gap:
      6px;
  }


  .roles-responsibilities-head {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

    padding:
      10px;
  }


  .roles-responsibilities-head__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-update {
    grid-column:
      1 /
      -1;

    margin:
      0;

    padding:
      6px
      0
      8px;

    border-left:
      0;

    border-bottom:
      1px solid
      var(
        --rr-border
      );

    text-align:
      left;
  }


  .roles-responsibilities-head__actions
  .roles-responsibilities-btn {
    width:
      100%;
  }


  .roles-responsibilities-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-tabs {
    width:
      100%;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-tab {
    padding:
      0
      6px;

    font-size:
      9px;
  }


  .roles-responsibilities-view {
    padding:
      8px;
  }


  .roles-responsibilities-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    padding:
      7px;
  }


  .roles-responsibilities-toolbar__search {
    grid-column:
      1 /
      -1;
  }


  .roles-responsibilities-drawer {
    width:
      100vw !important;

    max-width:
      100vw !important;

    border-left:
      0;
  }


  .roles-responsibilities-drawer__head {
    padding:
      10px;
  }


  .roles-responsibilities-drawer__body {
    padding:
      7px;
  }


  .roles-responsibilities-modal-layer {
    padding:
      7px;
  }


  .roles-responsibilities-modal {
    width:
      100%;

    max-height:
      calc(
        100dvh -
        14px
      );
  }
}


/* =========================================================
   RESPONSIVE · 650
   ========================================================= */

@media (
  max-width:
    650px
) {
  .roles-responsibilities-head__brand {
    align-items:
      flex-start;

    gap:
      8px;
  }


  .roles-responsibilities-head__brand h1 {
    font-size:
      21px;
  }


  .roles-responsibilities-head__brand p {
    font-size:
      10.5px;

    font-weight:
      650;
  }


  .roles-responsibilities-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-kpi {
    min-height:
      105px;

    padding:
      9px;
  }


  .roles-responsibilities-kpi__body {
    margin-top:
      9px;
  }


  .roles-responsibilities-kpi__body > strong {
    font-size:
      24px;
  }


  .roles-responsibilities-kpi__body > p {
    font-size:
      8px;

    font-weight:
      650;
  }


  .roles-responsibilities-section-head {
    flex-direction:
      column;

    gap:
      6px;
  }


  .roles-responsibilities-section-head h2 {
    font-size:
      17px;
  }


  .roles-responsibilities-section-head > strong {
    width:
      fit-content;
  }


  .roles-responsibilities-toolbar {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-toolbar__search {
    grid-column:
      auto;
  }


  .roles-responsibilities-people-grid,
  .roles-responsibilities-roles-grid {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-person {
    padding:
      10px;
  }


  .roles-responsibilities-person__meta {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-person__meta
  > div:last-child {
    grid-column:
      1 /
      -1;
  }


  .roles-responsibilities-person__footer {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;
  }


  .roles-responsibilities-role-card__metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-org-children {
    margin-left:
      10px;

    padding-left:
      9px;
  }


  .roles-responsibilities-org-node {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );

    gap:
      7px;
  }


  .roles-responsibilities-org-node__level {
    grid-column:
      2;

    justify-self:
      start;

    max-width:
      100%;
  }


  .roles-responsibilities-role-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-indicators {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-assignment {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-assignment__dates {
    flex-wrap:
      wrap;

    white-space:
      normal;
  }


  .roles-responsibilities-assignment__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-assignment__actions
  .roles-responsibilities-btn {
    width:
      100%;
  }


  .roles-responsibilities-detail-block__head {
    flex-direction:
      column;

    gap:
      7px;
  }


  .roles-responsibilities-detail-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .roles-responsibilities-detail-actions
  .roles-responsibilities-btn {
    width:
      100%;
  }


  .roles-responsibilities-form-grid {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-field--wide {
    grid-column:
      auto;
  }


  .roles-responsibilities-editor-item {
    grid-template-columns:
      24px
      minmax(
        0,
        1fr
      )
      30px;

    gap:
      5px;

    padding:
      7px;
  }


  .roles-responsibilities-editor-item__split {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   RESPONSIVE · 450
   ========================================================= */

@media (
  max-width:
    450px
) {
  .roles-responsibilities-page {
    padding:
      3px;
  }


  .roles-responsibilities-head {
    padding:
      8px;
  }


  .roles-responsibilities-head__icon {
    width:
      36px;

    height:
      36px;

    flex:
      0
      0
      36px;
  }


  .roles-responsibilities-head__brand h1 {
    font-size:
      19px;
  }


  .roles-responsibilities-head__brand > div > span {
    font-size:
      8px;
  }


  .roles-responsibilities-head__brand p {
    font-size:
      9.5px;
  }


  .roles-responsibilities-head__actions {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-update {
    grid-column:
      auto;
  }


  .roles-responsibilities-summary {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-kpi {
    min-height:
      auto;
  }


  .roles-responsibilities-tabs {
    gap:
      2px;

    padding:
      3px;
  }


  .roles-responsibilities-tab {
    min-height:
      34px;

    gap:
      4px;

    padding:
      0
      4px;

    font-size:
      8.5px;
  }


  .roles-responsibilities-tab .icon {
    width:
      12px;

    height:
      12px;
  }


  .roles-responsibilities-view {
    padding:
      7px;
  }


  .roles-responsibilities-toolbar {
    padding:
      6px;
  }


  .roles-responsibilities-person__head {
    flex-wrap:
      wrap;
  }


  .roles-responsibilities-status {
    min-height:
      24px;

    font-size:
      9px;
  }


  .roles-responsibilities-person__meta {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-person__meta
  > div:last-child {
    grid-column:
      auto;
  }


  .roles-responsibilities-role-card__metrics {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-role-card__metrics
  > div {
    text-align:
      left;
  }


  .roles-responsibilities-role-summary {
    grid-template-columns:
      1fr;
  }


  .roles-responsibilities-drawer__identity {
    align-items:
      flex-start;
  }


  .roles-responsibilities-drawer__identity h2 {
    font-size:
      16px;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .roles-responsibilities-modal-layer {
    padding:
      4px;
  }


  .roles-responsibilities-modal {
    max-height:
      calc(
        100dvh -
        8px
      );

    border-radius:
      10px;
  }


  .roles-responsibilities-modal__head {
    padding:
      9px;
  }


  .roles-responsibilities-modal__head h2 {
    font-size:
      17px;
  }


  .roles-responsibilities-modal__body {
    padding:
      8px;
  }


  .roles-responsibilities-modal__footer {
    display:
      grid;

    grid-template-columns:
      1fr;

    padding:
      8px;
  }


  .roles-responsibilities-modal__footer
  .roles-responsibilities-btn {
    width:
      100%;
  }


  .roles-responsibilities-editor-item {
    grid-template-columns:
      22px
      minmax(
        0,
        1fr
      )
      28px;
  }


  .roles-responsibilities-editor-item__index {
    width:
      22px;

    height:
      22px;
  }


  .roles-responsibilities-toast {
    right:
      6px;

    bottom:
      6px;

    width:
      calc(
        100vw -
        12px
      );
  }
}


/* =========================================================
   PROTECCIÓN FINAL · CERO SCROLL HORIZONTAL
   ========================================================= */

.roles-responsibilities-page,
.roles-responsibilities-page *,
.roles-responsibilities-drawer,
.roles-responsibilities-drawer *,
.roles-responsibilities-modal-layer,
.roles-responsibilities-modal,
.roles-responsibilities-modal * {
  max-width:
    100%;
}


.roles-responsibilities-page img,
.roles-responsibilities-page svg,
.roles-responsibilities-drawer img,
.roles-responsibilities-drawer svg,
.roles-responsibilities-modal img,
.roles-responsibilities-modal svg {
  max-width:
    100%;
}


.roles-responsibilities-page input,
.roles-responsibilities-page select,
.roles-responsibilities-page textarea,
.roles-responsibilities-drawer input,
.roles-responsibilities-drawer select,
.roles-responsibilities-drawer textarea,
.roles-responsibilities-modal input,
.roles-responsibilities-modal select,
.roles-responsibilities-modal textarea {
  min-width:
    0;

  max-width:
    100%;
}


.roles-responsibilities-page p,
.roles-responsibilities-page span,
.roles-responsibilities-page strong,
.roles-responsibilities-page h1,
.roles-responsibilities-page h2,
.roles-responsibilities-page h3,
.roles-responsibilities-drawer p,
.roles-responsibilities-drawer span,
.roles-responsibilities-drawer strong,
.roles-responsibilities-drawer h2,
.roles-responsibilities-drawer h3,
.roles-responsibilities-modal p,
.roles-responsibilities-modal span,
.roles-responsibilities-modal strong,
.roles-responsibilities-modal h2 {
  overflow-wrap:
    anywhere;
}/* =========================================================
   ROLES Y RESPONSABILIDADES · MISMO TAMAÑO GENERAL
   QUE EMPLEADOS / ASISTENCIA
   PEGAR AL FINAL DEL CSS
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.roles-responsibilities-page {
  gap: 9px !important;
  padding: 8px !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.roles-responsibilities-head {
  min-height: 94px !important;

  gap: 14px !important;

  padding:
    13px
    15px !important;

  border-radius: 11px !important;
}


.roles-responsibilities-head__brand {
  gap: 10px !important;
}


.roles-responsibilities-head__icon {
  width: 46px !important;
  height: 46px !important;

  flex:
    0
    0
    46px !important;

  border-radius: 9px !important;
}


.roles-responsibilities-head__icon svg {
  width: 19px !important;
  height: 19px !important;
}


.roles-responsibilities-head__brand
> div
> span {
  margin-bottom: 3px !important;

  font-size: 8.5px !important;
}


.roles-responsibilities-head__brand h1 {
  font-size:
    clamp(
      22px,
      1.9vw,
      27px
    ) !important;
}


.roles-responsibilities-head__brand p {
  margin-top: 4px !important;

  font-size: 10px !important;

  line-height: 1.35 !important;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.roles-responsibilities-head__actions {
  gap: 5px !important;
}


.roles-responsibilities-update {
  min-width: 110px !important;

  padding:
    4px
    8px !important;
}


.roles-responsibilities-update span {
  font-size: 7.5px !important;
}


.roles-responsibilities-update strong {
  font-size: 10px !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.roles-responsibilities-btn {
  min-height: 35px !important;

  gap: 6px !important;

  padding:
    0
    11px !important;

  border-radius: 7px !important;

  font-size: 9.5px !important;
}


.roles-responsibilities-btn .icon,
.roles-responsibilities-btn svg {
  width: 13px !important;
  height: 13px !important;
}


.roles-responsibilities-icon-btn {
  width: 29px !important;
  height: 29px !important;

  flex:
    0
    0
    29px !important;

  border-radius: 7px !important;
}


.roles-responsibilities-icon-btn svg {
  width: 12px !important;
  height: 12px !important;
}


/* =========================================================
   KPIS
   ========================================================= */

.roles-responsibilities-summary {
  gap: 6px !important;
}


.roles-responsibilities-kpi {
  min-height: 82px !important;

  padding:
    9px
    10px !important;

  border-radius: 9px !important;
}


.roles-responsibilities-kpi__icon {
  width: 34px !important;
  height: 34px !important;

  flex:
    0
    0
    34px !important;

  border-radius: 7px !important;
}


.roles-responsibilities-kpi__icon svg {
  width: 15px !important;
  height: 15px !important;
}


.roles-responsibilities-kpi__flag {
  min-height: 23px !important;

  padding:
    0
    6px !important;

  font-size: 7.5px !important;
}


.roles-responsibilities-kpi__body {
  margin-top: 8px !important;
}


.roles-responsibilities-kpi__body > span {
  font-size: 7.5px !important;
}


.roles-responsibilities-kpi__body > strong {
  margin-top: 3px !important;

  font-size: 18px !important;
}


.roles-responsibilities-kpi__body > p {
  margin-top: 4px !important;

  font-size: 8px !important;
}


/* =========================================================
   TABS
   ========================================================= */

.roles-responsibilities-tabs {
  gap: 3px !important;

  padding: 3px !important;

  border-radius: 8px !important;
}


.roles-responsibilities-tab {
  min-height: 35px !important;

  gap: 5px !important;

  padding:
    0
    9px !important;

  border-radius: 6px !important;

  font-size: 9.5px !important;
}


.roles-responsibilities-tab .icon,
.roles-responsibilities-tab svg {
  width: 13px !important;
  height: 13px !important;
}


/* =========================================================
   VIEW
   ========================================================= */

.roles-responsibilities-view {
  padding: 10px !important;

  border-radius: 10px !important;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.roles-responsibilities-section-head {
  gap: 10px !important;

  margin-bottom: 8px !important;

  padding-bottom: 8px !important;
}


.roles-responsibilities-section-head
> div
> span {
  font-size: 7.5px !important;
}


.roles-responsibilities-section-head h2 {
  font-size: 18px !important;
}


.roles-responsibilities-section-head p {
  margin-top: 3px !important;

  font-size: 9px !important;
}


.roles-responsibilities-section-head
> strong {
  min-height: 28px !important;

  padding:
    0
    8px !important;

  font-size: 9px !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.roles-responsibilities-toolbar {
  gap: 6px !important;

  margin-bottom: 8px !important;

  padding: 7px !important;

  border-radius: 8px !important;
}


.roles-responsibilities-toolbar__search input,
.roles-responsibilities-toolbar__field select {
  height: 35px !important;

  font-size: 9.5px !important;
}


.roles-responsibilities-toolbar__search input {
  padding:
    0
    9px
    0
    31px !important;
}


.roles-responsibilities-toolbar__search
> .icon {
  left: 10px !important;

  width: 13px !important;
  height: 13px !important;
}


.roles-responsibilities-toolbar__field {
  gap: 3px !important;
}


.roles-responsibilities-toolbar__field
> span {
  font-size: 7.5px !important;
}


.roles-responsibilities-toolbar__check {
  min-height: 35px !important;

  padding:
    0
    8px !important;

  font-size: 8.5px !important;
}


/* =========================================================
   PEOPLE GRID
   ========================================================= */

.roles-responsibilities-people-grid {
  gap: 7px !important;
}


/* =========================================================
   PERSON CARD
   ========================================================= */

.roles-responsibilities-person {
  padding: 10px !important;

  border-radius: 9px !important;
}


.roles-responsibilities-person__head {
  gap: 7px !important;
}


.roles-responsibilities-person__identity {
  gap: 7px !important;
}


.roles-responsibilities-avatar {
  width: 32px !important;
  height: 32px !important;

  flex:
    0
    0
    32px !important;

  font-size: 9px !important;
}


.roles-responsibilities-avatar--large {
  width: 40px !important;
  height: 40px !important;

  flex:
    0
    0
    40px !important;

  font-size: 11px !important;
}


.roles-responsibilities-person__identity strong {
  font-size: 9.5px !important;
}


.roles-responsibilities-person__identity span {
  margin-top: 2px !important;

  font-size: 7.5px !important;
}


.roles-responsibilities-status {
  min-height: 25px !important;

  gap: 3px !important;

  padding:
    0
    7px !important;

  font-size: 8px !important;
}


.roles-responsibilities-status .icon,
.roles-responsibilities-status svg {
  width: 10px !important;
  height: 10px !important;
}


/* =========================================================
   PERSON ROLE
   ========================================================= */

.roles-responsibilities-person__role {
  gap: 7px !important;

  margin-top: 8px !important;

  padding: 8px !important;

  border-radius: 7px !important;
}


.roles-responsibilities-person__role-icon {
  width: 30px !important;
  height: 30px !important;

  flex:
    0
    0
    30px !important;
}


.roles-responsibilities-person__role-icon svg {
  width: 13px !important;
  height: 13px !important;
}


.roles-responsibilities-person__role small {
  font-size: 7px !important;
}


.roles-responsibilities-person__role strong {
  margin-top: 2px !important;

  font-size: 9.5px !important;
}


.roles-responsibilities-person__role
> div
> span {
  margin-top: 2px !important;

  font-size: 7.5px !important;
}


/* =========================================================
   PERSON META
   ========================================================= */

.roles-responsibilities-person__meta {
  gap: 5px !important;

  margin-top: 7px !important;
}


.roles-responsibilities-person__meta
> div {
  padding: 6px !important;
}


.roles-responsibilities-person__meta span {
  font-size: 7px !important;
}


.roles-responsibilities-person__meta strong {
  margin-top: 2px !important;

  font-size: 8.5px !important;
}


/* =========================================================
   PERSON FOOTER
   ========================================================= */

.roles-responsibilities-person__footer {
  gap: 7px !important;

  margin-top: 8px !important;

  padding-top: 7px !important;

  font-size: 7.5px !important;
}


.roles-responsibilities-person__open {
  font-size: 8px !important;
}


/* =========================================================
   ROLES GRID
   ========================================================= */

.roles-responsibilities-roles-grid {
  gap: 7px !important;
}


/* =========================================================
   ROLE CARD
   ========================================================= */

.roles-responsibilities-role-card {
  padding: 10px !important;

  border-radius: 9px !important;
}


.roles-responsibilities-role-card__head {
  gap: 6px !important;
}


.roles-responsibilities-role-card__icon {
  width: 32px !important;
  height: 32px !important;

  flex:
    0
    0
    32px !important;
}


.roles-responsibilities-role-card__icon svg {
  width: 14px !important;
  height: 14px !important;
}


.roles-responsibilities-role-card__body {
  margin-top: 8px !important;
}


.roles-responsibilities-role-card__body
> span {
  font-size: 7px !important;
}


.roles-responsibilities-role-card__body h3 {
  margin-top: 2px !important;

  font-size: 13px !important;
}


.roles-responsibilities-role-card__body small {
  margin-top: 2px !important;

  font-size: 7.5px !important;
}


.roles-responsibilities-role-card__body p {
  min-height: 32px !important;

  margin-top: 5px !important;

  font-size: 8px !important;
}


/* =========================================================
   ROLE METRICS
   ========================================================= */

.roles-responsibilities-role-card__metrics {
  gap: 4px !important;

  margin-top: 7px !important;

  padding-top: 7px !important;
}


.roles-responsibilities-role-card__metrics
> div {
  padding: 5px !important;
}


.roles-responsibilities-role-card__metrics
strong {
  font-size: 9.5px !important;
}


.roles-responsibilities-role-card__metrics
span {
  font-size: 6.5px !important;
}


/* =========================================================
   ORGANIGRAMA
   ========================================================= */

.roles-responsibilities-org {
  gap: 7px !important;
}


.roles-responsibilities-org-children {
  gap: 5px !important;

  margin-top: 5px !important;

  margin-left: 20px !important;

  padding-left: 14px !important;
}


.roles-responsibilities-org-node {
  gap: 7px !important;

  padding: 8px !important;

  border-radius: 8px !important;
}


.roles-responsibilities-org-node__body strong {
  font-size: 9.5px !important;
}


.roles-responsibilities-org-node__body span {
  font-size: 8px !important;
}


.roles-responsibilities-org-node__body small {
  font-size: 7px !important;
}


.roles-responsibilities-org-node__level {
  min-height: 24px !important;

  padding:
    0
    7px !important;

  font-size: 7.5px !important;
}


/* =========================================================
   EMPTY / STATE
   ========================================================= */

.roles-responsibilities-state,
.roles-responsibilities-empty {
  min-height: 200px !important;

  padding: 22px 15px !important;
}


.roles-responsibilities-state__icon,
.roles-responsibilities-empty__icon {
  width: 38px !important;
  height: 38px !important;

  margin-bottom: 6px !important;
}


.roles-responsibilities-state strong,
.roles-responsibilities-empty strong {
  font-size: 11px !important;
}


.roles-responsibilities-state p,
.roles-responsibilities-empty p {
  font-size: 8.5px !important;
}


/* =========================================================
   DRAWER
   ========================================================= */

.roles-responsibilities-drawer {
  width:
    min(
      650px,
      95vw
    ) !important;
}


.roles-responsibilities-drawer__head {
  gap: 9px !important;

  padding: 10px !important;
}


.roles-responsibilities-drawer__identity {
  gap: 8px !important;
}


.roles-responsibilities-drawer__identity
> div
> span {
  font-size: 7px !important;
}


.roles-responsibilities-drawer__identity h2 {
  font-size: 17px !important;
}


.roles-responsibilities-drawer__identity p {
  font-size: 8px !important;
}


.roles-responsibilities-drawer__role-icon {
  width: 40px !important;
  height: 40px !important;

  flex:
    0
    0
    40px !important;
}


.roles-responsibilities-drawer__role-icon svg {
  width: 17px !important;
  height: 17px !important;
}


.roles-responsibilities-drawer__body {
  padding: 8px !important;
}


/* =========================================================
   DETAIL BLOCK
   ========================================================= */

.roles-responsibilities-detail-block {
  margin-bottom: 7px !important;

  padding: 9px !important;

  border-radius: 9px !important;
}


.roles-responsibilities-detail-block__head {
  gap: 8px !important;

  margin-bottom: 7px !important;

  padding-bottom: 7px !important;
}


.roles-responsibilities-detail-block__head
> div:first-child
> span {
  font-size: 7px !important;
}


.roles-responsibilities-detail-block__head h3 {
  font-size: 13px !important;
}


.roles-responsibilities-detail-grid {
  gap: 7px !important;
}


/* =========================================================
   ROLE SUMMARY
   ========================================================= */

.roles-responsibilities-role-summary {
  gap: 4px !important;
}


.roles-responsibilities-role-summary
> div {
  padding: 6px !important;
}


.roles-responsibilities-role-summary span {
  font-size: 6.5px !important;
}


.roles-responsibilities-role-summary strong {
  font-size: 8.5px !important;
}


/* =========================================================
   OBJECTIVE
   ========================================================= */

.roles-responsibilities-objective {
  margin-top: 6px !important;

  padding: 7px !important;
}


.roles-responsibilities-objective
> span {
  font-size: 6.5px !important;
}


.roles-responsibilities-objective p {
  font-size: 8px !important;
}


/* =========================================================
   LIST ITEMS
   ========================================================= */

.roles-responsibilities-list {
  gap: 4px !important;
}


.roles-responsibilities-list-item {
  gap: 6px !important;

  padding: 6px !important;
}


.roles-responsibilities-list-item__icon {
  width: 26px !important;
  height: 26px !important;

  flex:
    0
    0
    26px !important;
}


.roles-responsibilities-list-item__icon svg {
  width: 12px !important;
  height: 12px !important;
}


.roles-responsibilities-list-item strong {
  font-size: 9px !important;
}


.roles-responsibilities-list-item p {
  font-size: 7.5px !important;
}


.roles-responsibilities-list-item small {
  font-size: 6.5px !important;
}


/* =========================================================
   INDICADORES
   ========================================================= */

.roles-responsibilities-indicators {
  gap: 4px !important;
}


.roles-responsibilities-indicator {
  gap: 6px !important;

  padding: 6px !important;
}


.roles-responsibilities-indicator__icon {
  width: 26px !important;
  height: 26px !important;

  flex:
    0
    0
    26px !important;
}


.roles-responsibilities-indicator__icon svg {
  width: 12px !important;
  height: 12px !important;
}


.roles-responsibilities-indicator strong {
  font-size: 9px !important;
}


.roles-responsibilities-indicator p,
.roles-responsibilities-indicator span {
  font-size: 7.5px !important;
}


/* =========================================================
   ASIGNACIONES
   ========================================================= */

.roles-responsibilities-assignments {
  gap: 4px !important;
}


.roles-responsibilities-assignment {
  gap: 7px !important;

  padding: 6px !important;
}


.roles-responsibilities-assignment__main {
  gap: 6px !important;
}


.roles-responsibilities-assignment__icon {
  width: 27px !important;
  height: 27px !important;

  flex:
    0
    0
    27px !important;
}


.roles-responsibilities-assignment__main
strong {
  font-size: 9px !important;
}


.roles-responsibilities-assignment__main
span,
.roles-responsibilities-assignment__dates {
  font-size: 7.5px !important;
}


/* =========================================================
   ROLE PEOPLE
   ========================================================= */

.roles-responsibilities-role-people {
  gap: 4px !important;
}


.roles-responsibilities-role-person {
  gap: 7px !important;

  padding: 6px !important;
}


.roles-responsibilities-role-person
strong {
  font-size: 9px !important;
}


.roles-responsibilities-role-person
small {
  font-size: 7.5px !important;
}


/* =========================================================
   MODAL
   ========================================================= */

.roles-responsibilities-modal-layer {
  padding: 12px !important;
}


.roles-responsibilities-modal {
  width:
    min(
      680px,
      100%
    ) !important;

  border-radius: 11px !important;
}


.roles-responsibilities-modal__head {
  gap: 9px !important;

  padding: 10px !important;
}


.roles-responsibilities-modal__head
> div
> span {
  font-size: 7px !important;
}


.roles-responsibilities-modal__head h2 {
  font-size: 17px !important;
}


.roles-responsibilities-modal__head p {
  margin-top: 3px !important;

  font-size: 8px !important;
}


.roles-responsibilities-modal__body {
  padding: 9px !important;
}


.roles-responsibilities-modal__footer {
  gap: 5px !important;

  padding:
    8px
    9px !important;
}


/* =========================================================
   FORM
   ========================================================= */

.roles-responsibilities-form-grid {
  gap: 7px !important;
}


.roles-responsibilities-field {
  gap: 4px !important;
}


.roles-responsibilities-field
> span {
  font-size: 7.5px !important;
}


.roles-responsibilities-field input,
.roles-responsibilities-field select {
  height: 35px !important;

  padding:
    0
    8px !important;

  font-size: 9.5px !important;
}


.roles-responsibilities-field textarea {
  min-height: 70px !important;

  padding: 7px 8px !important;

  font-size: 9.5px !important;
}


.roles-responsibilities-check {
  min-height: 32px !important;

  font-size: 8.5px !important;
}


/* =========================================================
   EDITOR
   ========================================================= */

.roles-responsibilities-editor {
  gap: 7px !important;
}


.roles-responsibilities-editor__list {
  gap: 5px !important;
}


.roles-responsibilities-editor-item {
  grid-template-columns:
    26px
    minmax(
      0,
      1fr
    )
    auto !important;

  gap: 6px !important;

  padding: 7px !important;

  border-radius: 8px !important;
}


.roles-responsibilities-editor-item__index {
  width: 26px !important;
  height: 26px !important;

  font-size: 8px !important;
}


.roles-responsibilities-editor-item__fields {
  gap: 4px !important;
}


.roles-responsibilities-editor-item__fields
input {
  height: 34px !important;

  font-size: 9px !important;
}


.roles-responsibilities-editor-item__fields
textarea {
  min-height: 58px !important;

  font-size: 9px !important;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 850px) {
  .roles-responsibilities-page {
    gap: 7px !important;
    padding: 5px !important;
  }


  .roles-responsibilities-head {
    gap: 8px !important;

    padding: 9px !important;
  }


  .roles-responsibilities-head__brand {
    gap: 7px !important;
  }


  .roles-responsibilities-head__icon {
    width: 38px !important;
    height: 38px !important;

    flex:
      0
      0
      38px !important;
  }


  .roles-responsibilities-head__icon svg {
    width: 16px !important;
    height: 16px !important;
  }


  .roles-responsibilities-head__brand h1 {
    font-size: 20px !important;
  }


  .roles-responsibilities-head__brand p {
    font-size: 9px !important;
  }


  .roles-responsibilities-btn {
    min-height: 35px !important;

    font-size: 9.5px !important;
  }


  .roles-responsibilities-kpi {
    min-height: 68px !important;

    padding: 8px !important;
  }


  .roles-responsibilities-kpi__body {
    margin-top: 6px !important;
  }


  .roles-responsibilities-kpi__body
  > strong {
    font-size: 16px !important;
  }


  .roles-responsibilities-kpi__body
  > span,
  .roles-responsibilities-kpi__body
  > p {
    font-size: 7.5px !important;
  }


  .roles-responsibilities-view {
    padding: 8px !important;
  }


  .roles-responsibilities-toolbar {
    padding: 7px !important;
  }


  .roles-responsibilities-toolbar__search
  input,
  .roles-responsibilities-toolbar__field
  select {
    height: 35px !important;
  }


  .roles-responsibilities-drawer {
    width: 100vw !important;

    max-width: 100vw !important;
  }


  .roles-responsibilities-modal-layer {
    padding: 7px !important;
  }


  .roles-responsibilities-modal {
    width: 100% !important;

    max-width: 100% !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .roles-responsibilities-page {
    gap: 6px !important;
    padding: 4px !important;
  }


  .roles-responsibilities-head {
    padding: 8px !important;
  }


  .roles-responsibilities-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .roles-responsibilities-kpi {
    min-height: 64px !important;
  }


  .roles-responsibilities-tabs {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .roles-responsibilities-tab {
    min-height: 35px !important;

    padding:
      0
      5px !important;

    font-size: 8.5px !important;
  }


  .roles-responsibilities-people-grid,
  .roles-responsibilities-roles-grid {
    grid-template-columns: 1fr !important;
  }


  .roles-responsibilities-person {
    padding: 9px !important;
  }


  .roles-responsibilities-person__identity
  strong {
    font-size: 9.5px !important;
  }


  .roles-responsibilities-person__role
  strong {
    font-size: 9.5px !important;
  }


  .roles-responsibilities-modal__head {
    padding: 9px !important;
  }


  .roles-responsibilities-modal__head h2 {
    font-size: 15px !important;
  }


  .roles-responsibilities-modal__body {
    padding: 8px !important;
  }
}


/* =========================================================
   MOBILE MUY CHICO
   ========================================================= */

@media (max-width: 390px) {
  .roles-responsibilities-page {
    padding: 3px !important;
  }


  .roles-responsibilities-summary {
    grid-template-columns: 1fr !important;
  }


  .roles-responsibilities-kpi {
    min-height: 58px !important;
  }


  .roles-responsibilities-head__actions {
    grid-template-columns: 1fr !important;
  }


  .roles-responsibilities-tabs {
    gap: 2px !important;

    padding: 2px !important;
  }


  .roles-responsibilities-tab {
    font-size: 8px !important;
  }
}