:root {
    --cor-primaria: #6C5CE7;
    --cor-primaria-escura: #4B3FCB;
    --cor-fundo: #f6f5fb;
    --cor-borda: #e0dcf2;
    --cor-texto: #221f33;
    --cor-texto-suave: #625f75;
    --cor-verde: #1f8a5f;
    --cor-vermelho: #b3403a;
    --cor-cinza: #8a8f8c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.topo {
    background: var(--cor-primaria-escura);
    color: white;
    padding: 26px 0;
}
.topo .container { display: flex; justify-content: space-between; align-items: center; }
.marca {
    display: flex;
    align-items: center;
    gap: 14px;
    color: white;
    text-decoration: none;
}
.marca-icone { width: 52px; height: auto; display: block; }
.marca-texto { font-size: 1.4rem; font-weight: 500; letter-spacing: 0.2px; line-height: 1.1; }
.marca-usuario { color: #e2defb; font-size: 0.85rem; margin: 0 16px; }
.link-sair { color: #e2defb; text-decoration: none; font-size: 0.9rem; margin-left: 14px; }
.link-sair:hover { text-decoration: underline; }

.ajuda-campo {
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    margin-top: 4px;
}

.instrucoes-checklist {
    background: #f0eefa;
    border-left: 3px solid var(--cor-primaria);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-line;
}

.tabela tr.linha-com-erro { background: #fdf2f1; }
.tabela tr.linha-com-erro td:first-child { border-left: 3px solid var(--cor-vermelho); padding-left: 9px; }

main.container { padding: 32px 20px 60px; }

.cabecalho-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.15rem; margin-top: 0; }
.subtitulo { color: var(--cor-texto-suave); margin: 0; }

.card {
    background: white;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.card-estreito { max-width: 420px; margin: 40px auto; }

label {
    display: block;
    margin: 16px 0 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"],
input[type="password"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
}
textarea { resize: vertical; }

.linha-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.botao {
    display: inline-block;
    background: var(--cor-primaria);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    margin-top: 20px;
}
.botao:hover { background: var(--cor-primaria-escura); }

.botao-pequeno { padding: 7px 12px; font-size: 0.85rem; margin-top: 0; }

.botoes-cabecalho { display: flex; gap: 10px; align-items: center; }
.botoes-cabecalho .botao,
.botoes-cabecalho .botao-perigo { margin-top: 0; }

.botao-perigo {
    display: inline-block;
    background: white;
    color: var(--cor-vermelho);
    border: 1px solid var(--cor-vermelho);
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}
.botao-perigo:hover { background: #f6e3e2; }

.form-linha {
    display: flex;
    gap: 6px;
    align-items: center;
}
.form-linha input { width: 130px; padding: 7px 10px; }

.opcao-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 4px;
    font-weight: 400;
    font-size: 0.9rem;
}
.opcao-checkbox input { margin: 0; }

.form-linha-compacta { display: inline; margin: 0; }
.botao-link {
    background: none;
    border: none;
    color: var(--cor-primaria);
    text-decoration: underline;
    font-size: 0.75rem;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
}
.botao-link:hover { color: var(--cor-primaria-escura); }

.tabela {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.tabela th, .tabela td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 0.92rem;
}
.tabela th { color: var(--cor-texto-suave); font-weight: 600; }

.tabela input[type="text"], .tabela select { padding: 6px 8px; }

/* --- responsivo: abaixo de 700px, a tabela vira uma lista de cartões
   empilhados, um campo embaixo do outro, com o rótulo da coluna visível
   ao lado de cada valor (em vez de cabeçalho + linha larga) --- */
@media (max-width: 700px) {
    .container { padding: 0 14px; }
    main.container { padding: 20px 14px 60px; }
    .card { padding: 16px; }

    .cabecalho-pagina { flex-direction: column; align-items: stretch; }
    .botoes-cabecalho { flex-direction: column; align-items: stretch; }
    .botoes-cabecalho .botao,
    .botoes-cabecalho .botao-perigo { text-align: center; }

    .linha-dupla { grid-template-columns: 1fr; gap: 0; }

    .tabela,
    .tabela thead,
    .tabela tbody,
    .tabela th,
    .tabela td,
    .tabela tr {
        display: block;
    }
    .tabela thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .tabela tr {
        background: white;
        border: 1px solid var(--cor-borda);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 14px;
    }
    .tabela tr.linha-com-erro {
        border: 1px solid var(--cor-vermelho);
    }
    .tabela tr.linha-com-erro td:first-child {
        border-left: none;
        padding-left: 0;
    }
    .tabela td {
        border-bottom: none;
        padding: 8px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .tabela td:not(:last-child) {
        border-bottom: 1px solid var(--cor-fundo);
    }
    .tabela td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--cor-texto-suave);
    }
    .tabela td.item-titulo {
        font-size: 1.05rem;
        font-weight: 700;
        padding-top: 0;
    }
    .tabela td.item-titulo::before {
        content: none;
    }
    .topo { padding: 16px 0; }
    .topo .container { flex-wrap: wrap; row-gap: 10px; }
    .marca-icone { width: 36px; }
    .marca-texto { font-size: 1.1rem; }
    .marca-usuario { margin: 0 8px; }
    .link-sair { margin-left: 8px; font-size: 0.85rem; }

    .form-linha { flex-wrap: wrap; }
    .form-linha input { width: auto; flex: 1 1 100px; }
}

.campo-link { font-size: 0.8rem; color: var(--cor-texto-suave); }

.etiqueta {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
}
.etiqueta-verde { background: #e1f0ea; color: var(--cor-verde); }
.etiqueta-vermelha { background: #f6e3e2; color: var(--cor-vermelho); }
.etiqueta-cinza { background: #eceeed; color: var(--cor-cinza); }

.ajuda {
    background: #f0eefa;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 20px;
    font-size: 0.88rem;
    color: var(--cor-texto-suave);
}
.ajuda-atencao {
    background: #faeeda;
    color: #854f0b;
}
.cabecalho-cartao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cabecalho-cartao h2 { margin: 0; }
.ajuda pre {
    background: white;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    padding: 10px;
    overflow-x: auto;
    font-size: 0.82rem;
}
.ajuda .atencao { color: var(--cor-vermelho); }

.mensagens { margin-bottom: 20px; }
.msg {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.msg-sucesso { background: #e1f0ea; color: var(--cor-verde); }
.msg-erro { background: #f6e3e2; color: var(--cor-vermelho); }

/* --- página inicial --- */
.hero-index {
    padding: 48px 0 20px;
    max-width: 720px;
}
.hero-titulo {
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 16px;
    font-weight: 700;
}
.hero-subtitulo {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--cor-texto-suave);
    margin: 0 0 28px;
}

.botao-cta {
    display: inline-block;
    background: var(--cor-primaria);
    color: white;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
}
.botao-cta:hover { background: var(--cor-primaria-escura); }
.botao-cta-claro { background: white; color: var(--cor-primaria-escura); }
.botao-cta-claro:hover { background: #f0eefa; }

.secao { padding: 36px 0; border-top: 1px solid var(--cor-borda); }
.secao-titulo { font-size: 1.4rem; margin: 0 0 14px; }
.secao-texto { font-size: 1rem; line-height: 1.65; color: var(--cor-texto-suave); max-width: 720px; }

.grid-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
.grid-duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.card-tipo {
    background: white;
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 20px;
}
.card-tipo h3 { font-size: 1rem; margin: 0 0 8px; }
.card-tipo p { font-size: 0.9rem; color: var(--cor-texto-suave); line-height: 1.5; margin: 0; }
.card-tipo-generico { background: #f0eefa; border-style: dashed; }

.icone-tipo {
    width: 44px;
    height: 44px;
    color: var(--cor-primaria);
    margin-bottom: 12px;
}
.icone-tipo svg { width: 100%; height: 100%; }

.cta-final {
    background: var(--cor-primaria-escura);
    color: white;
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
    margin: 20px 0 40px;
}
.cta-final h2 { font-size: 1.4rem; margin: 0 0 10px; }
.cta-final p { font-size: 1rem; opacity: 0.92; max-width: 480px; margin: 0 auto 22px; }

@media (max-width: 700px) {
    .hero-titulo { font-size: 1.5rem; }
    .hero-subtitulo { font-size: 0.95rem; }
    .grid-duas-colunas { grid-template-columns: 1fr; }
    .cta-final { padding: 28px 20px; }
}

.rodape {
    border-top: 1px solid var(--cor-borda);
    padding: 20px 0 40px;
    margin-top: 20px;
}
.link-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cor-texto-suave);
    font-size: 0.85rem;
    text-decoration: none;
}
.link-whatsapp:hover { color: var(--cor-verde); text-decoration: underline; }
.link-whatsapp::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--cor-verde);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.4 0-.5C10 9.4 9.5 8.1 9.3 7.6c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.2.3-1 1-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.3-.1-.2-.3-.2-.5-.3z"/><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4C8.7 21.5 10.3 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3C4.3 15 3.7 13.5 3.7 12c0-4.6 3.7-8.3 8.3-8.3s8.3 3.7 8.3 8.3-3.7 8.3-8.3 8.3z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.4 0-.5C10 9.4 9.5 8.1 9.3 7.6c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.2.3-1 1-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.3-.1-.2-.3-.2-.5-.3z"/><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4C8.7 21.5 10.3 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3C4.3 15 3.7 13.5 3.7 12c0-4.6 3.7-8.3 8.3-8.3s8.3 3.7 8.3 8.3-3.7 8.3-8.3 8.3z"/></svg>') no-repeat center / contain;
}