:root{
    --primary      : #375779; 
    --light        : #00b0e6;
    --input        : rgba(255,255,255,0.05);
    --menu         : #1d242f;
    --body         : #131a20;
    --painel       : #262f3d ;
    --border       : #4d5d6d;
    --border-light : #313b44;
    --color        : #AEBCC0;
    --header       : #192330;
    --button       :  #192330;
    --positive     : #29cc90;
    --negative     : #fe4d5f;
    --input-web    : #2a323a;
    --row-form     : #1e2831;
}

.positive{
    color:var(--positive);
}

.negative{
    color:var(--negative);
}

a{
    color:white;
}

html, body {
    color:var(--color);
    font-family: Mulish, sans-serif;
    background-color: #131a20;
    /* height: 100%; */
    margin: 0;
    padding: 0;
}

h1{
    color:#7a8ea2;
    font-size: 24px;
    text-align: left;
    font-weight: normal;
}

i{
    cursor:pointer;
}

th{
    color:white;
    /* font-weight: normal; */
    font-size:12px; 
}

td, th{
    padding-right:15px;
    padding-left:15px;
}

td:first-child, th:first-child{
    padding-left:30px;
}

td:last-child, th:last-child{
    padding-right:30px; 
}

table{
    border-collapse: collapse;
    width:100%;
    font-size:12px;
    text-align: center;;
}

tr{
    height:25px;
    white-space: nowrap;
}

tr:nth-child(odd){
    background-color:#313941;
}

tr:nth-child(even){
    background-color: #242b33; 
}

input, select{
    background-color: var(--input-web);
    border:none;
    height:25px; 
    width:100px;
    color:var(--color);
}

input[type=NUMBER]{
    width:80px;
    -webkit-appearance: none; /* Remove setas no Chrome, Safari, Edge */
    -moz-appearance: textfield !important; /* Remove setas no Firefox */
    appearance: none !important; 
    margin:0;
}
input[type=DATE]{
    width:120px;
}

select{
    color:var(--color); 
    width:100px;
}

input:focus, select:focus{
    outline:none;
    border: 1px solid #1a54a6;
    box-shadow: 0 0 0 3px rgba(26, 84, 166, 0.3);
    background-color: #111a23;
}

button{
    background-color: var(--primary);
    color:white;
    border:0;
    width: 100px;
}

button:hover{
    background-color: var(--light);
    cursor: pointer;
}

/* radio buttons */

input[type=radio]{
    display: none; 
}

.row{
    display:flex;
    flex-direction: row; 
    background-color: #1e2831;
    margin:15px;
    align-items: center;
    vertical-align: middle;
    justify-items: center;
}

.row-radio-web{
    display:flex;
    flex-direction: row; 
    width:calc(100% - 32px);
    margin:15px;
    border:1px solid var(--input-web);
    border-radius: 5px;
    font-size:14px;
}

.row-radio-modal-web{
    height:45px !important;
    width:30px;
    margin:0;
    padding-top:5px;
    padding-bottom:5px;
}

.row-radio-modal-web label{
    border:1px solid var(--input-web); 
    padding-top:14px !important;
    padding-bottom:14px !important;
}

.cell-radio-web{
    display: flex;
    align-items: end;
    text-align: center;;
    width: calc(100% - 1px);   
}

.cell-radio-web label{
    width: calc(100% - 1px);   
    padding-top:10px;
    padding-bottom:10px;
    /* margin:2.5px; */
    margin-right:0;
    cursor: pointer;
    transition: background-color 0.5s, color 0.5s;
    border-right:1px solid var(--input-web); 
    color:#6b6969;
    user-select: none; 
}

.cell-radio-web label:hover{
    background-color: #262f3d6e;
}

.cell-radio-web label:has(input[type="radio"]:checked) {
  border-right:1px solid var(--input-web); 
  background-color: var(--input-web);
  background-color: #262f3d;
  color: var(--positive);
  color: var(--light);
}



.form label{
    color:var(--color);
    font-size:12px;
    letter-spacing: 1.0px;
    margin-bottom:7.5px;
}



.grid-row-form {
    display: grid;
    grid-template-columns: 2fr 250px; /* espaço restante + botão fixo */
    text-align: center; 
    grid-gap: 10px;
    overflow-y: auto;
    align-items: center;
}

.grid-left {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.grid-item-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--row-form);
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0px; 
}

.grid-item-form:first-child {
    margin-left:15px;
}

