@import url(../node_modules/bootstrap-icons/font/bootstrap-icons.min.css);
@import url(../node_modules/bootstrap/dist/css/bootstrap.min.css);
@import url(../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css);
@import url(../node_modules/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css);
@import url(../node_modules/datatables.net-columncontrol-bs5/css/columnControl.bootstrap5.min.css);
@import url(../node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css);
@import url(../node_modules/datatables.net-searchbuilder-bs5/css/searchBuilder.bootstrap5.min.css);
@import url(../node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.css);
@import url(../dependencias/TabelaRedimencionavel/TabelaRedimencionavel.css);
@import url(fontes/fontes.css);
@import url(details-content-transition.css);
@import url(btn-explosao.css);
@import url(details-summary-transition.css);
@import url(webkit-progress-value.css);
@import url(column-count.css);
@import url(input-type-range-value.css);
@import url(title-after.css);
@import url(minhas-fontes/style.css);
@import url(btn-has-btn-check.css);
@import url(tabela-altura.css);
@import url(btn-links-externos.css);
@import url(modal-editor-yellow.css);
@import url(layout-configurator.css);
@import url(modal-config-links.css);
@import url(table-row-height.css);
@import url(btn-ia.css);
@import url(btn-ia-force.css);
@import url(dropdown-moderno.css);

:root {
  interpolate-size: allow-keywords;
  --star-cor-5: 215, 49, 23;
  --star-cor-4: 237, 98, 31;
  --star-cor-3: 249, 178, 24;
  --star-cor-2: 246, 221, 32;
  --star-cor-1: 251, 235, 96;
  --star-dark: 72, 76, 79;
  --star-light: 157, 157, 155;
  --bs-secondary-bg-rgb: 239, 236, 233;
  --bs-tertiary-bg-rgb: 250, 249, 248;
  --star-bg-laranga: #ff6a00;
  --star-bg-laranga-rgb: 255, 106, 0;
  --star-box-shadow-laranja: 0 0 0 .25rem rgba(var(--star-bg-laranga-rgb), .25);
}

.text-star-1 {
  color: rgb(var(--star-cor-1)) !important;
}

.text-star-2 {
  color: rgb(var(--star-cor-2)) !important;
}

.text-star-3 {
  color: rgb(var(--star-cor-3)) !important;
}

.text-star-4 {
  color: rgb(var(--star-cor-4)) !important;
}

.text-star-5 {
  color: rgb(var(--star-cor-5)) !important;
}

.text-star {
  color: rgb(var(--star-bg-laranga-rgb)) !important;
}


body {
  font-family: 'Corisande Light', var(--bs-font-sans-serif);
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.25);
}

.nav,
.nav-link:focus,
.nav-link:hover {
  --bs-nav-link-color: rgb(var(--star-cor-5));
  --bs-nav-link-hover-color: var(--bs-nav-link-color);
}

.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(253, 110, 13, .25);
}

.mw-50 {
  min-width: 50%;
}

.mw-60 {
  min-width: 60%;
}

.vh-100 {
  height: 100dvh !important;
}


