/*
 * Relpi Design System — ARQUIVO GERADO, NÃO EDITE.
 * Fonte: design_system/design-system.html
 * Gerado por: scripts/build_relpi_css.py
 */

/* ===== gather-original-css ===== */
/*
    ==========
    Variables.
    ==========
    */

    :root {
      --gather-layout-inner-max-width: 2000px;
      --gather-layout-header-height: 6rem;
    }

    /*
    ========
    Globals.
    ========
    */

    *,
    *:after,
    *:before {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      border: 0;
      box-sizing: border-box;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
      outline-offset: 2px;
      text-wrap: pretty;
      margin: 0;
      padding: 0;
    }

    html {
      cursor: default;
      font-size: 8px;
      overflow-x: hidden;
      overflow-y: auto;
    }

    body {
      color: #242424;
      background-color: #fff;

      font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica", "Arial", sans-serif;
      font-size: 2rem;
      line-height: 1.4;
      overflow-x: hidden;
    }

    h1 {
      font-size: 4rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.25;
    }

    h2 {
      font-size: 2.5rem;
      font-weight: 600;
    }

    button {
      appearance: none;
      background-color: transparent;
      cursor: pointer;
    }

    code {
      font-family: monospace;
    }

    /*
    =======
    Hidden.
    =======
    */

    [hidden] {
      display: none !important;
    }

    /*
    ==============
    Generic links.
    ==============
    */

    a:not([class]) {
      color: #5b5fc7;
      text-decoration: none;
    }

    a:not([class]):hover,
    a:not([class]):focus-visible {
      text-decoration: underline;
    }

    /*
    ======
    Modal.
    ======
    */

    .gather-modal {
      background-color: #fff;
      border-color: #ddd;
      border-radius: 1rem;
      border-style: solid;
      border-width: 1px;
      box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.25);
      padding-top: 3rem;
      padding-left: 3rem;
      padding-right: 3rem;
      padding-bottom: 3rem;

      margin: auto;
      width: 400px;
      max-width: calc(100% - 4rem);
      max-height: calc(100% - 4rem);
      overflow-y: auto;
    }

    .gather-modal::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
      transition-duration: 0.25s;
      transition-property: background-color;
      position: fixed;
      width: 100%;
      height: 100lvh;
    }

    /* Add `anchor` if supported. */
    @supports (position-anchor: --var) {
      @media (min-width: 700px) {
        .gather-modal[style*="position-anchor"] {
          inset: unset;
          margin: 0;

          position: absolute;
          top: calc(anchor(bottom) + 1rem);
          left: anchor(left);
        }
      }
    }

    .gather-modal__form {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto 1fr;
      gap: 2rem;
    }

    .gather-modal__title {
      grid-column-start: 1;
      grid-column-end: 2;

      grid-row-start: 1;
      grid-row-end: 1;
    }

    .gather-modal__close {
      border-radius: 50%;
      line-height: 1;
      width: 3rem;
      height: 3rem;
      overflow: hidden;
      position: relative;
    }

    .gather-modal__close:after,
    .gather-modal__close:before {
      content: "";
      background-color: #000;
      border-radius: 2px;
      width: 1px;
      height: 80%;

      position: absolute;
      top: 50%;
      left: 50%;
    }

    .gather-modal__close:before {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .gather-modal__close:after {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .gather-modal__close:hover:before,
    .gather-modal__close:hover:after {
      background-color: #5b5fc7;
      width: 2px;
    }

    @media (forced-colors: active) {
      .gather-modal__close:after,
      .gather-modal__close:before {
        background-color: ButtonText;
        forced-color-adjust: none;
      }

      .gather-modal__close:hover:before,
      .gather-modal__close:hover:after {
        background-color: Highlight;
      }
    }

    .gather-modal__content {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      grid-column-start: 1;
      grid-column-end: 3;

      grid-row-start: 2;
      grid-row-end: 2;
    }

    .gather-modal__content:has(input:invalid) .gather-button {
      color: #bdbdbd;
      background-color: #f0f0f0;
    }

    /*
    =======
    Layout.
    =======
    */

    .gather-layout {
      background-image: linear-gradient(
        to bottom right,
        #fef,
        #fff,
        #fef
      );
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
    }

    /*
    ===============
    Layout: header.
    ===============
    */

    .gather-layout__header {
      -webkit-backdrop-filter: blur(60px);
      backdrop-filter: blur(60px);
      background-color: rgba(255, 255, 255, 0.25);

      padding-left: 2rem;
      padding-right: 2rem;
      width: 100%;

      z-index: 2;
      position: fixed;
      top: 0;
      left: 0;
    }

    .gather-layout__header__inner {
      transform: translateZ(0);
    }

    @media (min-width: 1050px) {
      .gather-layout__header {
        padding-left: 4rem;
        padding-right: 4rem;
      }
    }

    .gather-layout__header__inner {
      display: flex;
      align-items: center;
      gap: 1rem;

      margin-left: auto;
      margin-right: auto;

      max-width: var(--gather-layout-inner-max-width);
      height: var(--gather-layout-header-height);
      width: 100%;
    }

    .gather-layout__header[data-is-scrolled="false"] [data-show-when-scrolled="true"] {
      /* Hide when not scrolled. */
      display: none;
    }

    @media (max-width: 699.9px) {
      .gather-layout__header[data-is-scrolled="true"] [data-show-when-scrolled="false"] {
        /* Hide when scrolled. */
        display: none;
      }
    }

    .gather-layout__header__title {
      display: flex;
      align-items: center;
      gap: 1rem;

      font-size: 1.75rem;
      font-weight: 620;
      line-height: 2.75rem;
      margin-right: auto;

      color: inherit;
      text-decoration: none;
    }

    @media (min-width: 700px) {
      .gather-layout__header__title {
        margin-left: 6rem;
      }
    }

    @media (min-width: 1050px) {
      .gather-layout__header__title {
        margin-left: 4rem;
      }
    }

    .gather-layout__header__title__image {
      width: 3rem;
      height: 3rem;
    }

    /*
    =============
    Layout: main.
    =============
    */

    .gather-layout__main {
      padding-left: 2rem;
      padding-right: 2rem;
    }

    @media (min-width: 1050px) {
      .gather-layout__main {
        padding-left: 4rem;
        padding-right: 4rem;
      }
    }

    .gather-layout__main__inner {
      display: flex;
      flex-direction: column;
      gap: 6rem;

      margin-left: auto;
      margin-right: auto;
      max-width: var(--gather-layout-inner-max-width);
      width: 100%;
    }

    /*
    ===============
    Layout: footer.
    ===============
    */

    .gather-layout__footer {
      display: flex;
      flex-direction: column;
      gap: 3rem;

      font-size: 1.75rem;
      font-weight: 400;

      padding-top: 8rem;
      padding-left: 2rem;
      padding-right: 2rem;
      padding-bottom: 2rem;
    }

    .gather-layout__footer__top {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
    }

    .gather-layout__footer__bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
    }

    @media (min-width: 1024px) {
      .gather-layout__footer__bottom {
        column-gap: 8rem;
        justify-content: center;
      }
    }

    .gather-layout__footer__bottom a {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      color: inherit;
    }

    /*
    ==========
    Hero grid.
    ==========
    */

    .gather-hero {
      margin-left: -2rem;
      margin-right: -2rem;
      position: relative;
    }

    .gather-hero__media {
      margin-bottom: 2rem;
      position: relative;
    }

    .gather-hero__media__inner {
      background-color: #d0d1e0;
      height: 300px;
      overflow: hidden;
    }

    .gather-hero__media__inner:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .gather-hero__media__inner__video {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    .gather-hero__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4rem;
      padding-left: 2rem;
      padding-right: 2rem;
    }

    @media (max-width: 699.9px) {
      .gather-hero__content {
        margin-left: 20px;
        margin-right: 20px;
      }
    }

    .gather-hero__content__text {
      display: flex;
      flex-direction: column;
      align-self: start;
      gap: 1rem;
    }

    .gather-hero__content__text p {
      font-size: 3rem;
      font-weight: 300;
      line-height: normal;
    }

    @media (min-width: 700px) {
      .gather-hero__media {
        margin-bottom: 0;
      }

      .gather-hero__media__inner {
        height: 630px;
      }

      .gather-hero__media__inner__video {
        object-position: 50% 45%;
        transform: translateX(-38%);
        width: 160%;

        position: relative;
        left: 50%;
      }

      .gather-hero__content {
        align-items: flex-start;
        padding-top: var(--gather-layout-header-height);
        padding-left: 8rem;
        padding-right: 0;

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

    @media (min-width: 700px) and (max-width: 1049.9px) {
      .gather-hero__content__text {
        background-image: linear-gradient(
          to right,
          rgba(215, 216, 229, 0.8),
          #D7D8E5
        );

        border-radius: 1rem;
        padding-top: 2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-bottom: 2rem;
        max-width: 425px;
      }
    }

    @media (min-width: 1050px) {
      .gather-hero {
        margin-left: -4rem;
        margin-right: -4rem;
      }

      .gather-hero__content__text {
        max-width: 45%;
      }

      .gather-hero__content__text h1,
      .gather-hero__content__text p {
        text-wrap: balance;
      }
    }

    @media (min-width: 2000px) {
      .gather-hero__media__inner {
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
      }
    }

    /*
    =============================
    Hero grid: play/pause button.
    =============================
    */

    .gather-video-button {
      /* Hide. */
      display: none;
      align-items: center;
      justify-content: center;

      background-color: #fff;
      border-color: #d1d1d1;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;

      width: 6rem;
      height: 6rem;

      transition-duration: 0.25s;
      transition-property: filter;

      z-index: 1;
      position: absolute;
      bottom: 2rem;
      right: 2rem;
    }

    .gather-video-button:hover {
      background-color: #f5f5f5;
    }

    @media (min-width: 700px) {
      .gather-video-button {
        bottom: 4rem;
        right: 4rem;
      }
    }

    .gather-hero:has(video[data-is-loaded="true"]) .gather-video-button {
      /* Show. */
      display: flex;
    }

    .gather-hero:has(video[data-is-playing="true"]) .gather-video-button__play,
    .gather-hero:has(video[data-is-playing="false"]) .gather-video-button__pause {
      /*
        - Hide "play" when playing.

        - Hide "pause" when paused.
      */
      display: none;
    }

    /*
    ===========
    Bento grid.
    ===========
    */

    .gather-bento-grid {
      display: grid;
      gap: 2rem;
      font-size: 2.5rem;
      font-weight: 350;
    }

    @media (min-width: 700px) {
      .gather-bento-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .gather-bento-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .gather-bento-grid__item {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      background-color: #fff;
      background-position: center bottom;
      background-size: cover;

      border-color: #f0f0f0;
      border-radius: 2rem;
      border-style: solid;
      border-width: 1px;

      padding-top: 4rem;
      padding-left: 4rem;
      padding-right: 4rem;
      padding-bottom: 4rem;

      overflow: hidden;
      transition-duration: 0.25s;
      transition-property: border-color, box-shadow;
    }

    .gather-icon-with-heading__text {
      display: flex;
      flex-direction: column;
    }

    @media (max-width: 699.9px) {
      .gather-bento-grid__item--align-bottom {
        background-image: none !important;
      }
    }

    @media (min-width: 700px) {
      .gather-bento-grid__item--align-bottom {
        padding-bottom: 0;
      }
    }

    @media (max-width: 699.9px) {
      .skype-redirect-bento-grid__item--align-bottom {
        background-image: none !important;
      }
    }

    @media (min-width: 1024px) {
      .gather-bento-grid__item--large {
        grid-column: span 2;
      }
    }

    /* Default + Skype bento: responsive grid (3 → 2 → 1 columns) */
    .gather-entry-source-default,
    .gather-entry-source-skype,
    .gather-whats-new-section {
      margin-left: 2rem;
      margin-right: 2rem;
    }

    @media (min-width: 700px) {
      .gather-entry-source-default,
      .gather-entry-source-skype,
      .gather-whats-new-section {
        margin-left: 4%;
        margin-right: 4%;
      }
    }

    @media (min-width: 1024px) {
      .gather-entry-source-default,
      .gather-entry-source-skype,
      .gather-whats-new-section {
        margin-left: 7%;
        margin-right: 7%;
      }
    }

    .gather-entry-source-default,
    .gather-entry-source-skype {
      grid-template-columns: 1fr;
    }

    @media (min-width: 700px) {
      .gather-entry-source-default,
      .gather-entry-source-skype {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .gather-entry-source-default,
      .gather-entry-source-skype {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .gather-entry-source-default .gather-bento-grid__item,
    .gather-entry-source-skype .gather-bento-grid__item {
      gap: 1.6rem;
      padding: 2.4rem;
    }

    @media (min-width: 700px) {
      .gather-entry-source-default .gather-bento-grid__item,
      .gather-entry-source-skype .gather-bento-grid__item {
        min-height: 39.2rem;
      }
    }

    .gather-entry-source-default .gather-bento-grid__item p:has(.gather-bento-image),
    .gather-entry-source-skype .gather-bento-grid__item p:has(.gather-bento-image) {
      justify-content: flex-start;
      align-items: flex-end;
    }

    .gather-entry-source-default .gather-bento-image,
    .gather-entry-source-skype .gather-bento-image {
      width: 100%;
      max-width: 20rem;
    }

    .gather-bento-image--wide {
      max-width: 23rem !important;
    }

    /* Paid feature badge */
    .gather-paid-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      min-width: 11.8rem;
      height: 3.2rem;
      padding: 0 0.8rem;
      font-size: 1.4rem;
      font-weight: 600;
      color: #5B5FC7;
      border: 1px solid #b4d6fa;
      border-radius: 1.6rem;
      background-color: #ebf3fc;
    }

    .gather-paid-badge img {
      width: 1.6rem;
      height: 1.6rem;
    }

    .gather-bento-grid__item > .gather-paid-badge {
      display: none;
    }

    .gather-bento-grid__item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .gather-bento-grid__item-header .gather-paid-badge {
      margin-left: auto;
    }

    .gather-bento-grid__item h3 + p {
      margin-top: -2rem;
    }

    .gather-bento-grid__item:has(.gather-bento-image):hover {
      box-shadow: 1px 1px 3rem 0 rgba(211, 205, 255, 0.4);
      position: relative;
      z-index: 1;
    }

    .gather-bento-grid__item:hover .gather-bento-image {
      transform: scale(1.05);
    }

    .gather-bento-grid__item p:has(.gather-bento-image) {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gather-bento-grid__item--align-bottom p:has(.gather-bento-image) {
      align-items: end;
    }

    /*
    =======================================
    Mobile bento: horizontal row (394-699px)
    =======================================
    */
    @media (max-width: 699px) {
      .gather-entry-source-default .gather-bento-grid__item,
      .gather-entry-source-skype .gather-bento-grid__item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 1.2rem;
        align-items: center;
        padding: 1.6rem;
        min-height: auto;
      }

      .gather-entry-source-default .gather-bento-grid__item-header,
      .gather-entry-source-skype .gather-bento-grid__item-header {
        grid-column: 1;
        grid-row: 1;
      }

      /* Hide desktop badge in header at mobile */
      .gather-entry-source-default .gather-bento-grid__item-header .gather-paid-badge,
      .gather-entry-source-skype .gather-bento-grid__item-header .gather-paid-badge {
        display: none;
      }

      .gather-entry-source-default .gather-icon-with-heading__text,
      .gather-entry-source-skype .gather-icon-with-heading__text {
        grid-column: 2;
        grid-row: 1;
      }

      /* Show mobile badge (direct child of item) */
      .gather-entry-source-default .gather-bento-grid__item > .gather-paid-badge,
      .gather-entry-source-skype .gather-bento-grid__item > .gather-paid-badge {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1;
      }

      .gather-entry-source-default .gather-icon-circle,
      .gather-entry-source-skype .gather-icon-circle {
        width: 48px;
        height: 48px;
      }

      .gather-entry-source-default .gather-icon-circle img,
      .gather-entry-source-skype .gather-icon-circle img {
        width: 24px;
        height: 24px;
      }
    }

    /*
    ==========================================
    Compact mobile bento: stacked (<=393px)
    ==========================================
    */
    @media (max-width: 393px) {
      .gather-entry-source-default .gather-bento-grid__item,
      .gather-entry-source-skype .gather-bento-grid__item {
        grid-template-columns: auto 1fr;
      }

      /* Badge wraps below text in column 2 */
      .gather-entry-source-default .gather-bento-grid__item > .gather-paid-badge,
      .gather-entry-source-skype .gather-bento-grid__item > .gather-paid-badge {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
      }
    }

    /*
    ======
    Icons.
    ======
    */

    .gather-icon-circle {
      background-color: #f6f6f6;
      border-color: transparent;
      border-radius: 50%;
      border-style: solid;
      border-width: 1px;

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

      width: 64px;
      height: 64px;
    }

    .gather-icon-circle--light {
      background-color: #fff;
      border-color: #d1d1d1;
    }

    .gather-icon-circle > svg {
      width: 32px;
      height: 32px;
    }

    /*
    ==================
    Icon with heading.
    ==================
    */

    .gather-icon-with-heading {
      display: grid;
      align-items: center;
      gap: 2rem;
    }

    .gather-icon-with-heading small {
      display: block;
      font-weight: normal;
    }

    .gather-bento-grid__item--large .gather-icon-with-heading {
      grid-template-columns: auto 1fr;
    }

    @media (max-width: 699.9px) {
      .gather-icon-with-heading {
        grid-template-columns: auto 1fr;
      }
    }
    
    /*
    =======
    Images.
    =======
    */

    .gather-bento-image {
      display: block;
      width: 80%;
      height: auto;
      transition-duration: 0.4s;
      transition-property: transform;
    }

    /*
    ========
    Buttons.
    ========
    */

    .gather-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;

      color: #000;
      background-color: #fff;

      border-color: #d1d1d1;
      border-radius: 999px;
      border-style: solid;
      border-width: 1px;

      font-weight: 600;
      text-align: start;
      text-decoration: none;

      padding-top: 0.75rem;
      padding-left: 1.75rem;
      padding-right: 1.75rem;
      padding-bottom: 0.75rem;

      transition-duration: 0.25s;
      transition-property: color, background-color, border-color;
    }

    .gather-button:hover {
      background-color: #f5f5f5;
      border-color: #c7c7c7;
    }

    .gather-button--small {
      font-size: 1.75rem;
      padding-top: 0.25rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-bottom: 0.25rem;
    }

    .gather-button--large {
      gap: 1rem;
      line-height: 3.5rem;
      padding-top: 2rem;
      padding-left: 2.5rem;
      padding-right: 2.5rem;
      padding-bottom: 2rem;
    }

    .gather-button--primary {
      color: #fff;
      background-color: #5b5fc7;
      border-color: transparent;
    }

    .gather-button--primary:hover {
      background-color: #4f52b2;
    }

    .gather-button--secondary {
      color: #5b5fc7;
    }

    .gather-button--wide {
      text-align: center;
      width: 100%;
    }

    .gather-button--plain {
      background-color: transparent;
      border-color: transparent;
      color: #424242;
    }

    .gather-button--plain:hover {
      border-color: transparent;
    }

    /*
    =============
    Button group.
    =============
    */

    .gather-button-group {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    @media (min-width: 700px) {
      .gather-button-group {
        align-self: flex-start;
        justify-content: flex-start;
      }
    }
         .gather-button-group > span > .gather-button {
      width: 100%;
    }

    @media (min-width: 700px) {
      .gather-button-group {
        flex-direction: row;
      }
    }

    /*
    ===========
    Focus trap.
    ===========
    */

    .gather-focus-trap {
      opacity: 0;
      overflow: hidden;
      width: 0;
      height: 0;
      position: fixed;
      top: 0;
      left: 0;
    }

    /*
    ======
    Input.
    ======
    */

    .gather-input-label {
      display: inline-block;
      margin-bottom: 0.5rem;
    }

    .gather-input-label__required {
      text-decoration: none;
    }

    .gather-input-wrap {
      display: block;
      position: relative;
    }

    .gather-input-wrap:after {
      content: "";
      border-bottom-color: #5b5fc7;
      border-bottom-style: solid;
      border-bottom-width: 2px;

      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;

      height: 4px;
      transition-duration: 0.05s;
      transition-property: transform;
      transform: scaleX(0);

      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .gather-input-wrap:focus-within:after {
      transform: scaleX(1);
    }

    .gather-input {
      appearance: none;
      background-color: #fff;

      display: block;
      outline: 0;

      border-color: #d1d1d1;
      border-bottom-color: #767676;

      border-radius: 0.5rem;
      border-style: solid;
      border-width: 1px;

      padding-top: 0.625rem;
      padding-left: 1rem;
      padding-right: 1rem;
      padding-bottom: 0.875rem;
      width: 100%;
    }

    .gather-input::placeholder {
      color: #707070;
    }

    /*
    ======================
    Media query hide/show.
    ======================
    */

    @media (max-width: 699.9px) {
      .gather-hide-when-media-mobile {
        display: none !important;
      }
    }

    @media (min-width: 700px) {
      .gather-hide-when-media-desktop {
        display: none !important;
      }
    }

    /*
    ====================
    What's new section.
    ====================
    */

    .gather-whats-new-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 2rem;
      padding: 4rem;
      height: 240px;
      overflow: hidden;
    }


    .gather-whats-new-section h2 {
      font-size: 2.5rem;
      font-weight: 600;
      font-style: semibold;
      line-height: 1.4;
      letter-spacing: 0;
      text-align: center;
      vertical-align: middle;
      z-index: 1;
      position: relative;
    }

    .gather-whats-new-section p {
      font-size: 2.5rem;
      font-weight: 350;
      max-width: 600px;
      z-index: 1;
      position: relative;
    }

    .gather-whats-new-button {
      width: 331px;
      height: 56px;
      border-radius: 100px;
      border-width: 1px;
      opacity: 1;
      gap: 12px;
      margin-top: 16px;
      padding-left: 20px;
      padding-right: 20px;
      z-index: 1;
      position: relative;
      color: #5B5FC7;
      background-color: #fff;
      border-color: #d1d1d1;
      font-size: 2rem;
    }

    .gather-whats-new-button:hover {
      background-color: #f5f5f5;
      border-color: #c7c7c7;
    }

    .gather-whats-new-button span {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 2rem;
      font-weight: 600;
      font-style: normal;
      line-height: 1.4;
      letter-spacing: 0%;
    }

    @media (max-width: 699px) {
      .gather-whats-new-section {
        background-size: auto 100%;
        background-position: center center;
      }
    }

    /*
    =================
    Entry source detection.
    =================
    */

    html:not([data-entry-source]) [class*="gather-entry-source-"] {
      display: none !important;
    }

    html[data-entry-source="skype"] .gather-entry-source-not-skype,
    html:not([data-entry-source="skype"]) .gather-entry-source-skype {
      display: none !important;
    }

    html[data-entry-source="default"] .gather-entry-source-not-default,
    html:not([data-entry-source="default"]) .gather-entry-source-default {
      display: none !important;
    }


    /*
    =================
    Device detection.
    =================
    */

    html:not([data-device-type]) [class*="gather-device-type-"] {
      display: none !important;
    }

    html[data-device-type="android"] .gather-device-type-not-android,
    html:not([data-device-type="android"]) .gather-device-type-android {
      display: none !important;
    }

    html[data-device-type="desktop"] .gather-device-type-not-desktop,
    html:not([data-device-type="desktop"]) .gather-device-type-desktop {
      display: none !important;
    }

    html[data-device-type="ios"] .gather-device-type-not-ios,
    html:not([data-device-type="ios"]) .gather-device-type-ios {
      display: none !important;
    }

    /*
    ============
    Experiments.
    ============
    */

    [data-experiment-output] {
      opacity: 0;
    }

    [data-experiment-loaded="true"] {
      opacity: 1;
    }

    [data-experiment-output]:empty {
      display: none !important;
    }

    /*
    ==============
    Cookie banner.
    ==============
    */

    #wcpConsentBannerCtrl {
      display: grid !important;
      gap: 4rem !important;

      background-color: #fff !important;
      border-color: #f0f0f0 !important;
      border-style: solid !important;
      border-width: 1px !important;

      border-top-left-radius: 2rem !important;
      border-top-right-radius: 2rem !important;
      padding: 3rem !important;

      max-width: var(--gather-layout-inner-max-width) !important;
      transform: translateX(-50%) !important;

      position: fixed !important;
      bottom: 0 !important;
      left: 50% !important;
    }

    @media (min-width: 700px) {
      .gather-cookie-banner:not(:empty) {
        padding-top: 150px;
      }

      #wcpConsentBannerCtrl {
        grid-template-columns: 1fr auto !important;
      }
    }

    #wcpConsentBannerCtrl * {
      font-size: 1.5rem !important;
      line-height: 1.333 !important;
    }

    #wcpConsentBannerCtrl > div {
      margin: 0 !important;
    }

    #wcpConsentBannerCtrl span:has(svg) {
      display: none !important;
    }

    #wcpConsentBannerCtrl div:has(> p) {
      display: grid !important;
      align-items: center !important;
      padding: 0 !important;
      width: auto !important;
    }

    #wcpConsentBannerCtrl p {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 2rem !important;
      color: #424242 !important;
    }

    #wcpConsentBannerCtrl a,
    #wcpCookiePreferenceCtrl a {
      color: #4f52b2 !important;
      text-decoration: none !important;
    }

    #wcpConsentBannerCtrl a:hover,
    #wcpCookiePreferenceCtrl a:hover {
      text-decoration: underline !important;
    }

    #wcpConsentBannerCtrl div:has(> button) {
      align-self: start !important;
      display: grid !important;
      grid-template-columns: repeat(3, auto) !important;
      gap: 2rem !important;
      padding: 0 !important;
      width: auto !important;
    }

    @media (max-width: 699.9px) {
      #wcpConsentBannerCtrl div:has(> button) {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(2, auto) !important;
        width: 100% !important;
      }

      #wcpConsentBannerCtrl button:nth-of-type(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
      }

      #wcpConsentBannerCtrl button:nth-of-type(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
      }

      #wcpConsentBannerCtrl button:nth-of-type(3) {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
      }
    }

    #wcpConsentBannerCtrl button,
    #wcpCookiePreferenceCtrl button:not([tabindex]) {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.5rem !important;

      color: #000 !important;
      background-color: #fff !important;

      border-color: #d1d1d1 !important;
      border-radius: 999px !important;
      border-style: solid !important;
      border-width: 1px !important;
      box-shadow: none !important;

      font-weight: 600 !important;
      text-align: start !important;
      text-decoration: none !important;

      min-width: 0 !important;
      padding-top: 0.75rem !important;
      padding-left: 1.75rem !important;
      padding-right: 1.75rem !important;
      padding-bottom: 0.75rem !important;

      transition-duration: 0.25s !important;
      transition-property: color, background-color, border-color !important;
    }

    #wcpConsentBannerCtrl button:hover,
    #wcpCookiePreferenceCtrl button:not([tabindex]):not(:disabled):hover {
      background-color: #f5f5f5 !important;
      border-color: #c7c7c7 !important;
    }

    /*
    =============
    Cookie modal.
    =============
    */

    #wcpCookiePreferenceCtrl {
      background-color: rgba(0, 0, 0, 0.5) !important;
    }

    #wcpCookiePreferenceCtrl * {
      margin: 0 !important;
      padding: 0 !important;
    }

    #wcpCookiePreferenceCtrl [aria-modal="true"] {
      background-color: #fff !important;
      border-color: #ddd !important;
      border-radius: 1rem !important;
      border-style: solid !important;
      border-width: 1px !important;
      box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.25) !important;

      width: calc(100% - 4rem) !important;
      height: calc(100% - 4rem) !important;

      max-width: 640px !important;
      max-height: 640px !important;

      transform: translate(-50%, -50%) !important;
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
    }

    #wcpCookiePreferenceCtrl [aria-modal="true"] > button {
      color: transparent !important;
      background-color: transparent !important;
      border-radius: 50% !important;

      float: none !important;
      font-size: 0 !important;
      line-height: 1 !important;
      overflow: hidden !important;
      width: 3rem !important;
      height: 3rem !important;

      position: absolute !important;
      top: 2rem !important;
      right: 2rem !important;
    }

    #wcpCookiePreferenceCtrl [aria-modal="true"] > button:after,
    #wcpCookiePreferenceCtrl [aria-modal="true"] > button:before {
      content: ""  !important;
      background-color: #000 !important;
      border-radius: 2px !important;
      width: 1px !important;
      height: 80% !important;

      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
    }

    #wcpCookiePreferenceCtrl [aria-modal="true"] > button:before {
      transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #wcpCookiePreferenceCtrl [aria-modal="true"] > button:after {
      transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #wcpCookiePreferenceCtrl [aria-modal="true"] > button:hover:before,
    #wcpCookiePreferenceCtrl [aria-modal="true"] > button:hover:after {
      background-color: #5b5fc7 !important;
      width: 2px !important;
    }

    #wcpCookiePreferenceCtrl [role="document"] {
      display: grid !important;
      grid-template-rows: auto 1fr auto !important;
      gap: 3rem !important;
      padding: 3rem !important;
      height: 100% !important;
    }

    #wcpCookiePreferenceCtrl form {
      margin-left: -3rem !important;
      margin-right: -3rem !important;

      padding-top: 0.5rem !important;
      padding-left: 3rem !important;
      padding-right: 3rem !important;
      padding-bottom: 0.5rem !important;

      overflow-x: hidden !important;
      overflow-y: auto !important;

      height: auto !important;
    }

    #wcpCookiePreferenceCtrl form,
    #wcpCookiePreferenceCtrl form dl,
    #wcpCookiePreferenceCtrl form dt,
    #wcpCookiePreferenceCtrl form dt > * {
      display: flex !important;
      flex-direction: column !important;
      gap: 2rem !important;
    }

    #wcpCookiePreferenceCtrl form + div:has(> button) {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 2rem !important;
      margin: 0 !important;
    }

    #wcpCookiePreferenceCtrl form + div > button {
      float: none !important;
      width: auto !important;
    }

    #wcpCookiePreferenceCtrl form + div > button:disabled {
      opacity: 0.5 !important;
    }

    #wcpCookiePreferenceCtrl form + div > button:nth-of-type(1) {
      color: #fff !important;
      background-color: #4f52b2 !important;
      border-color: transparent !important;
      order: 1 !important;
    }

    #wcpCookiePreferenceCtrl form + div > button:nth-of-type(1):not([disabled]):hover {
      background-color: #5b5fc7 !important;
    }

    #wcpCookiePreferenceCtrl div:has(> div > input[type="radio"]) {
      display: flex !important;
      gap: 2rem !important;
    }

    #wcpCookiePreferenceCtrl div:has(> input[type="radio"]) {
      display: flex !important;
      gap: 1rem !important;
      position: static !important;
    }

    #wcpCookiePreferenceCtrl input[type="radio"] {
      appearance: auto !important;
      accent-color: #4f52b2 !important;
      position: static !important;

      width: auto !important;
      height: auto !important;

      min-width: 2.5rem !important;
      min-height: 2.5rem !important;
    }

    #wcpCookiePreferenceCtrl label:after,
    #wcpCookiePreferenceCtrl label:before {
      display: none !important;
    }

    .gather-hero-placeholder-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @media (min-width: 700px) and (max-width: 899px) {
      .gather-hero-placeholder-img {
        object-position: left center;
        transform: translateX(3%) scale(1.2);
        transform-origin: left center;
      }
    }

    @media (min-width: 900px) {
      .gather-hero-placeholder-img {
        object-position: left center;
        transform: scale(1.3);
        transform-origin: left center;
      }
    }

