/*
 * Os textos legais do site (/termos-de-uso e /politica-de-privacidade, _views/legal.html): texto corrido numa
 * coluna de leitura, com a faixa de minuta no alto. O texto vem pronto de _views/legal/ (gerado das minutas), e
 * por isso os estilos são os das marcas simples que ele traz: títulos, parágrafos, listas e tabelas.
 */

.vu-legal {
    min-height: 70vh;
    background: var(--vu-fundo-suave);
}

/* a coluna de leitura: umas 75 letras por linha na tela larga */
.vu-legal-moldura {
    max-width: 47rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4.5rem;
}


/* ---------- a faixa de minuta ---------- */

.vu-legal-faixa {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 0 0 2.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--vu-aviso-borda);
    border-left: 6px solid var(--vu-aviso-forte);
    border-radius: 14px;
    background: var(--vu-aviso-fundo);
    color: var(--vu-tinta);
    font-size: 1rem;
    line-height: 1.5;
}

.vu-legal-faixa i {
    margin-top: .05rem;
    color: var(--vu-aviso);
    font-size: 1.3rem;
    line-height: 1.2;
}

.vu-legal-faixa strong {
    font-weight: 800;
}

/* a data desta versão do texto, na linha de baixo */
.vu-legal-versao {
    display: block;
    margin-top: .2rem;
    color: var(--vu-aviso);
    font-size: .9rem;
    font-weight: 700;
}


/* ---------- o texto ---------- */

.vu-legal-texto {
    color: var(--vu-texto);
    font-size: 1.03rem;
    line-height: 1.72;
    /* palavra comprida (um endereço, um marcador) quebra em vez de empurrar a página para o lado */
    overflow-wrap: break-word;
}

.vu-legal-texto h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 5.2vw, 2.5rem);
    line-height: 1.15;
}

/* cada seção começa com uma linha em cima, para o olho achar o número dela ao rolar */
.vu-legal-texto h2 {
    margin: 2.75rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--vu-linha);
    font-size: clamp(1.25rem, 3.6vw, 1.45rem);
    line-height: 1.25;
}

.vu-legal-texto h3 {
    margin: 2rem 0 .7rem;
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: 0;
}

.vu-legal-texto p {
    margin: 0 0 1rem;
}

.vu-legal-texto strong {
    color: var(--vu-tinta);
    font-weight: 700;
}

/* o número da cláusula ("11.6.") */
.vu-legal-num {
    color: var(--vu-tinta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vu-legal-texto ul,
.vu-legal-texto ol {
    margin: 0 0 1.1rem;
    padding-left: 1.35rem;
}

.vu-legal-texto li + li {
    margin-top: .4rem;
}

.vu-legal-texto li::marker {
    color: var(--vu-violeta);
}

.vu-legal-texto ol li::marker {
    font-weight: 700;
}

/* a lista de dentro de um item */
.vu-legal-texto li > ul,
.vu-legal-texto li > ol {
    margin: .4rem 0 0;
}

.vu-legal-texto a {
    font-weight: 600;
    text-underline-offset: .15em;
}

.vu-legal-texto code {
    padding: .1em .4em;
    border-radius: 6px;
    background: var(--vu-lilas);
    color: var(--vu-tinta);
    font-size: .88em;
    overflow-wrap: anywhere;
}

.vu-legal-texto blockquote {
    margin: 0 0 1rem;
    padding: .1rem 0 .1rem 1rem;
    border-left: 4px solid var(--vu-lilas-forte);
}

.vu-legal-texto hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--vu-linha);
    opacity: 1;
}

/* o que ainda falta preencher no texto ([RAZÃO SOCIAL]): destacado para o revisor achar */
.vu-legal-falta {
    padding: .08em .35em;
    border: 1px dashed var(--vu-aviso-forte);
    border-radius: 6px;
    background: var(--vu-aviso-fundo);
    color: var(--vu-aviso);
    font-size: .92em;
    font-weight: 700;
    /* o marcador que quebra de linha mantém a moldura nos dois pedaços */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* ---------- as tabelas ---------- */

.vu-legal-tabela {
    margin: 1.35rem 0 1.5rem;
}

/* a caixa que rola para o lado quando a tabela não cabe */
.vu-legal-rola {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--vu-linha);
    border-radius: 14px;
    background: var(--vu-superficie);
}

.vu-legal-rola:focus-visible {
    outline: 3px solid rgba(var(--vu-foco-rgb), .45);
    outline-offset: 2px;
}

.vu-legal-rola table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    line-height: 1.5;
}

/* a largura mínima vem do número de colunas: abaixo dela a tabela não aperta mais, rola */
.vu-legal-colunas-2 table {
    min-width: 27rem;
}

.vu-legal-colunas-3 table {
    min-width: 38rem;
}

.vu-legal-colunas-4 table,
.vu-legal-colunas-5 table,
.vu-legal-colunas-6 table {
    min-width: 44rem;
}

.vu-legal-rola th,
.vu-legal-rola td {
    padding: .7rem .95rem;
    text-align: left;
    vertical-align: top;
}

.vu-legal-rola th {
    background: var(--vu-lilas);
    color: var(--vu-tinta);
    font-weight: 700;
}

.vu-legal-rola td {
    border-top: 1px solid var(--vu-linha);
}

/* a primeira coluna diz do que a linha trata */
.vu-legal-rola td:first-child {
    color: var(--vu-tinta);
    font-weight: 600;
}

/* o recado de que a tabela rola, em cima dela: só aparece na largura em que ela não cabe (a coluna de leitura
   tem a largura da tela menos 2,5rem) */
.vu-legal-desliza {
    display: none;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
    color: var(--vu-apoio);
    font-size: .82rem;
    line-height: 1.3;
}

@media (max-width: 29.49rem) {

    .vu-legal-colunas-2 .vu-legal-desliza {
        display: flex;
    }
}

@media (max-width: 40.49rem) {

    .vu-legal-colunas-3 .vu-legal-desliza {
        display: flex;
    }
}

@media (max-width: 46.49rem) {

    .vu-legal-colunas-4 .vu-legal-desliza,
    .vu-legal-colunas-5 .vu-legal-desliza,
    .vu-legal-colunas-6 .vu-legal-desliza {
        display: flex;
    }
}


/* ---------- celular ---------- */

@media (max-width: 575.98px) {

    .vu-legal-moldura {
        padding: 1.25rem 1.1rem 3.5rem;
    }

    .vu-legal-faixa {
        margin-bottom: 1.75rem;
        padding: .9rem 1rem;
        font-size: .97rem;
    }

    .vu-legal-texto {
        font-size: 1rem;
        line-height: 1.68;
    }

    .vu-legal-texto h2 {
        margin-top: 2.25rem;
        padding-top: 1.5rem;
    }
}