.dt-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;

  .row {
    margin: 0 !important;
  }

  thead {
    box-shadow: 0px 1px 1px 0px silver;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 15 !important;
    /* Garantir que cabeçalho fique sempre acima dos botões */
  }

  &>div.row:nth-child(1) {
    justify-content: space-around !important;
    --bs-gutter-y: 0.25rem;
    margin-bottom: 0.25rem !important;

    /** */
    &>div {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: .25rem;
      width: auto;
    }
  }

  &>div.row.dt-layout-table {
    flex-grow: 1;
    overflow: hidden;

    &>div {
      overflow: auto;
      height: 100%;
      margin: 0 !important;
      overscroll-behavior: contain;
    }

    thead>tr>th {
      cursor: grab;
      text-align: center;
      /* Garantir que títulos fiquem sempre acima dos botões */
      position: relative;
      z-index: 10 !important;
    }

    /** Estado de ativo */
    thead>tr>th {

      &.dt-ordering-desc,
      &.dt-ordering-asc {
        background-color: rgb(222, 222, 222);
      }

      &:has(.dtcc-button_active) {
        background-color: rgb(222, 222, 222);
      }
    }

    tbody>tr:has(input:checked) {
      --bs-table-color-state: var(--bs-table-hover-color);
      --bs-table-bg-state: var(--bs-table-hover-bg);
    }

    tbody>tr:active>* {
      background-color: rgba(var(--star-cor-1), .3) !important;
    }

    table:has(input:checked) {

      thead {
        position: -webkit-sticky;
        position: sticky;
        z-index: 5;
        /* Aumentado para ficar acima dos botões */
        top: 0;
      }

      td:nth-child(1),
      th:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        z-index: 6;
        /* Primeira coluna (rótulos) sobre os botões */
        left: calc(var(--bs-gutter-x) * -0.5);
        box-shadow: inset -1px 0px #80808030;
      }

    }
  }

  &>div.row:nth-child(3) {
    --bs-gutter-y: 0.25rem;
    height: min-content;
    transition: all 1s ease-in-out allow-discrete;

    &>div.dt-layout-start {
      display: none !important;
    }

    &>div.dt-layout-end {
      margin-bottom: 0.25rem !important;
    }

    &:not(:has(div.dt-layout-end>div.dt-paging>nav>ul.pagination>li:nth-of-type(6))) {
      height: 0;
      display: none;
    }

    @starting-style {
      height: 0;
    }
  }

  &>div.dtcc-dropdown {
    opacity: 1;
    transition: opacity .15s ease-in-out, scale .15s ease-in-out;
    width: 300px;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    max-height: 90%;
    max-width: 90%;
    bottom: 0;
    right: 0;
    margin: auto;
    height: fit-content;
    overflow: auto;
    scale: 1;

    @starting-style {
      opacity: 0;
      scale: .6;
    }
  }

}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

.form-control:focus,
.form-check-input:focus,
.form-select:focus {
  border-color: #ff6a00;
  box-shadow: 0 0 0 0.25rem rgba(var(--star-bg-laranga-rgb), 0.25);
}

.form-check-input:checked {
  background-color: #ff6a00;
  border-color: #ff6a00;
}

