:root {
    --jc-blue: 13, 110, 253;
    --jc-indigo: 102, 16, 242;
    --jc-purple: 111, 66, 193;
    --jc-pink: 214, 51, 132;
    --jc-red: 220, 53, 69;
    --jc-orange: 253, 126, 20;
    --jc-yellow: 255, 193, 7;
    --jc-green: 25, 135, 84;
    --jc-teal: 32, 201, 151;
    --jc-cyan: 13, 202, 240;
    --jc-white: 255, 255, 255;
    --jc-gray: 108, 117, 125;
    --jc-gray-dark: 52, 58, 64;
    --jc-primary: 13, 110, 253;
    --jc-secondary: 108, 117, 125;
    --jc-success: 25, 135, 84;
    --jc-info: 13, 202, 240;
    --jc-warning: 255, 193, 7;
    --jc-danger: 220, 53, 69;
    --jc-light: 248, 249, 250;
    --jc-dark: 33, 37, 41;
    --jc-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

/* ****************************************************************************************************** */

html,
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

a,
tr,
td,
li,
.Titulo,
button,
i,
.par,
.impar,
#Mensagens {
    cursor: pointer;
}

i:after:not(.limpo) {
    content: " ";
    white-space: pre;
}

td>i:after {
    content: none !important;
    white-space: pre;
}

.col-minima {
    width: 1%;
    white-space: nowrap;
}

/* *********************************************************************** */

.nav-link:not(:last-child) {
    padding: 0 !important;
    padding-right: 1rem !important;
}

.nav-link:last-child {
    padding: 0 !important;
}

.nav-item:not(:last-child) {
    padding: 0 !important;
    padding-right: 1rem !important;
}

.nav-item:last-child {
    padding: 0 !important;
}

.nav-item.dropdown {
    padding: 0 !important;
}

.dropdown-toggle::after {
    margin-left: 0 !important;
}

#Menu>li>a::after {
    content: none !important;
}

#Menu>li>a>i::after {
    content: none !important;
}

/* *********************************************************************** */

.ulMenu {
    padding: 0rem;
    user-select: none;
}