/* ===== relpi-app-css ===== */
/*
  ======================================================================
  CAMADA DE APLICAÇÃO — Fluent 2 (tema "Teams Light" / "Teams Dark")
  ======================================================================
  Complementa o CSS gather-* (landing do Teams) com os componentes de
  aplicação que ele não tem. Valores medidos no Storybook oficial do
  Fluent UI React v9 (storybooks.fluentui.dev/react) com o tema Teams,
  via getComputedStyle, em 15/10/2026.

  Regras desta camada:
  - Tokens com os NOMES ORIGINAIS do Fluent (--colorBrandBackground...),
    para rastrear a origem de cada valor.
  - Classes com prefixo relpi-*; nenhuma classe gather-* é redefinida,
    exceto no bloco de tema escuro (que o gather não tem).
  - "Composição" = padrão que não existe pronto no Fluent nem no gather,
    montado só com tokens desta camada.
  ======================================================================
*/

/* ---------- Tokens: Teams Light ---------- */
:root {
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundInverted: #ffffff;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground1Selected: #ebebeb;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground3Hover: #ebebeb;
  --colorNeutralBackground4: #f0f0f0;
  --colorNeutralBackground4Hover: #fafafa;
  --colorNeutralBackground5: #ebebeb;
  --colorNeutralBackground6: #e6e6e6;
  --colorNeutralBackgroundDisabled: #f0f0f0;
  --colorNeutralBackgroundInverted: #292929;
  --colorSubtleBackgroundHover: #f5f5f5;
  --colorSubtleBackgroundPressed: #e0e0e0;
  --colorSubtleBackgroundSelected: #ebebeb;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke1Pressed: #b3b3b3;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStroke3: #f0f0f0;
  --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeAccessibleHover: #575757;
  --colorNeutralStrokeDisabled: #e0e0e0;
  --colorStrokeFocus1: #ffffff;
  --colorStrokeFocus2: #000000;
  --colorBrandBackground: #5b5fc7;
  --colorBrandBackgroundHover: #4f52b2;
  --colorBrandBackgroundPressed: #383966;
  --colorBrandBackground2: #e8ebfa;
  --colorBrandBackground2Hover: #dce0fa;
  --colorBrandForeground1: #5b5fc7;
  --colorBrandForeground2: #4f52b2;
  --colorBrandForegroundLink: #4f52b2;
  --colorBrandForegroundLinkHover: #444791;
  --colorBrandStroke1: #5b5fc7;
  --colorBrandStroke2: #c5cbfa;
  --colorCompoundBrandBackground: #5b5fc7;
  --colorCompoundBrandBackgroundHover: #4f52b2;
  --colorNeutralStencil1: #e6e6e6;
  --colorNeutralStencil2: #fafafa;
  --colorBackgroundOverlay: rgba(0, 0, 0, 0.4);
  --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessBackground3: #107c10;
  --colorStatusSuccessForeground1: #0e700e;
  --colorStatusSuccessBorder1: #9fd89f;
  --colorStatusWarningBackground1: #fff9f5;
  --colorStatusWarningBackground3: #f7630c;
  --colorStatusWarningForeground1: #bc4b09;
  --colorStatusWarningBorder1: #fdcfb4;
  --colorStatusDangerBackground1: #fdf3f4;
  --colorStatusDangerBackground3: #c50f1f;
  --colorStatusDangerForeground1: #b10e1c;
  --colorStatusDangerBorder1: #eeacb2;
  --colorPaletteRedBackground3: #d13438;
  --colorPaletteRedForeground1: #bc2f32;
  --colorPaletteRedBorder2: #d13438;
  --colorPaletteGreenBackground3: #107c10;
  --colorPaletteDarkOrangeBackground3: #da3b01;
  --colorPaletteYellowBackground3: #fde300;
  --colorPaletteMarigoldBackground3: #eaa300;
  --colorPaletteLightGreenForeground3: #13a10e;
  --colorPaletteBerryForeground3: #c239b3;
  --colorPaletteRedForeground3: #d13438;
  --shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
  --shadow64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);

  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;
  --borderRadiusCircular: 10000px;

  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --fontSizeHero700: 28px;
  --fontSizeHero800: 32px;
  --lineHeightBase100: 14px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;
  --lineHeightHero700: 36px;
  --lineHeightHero800: 40px;
  --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
  --fontFamilyNumeric: Bahnschrift, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;

  --durationUltraFast: 50ms;
  --durationFaster: 100ms;
  --durationFast: 150ms;
  --durationNormal: 200ms;
  --durationGentle: 250ms;
  --durationSlow: 300ms;
  --durationSlower: 400ms;
  --durationUltraSlow: 500ms;
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
  --curveEasyEaseMax: cubic-bezier(0.8, 0, 0.2, 1);
  --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
  --curveDecelerateMax: cubic-bezier(0.1, 0.9, 0.2, 1);
  --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
  --curveLinear: cubic-bezier(0, 0, 1, 1);

  --relpi-nav-width: 260px;
}