.btn-star {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff6a00;
  --bs-btn-border-color: #ff6a00;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff7614;
  --bs-btn-hover-border-color: #ff6a00;
  --bs-btn-focus-shadow-rgb: var(--star-bg-laranga-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #e86000;
  --bs-btn-active-border-color: #ff6a00;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ff8f40;
  --bs-btn-disabled-border-color: #ff8f40;
}

.btn-outline-star {
  --bs-btn-color: #ff6a00;
  --bs-btn-border-color: #ff6a00;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff7614;
  --bs-btn-hover-border-color: #ff6a00;
  --bs-btn-focus-shadow-rgb: var(--star-bg-laranga-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #e86000;
  --bs-btn-active-border-color: #ff6a00;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ff6a00;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff8f40;
  --bs-gradient: none;
}

.navbar-expand .nav-link:not([data-bs-toggle="pill"]) {
  border-radius: 0.25rem;

  &.dropdown-toggle.show,
  &:active {
    background-color: #8080801a;
    transition-duration: 0s;
  }

}

.banner-star {
  /* keep container fully opaque so children (buttons/cards) remain nítidos */
  position: relative;
  transition: all 500ms ease-in-out;
  scale: 1;
  opacity: 1;

  /* the visible faded background is moved to a pseudo element so content stays sharp */
}

.banner-star::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://star.med.br/wp-content/uploads/2020/10/logo-HD-842x248-1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  opacity: .28;
  /* faded background */
  pointer-events: none;
  z-index: 0;
}

/* Cards dentro do banner: posicionados no canto esquerdo, maiores e quadrados */

.banner-cards {
  position: absolute;
  inset: 2rem auto auto 2rem;
  /* top/left offset dentro do banner */
  display: flex;
  flex-direction: row;
  /* lado a lado em telas maiores */
  gap: 1.25rem;
  align-items: stretch;
  z-index: 2;
}

/* Force banner interactive elements to be fully opaque (nítidos) */
.banner-star .clickable-card,
.banner-star .card,
.banner-star .card-body,
.banner-star i.bi,
.banner-star .card-text,
.banner-star .card-title {
  opacity: 1 !important;
  color: inherit;
}

.banner-cards .card-col {
  display: block;
  opacity: 1;
  width: 16rem;
  /* ajustado para melhor visibilidade */
  height: 16rem;
  flex: 0 0 auto;
  min-width: 12rem;
  /* limite mínimo para manter conteúdo legível */
}

.aparecer-em-100ms {
  opacity: 1;
  scale: 1;
  transition: opacity 100ms ease-in-out allow-discrete,
    scale 100ms ease-in-out allow-discrete;

  @starting-style {
    scale: .8;
    opacity: 0;
  }
}

.transform-translate-25-25 {
  transform: translate(25%, 25%) !important;
}

.clickable-card {
  outline-color: #808080;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  background: rgba(255, 255, 255, 0.95);
}

.clickable-card:focus,
.clickable-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

/* ícone e texto maiores para melhor legibilidade */
.clickable-card .card-body i.bi {
  font-size: 2.5rem !important;
}

/* Em telas pequenas, reduzir tamanho e reposicionar */
@media (max-width: 1199.98px) {

  /* telas médias: ajustar para mais responsivo */
  .banner-cards {
    inset: 1.25rem auto auto 1.25rem;
    gap: 1rem;
  }

  .banner-cards .card-col {
    width: 13rem;
    height: 13rem;
  }
}

@media (max-width: 767.98px) {

  /* telas pequenas: empilha os cards e reduz tamanho */
  .banner-cards {
    position: relative;
    inset: auto;
    flex-direction: column;
    padding: 0.5rem;
    width: calc(100% - 1rem);
    left: 0.5rem;
  }

  .banner-cards .card-col {
    width: 100%;
    height: auto;
    /* permitir conteúdo determinar altura */
    aspect-ratio: 3 / 1.2;
    /* mais horizontal em tela pequena */
  }

  /* Tipografia e comportamento interno para evitar corte de texto */
  .clickable-card .card-body {
    padding: 1rem;
    gap: .5rem;
  }

  .clickable-card .card-body .card-title {
    font-size: clamp(1rem, 1.8vw, 1.05rem);
    line-height: 1.1;
    margin-bottom: .25rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .clickable-card .card-body .card-text {
    font-size: clamp(.85rem, 1.6vw, .95rem);
    color: var(--star-light);
    white-space: normal;
  }

  /* Em caso de textos muito longos: permitir quebra de linha e reduzir ícone */
  .clickable-card .d-flex.align-items-center>i.bi {
    flex: 0 0 auto;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  }

  /* Em telas pequenas, empilhar conteúdo interno para caber */
  @media (max-width: 767.98px) {
    .clickable-card .card-body {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .clickable-card .text-start {
      flex: 1 1 auto;
      padding-right: .5rem;
    }
  }
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: rgb(var(--star-cor-3));
}

.recolhivel {
  width: auto;
  transition: all 150ms ease-in-out allow-discrete;

  &.recolher-barra {
    width: 0;
    display: none !important;
  }

  @starting-style {
    width: 0;
  }
}

.menu-vertical {
  /* overflow: hidden; */
  /* min-inline-size: fit-content; */
  min-width: fit-content;
  width: 0;
  transition: all 150ms ease-in-out allow-discrete;

  &.recolher-barra,
  .recolher-barra {
    min-width: 0;
    display: none !important;
  }

  @starting-style {
    min-width: 0;
  }

  .nav-link:not([data-bs-toggle="pill"]) {

    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    box-shadow: none;

    &:hover,
    &:focus-visible {
      transition: none;
      background-color: rgba(127, 127, 127, .05);
    }

    &:active,
    &.active {
      background-color: rgba(127, 127, 127, .1);
    }
  }

  .tab-pane a.nav-link::before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMCAyYTIgMiAwIDAgMSAyLTJoMTJhMiAyIDAgMCAxIDIgMnYxMmEyIDIgMCAwIDEtMiAySDJhMiAyIDAgMCAxLTItMnptMTUgMmgtNHYzaDR6bTAgNGgtNHYzaDR6bTAgNGgtNHYzaDNhMSAxIDAgMCAwMS0xem0tNSAzdi0zSDZ2M3ptLTUgMHYtM0gxdjJhMSAxIDAgMCAwIDEgMXptLTQtNGg0VjhIMXptMC00aDRWNEgxem01LTN2M2g0VjR6bTQgNEg2djNoNHoiLz48L3N2Zz4=);
    display: inline-block;
    transition: .1s ease-in-out;
    margin-right: .5rem;
    font-weight: normal;
    line-height: 0;
    opacity: .65;
  }

  .nav.nav-pills>* {
    padding: 0;
    min-width: 4.2rem;
    max-width: 4.2rem;
    --bs-nav-link-hover-color: var(--bs-navbar-color);
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-pills-link-active-color: var(--bs-navbar-color);
    display: flex;
    flex-direction: column;

    &:hover,
    &:focus-visible {
      transition: none;
      background-color: rgba(127, 127, 127, .05);
    }

    &:active,
    &.active {
      background-color: rgba(127, 127, 127, .1);
      font-weight: bold;
    }

    small {
      font-size: .75em;
      hyphens: auto;
    }

  }

  & *::-webkit-scrollbar {
    max-width: 5px;
    max-height: 5px;
  }

  & *::-webkit-scrollbar-track {
    background: transparent;
  }

  & *::-webkit-scrollbar-thumb {
    background: #80808080;
    border-radius: 1rem;
  }

  & *::-webkit-scrollbar-thumb:hover {
    background: #808080;
  }
}

.tabelas-de-dados:not(:has(tbody input[type=checkbox]:checked)) {
  .menu-vertical {
    min-width: 0;
    display: none !important;
  }
}

.bi::before {
  vertical-align: middle;
}

.before-none::before {
  content: none !important;
}

.si {
  font-size: larger;
  line-height: 0;
}

[draggable="true"] {
  cursor: grab;
  transition: all 150ms ease;
}

[draggable="true"]:active {
  scale: 1.05;
  opacity: 0.5;
  cursor: grabbing;
}

.text-bg-star {
  color: #fff !important;
  background-color: RGBA(var(--star-bg-laranga-rgb), var(--bs-bg-opacity, 1)) !important;
}

.tabela-periferica td:not(:is(td:nth-child(1))) {
  width: 0;
}


.largura-maxima-200 td {
  max-width: var(--col-width, 200px);
  /* Largura máxima padrão de 200px */
  min-width: var(--col-min-width, 50px);
  /* Largura mínima de 50px */
  width: var(--col-width, auto);
}

/* Primeira coluna (checkbox) tem largura fixa */
.grudar-primeira-coluna {

  th:nth-child(1),
  td:nth-child(1) {
    width: 50px;
    text-align: center !important;
  }
}

/* Add visible horizontal and vertical borders for peripheral tables */
.position {
  border-collapse: collapse;
}

.position th,
.position td {
  border: 1px solid #e9ecef;
  /* light border consistent with Bootstrap */
}

.position thead th {
  border-bottom-width: 2px;
  /* slightly thicker header separator */
}

/* Explode control column + subtle circular chevron button (option 1) */
.position th.controle-col,
.position td.td-explodir-col {
  width: 2.4rem;
  text-align: center;
  vertical-align: middle;
  padding: .25rem .2rem !important;
  position: sticky;
  left: 0;
  background: transparent;
  z-index: 3;
}

.td-explodir-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-cell explode button: positioned inside each TD at the right edge (option 1)
   - Buttons are visible by default and do not change table column count
   - Keep a small right padding on TDs so text doesn't flow under the button
*/
.position td {
  position: relative;
  /* ensure absolute children are positioned to the cell */
  padding-right: 2.2rem;
  /* reserve space for btn-explodir */
}

.position td .btn-explodir {
  position: absolute;
  right: .45rem;
  top: 50%;
  /* use CSS variable so rotation can be composed with vertical centering */
  --btn-translate: translateY(-50%);
  transform: var(--btn-translate);
  /* subtle white background with a thin border so the button reads as an independent control */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 0.14rem;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .14s ease, transform .14s ease, background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* keep button accessible via keyboard: when button itself is focused, ensure visible focus ring */
.position td .btn-explodir:focus {
  outline: 0;
  box-shadow: 0 0 0 .18rem rgba(var(--star-bg-laranga-rgb), .18);
}

.btn-explodir {
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  /* no visible square */
  color: rgba(0, 0, 0, 0.65);
  border: none;
  box-shadow: none;
  transition: transform .18s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
  opacity: .95;
}

.btn-explodir i.bi {
  font-size: .75rem;
}

.btn-explodir:hover {
  background: rgba(var(--star-bg-laranga-rgb), .12);
  color: rgb(var(--star-cor-5));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-color: rgba(var(--star-bg-laranga-rgb), .22);
}

.btn-explodir.expanded {
  /* preserve the translateY used for vertical centering and then rotate */
  transform: var(--btn-translate) rotate(180deg);
  background: rgba(var(--star-bg-laranga-rgb), .18);
  color: rgb(var(--star-cor-5));
  border-color: rgba(var(--star-bg-laranga-rgb), .28);
}

/* Ensure cells reserve space for absolute button and text doesn't wrap under it */
.position td,
.position th {
  position: relative;
  padding-right: 1.8rem;
  /* espaço reduzido para botão menor */
}

:has(input.ver-tabelas-colunas-inativas-do-sistema:not(:is(:checked))) {
  .inativo-opaco tr:has(input.atividade:not(:checked)) {
    display: none;
  }

  table.inativo-opaco:has(caption input.atividade:not(:checked)) {
    display: none;
  }
}

.inativo-opaco tr:has(input.atividade:not(:checked)) {
  opacity: 0.5;
}

table.inativo-opaco:has(caption input.atividade:not(:checked)) {
  opacity: 0.5;
}

/*
*:hover:not(:has(:hover)) {
    box-shadow: inset 0px 0px 0px 1px gold;
}
*/

form :invalid {
  border-color: var(--bs-form-invalid-border-color);
}

form :invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

label:has(input:required) :where(div, span):not(:has(>*))::after {
  content: " *";
  color: red;
}

.toast {
  --bs-toast-font-size: .99rem;
  transform: translateX(0%);
  transition: all 150ms ease-in-out;
  height: fit-content;
  overflow: hidden;


  &.closing {
    height: 0;
    margin-bottom: 0;
  }

  @starting-style {
    height: 0;
    margin-bottom: 0;
  }
}

.form-range {
  touch-action: none;
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--star-bg-laranga-rgb), 0.25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--star-bg-laranga-rgb), 0.25);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--star-bg-laranga);
}