.grid-item-form.last-item {
  flex-direction: row;
  justify-content: space-evenly;
  margin-right:15px; 
}

.grid-item-form:last-child button{
     width: 65px;
     height:30px;
     /* margin-left:5px;
     margin-right:5px; */
} 

.table-data th{
    color:white;
    background-color: #1f242b;
    height: 30px;
}

.top-image{
    background-size: cover;
    background-position: center; 
}

.grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     /* grid-gap: 30px;  */ 
}

.grid-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* padding: 10px; */
    padding-left:30px;
    padding-right:30px;
    border-radius: 5px;
}

@media (max-width: 920px) {
    .grid-item {
        display: block;
    }
}

.grid-row-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding:10px;
    padding-left: 20px;
}

.grid-item-filter {
    flex: 1;
}

.field-group-filter input,.field-group-filter select {
    width:80%;
}

.field-group-filter {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    font-size: 12px;
}

.field-group-filter:last-child{
    justify-content: right;
    margin-right:25px;
}


.field-group-filterlabel {
    white-space: nowrap;
}

.field-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 12px;
    justify-content: center; 
}


.field-group label {
    white-space: nowrap;
}




/* LAYOUT PAGINAÇÃO TABELA */
.grid-row-table-page label{
    font-size:11px;
    user-select: none; 
}

.grid-row-table-page{
     display: flex;
     justify-content: space-between;
     width:100%;
     background-color: #303b4d;
     background-color: var(--painel); 
     height: 30px;
}

.grid-item-table-page{
    /* height:30px; */
     margin-top:2px; 
    margin-left:15px;
    justify-content: center;
    align-items: center;;
    flex-direction: column;
    align-items: flex-start;
}

.grid-row-table-page button{
    height: 30px;
    margin-top:-2px;
}

/* NAVEGAÇÃO POR TAB */

.tab{
    background-color: #262f3d;
    background-color: var(--header-mob); 
    margin-left:2%;
    margin-right:2%;
    /* border:1px solid rgb(26, 23, 23); */
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.tab div{
    width:200px; 
    text-align: center;
    color:white;
    font-size:12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor:pointer;
    height:100%;
    line-height: 50px;
    transition: 0.5s;
    padding-bottom:1px;
    /* border-bottom:3px solid #262f3d; */
}

.tab-active{
    border-bottom:3px solid var(--light) !important;
}

.tab-item{
     overflow-y: auto;
}

.tab-painel{
    white-space: nowrap;
    background-color: var(--painel);
    margin:0;
}

.tab-painel div{
    line-height: 40px;
    font-weight: normal;
    border-right:1px solid var(--border-light);
    border-bottom:3px solid var(--painel); 

}

.tab-painel div:hover{
    background-color: #1c232e;
    border-bottom:3px solid #1c232e;
}


.tab-painel-active{

    background: linear-gradient(
    to top,
    #131a20 0%,
    #0e1c2c 80%,
    #141e28 100%
    );  
    border-bottom:3px solid #91a3bd !important; 
}

/* .tab-painel ul{
    color:white;
    margin-left:auto;
    list-style: none;
    display: flex;
    margin-top:0;
    margin-bottom:0;
} 

.tab-painel ul i:last-child{
    margin-right:15px;
   
} 
 
.tab-painel i{
    color:var(--color);
    font-size:18px;
}

.tab-painel i:hover{
    color:#216298;
    color:var(--light);
} */

.tab-painel ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    margin-left: auto;
    gap: 10px;
}

.tab-painel ul li {
    width: 35px;
    height: 30px;
    background-color: #2e3a4a; /* combina com #262f3d */
    border: 1px solid #3a4756;
    border-radius: 3px;
    display: grid;
    place-items: center; /* 👈 centralização total */
    /* transition: background-color 0.3s, transform 0.3s;  */
    cursor: pointer;
}

.tab-painel ul li:hover, .tab-painel ul li:hover i  {
    background-color: #3c4b5d; 
    color: var(--light);
}

.tab-painel ul li:last-child {
    margin-right: 5px;
}
.tab-painel ul li:first-child {
    margin-left: 5px;
}

.tab-painel i {
    color: var(--color);
    font-size: 18px; 
    transition: color 0.3s;
}

/* FIM NAVEGAÇÃO POR TAB*/

.main{
    display:none;
}

.painel{
    margin:2%;
    margin-top:0;
    border-radius: 5px;
    background-color: #262f3d;
    background-color: var(--header-mob);;
    background-color: var(--modal-content);;
}

