/* ==========================================================
   FALE CONOSCO
   Portal LCC / CENAPAD-MG / UFMG

   Identidade visual baseada na página Equipe.
   ========================================================== */


/* ==========================================================
   1. VARIÁVEIS E ESTRUTURA GERAL
   ========================================================== */

.lcc-contact-page {

    --lcc-contact-navy: #071d41;
    --lcc-contact-blue: #1351b4;
    --lcc-contact-blue-dark: #0c326f;

    --lcc-contact-background: #ffffff;
    --lcc-contact-surface: #ffffff;
    --lcc-contact-table-header: #f6f9ff;

    --lcc-contact-border: #d1dbe9;
    --lcc-contact-border-strong: #aab7c7;

    --lcc-contact-text: #1f2937;
    --lcc-contact-text-light: #48566b;

    --lcc-contact-success: #168821;
    --lcc-contact-success-soft: #eaf7ec;

    --lcc-contact-error: #b50909;
    --lcc-contact-error-soft: #fff0f0;

    min-width: 0;

    color: var(--lcc-contact-text);

    background: var(--lcc-contact-background);

}


.lcc-contact-page *,
.lcc-contact-page *::before,
.lcc-contact-page *::after {

    box-sizing: border-box;

}


/* Container institucional */

.lcc-contact-page .container-lg {

    width: 100%;
    max-width: 1140px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 16px;
    padding-left: 16px;

}


/* Âncora do formulário */

.lcc-contact-page #formulario {

    scroll-margin-top: 100px;

}


/* ==========================================================
   2. CABEÇALHO PRINCIPAL
   ========================================================== */

.lcc-contact-hero {

    padding: 28px 0 32px;

    background: #ffffff;

}


.lcc-contact-hero-content {

    max-width: 900px;

}


.lcc-contact-hero-content h1 {

    margin: 0;

    color: var(--lcc-contact-navy);

    font-size: 2rem;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -0.035em;

}


.lcc-contact-hero-content > p {

    max-width: 850px;

    margin: 18px 0 0;

    color: var(--lcc-contact-text-light);

    font-size: 1rem;
    font-weight: 400;

    line-height: 1.6;

}


/* ==========================================================
   3. SEÇÕES DA PÁGINA
   ========================================================== */

.lcc-contact-channels {

    padding: 0 0 42px;

    background: #ffffff;

}


.lcc-contact-form-section {

    padding: 0 0 72px;

    background: #ffffff;

}


/* Cabeçalho das seções */

.lcc-contact-section-heading {

    margin-bottom: 18px;

}


.lcc-contact-section-heading h2,
.lcc-contact-form-introduction > h2 {

    margin: 0;

    color: var(--lcc-contact-navy);

    font-size: 1.375rem;
    font-weight: 700;

    line-height: 1.35;
    letter-spacing: -0.025em;

}


/* Pequeno traço azul */

.lcc-contact-title-line {

    display: block;

    width: 28px;
    height: 2px;

    margin-top: 27px;

    background: var(--lcc-contact-blue);

}


/* Descrição da seção */

.lcc-contact-section-heading p,
.lcc-contact-form-introduction > p {

    max-width: 900px;

    margin: 18px 0 0;

    color: var(--lcc-contact-text-light);

    font-size: 1rem;
    font-weight: 400;

    line-height: 1.6;

}


/* ==========================================================
   4. TABELA DE CANAIS DE ATENDIMENTO
   ========================================================== */

.lcc-contact-table-wrapper {

    width: 100%;

    overflow-x: auto;

    background: #ffffff;

    border: 1px solid var(--lcc-contact-border);
    border-radius: 5px;

    -webkit-overflow-scrolling: touch;

}


.lcc-contact-table {

    width: 100%;

    margin: 0;

    border-collapse: collapse;
    border-spacing: 0;

    color: var(--lcc-contact-text);

    font-size: 0.9375rem;
    line-height: 1.45;

    background: #ffffff;

    table-layout: fixed;

}


/* Proporção das colunas */

