/* ==================================================
   O QUE OBSERVAR
================================================== */

.observations-page{

    padding-top:220px;
    padding-bottom:140px;
}

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

.page-header{

    max-width:900px;

    margin-bottom:70px;
}

.page-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--primary);

    font-size:.75rem;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:20px;
}

.page-tag::before{

    content:'';

    width:45px;

    height:2px;

    background:var(--primary);
}

.page-header h1{

    font-size:3.2rem;

    line-height:1.15;

    color:var(--brown);

    margin-bottom:20px;

    font-weight:800;

    max-width:900px;
}

.page-header p{

    max-width:720px;

    color:var(--muted);

    line-height:1.9;

    font-size:1.05rem;
}

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

.observations-list{

    margin-top:70px;
}

/* ==================================================
   ITEM
================================================== */

.observation-item{

    padding:50px 0;

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

    transition:.35s ease;
}

.observation-item:last-child{

    border-bottom:1px solid var(--border);
}

.observation-item:hover{

    padding-left:15px;
}

/* ==================================================
   META
================================================== */

.observation-meta{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;
}

.observation-date{

    color:var(--muted);

    font-size:.85rem;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* ==================================================
   RISK BADGES
================================================== */

.risk-badge{

    padding:8px 16px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.risk-baixo{

    background:#EEF7EF;

    color:#2D7A38;
}

.risk-medio{

    background:#FFF4E5;

    color:#B26A00;
}

.risk-alto{

    background:#FDEAEA;

    color:#B42318;
}

/* ==================================================
   TITULO
================================================== */

.observation-item h2{

    font-size:2rem;

    line-height:1.3;

    color:var(--brown);

    margin-bottom:15px;

    font-weight:800;
}

/* ==================================================
   TEXTO
================================================== */

.observation-item p{

    max-width:850px;

    color:var(--muted);

    line-height:1.9;
}

/* ==================================================
   EMPTY STATE
================================================== */

.empty-state{

    background:white;

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

    border-radius:28px;

    padding:70px;

    text-align:center;

    color:var(--muted);

    font-size:1.05rem;
}

/* ==================================================
   PAGINAÇÃO
================================================== */

.pagination-wrapper{

    margin-top:80px;

    display:flex;

    justify-content:center;
}

/* ==================================================
   RESPONSIVO
================================================== */

@media(max-width:992px){

    .observations-page{

        padding-top:180px;
    }

    .page-header h1{

        font-size:2.6rem;
    }

    .observation-item h2{

        font-size:1.6rem;
    }
}

@media(max-width:768px){

    .observations-page{

        padding-top:150px;
        padding-bottom:100px;
    }

    .page-header h1{

        font-size:2rem;
    }

    .observation-item{

        padding:35px 0;
    }

    .observation-item h2{

        font-size:1.4rem;
    }

    .observation-meta{

        flex-wrap:wrap;
    }

    .empty-state{

        padding:40px 25px;
    }
}