:root{
    --fonte-simulador-px: 15.75px; /* ou 16px */
}

/* Cores */
body {
    /* --fundo: #dddbdb; */
    /* --fundo: #eaeef8; */
    --fundo: #daeef3;
    --simulacao: #FFF4E7;
    --top-bar: rgb(224, 222, 222);
    --bloco: #D1DACF;
    --slider-range-fundo: #acafae;
    --slider-range-seletor: #3294ee;
    --grafico: #D6F3F0;
    --grafico-borda: #aaaaaa;
    --barra-inferior-desktop: rgba(254, 254, 254, 0.8);
    --barra-inferior-mobile: #D8E2E6;
    --checkbox: #3294ee;

    --objeto1: #CECECE;
    --objeto2: #CECECE;
    --objeto3: #CECECE;
    --objeto4: #CECECE;
    --objeto5: #CECECE;
}

body, ::backdrop{
    /* background-color: rgb(179, 241, 241); */
    background-color: var(--fundo);
}

.modal-title{
    font-size: 1.4em;
}

.modal-body{
    font-size: 1.2em;
}

#citacao {
    width: 100%;
    text-align: center;
    display: none;
}

#comoCitar{
    cursor: pointer;
}

#comoCitar:hover{
    text-decoration: underline;
}




/* Campo e lista simulações salvas */
#listaConfig {
    margin: 0;
    padding: 0;
}

#listaConfig li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    list-style-type: none;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#listaConfig li:nth-child(odd) {
    background: #f9f9f9;
}

#listaConfig li:hover {
    background: #ddd;
}

.deletarSim {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.deletarSim:hover {
    background-color: #f44336;
    color: white;
}

#inputSalvarSim {
    margin: 0;
    border-radius: 5px;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
}
/* Campo e lista simulações salvas */

#parametros {
    gap: 10px !important;
    overflow-y: auto;
    overflow-x: hidden;
    /* overflow: auto !important; */
    /* grid-template-columns: auto !important; */
}

@media (min-width: 992px){
    #parametros{
        max-height: calc(100vh - 130px);
    }
}


#grafico{
    margin-top: 2px;
    
}

@media only screen and (orientation: portrait) {
    #parametros{
        margin-left: -2px;
        margin-right: -2px;
    }

    #grafico{
        margin-left: 2px;
        margin-right: 2px;
    }
}

@media only screen and (orientation: landscape) {
    #parametros{
        margin-top: -2px;
        margin-left: 0px;
        margin-right: -5px;
    }
}

/* #canvas, #parametros{
    margin: auto !important;
} */

/* Blocos de configurações */
.bloco{
    margin: 3px 3px 3px 3px;
    border: 1px solid #a6b1a5;
    padding: 3px;
    border-radius: 7px;
    /* background-color: #f1f1f1; */
    background-color: var(--bloco);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    font-size: var(--fonte-simulador-px);
}

@media only screen and (orientation: landscape) {
    .bloco{
        margin-left: 1.5vw;
    }

    .borda-grafico{
        margin-left: 1.5vw;
    }
}

.titulo-com-acoes{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titulo-bloco span{
    user-select: none;
    -webkit-user-select: none; /* Safari / iOS */
    -ms-user-select: none;     /* Edge antigo */
    cursor: default;
    padding-left: 10px;
}

.controle-fonte{
    display: flex;
    gap: 4px;
    padding-right: 5px;
    user-select: none;
    -webkit-user-select: none; /* Safari / iOS */
    -ms-user-select: none;     /* Edge antigo */
}

.btn-fonte{
    font-size: 0.85em;
    padding: 2px 6px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
    touch-action: manipulation;
}

.btn-fonte:hover{
    background-color: rgba(0, 0, 0, 0.06);
    opacity: 1;
}

.btn-fonte:active{
    background-color: rgba(0, 0, 0, 0.12);
}


.popover {
    font-size: var(--fonte-simulador-px);
}

.popover-header {
    font-size: calc(var(--fonte-simulador-px) * 1.05);
}

.popover-body {
    font-size: var(--fonte-simulador-px);
    line-height: 1.2;
}




/* Blocos de configurações */

.borda-grafico{
    border: 1px solid var(--grafico-borda);
    background-color: #fff;
    border-radius: 5px;
    padding: 3px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    /* margin-bottom: 2vh; */
}


.item{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}


canvas{
    width: var(--Lx);
    height: var(--Ly);
    border: 1px solid #c0b8ae;
    /* background-color: #f1f1f1; */
    /* background-color: #FFF4E7; */
    background-color: var(--simulacao);
    border-radius: 7px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}

#canvas, canvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* impede menu do iOS */
}

#canvas {
    touch-action: none;
}

/* .grid-container > div:last-of-type {
    grid-column: 1 / -1;
} */

.flex-container {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
  
.flex-item {
    width: 35%;
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0 5px 10px;
    justify-content: space-between;
    text-align: left;
}

.popover{
    position: fixed;
}

.form-check-input:checked{
    accent-color: var(--checkbox);
}

.form-check{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#question{
    cursor: pointer;
    float: right;
}

#question > i{
    font-size: 11px; 
    color:gray
}




/*Lista de simulações -- app *************************************/
.mb-1{
    margin-top: 0;
    margin-bottom: 20px;
}
/*Lista de simulações -- app *************************************/


#ordemSimulacoes{
    display: flex; 
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/*Ordem das simulações salvas*/
@media (max-width: 420px) {
    #ordemSimulacoes {
        flex-direction: column;
        align-items: flex-start;
    }
    #ordemSimulacoes button {
        width: 100%;
        margin-top: 5px;
    }
}