/* ---------- Tokens: Teams Dark ---------- */
[data-theme="dark"] {
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground3: #adadad;
  --colorNeutralForeground4: #999999;
  --colorNeutralForegroundDisabled: #5c5c5c;
  --colorNeutralForegroundInverted: #242424;
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground1Hover: #3d3d3d;
  --colorNeutralBackground1Pressed: #1f1f1f;
  --colorNeutralBackground1Selected: #383838;
  --colorNeutralBackground2: #242424;
  --colorNeutralBackground3: #1f1f1f;
  --colorNeutralBackground3Hover: #333333;
  --colorNeutralBackground4: #141414;
  --colorNeutralBackground4Hover: #292929;
  --colorNeutralBackground5: #0a0a0a;
  --colorNeutralBackground6: #333333;
  --colorNeutralBackgroundDisabled: #141414;
  --colorNeutralBackgroundInverted: #ffffff;
  --colorSubtleBackgroundHover: #383838;
  --colorSubtleBackgroundPressed: #2e2e2e;
  --colorSubtleBackgroundSelected: #333333;
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke1Hover: #757575;
  --colorNeutralStroke1Pressed: #6b6b6b;
  --colorNeutralStroke2: #525252;
  --colorNeutralStroke3: #3d3d3d;
  --colorNeutralStrokeAccessible: #adadad;
  --colorNeutralStrokeAccessibleHover: #bdbdbd;
  --colorNeutralStrokeDisabled: #424242;
  --colorStrokeFocus1: #000000;
  --colorStrokeFocus2: #ffffff;
  --colorBrandBackground: #4f52b2;
  --colorBrandBackgroundHover: #5b5fc7;
  --colorBrandBackground2: #2f2f4a;
  --colorBrandBackground2Hover: #383966;
  --colorBrandForeground1: #7f85f5;
  --colorBrandForeground2: #aab1fa;
  --colorBrandForegroundLink: #7f85f5;
  --colorBrandForegroundLinkHover: #9299f7;
  --colorBrandStroke1: #7f85f5;
  --colorBrandStroke2: #3d3e78;
  --colorCompoundBrandBackground: #7f85f5;
  --colorCompoundBrandBackgroundHover: #9299f7;
  --colorNeutralStencil1: #575757;
  --colorNeutralStencil2: #333333;
  --colorBackgroundOverlay: rgba(0, 0, 0, 0.5);
  --colorStatusSuccessBackground1: #052505;
  --colorStatusSuccessForeground1: #54b054;
  --colorStatusSuccessBorder1: #107c10;
  --colorStatusWarningBackground1: #4a1e04;
  --colorStatusWarningForeground1: #faa06b;
  --colorStatusWarningBorder1: #f7630c;
  --colorStatusDangerBackground1: #3b0509;
  --colorStatusDangerForeground1: #dc626d;
  --colorStatusDangerBorder1: #c50f1f;
  --colorPaletteRedForeground1: #e37d80;
  --colorPaletteRedBorder2: #e37d80;
  --colorPaletteLightGreenForeground3: #3db838;
  --colorPaletteBerryForeground3: #d161c4;
  --colorPaletteRedForeground3: #e37d80;
  --shadow2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
  --shadow28: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28);
  --shadow64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
  color: var(--colorNeutralForeground1);
}

/* ---------- Tema escuro para as classes gather-* (o original só tem tema claro) ---------- */
[data-theme="dark"].gather-layout,
[data-theme="dark"] .gather-layout {
  background-image: none;
  background-color: var(--colorNeutralBackground3);
}
[data-theme="dark"] body { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground3); }
[data-theme="dark"] .gather-layout__header { background-color: rgba(41, 41, 41, 0.6); }
[data-theme="dark"] .gather-button { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); border-color: var(--colorNeutralStroke1); }
[data-theme="dark"] .gather-button:hover { background-color: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); }
[data-theme="dark"] .gather-button--primary { color: #fff; background-color: var(--colorBrandBackground); border-color: transparent; }
[data-theme="dark"] .gather-button--primary:hover { background-color: var(--colorBrandBackgroundHover); }
[data-theme="dark"] .gather-button--secondary { color: var(--colorBrandForeground1); }
[data-theme="dark"] .gather-button--plain { color: var(--colorNeutralForeground2); background-color: transparent; border-color: transparent; }
[data-theme="dark"] .gather-input { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); border-color: var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); }
[data-theme="dark"] .gather-input::placeholder { color: var(--colorNeutralForeground4); }
[data-theme="dark"] .gather-input-wrap:after { border-bottom-color: var(--colorCompoundBrandBackground); }
[data-theme="dark"] .gather-modal { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); border-color: var(--colorNeutralStroke2); }
[data-theme="dark"] .gather-modal__close:after,
[data-theme="dark"] .gather-modal__close:before { background-color: var(--colorNeutralForeground1); }
[data-theme="dark"] .gather-bento-grid__item { background-color: var(--colorNeutralBackground1); border-color: var(--colorNeutralStroke3); }
[data-theme="dark"] .gather-icon-circle { background-color: var(--colorNeutralBackground6); }
[data-theme="dark"] .gather-paid-badge { color: var(--colorBrandForeground2); background-color: var(--colorBrandBackground2); border-color: var(--colorBrandStroke2); }
[data-theme="dark"] a:not([class]) { color: var(--colorBrandForegroundLink); }

/* ---------- Foco (Fluent: anel de 2px colorStrokeFocus2) ---------- */
.relpi-focus-ring:focus-visible,
.relpi-nav__item:focus-visible,
.relpi-tab:focus-visible,
.relpi-icon-button:focus-visible,
.relpi-breadcrumb__link:focus-visible,
.relpi-accordion__header:focus-visible,
.relpi-menu__item:focus-visible,
.relpi-page:focus-visible,
.relpi-tag__dismiss:focus-visible,
.relpi-table__sort:focus-visible {
  outline: 2px solid var(--colorStrokeFocus2);
  outline-offset: 0;
}

