*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{

    background:#090909;
    color:#fff;
    overflow:hidden;

}

.top{

    height:65px;
    background:#111;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    border-bottom:2px solid #ff0000;

}

.logo{

    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    font-weight:bold;

}

.logo span{

    color:#ff0000;

}

.logo-img{

    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;

}

.status{

    color:#22ff66;
    font-weight:bold;

}

.container{

    display:grid;
    grid-template-columns:320px 1fr 360px;
    height:calc(100vh - 65px);

}

.sidebar{

    background:#111;
    border-right:1px solid #222;
    overflow:auto;

}

.menu{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:10px;

}

.menu button{

    border:0;
    background:#1f1f1f;
    color:white;
    cursor:pointer;
    padding:10px 6px;
    border-radius:6px;
    transition:.2s;
    font-size:13px;
    white-space:nowrap;

}

.menu button:hover{

    background:#ff0000;

}

#pesquisa{

    width:calc(100% - 20px);
    margin:10px;
    padding:10px;
    border:0;
    border-radius:6px;
    background:#1c1c1c;
    color:white;

}

#title{

    padding:15px;

}

#contact-list{

    overflow:auto;

}

.contact{

    display:flex;
    gap:10px;
    padding:12px;
    cursor:pointer;
    border-bottom:1px solid #1f1f1f;
    transition:.2s;

}

.contact:hover{

    background:#181818;

}

.avatar{

    width:48px;
    height:48px;
    border-radius:50%;
    background:#ff0000;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    flex-shrink:0;

}

.contact b{

    display:block;

}

.contact p{

    color:#999;
    margin-top:5px;

}

.chat{

    display:flex;
    flex-direction:column;
    background:#0d0d0d;

}

.chat-header{

    height:70px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px;
    border-bottom:1px solid #222;

}

.messages{

    flex:1;
    overflow:auto;
    padding:20px;

}

.received{

    background:#222;
    width:max-content;
    max-width:70%;
    padding:12px;
    border-radius:12px;
    margin-bottom:12px;

}

.sent{

    background:#ff0000;
    width:max-content;
    max-width:70%;
    padding:12px;
    border-radius:12px;
    margin-left:auto;
    margin-bottom:12px;

}

.msg-status{

    font-size:11px;
    opacity:.7;
    margin-left:6px;
    float:right;

}

.msg-status-lida{

    color:#44aaff;
    opacity:1;

}

.msg-status-falha{

    color:#ffcccc;
    opacity:1;

}

.msg-erro{

    color:#ff4444;
    font-size:12px;
    text-align:right;
    margin:-8px 0 12px;

}

.input-area{

    display:flex;
    gap:10px;
    padding:15px;
    border-top:1px solid #222;

}

.input-area input{

    flex:1;
    padding:12px;
    background:#191919;
    border:0;
    color:white;
    border-radius:8px;

}

.input-area button{

    width:55px;
    border:0;
    background:#ff0000;
    color:white;
    border-radius:8px;
    cursor:pointer;
    font-size:20px;

}

.client{

    background:#101010;
    border-left:1px solid #222;
    overflow:auto;
    padding:20px;

}

.client h2{

    margin-bottom:20px;
    color:#ff0000;

}

.client h3{

    margin-top:15px;
    margin-bottom:10px;
    color:#ff4444;

}

.client p{

    color:#999;
    margin-top:8px;

}

.client span{

    display:block;
    margin-top:5px;
    font-size:15px;
    color:white;

}

hr{

    margin:20px 0;
    border:0;
    border-top:1px solid #222;

}

.socio-card{

    background:#181818;
    border-left:4px solid red;
    border-radius:8px;
    padding:12px;
    margin-bottom:10px;

}

.socio-card p{

    color:#bbb;

}

/* LOGIN */

.login-body{

    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    overflow:auto;

}

.login-card{

    background:#111;
    border:1px solid #222;
    border-top:3px solid #ff0000;
    border-radius:12px;
    padding:40px;
    width:340px;
    text-align:center;

}

.login-logo{

    justify-content:center;
    margin-bottom:30px;

}

.login-card input{

    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:0;
    border-radius:8px;
    background:#1c1c1c;
    color:white;

}

.login-card button{

    width:100%;
    padding:12px;
    border:0;
    border-radius:8px;
    background:#ff0000;
    color:white;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;

}

.login-card button:hover{

    background:#cc0000;

}

.login-erro{

    color:#ff4444;
    min-height:20px;
    margin-bottom:10px;
    font-size:14px;

}

/* TOPO - SAIR */

.top-right{

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

}

#btn-sair{

    border:0;
    background:#1f1f1f;
    color:white;
    padding:8px 16px;
    border-radius:6px;
    cursor:pointer;
    transition:.2s;

}

#btn-sair:hover{

    background:#ff0000;

}

/* CAMPANHAS / USUARIOS */

.tag-campanha{

    display:inline-block;
    background:#332200;
    color:#ffaa00;
    border:1px solid #664400;
    border-radius:10px;
    padding:2px 8px;
    font-size:11px;
    margin-top:4px;

}

