:root{

    --wine:#9b0032;
    --wine-dark:#760024;
    --wine-light:#c21845;

    --red:#b00035;

    --bg:#f6f6f4;
    --card:#ffffff;

    --text:#202124;
    --muted:#6b7280;

    --border:#e5e7eb;

    --green:#15803d;

}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#f6f6f4;

    color:var(--text);

    font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

    height:100vh;

    overflow:hidden;

}



/* ========================= */
/* SIDEBAR GRAND HYATT */
/* ========================= */


.sidebar{

    width:190px;

    height:100vh;

    position:fixed;

    left:0;
    top:0;

    background:

    linear-gradient(
        180deg,
        #b00035,
        #8b002b
    );


    padding:15px 12px;

    display:flex;

    flex-direction:column;

    color:white;

}



.logo-ghr{

    width:120px;

    margin:0 auto 15px auto;

}



.opscenter{

    text-align:center;

    font-size:22px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

}



.opscenter small{

    display:block;

    font-size:12px;

    font-weight:400;

    margin-top:8px;

}



.sidebar a{

    display:flex;

    align-items:center;

    gap:8px;


    padding:8px 10px;

    margin:2px 0;


    color:white;

    text-decoration:none;

    border-radius:8px;

    font-size:13px;

}



.sidebar a:hover{

    background:

    rgba(255,255,255,.18);

}



.sidebar hr{

    border:

    0;

    border-top:

    1px solid rgba(255,255,255,.25);

    margin:15px 0;

}



.sidebar-footer{

    margin-top:auto;

    text-align:center;

    color:white;

    font-size:11px;

    opacity:.9;

}



/* ========================= */
/* ÁREA PRINCIPAL */
/* ========================= */


.main-area{

    margin-left:240px;

    width:calc(100% - 240px);

    height:100vh;

    background:#f6f6f4;

}



.topbar{

    height:70px;

    background:white;

    border-bottom:

    1px solid #eee;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 35px;

}



.system-title{

    color:var(--wine);

    font-size:22px;

    font-weight:700;

}



.user-box{

    background:white;

    border:

    1px solid var(--border);

    padding:10px 18px;

    border-radius:20px;

}



.content{

    height:

    calc(100vh - 70px);

    padding:25px;

    overflow:hidden;

}



/* ========================= */
/* HERO */
/* ========================= */


.hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



.hero h1{

    font-size:34px;

    color:#222;

}



.hero p{

    color:var(--muted);

}



/* SAÚDE */


.health-card{

    background:white;

    border-radius:16px;

    padding:18px 35px;

    box-shadow:

    0 5px 20px rgba(0,0,0,.08);

    text-align:center;

}



.health-title{

    color:var(--muted);

    font-size:12px;

}



.health-value{

    color:var(--wine);

    font-size:40px;

    font-weight:800;

}
/* ========================= */
/* BANNER HYATT */
/* ========================= */


.hyatt-banner{

    width:100%;

    height:220px;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:20px;

    background:white;

    box-shadow:

    0 5px 20px rgba(0,0,0,.08);

}



.hyatt-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}



/* ========================= */
/* CARDS KPI */
/* ========================= */


.dashboard-grid{

    display:grid;

    grid-template-columns:

    repeat(5,1fr);

    gap:15px;

    margin-bottom:20px;

}



.kpi{

    background:white;

    border-radius:15px;

    padding:22px;

    box-shadow:

    0 4px 15px rgba(0,0,0,.06);

    border:

    1px solid #eeeeee;

}



.kpi-icon{

    color:var(--wine);

    font-size:28px;

    margin-bottom:10px;

}



.kpi small{

    color:#777;

    font-size:12px;

    text-transform:uppercase;

}



.kpi h2{

    font-size:32px;

    color:#202124;

    margin:8px 0;

}



.kpi p{

    color:var(--muted);

    font-size:13px;

}



/* ========================= */
/* CARDS PRINCIPAIS */
/* ========================= */


.card{

    background:white!important;

    border-radius:16px!important;

    border:

    1px solid #eeeeee!important;


    box-shadow:

    0 5px 20px rgba(0,0,0,.06);

    overflow:hidden;

}