/* ---------- Tipografia de aplicação (rampa Fluent) ---------- */
.relpi-text-caption2 { font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); font-weight: 400; }
.relpi-text-caption1 { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: 400; }
.relpi-text-caption1-strong { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: 600; }
.relpi-text-body1 { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: 400; }
.relpi-text-body1-strong { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: 600; }
.relpi-text-body2 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: 400; }
.relpi-text-subtitle2 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: 600; }
.relpi-text-subtitle1 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: 600; }
.relpi-text-title3 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: 600; }
.relpi-text-title2 { font-size: var(--fontSizeHero700); line-height: var(--lineHeightHero700); font-weight: 600; }
.relpi-text-title1 { font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); font-weight: 600; }
.relpi-text-muted { color: var(--colorNeutralForeground3); }
.relpi-text-numeric { font-family: var(--fontFamilyNumeric); font-variant-numeric: tabular-nums; }
.relpi-text-mono { font-family: var(--fontFamilyMonospace); }

/* ---------- Ícone (Fluent System Icons, SVG inline com currentColor) ---------- */
.relpi-icon { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; fill: currentColor; vertical-align: middle; }
.relpi-icon--16 { width: 16px; height: 16px; }
.relpi-icon--24 { width: 24px; height: 24px; }
.relpi-icon--32 { width: 32px; height: 32px; }

/* ---------- Botão de ícone (subtle) ---------- */
.relpi-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--colorNeutralForeground2);
  background-color: transparent;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}
.relpi-icon-button:hover { color: var(--colorBrandForeground1); background-color: var(--colorSubtleBackgroundHover); }
.relpi-icon-button:active { background-color: var(--colorSubtleBackgroundPressed); }
.relpi-icon-button:disabled { color: var(--colorNeutralForegroundDisabled); background-color: transparent; cursor: not-allowed; }
.relpi-icon-button--small { width: 24px; height: 24px; }

/* ---------- Navegação lateral (Fluent Nav) ---------- */
.relpi-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: var(--relpi-nav-width);
  padding: 8px 4px 24px 10px;
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground4);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.relpi-nav__app {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 8px 8px 10px;
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
  font-weight: 600;
  text-decoration: none;
}
.relpi-nav__section {
  padding: 12px 10px 4px;
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
  font-weight: 600;
}
.relpi-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 10px 8px 10px 10px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  background-color: transparent;
  text-decoration: none;
  transition: background var(--durationFaster) var(--curveLinear);
}
.relpi-nav__item:hover { background-color: var(--colorNeutralBackground4Hover); }
.relpi-nav__item[aria-current="page"] { font-weight: 600; }
.relpi-nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  width: 4px;
  height: 20px;
  border-radius: var(--borderRadiusCircular);
  background-color: var(--colorCompoundBrandBackground);
}
.relpi-nav__item[aria-current="page"] .relpi-icon { color: var(--colorCompoundBrandBackground); }
.relpi-nav__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Abas (Fluent TabList) ---------- */
.relpi-tabs { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.relpi-tabs--vertical { flex-direction: column; align-items: stretch; }
.relpi-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 44px;
  padding: 12px 10px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  background-color: transparent;
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: 400;
  text-decoration: none;
}
/* Reserva a largura do texto em negrito para a aba não "pular" ao ser selecionada (técnica do Fluent). */
.relpi-tab__content { display: inline-grid; padding: 0 2px; }
.relpi-tab__content::after { content: attr(data-label); font-weight: 600; height: 0; visibility: hidden; overflow: hidden; }
.relpi-tab::before,
.relpi-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: var(--borderRadiusCircular);
}
.relpi-tab:hover { color: var(--colorNeutralForeground1); }
.relpi-tab:hover::before { background-color: var(--colorNeutralStroke1Hover); }
.relpi-tab[aria-selected="true"],
.relpi-tab[aria-current="page"] { color: var(--colorNeutralForeground1); font-weight: 600; }
.relpi-tab[aria-selected="true"]::after,
.relpi-tab[aria-current="page"]::after { background-color: var(--colorCompoundBrandBackground); }
.relpi-tab[aria-selected="true"] .relpi-icon,
.relpi-tab[aria-current="page"] .relpi-icon { color: var(--colorCompoundBrandBackground); }
.relpi-tab[aria-selected="true"]:hover::before,
.relpi-tab[aria-current="page"]:hover::before { background-color: transparent; }
.relpi-tab:disabled,
.relpi-tab[aria-disabled="true"] { color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; }
.relpi-tab:disabled::before,
.relpi-tab[aria-disabled="true"]::before { background-color: transparent; }
.relpi-tabs--small .relpi-tab { height: 32px; padding: 6px; gap: 2px; }
.relpi-tabs--small .relpi-tab::before,
.relpi-tabs--small .relpi-tab::after { left: 8px; right: 8px; height: 2px; }
.relpi-tabs--vertical .relpi-tab { height: 32px; padding: 6px 10px; }
.relpi-tabs--vertical .relpi-tab::before,
.relpi-tabs--vertical .relpi-tab::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
.relpi-tab__count { margin-left: 2px; }

/* ---------- Tabela (Fluent Table / DataGrid) ---------- */
.relpi-table-wrap { position: relative; width: 100%; overflow-x: auto; }
.relpi-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  text-align: left;
}
/* Hierarquia (ajuste visual pós-Sprint 11): cabeçalho em faixa discreta, coluna
   principal em destaque e as demais em cinza; linhas com respiro para 2 linhas. */
.relpi-table th {
  height: 36px;
  padding: 6px 12px;
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
  font-weight: 600;
  color: var(--colorNeutralForeground3);
  white-space: nowrap;
  vertical-align: middle;
}
.relpi-table thead th:first-child { border-radius: var(--borderRadiusMedium) 0 0 var(--borderRadiusMedium); }
.relpi-table thead th:last-child { border-radius: 0 var(--borderRadiusMedium) var(--borderRadiusMedium) 0; }
.relpi-table thead tr { border-bottom: 0; }
.relpi-table td { height: 52px; padding: 10px 12px; vertical-align: middle; color: var(--colorNeutralForeground2); }
.relpi-table tr { border-bottom: 1px solid var(--colorNeutralStroke2); }
.relpi-table tbody tr:last-child { border-bottom: 0; }
.relpi-table th a, .relpi-table__sort { text-decoration: none; }
.relpi-table__sort:hover { color: var(--colorNeutralForeground1); }
.relpi-table td > a:not([class]) { color: var(--colorNeutralForeground1); font-weight: 600; text-decoration: none; }
.relpi-table td > a:not([class]):hover { color: var(--colorBrandForegroundLink); text-decoration: underline; }
.relpi-table__texto { width: 38%; }
.relpi-sem-quebra { white-space: nowrap; }
.relpi-ref--com-tipo { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.relpi-table thead th { background-color: var(--colorNeutralBackground2); }
.relpi-table tbody th { font-weight: 600; color: var(--colorNeutralForeground1); background: none; font-size: var(--fontSizeBase300); }
.relpi-table__actions .relpi-linha { flex-wrap: nowrap; justify-content: flex-end; }
.relpi-table a.relpi-persona__primary { color: var(--colorNeutralForeground1); font-weight: 600; text-decoration: none; }
.relpi-table a.relpi-persona__primary:hover { color: var(--colorBrandForegroundLink); text-decoration: underline; }
.relpi-table__actions .gather-button { white-space: nowrap; }
.relpi-ref { display: block; white-space: nowrap; font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); font-weight: 600; letter-spacing: .02em; color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }
.relpi-table tbody tr { transition: background var(--durationFaster) var(--curveEasyEase); }
.relpi-table tbody tr:hover { background-color: var(--colorSubtleBackgroundHover); }
.relpi-table tbody tr[aria-selected="true"] { background-color: var(--colorBrandBackground2); border-bottom-color: transparent; }
.relpi-table--small td { height: 40px; padding-top: 6px; padding-bottom: 6px; }
.relpi-table--extra-small td { height: 24px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.relpi-table__select { width: 44px; }
.relpi-table__actions { width: 1%; white-space: nowrap; text-align: right; }
.relpi-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  color: inherit;
  font-weight: inherit;
  border-radius: var(--borderRadiusMedium);
}
.relpi-table__sort .relpi-icon { width: 12px; height: 12px; }
.relpi-table__cell-layout { display: flex; align-items: center; gap: 8px; min-width: 0; }
.relpi-table__cell-main { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relpi-table__cell-description { display: block; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-table a.relpi-table__primary, .relpi-table .relpi-table__primary { display: block; color: var(--colorNeutralForeground1); font-weight: 600; text-decoration: none; }
.relpi-table__cell-description { margin-top: 2px; }
.relpi-table a.relpi-table__primary:hover { color: var(--colorBrandForegroundLink); text-decoration: underline; }

/* ---------- Badge (Fluent Badge / CounterBadge) ---------- */
.relpi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--borderRadiusCircular);
  color: var(--colorNeutralForegroundOnBrand);
  background-color: var(--colorBrandBackground);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
  font-weight: 600;
  white-space: nowrap;
}
.relpi-badge .relpi-icon { width: 12px; height: 12px; }
.relpi-badge--small { min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); }
.relpi-badge--large { min-width: 24px; height: 24px; padding: 0 8px; }
.relpi-badge--rounded { border-radius: var(--borderRadiusMedium); }
/* filled (padrão) */
.relpi-badge--danger { background-color: var(--colorPaletteRedBackground3); }
.relpi-badge--important { background-color: var(--colorNeutralForeground1); color: var(--colorNeutralBackground1); }
.relpi-badge--informative { background-color: var(--colorNeutralBackground5); color: var(--colorNeutralForeground3); }
.relpi-badge--severe { background-color: var(--colorPaletteDarkOrangeBackground3); }
.relpi-badge--subtle { background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); }
.relpi-badge--success { background-color: var(--colorPaletteGreenBackground3); }
.relpi-badge--warning { background-color: var(--colorPaletteYellowBackground3); color: var(--colorNeutralForeground1); }
/* tint */
.relpi-badge--tint { color: var(--colorBrandForeground2); background-color: var(--colorBrandBackground2); border-color: var(--colorBrandStroke2); }
.relpi-badge--tint.relpi-badge--danger { color: var(--colorStatusDangerForeground1); background-color: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); }
.relpi-badge--tint.relpi-badge--success { color: var(--colorStatusSuccessForeground1); background-color: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); }
.relpi-badge--tint.relpi-badge--warning { color: var(--colorStatusWarningForeground1); background-color: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); }
.relpi-badge--tint.relpi-badge--informative { color: var(--colorNeutralForeground3); background-color: var(--colorNeutralBackground4); border-color: var(--colorNeutralStroke2); }
/* outline e ghost */
.relpi-badge--outline { color: var(--colorBrandForeground1); background-color: transparent; border-color: currentColor; }
.relpi-badge--ghost { color: var(--colorBrandForeground1); background-color: transparent; }

/* ---------- Presença (Fluent PresenceBadge) ---------- */
.relpi-presence {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--colorNeutralBackground1);
  background-color: var(--colorPaletteLightGreenForeground3);
  flex-shrink: 0;
}
.relpi-presence--busy { background-color: var(--colorPaletteRedBackground3); }
.relpi-presence--away { background-color: var(--colorPaletteMarigoldBackground3); }
.relpi-presence--offline { background-color: transparent; box-shadow: inset 0 0 0 1px var(--colorNeutralForeground3), 0 0 0 1px var(--colorNeutralBackground1); }
.relpi-presence--oof { background-color: var(--colorPaletteBerryForeground3); }
.relpi-presence--16 { width: 16px; height: 16px; }

/* ---------- Avatar e Persona ---------- */
.relpi-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--colorNeutralForeground3);
  background-color: var(--colorNeutralBackground6);
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  line-height: 1;
}
.relpi-avatar--24 { width: 24px; height: 24px; font-size: var(--fontSizeBase100); }
.relpi-avatar--40 { width: 40px; height: 40px; font-size: var(--fontSizeBase400); }
.relpi-avatar--brand { color: var(--colorBrandForeground2); background-color: var(--colorBrandBackground2); }
.relpi-avatar .relpi-presence { position: absolute; right: -1px; bottom: -1px; }
.relpi-persona { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.relpi-persona__text { display: flex; flex-direction: column; min-width: 0; }
.relpi-persona__primary { color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relpi-persona__secondary { color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }

/* ---------- Campo (Fluent Field) — envolve .gather-input ---------- */
.relpi-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.relpi-field__label { padding: 2px 0; color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-field__required { padding-left: 4px; color: var(--colorPaletteRedForeground3); }
.relpi-field__hint,
.relpi-field__message {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--colorNeutralForeground3);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.relpi-field__message .relpi-icon { width: 12px; height: 12px; margin-top: 2px; }
.relpi-field--error .relpi-field__message { color: var(--colorPaletteRedForeground1); }
.relpi-field--error .gather-input,
.relpi-field--error .relpi-select__control { border-color: var(--colorPaletteRedBorder2); }
.relpi-field--success .relpi-field__message .relpi-icon { color: var(--colorStatusSuccessForeground1); }
.relpi-field--horizontal { flex-direction: row; align-items: center; gap: 12px; }
.relpi-field .gather-input { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); min-height: 32px; padding: 5px 12px; }
.relpi-field .gather-input:disabled { color: var(--colorNeutralForegroundDisabled); background-color: transparent; border-color: var(--colorNeutralStrokeDisabled); }
textarea.gather-input { resize: vertical; min-height: 52px; padding: 6px 12px; }

/* ---------- Busca (Fluent SearchBox) ---------- */
.relpi-search { position: relative; display: block; min-width: 0; }
.relpi-search > .relpi-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--colorNeutralForeground3); pointer-events: none; }
.relpi-search .gather-input { padding-left: 34px; padding-right: 32px; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); min-height: 32px; }
.relpi-search__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

