/*
 * Telas de conta (criar conta, esqueci a senha, nova senha) e o aviso de
 * página inteira (mensagens da conta, página não encontrada, erro).
 * Depende de tokens.css e casca.css (campos em .vv-form).
 *
 * O formulário é uma figurinha de folha com borda branca, como o painel de
 * entrar; ao lado (no celular, acima) o título e o porquê.
 */

/* ---------- telas de conta ---------- */
.vv-conta {
    display: grid; gap: var(--vv-e6) var(--vv-e8);
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--vv-e7) var(--vv-e7);
}
@media (min-width: 992px) {
    .vv-conta { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
    .vv-conta--curta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vv-conta__lado { position: sticky; top: 112px; }
}
.vv-conta__lado .vv-pag-cab__sub { margin-top: var(--vv-e4); }

/* o que a conta dá: fatos do sistema, uma linha cada */
.vv-conta__fatos { list-style: none; margin: var(--vv-e6) 0 0; padding: 0; border-top: 1px solid var(--vv-fio-leve); max-width: 46ch; }
.vv-conta__fatos li { display: flex; gap: var(--vv-e3); align-items: flex-start; padding: var(--vv-e3) 0; border-bottom: 1px solid var(--vv-fio-leve); font-size: var(--vv-t-s); line-height: 1.4; }
.vv-conta__fatos .bi { flex: none; width: 1.5em; font-size: var(--vv-t-l); line-height: 1.2; color: var(--vv-azul); }
.vv-conta__fatos strong { display: block; font-weight: 700; }
.vv-conta__fatos span { color: var(--vv-tinta-2); }
.vv-conta__ja { margin: var(--vv-e5) 0 0; font-size: var(--vv-t-s); color: var(--vv-tinta-2); }
.vv-conta__ja .vv-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }

/* a figurinha do formulário */
.vv-conta__fig {
    background: var(--vv-figura);
    border: var(--vv-borda-larg) solid var(--vv-borda-fig); outline: 1px solid var(--vv-fio-leve);
    border-radius: var(--vv-raio-fig);
    padding: var(--vv-e6);
}
.vv-conta__fig .vv-nota { margin-bottom: var(--vv-e5); }
.vv-conta__grade { display: grid; gap: 0 var(--vv-e4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .vv-conta__grade--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vv-conta__grade--fone { grid-template-columns: 96px minmax(0, 1fr); }
}
.vv-conta__fig .vv-campo { margin-bottom: var(--vv-e5); }
.vv-conta__sep { margin: var(--vv-e2) 0 var(--vv-e5); border: 0; border-top: 1px solid var(--vv-fio-leve); opacity: 1; }
.vv-conta__aceite { margin: var(--vv-e2) 0 var(--vv-e5); font-size: var(--vv-t-s); line-height: 1.45; }
.vv-conta__aceite .form-check-label { padding-left: var(--vv-e1); }
/* a chave do aceite com alvo de toque maior (o rótulo também marca) */
.vv-conta__aceite.form-switch { display: flex; align-items: flex-start; gap: var(--vv-e2); padding-left: 0; }
.vv-conta__aceite.form-switch .form-check-input { flex: none; float: none; width: 2.75rem; height: 1.5rem; margin: 0; }
.vv-conta__enviar { width: 100%; min-height: 52px; font-size: var(--vv-t-m); }
.vv-conta__enviar--solto { margin-top: var(--vv-e5); }
.vv-conta__rodape { margin: var(--vv-e5) 0 0; padding-top: var(--vv-e4); border-top: 1px solid var(--vv-fio-leve); font-size: var(--vv-t-s); color: var(--vv-tinta-2); }
.vv-conta__rodape .vv-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 639.98px) {
    .vv-conta { padding-block: var(--vv-e6) var(--vv-e6); gap: var(--vv-e5); }
    .vv-conta__fig { padding: var(--vv-e5) var(--vv-e4); }
    .vv-conta__fatos { margin-top: var(--vv-e5); }
}