/**/
.painel-mobile{
    display:none;
}
 
@media screen and (max-width: 920px) { /* mobile*/
    /* html, body {
        height: 100%;
        overflow: hidden; 
    }

    body {
        min-height: 100dvh;
        max-height: 100dvh;
    }
     */
    .leftbar{
        display:none;
    }

    .main{
        width:calc(100%);
        /* height: 85vh; */
    }

    table{
        width: 100%;
        white-space: nowrap;
    }

    h1{
        margin-left:15px;
    }

    .tab{
        margin:0;
        border:0;
        padding-right:0px;
        max-width: 100%;
    } 

    nav{
        margin:0 !important;
        display:none;
    }

    .painel{
        display:none;
    }
    
    .painel-mobile{
        display:block;
    }

    i:hover{
        color:var(--color);
    }
   
}

/* MENU SUPERIOR PARA MOBILE */

.bottombar {
    height: 65px;
    /* height: 10vh; */
    width: 100%; 
    position: fixed;
    bottom: 0; 
    left: 0;
    background-color: var(--menu);  
    z-index: 1;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: stretch;
    z-index: 9998;
}

.bottom i{
    font-size:14px;
}

.bottom-active i, .bottom-active div{
    color:var(--light);
}

.bottombar div{
    margin-top:5px;
    font-size:10px;
}

.bottombar ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%; 
    height: 100%;
    margin: 0; /* Remove margens padrão */
    padding: 0;
}

.bottombar ul li{
    flex:1;
    display:flex;
} 

.bottombar button {
    border-radius: 0;
    font-size: 24px;
    color: #fff;
    color:var(--color);
    display:flex;
    height:100%;
    width: 100%;
    border:0;
    background-color: var(--painel);
    justify-content: center;
    align-items: center;
    /* border-right:1px solid var(--border-light); */
    flex-direction:column;
}

@media screen and (min-width: 920px) { /* web */
    .bottombar{
        display:none;
    }
    .main{
        margin-left:70px;
        width:calc(100% - 70px );
        height:85vh;
    }

}

/* MENU LATERAL ESQUERDA*/

.leftbar {
    height: 100%;
    width: 70px; 
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--menu);
    padding-top: 0px;
    z-index: 1;
    overflow-x: hidden;
}

.leftbar ul, .bottombar ul, .rightbar ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    line-height: 0;
}

.leftbar li{
    padding:0;
    line-height: 0; 
    height: 65px;
}

.leftbar button {
    border-radius: 0;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    color:#AEBCC0;
    width:70px;
    height:65px;
    border:0;
    border-left:3px solid #262f3d;
    border-bottom:1px solid var(--border-light);
    background-color: #262f3d;
    cursor:pointer;
}

.leftbar button:hover{
    background-color: #375779;
    border-left:3px solid #375779;
}

.leftbar .active {
    border-left:3px solid var(--light);
    color:var(--light);
}

.leftbar .active:hover {
    border-left:3px solid var(--light);
    color:var(--light);
}

.leftbar button div{
    font-size:10px;
}

/* MENU LATERAL DIREITA MOBILE  */

/* .rightbar{
    position: fixed;
    right: 0;
    top: 0;
    width: 275px; 
    height: calc(100% - 70px);
    background-color: var(--menu);
    padding-top: 0px;
    z-index: 9999;
    overflow-x: hidden;
    text-align: right;
    border-radius:30px 0px 0px 30px;
    display:none;
    border:1px solid var(--border-light);
} */

.rightbar {
    position: fixed;
    right: -275px; /* menu escondido */
    top: 0;
    width: 275px;
    height: 100%;
    background-color: var(--menu);
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.4s ease; /* suavidade na abertura */
    z-index: 9995;
    text-align: right;
}

.rightbar.menu-active {
    right: 0; /* menu visível */
}

.rightbar ul li:first-child button{
    border-radius: 0;
    text-decoration: none;
    font-size: 24px;
    color: #fff;
    width:70px;
    height:65px;
    border:0;
    background-color:var(--menu);
}

.rightbar ul li:first-child span{
    color:lightgray;
    font-size:11px;
}

.rightbar button{
    border-radius: 0;
    text-decoration: none;
    font-size: 24px;
    color: #fff;
    width:100%;
    height:65px;
    border:0;
    background-color: var(--painel);
    border-left:3px solid var(--painel);
    font-size:16px;
    text-align: left;
    padding-left:25px;
}