.lcc-contact-table th:first-child,
.lcc-contact-table td:first-child {

    width: 39%;

}


.lcc-contact-table th:last-child,
.lcc-contact-table td:last-child {

    width: 61%;

}


/* Cabeçalho da tabela */

.lcc-contact-table thead {

    background: var(--lcc-contact-table-header);

}


.lcc-contact-table thead th {

    padding: 12px 13px;

    color: var(--lcc-contact-navy);

    font-size: 0.9375rem;
    font-weight: 700;

    text-align: left;
    vertical-align: middle;

    border-bottom: 1px solid var(--lcc-contact-border);

}


/* Divisão vertical */

.lcc-contact-table thead th + th,
.lcc-contact-table tbody th + td {

    border-left: 1px solid var(--lcc-contact-border);

}


/* Células */

.lcc-contact-table tbody th,
.lcc-contact-table tbody td {

    padding: 12px 13px;

    color: var(--lcc-contact-text);

    font-size: 0.9375rem;
    font-weight: 400;

    line-height: 1.45;

    text-align: left;
    vertical-align: middle;

    border-bottom: 1px solid var(--lcc-contact-border);

    overflow-wrap: anywhere;

}


/* Remove a última linha inferior */

.lcc-contact-table tbody tr:last-child th,
.lcc-contact-table tbody tr:last-child td {

    border-bottom: 0;

}


/* Links dentro da tabela */

.lcc-contact-table a {

    color: var(--lcc-contact-blue);

    font-weight: 500;

    text-decoration: underline;
    text-underline-offset: 3px;

    overflow-wrap: anywhere;

}


.lcc-contact-table a:hover {

    color: var(--lcc-contact-blue-dark);

    text-decoration-thickness: 2px;

}


/* Textos adicionais */

.lcc-contact-table td p {

    margin: 0;

    line-height: 1.5;

}


.lcc-contact-table-detail {

    margin-top: 5px !important;

    color: var(--lcc-contact-text-light);

    font-size: 0.875rem;

}


/* ==========================================================
   5. ESTRUTURA DO FORMULÁRIO
   ========================================================== */

.lcc-contact-form-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 26px;

    align-items: start;

}


/* Introdução */

.lcc-contact-form-introduction {

    position: static;

    min-width: 0;

}


/* ==========================================================
   6. ENCAMINHAMENTO AUTOMÁTICO
   ========================================================== */

.lcc-contact-routing {

    margin-top: 26px;
    padding-top: 22px;

    background: transparent;

    border-top: 1px solid var(--lcc-contact-border);

}


.lcc-contact-routing-header {

    display: flex;

    gap: 12px;

    align-items: flex-start;

}


/* Ícone */

.lcc-contact-routing-header > span {

    display: flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    color: var(--lcc-contact-blue);

    font-size: 1.125rem;

    background: transparent;

}


/* Título */

.lcc-contact-routing-header h3 {

    margin: 0;

    color: var(--lcc-contact-navy);

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.45;

}


/* Descrição */

.lcc-contact-routing-header p {

    margin: 4px 0 0;

    color: var(--lcc-contact-text-light);

    font-size: 0.9375rem;

    line-height: 1.5;

}


/* Lista de setores */

.lcc-contact-routing ul {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px 24px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;

}


.lcc-contact-routing li {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    min-width: 0;

    color: var(--lcc-contact-text);

    font-size: 0.9375rem;

    line-height: 1.5;

}


.lcc-contact-routing li i {

    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--lcc-contact-blue);

    font-size: 0.95rem;

}


/* ==========================================================
   7. AVISO DE PRIVACIDADE
   ========================================================== */

.lcc-contact-privacy-note {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin-top: 26px;

    padding: 14px 16px;

    color: var(--lcc-contact-text-light);

    background: var(--lcc-contact-table-header);

    border-left: 3px solid var(--lcc-contact-blue);

    border-radius: 0 4px 4px 0;

}