/* ---------- aviso de página inteira: mensagem, não encontrada, erro ---------- */
.vv-aviso-pag { padding-block: var(--vv-e8); }
.vv-aviso {
    display: grid; gap: var(--vv-e6); align-items: center;
    grid-template-columns: minmax(0, 1fr);
    max-width: 920px; margin-inline: auto;
}
@media (min-width: 768px) {
    .vv-aviso { grid-template-columns: 220px minmax(0, 1fr); gap: var(--vv-e7); }
}
/* o desenho: um espaço de figurinha do álbum, vazio e tracejado, com o ícone colado */
.vv-aviso__vago {
    position: relative; justify-self: center;
    width: min(220px, 56vw); aspect-ratio: 3 / 4;
    border: 3px dashed var(--vv-fio-leve); border-radius: var(--vv-raio-fig);
    display: grid; place-items: center;
    transform: rotate(-1deg);
}
.vv-aviso__vago::before {
    content: ""; position: absolute; inset: 14% 12% auto; height: 34%;
    border-bottom: 3px dashed var(--vv-fio-leve);
}
.vv-aviso__selo {
    position: relative; z-index: 1;
    width: 88px; height: 88px; display: grid; place-items: center;
    background: var(--vv-azul); color: var(--vv-azul-tinta);
    border: 3px solid var(--vv-borda-fig); border-radius: var(--vv-raio-fig);
    font-size: 2.5rem; transform: rotate(4deg);
    animation: vv-aviso-cola 520ms var(--vv-ease) both;
}
.vv-aviso--ok .vv-aviso__vago { border-style: solid; border-color: var(--vv-fio); }
.vv-aviso--ok .vv-aviso__vago::before { border-bottom-style: solid; border-color: var(--vv-fio-leve); }
.vv-aviso--erro .vv-aviso__selo { background: var(--vv-vermelho); color: var(--vv-vermelho-tinta); }
.vv-aviso--neutro .vv-aviso__selo { background: var(--vv-especial); color: var(--vv-especial-tinta); }
@keyframes vv-aviso-cola { from { opacity: 0; transform: translateY(-14px) rotate(-8deg) scale(1.08); } to { opacity: 1; transform: rotate(4deg); } }

.vv-aviso__tit {
    margin: 0; font: 900 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.04 var(--vv-fonte-titulo); font-stretch: var(--vv-largo-max);
    letter-spacing: -0.03em; text-wrap: balance;
}
.vv-aviso__txt { margin: var(--vv-e4) 0 0; max-width: 56ch; color: var(--vv-tinta-2); }
.vv-aviso__txt + .vv-aviso__txt { margin-top: var(--vv-e2); }
.vv-aviso__txt strong { color: var(--vv-tinta); overflow-wrap: anywhere; }
.vv-aviso__txt a, .vv-conta a:not(.vv-btn) { color: var(--vv-azul); font-weight: 700; }
.vv-aviso__txt a:hover, .vv-conta a:not(.vv-btn):hover { color: var(--vv-tinta); }
.vv-aviso__acoes { display: flex; flex-wrap: wrap; gap: var(--vv-e3); margin-top: var(--vv-e6); }
.vv-aviso__acoes .vv-btn { min-height: 48px; padding-inline: var(--vv-e5); }
@media (max-width: 767.98px) {
    .vv-aviso-pag { padding-block: var(--vv-e6) var(--vv-e7); }
    .vv-aviso { text-align: left; }
    .vv-aviso__vago { width: 132px; justify-self: start; }
    .vv-aviso__selo { width: 64px; height: 64px; font-size: 1.85rem; }
    .vv-aviso__acoes .vv-btn { flex: 1 1 auto; }
}

/* detalhes técnicos do erro: só em desenvolvimento (display_exceptions) */
.vv-aviso__tecnico { grid-column: 1 / -1; margin-top: var(--vv-e5); border: 1px solid var(--vv-fio-leve); border-radius: var(--vv-raio-fig); background: var(--vv-figura); }
.vv-aviso__tecnico summary { min-height: 44px; display: flex; align-items: center; padding: 0 var(--vv-e4); font-weight: 700; cursor: pointer; }
.vv-aviso__tecnico dl { margin: 0; padding: 0 var(--vv-e4) var(--vv-e4); }
.vv-aviso__tecnico dt { margin-top: var(--vv-e3); font-size: var(--vv-t-xs); color: var(--vv-tinta-2); }
.vv-aviso__tecnico dd { margin: var(--vv-e1) 0 0; }
.vv-aviso__tecnico pre { margin: 0; padding: var(--vv-e3); max-height: 360px; overflow: auto; background: var(--vv-folha-2); border-radius: var(--vv-raio-fig); font-size: var(--vv-t-xs); white-space: pre-wrap; overflow-wrap: anywhere; }