/* Paginas de servico (tools/_pagina_servico.py): favoritos, obrigado, alertas, links e 404.
   Pranchas Favoritos, Favoritos_celular, Obrigado e Nao_encontrada. Usa os tokens e componentes do base.css (os dos
   formularios tambem: campo-isca, erros e aceite). */

/* --- Favoritos --- */
.favoritos-topo { padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.favoritos-topo__texto { display: flex; flex-direction: column; gap: 8px; }
.favoritos-topo__texto p { margin: 0; }
.favoritos-topo__texto .texto-abertura:empty { display: none; }
.favoritos-nota { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; align-self: start; }
.favoritos-nota p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cor-texto-suave); }
.favoritos-nota strong { color: var(--cor-texto); }
.favoritos-nota__icone { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--cor-vermelho-vivo); background: var(--cor-primaria-suave); border-radius: 10px; }
.favoritos { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.favoritos__principal { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.favoritos__lado { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.favoritos-aviso, .favoritos-compartilhada { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.favoritos-aviso p, .favoritos-compartilhada p { margin: 0; }
.favoritos-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.favoritos-tirado {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px;
  background: var(--cor-rodape); color: var(--cor-sobre-primaria); border-radius: var(--raio-pequeno);
}
.favoritos-tirado p { margin: 0; }
.favoritos-carregando { margin: 0; color: var(--cor-texto-suave); }
.favoritos-erro { margin: 0; padding: 16px 20px; color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro); }
.favoritos-grupo { display: flex; flex-direction: column; gap: 16px; }
.favoritos-grupo__cabeca { display: flex; flex-direction: column; gap: 6px; }
.favoritos-grupo__cabeca .titulo-secao { display: flex; align-items: center; gap: 10px; }
.favoritos-grupo__cabeca p { margin: 0; }
.favoritos-mudou { margin: 0; padding: 8px 10px; font-size: 14px; line-height: 1.4; color: var(--cor-texto); background: var(--cor-destaque-suave); border-radius: 8px; }
.favoritos-saiu { background: var(--cor-fundo); box-shadow: none; }
.favoritos-saiu .cartao__corpo { padding-right: 64px; }
.favoritos-saiu .etiqueta { align-self: flex-start; }
.favoritos-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 4vw, 40px); }
.favoritos-vazio p { margin: 0; }
.favoritos-vazio__icone { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--cor-vermelho-vivo); background: var(--cor-primaria-suave); border-radius: 14px; }
.favoritos-mandar { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.favoritos-mandar p { margin: 0; }
.favoritos-mandar > .botao { width: 100%; }
.favoritos-mandar__visita { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--cor-borda); }
.favoritos-em-dia { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.favoritos-em-dia ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.favoritos-em-dia li { display: flex; align-items: flex-start; gap: 12px; }
.favoritos-em-dia li > svg { margin-top: 2px; color: var(--cor-destaque-escura); }
.favoritos-em-dia h3 { margin: 0 0 2px; font-size: 16px; }
.favoritos-em-dia p { margin: 0; }
.favoritos-alerta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: clamp(20px, 3vw, 32px); }
.favoritos-alerta > div { flex: 999 1 320px; display: flex; flex-direction: column; gap: 6px; }
.favoritos-alerta p { margin: 0; }
.favoritos-alerta__icone { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--cor-primaria); background: var(--cor-primaria-suave); border-radius: 12px; }

@media (min-width: 60em) {
  .favoritos-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: end; }
  .favoritos { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .favoritos__lado { position: sticky; top: 16px; align-self: start; }
}

/* --- Obrigado --- */
.obrigado { padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.obrigado__principal { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 4vw, 40px); }
.obrigado__principal p { margin: 0; }
.obrigado__cabeca { display: flex; align-items: center; gap: 16px; }
.obrigado__cabeca > div { display: flex; flex-direction: column; gap: 6px; }
.obrigado__icone { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-radius: 999px; }
.obrigado__protocolo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; background: var(--cor-fundo); border-radius: var(--raio-pequeno); }
.obrigado__protocolo dl { margin: 0; }
.obrigado__protocolo dt { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-destaque-escura); }
.obrigado__protocolo dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.obrigado__sem-js { padding: 12px 16px; background: var(--cor-fundo); border-radius: var(--raio-pequeno); }
.obrigado__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--cor-texto-suave); }
.obrigado__lista li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.obrigado__lista li > svg { margin-top: 2px; color: var(--cor-destaque-escura); }
.obrigado__lista strong { color: var(--cor-texto); }
.obrigado__atendimento { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px; border: 1.5px solid var(--cor-conversa); border-radius: var(--raio-pequeno); background: var(--cor-sucesso-fundo); }
.obrigado__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.obrigado__imovel { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.obrigado__imovel p { margin: 0; }
.obrigado-passos__lista { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.obrigado-passos__lista > li { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.obrigado-passos__lista p { margin: 0; }
.obrigado-passos__quando { display: flex; align-items: center; gap: 10px; }
.obrigado-passos__quando span {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  font-weight: 700; color: var(--cor-sobre-primaria); background: var(--cor-primaria); border-radius: 999px;
}
.obrigado-passos__quando p { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-destaque-escura); }
.obrigado-golpes { margin: 0; display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; line-height: 1.55; }
.obrigado-golpes > svg { margin-top: 2px; color: var(--cor-destaque-escura); }

@media (min-width: 60em) {
  .obrigado { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}

/* --- Alertas --- */
.alerta-pagina { padding-top: 16px; }
.alerta-pagina__caixa { max-width: 720px; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 4vw, 40px); }
.alerta-pagina__caixa p { margin: 0; }
.alerta-pagina__icone { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--cor-primaria); background: var(--cor-primaria-suave); border-radius: 14px; }
.alerta-pagina__form { display: flex; flex-direction: column; gap: 16px; }
.alerta-pagina__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* --- Links --- */
.links-pagina { padding-top: 24px; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.links-pagina p { margin: 0; }
.links-pagina__logo { width: 122px; height: auto; }
.links-pagina__lista { width: 100%; margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.links-pagina__botao { width: 100%; }

/* --- 404 --- */
.nao-encontrada { padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: end; }
.nao-encontrada__texto { display: flex; flex-direction: column; gap: 10px; }
.nao-encontrada__texto p { margin: 0; }
.nao-encontrada__busca { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.nao-encontrada__linha { display: flex; flex-wrap: wrap; gap: 8px; }
.nao-encontrada__linha .campo__controle { flex: 1 1 220px; width: auto; }
.nao-encontrada__atalhos { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.nao-encontrada__atalhos > li { display: flex; }
.nao-encontrada__atalhos a {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 20px; color: var(--cor-texto); text-decoration: none;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-medio);
}
.nao-encontrada__atalhos a:hover { color: var(--cor-texto); border-color: var(--cor-primaria); }
.nao-encontrada__atalhos h3 { margin: 0; font-size: 19px; }
.nao-encontrada__atalhos p { margin: 0; font-size: 15px; color: var(--cor-texto-suave); }
.nao-encontrada__atalhos .link-seta { margin-top: auto; color: var(--cor-primaria); }
.nao-encontrada__links { display: flex; flex-direction: column; align-items: flex-start; }
.nao-encontrada__vitrine .grade-cartoes { margin-top: 24px; }

@media (min-width: 60em) {
  .nao-encontrada { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; }
}