/* ============================================================
   assinante.css — área do assinante (login, arquivo, meus dados)
   Mobile first; sem dependências externas.
   ============================================================ */

:root {
    --marca: #d71a20;
    --marca-escura: #b3141a;
    --marca-suave: rgba(215, 26, 32, .18);

    --fundo: #f5f3ef;
    --cartao: #ffffff;
    --borda: #e2ddd5;
    --borda-forte: #c9c2b8;
    --texto: #1d1c1a;
    --texto-fraco: #5f5b55;

    --sucesso: #166534;
    --sucesso-fundo: #dcfce7;
    --alerta: #92400e;
    --alerta-fundo: #fef3c7;
    --erro: #991b1b;
    --erro-fundo: #fee2e2;

    --raio: 10px;
    --raio-pequeno: 7px;
    --sombra: 0 1px 2px rgba(29, 28, 26, .06), 0 10px 30px rgba(29, 28, 26, .07);

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo: Georgia, "Times New Roman", Times, serif;
    --largura: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
}

img { max-width: 100%; height: auto; }

a { color: var(--marca-escura); text-underline-offset: 2px; }
a:hover { color: var(--marca); }
a[href^="tel:"] { white-space: nowrap; }

h1, h2, h3 {
    margin: 0 0 .5rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.3rem; }

p { margin: 0 0 1rem; }

:focus-visible {
    outline: 3px solid var(--marca-suave);
    outline-offset: 2px;
}

.texto-fraco { color: var(--texto-fraco); }

/* aparece só ao navegar pelo teclado (Tab) */
.pular-conteudo {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 10;
    padding: 10px 16px;
    font-weight: 600;
    color: #fff;
    background: var(--texto);
    border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
    text-decoration: none;
}
.pular-conteudo:focus { top: 0; color: #fff; }
.conteudo:focus { outline: none; }

/* ---------- cabeçalho e rodapé ---------- */

.cabecalho {
    background: var(--cartao);
    border-bottom: 3px solid var(--marca);
}

.cabecalho-conteudo {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cabecalho-logo img { display: block; height: 28px; width: auto; }

.cabecalho-rotulo {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.conteudo {
    flex: 1;
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 28px 16px 40px;
}

.rodape {
    border-top: 1px solid var(--borda);
    padding: 20px 16px 28px;
    text-align: center;
    font-size: .875rem;
    color: var(--texto-fraco);
}
.rodape p { margin: 0 0 .35rem; }
.rodape-direitos { font-size: .8rem; }

/* ---------- cartão ---------- */

.cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px 20px;
}

/* ---------- mensagens ---------- */

.alerta {
    border-radius: var(--raio-pequeno);
    padding: 12px 14px;
    margin: 0 0 1.25rem;
    font-size: .925rem;
    border-left: 4px solid currentColor;
}
.alerta-erro { color: var(--erro); background: var(--erro-fundo); }
.alerta-sucesso { color: var(--sucesso); background: var(--sucesso-fundo); }
.alerta-alerta { color: var(--alerta); background: var(--alerta-fundo); }

/* ---------- formulários ---------- */

.formulario .campo { margin-bottom: 1.1rem; }

.formulario label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
    font-weight: 600;
}

.rotulo-auxiliar {
    display: block;
    font-weight: 400;
    font-size: .8rem;
    color: var(--texto-fraco);
}

.formulario input[type="email"],
.formulario input[type="password"],
.formulario input[type="text"] {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    color: var(--texto);
    background: #fff;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    transition: border-color .15s, box-shadow .15s;
}

.formulario input:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-suave);
}

.campo-senha { position: relative; }
.campo-senha input { padding-right: 84px; }

.mostrar-senha {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 6px 10px;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-fraco);
    background: transparent;
    border: 0;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
}
.mostrar-senha:hover { color: var(--texto); background: var(--fundo); }

.caixa {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 1.25rem !important;
    font-weight: 400 !important;
    cursor: pointer;
}
.caixa input { width: 18px; height: 18px; margin: 0; accent-color: var(--marca); }

/* ---------- botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.botao-primario { color: #fff; background: var(--marca); }
.botao-primario:hover { color: #fff; background: var(--marca-escura); }
.botao-secundario { color: var(--texto); background: #fff; border-color: var(--borda-forte); }
.botao-secundario:hover { color: var(--texto); border-color: var(--texto-fraco); }
.botao-bloco { width: 100%; }
.botao[disabled] { opacity: .65; cursor: progress; }

/* ---------- login ---------- */

.login {
    display: grid;
    gap: 28px;
    align-items: start;
    max-width: 460px;
    margin: 0 auto;
}

.login-cartao { order: 1; }
.login-edicao { order: 2; text-align: center; }

.login-esqueci {
    margin: 1rem 0 0;
    text-align: center;
    font-size: .925rem;
}

.rotulo {
    margin: 0 0 .6rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--marca);
}

.capa {
    margin: 0 auto;
    max-width: 320px;
}
.capa img {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--borda);
    box-shadow: 0 2px 4px rgba(29, 28, 26, .08), 0 14px 32px rgba(29, 28, 26, .14);
}