.rightbar button:hover{
    background-color: var(--primary);
    border-left:3px solid var(--primary);

}

.rightbar span{
    margin-left:10px;
}

.rightbar .active {
    border-left:3px solid var(--light);
    color:var(--light);
}

/* .menu-active{
    display:block;
} */

.show{
    display:block;
}

.hide{
    display: none !important;
}

.modal-web {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 100%;
  background-color: #131a20;
  background-color: var(--modal-content);
  z-index: 9999;
  max-height: 490px;
}

.modal-web input{
    height:30px;
    width:80%;
    border:0; 
    color:var(--color);
    background-color: var(--input-web);
    transition: border 0.3s ease, background-color 0.3s ease;

}

 .modal-web-footer {
    height: 50px; 
    flex-shrink: 0;
    display: flex; 
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom:10px; 
    gap:10px;
}

 .modal-web-footer button{
    font-size:14px;
    height: 40px;
    border-radius: 5px;
    color:var(--color) !important;
    margin-bottom: 15px;
 }

/* ALERTS MESSAGES*/

#alert-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* min-width: 400px; */
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}

.alert {
    padding: 16px;
    color: #fff;
    font-family: sans-serif;
    pointer-events: auto;
    animation: fadeIn 0.3s ease;
    box-shadow: 10px 2px 18px rgba(0,0,0,0.3);
    opacity: 1;
    transition: opacity 0.8s ease;
    opacity: 0.9;
    font-size:14px;
}

/* Status: 0 = erro */
.alert-error {
    border: 1px solid #832727;
    background-color: #aa4646;
}

/* Status: 1 = sucesso */
.alert-success {
    border: 1px solid #0f438b ;
    background-color: #112c53 ;
}

/* Status: 2 = alerta */
.alert-warning {
    border: 1px solid #ffeeba;
    background-color: #fff3cd;
    color:#907117;
}

/* Status: 3 = informativo */
.alert-info {
    background-color: #d6d8d9;
    
    color:var(--color);
    opacity: 1;
    background-color: var(--body);
    outline:none;
    border: 1px solid #1a54a6;
    box-shadow: 0 0 0 3px rgba(26, 84, 166, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(200px); }
    to   { opacity: 1; transform: translateY(0px); }
}

@media (min-width:920px){ /* web */
    #alert-container {
         min-width: 400px; 
    }
}

@media (max-width: 920px) {
    #alert-container {
        width: 90vw;
        right: 5vw; 
        bottom: 20px;
    }

    .alert {
        font-size: 14px;
        padding: 12px;
        line-height: 1.4;
    }
}


/* cards */

.card {
    display: flex;
    border-radius: 5px;
    margin-left:0px;
    color:white;
    cursor:pointer;
    min-height: 55px;
    font-size:14px;
  }

.card-c1 {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 5px 0 0 5px ;
}

.card-c2 {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-c2 span:last-child{
    font-weight: bold; 
}

.card-positive{
    background-color:#175080;
}

.card-positive:hover{
    background-color:#1868aa;
 
}

.card-positive div:first-child{ 
    background-color:#053c69;
}

.card-negative{
    background-color:#cf6767;
    background-color:#aa4646;
}

.card-negative:hover{
    background-color:#bf4d4d;
}

.card-negative div:first-child{ 
    background-color:#aa4646;
    background-color:#832727;
}

.card-neutral{
    background-color:#55647a;
    background-color:#434a55;
}

.card-neutral:hover{
    background-color:#6d7d96;
    background-color:#676d77;
}

.card-neutral div:first-child{
    background-color: #424d5e; 
    background-color: #303a48;
}

.card-volume{
    background-color: #f0ad4e;
}

/* CUSTOMIZAÇÃO OPERACOES */

nav{
    margin:2%;
    margin-top:1%;
    padding:5px;
    background-color: #262f3d;
    margin-left:calc(2% + 70px);
}

nav i{
    font-size:16px;
}

nav select{
    margin-left:5px;
    width: 90%;
    border:0;
    background-color: #313941;;
    text-align: center;
}

nav select:focus{
    border:1px solid #313941;
}

.nav-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
}

.nav-grid-item {
    text-align: center;;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #262f3d;
    background-color: #313941;
    border-right:1px solid #4d5d6d; 
    height:50px;
    cursor:pointer;
    color:rgb(174, 188, 192);
    font-weight: normal;
    font-size: 12px;
    user-select: none;
}

.nav-grid-item:last-child {
    background-color: #375779;
    color:white;
}

