/* =========================================================
   EmMemoria — Estilos do módulo de autenticação
   Paleta: verde musgo #2D4A3E · bege #F5F0E8 · dourado #C9A96E

   Essa paleta é própria do Módulo 2, anterior à identidade "Oliva & Mel"
   (design-tokens.css) — nenhuma das 3 cores acima tem token equivalente
   hoje. Este arquivo carrega design-tokens.css (ver class-auth.php) e usa
   var(--emm-*) só onde o valor hex já era IDÊNTICO a um token existente
   (branco, vermelho de erro-texto, verde-oliva da bolinha de status) —
   sem introduzir nenhuma mudança visual.
   ========================================================= */

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

body.emmemoria-auth-page {
    min-height: 100vh;
    background-color: #F5F0E8;
    font-family: Georgia, 'Times New Roman', serif;
    color: #2D4A3E;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ─── Container central ─── */
.emmemoria-auth-container {
    width: 100%;
    max-width: 440px;
}

.emmemoria-auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.emmemoria-auth-logo img {
    height: 56px;
    width: auto;
}

/* ─── Card ─── */
.emmemoria-auth-card {
    background: var(--emm-fundo-card);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 24px rgba(45, 74, 62, 0.10);
}

.emmemoria-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2D4A3E;
    text-align: center;
    margin-bottom: 1.5rem;
}

