/*
 * Área do proprietário - mobile first, para pessoas com pouca experiência digital:
 * letras grandes, alvos de toque >= 56px, alto contraste, um assunto por tela.
 */
:root {
    --tl-azul: #0482f0;
    --tl-azul-escuro: #0366c0;
    --tl-laranja: #f79903;
    --tl-verde: #1e8e3e;
    --tl-vermelho: #c62828;
    --tl-texto: #1f2328;
    --tl-cinza: #5f6368;
    --tl-borda: #c9ced6;
    --tl-fundo: #f4f6f9;
}

* { box-sizing: border-box; }

body.tl-conta {
    margin: 0;
    background: var(--tl-fundo);
    color: var(--tl-texto);
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--tl-azul-escuro); }

/* ---------- Topo ---------- */
.tl-topo {
    background: #fff;
    border-bottom: 1px solid #e3e6ea;
    padding: 10px 16px;
}
.tl-topo-interno {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tl-logo img { max-height: 46px; max-width: 190px; display: block; }
.tl-logo span { font-size: 20px; font-weight: 700; color: var(--tl-azul); text-decoration: none; }
.tl-topo-links a {
    font-size: 16px;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    display: inline-block;
}
.tl-topo-links a:hover { background: var(--tl-fundo); }

/* ---------- Conteúdo ---------- */
.tl-pagina {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.tl-pagina h1 { font-size: 27px; line-height: 1.25; margin: 4px 0 8px; }
.tl-pagina h2 { font-size: 22px; margin: 26px 0 10px; }
.tl-sub { color: var(--tl-cinza); margin: 0 0 18px; }

.tl-cartao {
    background: #fff;
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ---------- Passos ---------- */
.tl-passos { margin: 0 0 16px; }
.tl-passos-texto { font-size: 16px; color: var(--tl-cinza); font-weight: 600; margin-bottom: 6px; }
.tl-passos-barra { display: flex; gap: 6px; }
.tl-passos-barra span { flex: 1; height: 8px; border-radius: 4px; background: #dfe3e8; }
.tl-passos-barra span.feito { background: var(--tl-azul); }

/* ---------- Campos ---------- */
.tl-campo { margin-bottom: 22px; }
.tl-campo > label, .tl-rotulo {
    display: block;
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 6px;
}
.tl-ajuda { display: block; color: var(--tl-cinza); font-size: 16px; margin: -2px 0 8px; font-weight: normal; }
.tl-campo input[type=text],
.tl-campo input[type=email],
.tl-campo input[type=tel],
.tl-campo input[type=password],
.tl-campo input[type=number],
.tl-campo select,
.tl-campo textarea {
    width: 100%;
    min-height: 56px;
    font-size: 19px;
    padding: 12px 14px;
    border: 2px solid var(--tl-borda);
    border-radius: 10px;
    background: #fff;
    color: var(--tl-texto);
    font-family: inherit;
}
.tl-campo textarea { min-height: 160px; line-height: 1.5; }
.tl-campo input:focus, .tl-campo select:focus, .tl-campo textarea:focus {
    outline: none;
    border-color: var(--tl-azul);
    box-shadow: 0 0 0 4px rgba(4, 130, 240, .18);
}
.tl-campo.erro input, .tl-campo.erro select, .tl-campo.erro textarea { border-color: var(--tl-vermelho); }
.tl-msg-erro { color: var(--tl-vermelho); font-weight: 600; font-size: 16px; margin-top: 6px; display: block; }

/* Senha com botão mostrar */
.tl-senha { position: relative; }
.tl-senha input { padding-right: 110px !important; }
.tl-senha button {
    position: absolute; right: 6px; top: 6px; bottom: 6px;
    border: 0; background: var(--tl-fundo); border-radius: 8px;
    font-size: 16px; padding: 0 14px; color: var(--tl-azul-escuro); font-weight: 600;
}

/* Valor em reais */
.tl-dinheiro { position: relative; }
.tl-dinheiro span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--tl-cinza); }
.tl-dinheiro input { padding-left: 52px !important; }

/* Escolha em cartões (tipo do imóvel) */
.tl-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-opcoes label {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 64px; padding: 10px;
    border: 2px solid var(--tl-borda); border-radius: 12px; background: #fff;
    font-weight: 600; font-size: 18px; cursor: pointer; text-align: center;
}
.tl-opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.tl-opcoes input:checked + label { border-color: var(--tl-azul); background: #e8f3fe; color: var(--tl-azul-escuro); }
.tl-opcoes input:focus-visible + label { box-shadow: 0 0 0 4px rgba(4, 130, 240, .25); }
.tl-opcoes i { font-size: 24px; }

/* Contador + e - */
.tl-contador-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 0; border-bottom: 1px solid #edf0f3;
}
.tl-contador-linha:last-child { border-bottom: 0; }
.tl-contador-linha .tl-rotulo { margin: 0; font-size: 18px; }
.tl-contador { display: flex; align-items: center; gap: 6px; }
.tl-contador button {
    width: 54px; height: 54px; border-radius: 50%;
    border: 2px solid var(--tl-azul); background: #fff; color: var(--tl-azul);
    font-size: 28px; line-height: 1; font-weight: 700; cursor: pointer;
}
.tl-contador button:disabled { border-color: #d6dbe1; color: #c1c7cf; }
.tl-contador input {
    width: 58px; height: 54px; text-align: center;
    font-size: 22px; font-weight: 700; border: 0; background: transparent; color: var(--tl-texto);
    -moz-appearance: textfield;
}
.tl-contador input::-webkit-outer-spin-button, .tl-contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Caixas de marcar grandes */
.tl-marcar {
    display: flex; align-items: center; gap: 14px;
    min-height: 58px; padding: 10px 14px; margin-bottom: 8px;
    border: 2px solid var(--tl-borda); border-radius: 12px; background: #fff;
    font-size: 18px; cursor: pointer;
}
.tl-marcar input { width: 28px; height: 28px; flex: 0 0 28px; accent-color: var(--tl-azul); }
.tl-marcar:has(input:checked) { border-color: var(--tl-azul); background: #e8f3fe; }

/* Valores em reais com letra grande */
.tl-dinheiro-grande input { font-size: 26px !important; font-weight: 700; min-height: 62px !important; letter-spacing: .02em; }
.tl-dinheiro-grande span { font-size: 22px; }

/* Descrição (texto colado do Facebook) */
.tl-campo textarea.tl-descricao { min-height: 300px; font-size: 18px; }

/* Ordem das fotos: ◀ Capa ▶ */
.tl-foto-ordem {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    padding: 6px; background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
}
.tl-foto .tl-foto-ordem button {
    position: static; width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .92); color: var(--tl-texto); font-size: 17px; box-shadow: none; cursor: pointer;
}
.tl-foto .tl-foto-ordem button.tl-capa-btn { width: auto; border-radius: 19px; padding: 0 10px; font-size: 14px; font-weight: 700; color: var(--tl-azul-escuro); }
.tl-foto .tl-foto-ordem button:disabled { opacity: .35; }
.tl-fotos .tl-foto .tl-foto-capa { left: 6px; top: 6px; bottom: auto; }
.tl-foto[data-tipo="foto"].primeira .tl-capa-btn { visibility: hidden; }

/* Arrastar para reordenar */
.tl-foto[data-tipo="foto"] { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tl-foto[data-tipo="foto"] img { -webkit-user-drag: none; pointer-events: none; }
.tl-foto.tl-foto-lugar { outline: 3px dashed var(--tl-azul); outline-offset: -3px; }
.tl-foto.tl-foto-lugar > * { opacity: .25; }
.tl-foto.tl-foto-fantasma {
    position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35); opacity: .95; will-change: transform;
}
.tl-foto-fantasma .tl-foto-ordem, .tl-foto-fantasma .tl-remover { display: none; }
html.tl-arrastando, html.tl-arrastando * { cursor: grabbing !important; }
html.tl-arrastando body { -webkit-user-select: none; user-select: none; }
.tl-dica-arrastar { margin: 14px 0 0; font-size: 15px; color: var(--tl-texto-suave, #555); }

/* Mapa com pino */
.tl-mapa { width: 100%; height: 340px; border-radius: 12px; border: 2px solid var(--tl-borda); background: #e9ecef; z-index: 0; }
.tl-mapa-status { margin: 8px 0 0; font-weight: 600; font-size: 17px; }
.tl-mapa-status.ok { color: var(--tl-verde); }
.tl-mapa-status.pendente { color: #7a4f01; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 24px !important; }

/* ---------- Botões ---------- */
.tl-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 60px; padding: 12px 18px;
    border: 0; border-radius: 12px;
    font-size: 20px; font-weight: 700; text-decoration: none; cursor: pointer;
    font-family: inherit;
}
.tl-btn + .tl-btn { margin-top: 12px; }
.tl-btn-principal { background: var(--tl-azul); color: #fff; }
.tl-btn-principal:hover { background: var(--tl-azul-escuro); color: #fff; }
.tl-btn-laranja { background: var(--tl-laranja); color: #fff; }
.tl-btn-verde { background: var(--tl-verde); color: #fff; }
.tl-btn-claro { background: #fff; color: var(--tl-azul-escuro); border: 2px solid var(--tl-azul); }
.tl-btn-perigo { background: #fff; color: var(--tl-vermelho); border: 2px solid var(--tl-vermelho); }
.tl-btn[disabled], .tl-btn.enviando { opacity: .6; pointer-events: none; }
.tl-btn-pequeno { min-height: 48px; font-size: 17px; width: auto; display: inline-flex; padding: 8px 16px; }
.tl-acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tl-acoes-linha .tl-btn { flex: 1 1 140px; margin: 0; }

/* ---------- Avisos ---------- */
.tl-aviso {
    border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
    font-size: 18px; display: flex; gap: 12px; align-items: flex-start;
}
.tl-aviso i { font-size: 24px; line-height: 1.2; }
.tl-aviso-ok { background: #e6f4ea; color: #0d652d; }
.tl-aviso-erro { background: #fce8e6; color: #a50e0e; }
.tl-aviso-info { background: #e8f0fe; color: #174ea6; }
.tl-aviso-atencao { background: #fef7e0; color: #7a4f01; }

/* Lista de vantagens na página de cadastro */
.tl-vantagens { list-style: none; padding: 0; margin: 0 0 6px; }
.tl-vantagens li { display: flex; gap: 12px; margin-bottom: 12px; }
.tl-vantagens i { color: var(--tl-verde); font-size: 26px; line-height: 1.1; }
.tl-vagas {
    background: #fff4e0; border: 2px solid var(--tl-laranja); color: #8a4b00;
    border-radius: 12px; padding: 12px 14px; font-weight: 700; text-align: center; margin-bottom: 18px;
}

/* ---------- Meus imóveis ---------- */
.tl-imovel { padding: 0; overflow: hidden; }
.tl-imovel-foto { width: 100%; height: 190px; object-fit: cover; display: block; background: #e9ecef; }
.tl-imovel-corpo { padding: 16px 18px 18px; }
.tl-imovel h3 { font-size: 21px; margin: 8px 0 2px; }
.tl-imovel .tl-local { color: var(--tl-cinza); font-size: 16px; margin: 0 0 10px; }
.tl-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 16px; font-weight: 700; padding: 5px 12px; border-radius: 20px;
}
.tl-status-rascunho { background: #eceff1; color: #455a64; }
.tl-status-aguardando { background: #fff3cd; color: #7a4f01; }
.tl-status-visita { background: #e3f2fd; color: #0d47a1; }
.tl-status-publicado { background: #e6f4ea; color: #0d652d; }
.tl-status-recusado { background: #fce8e6; color: #a50e0e; }
.tl-status-pausado { background: #eceff1; color: #455a64; }
.tl-explica { margin: 8px 0 0; font-size: 17px; }

/* ---------- Fotos ---------- */
.tl-upload {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 3px dashed var(--tl-azul); border-radius: 14px; background: #f3f9ff;
    padding: 26px 16px; text-align: center; cursor: pointer; color: var(--tl-azul-escuro);
    font-weight: 700; font-size: 20px;
}
.tl-upload i { font-size: 42px; }
.tl-upload small { font-weight: normal; color: var(--tl-cinza); font-size: 16px; }
.tl-upload input { display: none; }
.tl-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.tl-foto { position: relative; border-radius: 10px; overflow: hidden; background: #e9ecef; aspect-ratio: 4 / 3; }
.tl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-foto button {
    position: absolute; right: 6px; top: 6px;
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .95); color: var(--tl-vermelho); font-size: 22px; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.tl-foto .tl-foto-capa, .tl-foto .tl-foto-pendente {
    position: absolute; left: 6px; bottom: 6px; font-size: 14px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px; color: #fff;
}
.tl-foto .tl-foto-capa { background: var(--tl-azul); }
.tl-foto .tl-foto-pendente { background: var(--tl-laranja); }
.tl-foto.carregando::after {
    content: attr(data-progresso); position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .75); font-weight: 700; font-size: 20px;
}
.tl-contagem-fotos { font-weight: 700; margin-top: 14px; font-size: 18px; }

/* ---------- Plano / resumo ---------- */
.tl-plano {
    display: block; border: 2px solid var(--tl-borda); border-radius: 14px;
    padding: 16px; margin-bottom: 12px; background: #fff; cursor: pointer;
}
.tl-plano input { width: 26px; height: 26px; accent-color: var(--tl-azul); vertical-align: middle; margin-right: 8px; }
.tl-plano:has(input:checked) { border-color: var(--tl-azul); background: #e8f3fe; }
.tl-plano strong { font-size: 20px; }
.tl-plano .tl-preco { float: right; font-weight: 800; color: var(--tl-verde); font-size: 20px; }
.tl-resumo dt { color: var(--tl-cinza); font-size: 16px; font-weight: 600; }
.tl-resumo dd { margin: 0 0 12px; font-size: 18px; }

.tl-rodape { text-align: center; color: var(--tl-cinza); font-size: 15px; padding: 10px 16px 30px; }
.tl-rodape a { color: var(--tl-cinza); }

.tl-centro { text-align: center; }
.tl-mt { margin-top: 18px; }
.tl-oculto { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 600px) {
    .tl-pagina { padding-top: 32px; }
    .tl-pagina h1 { font-size: 32px; }
    .tl-fotos { grid-template-columns: repeat(3, 1fr); }
    .tl-opcoes { grid-template-columns: repeat(3, 1fr); }
}