.nav-grid-item:first-child:hover {
    background-color: #313941;
}
.nav-grid-item:last-child:hover {
    background-color: #2ea2d2;
}

.nav-grid-item:hover {
    background-color: #375779;
    color:white;
}

.nav-grid-item-active{
    background-color: var(--primary); 
    color:white;

}

/* PAINEL CARDS SALDOS */

#painel-balances{
    margin-top:-10px;
    background-color: var(--body);
}

.balance-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 10px;  
}

@media (max-width: 800px) {
 
    .balance-grid-row{
         grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
         grid-gap: 10px;
    }

    #painel-balances{
        margin-top:10px;
    }

   
}

.add-button {
    position: fixed;  
    background-color: #175080;  
    bottom: 24px;          
    right: 24px;        
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* color: white; */
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;          
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease;
    opacity: 0.2; 
}

.add-button:hover{
    opacity: 1;
}

@media screen and (max-width: 920px) { /* mobile*/
   .add-button {
     display:none;
  }
}




/* BOTÕES */

.btn{
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s;
    min-width: 60px;
}

.btn-medium{
    width:120px;
    height:30px;
}

.btn-primary{
    /* padding:20px; */
    color: var(--color);
    border:2px solid #17478a; 
    background-color: #102a4e; 
}

.btn-primary:hover{
    background-color:#053c69;
}

.btn-secondary{
    color:var(--color);
    background-color: var(--header);
    border:1px solid var(--border);
    font-size:12px;
    padding:2px;
    margin:2px;
    max-width: 75px;
    /* height:2 */
}

.btn-secondary:hover{
    background-color: #2c3e55;
}

.btn-danger{
    border: 2px solid #832727;
    background-color: #331515;
    color:#df9d9d;
}

.btn-danger:hover{
    background-color: #441c1c;
}

.btn-info{
    border: 2px solid #273441;
    background-color: #17222c;
    color:#646e80; 
}

.btn-info:hover{
    background-color: #262f3d;
}

.tr-hover tr:hover {
    background-color: #053c69;
    background-color: #112c53 !important;
    box-shadow: 0 0 8px rgba(26, 84, 166, 0.4), 0 0 0 2px rgba(26, 84, 166, 0.2) inset !important;
    /* transition: all 0.3s ease; */

}



/* tr.tr-edit {
  background-color: #112c53 !important;
  border-left: 3px solid #1a54a6;
  border: 2px solid #1a54a6;
  box-shadow: 0 0 0 4px rgba(26, 84, 166, 0.3);
} */

tr.tr-edit {
  background-color: #112c53 !important;
  /* border-left: 3px solid #1a54a6; */
  /* border-radius: 6px; */
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 8px rgba(26, 84, 166, 0.4),
    0 0 0 2px rgba(26, 84, 166, 0.2) inset;
  transition: all 0.3s ease;
}

.card-info{
    font-size:12px;
    text-align: justify;
    display:inline;
    flex-direction: row;
    overflow-wrap: normal;
    padding:15px;
}

/* PLACEHOLDER*/

.floating-label-group {
    position: relative;
    /* margin-top: 20px; */
    width:100%;
    text-align: center;
}

.floating-label-group input {
    font-size: 12px;
    background: initial;
}

.floating-label-group label {
    color: #999;
    font-size: 12px;
    position: absolute;
    pointer-events: none;
    left: 40px;
    top:8px;
    transition: 0.2s ease all;
}

/* Ativado quando o input tem foco OU valor preenchido */
.floating-label-group input:focus ~ label,
.floating-label-group input:valid ~ label {
    top: -20px;
    left:30px;
    font-size: 12px;
    color: var(--light);
}

/* MODAL INSERIR OPERAÇÕES */


/* ICONES*/

