/* ===========================================================
   PAINEL OPERACIONAL v2.3 PREMIUM
   Otimizado para TV Full HD / 4K e Monitores
   =========================================================== */

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

:root{
 --bg:#09111d;
 --header:#101b2d;
 --panel:#172437;
 --panel2:#1d2f47;
 --border:rgba(255,255,255,.08);
 --blue:#2563eb;
 --green:#22c55e;
 --yellow:#facc15;
 --text:#fff;
 --muted:#94a3b8;
 --shadow:0 10px 30px rgba(0,0,0,.30);
}

html,body{
 width:100%;
 height:100%;
 background:var(--bg);
 color:var(--text);
 font-family:Segoe UI,Arial,sans-serif;
 overflow-x:auto;
}

.container{
 width:100%;
 min-height:100vh;
 display:flex;
 flex-direction:column;
}

.topo{
 display:flex;
 justify-content:space-between;
 align-items:center;
 background:linear-gradient(180deg,#142238,#101b2d);
 border-bottom:3px solid var(--blue);
 padding:18px 24px;
}

.titulo h1{

 font-size:42px;

 font-weight:700;

 letter-spacing:1px;

 margin-bottom:4px;

}

.titulo span{
 color:var(--muted);
}

.header-info{
 display:flex;
 gap:14px;
}

.info-box{
 min-width:220px;
 background:var(--panel);
 border:1px solid var(--border);
 border-radius:14px;
 padding:14px 18px;
 box-shadow:var(--shadow);
}

.info-box small{
 display:block;
 color:var(--muted);
 margin-bottom:8px;
}

/* ===========================================================
   MODO TV
   =========================================================== */

.tv-box{
    cursor:pointer;
    transition:.25s;
    user-select:none;
}

.tv-box:hover{
    background:#20324d;
    transform:translateY(-2px);
}

.tv-box strong{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:17px;
    font-weight:700;
}

.tv-box.ativo{
    border-color:#22c55e;
    box-shadow:0 0 18px rgba(34,197,94,.25);
}

.online{

 color:var(--green);

 display:flex;

 align-items:center;

 gap:8px;

 font-size:17px;

 font-weight:700;

 letter-spacing:.5px;

}

.led{
 width:10px;
 height:10px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 10px var(--green);
}

.menu{
 display:flex;
 justify-content:center;
 gap:10px;
 background:#0f1829;
 padding:12px;
 border-bottom:1px solid var(--border);
}

.menu a{
 text-decoration:none;
 color:var(--muted);
 padding:10px 18px;
 border-radius:10px;
 font-weight:600;
 transition:.2s;
}

.menu a:hover{background:#1d2f47;color:#fff;}
.menu .ativo{background:var(--blue);color:#fff;}

.marketplace-resumo{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:16px;
 padding:18px;
}

.market-card{
 background:var(--panel);
 border-left:5px solid var(--blue);
 border-radius:14px;
 padding:20px;
 text-align:center;
 border:1px solid var(--border);
 box-shadow:var(--shadow);
}

.market-card small{
    display:block;
    font-size:18px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    margin-bottom:10px;
}

/* ===================================================== */
/* CORES DOS MARKETPLACES DO RESUMO SUPERIOR */
/* ===================================================== */

.market-card.ml small{
    color:#F4C542;
}

.market-card.shopee small{
    color:#F97316;
}

.market-card.amazon small{
    color:#60A5FA;
}

.market-card.shein small{
    color:#FFFFFF;
}

.market-card strong{
 font-size:42px;
}

.painel{
 display:grid;
 grid-template-columns:repeat(5,minmax(300px,1fr));
 gap:14px;
 padding:0 18px 18px;
}

.empresa{
 background:var(--panel);
 border-radius:14px;
 overflow:hidden;
 border:1px solid var(--border);
 box-shadow:var(--shadow);
}

.empresa h2{

    background:linear-gradient(90deg,#1d4ed8,#2563eb);

    padding:14px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    letter-spacing:.6px;

}

.marketplace{
 padding:14px;
 border-bottom:1px solid var(--border);
}

.marketplace:last-child{border-bottom:none;}

.marketplace h3{

    font-size:20px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:14px;

    letter-spacing:.8px;

}

/* ===================================================== */
/* CORES DOS MARKETPLACES DENTRO DAS EMPRESAS */
/* ===================================================== */

.marketplace.ml h3{
    color:#F4C542;
}

.marketplace.shopee h3{
    color:#F97316;
}

.marketplace.amazon h3{
    color:#60A5FA;
}

.marketplace.shein h3{
    color:#FFFFFF;
}

.indicadores{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;
}

.indicador{
 background:var(--panel2);
 border-radius:10px;
 padding:12px;
 text-align:center;
 border-top:3px solid transparent;
}

.indicador.aguardando{border-top-color:var(--yellow);}
.indicador.separacao{border-top-color:var(--green);}
.indicador:last-child{border-top-color:var(--blue);}

.indicador small{

    display:block;

    color:var(--muted);

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;

    letter-spacing:.4px;

}

.indicador strong{
 font-size:34px;
 font-weight:700;
}

.aguardando strong{color:var(--yellow);}
.separacao strong{color:var(--green);}

.resumo{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
 padding:0 18px 18px;
}

.resumo-card{
    background:var(--header);
    border-radius:14px;
    border:1px solid var(--border);

    min-height:150px;

    padding:24px 18px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.resumo-card small{

    display:block;

    color:#FFFFFF;

    font-size:20px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:6px;

}

.resumo-card strong{

    display:block;

    font-size:64px;

    font-weight:700;

    line-height:1;

}

/* =======================================================
   CORES DOS TOTAIS DO RODAPÉ
   ======================================================= */

#totalAguardando{

    color:#FFD400;

}

#totalSeparacao{

    color:#22C55E;

}

#totalGeral{

    color:#FFFFFF;

}

footer{
    background:#101b2d;
    border-top:1px solid var(--border);
    color:#64748B;
    text-align:center;
    padding:12px;
    font-size:13px;
    letter-spacing:.5px;
}

@media(max-width:1900px){
 .painel{grid-template-columns:repeat(5,minmax(260px,1fr));}
}

@media(max-width:1600px){
 .painel{grid-template-columns:repeat(4,minmax(280px,1fr));}
}

@media(max-width:1280px){
 .painel{grid-template-columns:repeat(3,minmax(280px,1fr));}
 .marketplace-resumo{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:900px){
 .topo{flex-direction:column;align-items:flex-start;gap:12px;}
 .header-info{width:100%;flex-direction:column;}
 .painel,.marketplace-resumo,.resumo{grid-template-columns:1fr;}
 .menu{flex-wrap:wrap;}
}