/* ---------- Select (Fluent Select) ---------- */
.relpi-select { position: relative; display: block; min-width: 0; }
.relpi-select__control {
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  outline: 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.relpi-select__control:hover { border-color: var(--colorNeutralStroke1Hover); border-bottom-color: var(--colorNeutralStrokeAccessibleHover); }
.relpi-select__control:disabled { color: var(--colorNeutralForegroundDisabled); border-color: var(--colorNeutralStrokeDisabled); cursor: not-allowed; }
.relpi-select > .relpi-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--colorNeutralForeground3); pointer-events: none; }
.relpi-select::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-bottom-left-radius: var(--borderRadiusMedium);
  border-bottom-right-radius: var(--borderRadiusMedium);
  background-color: var(--colorCompoundBrandBackground);
  transform: scaleX(0);
  transition: transform var(--durationUltraFast) var(--curveAccelerateMid);
}
.relpi-select:focus-within::after { transform: scaleX(1); transition-duration: var(--durationNormal); transition-timing-function: var(--curveDecelerateMid); }

/* ---------- Listbox / Menu (Fluent Listbox, Option, MenuList, MenuItem) ---------- */
.relpi-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow16);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.relpi-menu__item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  background-color: transparent;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.relpi-menu__item:hover { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1Hover); }
.relpi-menu__item:hover .relpi-icon { color: var(--colorBrandForeground1); }
.relpi-menu__item[aria-disabled="true"],
.relpi-menu__item:disabled { color: var(--colorNeutralForegroundDisabled); background-color: transparent; cursor: not-allowed; }
.relpi-menu__item[aria-selected="true"],
.relpi-menu__item[aria-current="page"] { font-weight: 600; }
.relpi-menu__check { width: 16px; height: 16px; visibility: hidden; }
.relpi-menu__item[aria-selected="true"] .relpi-menu__check { visibility: visible; }
.relpi-menu__item--danger { color: var(--colorPaletteRedForeground1); }
.relpi-menu__divider { height: 1px; margin: 2px -4px; background-color: var(--colorNeutralStroke2); }
/* Em listas com altura máxima (busca), os itens não podem encolher e se sobrepor. */
.relpi-menu > * { flex-shrink: 0; }
.relpi-menu__header { display: flex; flex-direction: column; padding: 6px 8px; }
.relpi-menu__group-header { padding: 0 8px; min-height: 32px; display: flex; align-items: center; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); font-weight: 600; }

/* ---------- Checkbox, Radio e Switch ---------- */
.relpi-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  cursor: pointer;
}
.relpi-check__input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.relpi-check__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 8px;
  border: 1px solid var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusSmall);
  color: var(--colorNeutralForegroundOnBrand);
}
.relpi-check__indicator .relpi-icon { width: 12px; height: 12px; visibility: hidden; }
.relpi-check__label { padding: 8px 8px 8px 4px; }
.relpi-check:hover .relpi-check__indicator { border-color: var(--colorNeutralStrokeAccessibleHover); }
.relpi-check__input:checked + .relpi-check__indicator { background-color: var(--colorCompoundBrandBackground); border-color: var(--colorCompoundBrandBackground); }
.relpi-check__input:checked + .relpi-check__indicator .relpi-icon { visibility: visible; }
.relpi-check:hover .relpi-check__input:checked + .relpi-check__indicator { background-color: var(--colorCompoundBrandBackgroundHover); border-color: var(--colorCompoundBrandBackgroundHover); }
.relpi-check__input:focus-visible ~ .relpi-check__indicator { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; }
.relpi-check__input:disabled ~ * { color: var(--colorNeutralForegroundDisabled); border-color: var(--colorNeutralStrokeDisabled); cursor: not-allowed; }
.relpi-check__input:disabled:checked + .relpi-check__indicator { background-color: var(--colorNeutralBackgroundDisabled); color: var(--colorNeutralForegroundDisabled); }
/* radio */
.relpi-check--radio .relpi-check__indicator { border-radius: 50%; position: relative; }
.relpi-check--radio .relpi-check__indicator::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--colorCompoundBrandBackground);
  transform: scale(0.625);
  visibility: hidden;
}
.relpi-check--radio .relpi-check__input:checked + .relpi-check__indicator { background-color: transparent; border-color: var(--colorCompoundBrandBackground); }
.relpi-check--radio .relpi-check__input:checked + .relpi-check__indicator::after { visibility: visible; }
.relpi-check--radio:hover .relpi-check__input:checked + .relpi-check__indicator { background-color: transparent; }
/* switch */
.relpi-check--switch .relpi-check__indicator {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: var(--borderRadiusCircular);
  justify-content: flex-start;
  transition: background var(--durationNormal) var(--curveEasyEase), border var(--durationNormal) var(--curveEasyEase);
}
.relpi-check--switch .relpi-check__indicator::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border-radius: 50%;
  background-color: var(--colorNeutralStrokeAccessible);
  transition: transform var(--durationNormal) var(--curveEasyEase), background var(--durationNormal) var(--curveEasyEase);
}
.relpi-check--switch:hover .relpi-check__indicator::after { background-color: var(--colorNeutralStrokeAccessibleHover); }
.relpi-check--switch .relpi-check__input:checked + .relpi-check__indicator::after { background-color: var(--colorNeutralForegroundOnBrand); transform: translateX(20px); }

/* ---------- MessageBar (Fluent) ---------- */
.relpi-messagebar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground3);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.relpi-messagebar > .relpi-icon { color: var(--colorNeutralForeground3); }
.relpi-messagebar__body { flex: 1; min-width: 0; }
.relpi-messagebar__title { font-weight: 600; margin-right: 4px; }
.relpi-messagebar__actions { display: flex; align-items: center; gap: 8px; }
.relpi-messagebar--success { background-color: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); }
.relpi-messagebar--success > .relpi-icon { color: var(--colorStatusSuccessForeground1); }
.relpi-messagebar--warning { background-color: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); }
.relpi-messagebar--warning > .relpi-icon { color: var(--colorStatusWarningForeground1); }
.relpi-messagebar--error { background-color: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); }
.relpi-messagebar--error > .relpi-icon { color: var(--colorStatusDangerForeground1); }

/* ---------- Toast (Fluent Toast) ---------- */
.relpi-toaster { position: fixed; right: 16px; bottom: 16px; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
.relpi-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 8px;
  align-items: start;
  width: 292px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow8);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  animation: relpi-toast-in var(--durationGentle) var(--curveDecelerateMid) both;
}
.relpi-toast > .relpi-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--colorBrandForeground1); }
.relpi-toast--success > .relpi-icon { color: var(--colorStatusSuccessForeground1); }
.relpi-toast--warning > .relpi-icon { color: var(--colorStatusWarningForeground1); }
.relpi-toast--error > .relpi-icon { color: var(--colorStatusDangerForeground1); }
.relpi-toast__title { font-weight: 600; }
.relpi-toast__body { grid-column: 2 / 4; color: var(--colorNeutralForeground1); padding-top: 6px; }
.relpi-toast__footer { grid-column: 2 / 4; display: flex; gap: 14px; padding-top: 16px; }
@keyframes relpi-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tooltip (Fluent Tooltip) ---------- */
.relpi-tooltip {
  display: inline-block;
  max-width: 240px;
  padding: 4px 11px 6px;
  border: 1px solid transparent;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow16);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.relpi-tooltip--inverted { color: var(--colorNeutralForegroundInverted); background-color: var(--colorNeutralBackgroundInverted); }
[data-relpi-tooltip] { position: relative; }
[data-relpi-tooltip]:hover::after,
[data-relpi-tooltip]:focus-visible::after {
  content: attr(data-relpi-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
  padding: 4px 11px 6px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow16);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
  font-weight: 400;
  pointer-events: none;
  animation: relpi-fade-in var(--durationNormal) var(--curveDecelerateMid) both;
}
@keyframes relpi-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Spinner, ProgressBar e Skeleton ---------- */
.relpi-spinner { display: inline-flex; align-items: center; gap: 8px; color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); }
.relpi-spinner__ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--colorBrandStroke2);
  border-top-color: var(--colorBrandStroke1);
  animation: relpi-spin 1.5s var(--curveEasyEase) infinite;
}
.relpi-spinner--tiny .relpi-spinner__ring { width: 20px; height: 20px; border-width: 2px; }
.relpi-spinner--small .relpi-spinner__ring { width: 28px; height: 28px; border-width: 2px; }
.relpi-spinner--large .relpi-spinner__ring { width: 40px; height: 40px; border-width: 3px; }
@keyframes relpi-spin { to { transform: rotate(360deg); } }
.relpi-progress { position: relative; display: block; width: 100%; height: 2px; overflow: hidden; border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground6); }
.relpi-progress--thick { height: 4px; }
.relpi-progress__bar { display: block; height: 100%; border-radius: inherit; background-color: var(--colorCompoundBrandBackground); transition: width var(--durationSlow); }
.relpi-progress--error .relpi-progress__bar { background-color: var(--colorPaletteRedBackground3); }
.relpi-progress--success .relpi-progress__bar { background-color: var(--colorPaletteGreenBackground3); }
.relpi-progress--warning .relpi-progress__bar { background-color: var(--colorPaletteDarkOrangeBackground3); }
.relpi-progress--indeterminate .relpi-progress__bar { width: 33%; animation: relpi-progress-indeterminate 3s linear infinite; }
@keyframes relpi-progress-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.relpi-skeleton {
  display: block;
  height: 16px;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralStencil1);
  background-image: linear-gradient(to right, var(--colorNeutralStencil1) 0%, var(--colorNeutralStencil2) 50%, var(--colorNeutralStencil1) 100%);
  background-size: 300% 100%;
  animation: relpi-shimmer 3s linear infinite;
}
.relpi-skeleton--circle { width: 32px; height: 32px; border-radius: 50%; }
@keyframes relpi-shimmer { from { background-position: 300% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .relpi-spinner__ring,
  .relpi-progress--indeterminate .relpi-progress__bar,
  .relpi-skeleton,
  .relpi-toast { animation-duration: 0.01ms; animation-iteration-count: 1; }
}

/* ---------- Breadcrumb (Fluent) ---------- */
.relpi-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; list-style: none; color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  text-decoration: none;
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.relpi-breadcrumb__link:hover { color: var(--colorNeutralForeground1); background-color: var(--colorSubtleBackgroundHover); }
.relpi-breadcrumb__link[aria-current="page"] { font-weight: 600; background-color: transparent; }
.relpi-breadcrumb__divider { display: inline-flex; color: var(--colorNeutralForeground1); }
.relpi-breadcrumb__divider .relpi-icon { width: 16px; height: 16px; }

/* ---------- Accordion (Fluent) ---------- */
.relpi-accordion__item + .relpi-accordion__item { border-top: 1px solid var(--colorNeutralStroke2); }
.relpi-accordion__header {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 10px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  text-align: left;
}
.relpi-accordion__header .relpi-icon:first-child { margin-right: 8px; transition: transform var(--durationNormal) ease-out; }
.relpi-accordion__header[aria-expanded="true"] .relpi-icon:first-child { transform: rotate(90deg); }
.relpi-accordion__panel { padding: 0 12px 12px 38px; color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }

/* ---------- Tag (Fluent Tag / InteractionTag) ---------- */
.relpi-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground2);
  background-color: var(--colorNeutralBackground3);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  white-space: nowrap;
}
.relpi-tag--small { height: 24px; padding: 0 5px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-tag--brand { color: var(--colorBrandForeground2); background-color: var(--colorBrandBackground2); }
.relpi-tag--outline { background-color: var(--colorNeutralBackground1); border-color: var(--colorNeutralStroke1); }
.relpi-tag__dismiss {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin-right: -7px;
  padding: 0 5px;
  border-left: 1px solid var(--colorNeutralStroke1);
  border-radius: 0 var(--borderRadiusMedium) var(--borderRadiusMedium) 0;
  color: inherit;
}
.relpi-tag__dismiss:hover { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground3Hover); }
.relpi-tag-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Divider (Fluent) ---------- */
.relpi-divider { display: flex; align-items: center; gap: 12px; color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-divider::before,
.relpi-divider::after { content: ""; flex: 1; border-top: 1px solid var(--colorNeutralStroke2); }
.relpi-divider--plain::after { display: none; }
.relpi-divider--vertical { display: inline-block; align-self: center; width: 1px; height: 20px; margin: 0 4px; background-color: var(--colorNeutralStroke2); }
.relpi-divider--vertical::before,
.relpi-divider--vertical::after { display: none; }

/* ---------- Toolbar (Fluent Toolbar) ---------- */
.relpi-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 40px; padding: 4px 8px; }
.relpi-toolbar__spacer { flex: 1; }

/* ---------- Diálogo (gather-modal + ações e larguras do Fluent Dialog) ---------- */
.relpi-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.relpi-dialog__body { color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.gather-modal.relpi-dialog--md { width: 600px; }
.gather-modal.relpi-dialog--lg { width: 800px; }
.gather-modal[open] { animation: relpi-dialog-in var(--durationGentle) var(--curveDecelerateMid) both; }
@keyframes relpi-dialog-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ---------- Drawer / painel lateral (Fluent OverlayDrawer) ---------- */
.relpi-drawer {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 100%;
  height: 100%;
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow64);
}
.relpi-drawer--medium { width: 592px; }
.relpi-drawer--large { width: 940px; }
.relpi-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 24px 24px 8px; }
.relpi-drawer__title { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: 600; }
.relpi-drawer__body { flex: 1; overflow-y: auto; padding: 0 24px; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-drawer__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 24px; }
.relpi-drawer--animated { animation: relpi-drawer-in var(--durationGentle) var(--curveDecelerateMid) both; }
@keyframes relpi-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ======================================================================
   COMPOSIÇÕES (não existem prontas no Fluent nem no gather)
   ====================================================================== */

/* Card de aplicação: superfície do gather (borda #f0f0f0, raio 16px) com densidade de app */
.relpi-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--colorNeutralStroke3);
  border-radius: 16px;
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.relpi-card--interactive { transition: border-color 0.25s, box-shadow 0.25s; text-decoration: none; }
.relpi-card--interactive:hover { box-shadow: 1px 1px 3rem 0 rgba(211, 205, 255, 0.4); }
.relpi-card--compact { gap: 8px; padding: 12px; border-radius: var(--borderRadiusXLarge); }
.relpi-card--compact.relpi-card--interactive:hover { box-shadow: var(--shadow8); }
.relpi-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.relpi-card__title { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: 600; }