.icon-list {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.icon-list li {
    background-color: #2e3a4a;           /* Cor combinando com seu fundo */
    border: 1px solid #3a4756;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: grid;                       /* 🚨 troca de flex por grid */
    place-items: center;                /* ✅ centraliza ícone horizontal + vertical */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.icon-list li i {
    color: #aebcc0;
    font-size: 18px;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
}

.no-records-message {
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.no-records-message i {
    font-size: 20px;
    color: #aebcc0;
}

/* CHAT */

.painel-chat{
    height:calc(100% - 25px);
}

.painel-chat {
    display: flex;
    flex-direction: column;
    height: calc(100% - 25px); /* mantém o uso total dentro do tamanho já definido por você */
    margin-top: 15px;
}

.chat-header {
    background: var(--header);
    background: var(--painel);
    color: var(--color);
    padding: 15px;
    font-weight: bold;
    flex-shrink: 0;
     letter-spacing: 1.0px;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--painel);
    background: var(--header);
    min-height: 0; /* ESSENCIAL: permite que a div cresça corretamente com flex */
}

.chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid var(--border-light);
    background: var(--header);
    flex-shrink: 0;
}

.chat-input input {
    flex: 1;
    padding: 10px;
    background: var(--input);
    border: none;
    color: var(--color);
    outline: none;
}

.chat-input button {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
}



.message {
    min-width: 125px;;
    max-width: 70%;
    font-size:14px;
    display:table;
    padding: 15px;
    margin: 10px 0;
    color: #0a0a0a;
    position: relative;
    border-radius:6px;
    background-color: #eae5e5;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 25px;
}

.message::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, transparent 50%,#192330 50%);
    box-shadow: -1px 1px 3px rgba(0,0,0,0.2);
    pointer-events: none;
}

.message.right {
    margin-left: auto;
    background-color: #d9fdd3;
    padding-top:10px;
    padding-bottom:20px;
   
}

.message .user {
    font-weight: bold;
    font-size: 12px;
    color: var(--color);
    margin-bottom: 4px;
    display: block;
    margin-top: -10px;
    color: #007bfc;
}

.message .time {
    position: absolute;
    bottom: 2px;
    right: 15px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
}

.status-check{
    font-weight: bold;
    margin-left:2px;
}

.status-view{
    font-weight: bold;
    margin-left:2px;
    color:#0e83fa;
}

/* INICIO HOME*/

.container-high-low{
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px; 
    width: calc(100% - 6px);
}

.high-low{
    background-color: #262f3d;
    max-height: 260px;
    min-height: 260px;
    width:100%;
    display: grid;
    /* flex-direction: column; */
    grid-template-rows: 50px 45px 1fr;
    border: 3px solid #1f242b;
}

.high-low-header{
    font-size: 18px;
    font-weight: bold;
    border-bottom: 3px solid #91a3bd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.high-low-filter{
    display: flex;
    overflow-y: auto;
    background-color: #131a20;

}

.high-low-filter-range select{
    background-color: #131a20;
}

.high-low-filter-range{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 8px;
    margin: 8px;

}