.lcc-contact-privacy-note i {

    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--lcc-contact-blue);

    font-size: 1.125rem;

}


.lcc-contact-privacy-note p {

    margin: 0;

    font-size: 0.875rem;

    line-height: 1.55;

}


/* ==========================================================
   8. ÁREA DO FORMULÁRIO
   ========================================================== */

.lcc-contact-form-card {

    min-width: 0;

    padding: 28px;

    background: var(--lcc-contact-surface);

    border: 1px solid var(--lcc-contact-border);

    border-radius: 5px;

    box-shadow: none;

}


/* Organização dos campos */

.lcc-contact-form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px 20px;

}


/* Campo individual */

.lcc-contact-field {

    min-width: 0;

}


/* Campo que ocupa a largura total */

.lcc-contact-field-full {

    grid-column: 1 / -1;

}


/* ==========================================================
   9. LABELS DOS CAMPOS
   ========================================================== */

.lcc-contact-field > label,
.lcc-contact-label-line label {

    display: block;

    margin: 0 0 8px;

    color: var(--lcc-contact-navy);

    font-size: 0.9375rem;
    font-weight: 600;

    line-height: 1.45;

}


/* Linha da label */

.lcc-contact-label-line {

    display: flex;

    gap: 12px;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

}


.lcc-contact-label-line label {

    margin: 0;

}


/* Contador e informação opcional */

.lcc-contact-label-line > span {

    color: var(--lcc-contact-text-light);

    font-size: 0.8125rem;
    font-weight: 400;

    line-height: 1.4;

    white-space: nowrap;

}


/* Indicador obrigatório */

.lcc-contact-required {

    color: var(--lcc-contact-error);

    font-weight: 700;

}


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

/*
   Mantém a classe original e também contempla
   os widgets renderizados diretamente pelo Django.
*/

.lcc-contact-input,
.lcc-contact-field input:not([type="checkbox"]),
.lcc-contact-field select,
.lcc-contact-field textarea {

    display: block;

    width: 100%;
    min-width: 0;
    min-height: 46px;

    padding: 10px 13px;

    color: var(--lcc-contact-text);

    font: inherit;

    font-size: 0.9375rem;
    line-height: 1.45;

    background: #ffffff;

    border: 1px solid var(--lcc-contact-border-strong);
    border-radius: 4px;

    outline: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;

}


/* Placeholder */

.lcc-contact-input::placeholder,
.lcc-contact-field input::placeholder,
.lcc-contact-field textarea::placeholder {

    color: #687588;

    opacity: 1;

}


/* Hover */

.lcc-contact-input:hover,
.lcc-contact-field input:not([type="checkbox"]):hover,
.lcc-contact-field select:hover,
.lcc-contact-field textarea:hover {

    border-color: var(--lcc-contact-blue);

}


/* Foco */

.lcc-contact-input:focus,
.lcc-contact-field input:not([type="checkbox"]):focus,
.lcc-contact-field select:focus,
.lcc-contact-field textarea:focus {

    border-color: var(--lcc-contact-blue);

    outline: 2px solid var(--lcc-contact-blue);
    outline-offset: 1px;

    box-shadow: none;

}


/* Textarea */

.lcc-contact-textarea,
.lcc-contact-field textarea {

    min-height: 160px;

    resize: vertical;

}


/* ==========================================================
   11. CAMPO SELECT
   ========================================================== */

.lcc-contact-select-wrapper {

    position: relative;

    width: 100%;

}


.lcc-contact-select,
.lcc-contact-select-wrapper select {

    width: 100%;

    padding-right: 42px;

    appearance: none;
    -webkit-appearance: none;

    background: #ffffff;

    cursor: pointer;

}


/* Seta do select */

.lcc-contact-select-wrapper > i {

    position: absolute;

    top: 23px;
    right: 15px;

    color: var(--lcc-contact-blue);

    font-size: 0.875rem;

    pointer-events: none;

    transform: translateY(-50%);

}


/* Texto de ajuda */