/* KPI */
.relpi-stat { display: flex; flex-direction: column; gap: 4px; }
.relpi-stat__label { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: 600; }
.relpi-stat__value { font-family: var(--fontFamilyNumeric); font-size: var(--fontSizeHero700); line-height: var(--lineHeightHero700); font-weight: 600; font-variant-numeric: tabular-nums; }
.relpi-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }
.relpi-stat__delta--up { color: var(--colorStatusSuccessForeground1); }
.relpi-stat__delta--down { color: var(--colorStatusDangerForeground1); }

/* Shell de aplicação: header glass do gather + nav lateral Fluent + conteúdo */
.relpi-shell { display: flex; flex-wrap: wrap; min-height: 100dvh; padding-top: var(--gather-layout-header-height); }
.relpi-shell__nav { position: sticky; top: var(--gather-layout-header-height); align-self: flex-start; height: calc(100dvh - var(--gather-layout-header-height)); overflow-y: auto; }
.relpi-shell__nav .relpi-nav { min-height: 100%; }
.relpi-shell__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 24px 32px 48px; }
@media (max-width: 899.9px) {
  .relpi-shell__nav { position: static; height: auto; width: 100%; }
  .relpi-shell__nav .relpi-nav { width: 100%; flex-direction: row; overflow-x: auto; padding: 4px 8px; }
  .relpi-shell__nav .relpi-nav__section,
  .relpi-shell__nav .relpi-nav__app { display: none; }
  .relpi-shell__nav .relpi-nav__item { flex-shrink: 0; gap: 8px; }
  .relpi-shell__main { padding: 16px; }
}

/* Cabeçalho de página */
.relpi-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.relpi-page-header__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.relpi-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Barra de filtros */
.relpi-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.relpi-filterbar .relpi-search { flex: 1 1 240px; max-width: 360px; }
.relpi-filterbar .relpi-select { flex: 0 1 180px; }

/* Paginação */
.relpi-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-pagination__pages { display: flex; align-items: center; gap: 2px; }
.relpi-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--borderRadiusCircular);
  color: var(--colorNeutralForeground2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.relpi-page:hover { background-color: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.relpi-page[aria-current="page"] { color: var(--colorBrandForeground2); background-color: var(--colorBrandBackground2); font-weight: 600; }

/* Estado vazio */
.relpi-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; }
.relpi-empty .gather-icon-circle { color: var(--colorNeutralForeground3); }
.relpi-empty__title { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: 600; }
.relpi-empty__text { max-width: 420px; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }

/* Lista de propriedades (detalhe) */
.relpi-props { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-props dt { color: var(--colorNeutralForeground3); }
.relpi-props dt,
.relpi-props dd { align-self: center; }
.relpi-props dd { color: var(--colorNeutralForeground1); min-width: 0; }

/* Linha do tempo (histórico do chamado) */
.relpi-timeline { display: flex; flex-direction: column; list-style: none; }
.relpi-timeline__item { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding-bottom: 20px; }
.relpi-timeline__item::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background-color: var(--colorNeutralStroke2); }
.relpi-timeline__item:last-child::before { display: none; }
.relpi-timeline__meta { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-timeline__content { padding-top: 4px; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-timeline__bubble { margin-top: 6px; padding: 10px 12px; border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground3); }
.relpi-timeline__bubble--internal { background-color: var(--colorStatusWarningBackground1); border: 1px solid var(--colorStatusWarningBorder1); }

/* Kanban */
.relpi-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.relpi-kanban__column { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground3); }
.relpi-kanban__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 8px; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: 600; }

/* ======================================================================
   COMPOSIÇÕES DO SHELL (Sprint 1 do PRD)
   ====================================================================== */

/* Marca: monograma "R" + nome */
.relpi-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; font-size: var(--fontSizeBase500); font-weight: 620; line-height: var(--lineHeightBase500); text-decoration: none; }
.relpi-brand img { width: 40px; height: 40px; }
.relpi-brand--small { gap: 8px; font-size: 1.75rem; line-height: 2.75rem; }
.relpi-brand--small img { width: 24px; height: 24px; }

/* Link para pular ao conteúdo (aparece com o foco do teclado) */
.relpi-skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 20;
  padding: 8px 16px;
  border-radius: var(--borderRadiusMedium);
  color: #fff;
  background-color: var(--colorBrandBackground);
  font-size: var(--fontSizeBase300);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--durationFast) var(--curveDecelerateMid);
}
.relpi-skip-link:focus { top: 8px; }

/* Cabeçalho do app sobre .gather-layout__header */
.relpi-app-header .gather-layout__header__inner { gap: 16px; }
.relpi-app-header .gather-layout__header__title { margin-left: 0; margin-right: 0; }
.relpi-app-header__spacer { flex: 1; }
.relpi-app-header .relpi-search { width: 340px; }
@media (max-width: 899.9px) {
  .relpi-app-header .relpi-search { display: none; }
}
/* No celular o seletor de espaço sai do cabeçalho e fica no menu do avatar */
.relpi-menu__espacos { display: none; }
@media (max-width: 699.9px) {
  .relpi-app-header .relpi-tabs { display: none; }
  .relpi-menu__espacos { display: flex; flex-direction: column; gap: 2px; }
}

/* Âncora de popover (menu do avatar, menus de ação) */
.relpi-popover-anchor { position: relative; display: inline-flex; }
.relpi-menu--popover { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 220px; }
.relpi-icon-button { position: relative; }
.relpi-icon-button__badge { position: absolute; top: 0; right: -2px; }
.relpi-avatar-button { display: inline-flex; border-radius: 50%; background: none; cursor: pointer; }

/* Conteúdo centralizado (erros, estados vazios de página) */
.relpi-shell__main--centro { align-items: center; justify-content: center; }

/* Faixa de impersonação */
.relpi-impersonacao { position: fixed; left: 0; right: 0; top: var(--gather-layout-header-height); z-index: 2; border-radius: 0; border-left: 0; border-right: 0; }

/* Barra de navegação inferior (celular) */
.relpi-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  min-height: 64px;
  padding: 0 8px 8px;
  background-color: var(--colorNeutralBackground1);
  border-top: 1px solid var(--colorNeutralStroke3);
}
.relpi-bottom-nav--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.relpi-bottom-nav--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.relpi-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  color: var(--colorNeutralForeground3);
  font-size: 11px;
  line-height: 14px;
  text-decoration: none;
}
.relpi-bottom-nav__item[aria-current="page"] { color: var(--colorCompoundBrandBackground); font-weight: 600; }
.relpi-bottom-nav__item .relpi-icon { width: 24px; height: 24px; }
.relpi-bottom-nav__acao {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: #fff;
  background-color: var(--colorBrandBackground);
  box-shadow: var(--shadow8);
}
.relpi-bottom-nav__acao .relpi-icon { width: 24px; height: 24px; }
@media (max-width: 699.9px) {
  .relpi-shell__nav { display: none; }
  .relpi-bottom-nav { display: grid; }
  .relpi-shell__main { padding-bottom: 96px; }
}

/* Telas de autenticação (login, recuperação de senha) */
.relpi-auth { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 64px; padding: 48px 24px; }
.relpi-auth__intro { flex: 1 1 380px; max-width: 480px; display: flex; flex-direction: column; gap: 24px; }
.relpi-auth__intro p { color: var(--colorNeutralForeground2); font-size: 3rem; font-weight: 300; line-height: normal; }
.relpi-auth__card { flex: 0 1 420px; padding: 32px; gap: 20px; box-shadow: 1px 1px 3rem 0 rgba(211, 205, 255, 0.4); }
.relpi-auth__form { display: flex; flex-direction: column; gap: 16px; }
.relpi-auth__form .gather-button { padding-top: 10px; padding-bottom: 10px; }
.relpi-auth__link-card { justify-content: space-between; border: 1px solid var(--colorNeutralStroke3); padding: 12px; }
@media (max-width: 699.9px) {
  .relpi-auth { gap: 24px; padding: 24px 16px; }
  .relpi-auth__intro p { font-size: 2.25rem; }
}

/* Painel lateral sobreposto (notificações, filtros) */
.relpi-drawer--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10; height: auto; }

/* Lista de notificações (painel do sino) */
.relpi-notificacoes { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.relpi-notificacao {
  display: grid;
  grid-template-columns: 8px 1fr;
  column-gap: 10px;
  padding: 10px 8px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  text-decoration: none;
}
.relpi-notificacao:hover { background-color: var(--colorSubtleBackgroundHover); }
.relpi-notificacao__ponto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.relpi-notificacao--nova { font-weight: 600; }
.relpi-notificacao--nova .relpi-notificacao__ponto { background-color: var(--colorCompoundBrandBackground); }
.relpi-notificacao__quando { grid-column: 2; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: 400; }

/* Busca global do cabeçalho */
.relpi-busca { position: relative; display: block; }
.relpi-busca__resultados { left: auto; right: 0; width: min(480px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto; }
.relpi-busca .gather-input { padding-right: 64px; }
.relpi-busca .gather-input::-webkit-search-cancel-button { display: none; }
.relpi-busca .gather-input:not(:placeholder-shown) ~ .relpi-kbd { display: none; }
.relpi-menu__item-sub { margin-left: auto; padding-left: 12px; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); white-space: nowrap; }
.relpi-kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--colorNeutralStroke1);
  border-bottom-width: 2px;
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground3);
  font-family: var(--fontFamilyMonospace);
  font-size: var(--fontSizeBase100);
  line-height: var(--lineHeightBase200);
}
.relpi-busca .relpi-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* Formulários de página (cartões empilhados, grade de campos e barra de ações) */
.relpi-form { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.relpi-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.relpi-form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.relpi-form-grid__inteira { grid-column: 1 / -1; }
.relpi-form-actions { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; background-image: linear-gradient(to bottom, transparent, var(--colorNeutralBackground1) 35%); }
.relpi-form-actions__spacer { flex: 1; }
.relpi-opcoes { display: flex; flex-wrap: wrap; gap: 4px 24px; }
@media (max-width: 699.9px) {
  .relpi-form-grid { grid-template-columns: minmax(0, 1fr); }
  .relpi-form-actions { bottom: 72px; }
}

/* Lista de chamados: alternador Lista/Kanban, barra de lote, kanban arrastável e cartões no celular */
.relpi-alternador { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--borderRadiusCircular); background-color: var(--colorNeutralBackground3); }
.relpi-alternador__item { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--borderRadiusCircular); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); text-decoration: none; }
.relpi-alternador__item:hover { color: var(--colorNeutralForeground1); }
.relpi-alternador__item[aria-current="page"] { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow2); font-weight: 600; }
.relpi-alternador__item:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; }
.relpi-lote { position: sticky; bottom: 16px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow16); }
.relpi-lote[hidden] { display: none; }
.relpi-lote__contagem { margin-right: 8px; font-weight: 600; }
.relpi-kanban__lista { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 64px; border-radius: var(--borderRadiusLarge); }
.relpi-kanban__lista--alvo { outline: 2px dashed var(--colorBrandStroke1); outline-offset: 2px; background-color: var(--colorBrandBackground2); }
.relpi-kanban [draggable="true"] { cursor: grab; }
.relpi-kanban .relpi-card--arrastando { opacity: .5; }
.relpi-lista-cartoes > li > .relpi-badge { align-self: flex-start; }
.relpi-lista-cartoes { display: none; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 699.9px) {
  .relpi-lista-cartoes { display: flex; }
  .relpi-so-desktop { display: none !important; }
  .relpi-lote { bottom: 80px; }
}
@media (min-width: 700px) {
  .relpi-so-celular { display: none !important; }
}

