/* =====================================================
   CONFIGURAÇÕES GERAIS
===================================================== */

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(
        135deg,
        #f4f8fc 0%,
        #eef5fb 50%,
        #f7fafc 100%
    );
    color: #263238;
    min-height: 100vh;
    padding: 30px 15px;
}


/* =====================================================
   CONTAINER PRINCIPAL
===================================================== */

.container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}


/* =====================================================
   CABEÇALHO PRINCIPAL
===================================================== */

header {
    text-align: center;
    margin-bottom: 30px;
}

header h1 {
    font-size: 30px;
    margin-bottom: 8px;
    color: #173b57;
    font-weight: 700;
}

.subtitulo {
    color: #607786;
    font-size: 16px;
    line-height: 1.5;
}


/* =====================================================
   FORMULÁRIO E RESULTADO
===================================================== */

.formulario,
.resultado {
    background: #ffffff;
    border: 1px solid #e3edf4;
    border-radius: 14px;
    padding: 28px;
    box-shadow:
        0 6px 20px rgba(33, 78, 112, 0.08),
        0 2px 6px rgba(33, 78, 112, 0.04);
}


/* =====================================================
   CABEÇALHO DO FORMULÁRIO
===================================================== */

.cabecalho-formulario {
    margin-bottom: 24px;
    padding: 15px 18px;
    background: linear-gradient(
        90deg,
        #edf6ff,
        #f5fbff
    );
    border-left: 4px solid #1976d2;
    border-radius: 9px;
}

.cabecalho-formulario h2 {
    font-size: 21px;
    line-height: 1.2;
    margin: 0 0 5px 0;
    font-weight: 700;
    color: #145a96;
}

.cabecalho-formulario p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #587181;
}


/* =====================================================
   CAMPOS DO FORMULÁRIO
===================================================== */

.campo {
    margin-bottom: 20px;
}

.campo label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
    color: #29495e;
}

.campo input,
.campo textarea,
.campo select,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd9e3;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background: #ffffff;
    color: #263238;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.campo input:hover,
.campo textarea:hover,
.campo select:hover,
select:hover {
    border-color: #9eb9cb;
}

.campo textarea {
    min-height: 85px;
    resize: vertical;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus,
select:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
    background: #ffffff;
}


/* =====================================================
   TEXTO-BASE E TÍTULO
===================================================== */

.linha-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.linha-campos .campo {
    margin-bottom: 20px;
}


/* =====================================================
   QUANTIDADE DE TÓPICOS
===================================================== */

.campo-quantidade {
    margin-bottom: 24px;
}


/* =====================================================
   CABEÇALHO DAS PREMISSAS
===================================================== */

.secao-premissas {
    margin-top: 4px;
    margin-bottom: 20px;
}

.titulo-secao {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 2px solid #e5f0f8;
}

.titulo-secao span {
    font-size: 17px;
    font-weight: 700;
    color: #1565c0;
}

.titulo-secao small {
    font-size: 13px;
    font-weight: normal;
    color: #708896;
}


/* =====================================================
   PREMISSAS
===================================================== */

#premissasContainer {
    margin-top: 0;
}