/*deletar sim  -- banco de dados --  *****************/
.custom-confirm {
    display: none; /* Esconde o diálogo por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
    justify-content: center;
    align-items: center;
}

.confirm-box {
	position: fixed;
	top: 30%;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.confirm-box p {
    margin-bottom: 20px;
    font-size: 16px;
}

.confirm-box button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#confirmYes {
    background-color: #4CAF50; /* Verde */
    color: white;
}

#confirmNo {
    background-color: rgb(214, 32, 19); /* Vermelho */
    color: white;
}
/*deletar sim  -- banco de dados --  *****************/



/*Mensagem de adição aos favoritos **********************/
.alert {
    font-size: 12pt;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    background-color: #f0f8ff; /* Tonalidade suave de azul */
    color: #333;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    display: none; /* Inicialmente oculta */
}

@media (max-width: 450px) {
    .alert {
        font-size: 11pt;
        padding: 10px 20px;
        top: 120px;
        width: 95%;
    }
}

.alert.hide {
    opacity: 0;
}
/*Mensagem de adição aos favoritos **********************/



/* Bordas redondas das simulações salvas **********************/
.list-group-item{
    margin-top: 7px;
    border-radius: 10px;
    border: 1px solid #999999;
}

.list-group-item:first-child, .list-group-item:last-child {
    border-radius: 10px;
}
/* Bordas redondas das simulações salvas **********************/




/*Lista de simulações *********************************************/

.list-group-item a{
    text-decoration: none;
    color: #212529;
}

.list-group-item:hover{
    background-color: #ededf3;
}

.list-group-item > a > h4{
    color: #563f1b;
}

/*Lista de simulações *********************************************/

/*Ajuste iphone app recuo esquerdo ***********************************/
@media (orientation: landscape) and (max-width: 1000px) and (min-width: 700px) {
  #wrapper > * > .inner{
    padding-left: 35px;
  }
}
/*Ajuste iphone app recuo esquerdo ***********************************/


/* Título dos blocos (paineis) */
.titulo-bloco {
    grid-column: 1 / -1; /* ocupa todas as colunas da grid */
    font-size: 1.05em;
    font-weight: bold;
    color: #333;
    /* background-color: #608053; */
    text-align: center;
    padding: 3px;
    border-bottom: 2px solid #ccc;
}


/********* Tamanho fonte botões Exemplos e Gráfico reguláveis ************/
@media (min-width: 992px){
    #btnDrop div{
        font-size: var(--fonte-barra-px);
        line-height: 1.1;
    }

    .dropdown-menu>li>span{
        font-size: calc(var(--fonte-simulador-px)*1.2);
    }
}
/********* Tamanho fonte botões Exemplos e Gráfico reguláveis ************/



/* ------------------ Ajuda cursor ------------------*/

#help-cursor {
	position: absolute;
	top: 15px;
	right: 65px;

	font-size: 2.4rem;
	color: #4a6d7c;
	opacity: 0.5;

	cursor: pointer;
	z-index: 5;

	transition: opacity 0.2s ease,
				transform 0.2s ease,
				color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    #help-cursor:hover {
        opacity: 1;
        color: #2f4f5a;
        transform: scale(1.08);
    }
}

/* Desloca ícone em telas pequenas (smartphones) */

#help-cursor {
    top: 15px;
    right: 15px;
}

/* 🖥️ desktop */
@media (hover: hover) and (pointer: fine) {
    #help-cursor {
        top: 15px;
        right: 65px;
    }
}

/* 📲 tablets (somente telas realmente grandes) */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (min-height: 700px) {
    #help-cursor {
        top: 15px;
        right: 65px;
    }
}
/* ------------------ Ajuda cursor ------------------*/



/* ----------------------- Mini paint no simulador ----------------------- */
#toolbox {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

#tool-options {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    gap: 6px;

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition: opacity 0.2s ease, transform 0.2s ease;
}

#tool-options.ativo {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#tool-options .tool-btn.separator {
    margin-top: 10px;
}

#btn-main {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

#btn-main.ativo {
    opacity: 1;
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s, background 0.2s;
}

.tool-btn:hover {
    transform: scale(1.1);
    background: #f0f0f0;
}

.tool-btn i {
    font-size: 16px;
}

.tool-btn.active {
    background: #d0d0d0;
}

/* Esconder toolbox em telas pequenas (smartphones) */
/* padrão: escondido */
#toolbox {
    display: none;
}

/* 🖥️ desktop */
@media (hover: hover) and (pointer: fine) {
    #toolbox {
        display: block;
    }
}

/* 📲 tablets (somente telas realmente grandes) */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (min-height: 700px) {
    #toolbox {
        display: block;
    }
}

#text-input-overlay {
    position: absolute;
    z-index: 2000;
}

#text-input-box {
    font-size: 16px;
    padding: 6px 10px;

    border: 1px solid #888;
    border-radius: 6px;

    outline: none;

    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);

    font-family: Arial, sans-serif;
}

#color-palette {
    position: absolute;
    z-index: 3000;

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

    background: rgba(255,255,255,0.95);
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.color-option {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;

    transition: transform 0.15s ease;
}

.color-option[data-color="#e5533d"] { background: #e5533d; }
.color-option[data-color="#2d7dd2"] { background: #2d7dd2; }
.color-option[data-color="#3aa76d"] { background: #3aa76d; }
.color-option[data-color="#2f2f2f"] { background: #2f2f2f; }
/* ----------------------- Mini paint no simulador ----------------------- */