.ulMenu>li {
    font-weight: normal;
    list-style-type: none;
    padding: .25rem;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ulMenu>li:hover:not(.selecionado) {
    backdrop-filter: invert(0.5);
    /* filter: invert(1); */
    text-shadow: 0px 0px 1px black;
}

.card[class="vidro"] .ulMenu>li.selecionado {
    backdrop-filter: brightness(.8);
    filter: invert(1);
}

.card:not([class^="vidro"]) .ulMenu>li.selecionado {
    backdrop-filter: brightness(.8);
    filter: none;
}

.ulMenu>li.marcas {
    display: grid;
    grid-template-columns: 10px 1fr;
}


/**********************************************************************
tableJC - Tabela com cabeçalho fixo
***********************************************************************/

.tableJC {
    user-select: none;
    vertical-align: middle;
}

.tableJC>thead>tr>th {
    position: sticky !important;
    top: 0 !important;
    white-space: nowrap;
}

.tableJC>tbody>tr:hover:not(.selecionado) {
    backdrop-filter: invert(0.3);
    text-shadow: 0px 0px 1px black;
}

.tableJC>tbody>tr:hover:not(.selecionado) i {
    text-shadow: 0px 0px 1px black, 0px 0px 3px white;
}


.card:not([class="vidro"]) .tableJC>tbody>tr.selecionado {
    backdrop-filter: brightness(.8);
    filter: invert(1);
}

.card:not([class="vidro"]) .tableJC>tbody>tr.selecionado i {
    filter: invert(1);
    text-shadow: 0px 0px 1px black, 0px 0px 3px white;
}

.card[class^="vidro"] .tableJC>tbody>tr.selecionado {
    backdrop-filter: brightness(.8);
    filter: none;
}

/* *********************************************************************** 
Card 
*********************************************************************** */

.card-header {
    min-height: 40px;
    padding: .25rem;
    padding-left: .75rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    grid-column-gap: .25rem;
    align-items: center;
}

.card-header>titulo {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.card-header>barra {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.card-header>barra>i {
    margin-right: .5rem !important;
}

.card-header>barra>i:after {
    content: none !important;
}

.card-body {
    overflow-y: auto;
    padding: 0px;
}

.card-footer {
    padding: .50rem;
}

.card-footer>*:not(:first-of-type) {
    margin-right: .25rem;
}

.aguarde>.modal-dialog>.modal-content i:after {
    content: none !important;
}

.aguarde>.modal-dialog>.modal-content {
    width: fit-content;
    margin: auto;
}

/* ***********************************************************************
bootbox
*********************************************************************** */

.bootbox.secondary {
    background-color: rgba(var(--jc-dark), .9);
}

.bootbox.centralizado>.modal-dialog {
    height: calc(100% - 64px - .50rem) !important;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bootbox.formulario>.modal-dialog {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: max-content !important;
    margin: 0px;
    padding: .50rem;
}

.bootbox.pdf .modal-body {
    padding: .25rem;
    padding-bottom: 0rem;
}

.bootbox.p-0 .modal-body {
    padding: 0px;
}

.alert>.modal-dialog>.modal-content {
    background-color: rgb(var(--jc-warning));
    color: rgb(var(--jc-dark));
}

.danger>.modal-dialog>.modal-content {
    background-color: rgb(var(--jc-danger));
    color: rgb(var(--jc-light));
}

.info>.modal-dialog>.modal-content {
    background-color: rgb(var(--jc-info));
    color: rgb(var(--jc-light));
}

.bootbox-close-button {
    background-color: inherit !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

.bboxPainel80>:not(.modal-sm).modal-dialog {
    max-width: 80% !important;
}

.modal-overflow>.modal-dialog>.modal-content>.modal-body {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
}

/**********************************************************************
Componentes externos
***********************************************************************/

.dropstart .dropdown-toggle::before {
    display: none;
}

.datepicker,
.datepicker-days>.table-condensed {
    margin: auto !important;
}

.tooltip-inner {
    text-align: left !important;
}

fieldset>.input-group:not(:last-child) {
    margin-bottom: .25rem;
}

.form-floating:not(:last-child) {
    margin-bottom: .25rem;
}

.trumbowyg-editor-visible {
    height: -webkit-fill-available;
}

.trumbowyg-editor {
    height: calc(100% - 38px) !important;
}

/***********************************************************************
Padroes do sistema
***********************************************************************/

#AreaDeTrabalho {
    width: inherit;
    height: inherit;
    border: none;
    overflow: auto;
    background: transparent;
}

rodape {
    padding: .25rem;
    border-radius: 0 !important;
}

.Principal {
    background-image: url('../<?php echo $app->backgroundImg ?>');
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    <?php echo $app->backgroundCSS ?>
}

.janela {
    background: transparent;
    padding: .25rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 100%;
    gap: 0px;
    /* padding: 0px; */
}

.janelaCentro {
    /* --bs-bg-opacity: 1; */
    background-color: transparent !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
}

.janela.dark>header {
    background-color: rgba(25, 25, 25, 1);
    color: white;
}

.janela.dark>div:first-child {
    background-color: rgba(25, 25, 25, 1);
    color: white;
}

.janela.dark>div {
    background-color: rgba(32, 32, 32, 1);
    color: white;
}

.janela.dark .popover {
    background-color: rgba(var(--jc-light), .5) !important;
    color: rgba(var(--jc-dark), 1) !important;
    font-weight: bolder !important;
    backdrop-filter: blur(5px) !important;
    box-shadow: 0rem 0rem .25rem rgba(var(--jc-dark), .50) !important;
}

/* ---------------------------------------------------------------------------
   ROLAGEM PADRÃO DO SISTEMA — refeita em 08/09/2026.

   O QUE ESTAVA ERRADO
   Relato do João: *"com o mouse em cima da lista e sem a lista dá um pulinho"*.
   O desenho anterior pedia `overflow-y: overlay` — um valor que o Chrome
   REMOVEU. Sem ele o navegador cai para `auto`, e o par de regras que vinha
   junto passou a mexer no layout:

       .scrollJC::-webkit-scrollbar        { display: none; width: 5px; }
       .scrollJC:hover::-webkit-scrollbar  { display: initial; }

   Sem o mouse a barra não existia e o conteúdo usava a largura toda; com o
   mouse ela nascia e comia 5px. Medido na tela do WhatsApp: o conteúdo saltava
   de 340px para 335px a cada entrada do cursor. A intenção original (barra
   sobreposta) era boa — ela só deixou de existir no navegador.

   POR QUE A BARRA NATIVA NÃO RESOLVE
   No macOS a barra nativa já é sobreposta e translúcida, e ocupa 0px. Mas no
   Windows ela é larga e opaca: seria uma tela diferente por sistema. O João
   pediu para PADRONIZAR (08/09/2026), e padronizar exige desenhar a barra.

   O DESENHO ATUAL
   Barra desenhada SEMPRE ocupa espaço — `overlay` era o único jeito de
   sobrepor, e não existe mais. Então inverte-se a lógica: em vez de a barra
   aparecer e sumir (que é o que empurra o conteúdo), ela fica SEMPRE presente,
   com largura fixa. O que muda com o mouse é só a COR. Espaço constante,
   nenhum pulo, mesmo resultado em macOS, Windows e Linux.

   Os 8px reservados não viram um traço de 8px: a `border` transparente com
   `background-clip: padding-box` deixa o desenho em ~4px, com folga dos dois
   lados.

   ⚠️ A COR SAI DE `currentColor`, E NÃO DE UM CINZA FIXO (relato do João em
   08/09/2026: *"na lista cinza a barra quase não aparece"*). Um cinza médio
   translúcido some no painel escuro da lista e fica pálido no bege do chat —
   é a mesma cor tentando servir a dois contrastes opostos. `currentColor` é a
   cor do TEXTO do painel: branca onde o fundo é escuro, escura onde o fundo é
   claro. A barra acompanha o contraste de cada tela sem ninguém declarar duas
   regras — e vale para os painéis que ainda vão existir.

   (O desenho antigo já mirava nisso, com `currentColor` + `backdrop-filter:
   invert(1)`. O `invert` era o excesso: ele inverte o que está ATRÁS da barra,
   então o resultado dependia do conteúdo que passava por baixo ao rolar.)
   --------------------------------------------------------------------------- */
.scrollJC {
    overflow-y: auto;

    /* Reserva a canaleta mesmo antes de haver o que rolar: sem isto, a primeira
       linha que faz a lista transbordar empurraria o conteúdo. */
    scrollbar-gutter: stable;

    /* Firefox — não entende `::-webkit-scrollbar`, mas entende estas duas. */
    scrollbar-width: thin;
    scrollbar-color: currentColor transparent;
}

.scrollJC::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollJC::-webkit-scrollbar-track {
    background: transparent;
}

/* ⚠️ A TRANSPARÊNCIA VEM DE `color-mix`, NUNCA DE `opacity`. O WebKit ignora
   `opacity` nos pseudo-elementos da barra — foi o que deixou o traço invisível
   na primeira tentativa. `color-mix` devolve uma COR já translúcida, que é um
   valor de `background` como outro qualquer.
   A linha `rgba()` acima dela é o retrato para quem não tem `color-mix`
   (Chrome < 111): perde a adaptação ao fundo, mas mostra a barra. */
.scrollJC::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, .55);
    background: color-mix(in srgb, currentColor 55%, transparent);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

/* ⚠️ Só a COR muda com o mouse. Mexer na largura aqui traz o pulo de volta. */
.scrollJC:hover::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, .8);
    background: color-mix(in srgb, currentColor 80%, transparent);
    background-clip: padding-box;
}

.modal-header {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.modal-footer {
    padding: .5rem;
}

.modal-80>.modal-dialog {
    max-width: 80% !important;
}

.campoJSON>table>tbody>tr>td,
.campoJSON>table>tbody>tr {
    border: none;
}

.campoJSON>table>tbody>tr:not(:first-child)>td {
    padding-top: 0px;
}

.campoJSON>table>tbody>tr>td {
    background-color: silver;
}

.jcElipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

select.jcSelect{
    border: 0!important;
    border-radius: 0!important;
    padding: 0!important;
    height: 100%!important;
    width: 100%!important;
    background-color: transparent!important;
}

/* select.jcSelect>option[selected] {
    background-color: yellow;
} */

select.jcSelect>option[selected]::before {
    content: '✓ ';
}