.premissa {
    background: linear-gradient(
        90deg,
        #f2f8fe 0%,
        #fbfdff 100%
    );

    border: 1px solid #d5e6f3;
    border-left: 4px solid #1976d2;

    border-radius: 9px;

    padding: 14px 16px 16px;
    margin-bottom: 12px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.premissa:hover {
    border-color: #a9cce5;
    border-left-color: #0d6efd;

    box-shadow:
        0 4px 12px rgba(25, 118, 210, 0.07);
}

.premissa label {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    color: #174f78;
}

.premissa textarea {
    width: 100%;
    min-height: 68px;

    padding: 12px 13px;

    border: 1px solid #cadbe7;
    border-radius: 7px;

    font-size: 15px;
    line-height: 1.5;

    font-family: inherit;
    resize: vertical;

    background: #ffffff;
    color: #263238;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.premissa textarea:focus {
    outline: none;

    border-color: #1976d2;

    box-shadow:
        0 0 0 3px rgba(25, 118, 210, 0.12);
}


/* =====================================================
   CRIADOR
===================================================== */

.campo-criador {
    margin-top: 22px;
    margin-bottom: 20px;

    padding: 16px;

    background: #f5faf9;

    border: 1px solid #d7ebe7;
    border-left: 4px solid #00897b;

    border-radius: 9px;
}

.campo-criador label {
    color: #176b63;
}

.campo-criador input:focus {
    border-color: #00897b;

    box-shadow:
        0 0 0 3px rgba(0, 137, 123, 0.11);
}


/* =====================================================
   BOTÕES
===================================================== */

button {
    width: 100%;

    border: none;
    border-radius: 8px;

    padding: 14px;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    margin-top: 10px;

    font-family: inherit;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* =====================================================
   BOTÃO PRINCIPAL
===================================================== */

.botao-principal {
    background: linear-gradient(
        135deg,
        #1976d2,
        #0d5fbd
    );

    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(25, 118, 210, 0.18);
}

.botao-principal:hover {
    background: linear-gradient(
        135deg,
        #1565c0,
        #0a55aa
    );

    box-shadow:
        0 6px 14px rgba(25, 118, 210, 0.25);
}


/* =====================================================
   BOTÃO SECUNDÁRIO
===================================================== */

.botao-secundario {
    background: #e8f3fd;
    color: #1565c0;

    border: 1px solid #b9d8f1;
}

.botao-secundario:hover {
    background: #d8ecfc;
    border-color: #90c2e8;
}


/* =====================================================
   ÁREA DOS BOTÕES DO FORMULÁRIO
===================================================== */

.acoes-formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.acoes-formulario button {
    margin-top: 0;
}


/* =====================================================
   RESULTADO
===================================================== */

.resultado {
    margin-top: 25px;
}

.cabecalho-resultado {
    padding: 14px 16px 18px;

    margin-bottom: 22px;

    background: linear-gradient(
        90deg,
        #eef7ff,
        #f8fbfd
    );

    border-left: 4px solid #1976d2;
    border-radius: 8px;
}

.cabecalho-resultado h2 {
    margin: 5px 0 0;

    color: #174f78;

    font-size: 24px;
}

.resultado-etiqueta {
    display: inline-block;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    color: #00897b;
}

#conteudoResultado {
    line-height: 1.7;
}

.conteudo-resultado {
    color: #263238;
}


/* =====================================================
   TEXTO DO ESBOÇO
===================================================== */

.texto-esboco {
    white-space: normal;

    line-height: 1.65;

    font-size: 16px;

    color: #263238;
}

.texto-esboco h2 {
    font-size: 25px;

    text-align: center;

    margin: 5px 0 20px;

    color: #174f78;
}

.texto-esboco h3 {
    font-size: 19px;

    margin-top: 28px;
    margin-bottom: 8px;

    color: #1565c0;
}

.texto-esboco h4 {
    font-size: 17px;

    margin-top: 18px;
    margin-bottom: 5px;

    color: #176b63;
}

.texto-esboco strong {
    color: #174f78;
}


/* =====================================================
   IDENTIFICAÇÃO FINAL
===================================================== */

.identificacao-final {
    margin-top: 28px;

    padding: 18px;

    border-top: 2px solid #dcecf6;

    background: #f7fbfe;

    border-radius: 8px;

    line-height: 1.6;
}

.identificacao-final strong {
    color: #176b63;
}


/* =====================================================
   EXPORTAÇÃO PARA WORD
===================================================== */

.acoes-resultado {
    margin-top: 25px;
}

/*
   O botão de exportação recebe uma cor diferente
   para facilitar a identificação da ação.
*/

#btnExportarWord {
    margin-top: 0;

    background: linear-gradient(
        135deg,
        #009688,
        #00796b
    );

    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(0, 137, 123, 0.18);
}