ul.form-search-dropdown {
  position: fixed;
  position-area: span-right bottom;
  height: 0;
  max-height: 45vh;
  max-height: 45dvh;
  min-width: 11rem;
  z-index: 1;
  outline-width: thin;
  overflow-y: auto;

  transition: height 0s 150ms linear allow-discrete;

  position-try-fallbacks:
    span-left bottom,
    span-left top,
    span-right top;
}

search.form-search-dropdown {
  &:has(*:focus) {
    & ul.form-search-dropdown {
      height: max-content;
    }
  }
}

label {
  user-select: none;
}

.imagem-previsualizacao-input-file {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

label:has(.spinner-border) {
  cursor: wait;
}

.modo-tabela-em-lote form {
  max-width: 410px;

  &>div:nth-child(1) {
    flex: 1 0 0;

    label>div:nth-child(2) {
      flex: 1 0 0;
    }
  }
}

.formularios-individuais-lote {
  max-width: 0;
  opacity: 0;
  transition: all 300ms ease-in-out allow-discrete;

  & div:has(>input),
  & div:has(>select),
  & div:has(>textarea) {
    min-width: 50%;
  }

  &>* {
    min-width: min-content;
  }
}

.line-clamp-1-box {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;

  /* &:active {
    -webkit-line-clamp: 10;
    line-clamp: 10;
    white-space: normal !important;
  } */
}

.line-clamp-2-box {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.imagem-tabela {
  height: 3rem;
  width: 3rem;

  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.valor-multi-select {
  background-color: rgb(var(--star-cor-3));
}

.celula-atualizada {
  border-radius: .25rem;
  animation: celula-atualizada 5s 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes celula-atualizada {

  0%,
  100% {
    background-color: rgba(var(--star-cor-1), 0);
    transform: scale(1);
  }

  20% {
    background-color: rgba(var(--star-cor-3), 0.9);
    transform: scale(1.01);
  }

  35% {
    background-color: rgba(var(--star-cor-3), 0.4);
    transform: scale(0.99);
  }

  50% {
    background-color: rgba(var(--star-cor-3), 1);
    transform: scale(1.03);
  }

  70% {
    background-color: rgba(var(--star-cor-1), 0.6);
    transform: scale(1);
  }
}

[data-title-status] {

  &::before {
    content: attr(data-title-status);
    font-family: var(--bs-font-monospace);
    font-size: small;
    background-color: var(--star-bg-laranga);
    color: #fff;
    padding: 0.01rem 0.5rem;
    border-radius: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: all 150ms ease-in-out;
    border: 1px solid rgb(var(--star-cor-4));
  }

  &:hover::before,
  &:focus::before {
    opacity: .85;
  }
}

.star-badge {
  position: relative;

  &::before {
    content: "";
    padding: .4rem;
    position: absolute;
    background-color: rgb(var(--star-cor-4));
    border: 2px solid white;
    border-radius: 50%;
    top: 0;
    left: 100%;
    transform: translate(-62%, -38%);
  }
}

.star-trianglo-badge {
  position: relative;

  &::before {
    content: url(data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20stroke%3D%22%23ffffff%22%20d%3D%22m15.52063%2C3.39672l-0.05428%2C9.25127c-0.02762%2C0.80302%20-0.65031%2C1.54201%20-1.77707%2C1.35298l-11.88796%2C-2.26309c-1.43002%2C-0.3178%20-1.75776%2C-2.07483%20-0.6978%2C-2.65898l12.37816%2C-6.97832c0.98239%2C-0.42068%202.03291%2C0.21067%202.03896%2C1.29614z%22%20fill%3D%22%23d73117%22%20%2F%3E%0A%3C%2Fsvg%3E);
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-70%, -30%);
  }
}

.filtro-atual-aplicado {
  max-width: 180px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.bg-star-1 {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: rgb(var(--star-cor-1));
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: rgb(var(--star-cor-2));
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
}

.btn-google>div {
  width: 100%;

  &>iframe {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.overscroll-behavior-contain {
  overscroll-behavior: contain;
}

.nao-quebrar-em-coluna {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Popup de opções para os cards */
.card-popup {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: .25rem;
  z-index: 9999;
  min-width: 12rem;
  overflow-y: hidden;
  overflow-x: hidden;
}

.card-popup-item {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: .95rem;
}

.card-popup-item:hover,
.card-popup-item:focus {
  background: rgba(255, 106, 0, 0.08);
}

/* Styled popup: entrance animation, pointer arrow, separators and better hover/focus */
.card-popup {
  animation: popup-in .16s cubic-bezier(.2, .9, .2, 1) both;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .25rem 0;
  max-height: 70vh;
}

.card-popup::before {
  /* small arrow pointing to the trigger element */
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  top: -8px;
  left: 1.25rem;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.04));
}

.card-popup-item {
  padding: .55rem .9rem;
  transition: background-color .12s ease, transform .08s ease;
}

.card-popup-item+.card-popup-item {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.card-popup-item:focus {
  outline: none;
  background: rgba(255, 106, 0, 0.12);
  transform: translateX(2px);
}

.card-popup-item:hover {
  transform: translateX(2px);
}

/* Scrollbar customizada para o popup */
.card-popup::-webkit-scrollbar {
  width: 6px;
}

.card-popup::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.card-popup::-webkit-scrollbar-thumb {
  background: rgba(255, 106, 0, 0.3);
  border-radius: 3px;
}

.card-popup::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 106, 0, 0.5);
}

/* Scrollbar para Firefox */
.card-popup {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 106, 0, 0.3) rgba(0, 0, 0, 0.05);
}

/* Indicador sutil de scroll quando necessário */
.card-popup::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 8px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card-popup.has-scroll {
  overflow-y: auto;
}

.card-popup.has-scroll::after {
  opacity: 1;
}

@keyframes popup-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

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

/* Exploded row styling - cards menores e mais compactos */
.linha-explodida td {
  background: rgba(250, 250, 252, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: .4rem .75rem !important;
  animation: explode-row-in .14s cubic-bezier(.2, .9, .2, 1) both;
}


.linha-explodida td>.p-2 {
  display: flex;
  gap: .4rem;
  flex-direction: column;
  /* stack vertically */
  align-items: stretch;
  padding: .3rem !important;
}

.linha-explodida .mb-1 {
  display: flex;
  gap: .35rem;
  align-items: stretch;
  flex-direction: column;
  /* label above value to avoid extremely long single-line values */
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: .4rem .5rem;
  border-radius: .3rem;
  box-shadow: 0 3px 10px rgba(12, 12, 14, 0.04);
  width: 100%;
  font-size: .85rem;
}

.linha-explodida .mb-1 .explodido-label {
  color: rgb(var(--star-cor-5));
  font-size: .85rem;
  font-weight: 500;
}

.explodido-item {
  max-width: 80vw;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1020;
}

.linha-explodida .mb-1 .explodido-valor,
.linha-explodida .mb-1 span {
  color: #3b3b3b;
  font-size: 1rem;
  white-space: normal;
  /* allow wrapping */
  overflow-wrap: anywhere;
  /* More aggressive breaking to avoid extremely long unbroken tokens */
  word-break: break-all;
  hyphens: auto;
}

/* Ensure links and inline elements inside exploded values also break */
.linha-explodida .explodido-valor,
.linha-explodida .explodido-valor *,
.linha-explodida .mb-1 span,
.linha-explodida .mb-1 span * {
  display: block;
  width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  hyphens: auto !important;
}

@keyframes explode-row-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.995);
  }

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

/* Responsive: stack exploded fields on narrow screens */
@media (max-width: 767.98px) {
  .linha-explodida td>.p-2 {
    flex-direction: column;
  }

  .linha-explodida .mb-1 {
    width: 100%;
  }
}

/* Make primary UI buttons fully opaque (override accidental opacity rules) */
.btn,
.btn-star,
.btn-outline-star,
.btn-outline-info,
.btn-outline-secondary,
.btn-explodir,
.btn-close {
  opacity: 1 !important;
}

div#barrarecolhivel li {
  min-width: 220px;
}

@media (min-width: 768px) {
  .barra-vertical-alteracao-lote {

    & .formularios-individuais-lote {
      max-width: max-content;
      opacity: 1;

      @starting-style {
        max-width: 0;
        opacity: 0;
      }
    }
  }
}

@media (max-width: 768px) {

  .barra-vertical-alteracao-lote:has(:hover),
  .barra-vertical-alteracao-lote:has(:focus) {

    & .formularios-individuais-lote {
      max-width: max-content;
      opacity: 1;

      @starting-style {
        max-width: 0;
        opacity: 0;
      }
    }
  }
}


@media (max-width: 576px) {

  :has(>#barraVerticalDeNavegacao) {
    flex-direction: column-reverse;
  }


  nav#barraVerticalDeNavegacao {
    width: 100%;

    &>div {
      flex-direction: column-reverse;

      &>div.nav.nav-pills {
        flex-direction: row !important;

        &>:first-child {
          margin-left: auto;
        }

        &>:last-child {
          margin-right: auto;
        }
      }

      &>div.tab-content {
        max-height: 80% !important;
        width: 100%;

        &.recolher-barra {
          height: 0;
        }

        @starting-style {
          height: 0;
        }
      }
    }

    &.menu-vertical {
      min-width: unset;
      word-break: auto-phrase;
    }
  }


}

