/* ===============================
   🌿 Home TUAB – Estilo Final
   =============================== */

body.pagina-inicio {
    background-color: #faf9f6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* ===============================
   🔔 Notificações Ativas (header)
   =============================== */

.push-header-slot {
    width: 100%;
    background-color: #faf9f6;
    padding: 6px 12px;
    display: flex;
    justify-content: flex-start;
}

.tuab-push-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #d1f0e0;
    color: #0f5132;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    font-weight: 600;
}

/* ===============================
   📄 Container principal
   =============================== */

.pagina-inicio .inicio-container {
    width: 100%;
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 5vw;
    box-sizing: border-box;
}

    /* ===============================
   🖋️ Título
   =============================== */

    .pagina-inicio .inicio-container h1 {
        color: #1e293b;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.3;
        margin: 24px 0;
    }

    /* ===============================
   🪶 Logo
   =============================== */

    .pagina-inicio .inicio-container img {
        width: 160px;
        height: auto;
        margin: 24px 0;
        user-select: none;
    }

/* ===============================
   🔘 Botão Login
   =============================== */

.pagina-inicio .btn-tuab.btn-verde {
    background: linear-gradient(135deg, #2b7a3f, #45a049);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    transition: all 0.3s ease;
}

    .pagina-inicio .btn-tuab.btn-verde:hover {
        background: linear-gradient(135deg, #256b35, #3f913f);
        transform: scale(1.05);
    }

/* ===============================
   ⚠️ Avisos (base)
   =============================== */

.avisos-stack {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
}

.aviso-alerta {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    margin: 10px auto;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    text-align: center;
    border-radius: 14px;
}

    .aviso-alerta i {
        font-size: 1.2rem;
        color: #c29200;
    }

/* ===============================
   🔔 Aviso clicável (SEM cara de link)
   =============================== */

.aviso-alerta-link {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    margin: 12px auto;
    background: #fef3c7;
    color: #92400e;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    transition: all .2s ease;
}

    /* 🔒 REMOVE AZUL / ROXO EM TODOS OS ESTADOS */
    .aviso-alerta-link,
    .aviso-alerta-link:visited,
    .aviso-alerta-link:hover,
    .aviso-alerta-link:active,
    .aviso-alerta-link:focus,
    .aviso-alerta-link:focus-visible {
        color: inherit;
        text-decoration: none;
        outline: none;
    }

        /* hover */
        .aviso-alerta-link:hover {
            background: #fde68a;
            transform: translateY(-1px);
        }

/* ===============================
   💰 Aviso de mensalidade em atraso
   =============================== */

.aviso-mensalidade {
    background: #fee2e2;
    color: #7f1d1d;
}

    /* mensalidade – hover */
    .aviso-mensalidade:hover {
        background: #fecaca;
    }

    /* mensalidade – garantir que NÃO fique azul */
    .aviso-mensalidade,
    .aviso-mensalidade:visited,
    .aviso-mensalidade:hover,
    .aviso-mensalidade:active,
    .aviso-mensalidade:focus,
    .aviso-mensalidade:focus-visible {
        color: inherit;
        text-decoration: none;
        outline: none;
    }

/* ===============================
   📱 Mobile – ajustes finos
   =============================== */

@media (max-width: 768px) {

    .pagina-inicio .inicio-container {
        align-items: center;
        justify-content: flex-start;
    }

        .pagina-inicio .inicio-container h1 {
            font-size: 1.4rem;
            margin: 20px 0;
        }

        .pagina-inicio .inicio-container img {
            width: 140px;
            margin: 20px 0;
        }
}

@media (max-width: 480px) {

    .aviso-alerta,
    .aviso-alerta-link {
        font-size: 0.82rem;
        padding: 10px 12px;
    }
}

/* ===============================
   ☰ Offcanvas
   =============================== */

.offcanvas {
    z-index: 3000 !important;
}