#btnExportarWord:hover {
    background: linear-gradient(
        135deg,
        #00897b,
        #00695c
    );

    box-shadow:
        0 6px 14px rgba(0, 137, 123, 0.25);
}


/* =====================================================
   CARREGAMENTO
===================================================== */

.carregando {
    text-align: center;

    padding: 30px 10px;

    color: #1565c0;

    font-weight: 600;
}


/* =====================================================
   ERROS
===================================================== */

.erro {
    background: #fff4f4;

    border: 1px solid #efb8b8;
    border-left: 4px solid #d64545;

    color: #8a2e2e;

    border-radius: 8px;

    padding: 18px;
}


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

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

.rodape {
    text-align: center;
    color: #607d8b;
    font-size: 13px;
    line-height: 1.6;
    padding: 28px 10px 10px;
}

.rodape p {
    margin: 0;
}

.rodape p + p {
    margin-top: 2px;
}

/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 700px) {

    body {
        padding: 18px 10px;
    }

    .formulario,
    .resultado {
        padding: 20px 16px;
    }

    header {
        margin-bottom: 22px;
    }

    header h1 {
        font-size: 24px;
    }

    .subtitulo {
        font-size: 14px;
    }

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

    .titulo-secao {
        display: block;
    }

    .titulo-secao small {
        display: block;
        margin-top: 4px;
    }

    .acoes-formulario {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .premissa {
        padding: 13px;
    }

    .cabecalho-formulario {
        padding: 14px;
    }

    .cabecalho-formulario h2 {
        font-size: 20px;
    }

    .cabecalho-resultado h2 {
        font-size: 21px;
    }

    .campo-criador {
        padding: 14px;
    }
}

/* =====================================================
   RESPONSIVIDADE COMPLETA PARA CELULAR
   Adicionar no FINAL do style.css
===================================================== */

/* Impede estouro lateral em qualquer tela */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
}


/* =====================================================
   TABLETS E CELULARES
===================================================== */