.emmemoria-auth-description {
    font-size: 0.9375rem;
    color: #5a6f6a;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* ─── Mensagem de feedback ─── */
.emmemoria-auth-message {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.emmemoria-auth-message.is-error {
    /* Fundo/borda NÃO migrados para var(--emm-erro-fundo)/var(--emm-erro-borda) —
       são tons diferentes (#fdecea/#f5c6cb vs #FFEBEE/#FFCDD2 dos tokens), e
       trocar mudaria a cor de fato. O Módulo 2 usa uma paleta própria, anterior
       à "Oliva & Mel" (#2D4A3E/#F5F0E8/#C9A96E, nenhuma com token equivalente
       hoje) — unificar só o erro deixaria a tela mais inconsistente, não menos.
       Ver decisão registrada no Backlog (.specs, item de cores de erro). */
    background-color: #fdecea;
    color: var(--emm-erro-texto); /* = #B71C1C, valor idêntico ao hex anterior */
    border: 1px solid #f5c6cb;
}

.emmemoria-auth-message.is-success {
    background-color: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

/* ─── Campos do formulário ─── */
.emmemoria-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

/* display:flex acima (regra de autor) empata em especificidade com a regra
   nativa "[hidden] { display: none; }" do navegador e vence — sem isto, um
   .emmemoria-field com o atributo hidden (ex: #emmemoria-campo-como-conheceu-outro)
   fica sempre visível mesmo já no carregamento da página. Mesma armadilha já
   documentada em .emmemoria-senha-aviso-padrao/.emmemoria-documento-erro logo abaixo. */
.emmemoria-field[hidden] {
    display: none;
}

/* ─── Linha de campos lado a lado (ex: Número + Complemento) ─── */
.emmemoria-field-linha {
    display: flex;
    gap: 1rem;
}

.emmemoria-field-linha .emmemoria-field {
    flex: 1;
    min-width: 0;
}

/* ─── Toggle Pessoa Física / Jurídica ─── */
.emmemoria-radio-grupo {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.emmemoria-radio-grupo label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 400;
    color: #2D4A3E;
    cursor: pointer;
}

.emmemoria-radio-grupo input[type="radio"] {
    accent-color: #2D4A3E;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.emmemoria-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2D4A3E;
    margin-bottom: 0.375rem;
}

.emmemoria-campo-opcional {
    font-weight: 400;
    color: #7a8a85;
}

/* ─── Medidor de força de senha ─── */
.emmemoria-senha-forca {
    margin-top: 0.5rem;
}

.emmemoria-senha-forca-barra {
    height: 4px;
    border-radius: 2px;
    background-color: #e8e3da;
    overflow: hidden;
}

.emmemoria-senha-forca-preenchimento {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.emmemoria-senha-forca-texto {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.emmemoria-campo-ajuda {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #7a8a85;
}

.emmemoria-senha-aviso-padrao,
.emmemoria-documento-erro {
    /* SEM display:block aqui — <p> já é block por padrão, e declarar isso
       explicitamente empata em especificidade com a regra nativa
       "[hidden] { display: none; }" do navegador; como CSS de autor vence
       UA stylesheet em empate, o elemento ficava sempre visível mesmo com
       o atributo hidden presente no HTML, aparecendo já no carregamento
       da página com o campo de senha (ou documento) vazio */
    margin-top: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--emm-erro-texto);
}

.emmemoria-field input,
.emmemoria-field select {
    padding: 0.625rem 0.875rem;
    border: 1.5px solid #d5cfc5;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #2D4A3E;
    background: #faf9f7;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.emmemoria-field select {
    cursor: pointer;
}

.emmemoria-field input:focus,
.emmemoria-field select:focus {
    border-color: #2D4A3E;
    box-shadow: 0 0 0 3px rgba(45, 74, 62, 0.12);
    background: var(--emm-fundo-card);
}

.emmemoria-field input::placeholder {
    color: #b0a898;
}

.emmemoria-field input:read-only {
    background: #efece4;
    color: #7a8a85;
    cursor: not-allowed;
}

/* ─── Botão de mostrar/ocultar senha ─── */
.emmemoria-toggle-senha {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* área de toque mínima recomendada */
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* ─── Link de ação (esqueci senha) ─── */
.emmemoria-field-action {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* ─── Botões ─── */
.emmemoria-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* área de toque mínima recomendada */
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background-color 0.2s, transform 0.1s;
    line-height: 1;
}

.emmemoria-btn:active {
    transform: translateY(1px);
}

/* Cor explícita nos 4 pseudo-estados (não só no seletor base) — cobre o caso
   deste botão ser um <a> (ex: "+ Criar memorial" em dashboard.php): sem isso,
   o link "ativo"/visitado do navegador vaza a cor azul/sublinhado padrão em
   vez da paleta, mesma classe de bug já corrigida no cabeçalho/rodapé
   institucional. Não afeta as instâncias em <button>, que não têm :link/
   :visited (só passam a receber a mesma declaração inofensivamente). */
.emmemoria-btn-primary,
.emmemoria-btn-primary:link,
.emmemoria-btn-primary:visited,
.emmemoria-btn-primary:active {
    background-color: #2D4A3E;
    color: #F5F0E8;
    margin-top: 0.5rem;
}

.emmemoria-btn-primary:hover {
    background-color: #233d33;
    color: #F5F0E8;
}

.emmemoria-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.emmemoria-btn-google {
    background-color: var(--emm-fundo-card);
    color: #2D4A3E;
    border: 1.5px solid #d5cfc5;
    margin-top: 0;
}

.emmemoria-btn-google:hover {
    background-color: #f9f7f4;
}

.emmemoria-btn-sm {
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ─── Separador ─── */
.emmemoria-auth-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: #b0a898;
    font-size: 0.8125rem;
}

.emmemoria-auth-separator::before,
.emmemoria-auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e8e3da;
}

/* ─── Links ─── */
/* Cor/sublinhado explícitos nos 4 pseudo-estados — mesma blindagem contra o
   azul/sublinhado padrão do navegador em :visited já aplicada no cabeçalho/
   rodapé institucional. Usado em login/cadastro/recuperar senha/dashboard
   ("Esqueci a senha", "Criar conta", "Ver memorial" etc). Não afeta o
   contexto de .emmemoria-memorial-card-actions .emmemoria-link (seletor
   composto de 2 classes, já mais específico que qualquer regra a:visited de
   tema — mantém a cor oliva-escuro/mel própria desse contexto). */
.emmemoria-link,
.emmemoria-link:link,
.emmemoria-link:visited,
.emmemoria-link:active {
    color: #C9A96E;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.emmemoria-link:hover {
    color: #a8863f;
    text-decoration: underline;
}

.emmemoria-auth-footer-link {
    text-align: center;
    font-size: 0.875rem;
    color: #7a8a85;
    margin-top: 1.25rem;
}

/* ─────────────────────────────────────────
   Dashboard
   ───────────────────────────────────────── */

body.emmemoria-dashboard-page {
    align-items: stretch;
    padding: 0;
    background-color: #F5F0E8;
}

.emmemoria-dashboard-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Sidebar */
.emmemoria-sidebar {
    width: 240px;
    min-height: 100vh;
    background-color: #2D4A3E;
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    flex-shrink: 0;
}

.emmemoria-sidebar-logo {
    padding: 0 1.5rem 2rem;
    border-bottom: 1px solid rgba(245, 240, 232, 0.12);
    margin-bottom: 1.5rem;
}

.emmemoria-sidebar-logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.emmemoria-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.75rem;
    flex: 1;
}

.emmemoria-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: background-color 0.15s, color 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* Cor/sublinhado explícitos nos 4 pseudo-estados — sem isso, os itens do
   menu principal do painel (Meus Memoriais/Meu Plano/Meus Dados, todos <a>)
   vazam o azul/sublinhado padrão do navegador em :visited em vez da paleta
   escura da sidebar. .emmemoria-nav-item--logout fica de fora por ser um
   <button> dentro de <form>, sem :link/:visited. */
.emmemoria-nav-item,
.emmemoria-nav-item:link,
.emmemoria-nav-item:visited,
.emmemoria-nav-item:active {
    color: rgba(245, 240, 232, 0.75);
    text-decoration: none;
}

.emmemoria-nav-item:hover,
.emmemoria-nav-item--active {
    background-color: rgba(245, 240, 232, 0.12);
    color: #F5F0E8;
}

.emmemoria-nav-logout {
    margin-top: auto;
}

.emmemoria-nav-item--logout {
    color: rgba(201, 169, 110, 0.8);
}

.emmemoria-nav-item--logout:hover {
    color: #C9A96E;
    background-color: rgba(201, 169, 110, 0.1);
}

/* Dashboard main */
.emmemoria-dashboard-main {
    flex: 1;
    padding: 2.5rem;
    overflow-y: auto;
}

/* Rodapé do painel — só a linha de copyright (discreta), reaproveitada por
   todas as telas de /minha-conta via dashboard-topo.php/dashboard-rodape.php.
   Sem wordmark/tagline/CTA "criar memorial" — esses fazem sentido no rodapé
   do memorial público (memorial-publico.css, .emm-memorial-footer), não numa
   área que já é de usuário logado. */
.emmemoria-dashboard-footer {
    margin-top: var(--emm-espaco-xl);
    padding-top: var(--emm-espaco-md);
    border-top: 1px solid var(--emm-borda);
    text-align: center;
}

.emmemoria-dashboard-footer__copyright {
    font-family: var(--emm-fonte-sans);
    font-size: 0.78rem;
    color: var(--emm-texto-terciario);
    margin: 0;
}

.emmemoria-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e0d8cc;
}

.emmemoria-dashboard-header__titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.emmemoria-dashboard-header__acao {
    margin-top: 0; /* .emmemoria-btn-primary tem margin-top pensado p/ empilhar em formulário, não se aplica aqui */
}

.emmemoria-dashboard-greeting {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2D4A3E;
}

.emmemoria-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.emmemoria-section-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2D4A3E;
}

/* ─── Tela "Meus Dados" ───────────────────────────────────────────────
   Card por seção com sombra sutil — mesmo padrão já usado em outras abas
   do painel (.emmpag-memorial-card em Meus Pagamentos, cards de Homenagens
   em Gerenciar): fundo branco, raio 8px, box-shadow rgba(45,74,62,0.08). */
.emmemoria-conta-form {
    max-width: 640px;
}

.emmemoria-conta-secao {
    background: var(--emm-fundo-card);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(45, 74, 62, 0.08);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.emmemoria-conta-secao .emmemoria-field:last-child,
.emmemoria-conta-secao > p.emmemoria-campo-ajuda:last-child {
    margin-bottom: 0;
}

/* Título de seção com divisor — mesma linguagem de .emmpag-secao-titulo
   (Meus Pagamentos), adaptada à tipografia sans-serif já usada no header
   desta página (.emmemoria-dashboard-header) */
.emmemoria-conta-secao .emmemoria-section-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid #e8e3da;
}

/* ─── "Meus Dados": Encerrar conta (desativar/excluir) ──────────────────
   Espaçamento generoso + linha divisória acima (era só o margin-bottom
   padrão de .emmemoria-conta-secao, ficava "grudado" no botão "Salvar
   alterações" logo acima — pedido do Duvanir, 25/07/2026, pra deixar claro
   que esta seção não faz parte do formulário de dados pessoais). ─────── */

.emmemoria-zona-risco {
    border: 1px solid var(--emm-erro-borda);
    margin-top: 3rem;
    position: relative;
}

.emmemoria-zona-risco::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: 0;
    right: 0;
    border-top: 1px solid var(--emm-borda);
}

