/* ===============================
   🌿 Home TUIC – Identidade Visual
   Roxo / Lilás / Azul bem suave
   =============================== */

body.pagina-inicio {
    background: linear-gradient( 180deg, #eee1f4 0%, #f4eaf8 42%, #f1edf7 72%, #eaf5f8 100% ) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    color: #432052;
}


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

.push-header-slot {
    width: 100%;
    background: rgba(242, 232, 247, .96);
    padding: 6px 12px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(111, 43, 143, .10);
}


.TUIC-push-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .88);
    color: #5b236f;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(111, 43, 143, .15);
    box-shadow: 0 2px 8px rgba(81, 32, 106, .10);
    font-weight: 600;
}


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

.pagina-inicio .inicio-container {
    width: 100%;
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 5vw 20px;
    box-sizing: border-box;
    /*
       Transparente para deixar aparecer
       o fundo lilás da página.
    */
    background: transparent !important;
}


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

    .pagina-inicio .inicio-container h1 {
        color: #57206f !important;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.3;
        margin: 0 0 24px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
    }


/* ===============================
   🙏 Saudação
   =============================== */

.pagina-inicio .saudacao-usuario {
    background: rgba(255, 255, 255, .82) !important;
    color: #57206f !important;
    border: 1px solid rgba(98, 197, 229, .42) !important;
    box-shadow: 0 5px 16px rgba(81, 32, 106, .10) !important;
    backdrop-filter: blur(4px);
}


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

.pagina-inicio .inicio-container img {
    width: 160px;
    height: auto;
    margin: 24px 0;
    user-select: none;
    filter: drop-shadow( 0 8px 15px rgba(81, 32, 106, .16) );
}


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

.pagina-inicio .btn-TUIC.btn-verde,
.pagina-inicio .btn-TUIC {
    background: linear-gradient( 135deg, #7b3b96, #5a1f72 ) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    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 5px 13px rgba(81, 32, 106, .23);
    transition: all .3s ease;
}


    .pagina-inicio .btn-TUIC.btn-verde:hover,
    .pagina-inicio .btn-TUIC:hover {
        background: linear-gradient( 135deg, #6b2d86, #4c155f ) !important;
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 7px 17px rgba(81, 32, 106, .27);
    }


/* ===============================
   🔔 STATUS PUSH
   =============================== */

.pagina-inicio .TUIC-push-pill {
    background: rgba(255, 255, 255, .82) !important;
    color: #57206f !important;
    border: 1px solid rgba(111, 43, 143, .16) !important;
    box-shadow: 0 4px 12px rgba(81, 32, 106, .09) !important;
}


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

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


.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
   =============================== */

.aviso-alerta-link {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    margin: 12px auto;
    background: rgba(254, 243, 199, .94);
    color: #92400e;
    border-radius: 14px;
    border: 1px solid rgba(194, 146, 0, .15);
    box-shadow: 0 4px 12px rgba(81, 32, 106, .09);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    transition: all .2s ease;
    box-sizing: border-box;
}


    /* REMOVE AZUL / ROXO DOS LINKS */

    .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;
    }


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


/* ===============================
   💰 Mensalidade em atraso
   =============================== */

.aviso-mensalidade {
    background: rgba(254, 226, 226, .94);
    color: #7f1d1d;
}


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


    .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;
    }


/* ===============================
   📿 MODAL DATA DE INGRESSO
   =============================== */

.pagina-inicio .ingresso-card {
    background: linear-gradient( 180deg, rgba(255, 255, 255, .98), rgba(248, 242, 251, .98) ) !important;
    border: 1px solid rgba(111, 43, 143, .20) !important;
    box-shadow: 0 20px 55px rgba(50, 13, 67, .30) !important;
}


.pagina-inicio .ingresso-icone {
    background: #e8f7fb !important;
    color: #6f2b8f !important;
}


.pagina-inicio .ingresso-titulo {
    color: #57206f !important;
}


.pagina-inicio .ingresso-data {
    background: #ffffff;
    border: 1px solid #d9c6e3;
}


    .pagina-inicio .ingresso-data:focus {
        border-color: #8b50a3 !important;
        box-shadow: 0 0 0 .2rem rgba(111, 43, 143, .12) !important;
    }


/* ===============================
   💾 BOTÃO SALVAR DATA
   =============================== */

.pagina-inicio .btn-salvar-ingresso,
.pagina-inicio .btn-salvar-ingresso.btn-success {
    background: linear-gradient( 135deg, #7b3b96, #57206f ) !important;
    border-color: #57206f !important;
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(81, 32, 106, .20);
}


/* ===============================
   ℹ️ ALERTA AZUL
   =============================== */

.pagina-inicio .alert-primary {
    --bs-alert-color: #432052;
    --bs-alert-bg: rgba(234, 247, 251, .94);
    --bs-alert-border-color: #a7ddea;
    box-shadow: 0 4px 12px rgba(81, 32, 106, .07);
}


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

@media (max-width: 768px) {

    body.pagina-inicio {
        background: linear-gradient( 180deg, #eee1f4 0%, #f4eaf8 45%, #f0ebf6 72%, #eaf5f8 100% ) !important;
    }


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


        .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: .82rem;
        padding: 10px 12px;
    }
}


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

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