/* CSS Document */

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --cor-destaque: #eef1ee;
    --cinza-titulos: #333;
}

html {
    overflow: hidden;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 301px auto;
    align-items: stretch;
}

/* Menu | formulário | preview ao vivo (somente páginas que possuem #documento) */
body:has(#documento) {
    grid-template-columns: 301px minmax(0, 1fr) minmax(0, 1fr);
}

body:has(#documento) > #conteudo {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body:has(#documento) > #documento {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background-color: #ececec;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
}

header#navdrawer {
    height: 100vh;
    width: 301px;
    display: flex;
    flex-direction: column;
}

.sistema-logo {
    height: 64px;
    padding: 12px 0px 12px 12px;
    box-sizing: border-box;
    background-color: var(--cor-destaque);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.logo {
    height: 40px;
}

#logo {
    height: 100%;
}

.logo-div{
    height: 100%;
    width: 1px;
    background-color: #006157;
}

.sistema-navdrawer {
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    padding: 24px 12px 12px 12px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #EEEEEE;

    /* Para rolagem */
    overflow-y: auto;
    max-height: calc(100vh - 64px); /* ajusta esse valor conforme altura do header e margens */
}

.up-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.down-side {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 12px;
}

.navdrawer-div {
    margin-top: 1px;
    margin-bottom: 1px;
    height: 1px;
    width: 100%;
    background-color: #EEEEEE;
}

.navdrawer-option {
    width: 100%;
    height: 48px;
    padding: 12px;
    box-sizing: border-box;
    gap: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: flex-start;

    color: #666;
    background-color: white;

    border-radius: 16px;

    font-family: 'Inter';
    font-size: 16px;
    font-weight: 500;

    cursor: pointer;

    text-decoration: none;

    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.navdrawer-option.ativo {
    color: #006157;
    background-color: var(--cor-destaque);

    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.navdrawer-option:hover:not(.ativo) {
    color: #666;
    background-color: #F5F5F5;
}

.conteudo {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    background-color: #F9F9F9;
}

header#pagina {
    background-color: var(--cor-destaque);
    width: 100%;
    height: 64px;

    display: flex;
    flex-direction: column;
    padding-left: 16px;

    justify-content: center;

    gap: 10px;

    color: #006157;
    font-family: 'Inter';
    font-size: 11px;
    font-weight: 400;

    text-align: left;

    line-height: 8px;
}

.sistema-pagina {
    display: flex;
    width: 100%;

    padding: 36px 0px 0px 0px;

    align-items: center;
    flex-direction: column;
    
    /* Para rolagem */
    overflow-y: auto;
    max-height: calc(100vh - 100px); /* ajusta esse valor conforme altura do header e margens */
}

h1 {
    color: #006157;
    font-family: 'Inter';
    font-size: 24px;
    font-weight: 600;

    text-align: center;

    line-height: 17px;

    margin: 0px 0px 24px 0px;
}

.formularios {
    display: flex;
    flex-direction: column;

    margin-left: 24px;
    margin-right: 24px;

    padding-bottom: 24px;
}


.area-boxes {
    display: grid;
    grid-template-columns: 340px 340px;
    gap: 12px;
    justify-content: center;
}

.base-box {
    border: 1px solid #EEEEEE;
    background-color: white;

    padding: 22px;
    box-sizing: border-box;

    width: 100%;
    height: min-content;

    border-radius: 16px;
}

.h2-ativar {
    display: flex;
    flex-direction: row;

    align-items: center;
}

.h2-ativar.ativo {
    margin-bottom: 14px;
}

.h2-ativar h2 {
    margin: 0px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0F9D58;

    margin: 0px 0px 0px 8px;

    cursor: pointer;
}

h2 {
    color: var(--cinza-titulos);
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 600;

    text-align: left;

    line-height: 12px;

    margin: 0px 0px 20px 0px;
}

.base-boxcampos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campo {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.label {
    display: flex;
    flex-direction: row;

    justify-content: space-between;

    height: 16px;

    align-items: center;    
}

.label span {
    cursor: pointer;

    color: #bdbdbd;

    font-size: 16px;

    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

label.label-campo {
    color: var(--cinza-titulos);
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;

    text-align: left;

    line-height: 9px; 

    display: flex;
    align-items: center;
}

input.input {
    color: #666;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;

    text-align: left;

    height: 36px;
    width: 100%;

    box-sizing: border-box;

    background-color: #F5F5F5;
    border: 0px;
    border-radius: 8px;
    padding: 0px 8px 0px 8px;

    overflow: hidden; /* esconde qualquer conteúdo que ultrapasse a largura */
    white-space: nowrap; /* faz com que o texto não quebre para a próxima linha */
    text-overflow: ellipsis; /* adiciona "..." para indicar que o texto foi truncado */
}

input.input:focus {
    outline: none;
}

input::placeholder {
  color: #bdbdbd;
  font-weight: 500;
}

.campo-texto {
    color: #666;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;

    text-align: justify;
}

#copiar {
    cursor: pointer;
}

.campo select {
    color: #666;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 600;

    text-align: left;

    height: 36px;
    width: 100%;

    box-sizing: border-box;

    background-color: #F5F5F5;
    border: 0px;
    border-radius: 8px;
    padding: 0px 8px 0px 8px;
}

.box-duplo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 1020px) {
    .area-boxes {
        grid-template-columns: 100%;
    }
}

@media (max-width: 840px) {
    .area-boxes {
        grid-template-columns: 100%;
    }
}

@media print {
    html,
    body {
        height: auto !important;
        overflow: visible !important;
    }

    body {
        display: block !important;
    }

    #navdrawer,
    #conteudo {
        display: none !important;
    }

    #documento {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        overflow: visible !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
}