.mvh-65 {
  max-height: 65vh;
  max-height: 65dvh;
}

/* Column resize handle: small vertical bar on the right edge of TH to drag */
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  /* larger hit area */
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 6;

}



.col-resizer:hover {
  background: rgba(var(--star-bg-laranga-rgb), 0.12);
}

.col-resizer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 3px;
  height: calc(100% - 12px);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 1px;
}

.col-resizer:hover::after,
.col-resizer:active::after {
  background: rgb(var(--star-cor-5));
  /* laranja */
}

/* On small screens the resizer becomes inline so it doesn't break layout */
@media (max-width: 480px) {
  .col-resizer {
    display: none;
  }
}

/* Regras originais para btn-explodir desativadas - sendo sobrescritas pelos arquivos específicos */

/* Forçar botões personalizados a ficarem dentro do fluxo normal da tabela */
.largura-maxima-200 td .btn-explodir-linha,
.dataTable td .btn-explodir-linha,
.largura-maxima-200 td .btn-modal-dados,
.dataTable td .btn-modal-dados,
.largura-maxima-200 td .btn-link-externo,
.dataTable td .btn-link-externo {
  position: static !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 !important;
}

/* Garantir larguras fixas para colunas de botões */
.largura-maxima-200 .coluna-explosao,
.dataTable .coluna-explosao,
.largura-maxima-200 .coluna-modal,
.dataTable .coluna-modal,
.largura-maxima-200 [class*="coluna-link-"],
.dataTable [class*="coluna-link-"] {
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  --col-width: 45px !important;
  --col-min-width: 45px !important;
}