.lcc-contact-field-help {

    display: block;

    margin-top: 7px;

    color: var(--lcc-contact-text-light);

    font-size: 0.8125rem;

    line-height: 1.5;

}


/* ==========================================================
   12. CONSENTIMENTO
   ========================================================== */

.lcc-contact-consent-field {

    padding-top: 4px;

}


.lcc-contact-consent {

    display: flex !important;

    gap: 12px;

    align-items: flex-start;

    margin: 0 !important;

    color: var(--lcc-contact-text) !important;

    font-size: 0.875rem !important;
    font-weight: 400 !important;

    line-height: 1.55;

    cursor: pointer;

}


/* Checkbox original */

.lcc-contact-checkbox,
.lcc-contact-consent input[type="checkbox"] {

    width: 18px;
    height: 18px;

    min-width: 18px;

    flex: 0 0 auto;

    margin: 2px 0 0;

    accent-color: var(--lcc-contact-blue);

    cursor: pointer;

}


/* Texto do consentimento */

.lcc-contact-consent span {

    flex: 1;

    min-width: 0;

}


/* ==========================================================
   13. VALIDAÇÕES E ERROS
   ========================================================== */

/* Estado de erro dos campos */

.lcc-contact-field-error-state .lcc-contact-input,
.lcc-contact-field-error-state input:not([type="checkbox"]),
.lcc-contact-field-error-state select,
.lcc-contact-field-error-state textarea {

    border-color: var(--lcc-contact-error);

}


/* Foco no campo com erro */

.lcc-contact-field-error-state .lcc-contact-input:focus,
.lcc-contact-field-error-state input:not([type="checkbox"]):focus,
.lcc-contact-field-error-state select:focus,
.lcc-contact-field-error-state textarea:focus {

    border-color: var(--lcc-contact-error);

    outline-color: var(--lcc-contact-error);

}


/* Mensagem individual de erro */

.lcc-contact-field-error {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-top: 7px;

    color: var(--lcc-contact-error);

    font-size: 0.8125rem;
    font-weight: 500;

    line-height: 1.45;

}


/* ==========================================================
   14. RODAPÉ DO FORMULÁRIO
   ========================================================== */

.lcc-contact-form-footer {

    display: flex;

    gap: 20px;

    align-items: center;
    justify-content: space-between;

    margin-top: 28px;
    padding-top: 24px;

    border-top: 1px solid var(--lcc-contact-border);

}


.lcc-contact-form-footer p {

    margin: 0;

    color: var(--lcc-contact-text-light);

    font-size: 0.8125rem;

    line-height: 1.5;

}


/* ==========================================================
   15. BOTÕES
   ========================================================== */

.lcc-contact-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 44px;

    padding: 10px 20px;

    color: var(--lcc-contact-blue);

    font: inherit;

    font-size: 0.9375rem;
    font-weight: 600;

    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    background: #ffffff;

    border: 1px solid var(--lcc-contact-blue);
    border-radius: 4px;

    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;

}


.lcc-contact-button:hover {

    color: #ffffff;

    background: var(--lcc-contact-blue-dark);

    border-color: var(--lcc-contact-blue-dark);

    text-decoration: none;

}


/* Botão de envio */

.lcc-contact-submit-button {

    min-width: 190px;

    color: #ffffff;

    background: var(--lcc-contact-blue);

    border-color: var(--lcc-contact-blue);

    box-shadow: none;

}


.lcc-contact-submit-button:hover {

    color: #ffffff;

    background: var(--lcc-contact-blue-dark);

    border-color: var(--lcc-contact-blue-dark);

}


/* Botão desabilitado */

.lcc-contact-submit-button:disabled {

    cursor: wait;

    opacity: 0.65;

}


/* ==========================================================
   16. MENSAGENS DO DJANGO
   ========================================================== */

.lcc-contact-messages {

    margin-bottom: 24px;

}


.lcc-contact-alert {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin-bottom: 16px;

    padding: 14px 16px;

    font-size: 0.875rem;

    line-height: 1.55;

    border: 1px solid transparent;
    border-radius: 4px;

}


