/* ============================================================
   Barreto Imóveis · Pesquisa de Satisfação
   ============================================================ */

:root {
    --vermelho: #AF2846;
    --vermelho-escuro: #8e203a;
    --vermelho-claro: #f7e8ec;
    --cinza: #74746E;
    --fundo: #EEEEEE;
    --texto: #0C0C0C;
    --branco: #FFFFFF;
    --borda: #d9d9d6;
    --verde: #2e7d32;
    --verde-claro: #e6f3e7;
    --amarelo-claro: #fdf3d7;
    --sombra: 0 2px 10px rgba(12, 12, 12, 0.08);
    --raio: 10px;
}

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

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }

a { color: var(--vermelho); }

/* ---------- Botões ---------- */

.btn {
    display: inline-block;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: var(--raio);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, opacity 0.15s;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primario { background: var(--vermelho); color: var(--branco); }
.btn-primario:not(:disabled):hover { background: var(--vermelho-escuro); }

.btn-secundario { background: var(--branco); color: var(--vermelho); border-color: var(--vermelho); }
.btn-secundario:hover { background: var(--vermelho-claro); }

.btn-bloco { display: block; width: 100%; }

.btn-mini {
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
    background: var(--branco);
    border: 1px solid var(--cinza);
    color: var(--texto);
    border-radius: 6px;
}
.btn-mini:hover { border-color: var(--vermelho); color: var(--vermelho); }

/* ---------- Formulários ---------- */

label { display: block; font-size: 0.85rem; font-weight: 600; margin: 0.9rem 0 0.3rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--texto);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--vermelho);
    outline-offset: -1px;
    border-color: var(--vermelho);
}

input:disabled { background: var(--fundo); color: var(--cinza); }

.form-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1.2rem;
    margin-bottom: 1.2rem;
}

.campo-erro { color: var(--vermelho); font-size: 0.85rem; margin: 0.4rem 0 0.8rem; }

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

.alerta {
    padding: 0.8rem 1rem;
    border-radius: var(--raio);
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}
.alerta-erro { background: var(--vermelho-claro); color: var(--vermelho-escuro); border: 1px solid var(--vermelho); }
.alerta-sucesso { background: var(--verde-claro); color: var(--verde); border: 1px solid var(--verde); }

.erro-ajax {
    background: var(--vermelho-claro);
    color: var(--vermelho-escuro);
    border-radius: var(--raio);
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    margin: 0.8rem 0;
}

.vazio { color: var(--cinza); font-size: 0.9rem; }

/* ============================================================
   Login
   ============================================================ */

.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-box {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 2.2rem 2rem;
    width: 100%;
    max-width: 400px;
}

.login-box h1 { font-size: 1.2rem; }
.login-texto { font-size: 0.9rem; color: var(--cinza); margin-bottom: 0.5rem; }
.login-box .btn { margin-top: 1.4rem; }

.login-marca { text-align: center; margin-bottom: 1.6rem; }

.marca-nome {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vermelho);
    letter-spacing: 0.02em;
}

/* Logotipo */
.logo-login { display: block; width: 180px; margin: 0 auto 0.5rem; }
.logo-pesquisa { display: block; width: 160px; margin: 0 auto; }
.logo-topo { display: block; height: 42px; width: auto; }

.topo .marca {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.topo .marca-sub {
    border-left: 1px solid var(--borda);
    padding-left: 0.9rem;
    font-size: 0.62rem;
    line-height: 1.4;
    max-width: 110px;
}

.marca-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--cinza);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ============================================================
   Painéis (atendente / gestor)
   ============================================================ */

.topo { background: var(--branco); box-shadow: var(--sombra); }

.topo-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.topo .marca-nome { font-size: 1.05rem; }
.topo .marca-sub { font-size: 0.65rem; }

.topo-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topo-nav a { font-size: 0.88rem; font-weight: 600; text-decoration: none; color: var(--texto); }
.topo-nav a:hover { color: var(--vermelho); }
.topo-user { font-size: 0.85rem; color: var(--cinza); }
.btn-sair { color: var(--vermelho) !important; }

.conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.6rem 1.2rem 3rem;
}

