input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


input[type=number] {
    -moz-appearance: textfield;
  }


:root { 
    --cor-fundo-body: #d5e2d8; /* Fundo verde claro */
    --cor-fundo-container: #c8e6c9; /* Verde suave */
    --cor-texto-container: #023b02; /* Verde escuro */
    --cor-primaria: #388e3c; /* Verde médio */
    --cor-acento: #66bb6a; /* Verde brilhante */
    --cor-hover: #43a047; /* Verde escuro no hover */
    --sombra: rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    background-color: var(--cor-fundo-body);
    display: flex;
    flex-direction: column;

}


.container {
    min-width: 100%;
    padding: 0.2rem;
    border: 2px solid var(--cor-primaria);
    border-radius: 10px;
    background-color: var(--cor-fundo-container);
    color: var(--cor-texto-container);
    box-shadow: 0 4px 8px var(--sombra);
}

.centerInput{
    display: flex;
    flex-direction: column;
    padding: 0.3rem;
    align-items: center;
    justify-content: center;
}

#num-grupos{
    display: flex;
    width: 3rem;
    height: 1rem;
}

.container-erro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    background: rgba(1, 80, 17, 1);
    color: white;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(13, 227, 57, 0.3);
    border-radius: 16px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
}

/* Adiciona o foco na div */
.container-erro:focus {
    outline: 3px solid rgba(255, 255, 255, 0.8);
}

.bloqueado {
    pointer-events: none;
    opacity: 0.6;
}


.branco{
    color:white;
}



h1 {
    text-align: center;
    color: var(--cor-primaria);
    font-size: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #43a047;
}

#conteudo-form{
    width: 100%;
}

.horarios-inputs{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.tooltip {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    text-align: center;
    transition: opacity 0.2s ease-in-out;
}

.container-grupos{
    margin-bottom: 2rem ;
    text-align: center;
}

.form-grupo1 , .form-grupo2 , .form-grupo3 , .form-grupo4{
    width: 100%;
    padding: 0.8rem;
    border: 0.3rem solid var(--cor-acento);
    border-style: outset;
}


.slct{
    width: 100%;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.form-group {
    margin-bottom: 1.5rem;
}


p {
    margin: 1rem 0;
    line-height: 1;
    color: var(--cor-texto-container);
}



.botao-tutorial {
    font-weight: bold;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    background-color: var(--cor-acento);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.botao-tutorial:hover {
    background-color: var(--cor-hover);
}



input[type="number"], input[type="time"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--cor-primaria);
    border-radius: 5px;
    background-color: #ffffff;
    color: var(--cor-texto-container);
    font-size: 1rem;
}

input[type="number"]:focus, input[type="time"]:focus {
    border-color: var(--cor-acento);
    outline: none;
}


input[type="number"].input-pequeno{
    position: static;
    padding: 0;
    margin: 0;
    width: 3rem;
}


.campoInput{
    padding-top: 1rem;
}


.intervalo-container{
    display: flex;
    gap: 0.07rem;
}

.containerBotao {
    display: flex;
    margin-top: 1.5rem;
    justify-content: center;
}

.botao-resultados {
    font-weight: bold;
    font-size: 1rem;
    padding: 1rem 2rem;
    background-color: var(--cor-acento);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s;
}

.botao-resultados:hover {
    background-color: var(--cor-hover);
    transform: scale(1.05);
}


.resultados {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--cor-primaria);
    border-radius: 10px;
    background-color: rgb(222, 229, 222);
    box-shadow: 0 4px 6px var(--sombra);
}

.invisivel {
    display: none;
}



#campo-resultados{
    display: flex;
    flex-direction: column;
    align-items: center;
}