.lcc-contact-alert:last-child {

    margin-bottom: 0;

}


.lcc-contact-alert > i {

    flex: 0 0 auto;

    margin-top: 2px;

    font-size: 1.125rem;

}


.lcc-contact-alert p {

    margin: 0;

}


/* Sucesso */

.lcc-contact-alert-success {

    color: #0b5212;

    background: var(--lcc-contact-success-soft);

    border-color: #b8dfbd;

}


/* Erro */

.lcc-contact-alert-error {

    color: #7e0808;

    background: var(--lcc-contact-error-soft);

    border-color: #efb8b8;

}


/* ==========================================================
   17. ACESSIBILIDADE E FOCO
   ========================================================== */

.lcc-contact-page a:focus-visible,
.lcc-contact-button:focus-visible,
.lcc-contact-checkbox:focus-visible,
.lcc-contact-consent input:focus-visible,
.lcc-contact-table-wrapper:focus-visible {

    outline: 3px solid #ffcd07;

    outline-offset: 3px;

}


/* ==========================================================
   18. RESPONSIVIDADE
   ========================================================== */


/* Tablets */

@media (max-width: 991.98px) {

    .lcc-contact-page .container-lg {

        max-width: 100%;

        padding-right: 20px;
        padding-left: 20px;

    }


    .lcc-contact-hero {

        padding-top: 26px;

    }


    .lcc-contact-form-layout {

        grid-template-columns: 1fr;

    }

}


/* Dispositivos móveis */

@media (max-width: 767.98px) {

    .lcc-contact-page .container-lg {

        padding-right: 16px;
        padding-left: 16px;

    }


    /* Cabeçalho */

    .lcc-contact-hero {

        padding: 24px 0 30px;

    }


    .lcc-contact-hero-content h1 {

        font-size: 2rem;

        line-height: 1.25;

    }


    .lcc-contact-hero-content > p {

        margin-top: 18px;

        font-size: 1rem;

        line-height: 1.6;

    }


    /* Seções */

    .lcc-contact-channels {

        padding-bottom: 38px;

    }


    .lcc-contact-form-section {

        padding-bottom: 56px;

    }


    .lcc-contact-section-heading h2,
    .lcc-contact-form-introduction > h2 {

        font-size: 1.375rem;

    }


    /* Tabela */

    .lcc-contact-table {

        font-size: 0.875rem;

    }


    .lcc-contact-table thead th,
    .lcc-contact-table tbody th,
    .lcc-contact-table tbody td {

        padding: 12px 13px;

        font-size: 0.875rem;

    }


    /* Formulário */

    .lcc-contact-form-layout {

        gap: 24px;

    }


    .lcc-contact-form-card {

        padding: 22px 18px;

    }


    .lcc-contact-form-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .lcc-contact-field-full {

        grid-column: 1 / -1;

    }


    /* Encaminhamento */

    .lcc-contact-routing ul {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    /* Rodapé do formulário */

    .lcc-contact-form-footer {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

    }


    .lcc-contact-submit-button {

        width: 100%;

    }

}


/* Celulares pequenos */

@media (max-width: 480px) {

    .lcc-contact-hero-content h1 {

        font-size: 1.875rem;

    }


    .lcc-contact-section-heading h2,
    .lcc-contact-form-introduction > h2 {

        font-size: 1.3rem;

    }


    .lcc-contact-table thead th,
    .lcc-contact-table tbody th,
    .lcc-contact-table tbody td {

        padding: 11px 10px;

        font-size: 0.8125rem;

    }


    .lcc-contact-form-card {

        padding: 20px 14px;

    }


    .lcc-contact-privacy-note {

        padding: 12px;

    }


    .lcc-contact-label-line {

        gap: 8px;

        align-items: flex-start;

    }

}


/* ==========================================================
   19. PREFERÊNCIA POR MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .lcc-contact-page *,
    .lcc-contact-page *::before,
    .lcc-contact-page *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

    }

}