/* Detalhe do chamado: cabeçalho, colunas, composer com editor, ida e volta e checklist */
.relpi-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.relpi-linha--entre { justify-content: space-between; }
.relpi-pilha { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.relpi-pilha--16 { gap: 16px; }
.relpi-chamado { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; min-width: 0; }
.relpi-chamado__principal { display: flex; flex: 999 1 600px; flex-direction: column; gap: 16px; min-width: 0; }
.relpi-chamado__lateral { display: flex; flex: 1 1 300px; flex-direction: column; gap: 16px; min-width: 0; }
.relpi-chamado-cabecalho { display: flex; flex-direction: column; gap: 16px; }
.relpi-chamado-cabecalho__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.relpi-chamado-cabecalho__sla { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.relpi-chamado-cabecalho__sla .relpi-progress { flex: 1 1 240px; max-width: 420px; }
.relpi-chamado-cabecalho__subtitulo { color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-composer { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--colorNeutralStroke2); }
.relpi-editor .ql-toolbar.ql-snow { border: 1px solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0; background-color: var(--colorNeutralBackground2); font-family: inherit; }
.relpi-editor .ql-container.ql-snow { border: 1px solid var(--colorNeutralStroke1); border-top: 0; border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-family: inherit; font-size: var(--fontSizeBase300); }
.relpi-editor .ql-editor { min-height: 96px; line-height: var(--lineHeightBase300); }
.relpi-editor .ql-editor.ql-blank::before { color: var(--colorNeutralForeground4); font-style: normal; }
.relpi-editor .ql-snow .ql-stroke { stroke: var(--colorNeutralForeground2); }
.relpi-editor .ql-snow .ql-fill { fill: var(--colorNeutralForeground2); }
.relpi-editor .ql-snow button:hover .ql-stroke,
.relpi-editor .ql-snow .ql-active .ql-stroke { stroke: var(--colorBrandForeground1); }
.relpi-editor .ql-snow button:hover .ql-fill,
.relpi-editor .ql-snow .ql-active .ql-fill { fill: var(--colorBrandForeground1); }
.relpi-editor:focus-within .ql-container.ql-snow { border-bottom: 2px solid var(--colorCompoundBrandBackground); }
.relpi-ida-volta { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; border: 1px solid var(--colorStatusWarningBorder1); border-left-width: 4px; border-radius: var(--borderRadiusXLarge); background-color: var(--colorStatusWarningBackground1); }
.relpi-ida-volta--devolucao { border-color: var(--colorStatusDangerBorder1); background-color: var(--colorStatusDangerBackground1); }
.relpi-ida-volta--concluida { border-color: var(--colorNeutralStroke2); background-color: var(--colorNeutralBackground2); }
.relpi-checklist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-checklist__item { display: flex; align-items: center; gap: 6px; }
.relpi-checklist__item--ok { color: var(--colorNeutralForeground3); text-decoration: line-through; }
.relpi-recolhivel > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; }
.relpi-recolhivel > summary::-webkit-details-marker { display: none; }
.relpi-recolhivel > summary .relpi-icon { transition: transform var(--durationNormal) var(--curveEasyEase); }
.relpi-recolhivel[open] > summary .relpi-icon { transform: rotate(180deg); }
@media (max-width: 699.9px) {
  /* Só o cartão do cliente sobe para logo depois do cabeçalho; outros chamados e artigos ficam no fim. */
  .relpi-chamado { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .relpi-chamado__lateral { display: contents; }
  .relpi-chamado__lateral > * { order: 1; }
  .relpi-chamado__lateral > .relpi-chamado__cliente { order: -1; }
  .relpi-chamado-cabecalho__acoes { width: 100%; }
}

/* Atendimento (N1): cartões de escolha, área de upload, grade de indicadores e cliente identificado */
.relpi-escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.relpi-escolha { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font: inherit; text-align: left; cursor: pointer; }
.relpi-escolha:hover { background-color: var(--colorNeutralBackground1Hover); }
.relpi-escolha:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; }
.relpi-escolha:has(input:focus-visible) { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; }
.relpi-escolha[aria-checked="true"],
.relpi-escolha:has(input:checked) { border: 2px solid var(--colorBrandStroke1); padding: 11px; background-color: var(--colorBrandBackground2); }
.relpi-escolha__titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.relpi-escolha__texto { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--colorNeutralStroke1); border-radius: var(--borderRadiusXLarge); color: var(--colorNeutralForeground2); }
.relpi-upload--ativo { border-color: var(--colorBrandStroke1); background-color: var(--colorBrandBackground2); }
.relpi-upload__limite { margin-left: auto; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.relpi-upload__escolher { padding: 0; border: 0; background: none; color: var(--colorBrandForegroundLink); font: inherit; text-decoration: underline; cursor: pointer; }
.relpi-upload__escolher:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; }
.relpi-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.relpi-upload__lista { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; font-size: var(--fontSizeBase200); }
.relpi-imagem { display: block; max-width: 100%; height: auto; border-radius: var(--borderRadiusLarge); }
.relpi-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.relpi-identificado { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--colorBrandStroke2); border-radius: var(--borderRadiusMedium); background-color: var(--colorBrandBackground2); }
@media (max-width: 699.9px) {
  .relpi-escolhas { grid-template-columns: minmax(0, 1fr); }
}

/* Pop de ligação (RF-041): cartão fixo no canto inferior direito, abaixo do menu do usuário */
.relpi-pop { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 12px; width: min(380px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--colorNeutralStroke2); border-left: 4px solid var(--colorBrandStroke1); border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow28); }
.relpi-pop[hidden] { display: none; }
.relpi-pop--tocando { border-left-color: var(--colorStatusWarningBorderActive, var(--colorStatusWarningBorder1)); animation: relpi-pop-entrada var(--durationGentle) var(--curveDecelerateMid) both; }
.relpi-pop__status { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
@keyframes relpi-pop-entrada { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 699.9px) {
  .relpi-pop { right: 8px; bottom: 80px; width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .relpi-pop--tocando { animation: none; }
}

/* Central do técnico: indicadores clicáveis (RF-055) */
.relpi-gestao__barra { flex: 1 1 120px; min-width: 80px; }
.relpi-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.relpi-indicador { text-decoration: none; color: inherit; }
.relpi-indicador--perigo { border-color: var(--colorStatusDangerBorder1); background-color: var(--colorStatusDangerBackground1); }
.relpi-indicador--perigo .relpi-stat__label,
.relpi-indicador--perigo .relpi-stat__value { color: var(--colorStatusDangerForeground1); }
.relpi-indicador--aviso { border-color: var(--colorStatusWarningBorder1); background-color: var(--colorStatusWarningBackground1); }
.relpi-indicador--aviso .relpi-stat__label,
.relpi-indicador--aviso .relpi-stat__value { color: var(--colorStatusWarningForeground1); }
@media (max-width: 699.9px) {
  .relpi-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Segredo mascarado (RF-097): senha de acesso remoto com "Mostrar" e "Copiar" */
.relpi-segredo { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fontFamilyMonospace, ui-monospace, monospace); }
.relpi-segredo__valor { min-width: 8ch; letter-spacing: .08em; }
.relpi-segredo__valor[data-oculto] { color: var(--colorNeutralForeground3); }

/* Correções pós-Sprint 11 -------------------------------------------------- */
/* 1. Menu lateral fixo: o overflow-x: hidden da base no <body> o tornava contêiner
   de rolagem e anulava o position: sticky do menu. "clip" corta igual sem isso. */
body { overflow-x: clip; }

/* 2. Conteúdo da conversa (imagens, tabelas e textos longos do Quill) não vaza. */
.relpi-timeline__content { min-width: 0; }
.relpi-timeline__bubble { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.relpi-timeline__bubble img, .relpi-timeline__bubble video { display: block; max-width: 100%; height: auto; max-height: 360px; object-fit: contain; border-radius: var(--borderRadiusMedium); margin: 4px 0; }
.relpi-timeline__bubble table, .relpi-timeline__bubble pre { display: block; max-width: 100%; overflow-x: auto; }

/* 3. Zoom de imagem (relpi-ui.js): toda imagem de conversa ou com [data-zoom]. */
.relpi-timeline__bubble img, img[data-zoom], .relpi-zoom img { cursor: zoom-in; }
.relpi-lightbox { margin: auto; width: min(96vw, 1400px); max-width: none; max-height: 96dvh; padding: 0; border: 0; border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); box-shadow: var(--shadow64); }
.relpi-lightbox::backdrop { background: rgba(0, 0, 0, .72); }
.relpi-lightbox__corpo { display: flex; flex-direction: column; gap: 8px; padding: 12px; max-height: 96dvh; }
.relpi-lightbox__barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.relpi-lightbox__img { display: block; max-width: 100%; max-height: calc(96dvh - 80px); margin: 0 auto; object-fit: contain; cursor: zoom-out; }

/* 4. Detalhe do chamado em tela única no notebook e em telas maiores: a página
   não rola; rolam a linha do tempo, o painel do cliente e as outras abas. Em
   telas estreitas ou baixas o fluxo normal (rolagem da página) continua. */
@media (min-width: 1180px) and (min-height: 640px) {
  .relpi-tela-fixa { height: calc(100dvh - var(--gather-layout-header-height)); overflow: hidden; padding-top: 16px; padding-bottom: 16px; gap: 12px; }
  /* Cabeçalho do chamado mais compacto para sobrar altura para a conversa. */
  .relpi-tela-fixa .relpi-chamado-cabecalho { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .relpi-tela-fixa .relpi-composer .relpi-opcoes { gap: 4px 12px; }
  .relpi-tela-fixa .relpi-composer > .relpi-linha { column-gap: 8px; }
  .relpi-tela-fixa .relpi-chamado-cabecalho h1 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); }
  .relpi-tela-fixa .relpi-chamado { flex: 1; min-height: 0; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .relpi-tela-fixa .relpi-chamado__principal { min-height: 0; gap: 8px; }
  .relpi-tela-fixa .relpi-chamado__principal > [role="tabpanel"] { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .relpi-tela-fixa .relpi-chamado__principal > [role="tabpanel"][hidden] { display: none; }
  /* Conversa: a linha do tempo rola dentro do quadro e o editor fica embaixo.
     Se a tela for baixa demais, a aba inteira rola (o editor nunca some). */
  .relpi-tela-fixa #painel-conversa { display: flex; flex-direction: column; }
  .relpi-tela-fixa .relpi-conversa { flex: 1 0 auto; min-height: 100%; gap: 12px; }
  .relpi-tela-fixa .relpi-conversa__extras { flex-shrink: 0; max-height: 24dvh; overflow-y: auto; gap: 8px; }
  .relpi-tela-fixa .relpi-conversa__quadro { flex: 1 1 0; min-height: 260px; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .relpi-tela-fixa .relpi-conversa__quadro > .relpi-timeline { flex: 1 1 0; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
  .relpi-tela-fixa .relpi-conversa__quadro > .relpi-composer { flex-shrink: 0; gap: 6px; }
  .relpi-tela-fixa .relpi-composer .ql-editor { min-height: 56px; max-height: 18dvh; overflow-y: auto; }
  .relpi-tela-fixa .relpi-composer__dica, .relpi-tela-fixa .relpi-composer__detalhe { display: none; }
  .relpi-tela-fixa details.relpi-ida-volta:not([open]) { padding-top: 6px; padding-bottom: 6px; }
  .relpi-tela-fixa details.relpi-ida-volta > summary strong { font-size: var(--fontSizeBase300); }
  /* Editor compacto até receber o foco (padrão de chat): a barra de formatação
     e a altura extra só aparecem ao escrever. */
  .relpi-tela-fixa .relpi-composer > .relpi-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .relpi-tela-fixa .relpi-composer:not(:focus-within):not(.relpi-composer--com-texto) .ql-toolbar { display: none; }
  .relpi-tela-fixa .relpi-composer:not(:focus-within):not(.relpi-composer--com-texto) .ql-container { border-top: 1px solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); }
  .relpi-tela-fixa .relpi-composer:not(:focus-within):not(.relpi-composer--com-texto) .ql-editor { min-height: 40px; max-height: 40px; }
  .relpi-tela-fixa .relpi-chamado__lateral { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
}


/* Pedido ao N1 já respondido ou cancelado: recolhido numa linha. */
details.relpi-ida-volta > summary { cursor: pointer; list-style: none; }
details.relpi-ida-volta > summary::-webkit-details-marker { display: none; }
details.relpi-ida-volta > summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--durationNormal) var(--curveEasyEase); flex-shrink: 0; }
details.relpi-ida-volta[open] > summary::after { transform: rotate(-135deg); }
details.relpi-ida-volta:not([open]) { padding-top: 10px; padding-bottom: 10px; }

/* Agenda de treinamentos e viagens (agendamentos): dias em cartões, horário à
   esquerda, assunto em destaque; vagas livres como blocos clicáveis. */
.relpi-agenda { display: flex; flex-direction: column; gap: 16px; }
.relpi-agenda__dia { gap: 4px; }
.relpi-agenda__data { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--colorNeutralStroke2); }
.relpi-agenda__itens { list-style: none; margin: 0; padding: 0; }
.relpi-agenda__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--colorNeutralStroke2); }
.relpi-agenda__item:last-child { border-bottom: 0; padding-bottom: 0; }
.relpi-agenda__hora { display: flex; flex-direction: column; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--colorNeutralForeground1); }
.relpi-agenda__hora > span { font-weight: 400; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
.relpi-agenda__corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.relpi-agenda__corpo .relpi-table__primary { color: var(--colorNeutralForeground1); font-weight: 600; text-decoration: none; }
.relpi-agenda__corpo .relpi-table__primary:hover { color: var(--colorBrandForegroundLink); text-decoration: underline; }
.relpi-agenda__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.relpi-agenda__link { overflow-wrap: anywhere; }
.relpi-agenda__data.relpi-linha { padding-bottom: 8px; }
.relpi-agenda__titulo-dia { font: inherit; }
.relpi-agenda__item--selecionavel { grid-template-columns: 28px 72px minmax(0, 1fr) auto; }
.relpi-agenda__marca { display: flex; align-items: center; }
.relpi-agenda__form { max-width: 760px; }
.relpi-vagas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.relpi-vaga { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); text-decoration: none; transition: border-color var(--durationFaster) var(--curveEasyEase), box-shadow var(--durationFaster) var(--curveEasyEase); }
.relpi-vaga:hover { border-color: var(--colorBrandStroke1); box-shadow: var(--shadow4); }
.relpi-vaga:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; }
.relpi-vaga__hora { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: 600; font-variant-numeric: tabular-nums; }
.relpi-vaga__tecnico { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2); }
.relpi-vaga__acao { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: var(--fontSizeBase200); font-weight: 600; color: var(--colorBrandForegroundLink); }
@media (max-width: 599.9px) {
  .relpi-agenda__item { grid-template-columns: 56px minmax(0, 1fr); }
  .relpi-agenda__acoes { grid-column: 2; justify-content: flex-start; }
  .relpi-agenda__item--selecionavel { grid-template-columns: 28px 56px minmax(0, 1fr); }
  .relpi-agenda__item--selecionavel .relpi-agenda__acoes { grid-column: 3; }
}

