/* =========================================================
   VARIÁVEIS GERAIS DO TEMA
   ========================================================= */

:root {
    --cor-texto: #222222;
    --cor-titulo: #25706d;

    --cor-borda-padrao: #dddddd;
    --cor-borda-suave: #cbd5e1;

    --cor-fundo-branco: #ffffff;
    --cor-fundo-suave: #f8fafc;
    --cor-fundo-codigo: #e5e7eb;

    --cor-azul: #2563eb;
    --cor-azul-claro: #eff6ff;
    --cor-azul-texto: #1d4ed8;

    --cor-verde: #25706d;
    --cor-verde-sucesso-bg: #ecfdf5;
    --cor-verde-sucesso-texto: #166534;

    --cor-vermelho-bg: #fef2f2;
    --cor-vermelho-texto: #991b1b;
    --cor-vermelho-botao-bg: #fee2e2;

    --cor-bege: #94692c;
    --cor-bege-texto: #ffffff;

    --sombra-box: 0 4px 14px rgba(0, 0, 0, 0.08);

    --fonte-padrao: Arial, sans-serif;

    --raio-box: 12px;
    --raio-campo: 8px;
    --raio-botao: 8px;
    --raio-pequeno: 6px;

    --padding-box: 16px;
    --padding-campo: 10px;
    --padding-botao-v: 10px;
    --padding-botao-h: 16px;
}

/* =========================================================
   ESTILOS GERAIS DA PÁGINA
   ========================================================= */

body {
    font-family: var(--fonte-padrao);
    font-size: 10pt;
    margin: 20px;
    color: var(--cor-texto);
    background-color: var(--cor-fundo-branco);
}

.pagina {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.conteudo {
    margin-top: 10px;
}

.box {
    max-width: 760px;
    margin: 20px auto;
    padding: var(--padding-box);
    background: var(--cor-fundo-branco);
    border-radius: var(--raio-box);
    box-shadow: var(--sombra-box);
    box-sizing: border-box;
}

.hidden {
    display: none;
}

/* =========================================================
   TIPOGRAFIA GERAL
   ========================================================= */

p {
    margin: 0 0 10px 0;
}

.descricao {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 14px;
}

.observacao {
    margin-top: 6px;
}

.verde-padrao,
.texto-verde,
.rodape-verde {
    color: var(--cor-verde);
    font-weight: bold;
}

/* =========================================================
   HIERARQUIA PADRONIZADA DE TÍTULOS
   ========================================================= */

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fonte-padrao);
    color: var(--cor-titulo);
}

h1 {
    font-size: 28px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.2;
}

h2 {
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.25;
}

h3 {
    font-size: 17px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
}

h4 {
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
    text-decoration: none;
    margin-top: 12px;
    margin-bottom: 8px;
    line-height: 1.3;
}

h5 {
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* =========================================================
   LINKS
   ========================================================= */

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

/* =========================================================
   TABELAS E LISTAS
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

td,
th {
    border: 1px solid var(--cor-borda-padrao);
    padding: 10px;
    vertical-align: top;
}

ul {
    margin: 0;
    padding-left: 18px;
}

li {
    margin-bottom: 6px;
}

/* =========================================================
   CAMPOS DE FORMULÁRIO
   ========================================================= */

label {
    display: block;
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="file"],
select,
textarea {
    box-sizing: border-box;
    font-family: var(--fonte-padrao);
}

/* =========================================================
   CAIXAS INFORMATIVAS E STATUS
   ========================================================= */

.info {
    font-size: 14px;
    background: var(--cor-fundo-suave);
    border-left: 4px solid var(--cor-azul);
    padding: 10px 12px;
    margin: 12px 0 16px;
    line-height: 1.5;
}

.info code {
    background: var(--cor-fundo-codigo);
    padding: 1px 5px;
    border-radius: 4px;
}

.status {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--raio-campo);
    font-size: 14px;
    line-height: 1.45;
}

.sucesso {
    background: var(--cor-verde-sucesso-bg);
    color: var(--cor-verde-sucesso-texto);
}

.erro {
    background: var(--cor-vermelho-bg);
    color: var(--cor-vermelho-texto);
}

/* =========================================================
   ÁREA DE ARRASTAR E SOLTAR ARQUIVOS
   ========================================================= */

.drop-area {
    width: 100%;
    margin-top: 8px;
    padding: 36px;
    border: 2px dashed #94a3b8;
    border-radius: 10px;
    background: var(--cor-fundo-suave);
    text-align: center;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    box-sizing: border-box;
}