.emmemoria-zona-risco-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid #e8e3da;
}

.emmemoria-zona-risco-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.emmemoria-zona-risco-texto h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #2D4A3E;
    margin: 0 0 0.25rem;
}

.emmemoria-zona-risco-texto .emmemoria-campo-ajuda {
    margin-top: 0;
    max-width: 480px;
}

.emmemoria-btn-zona-risco {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 1.25rem;
    background: var(--emm-fundo-card);
    color: #2D4A3E;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.emmemoria-btn-zona-risco:hover {
    background: #F5F0E8;
    border-color: #8B6F4E;
}

.emmemoria-btn-zona-risco--perigo {
    color: var(--emm-erro-texto);
    background: var(--emm-erro-fundo);
    border-color: var(--emm-erro-borda);
}

.emmemoria-btn-zona-risco--perigo:hover {
    background: #f9d4d1;
    border-color: var(--emm-erro-texto);
}

/* ─── Modal de confirmação (compartilhado — hoje só "Excluir conta") ──── */

.emmemoria-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.emmemoria-modal.ativo {
    display: flex;
}

/* .emmemoria-modal é display:flex — sem min-width:0, o item flex nunca
   encolhe abaixo do conteúdo mais largo, ignorando o width:90% em telas
   estreitas (mesmo cuidado já documentado pra este componente em
   payments.css, onde o mesmo padrão de classe nasceu). */