@media (max-width: 768px) {

  .largura-maxima-200 .coluna-explosao,
  .dataTable .coluna-explosao,
  .largura-maxima-200 .coluna-modal,
  .dataTable .coluna-modal,
  .largura-maxima-200 [class*="coluna-link-"],
  .dataTable [class*="coluna-link-"] {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    --col-width: 35px !important;
    --col-min-width: 35px !important;
  }
}

@media (max-width: 480px) {

  .largura-maxima-200 .coluna-explosao,
  .dataTable .coluna-explosao,
  .largura-maxima-200 .coluna-modal,
  .dataTable .coluna-modal,
  .largura-maxima-200 [class*="coluna-link-"],
  .dataTable [class*="coluna-link-"] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    --col-width: 32px !important;
    --col-min-width: 32px !important;
  }
}

/* keep the button visible and accessible when cell is focused */
.largura-maxima-200 td:focus-within .btn-explodir,
.dataTable td:focus-within .btn-explodir {
  opacity: 1;
}

/* Small tweak for very narrow screens: move button to end of line flow */
@media (max-width: 480px) {

  .largura-maxima-200 td,
  .dataTable td {
    padding-right: .75rem !important;
  }

  /* Regras originais para btn-explodir comentadas - usando as novas regras específicas */
  .largura-maxima-200 td .btn-explodir-linha,
  .dataTable td .btn-explodir-linha,
  .largura-maxima-200 td .btn-modal-dados,
  .dataTable td .btn-modal-dados,
  .largura-maxima-200 td .btn-link-externo,
  .dataTable td .btn-link-externo {
    position: static !important;
    transform: none !important;
    margin-left: 0 !important;
  }
}