.drop-area.dragover {
    background: var(--cor-azul-claro);
    border-color: var(--cor-azul);
    color: var(--cor-azul-texto);
}

/* =========================================================
   BOTÕES - BASE PADRONIZADA
   ========================================================= */

button,
.botao-verde,
.botao-azul,
.botao-bege,
.botao-voltar,
.botao-rodape-voltar,
.botao-secundario {
    display: inline-block;
    padding: var(--padding-botao-v) var(--padding-botao-h);
    border: none;
    border-radius: var(--raio-botao);
    font-size: 14px;
    font-family: var(--fonte-padrao);
    font-weight: normal;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
}

/* =========================================================
   BOTÕES - HIERARQUIA VISUAL
   VERDE > AZUL > BEGE
   ========================================================= */

.botao-verde,
.botao-voltar,
.botao-rodape-voltar {
    background: var(--cor-verde);
    color: #ffffff;
}

.botao-verde:hover,
.botao-voltar:hover,
.botao-rodape-voltar:hover {
    opacity: 0.95;
    text-decoration: none;
    color: #ffffff;
}

.botao-azul,
button[type="submit"] {
    background: var(--cor-azul);
    color: #ffffff;
    margin-top: 12px;
}

.botao-azul:hover,
button[type="submit"]:hover {
    opacity: 0.95;
    text-decoration: none;
    color: #ffffff;
}

.botao-bege,
.botao-secundario {
    background: var(--cor-bege);
    color: var(--cor-bege-texto);
}

.botao-bege:hover,
.botao-secundario:hover {
    opacity: 0.95;
    text-decoration: none;
}

/* =========================================================
   BLOCOS DE AÇÕES
   ========================================================= */

.acoes {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================================================
   LISTA DE ARQUIVOS E REMOÇÃO
   ========================================================= */

.lista-arquivos {
    margin-top: 12px;
    font-size: 14px;
    background: var(--cor-fundo-suave);
    border-radius: var(--raio-campo);
    padding: 10px 12px;
    display: none;
}

.item-arquivo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cor-fundo-codigo);
}

.item-arquivo:last-child {
    border-bottom: none;
}

.nome-arquivo {
    word-break: break-word;
    line-height: 1.35;
}

.btn-remover {
    background: var(--cor-vermelho-botao-bg);
    color: var(--cor-vermelho-texto);
    border: none;
    border-radius: var(--raio-pequeno);
    padding: 6px 10px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--fonte-padrao);
}

/* =========================================================
   PREVIEW DE IMAGEM COLADA
   ========================================================= */

.preview-colada {
    margin-top: 12px;
    font-size: 14px;
    display: none;
    background: var(--cor-fundo-suave);
    border-radius: var(--raio-campo);
    padding: 10px 12px;
}

.preview-colada img {
    max-width: 100%;
    max-height: 180px;
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-campo);
    display: block;
    margin-top: 8px;
}

.linha-preview {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

/* =========================================================
   BARRA DE PROGRESSO
   ========================================================= */

.progresso-box {
    margin-top: 12px;
    display: none;
}

.progresso-label {
    font-size: 13px;
    margin-bottom: 6px;
    color: #334155;
}

.progresso-outer {
    width: 100%;
    height: 14px;
    background: var(--cor-fundo-codigo);
    border-radius: 999px;
    overflow: hidden;
}

.progresso-barra {
    width: 0%;
    height: 100%;
    background: var(--cor-azul);
    transition: width 0.2s ease;
}

.progresso-texto {
    margin-top: 6px;
    font-size: 13px;
    color: #475569;
}

/* =========================================================
   CABEÇALHO COMUM
   ========================================================= */

.topo-site {
    color: var(--cor-texto);
}

.selo-ssl {
    margin-bottom: 12px;
}

.intro {
    margin-bottom: 18px;
}

.intro p {
    margin: 0 0 10px 0;
    line-height: 1.4;
}

/* =========================================================
   TABELA ESPECÍFICA DO CABEÇALHO
   ========================================================= */

.tabela-topo {
    width: auto;
    border-collapse: collapse;
    border: none;
    table-layout: auto;
    margin: 0 0 6px 0;
}

.tabela-topo,
.tabela-topo tr,
.tabela-topo td,
.tabela-topo th {
    border: none;
}

.tabela-topo td,
.tabela-topo th {
    padding: 0 8px 0 0;
    vertical-align: middle;
}

.tabela-topo td:last-child,
.tabela-topo th:last-child {
    padding-right: 0;
}

/* =========================================================
   RODAPÉ COMUM
   ========================================================= */

.rodape-site {
    margin-top: 30px;
    padding-top: 12px;
    border-top: 1px solid var(--cor-borda-padrao);
    font-size: 9pt;
    color: var(--cor-texto);
    line-height: 1.5;
}

.rodape-site a {
    text-decoration: none;
}

.rodape-site a:hover {
    text-decoration: underline;
}

.rodape-site .info {
    color: var(--cor-texto);
}

.rodape-voltar {
    margin: 22px 0 0 0;
}

/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _INDEX.PHP
   ========================================================= */

.tabela-index {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.tabela-index td,
.tabela-index th {
    border: none;
    padding: 10px;
    vertical-align: top;
}

.subtitulo-index {
    margin-top: 12px;
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .tabela-index {
        min-width: 900px;
    }

    .conteudo {
        overflow-x: auto;
    }
}

/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _EVERNOTE.PHP
   ========================================================= */

.box-evernote {
    max-width: 760px;
}

.box-evernote input[type="text"],
.box-evernote textarea,
.box-evernote input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: var(--padding-campo);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-pequeno);
    box-sizing: border-box;
    font-size: 14px;
}

