/* --- 1. PALETA DE CORES COMPLETA (AGENDA ETEC) --- */
:root {
    /* Cores Principais */
    --vermelho-base: #B20000;
    --azul-base: #005C6D;
    --azul-destaque-base: #00C1CF;
    --vermelho-escuro-10: #7E0000;
    --primario-titulos-hover: #004854;
    --secundario-hover: #00D8E8;

    /* Cores Neutras */
    --cinza-texto-base: #666666;
    --cinza-claro: #DADADA;
    --cinza-hover: #E6E6E6;
    --prata-base: #F8F8F8;
    --white: #FFFFFF;

    /* Cores de Feedback (Formulários) */
    --erro-base: #D32719;
    /* Cancelado */
    --erro-bg: #FDD5D1;
    /* Cancelado Light */
    --sucesso-base: #3ACF1F;
    /* Concluido */
    --sucesso-bg: #E8FBE4;
    /* Concluido Light */
    --aviso-base: #B78718;
    /* Andamento */
}

/* --- 2. CONFIGURAÇÕES GERAIS --- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--prata-base);
    /* Fundo neutro */
    color: var(--cinza-texto-base);
    /* Cor de texto padrão */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--azul-base);
    /* Títulos na cor da marca */
}

/* --- 3. NAVBAR E FUNDOS --- */
.bg-custom-primary {
    background-color: var(--azul-base) !important;
}

.text-custom-primary {
    color: var(--azul-base) !important;
}

/* --- 4. BOTÕES DO TOPO (NAVBAR) --- */
.btn-custom-header {
    background-color: var(--white);
    color: var(--azul-base);
    border: 1px solid var(--white);
    transition: all 0.3s ease;
}

.btn-custom-header:hover {
    background-color: var(--azul-destaque-base);
    color: var(--white);
    border-color: var(--azul-destaque-base);
}

/* --- 5. BOTÃO PRINCIPAL (ENVIAR) --- */
.btn-custom-action {
    background-color: var(--azul-base);
    border-color: var(--azul-base);
    color: var(--white);
    transition: all 0.3s ease;
}

/* Se quiser usar o VERMELHO para destacar o botão, troque a variável acima por --vermelho-base */

.btn-custom-action:hover {
    background-color: var(--primario-titulos-hover);
    border-color: var(--primario-titulos-hover);
    transform: translateY(-1px);
    /* Leve efeito de subida */
}

/* --- 6. ESTILIZAÇÃO DOS FORMULÁRIOS (Inputs) --- */
.form-control,
.form-select {
    border-color: var(--cinza-claro);
    color: var(--cinza-texto-base);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--azul-destaque-base);
    box-shadow: 0 0 0 0.25rem rgba(0, 193, 207, 0.25);
    /* Glow azul destaque */
}

/* Ajuste das cores de validação do Bootstrap para usar sua paleta */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--erro-base);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23D32719'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5zM6 8.2a.3.3 0 110-.6.3.3 0 010 .6z'/%3e%3c/svg%3e");
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--sucesso-base);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%233ACF1F' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

/* --- 7. CARDS E CONTAINER --- */
.card {
    border: 1px solid var(--cinza-claro);
    border-radius: 8px;
}

.calendar-wrapper {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    background: var(--white);
    border-radius: 0 0 8px 8px;
    /* Arredonda só em baixo */
    border-top: 1px solid var(--cinza-claro);
}

.calendar-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- 8. MOBILE --- */
@media (max-width: 576px) {
    .calendar-wrapper {
        padding-bottom: 120%;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }
}

/* --- 9. RODAPÉ (FOOTER COMPACTO) --- */
.footer-etec {
    background-color: var(--azul-base);
    color: var(--white);
    font-size: 0.85rem;
    /* Fonte menor para ficar compacto */
    border-top: 3px solid var(--azul-destaque-base);
}

.footer-etec h6 {
    color: var(--azul-destaque-base);
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    /* Letras maiúsculas para destacar sendo pequeno */
}

.footer-etec p,
.footer-etec li {
    margin-bottom: 0.2rem;
    /* Menos espaço entre as linhas */
    color: var(--prata-base);
    list-style: none;
}

.footer-etec a {
    color: var(--secundario-hover);
    text-decoration: none;
}

.footer-etec a:hover {
    color: var(--white);
    text-decoration: underline;
}

.footer-copyright {
    background-color: var(--primario-titulos-hover);
    /* Um tom mais escuro para o finalzinho */
    font-size: 0.75rem;
    color: var(--cinza-claro);
    margin-top: 1rem;
}

/* Botões sociais pequenos e lado a lado */
.social-link {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: white !important;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.8rem;
    transition: 0.3s;
}

.social-link:hover {
    background: var(--azul-destaque-base);
    text-decoration: none;
}