/* =====================================
   EYESCODE NOTIFICAÇÕES
   DARK + NEON + GLASS
===================================== */


.notificacoes-page {

    max-width: 760px;

    margin: 0 auto;

    padding: 30px 20px;

}



/* =====================================
   HEADER
===================================== */


.notificacoes-header {

    margin-bottom: 30px;

}



.notificacoes-header h1 {

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#ffffff;

    text-shadow:

    0 0 15px rgba(0,170,255,.35);

}



/* =====================================
   LISTA
===================================== */


.notificacoes-container {


    display:flex;

    flex-direction:column;

    gap:18px;


}





/* =====================================
   CARD GLASS
===================================== */


.notificacao-card {


    position:relative;


    display:flex;


    align-items:center;


    gap:16px;


    padding:14px 16px;


    min-height:70px;



    background:

    linear-gradient(
        145deg,
        rgba(15,23,42,.90),
        rgba(2,6,23,.85)
    );



    border:

    1px solid rgba(37,99,235,.35);



    border-radius:18px;



    backdrop-filter:

    blur(12px);



    box-shadow:

    0 10px 30px rgba(0,0,0,.35);



    overflow:hidden;


    transition:.25s;


}





/* brilho lateral */


.notificacao-card::before {


    content:"";


    position:absolute;


    left:0;

    top:0;


    width:3px;


    height:100%;


    background:

    linear-gradient(
        180deg,
        #00aaff,
        #2563eb
    );


    box-shadow:

    0 0 15px #00aaff;


}





.notificacao-card:hover {


    transform:

    translateY(-3px);



    border-color:#00aaff;



    box-shadow:

    0 0 25px rgba(0,170,255,.25);


}





/* =====================================
   NÃO LIDA
===================================== */


.notificacao-card.nova {


    background:

    linear-gradient(
        145deg,
        rgba(30,64,175,.35),
        rgba(15,23,42,.95)
    );


    border-color:

    rgba(0,170,255,.7);


}





/* =====================================
   ÍCONE
===================================== */


.notificacao-icone {


    flex-shrink:0;


    width:42px;

    height:42px;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:14px;



    background:

    rgba(37,99,235,.25);



    color:#00aaff;



    font-size:21px;



    box-shadow:

    inset 0 0 15px rgba(0,170,255,.2),

    0 0 12px rgba(0,170,255,.25);



}





/* =====================================
   CONTEÚDO
===================================== */


.notificacao-conteudo {


    flex:1;


}





.notificacao-conteudo h3 {


    margin:0 0 5px;


    color:#ffffff;


    font-size:16px;


    font-weight:600;


}





.notificacao-conteudo p {


    margin:0;


    color:#cbd5e1;


    font-size:14px;


    line-height:1.4;


}





.notificacao-conteudo span {


    display:block;


    margin-top:6px;


    color:#64748b;


    font-size:12px;


}





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


.notificacao-actions {


    display:flex;


    align-items:center;


}





.notificacao-actions button,
.btn-ver-notificacao {


    border:none;


    cursor:pointer;



    padding:8px 14px;



    border-radius:12px;



    font-size:13px;


    font-weight:600;



    color:white;



    background:


    linear-gradient(
        135deg,
        #2563eb,
        #00aaff
    );



    box-shadow:

    0 0 12px rgba(0,170,255,.25);



    transition:.25s;


}





.notificacao-actions button:hover,
.btn-ver-notificacao:hover {


    transform:scale(1.05);


    box-shadow:

    0 0 22px rgba(0,170,255,.55);


}





/* =====================================
   CONTADOR HEADER
===================================== */


.mobile-notification {


    position:relative;


}





#contadorNotificacoes {


    position:absolute;



    top:-8px;


    right:-8px;



    min-width:18px;


    height:18px;



    display:none;



    align-items:center;


    justify-content:center;



    padding:0 5px;



    background:#ef4444;



    color:white;



    border-radius:50%;



    font-size:11px;



    font-weight:700;



    border:

    2px solid #020617;



    box-shadow:

    0 0 12px rgba(239,68,68,.7);


}





/* =====================================
   MOBILE
===================================== */


@media(max-width:768px){


.notificacoes-page {


    padding:20px 14px;


}



.notificacao-container {


    gap:15px;


}



.notificacao-card {


    padding:13px;


    border-radius:16px;


}



.notificacao-icone {


    width:38px;

    height:38px;


    font-size:19px;


}



.notificacao-conteudo h3 {


    font-size:15px;


}



.notificacao-conteudo p {


    font-size:13px;


}



.btn-ver-notificacao {


    padding:7px 11px;


    font-size:12px;


}


}