.box-evernote textarea {
    min-height: 180px;
    resize: vertical;
}

/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _EMAIL.PHP
   ========================================================= */

.box-email {
    max-width: 760px;
}

.box-email .descricao {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 14px;
}

.box-email .info {
    line-height: 1.45;
}

.box-email .linha {
    margin-top: 8px;
}

.box-email label {
    display: block;
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: bold;
}

.box-email input[type="text"],
.box-email input[type="email"],
.box-email select,
.box-email textarea {
    width: 100%;
    padding: var(--padding-campo);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-campo);
    box-sizing: border-box;
    font-size: 14px;
    background: var(--cor-fundo-branco);
    color: #1f2937;
}

.box-email textarea {
    height: 110px;
    resize: vertical;
}

/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _EVENTO.PHP
   ========================================================= */

.box-evento-compacto select,
.box-evento-compacto input[type="text"],
.box-evento-compacto input[type="email"],
.box-evento-compacto input[type="date"],
.box-evento-compacto input[type="time"],
.box-evento-compacto textarea {
    padding: 5px 7px;
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-campo);
    box-sizing: border-box;
    font-size: 14px;
    background: var(--cor-fundo-branco);
    color: #1f2937;
    margin: 0;
}

.box-evento-compacto select {
    width: 100%;
}

.box-evento-compacto .bloco-outro-email {
    margin-top: 4px;
}

.box-evento-compacto .bloco-outro-email input[type="email"] {
    width: 100%;
}

.box-evento .convidados-bloco {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.box-evento .convidado-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.box-evento .convidado-indice {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-weight: 600;
}

.box-evento .campo-flex-datahora {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.box-evento .campo-data-mini {
    width: 170px;
    max-width: 100%;
}

.box-evento .campo-hora-mini {
    width: 95px;
    max-width: 100%;
}

.box-evento .campo-largo-evento {
    width: min(100%, 680px);
    max-width: 100%;
}

.box-evento .textarea-evento {
    min-height: 120px;
    resize: vertical;
}

.box-evento input[type="email"] {
    width: min(100%, 680px);
    max-width: 100%;
}

.box-evento #outro_email_organizador {
    width: min(100%, 680px);
    max-width: 100%;
}

.box-evento #nome_evento,
.box-evento #local_evento,
.box-evento #mensagem {
    max-width: 100%;
}

@media (max-width: 700px) {
    .box-evento .convidado-linha {
        align-items: flex-start;
    }

    .box-evento .convidado-linha input {
        flex: 1 1 auto;
    }

    .box-evento .campo-data-mini,
    .box-evento .campo-hora-mini {
        width: auto;
        min-width: 0;
    }
}

/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _DOWNLOAD_ABERTO.PHP
   ========================================================= */

.box-download-aberto {
    max-width: calc(100vw - 8cm);
}

.box-download-aberto table {
    width: 100%;
    table-layout: auto;
}

.box-download-aberto .col-nome {
    width: 100%;
}

.box-download-aberto .col-tipo,
.box-download-aberto .col-tamanho,
.box-download-aberto .col-data {
    width: 1%;
    white-space: nowrap;
}

.box-download-aberto td a {
    word-break: break-word;
}
/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _EMAIL.PHP
   ========================================================= */

.box-email .nome-imagem-colada-exibido {
    margin-top: 6px;
}

/* =========================================================
   AJUSTES ESPECÍFICOS DA PÁGINA _DROPBOX.PHP
   ========================================================= */

.box-dropbox {
    max-width: 760px;
}

.nome-imagem-colada-exibido {
    margin-top: 6px;
}