/* Agenda em semana (referência "dias em cards" + agenda do dia embaixo) ---- */
.relpi-semana { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--borderRadiusXLarge); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow4); }
.relpi-semana__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.relpi-semana__cabeca { display: flex; flex-direction: column; gap: 2px; }
.relpi-semana__chamada { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--colorBrandForeground1); }
.relpi-semana__titulo { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: 600; color: var(--colorNeutralForeground1); }
.relpi-semana__nav { display: flex; align-items: center; gap: 4px; }
.relpi-semana__periodo { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); padding: 0 4px; white-space: nowrap; }
.relpi-semana__dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.relpi-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: var(--borderRadiusXLarge); border: 1px solid transparent; background-color: var(--colorBrandBackground2); color: var(--colorNeutralForeground1); text-decoration: none; transition: transform var(--durationFaster) var(--curveEasyEase), box-shadow var(--durationFaster) var(--curveEasyEase), background-color var(--durationFaster) var(--curveEasyEase); }
a.relpi-dia:hover { transform: translateY(-2px); box-shadow: var(--shadow4); }
a.relpi-dia:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; }
.relpi-dia__semana { font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--colorNeutralForeground3); }
.relpi-dia__numero { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: 700; font-variant-numeric: tabular-nums; }
.relpi-dia__pontos { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 6px; }
.relpi-dia__ponto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--colorBrandBackground); flex-shrink: 0; }
.relpi-dia__ponto--sucesso { background-color: var(--colorStatusSuccessBackground3); }
.relpi-dia__ponto--alerta { background-color: var(--colorStatusWarningBackground3); }
.relpi-dia__ponto--perigo { background-color: var(--colorStatusDangerBackground3); }
.relpi-dia__mais { font-style: normal; font-size: 10px; line-height: 6px; font-weight: 700; color: var(--colorNeutralForeground3); }
.relpi-dia--hoje { border-color: var(--colorBrandStroke1); }
.relpi-dia--hoje .relpi-dia__numero { color: var(--colorBrandForeground1); }
.relpi-dia--selecionado { background-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand, #fff); box-shadow: var(--shadow8); }
.relpi-dia--selecionado .relpi-dia__semana, .relpi-dia--selecionado .relpi-dia__numero { color: inherit; }
.relpi-dia--selecionado .relpi-dia__ponto { box-shadow: 0 0 0 1.5px var(--colorNeutralBackground1); }
.relpi-dia--selecionado .relpi-dia__ponto--marca { background-color: var(--colorNeutralBackground1); }
.relpi-dia--desligado { background-color: var(--colorNeutralBackground3); color: var(--colorNeutralForegroundDisabled, var(--colorNeutralForeground4)); opacity: .55; cursor: not-allowed; }
.relpi-dia--desligado .relpi-dia__semana { color: inherit; }
.relpi-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.relpi-tempo__item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.relpi-tempo__item:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 30px; bottom: -14px; width: 2px; background-color: var(--colorNeutralStroke2); }
.relpi-tempo__marca { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 12px; border-radius: 6px; border: 2px solid var(--colorBrandStroke1); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForegroundOnBrand, #fff); }
.relpi-tempo__marca--sucesso { border-color: var(--colorStatusSuccessBackground3); }
.relpi-tempo__marca--alerta { border-color: var(--colorStatusWarningBackground3); }
.relpi-tempo__marca--perigo { border-color: var(--colorStatusDangerBackground3); }
.relpi-tempo__marca--feito { background-color: var(--colorStatusSuccessBackground3); }
.relpi-tempo__card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--borderRadiusXLarge); border: 1px solid var(--colorNeutralStroke2); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow2); }
.relpi-tempo__card--sucesso { background-color: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); }
.relpi-tempo__card--alerta { background-color: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); }
.relpi-tempo__card--perigo { background-color: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); }
.relpi-tempo__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.relpi-tempo__titulo { font-weight: 600; color: var(--colorNeutralForeground1); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
a.relpi-tempo__titulo:hover { color: var(--colorBrandForegroundLink); text-decoration: underline; }
.relpi-tempo__hora { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--colorNeutralForeground2); }
.relpi-tempo__texto { margin: 0; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); }
.relpi-tempo__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.relpi-tempo__rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }
.relpi-tempo__acoes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.relpi-tempo__card--destaque { background-color: var(--colorBrandBackground); border-color: var(--colorBrandBackground); box-shadow: var(--shadow8); }
.relpi-tempo__card--destaque, .relpi-tempo__card--destaque .relpi-tempo__titulo, .relpi-tempo__card--destaque .relpi-tempo__hora,
.relpi-tempo__card--destaque .relpi-tempo__texto, .relpi-tempo__card--destaque .relpi-tempo__rotulo { color: var(--colorNeutralForegroundOnBrand, #fff); }
.relpi-tempo__card--destaque a.relpi-tempo__titulo:hover { color: inherit; }
.relpi-tempo__card--destaque .relpi-dia__ponto { box-shadow: 0 0 0 1.5px var(--colorNeutralBackground1); }
.relpi-tempo__card--destaque .gather-button { background-color: var(--colorNeutralBackground1); color: var(--colorBrandForeground1); border-color: transparent; }
.relpi-tempo__fim { margin: 4px 0 0; text-align: center; font-size: var(--fontSizeBase200); font-weight: 600; color: var(--colorBrandForeground1); }
.relpi-agenda-dia { display: flex; flex-direction: column; gap: 12px; }
.relpi-fab { display: none; }
@media (max-width: 699.9px) {
  .relpi-semana { padding: 16px 12px; }
  .relpi-semana__dias { gap: 4px; }
  .relpi-dia { padding: 8px 2px 6px; }
  .relpi-semana__periodo { display: none; }
  .relpi-fab { position: fixed; right: 16px; bottom: 88px; z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand, #fff); box-shadow: var(--shadow16); }
  .relpi-fab:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 3px; }
}

/* Tour opcional do shell (botão "?" do cabeçalho) */
.relpi-tour { position: fixed; z-index: 2000; display: flex; flex-direction: column; gap: 8px; padding: 16px; box-shadow: var(--shadow28); }
.relpi-tour__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.relpi-tour-alvo { outline: 3px solid var(--colorBrandStroke1); outline-offset: 4px; border-radius: var(--borderRadiusMedium); }

/* Link de apoio (texto pequeno): cor de link nos dois temas, e não o azul do navegador. */
a.relpi-text-caption1 { color: var(--colorBrandForegroundLink); }
a.relpi-text-caption1:hover { color: var(--colorBrandForegroundLinkHover); }

/* Portal do cliente (Sprint 10, pranchetas Portal, PortalChamado e PortalMobile) */
.relpi-portal { min-height: 100dvh; padding-top: var(--gather-layout-header-height); }
.relpi-portal__main { width: 100%; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 32px 24px 48px; }
.relpi-portal__colunas { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.relpi-portal__principal { flex: 999 1 520px; min-width: 0; }
.relpi-portal__lateral { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.relpi-portal__main p a:not([class]), .relpi-portal__main li a:not([class]) { text-decoration: underline; }
.relpi-portal__link-discreto { align-self: flex-start; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.relpi-portal__link-discreto:hover { color: var(--colorNeutralForeground1); }
.relpi-portal__indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.relpi-portal__indicadores .relpi-card { text-decoration: none; color: inherit; }
.relpi-atencao { border-color: var(--colorStatusWarningBorder1); background-color: var(--colorStatusWarningBackground1); }
.relpi-atencao__titulo { display: inline-flex; align-items: center; gap: 8px; color: var(--colorStatusWarningForeground1); }
.relpi-atencao__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--borderRadiusLarge); background-color: var(--colorNeutralBackground1); }
.relpi-atencao__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.relpi-resposta { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--borderRadiusLarge); border: 1px solid var(--colorNeutralStroke2); }
.relpi-resposta--destaque { border-color: var(--colorStatusWarningBorder1); background-color: var(--colorStatusWarningBackground1); }
.relpi-resposta__rotulo { display: inline-flex; align-items: center; gap: 6px; }
.relpi-resposta--destaque .relpi-resposta__rotulo .relpi-icon { color: var(--colorStatusWarningForeground1); }
.relpi-lista-links { display: flex; flex-direction: column; }
.relpi-lista-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--colorNeutralStroke2); color: var(--colorNeutralForeground1); text-decoration: none; }
.relpi-lista-links a:last-child { border-bottom: 0; }
.relpi-lista-links a:hover { color: var(--colorBrandForeground1); }
.relpi-lista-links span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.relpi-portal .relpi-timeline .gather-icon-circle { width: 32px; height: 32px; flex-shrink: 0; }
.relpi-portal .relpi-timeline .gather-icon-circle .relpi-icon { width: 20px; height: 20px; }
.relpi-timeline__item--cliente .relpi-timeline__bubble { background-color: var(--colorBrandBackground2); }
.relpi-estrelas { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: 0; padding: 0; margin: 0; }
.relpi-estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.relpi-estrelas label { cursor: pointer; color: var(--colorNeutralForeground4); }
.relpi-estrelas label .relpi-icon { width: 28px; height: 28px; }
.relpi-estrelas input:checked ~ label, .relpi-estrelas label:hover, .relpi-estrelas label:hover ~ label { color: var(--colorPaletteMarigoldBackground3); }
.relpi-estrelas input:focus-visible + label { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; border-radius: 4px; }
.relpi-portal__main--estreito { max-width: 560px; }
.relpi-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.relpi-grafico { position: relative; height: 260px; min-width: 0; }
.relpi-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2); }
.relpi-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.relpi-legenda__cor { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.relpi-legenda__cor--receptivo, .relpi-gantt__seg--receptivo { background-color: var(--colorBrandBackground); }
.relpi-legenda__cor--retorno, .relpi-gantt__seg--retorno { background-color: var(--colorStatusSuccessBackground3); }
.relpi-legenda__cor--interno, .relpi-gantt__seg--interno { background-color: var(--colorPaletteBerryForeground3); }
.relpi-legenda__cor--ocioso, .relpi-gantt__seg--ocioso { background-color: var(--colorNeutralBackground3); color: var(--colorNeutralForeground3); border: 1px solid var(--colorNeutralStroke2); }
.relpi-legenda__cor--almoco, .relpi-gantt__seg--almoco { background: repeating-linear-gradient(45deg, var(--colorNeutralBackground3), var(--colorNeutralBackground3) 2px, var(--colorNeutralStroke2) 2px, var(--colorNeutralStroke2) 4px); }
.relpi-gantt { display: flex; flex-direction: column; gap: 6px; }
.relpi-gantt__horas, .relpi-gantt__linha { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 8px; }
.relpi-gantt__horas { display: flex; padding: 0 52px 0 72px; font-size: var(--fontSizeBase100); color: var(--colorNeutralForeground3); }
.relpi-gantt__horas > span { flex: 1; }
.relpi-gantt__rotulo { font-size: var(--fontSizeBase200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relpi-gantt__pct { font-size: var(--fontSizeBase200); font-variant-numeric: tabular-nums; text-align: right; }
.relpi-gantt__trilha { position: relative; height: 22px; border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground3); overflow: hidden; }
.relpi-gantt__seg { position: absolute; top: 0; bottom: 0; }
.relpi-gantt__trilha--empilhada { display: flex; }
.relpi-gantt__parte { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--fontSizeBase100); font-weight: 600; color: #fff; }
.relpi-gantt__parte.relpi-gantt__seg--ocioso { color: var(--colorNeutralForeground3); border: 0; }
.relpi-gantt__agente { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 8px; }
.relpi-atendentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.relpi-atendente { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px; border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge); }
.relpi-rosca { position: relative; width: 120px; height: 120px; }
.relpi-rosca__centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 699.9px) {
  .relpi-gantt__horas, .relpi-gantt__linha { grid-template-columns: 48px 1fr 36px; gap: 4px; }
  .relpi-gantt__horas { padding: 0 40px 0 52px; }
  .relpi-gantt__horas > span:nth-child(even) { visibility: hidden; }
}
.relpi-auth--publico { padding: 0; }
.relpi-auth--publico .relpi-auth__intro p { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }
.relpi-portal__tutoriais { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.relpi-portal__midia { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--borderRadiusLarge); background-color: var(--colorNeutralBackground3); }
@media (max-width: 699.9px) {
  .relpi-portal__main { padding: 16px 16px 96px; }
}

/* Sprite de ícones (símbolos referenciados por <use href="#i-nome">) */
.relpi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== relpi-compat-css ===== */
/*
  ======================================================================
  COMPATIBILIDADE DE MIGRAÇÃO (temporária — remover na Sprint 11 do PRD)
  ======================================================================
  Classes legadas que scripts antigos ainda injetam (tickets.js,
  searchable-select.js, spellcheck.js, quill-slash-commands.js…) quando
  rodam dentro do shell novo. Estilizadas SOMENTE com tokens desta
  camada, para não destoar do design system enquanto os scripts não são
  reescritos. Nenhuma tela nova deve usar estas classes diretamente.
  ======================================================================
*/
.relpi-compat .btn,
.relpi-compat .btn-primary,
.relpi-compat .btn-secondary,
.relpi-compat .btn-danger,
.relpi-compat .btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: 999px;
  color: #000;
  background-color: var(--colorNeutralBackground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
}
.relpi-compat .btn:hover { background-color: #f5f5f5; border-color: #c7c7c7; }
.relpi-compat .btn-primary { color: #fff; background-color: var(--colorBrandBackground); border-color: transparent; }
.relpi-compat .btn-primary:hover { background-color: var(--colorBrandBackgroundHover); }
.relpi-compat .btn-danger { color: #fff; background-color: var(--colorPaletteRedBackground3); border-color: transparent; }
.relpi-compat .btn-sm { min-height: 24px; padding: 2px 12px; font-size: var(--fontSizeBase200); }
.relpi-compat .btn:disabled,
.relpi-compat .btn[disabled] { color: var(--colorNeutralForegroundDisabled); background-color: var(--colorNeutralBackgroundDisabled); border-color: var(--colorNeutralStrokeDisabled); cursor: not-allowed; }

.relpi-compat .form-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.relpi-compat .form-group > label { padding: 2px 0; color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }
.relpi-compat .form-control,
.relpi-compat .searchable-select-input {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  outline: 0;
}
.relpi-compat .form-control:focus,
.relpi-compat .searchable-select-input:focus { border-bottom-color: var(--colorCompoundBrandBackground); box-shadow: inset 0 -1px 0 var(--colorCompoundBrandBackground); }
.relpi-compat .form-control::placeholder,
.relpi-compat .searchable-select-input::placeholder { color: var(--colorNeutralForeground4); }

.relpi-compat .searchable-select-wrapper { position: relative; }
.relpi-compat .searchable-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow16);
}
.relpi-compat .searchable-select-option { padding: 6px 8px; border-radius: var(--borderRadiusMedium); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300); cursor: pointer; }
.relpi-compat .searchable-select-option:hover,
.relpi-compat .searchable-select-option.highlighted { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground1Hover); }
.relpi-compat .searchable-select-option.selected { font-weight: 600; color: var(--colorBrandForeground2); background-color: var(--colorBrandBackground2); }
.relpi-compat .searchable-select-empty { padding: 12px; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); text-align: center; }
.relpi-compat .searchable-select-warning { margin-top: 4px; color: var(--colorPaletteRedForeground1); font-size: var(--fontSizeBase200); }
.relpi-compat .searchable-select-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--colorNeutralForeground3); background: none; cursor: pointer; }