.high-low-filter-range div{
    font-size:12px;
    border-radius: 5px;;
    border:1px solid #262f3d;
    display:flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

.high-low-filter-range div.active{ 
    border:1px solid #1f6bd8; 
    background-color: #112c53;
    color:#5d96e6;
}

.high-low-table{
    display: flex;
    overflow-y: auto;
}

.high-low-table th:nth-child(1),
.high-low-table td:nth-child(1){
    text-align: left;
}

.high-low-table th:nth-child(3),
.high-low-table td:nth-child(3){
    text-align: right;
}

.high-low-table th{
    font-size:13px;
}

/* INICIO HOME TICKER */

.chart-toggle{
    text-align:center;
    margin:6px 0;
}

.chart-toggle button{
    background:#242b33;
    border:1px solid #313941;
    color:#9fb3c8;
    font-size:11px;
    padding:7px 10px;
    border-radius:6px;
    cursor:pointer;
    opacity:0.8;
    margin-left: 10px;
}

.chart-toggle button:hover{
    opacity:1;
}

.home-strike-range{
    display:flex;
    align-items:center;
    gap:12px;
}


.home-ticker-header{
    background-color: var(--header-mob);
    color:white;
    font-size:20px;
    display: grid;
    height: 60px;
    grid-template-columns: 120px 1fr 150px;
}

.home-ticker-header div{
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.period-range{
    display: flex;
    flex-direction: row;
    width: 90%;
    gap: 15px;
    margin: 10px;
    text-align: center;
    justify-content: center;
    user-select: none;
}

.period-range div{
    font-size:12px;
    border-radius: 5px;;
    border:1px solid #262f3d;
    width:100px;
    height:30px;
    display:flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

.period-range div.active{ 
    border:1px solid #1f6bd8 !important; 
    background-color: #112c53;
    color:#5d96e6;
}

.period-range-medium div{
    padding-left:10px;
    padding-right:10px;
    height:35px;
}

.period-range-medium div:first-child{
   margin-left:30px;
}
.period-range-medium div:last-child{
   margin-right:30px;
}

.period-range div.third-week {
    border: 2px solid #11100d;
    font-weight: 600;
}

/* .period-range div.third-week.active {
    border: 2px solid #ffcc00;
    box-shadow: 0 0 6px rgba(255, 200, 0, 0.6);
} */



.period-range-medium{
    width: 96%;
    overflow-y: auto;
    height: 50px;
    justify-content: left;
}

.home-strike-range{
    height:60px;
    font-size:14px;
}

.home-strike-range .period-range{
    width: auto;      /* remove o 90% */
    flex-shrink: 0;   /* evita esmagar os botões */
}

.home-strike-range form{
    display: flex;
    align-items: center;
    justify-content: center; /* 👈 centraliza na horizontal */
    gap: 12px;
    width: 100%;
}

.home-strike-range input{
    text-align: center;
}



/* INICIO CALCULADORA OPCOES*/ 

.option-scenario-layout{
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: Arial, sans-serif;
    margin: 15px;
}

.option-scenario-panel{
    min-width: 500px;
    font-size: 12px;
}

.option-scenario-panel h3{
    margin-bottom: 8px;
}

.option-scenario-panel fieldset{
    margin-bottom: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between; /* ERA center */
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #262f3d;
    padding-bottom: 18px;
}

.option-scenario-panel legend{
    font-weight: bold;
    padding: 0 6px;
}

.option-scenario-panel label{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;              /* NOVO */
    min-width: 110px;    /* garante tamanho mínimo */
}

.option-scenario-panel input{
    font-size: 12px;
    padding: 4px;
    width: 110px;
    text-align: center;
}
.option-scenario-panel select{
    height: 33px;
   
}

.option-scenario-panel button{
    margin-top: 10px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
}

.option-scenario-result{
    flex: 1;
    border: 1px solid #262f3d;
    padding: 10px;
    min-height: 250px;
    overflow: auto;
    font-size: 12px;
    margin-top:7px;
}

.field-btn{
    display: flex;
    align-items: flex-end;
    margin-top: -5px;
}

.th-spot {
    background: #2a3f55;
    color: #fff;
    font-weight: bold;
}

.td-spot {
    background: rgba(70,130,180,0.15);
}

.tr-spot td{
    background: rgba(70,130,180,0.12);
}

.tr-th th{
    font-weight: normal;
    font-size:12px;
    color:var(--color);
    border-bottom: 1px solid var(--input-web);
}


/* FIM CALCULADORA OPCOES*/ 

/* INICIO FLUXO */

/* célula clicável */
.selectable-cell {
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  border-radius: 6px;
  caret-color: transparent;
}

/* hover */
.selectable-cell:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* selecionado */
.selectable-cell.is-selected {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
  color: #e0f2fe;
  user-select: none;
}


.container-flow {
  display: grid;
  grid-template-columns: 3fr 7fr; /* 30% / 70% */
  gap: 20px;
  width: 100%;
}

#home-init-tables-investor-flow{
    max-height: 260px; 
    min-height: 260px;
    overflow: auto;
    border: 3px solid #1f242b;
}

/* FIM  FLUXO */
/* INICIO PONTUAÇÃO IBOV */

.no-padding th:not(:first-child),
.no-padding td:not(:first-child) {
    padding: 0;
}

.container-points-ibov {


  display: grid;
  grid-template-columns: repeat(3, 3fr);
  gap: 20px;
  width: calc(100% - 12px);
  margin-left: 6px;
  margin-bottom:6px;
}




.contrib-bar {
    display: flex;
    width: 100%;
    height: 28px;
    overflow: hidden;
    background-color: #242b33;
}

.contrib-bar span {
    flex-grow: var(--w);
    flex-basis: 0;
    min-width: 0;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;

    padding: 0 6px;
    box-sizing: border-box;
}

.label-up {
    background: rgba(25, 135, 84, var(--o));
    color: #a0f2cc;
    border: 1px solid rgba(25, 135, 84, 0.35);
}

.label-down {
    background: rgba(220, 53, 69, var(--o));
    color: #e18a93;
    border: 1px solid rgba(220, 53, 69, 0.35);
    
}

.token-off {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  z-index: 9999;
}

.token-off a {
  color: #4da6ff;
  margin-left: 5px;
  text-decoration: none;
  font-weight: bold;
}

.token-off a:hover {
  text-decoration: underline;
}


/* FIM PONTUAÇÃO IBOV */

/* FIM HOME*/





/* CUSTOMIZAÇÃO DE ALINHAMENTO  */

#table-operations{
    text-align: right; 
}

#table-operations th:nth-child(1),
#table-operations td:nth-child(1),
#table-operations th:nth-child(4),
#table-operations td:nth-child(4){
    text-align: center; 
}