@media (max-width: 700px) {

    body {
        padding: 12px 8px;
        background: linear-gradient(
            180deg,
            #f1f7fc 0%,
            #f7fafc 100%
        );
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }


    /* CABEÇALHO */

    header {
        margin-bottom: 18px;
        padding: 4px 6px;
    }

    header h1 {
        font-size: 23px;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .subtitulo {
        font-size: 14px;
        line-height: 1.4;
        padding: 0 8px;
    }


    /* CARTÕES PRINCIPAIS */

    .formulario,
    .resultado {
        width: 100%;
        padding: 18px 14px;
        border-radius: 12px;
        box-shadow:
            0 4px 14px rgba(33, 78, 112, 0.08);
    }


    /* PREPARE SEU ESBOÇO */

    .cabecalho-formulario {
        padding: 13px 14px;
        margin-bottom: 20px;
        border-left-width: 3px;
    }

    .cabecalho-formulario h2 {
        font-size: 19px;
        line-height: 1.25;
        margin-bottom: 5px;
    }

    .cabecalho-formulario p {
        font-size: 14px;
        line-height: 1.4;
    }


    /* TEXTO-BASE E TÍTULO
       Um abaixo do outro no celular */

    .linha-campos {
        display: block;
    }

    .linha-campos .campo {
        width: 100%;
    }


    /* CAMPOS */

    .campo {
        width: 100%;
        margin-bottom: 17px;
    }

    .campo label {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .campo input,
    .campo textarea,
    .campo select,
    select {
        width: 100%;
        max-width: 100%;
        min-height: 48px;

        padding: 12px;

        font-size: 16px;

        border-radius: 8px;
    }


    /* Mantém 16px para evitar zoom automático
       em alguns navegadores de celular */

    input,
    textarea,
    select,
    button {
        font-size: 16px;
    }


    /* QUANTIDADE */

    .campo-quantidade {
        margin-bottom: 21px;
    }


    /* CABEÇALHO DAS PREMISSAS */

    .titulo-secao {
        display: block;
        padding-bottom: 9px;
        margin-bottom: 12px;
    }

    .titulo-secao span {
        display: block;
        font-size: 16px;
    }

    .titulo-secao small {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.35;
    }


    /* PREMISSAS */

    #premissasContainer {
        width: 100%;
    }

    .premissa {
        width: 100%;

        padding: 12px;

        margin-bottom: 11px;

        border-radius: 8px;
        border-left-width: 4px;
    }

    .premissa label {
        font-size: 15px;
        margin-bottom: 7px;
    }

    .premissa textarea {
        width: 100%;
        max-width: 100%;

        min-height: 80px;

        padding: 11px;

        font-size: 16px;
        line-height: 1.45;

        border-radius: 7px;
    }


    /* CRIADOR */

    .campo-criador {
        width: 100%;

        margin-top: 18px;
        margin-bottom: 18px;

        padding: 13px;

        border-radius: 8px;
    }

    .campo-criador input {
        width: 100%;
    }


    /* BOTÕES
       Um abaixo do outro no celular */

    .acoes-formulario {
        display: flex;
        flex-direction: column;
        gap: 10px;

        width: 100%;
    }

    .acoes-formulario button {
        width: 100%;
        min-height: 50px;

        margin: 0;

        padding: 14px 12px;

        border-radius: 8px;

        font-size: 15px;
    }

    #btnGerar {
        order: 1;
    }

    #btnSugerir {
        order: 2;
    }


    /* RESULTADO */

    .resultado {
        margin-top: 18px;
    }

    .cabecalho-resultado {
        padding: 12px 13px;
        margin-bottom: 18px;
    }

    .cabecalho-resultado h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .resultado-etiqueta {
        font-size: 11px;
    }


    /* TEXTO DO SERMÃO */

    #conteudoResultado {
        width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .texto-esboco {
        width: 100%;

        font-size: 16px;
        line-height: 1.65;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .texto-esboco h2 {
        font-size: 21px;
        line-height: 1.3;

        margin: 5px 0 18px;
    }

    .texto-esboco h3 {
        font-size: 18px;
        line-height: 1.35;

        margin-top: 23px;
    }

    .texto-esboco h4 {
        font-size: 16px;
        line-height: 1.4;
    }


    /* CRIADOR E DATA NO RESULTADO */

    .identificacao-final {
        margin-top: 22px;
        padding: 14px;

        font-size: 14px;
        line-height: 1.6;
    }


    /* EXPORTAR PARA WORD */

    .acoes-resultado {
        width: 100%;
        margin-top: 18px;
    }

    #btnExportarWord {
        width: 100%;
        min-height: 50px;

        padding: 14px 10px;

        font-size: 15px;
    }


    /* RODAPÉ */

    .rodape {
        padding: 20px 5px 8px;

        font-size: 12px;
    }
}


/* =====================================================
   CELULARES PEQUENOS
===================================================== */

@media (max-width: 400px) {

    body {
        padding: 8px 6px;
    }

    header h1 {
        font-size: 21px;
    }

    .subtitulo {
        font-size: 13px;
    }

    .formulario,
    .resultado {
        padding: 15px 11px;
        border-radius: 10px;
    }

    .cabecalho-formulario {
        padding: 12px;
    }

    .cabecalho-formulario h2 {
        font-size: 18px;
    }

    .cabecalho-formulario p {
        font-size: 13px;
    }

    .campo label,
    .premissa label {
        font-size: 14px;
    }

    .premissa {
        padding: 10px;
    }

    .premissa textarea {
        min-height: 78px;
    }

    .texto-esboco {
        font-size: 15px;
        line-height: 1.6;
    }

    .texto-esboco h2 {
        font-size: 20px;
    }
}

/* Link para orientações importantes */
/* Link para orientações importantes */
.link-orientacoes {
    display: block;
    width: fit-content;
    margin: 7px auto 0;
    color: #f05a00;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.link-orientacoes:hover {
    color: #c94700;
    text-decoration: underline;
}