.card-header{

    background:

    linear-gradient(
        90deg,
        #fff1f5,
        #ffffff
    )!important;


    color:var(--wine)!important;

    font-weight:700;

    padding:14px 18px;

    border-bottom:

    1px solid #f1f1f1;

}



.card-body{

    padding:18px;

}



/* ========================= */
/* TABELAS */
/* ========================= */


.table{

    width:100%;

    background:white!important;

    color:#333!important;

    font-size:13px;

}



.table thead th{

    color:var(--wine)!important;

    background:#fafafa!important;

    font-weight:700;

    border-bottom:

    1px solid #ddd!important;

}



.table tbody td{

    color:#404040!important;

    border-color:#eeeeee!important;

    padding:10px!important;

}



.table tbody tr:hover{

    background:#fff5f7!important;

}



/* Remove Bootstrap escuro */

.table-striped>tbody>tr:nth-of-type(odd)>*{

    background:white!important;

}



.table-hover>tbody>tr:hover>*{

    background:#fff5f7!important;

}



/* ========================= */
/* STATUS */
/* ========================= */


.badge{

    border-radius:20px;

    padding:6px 12px;

    font-size:11px;

    font-weight:600;

}



.bg-success{

    background:#16803c!important;

    color:white!important;

}



.bg-danger{

    background:#b00035!important;

    color:white!important;

}



/* ========================= */
/* CONTAINERS E RESUMOS */
/* ========================= */


.summary-card{

    background:white;

    border-radius:15px;

    padding:20px;

    box-shadow:

    0 5px 15px rgba(0,0,0,.06);

}



.summary-card h3{

    color:var(--wine);

}



/* ========================= */
/* MODULOS INFERIORES */
/* ========================= */


.module-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:20px;

}



.module-card{

    background:white;

    border-radius:16px;

    padding:25px;

    text-align:center;

    box-shadow:

    0 5px 15px rgba(0,0,0,.06);

    border:

    1px solid #eeeeee;

}



.module-card i{

    color:var(--wine);

    font-size:36px;

}



.module-card h4{

    margin-top:15px;

    color:#222;

    font-size:18px;

}



.module-card p{

    color:#777;

    font-size:13px;

}
/* ========================= */
/* RODAPÉ GRAND HYATT */
/* ========================= */


.main-area::after{

    content:"";

    position:fixed;

    bottom:0;

    left:240px;

    right:0;

    height:8px;

    background:

    linear-gradient(
        90deg,
        #9b0032,
        #c21845
    );

}



/* ========================= */
/* AJUSTE TELA ÚNICA */
/* ========================= */


.content{

    padding:20px 25px;

}



.hero{

    margin-bottom:15px;

}



.hero h1{

    font-size:30px;

}



.hyatt-banner{

    height:120px;

}



.dashboard-grid{

    gap:12px;

}



.kpi{

    padding:16px;

}



.kpi h2{

    font-size:28px;

}



.card-header{

    padding:10px 15px;

}



.card-body{

    padding:12px;

}



.table{

    font-size:12px;

}



.table tbody td{

    padding:7px!important;

}



.module-card{

    padding:18px;

}



/* ========================= */
/* ALERTAS */
/* ========================= */


.alert-empty{

    text-align:center;

    padding:25px;

    color:var(--green);

    font-size:16px;

}



/* ========================= */
/* SCROLL CONTROLADO */
/* ========================= */


.content{

    overflow:hidden;

}



.row{

    margin-bottom:12px;

}



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


@media(max-width:1200px){

    .dashboard-grid{

        grid-template-columns:

        repeat(3,1fr);

    }


    .module-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}



@media(max-width:768px){

    .sidebar{

        position:relative;

        width:100%;

        height:auto;

    }


    .main-area{

        margin-left:0;

        width:100%;

    }


    .dashboard-grid{

        grid-template-columns:

        1fr;

    }


    .module-grid{

        grid-template-columns:

        1fr;

    }

}
/* ========================= */
/* AJUSTES FINAIS GRAND HYATT */
/* ========================= */


/* COR DO BLOCO DO LOGO */

.sidebar{

    background:

    linear-gradient(
        180deg,
        #a90035,
        #a90035
    );

}