#table-operations th:nth-child(2),
#table-operations td:nth-child(2),
#table-operations th:nth-child(3),
#table-operations td:nth-child(3){
    text-align: left;
}

#table-operations td:last-child{
    text-align: center;
    width:75px;  
}

/* CONTA CORRENTE */
#table-current th,
#table-current td{
    text-align: right; 
    
}

#table-current th:nth-child(1),
#table-current td:nth-child(1),
#table-current th:nth-child(2),
#table-current td:nth-child(2),
#table-current th:nth-child(3),
#table-current td:nth-child(3){
    text-align: left; 
}

/* CUSTÓDIA */
#table-custody th:nth-child(1),
#table-custody td:nth-child(1){
    text-align: left;
}

#table-custody th:nth-child(2),
#table-custody td:nth-child(2){
    text-align: center;
}

#table-custody th,
#table-custody td{ 
    text-align: right;
}

/* DIÁRIO */
#table-profitday td,
#table-profitday th {
    text-align:right; 
}

#table-profitday th:nth-child(1),
#table-profitday td:nth-child(1){
    text-align: left;
}

#table-profitday th:nth-child(2), 
#table-profitday td:nth-child(2){
    text-align: center;
}

/* MENSAL */
#table-profitmonth th,
#table-profitmonth td{
    text-align: right;
}

#table-profitmonth th:nth-child(1),
#table-profitmonth td:nth-child(1){
    text-align: left;
}

#table-profitmonth th:nth-child(2), 
#table-profitmonth td:nth-child(2){
    text-align: center;
}

/* ANUAL */
#table-profityear th,
#table-profityear td{
    text-align: right;
}

#table-profityear th:nth-child(1),
#table-profityear td:nth-child(1){
    text-align: center;
}

/* HISTORY */
#table-history th,
#table-history td{
    text-align: right;
} 

#table-history th:nth-child(1),
#table-history td:nth-child(1){
    text-align: left;
}

#table-history th:nth-child(2),
#table-history td:nth-child(2),
#table-history th:nth-child(3),
#table-history td:nth-child(3),
#table-history th:nth-child(6),
#table-history td:nth-child(6),
#table-history th:nth-child(7),
#table-history td:nth-child(7){
    text-align: center;
}


#table-history th:nth-child(4),
#table-history td:nth-child(4){
    text-align: right;
}

#table-history th:nth-child(5),
#table-history td:nth-child(5){
    text-align: left;
}


#table-calcIR th:nth-child(1),
#table-calcIR td:nth-child(1){
    text-align: left;
}


#table-calcIR th:nth-child(4),
#table-calcIR td:nth-child(4),
#table-calcIR th:nth-child(5),
#table-calcIR td:nth-child(5),
#table-calcIR th:nth-child(6),
#table-calcIR td:nth-child(6),
#table-calcIR th:nth-child(7),
#table-calcIR td:nth-child(7),
#table-calcIR th:nth-child(8),
#table-calcIR td:nth-child(8),
#table-calcIR th:nth-child(9),
#table-calcIR td:nth-child(9)
{
    text-align: right;
}


#table-ir-report-1 th:nth-child(1),
#table-ir-report-1 td:nth-child(1),
#table-ir-report-1 th:nth-child(2),
#table-ir-report-1 td:nth-child(2),
#table-ir-report-1 th:nth-child(5),
#table-ir-report-1 td:nth-child(5),
#table-ir-report-1 th:nth-child(6),
#table-ir-report-1 td:nth-child(6){
    text-align: left;
}

#table-ir-report-3 th:nth-child(1),
#table-ir-report-3 td:nth-child(1){
    text-align: left;
}

#table-ir-report-4 th:nth-child(1),
#table-ir-report-4 td:nth-child(1){
    text-align: left;
}


#home-ticker-options-table-web td:nth-child(8)
 {
    border-right:1px solid #424748

}

#home-investor-selected th,
#home-investor-selected td{
    text-align: right;
}
#home-investor-selected th:nth-child(1),
#home-investor-selected td:nth-child(1),
#home-investor-selected th:nth-child(2),
#home-investor-selected td:nth-child(2){
    text-align:left;
}


.table-hover tr:hover td{
    background-color: #112c53 !important;
    color:white;
}