.emmemoria-modal-box {
    background: #fff;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    min-width: 0;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.emmemoria-modal-box h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: #2D4A3E;
    margin: 0 0 1rem;
    line-height: 1.3;
}

.emmemoria-modal-box p {
    font-family: sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5C4A3A;
    margin: 0 0 1.25rem;
}

.emmemoria-modal-acoes {
    display: flex;
    gap: 12px;
    margin-top: 1.5rem;
}

.emmemoria-btn-modal-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 1;
    padding: 12px 20px;
    background: #2D4A3E;
    color: #F5F0E8;
    border: none;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.emmemoria-btn-modal-principal:hover {
    background: #4A7C6F;
}

.emmemoria-btn-modal-principal:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.emmemoria-btn-modal-principal--perigo {
    background: var(--emm-erro-texto);
}

.emmemoria-btn-modal-principal--perigo:hover:not(:disabled) {
    background: #8f1515;
}

.emmemoria-btn-modal-cancelar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 1;
    padding: 12px 20px;
    background: #fff;
    color: #5C4A3A;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-align: center;
    text-decoration: underline;
}

.emmemoria-btn-modal-cancelar:hover {
    background: #F5F0E8;
    border-color: #8B6F4E;
}

.emmemoria-modal-erro {
    background: var(--emm-erro-fundo);
    border: 1px solid var(--emm-erro-borda);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: sans-serif;
    font-size: 14px;
    color: var(--emm-erro-texto);
    margin-top: 14px;
    display: none;
}

@media (max-width: 560px) {
    .emmemoria-zona-risco-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .emmemoria-btn-zona-risco {
        width: 100%;
    }
}