.badge{

    display:inline-block;
    border-radius:10px;
    padding:2px 10px;
    font-size:11px;
    font-weight:bold;
    margin-left:8px;
    text-transform:uppercase;

}

.badge-rascunho{ background:#2a2a2a; color:#aaa; border:1px solid #444; }

.badge-disparando{ background:#003311; color:#22ff66; border:1px solid #116633; }

.badge-pausada{ background:#332200; color:#ffaa00; border:1px solid #664400; }

.badge-concluida{ background:#001133; color:#44aaff; border:1px solid #113366; }

.badge-admin{ background:#330000; color:#ff4444; border:1px solid #661111; }

.badge-operador{ background:#1c1c1c; color:#999; border:1px solid #333; }

.st-online{ background:#003311; color:#22ff66; border:1px solid #116633; }

.st-conversando{ background:#001133; color:#44aaff; border:1px solid #113366; }

.st-inativo{ background:#332200; color:#ffaa00; border:1px solid #664400; }

.st-offline{ background:#2a2a2a; color:#888; border:1px solid #444; }

.badge-canal-s7{ background:#330000; color:#ff6666; border:1px solid #661111; }

.badge-canal-gapi{ background:#003311; color:#22ff66; border:1px solid #116633; }

.campanha-card{

    cursor:pointer;

}

.campanha-info{

    flex:1;

}

.barra{

    background:#1c1c1c;
    border-radius:6px;
    height:8px;
    margin:8px 0 4px;
    overflow:hidden;

}

.barra-fill{

    background:#ff0000;
    height:100%;
    transition:width .3s;

}

.campanha-acoes{

    margin-top:8px;
    display:flex;
    gap:8px;

}

.btn-mini{

    border:0;
    background:#1f1f1f;
    color:white;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    transition:.2s;

}

.btn-mini:hover{

    background:#ff0000;

}

.btn-perigo:hover{

    background:#cc0000;

}

.form-painel{

    padding:15px;

}

.form-painel h3{

    margin-bottom:12px;

}

.form-painel input[type="text"],
.form-painel input[type="password"],
.form-painel input[type="number"],
.form-painel select,
.form-painel textarea{

    width:100%;
    padding:10px;
    margin-bottom:10px;
    border:0;
    border-radius:6px;
    background:#1c1c1c;
    color:white;
    font-family:inherit;

}

.form-painel button{

    border:0;
    background:#ff0000;
    color:white;
    padding:10px 16px;
    border-radius:6px;
    cursor:pointer;
    transition:.2s;

}

.form-painel button:hover{

    background:#cc0000;

}

.camp-fonte{

    margin-bottom:10px;
    color:#bbb;
    font-size:14px;

}

.camp-fonte label{

    display:block;
    margin-bottom:6px;
    cursor:pointer;

}

.camp-fonte input{

    margin-right:6px;

}

.tag-responsavel{

    display:inline-block;
    background:#001133;
    color:#44aaff;
    border:1px solid #113366;
    border-radius:10px;
    padding:2px 8px;
    font-size:11px;
    margin-top:4px;

}

#responsavel select{

    width:100%;
    padding:10px;
    margin-top:5px;
    border:0;
    border-radius:6px;
    background:#1c1c1c;
    color:white;

}

/* GRUPOS DE CLIENTES (ADMIN) */

.grupo-resp{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    cursor:pointer;
    background:#161616;
    border-bottom:1px solid #1f1f1f;
    font-weight:bold;
    user-select:none;
    transition:.2s;

}

.grupo-resp:hover{

    background:#1a1a1a;

}

.grupo-itens .contact{

    padding-left:24px;

}

.ver-mais{

    justify-content:center;
    color:#44aaff;

}

.contador-conv{

    display:inline-block;
    background:#1f1f1f;
    color:#bbb;
    border:1px solid #333;
    border-radius:10px;
    padding:2px 10px;
    font-size:12px;

}

.tabela{

    width:100%;
    border-collapse:collapse;
    font-size:14px;

}

.tabela th,
.tabela td{

    text-align:left;
    padding:8px 10px;
    border-bottom:1px solid #222;

}

.tabela th{

    color:#ff4444;

}

/* VISIBILIDADE / HOME ADMIN */

.oculto{

    display:none !important;

}

.home{

    grid-column:2 / 4;
    overflow:auto;
    padding:30px;
    background:#0d0d0d;

}

.home-grid{

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:20px;

}

.home-card{

    background:#161616;
    border:1px solid #222;
    border-radius:12px;
    padding:25px;
    cursor:pointer;
    transition:.2s;

}

.home-card:hover{

    border-color:#ff0000;
    background:#1a1a1a;

}

.home-icone{

    font-size:28px;

}

.home-card h3{

    margin:12px 0 6px;

}

.home-card p{

    color:#999;
    font-size:14px;

}

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#333;
    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff0000;

}