/* ÁREA DO LOGO */

.logo-ghr{

    width:150px;

    display:block;

    margin:5px auto 25px auto;

}


/* REMOVE DIFERENÇA DE FUNDO NO LOGO */

.sidebar .logo-ghr{

    background:transparent;

}



/* ========================= */
/* RODAPÉ VINHO MAIOR */
/* ========================= */


.main-area::after{

    content:"";

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:45px;

    background:#a90035;

    z-index:999;

}


/* COMPENSA O CONTEÚDO PARA NÃO FICAR ATRÁS DO RODAPÉ */

.content{

    padding-bottom:55px;

}



/* TEXTO DO RODAPÉ SE EXISTIR */

.sidebar-footer{

    margin-bottom:35px;

}



/* AJUSTE DO HEADER SUPERIOR */

.topbar{

    background:white;

}



/* COR DO TITULO SUPERIOR */

.system-title{

    color:#a90035;

}
/* AJUSTE FINAL LAYOUT GHR */

.dashboard-grid{
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.content{
    padding:12px 20px;
}

.sidebar{
    width:190px;
}

.main-area{
    margin-left:240px;
}

.kpi,
.card,
.health-card,
.module-card{

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

}


body::after{

    content:"";

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:40px;

    background:#b0003a;

    z-index:999;

}
/* AJUSTE FINAL GHR - FOTO HYATT */

.hyatt-banner{
    height:220px !important;
    width:100% !important;
    border-radius:18px !important;
    overflow:hidden !important;
    margin-bottom:20px !important;
}

.hyatt-banner img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}
/* CORREÇÃO FINAL - RODAPÉ E ESPAÇAMENTO */

/* ======================================
   GHR OPSCENTER - MODO TELA ÚNICA NOC
====================================== */

html,
body{
    height:100vh;
    overflow:hidden;
}


.content{
    height:calc(100vh - 55px);
    padding:10px 18px;
    overflow:hidden;
}


/* reduzir espaço vertical */

.hero{
    margin-bottom:8px;
}


.hyatt-banner{
    height:140px !important;
    margin-bottom:10px !important;
}


.dashboard-grid{
    gap:8px;
    margin-bottom:8px;
}


.kpi{
    padding:10px;
}


.kpi h2{
    font-size:22px;
}


/* tabelas */

.card-body{
    padding:8px;
}


.table{
    font-size:11px;
}


.table td,
.table th{
    padding:5px !important;
}


/* módulos */

.module-card{
    padding:10px;
}


.module-card i{
    font-size:26px;
}


/* alertas */

.alert-empty{
    padding:15px;
}


/* rodapé */

footer{
    height:45px;
}


.content{
    height:auto;
    min-height:calc(100vh - 55px);
    padding-bottom:90px;
}


.module-card{
    margin-bottom:20px;
}


.dashboard{
    padding-bottom:80px;
}
/* ======================================
   CORREÇÃO DEFINITIVA - RODAPÉ GHR
====================================== */

html,
body{
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
}


.main-area{
    height:auto;
    min-height:100vh;
}


.content{
    height:auto;
    min-height:calc(100vh - 55px);
    padding-bottom:120px;
}


.dashboard{
    min-height:100vh;
    padding-bottom:80px;
}


/* evita módulos encostarem no rodapé */

.module-card{
    margin-bottom:30px;
}
/* AJUSTE FINAL - ALERTAS COMPACTOS */

.card.mt-4{
    margin-top:10px !important;
}


.alert-empty{
    padding:8px !important;
    font-size:14px;
}


.card-body{
    padding:8px;
}


/* reduz espaço dos módulos */

.module-card{
    height:120px;
}


.module-card h4{
    margin-top:8px;
    margin-bottom:4px;
}


.module-card p{
    margin:0;
}
/* =====================================
   GHR OPSCENTER - AJUSTE DE ALTURA FINAL
===================================== */


/* reduz espaço entre blocos */

.row.mt-4{
    margin-top:10px !important;
}


/* tabelas mais compactas */

.card-body{
    padding:6px !important;
}


.table td,
.table th{
    padding:4px !important;
    line-height:1.2;
}