/* Grade de memoriais */
.emmemoria-memoriais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.emmemoria-memorial-card {
    background: var(--emm-fundo-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(45, 74, 62, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.emmemoria-memorial-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 74, 62, 0.14);
}

.emmemoria-memorial-card-thumb {
    position: relative;
    height: 160px;
    overflow: hidden;
    background-color: #e8e3da;
}

.emmemoria-memorial-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.emmemoria-memorial-card-badge--rascunho {
    background-color: #C9A96E;
    color: var(--emm-fundo-card);
}

/* Contador de visitas únicas — canto superior direito (espelha o badge
   "Rascunho" acima, que fica à esquerda), só renderizado no PHP quando > 0.
   Fundo escuro translúcido — mesmo tratamento já usado em rótulos sobre
   miniatura de foto/vídeo (.emmpainel-video-provider). */
.emmemoria-memorial-card-visitas {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background-color: rgba(45, 74, 62, 0.85);
    color: #F5F0E8;
    font-size: 0.7rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    line-height: 1;
}

.emmemoria-memorial-card-visitas svg {
    flex-shrink: 0;
}

.emmemoria-memorial-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emmemoria-memorial-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e3da 0%, #d5cfc5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mesma especificidade de ".emmemoria-memorial-card-thumb img" (1 classe +
   1 elemento), mas vem depois no arquivo — vence no empate sem precisar de
   !important, sobrescrevendo o width/height:100% pensado para fotos reais */
.emmemoria-memorial-card-thumb-placeholder img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    opacity: 0.55;
}

.emmemoria-memorial-card-body {
    padding: 1rem;
}

.emmemoria-memorial-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: #2D4A3E;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

/* Bolinha de status ao lado do nome — reforça o badge "Rascunho" já
   existente na miniatura, não o substitui. Publicado usa o mesmo verde-oliva
   de --emm-oliva (design-tokens.css) — auth.css agora carrega esse arquivo
   (ver class-auth.php::enqueue_assets()), então usa a variável diretamente. */
.emmemoria-memorial-card-status {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.emmemoria-memorial-card-status--publicado {
    background-color: var(--emm-oliva);
}

.emmemoria-memorial-card-status--rascunho {
    background-color: #C9A96E; /* mesma cor do badge "Rascunho" já existente */
}

/* flex-wrap: wrap — a fileira já teve 4 links de ação ("Ver memorial",
   "Editar", "Gerenciar conteúdo", "Privacidade") e não há garantia de nunca
   crescer mais; depender de largura mínima de card pra nunca quebrar linha
   já cortou "Privacidade" no passado (card tem overflow: hidden). Sem gap
   horizontal — o espaçamento entre ações agora vem do padding de cada link
   (ver .emmemoria-memorial-card-actions .emmemoria-link abaixo), que também
   define onde o divisor vertical entre elas fica. */
.emmemoria-memorial-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0;
}

/* Links de ação do card ("Ver memorial", "Gerenciar conteúdo", "Continuar
   cadastro", "Excluir rascunho") — ícone + texto (mesmo gap já usado entre
   a bolinha de status e o nome do memorial), cor oliva-escuro padrão para
   dar um ar mais "profissional" que o dourado de link genérico do resto do
   site. área de toque mínima recomendada, sem aumentar o texto. white-space:
   nowrap evita quebrar o texto de UM link no meio da palavra; quem quebra
   linha agora é a fileira inteira (flex-wrap acima), não o texto do link */
.emmemoria-memorial-card-actions .emmemoria-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.85rem;
    color: #2D4A3E;
    font-weight: 600;
    white-space: nowrap;
}

.emmemoria-memorial-card-actions .emmemoria-link:first-child {
    padding-left: 0;
}

.emmemoria-memorial-card-actions .emmemoria-link svg {
    flex-shrink: 0;
}

/* Divisor vertical entre as ações — cada card só tem 2 ações por vez (fluxo
   rascunho OU publicado, nunca os dois), então nunca há risco de um divisor
   "sobrando" isolado numa quebra de linha do flex-wrap acima. */
.emmemoria-memorial-card-actions .emmemoria-link:not(:first-child) {
    border-left: 1px solid #e8e3da;
}