.capa-legenda {
    margin: .9rem 0 0;
    font-size: .9rem;
    color: var(--texto-fraco);
}
.capa-legenda strong { display: block; color: var(--texto); font-size: 1rem; }

.assine {
    max-width: 640px;
    margin: 36px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--borda);
    text-align: center;
    color: var(--texto-fraco);
}
.assine h2 { color: var(--texto); font-size: 1.15rem; }

/* ---------- menu da área (páginas de quem está logado) ---------- */

.cabecalho-conteudo { flex-wrap: wrap; }

.menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    display: block;
    padding: 7px 12px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto-fraco);
    text-decoration: none;
    border-radius: var(--raio-pequeno);
}
.menu a:hover { color: var(--texto); background: var(--fundo); }
.menu a[aria-current="page"] { color: var(--marca-escura); background: rgba(215, 26, 32, .08); }

@media (max-width: 599px) {
    .cabecalho-conteudo { gap: 8px; }
    .menu { width: calc(100% + 16px); margin: 0 -8px; overflow-x: auto; }
    .menu ul { gap: 0; flex-wrap: nowrap; }
    .menu a { padding: 6px 8px; font-size: .82rem; white-space: nowrap; }
}

/* ---------- páginas de conteúdo ---------- */

.oculto { display: none !important; }

.cartao-estreito { max-width: 460px; margin: 0 auto; }

.rodape-cartao {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .925rem;
}

.pagina-titulo { margin-bottom: 1.5rem; }
.pagina-titulo p { margin: 0; }

.cartao h2 { margin-bottom: 1rem; }

.grade-dados {
    display: grid;
    gap: 24px;
    align-items: start;
}

.pilha { display: grid; gap: 24px; }

.lista-dados { margin: 0 0 1rem; }
.lista-dados > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda);
}
.lista-dados > div:last-child { border-bottom: 0; }
.lista-dados dt { color: var(--texto-fraco); }
.lista-dados dd { margin: 0; font-weight: 600; text-align: right; }

.selo {
    display: inline-block;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 999px;
}
.selo-ativa { color: var(--sucesso); background: var(--sucesso-fundo); }

.nota {
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--texto-fraco);
}

.campos-lado { display: grid; gap: 0 16px; }

/* ---------- página de erro ---------- */

.pagina-erro { text-align: center; }
.acoes-erro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 1.5rem 0 0;
}

/* ---------- arquivo de edições ---------- */

.filtro-arquivo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 24px;
}
.filtro-arquivo .campo { margin: 0; }
.filtro-arquivo label {
    display: block;
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 600;
}
.filtro-arquivo select {
    min-width: 140px;
    padding: 10px 12px;
    font: inherit;
    color: var(--texto);
    background: #fff;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
}
.filtro-arquivo .botao { padding: 10px 18px; }
.limpar-filtro { align-self: center; font-size: .9rem; }

.grade-edicoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 28px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.edicao-cartao a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.edicao-capa {
    position: relative;
    display: block;
    aspect-ratio: 400 / 528;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--borda);
    box-shadow: 0 1px 2px rgba(29, 28, 26, .08), 0 8px 20px rgba(29, 28, 26, .10);
    transition: transform .15s, box-shadow .15s;
}
.edicao-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edicao-cartao a:hover .edicao-capa,
.edicao-cartao a:focus-visible .edicao-capa {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(29, 28, 26, .10), 0 14px 30px rgba(29, 28, 26, .16);
}
.edicao-capa.sem-capa::after {         /* capa indisponível */
    content: attr(data-numero);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--borda-forte);
    background: repeating-linear-gradient(45deg, #faf8f5, #faf8f5 10px, #f3f0eb 10px, #f3f0eb 20px);
}
.edicao-capa.sem-capa img { visibility: hidden; }

.edicao-info { display: block; margin-top: 10px; line-height: 1.35; }
.edicao-info strong { display: flex; align-items: center; gap: 6px; font-size: .95rem; }
.edicao-info > span { display: block; font-size: .82rem; color: var(--texto-fraco); }

.cartao.vazio { text-align: center; color: var(--texto-fraco); }
.cartao.vazio p { margin: 0; }

.paginacao { margin-top: 36px; }
.paginacao ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.paginacao a,
.paginacao span {
    display: block;
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--raio-pequeno);
}
.paginacao a { color: var(--texto); background: #fff; border: 1px solid var(--borda); }
.paginacao a:hover { border-color: var(--borda-forte); }
.paginacao span[aria-current="page"] { color: #fff; background: var(--marca); }
.paginacao .reticencias { padding: 8px 2px; color: var(--texto-fraco); }

@media (min-width: 820px) {
    .grade-edicoes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (min-width: 600px) {
    .campos-lado { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 820px) {
    .conteudo { padding-top: 44px; }
    .grade-dados { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
    .cartao-assinatura { position: sticky; top: 24px; }
    .cartao { padding: 28px 28px; }
    .login {
        max-width: none;
        grid-template-columns: minmax(0, 340px) minmax(0, 420px);
        justify-content: center;
        gap: 56px;
    }
    .login-edicao { order: 1; }
    .login-cartao { order: 2; padding: 32px 30px; }
    .capa { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}