.rodape {
    text-align: center;
    font-size: 0.78rem;
    color: var(--cinza);
    padding: 1.2rem;
}

/* ---------- Cards de métricas ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.card {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.1rem 1.2rem;
}

.card-destaque { border-top: 4px solid var(--vermelho); }

.card-rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cinza);
}

.card-valor {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--vermelho);
    line-height: 1.2;
    margin: 0.2rem 0;
}

.card-sub { display: block; font-size: 0.78rem; color: var(--cinza); }

/* ---------- Blocos ---------- */

.bloco {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.4rem;
    margin-bottom: 1.6rem;
}

.bloco-alertas { border-left: 5px solid var(--vermelho); }

.colunas-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

@media (max-width: 900px) {
    .colunas-2 { grid-template-columns: 1fr; }
}

/* ---------- Filtros ---------- */

.filtros {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem 1.4rem 1.3rem;
    margin-bottom: 1.6rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtros .campo { min-width: 160px; }
.filtros label { margin-top: 0; }
.filtros-acoes { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- Tabelas ---------- */

.tabela-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }

th {
    text-align: left;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cinza);
    border-bottom: 2px solid var(--borda);
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
}

td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--fundo); vertical-align: middle; }

tbody tr:hover { background: #fafafa; }

.celula-comentario { max-width: 280px; }

.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.6rem;
    border-radius: 99px;
    white-space: nowrap;
}
.badge-pendente { background: var(--amarelo-claro); color: #8a6d1a; }
.badge-respondida { background: var(--verde-claro); color: var(--verde); }
.badge-expirada, .badge-inativo { background: var(--fundo); color: var(--cinza); }

.acoes { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.form-inline { display: inline-flex; gap: 0.4rem; align-items: center; }
.form-reset-senha input { width: 130px; font-size: 0.8rem; padding: 0.35rem 0.5rem; }

/* ---------- Link gerado ---------- */

.link-gerado {
    margin-top: 1.2rem;
    background: var(--verde-claro);
    border: 1px solid var(--verde);
    border-radius: var(--raio);
    padding: 1rem 1.2rem;
}

.link-gerado p { font-size: 0.88rem; margin-bottom: 0.6rem; color: var(--verde); font-weight: 600; }

.link-linha { display: flex; gap: 0.6rem; }
.link-linha input { flex: 1; font-size: 0.85rem; background: var(--branco); }

.btn-copiar.copiado { background: var(--verde); color: var(--branco); border-color: var(--verde); }

/* ---------- Gráfico ---------- */

.grafico-wrap { position: relative; height: 320px; }

/* ---------- Comentários ---------- */

.lista-comentarios { display: flex; flex-direction: column; gap: 1rem; max-height: 480px; overflow-y: auto; }

.comentario { border-left: 3px solid var(--vermelho); padding-left: 0.9rem; }
.comentario-texto { font-size: 0.92rem; font-style: italic; }
.comentario-meta { font-size: 0.75rem; color: var(--cinza); margin-top: 0.3rem; }

/* ============================================================
   Página pública da pesquisa (mobile-first)
   ============================================================ */

.pagina-pesquisa { min-height: 100vh; display: flex; flex-direction: column; }

.pesquisa-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 1.4rem 1rem 2rem;
    flex: 1;
}

.pesquisa-marca { text-align: center; margin-bottom: 1.2rem; }

.pesquisa-cartao {
    background: var(--branco);
    border-radius: 14px;
    box-shadow: var(--sombra);
    padding: 1.6rem 1.4rem;
}

.pesquisa-aviso { text-align: center; }
.pesquisa-aviso h1 { color: var(--vermelho); font-size: 1.25rem; }
.pesquisa-aviso p { font-size: 0.95rem; color: var(--cinza); }

.pesquisa-saudacao { font-size: 1.1rem; }
.pesquisa-intro { font-size: 0.88rem; color: var(--cinza); margin: 0.3rem 0 1.2rem; }

.pesquisa-rodape { text-align: center; font-size: 0.75rem; color: var(--cinza); margin-top: 1.4rem; }

/* Barra de progresso */

.progresso { margin-bottom: 1.6rem; }

.progresso-barra {
    height: 8px;
    background: var(--fundo);
    border-radius: 99px;
    overflow: hidden;
}

.progresso-preenchido {
    height: 100%;
    width: 50%;
    background: var(--vermelho);
    border-radius: 99px;
    transition: width 0.5s ease;
}

.progresso-texto {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cinza);
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Etapas e transições */

.etapa { animation: aparecer 0.4s ease; }

@keyframes aparecer {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.etapa.saindo { opacity: 0; transform: translateY(-12px); transition: opacity 0.3s, transform 0.3s; }

.etapa-titulo {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vermelho);
    margin-bottom: 0.4rem;
}

.pergunta { font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }

#etapa-2 .pergunta { margin-top: 1.4rem; }
#etapa-2 .pergunta:first-child { margin-top: 0; }

/* Botões de opção — área de toque mínima de 48px */

.opcoes { display: flex; flex-direction: column; gap: 0.6rem; }

.opcao {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 48px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 500;
    text-align: left;
    padding: 0.7rem 1rem;
    background: var(--branco);
    border: 2px solid var(--borda);
    border-radius: 12px;
    cursor: pointer;
    color: var(--texto);
    transition: border-color 0.15s, background 0.15s;
}

.opcao:hover { border-color: var(--cinza); }

.opcao.selecionada {
    border-color: var(--vermelho);
    background: var(--vermelho-claro);
    font-weight: 600;
}

.opcao:disabled { cursor: default; }

.opcao-emoji { font-size: 1.3rem; line-height: 1; }

#q4-comentario { margin-bottom: 1.4rem; resize: vertical; }

/* Agradecimento */

.agradecimento { text-align: center; padding: 1rem 0; }
.agradecimento-icone { font-size: 2.6rem; display: block; margin-bottom: 0.6rem; }
.agradecimento h1 { font-size: 1.3rem; }
.agradecimento p { font-size: 0.95rem; color: var(--cinza); }

/* ---------- Departamentos e edição de usuário ---------- */

.bloco-edicao { border-left: 5px solid var(--vermelho); }

.campo-checkbox { display: flex; align-items: flex-end; padding-bottom: 0.4rem; }
.campo-checkbox label { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9rem; cursor: pointer; }
.campo-checkbox input { width: auto; }

.form-departamento { margin-bottom: 1.2rem; }

.lista-departamentos { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.lista-departamentos .link-linha { align-items: center; }
.lista-departamentos input[type="text"] { flex: 1; }

.departamento-qtd { font-size: 0.78rem; color: var(--cinza); white-space: nowrap; }

/* Convite de avaliação no Google */

.google-cta {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--borda);
    text-align: center;
}

.google-cta p { font-size: 0.92rem; color: var(--texto); margin-bottom: 0.9rem; }

.btn-google {
    background: var(--vermelho);
    color: var(--branco);
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
}
.btn-google:hover { background: var(--vermelho-escuro); }

/* ---------- Detalhe da avaliação ---------- */

.detalhe-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.4rem;
    font-size: 0.92rem;
}

.detalhe-rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cinza);
    margin-bottom: 0.15rem;
}

.resposta-item { padding: 0.9rem 0; border-bottom: 1px solid var(--fundo); }
.resposta-item:last-of-type { border-bottom: none; }

.resposta-pergunta { font-size: 0.85rem; font-weight: 600; color: var(--cinza); margin-bottom: 0.3rem; }

.resposta-valor { font-size: 1.05rem; font-weight: 600; }

.resposta-nota {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cinza);
    background: var(--fundo);
    border-radius: 99px;
    padding: 0.15rem 0.6rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.resposta-negativa, .nota-negativa { color: var(--vermelho); }
.resposta-pendente { color: var(--cinza); font-weight: 400; font-style: italic; }
.resposta-comentario { font-weight: 400; font-style: italic; }

.resposta-google {
    margin-top: 1rem;
    font-size: 0.88rem;
    background: var(--verde-claro);
    color: var(--verde);
    border-radius: var(--raio);
    padding: 0.7rem 1rem;
}

/* ---------- Responsivo painéis ---------- */

@media (max-width: 600px) {
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros .campo { min-width: 0; }
    .conteudo { padding: 1.2rem 0.8rem 2.4rem; }
    .bloco { padding: 1.1rem; }
}