/* resumo do sistema menor */

.card.mt-4{
    margin-top:8px !important;
}


/* módulos */

.module-card{
    height:105px;
    padding:8px !important;
}


.module-card i{
    font-size:24px !important;
}


.module-card h4{
    font-size:15px;
    margin:5px 0;
}


.module-card p{
    font-size:11px;
}


/* alertas compacto */

.alert-empty{
    padding:5px !important;
}


.card-header{
    padding:7px 12px !important;
}
/* ===================================
   GHR OPSCENTER - TELA FIXA MONITOR
=================================== */


/* elimina rolagem geral */

html,
body{
    height:100vh;
    overflow:hidden;
}


/* área principal ocupa exatamente a tela */

.main-area{

    height:100vh;
    overflow:hidden;

}


/* conteúdo interno */

.content{

    height:calc(100vh - 55px);
    overflow:hidden;

    padding:12px 20px;

}



/* reduz o banner */

.hyatt-banner{

    height:180px !important;
    margin-bottom:8px !important;

}



/* reduz espaço superior */

.hero{

    margin-bottom:8px !important;

}


.hero h1{

    font-size:26px !important;

}



/* indicadores */

.dashboard-grid{

    gap:8px !important;
    margin-bottom:8px !important;

}


.kpi{

    padding:10px !important;

}


.kpi h2{

    font-size:21px !important;

}



/* tabelas */

.card-body{

    padding:5px !important;

}


.table{

    font-size:11px !important;

}


.table td,
.table th{

    padding:4px !important;

}



/* módulos */

.module-card{

    height:95px !important;

}



/* esconde excesso vertical do alerta */

.card.mt-4:last-child{

    margin-top:6px !important;

}


.alert-empty{

    padding:4px !important;

}
/* =====================================
   GHR OPSCENTER - INFRAESTRUTURA
===================================== */


.infra-page{

    height:100%;
    overflow:hidden;

}


.infra-page .top-bar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:15px;

}


.infra-page .top-bar h1{

    color:#b00035;
    font-size:28px;

    margin:0;

}


.infra-page .top-bar p{

    color:#6b7280;
    margin:4px 0;

}



.top-right{

    display:flex;
    align-items:center;
    gap:20px;

}



#pesquisa{

    border:1px solid #ddd;

    border-radius:20px;

    padding:10px 18px;

    width:280px;

}



/* CARDS */

.cards-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:12px;

    margin-bottom:15px;

}



.status-card{

    background:white;

    border-radius:15px;

    padding:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.status-card span{

    color:#777;

    font-size:12px;

}


.status-card h2{

    color:#b00035;

    font-size:28px;

    margin:8px 0;

}


.status-card small{

    color:#777;

}



/* BARRAS */

.progress{

    height:6px;

    background:#eee;

    border-radius:10px;

    overflow:hidden;

}


.progress-bar{

    height:100%;

    background:#b00035;

}



/* ÁREA PRINCIPAL */

.infra-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:15px;

}



.infra-tables{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.hosts-card,
.containers-card,
.photos-card{

    background:white;

    border-radius:16px;

    padding:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.hosts-card h3,
.containers-card h3{

    color:#b00035;

    font-size:16px;

    border-bottom:1px solid #eee;

    padding-bottom:10px;

}



/* FOTOS */

.photos-card{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.photo{

    width:100%;

    height:120px;

    object-fit:cover;

    border-radius:12px;

}



/* RESPONSIVO */

@media(max-width:1200px){

.cards-grid{

grid-template-columns:repeat(3,1fr);

}


.infra-layout{

grid-template-columns:1fr;

}

}

/* =========================================
   IDENTIFICACAO DE AMBIENTE DEV
   ========================================= */

.dev-environment-badge {

    position: fixed;

    top: 15px;

    right: 20px;

    z-index: 9999;

    background: #dc3545;

    color: white;

    padding: 8px 14px;

    border-radius: 20px;

    font-weight: bold;

    font-size: 13px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.25);

}


.dev-environment-dot {

    display: inline-block;

    width: 10px;

    height: 10px;

    background: white;

    border-radius: 50%;

    margin-right: 6px;

}