/* Container geral do teclado */
.keypad {
    display: block;
    flex-direction: column;
    align-items: center;
    width: auto;
}

/* Bloco externo do teclado */
.teclado-login {
    background: #0b0e1294;
    border-radius: 20px;
    font-family: sans-serif;
    padding: 0.8rem;
    width: auto;
    box-shadow: 0px 2px 18px rgba(0, 192, 114, 0.4) !important;
    caret-color: #00c072;
}

/* Responsivo */
@media (max-width: 992px) {
    .teclado-login {
        width: 344px;
    }
}

@media (max-width: 572px) {
    .teclado-login {
        width: 258px;
        min-width: 258px;
    }
}

/* GRID dos números: 5 por linha, com gap automático */
.teclado-numeros {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem; /* espaçamento entre as teclas */
    margin-bottom: 0.75rem; /* separação da linha de ações */
}

/* Linha das ações: Enter e Clear 50% cada */
.teclado-acoes {
    display: flex;
    gap: 0.75rem;
}

/* Teclas padrão */
.teclado-login .tkey {
    height: 60px;
    background: #f5f9fc;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: all 250ms ease;
}

.teclado-login {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* Impede seleção de texto nas teclas do teclado virtual */
.teclado-login .tkey {
    user-select: none; /* Padrão moderno */
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge antigo */
}

/* Nas ações, cada botão ocupa 50% */
.teclado-acoes .tkey {
    flex: 1 1 50%;
}

.teclado-login .tkey:hover {
    background: #e2e9f2;
}

.teclado-login .tkey:active {
    background: #c7d7e6;
}

/* Botão ENTER */
.teclado-login .enter {
    background: #266eff;
    color: #ffffff;
    font-size: 1rem;
}

.teclado-login .enter:hover {
    background: #0957f4;
}

.teclado-login .enter:active {
    background: #004be4;
}

/* Botão CLEAR */
.teclado-login .clear {
    background: #fff3cb;
    color: #474747;
    font-size: 1rem;
}

.teclado-login .clear:hover {
    background: #ffecae;
}

.teclado-login .clear:active {
    background: #fee38b;
}

.btn-laranja {
    background-image: linear-gradient(to right, #fe8024, #fe8024, #fe8024, #fe8024) !important;
    width: 96% !important;
    font-size: 20px !important;
    display: inline-block !important;
    color: rgb(255 255 255) !important;
    padding: 12px 2px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 -4.6px 0 0 rgb(0 0 0 / 20%) !important;
}
.btn-laranja:active {
    transform: scale(0.96);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
.btn-vermelho {
    background-image: linear-gradient(to right, #ff2e2e, #ff2e2e, #ff2e2e, #ff2e2e) !important;
    width: 96% !important;
    font-size: 20px !important;
    display: inline-block !important;
    color: rgb(255 255 255) !important;
    padding: 12px 2px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 -4.6px 0 0 rgb(0 0 0 / 20%) !important;
}
.btn-vermelho:active {
    transform: scale(0.96);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
.btn-verde {
    background-image: linear-gradient(to right, #2bc155, #2bc155, #2bc155, #2bc155) !important;
    width: 96% !important;
    font-size: 20px !important;
    display: inline-block !important;
    color: rgb(255 255 255) !important;
    padding: 12px 2px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 -4.6px 0 0 rgb(0 0 0 / 20%) !important;
}
.btn-verde:active {
    transform: scale(0.96);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

/* NOVO SELECT PADRAO VERDE */
.custom-select-wrap {
    width: auto;
    position: relative;
    display: inline-block; /* Ajustando o comportamento do container */
    width: 100%;
}
.custom-select-contexto {
    width: 100%;
    padding: 10px 40px 10px 20px; /* Espaço extra para a seta no lado direito */
    border-radius: 0.25rem;
    background-color: #0b0e12;
    color: #00c072;
    font-weight: 700;
    border: 0px solid #00c072;
    appearance: none; /* Remove a seta padrão */
    cursor: pointer;
    outline: none;
    font-family: "Poppins", sans-serif !important;
    letter-spacing: 0px;
    font-size: 18px !important;
    position: relative;
    box-sizing: border-box;
    min-height: 40px;
    height: calc(3.5rem + 2px);
    box-shadow: inset 0 -3.6px 0 0 #000000ad !important;
    border-bottom: 1px solid #000000ad;
}
.custom-select-wrap::after {
    content: "▼"; /* Seta */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #00c072;
    pointer-events: none;
}
.custom-select-contexto option {
    background-color: #10151c;
    color: #00c072;
    padding: 10px;
    cursor: pointer;
}
.custom-select-contexto option:hover {
    background-color: #00c072;
    color: #0e1218;
    font-weight: 700;
}
.custom-select-contexto::-ms-expand {
    display: none;
}
@supports not (appearance: none) {
    .custom-select-contexto {
        -webkit-appearance: none;
        -moz-appearance: none;
    }
}

input.form-control:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #0b0e12 inset !important;
    -webkit-box-shadow: 0 0 0px 1000px #0b0e12 inset !important;
    -webkit-text-fill-color: #13db4a !important;
    transition: background-color 5000s ease-in-out 0s;
}