/* "Excluir rascunho" é um <button> (não <a>) para não precisar de uma URL —
   zera só a aparência nativa de botão; gap/padding/cor vêm do
   .emmemoria-memorial-card-actions .emmemoria-link acima (o botão também
   carrega essa classe). */
.emmemoria-btn-excluir-rascunho {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* "Continuar cadastro" é a ação primária de um rascunho — dourado (mel) em
   vez do oliva-escuro padrão acima, mesmo destaque já usado no badge
   "Rascunho" da miniatura, pra chamar atenção pra terminar o cadastro. */
.emmemoria-memorial-card-actions .emmemoria-link--continuar {
    color: #C9A96E;
}

.emmemoria-memorial-card-actions .emmemoria-link--excluir {
    color: var(--emm-erro-texto);
}

.emmemoria-memorial-card-actions .emmemoria-link--excluir:hover {
    color: #8f1515;
}

/* Estado vazio */
.emmemoria-memoriais-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--emm-fundo-card);
    border-radius: 10px;
    color: #7a8a85;
}

.emmemoria-memoriais-empty p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

/* Controles do menu mobile — invisíveis no desktop */
.emmemoria-hamburger        { display: none; }
.emmemoria-sidebar-close    { display: none; }
.emmemoria-sidebar-backdrop { display: none; }

/* ─── Responsivo ─── */
@media (max-width: 768px) {

    /* Sidebar: sai do fluxo e entra como overlay deslizante */
    .emmemoria-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* Neutraliza o min-height:100vh da regra base (desktop) — combinado
           com height:100% ele fixava a caixa na altura do "large viewport",
           empurrando o padding-bottom para trás da barra de gestos */
        min-height: 0;
        height: 100%; /* fallback para navegadores sem suporte a dvh */
        height: 100dvh; /* desconta a barra de endereço/gestos visível */
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        z-index: 400;
        overflow-y: auto;
        /* Reforça o espaço abaixo do botão "Sair" para não ficar sob a
           barra de gestos do Android/iOS — mantém 2rem como mínimo em
           dispositivos sem safe-area */
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    .emmemoria-sidebar.is-open {
        transform: translateX(0);
    }

    /* Logo: flex row para acomodar botão de fechar */
    .emmemoria-sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 1rem;
    }

    /* Botão fechar — visível só no mobile */
    .emmemoria-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px; /* área de toque mínima recomendada */
        min-height: 44px;
        background: rgba(245, 240, 232, 0.12);
        border: none;
        border-radius: 6px;
        color: rgba(245, 240, 232, 0.75);
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.15s, color 0.15s;
    }

    .emmemoria-sidebar-close:hover {
        background-color: rgba(245, 240, 232, 0.22);
        color: #F5F0E8;
    }

    /* Backdrop */
    .emmemoria-sidebar-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 399;
    }

    /* Conteúdo principal: ocupa 100% (sidebar saiu do fluxo) */
    .emmemoria-dashboard-main {
        padding: 1.25rem 1rem;
        width: 100%;
    }

    .emmemoria-dashboard-greeting {
        font-size: 1.375rem;
    }

    /* Botão hambúrguer — visível só no mobile */
    .emmemoria-hamburger {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 44px; /* área de toque mínima recomendada */
        min-height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 6px;
        padding: 8px;
        flex-shrink: 0;
        transition: background-color 0.15s;
    }

    .emmemoria-hamburger:hover {
        background-color: rgba(45, 74, 62, 0.06);
    }

    .emmemoria-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #2D4A3E;
        border-radius: 2px;
    }

    /* Grade de memoriais: coluna única no mobile */
    .emmemoria-memoriais-grid {
        grid-template-columns: 1fr;
    }

    .emmemoria-auth-card {
        padding: 2rem 1.25rem;
    }

    /* Empilha os pares lado a lado (Número/Complemento, Cidade/Estado) */
    .emmemoria-field-linha {
        flex-direction: column;
        gap: 0;
    }

    .emmemoria-conta-secao {
        padding: 1.25rem;
    }
}