/* Larger touch area for resizer on touch devices */
@media (pointer: coarse),
(hover: none) {
  .col-resizer {
    width: 80px !important;
    right: 1px;
    /* extend hit area outside th */
    touch-action: none;
    /* allow JS to capture touch movement */
  }

  .col-resizer::after {
    left: 50%;
    width: 3px;
  }

  /* ensure it's visible as a touch affordance */
  .col-resizer:hover {
    background: rgba(var(--star-bg-laranga-rgb), 0.12) !important;
  }
}

.nivel-permissoes-modulo-cadastro select {
  border-radius: 5rem;
  border: none;
  box-shadow: 1px 1px 2px 1px rgba(127, 127, 127, .25);

  &:has(option[value="1"]:checked) {
    background-color: rgba(var(--star-cor-1), 0.25) !important;

    &:focus {
      box-shadow: 0 0 0 0.25rem rgba(var(--star-cor-1), 0.25);
    }
  }

  &:has(option[value="2"]:checked) {
    background-color: rgba(var(--star-cor-3), 0.25) !important;

    &:focus {
      box-shadow: 0 0 0 0.25rem rgba(var(--star-cor-3), 0.25);
    }
  }

  &:has(option[value="3"]:checked) {
    background-color: rgba(var(--star-cor-4), 0.25) !important;

    &:focus {
      box-shadow: 0 0 0 0.25rem rgba(var(--star-cor-4), 0.25);
    }
  }

  &:has(option[value="4"]:checked) {
    background-color: rgba(var(--star-cor-5), 0.25) !important;

    &:focus {
      box-shadow: 0 0 0 0.25rem rgba(var(--star-cor-5), 0.25);
    }
  }
}

@property --rotacao-cor-fundo-login {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes animateVariable {
  from {
    --rotacao-cor-fundo-login: 240deg;
  }

  to {
    --rotacao-cor-fundo-login: 600deg;
  }
}

.back-container-login {
  background: linear-gradient(var(--rotacao-cor-fundo-login),
      rgb(var(--star-cor-3)) 25%,
      rgba(var(--star-cor-1), .5) 100%);
  opacity: 1;
  transition: 500ms;

  animation: animateVariable 90s infinite linear;

  @starting-style {
    opacity: 0;
  }
}

.container-login-form {
  scale: 1;
  transition: 500ms;

  @starting-style {
    transform: translateY(10rem);
    scale: .5;
  }
}

.scale-hover-star-125 {
  transition: scale 200ms ease-in-out, background-color 100ms ease-in-out;

  &:hover {
    scale: 1.25;
    background-color: rgb(var(--star-cor-1)) !important;
  }
}

/* Animação para status em processamento */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}