/* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #252525;
    padding-bottom: 90px;
}

.folheto-home {
    margin: 20px 0;
}

.folheto-home-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    color: #16207f;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(20, 30, 80, .08);
}

.folheto-home-link strong,
.folheto-home-link small {
    display: block;
}

.folheto-home-link small {
    margin-top: 4px;
    color: #565b70;
}

.folheto-home-link > span:last-child {
    margin-left: auto;
    font-size: 28px;
}

.folheto-home-icone {
    font-size: 28px;
}

.folhetos-container {
    max-width: 860px;
    margin: 24px auto;
}

.folheto-card {
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(20, 30, 80, .08);
}

.folheto-card h2 {
    margin-bottom: 6px;
    font-size: 20px;
}

.folheto-card p {
    margin-bottom: 14px;
    color: #565b70;
}

.folheto-card img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    border-radius: 8px;
}

.folheto-admin-item {
    padding: 14px 0;
    border-bottom: 1px solid #ddd;
}

.folheto-admin-item form {
    margin-top: 8px;
}

.container {
    padding: 0 16px;
}


/* =========================================================
   CABEÇALHO PADRÃO
========================================================= */

.header {
    background: linear-gradient(
        135deg,
        #16207f,
        #5f27e0
    );

    color: white;

    padding:
        28px
        20px
        38px;

    border-radius:
        0
        0
        28px
        28px;
}

.header h1 {
    font-size: 24px;
    margin-bottom: 6px;
}

.header p {
    font-size: 14px;
    opacity: .85;
}

.header-small,
.header-voltar {
    font-size: 13px;
    opacity: .85;
    margin-bottom: 7px;
}

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: white;
    text-decoration: none;

    font-size: 14px;

    margin-bottom: 20px;

    opacity: .9;
}


/* =========================================================
   TÍTULOS
========================================================= */

.titulo-secao {
    font-size: 17px;
    font-weight: bold;

    margin-top: 25px;
    margin-bottom: 13px;
}


/* =========================================================
   HOME
========================================================= */

.pagina-inicio .resumo {
    margin-top: -18px;

    background: white;

    border-radius: 18px;

    padding: 20px;

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

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

.mini-card {
    background: #f6f7fb;

    border-radius: 14px;

    padding: 15px 5px;

    text-align: center;
}

.mini-card .numero {
    font-size: 24px;
    font-weight: bold;
    color: #16207f;
}

.mini-card .descricao {
    font-size: 11px;
    color: #6b6b6b;
    margin-top: 4px;
}

.secao {
    margin-top: 22px;
}


/* =========================================================
   CARD PADRÃO
========================================================= */

.card {
    background: white;

    border-radius: 18px;

    padding: 18px;

    margin-bottom: 14px;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}

.card-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-titulo,
.card-label {
    font-size: 15px;
    font-weight: bold;
}

.icone {
    width: 42px;
    height: 42px;

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

    background: #f1edff;

    border-radius: 12px;

    font-size: 20px;
}


/* =========================================================
   INDICADORES
========================================================= */

.indicador-numero,
.valor {
    font-size: 30px;
    font-weight: bold;

    color: #16207f;
}

.valor {
    margin-top: 12px;
}

.indicador {
    background: white;

    border-radius: 17px;

    padding: 17px;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}

.indicador-label {
    font-size: 12px;

    color: #6b6b6b;

    margin-bottom: 8px;
}

.descricao {
    color: #6b6b6b;

    font-size: 12px;

    margin-top: 3px;
}


/* =========================================================
   BARRAS
========================================================= */

.barra {
    width: 100%;
    height: 8px;

    background: #eeeeee;

    border-radius: 20px;

    overflow: hidden;

    margin-top: 14px;
}

.barra-preenchimento {
    height: 100%;

    background: #5f27e0;

    border-radius: 20px;

    transition: width .5s ease;
}


/* =========================================================
   RODAPÉ DOS CARDS
========================================================= */

.card-rodape,
.detalhe {
    display: flex;
    justify-content: space-between;

    margin-top: 12px;

    font-size: 12px;

    color: #6b6b6b;
}


/* =========================================================
   PÁGINA LOJAS - RESUMO
========================================================= */

.pagina-lojas .resumo {
    margin-top: -18px;

    background: white;

    border-radius: 18px;

    padding: 18px;

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

    gap: 10px;

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

.resumo-item {
    text-align: center;
}

.resumo-numero {
    font-size: 23px;
    font-weight: bold;
    color: #16207f;
}

.resumo-texto {
    margin-top: 4px;

    font-size: 11px;

    color: #6b6b6b;
}


/* =========================================================
   BUSCA
========================================================= */

.busca-container {
    margin-top: 20px;
    position: relative;
}

.busca {
    width: 100%;

    border: none;
    outline: none;

    background: white;

    border-radius: 15px;

    padding:
        15px
        16px
        15px
        43px;

    font-size: 14px;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.05);
}

.busca-icone {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 17px;
}


/* =========================================================
   LISTA DE LOJAS
========================================================= */

.titulo-lista {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 24px;
    margin-bottom: 12px;
}

.titulo-lista h2 {
    font-size: 17px;
}

.quantidade {
    font-size: 12px;
    color: #6b6b6b;
}

.loja-card {
    display: block;

    text-decoration: none;

    color: inherit;

    background: white;

    border-radius: 17px;

    padding: 17px;

    margin-bottom: 12px;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);

    transition: .2s;
}

.loja-card:active {
    transform: scale(.98);
}

.loja-topo {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;
}

.loja-info {
    flex: 1;
}

.loja-nome {
    font-size: 15px;

    font-weight: bold;

    color: #222;

    margin-bottom: 6px;
}

.loja-endereco {
    font-size: 12px;

    color: #777;

    line-height: 1.5;
}

.loja-rodape {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 14px;

    padding-top: 13px;

    border-top:
        1px solid #eeeeee;
}

.horario {
    font-size: 12px;
    color: #6b6b6b;
}

.horario strong {
    color: #252525;
}

.seta {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f1edff;

    color: #5f27e0;

    border-radius: 9px;

    font-size: 18px;
}


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

.status {
    padding: 6px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: bold;

    white-space: nowrap;
}

.status-visitada {
    background: #e8f8f2;
    color: #03ad78;
}

.status-pendente {
    background: #fff2e8;
    color: #e67924;
}


/* =========================================================
   SEM RESULTADOS
========================================================= */

.sem-resultados {
    display: none;

    background: white;

    border-radius: 16px;

    padding: 30px 20px;

    margin-top: 15px;

    text-align: center;

    color: #777;
}


/* =========================================================
   DETALHE DA LOJA
========================================================= */

.status-card {
    background: white;

    margin-top: -18px;

    border-radius: 18px;

    padding: 18px;

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

.status-topo {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;
}

.status-titulo {
    font-size: 12px;
    color: #6b6b6b;
    margin-bottom: 6px;
}

.status-principal {
    font-size: 17px;
    font-weight: bold;
}

.status-icone {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    background: #f1edff;

    border-radius: 14px;

    font-size: 22px;
}

.status-horario {
    margin-top: 14px;

    padding-top: 13px;

    border-top: 1px solid #eeeeee;

    font-size: 13px;

    color: #6b6b6b;
}

.indicadores {
    display: grid;

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

    gap: 12px;
}


/* =========================================================
   PENDÊNCIAS
========================================================= */

.pendencias-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    background: white;

    border-radius: 17px;

    padding: 18px;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}

.pendencias-label {
    font-size: 13px;

    color: #6b6b6b;

    margin-bottom: 6px;
}

.pendencias-numero {
    font-size: 24px;

    font-weight: bold;

    color: #16207f;
}

.pendencias-icone {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #fff2e8;

    border-radius: 13px;

    font-size: 20px;
}


/* =========================================================
   HISTÓRICO DE VISITAS
========================================================= */

.historico-card {
    background: white;

    border-radius: 17px;

    overflow: hidden;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}

.historico-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 16px;

    border-bottom:
        1px solid #eeeeee;
}

.historico-item:last-child {
    border-bottom: none;
}

.historico-data {
    font-size: 14px;
    font-weight: bold;
}

.historico-horario {
    margin-top: 4px;

    font-size: 12px;

    color: #777;
}

.historico-status {
    font-size: 11px;

    font-weight: bold;

    padding: 6px 9px;

    border-radius: 20px;

    white-space: nowrap;
}

.concluida {
    background: #e8f8f2;
    color: #03ad78;
}

.pendente {
    background: #fff2e8;
    color: #e67924;
}

.sem-historico {
    text-align: center;

    padding: 28px 20px;

    color: #777;

    font-size: 13px;
}


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

.botao {
    display: block;

    width: 100%;

    margin-top: 20px;

    background: #5f27e0;

    color: white;

    border: none;

    border-radius: 15px;

    padding: 16px;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    text-decoration: none;
}

.botao:active {
    transform: scale(.98);
}


/* =========================================================
   DESEMPENHO - VISÃO GERAL
========================================================= */

.resumo-principal {
    margin-top: -18px;

    background: white;

    border-radius: 18px;

    padding: 20px;

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

.resumo-titulo {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;
}

.resumo-titulo h2 {
    font-size: 16px;
}

.periodo {
    font-size: 11px;

    color: #6b6b6b;

    background: #f4f4f8;

    padding: 6px 10px;

    border-radius: 20px;
}

.metricas {
    display: grid;

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

    gap: 10px;
}

.metrica {
    background: #f6f7fb;

    border-radius: 14px;

    padding: 15px 5px;

    text-align: center;
}

.metrica-numero {
    font-size: 22px;

    font-weight: bold;

    color: #16207f;
}

.metrica-label {
    font-size: 10px;

    color: #6b6b6b;

    margin-top: 5px;
}


/* =========================================================
   GRÁFICO DE DESEMPENHO
========================================================= */

.grafico-card {
    background: white;

    border-radius: 18px;

    padding: 18px;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}

.grafico-titulo {
    font-size: 14px;

    font-weight: bold;

    margin-bottom: 20px;
}

.grafico {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    height: 150px;

    gap: 9px;

    border-bottom:
        1px solid #eeeeee;

    padding: 0 5px;
}

.coluna-container {
    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;
}

.coluna-valor {
    font-size: 9px;

    color: #6b6b6b;

    margin-bottom: 5px;
}

.coluna {
    width: 65%;

    max-width: 24px;

    min-height: 5px;

    height: 0;

    background: linear-gradient(
        180deg,
        #5f27e0,
        #16207f
    );

    border-radius:
        6px
        6px
        0
        0;
}

.mes {
    text-align: center;

    margin-top: 8px;

    font-size: 10px;

    color: #6b6b6b;
}


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

.alerta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #fff7ed;

    border-radius: 17px;

    padding: 17px;
}

.alerta-label {
    font-size: 12px;

    color: #8a551c;

    margin-bottom: 4px;
}

.alerta-numero {
    font-size: 24px;

    font-weight: bold;

    color: #e67924;
}

.alerta-icone {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: white;

    border-radius: 13px;

    font-size: 21px;
}


/* =========================================================
   LOJAS DE ATENÇÃO
========================================================= */

.lojas-card {
    background: white;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}

.loja-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 16px;

    text-decoration: none;

    color: inherit;

    border-bottom:
        1px solid #eeeeee;
}

.loja-item:last-child {
    border-bottom: none;
}

.loja-detalhe {
    font-size: 11px;

    color: #777;

    line-height: 1.5;
}

.loja-score {
    text-align: right;
}

.score {
    font-size: 15px;

    font-weight: bold;

    color: #e67924;
}

.score-label {
    font-size: 9px;

    color: #888;

    margin-top: 3px;
}


/* =========================================================
   MENU INFERIOR
========================================================= */

.menu-inferior {
    position: fixed;

    bottom: 0;
    left: 0;
    right: 0;

    height: 70px;

    background: white;

    display: flex;

    justify-content:
        space-around;

    align-items: center;

    box-shadow:
        0 -3px 15px
        rgba(0,0,0,.08);

    z-index: 100;
}

.menu-item {
    text-align: center;

    text-decoration: none;

    color: #8a8a8a;

    font-size: 11px;

    min-width: 60px;
}

.menu-item span {
    display: block;

    font-size: 22px;

    margin-bottom: 3px;
}

.menu-item.ativo {
    color: #5f27e0;

    font-weight: bold;
}


/* =========================================================
   PERFIL
========================================================= */

.perfil-card {
    margin-top: -18px;

    background: white;

    border-radius: 18px;

    padding: 24px 20px;

    text-align: center;

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


.perfil-avatar {
    width: 72px;
    height: 72px;

    margin:
        0
        auto
        14px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #16207f,
        #5f27e0
    );

    color: white;

    border-radius: 50%;

    font-size: 30px;

    font-weight: bold;
}


.perfil-nome {
    font-size: 20px;

    font-weight: bold;

    color: #222;
}


.perfil-cargo {
    margin-top: 4px;

    font-size: 13px;

    color: #6b6b6b;
}


.perfil-cliente {
    display: inline-block;

    margin-top: 12px;

    padding:
        6px
        12px;

    background: #f1edff;

    color: #5f27e0;

    border-radius: 20px;

    font-size: 11px;

    font-weight: bold;
}


/* =========================================================
   INFORMAÇÕES DO PERFIL
========================================================= */

.informacoes-card {
    background: white;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.05);
}


.informacao-item {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px;

    border-bottom:
        1px solid #eeeeee;
}


.informacao-item:last-child {
    border-bottom: none;
}


.informacao-icone {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f1edff;

    border-radius: 12px;

    font-size: 17px;

    color: #5f27e0;

    font-weight: bold;
}


.informacao-conteudo {
    flex: 1;
}


.informacao-label {
    font-size: 11px;

    color: #888;

    margin-bottom: 4px;
}


.informacao-valor {
    font-size: 14px;

    color: #252525;

    font-weight: 500;

    word-break: break-word;
}


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

.botao-sair {
    
    display: block;
    text-align: center;
    text-decoration: none;

    width: 100%;

    margin-top: 25px;

    margin-bottom: 10px;

    padding: 15px;

    border:
        1px solid #e6e6e6;

    border-radius: 15px;

    background: white;

    color: #d64545;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;
}


.botao-sair:active {
    background: #fff3f3;

    transform: scale(.98);
}


/* =========================================================
   LOGIN
========================================================= */

.pagina-login {
    min-height: 100vh;
    padding-bottom: 0;

    background: linear-gradient(
        160deg,
        #16207f 0%,
        #5f27e0 38%,
        #f4f6f8 38%
    );
}


/* CONTAINER PRINCIPAL */

.login-container {
    min-height: 100vh;

    padding:
        52px
        20px
        30px;
}


/* =========================================================
   MARCA / CABEÇALHO
========================================================= */

.login-marca {
    text-align: center;
    color: white;
    margin-bottom: 32px;
}


.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;
}

.login-logo img {
    width: 130px;
    height: auto;

    object-fit: contain;
}


.login-marca h1 {
    font-size: 24px;
    margin-bottom: 8px;
}


.login-marca p {
    max-width: 290px;
    margin: auto;

    font-size: 13px;
    line-height: 1.5;

    opacity: .88;
}


/* =========================================================
   CARD DO LOGIN
========================================================= */

.login-card {
    background: white;

    border-radius: 22px;

    padding: 25px;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, .12);
}


.login-titulo {
    font-size: 22px;
    font-weight: bold;

    color: #252525;
}


.login-subtitulo {
    margin-top: 5px;
    margin-bottom: 24px;

    color: #777;

    font-size: 13px;
}


/* =========================================================
   CAMPOS
========================================================= */

.campo-grupo {
    margin-bottom: 18px;
}


.campo-label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: bold;

    color: #444;
}


.campo-input {
    width: 100%;
    height: 50px;

    padding:
        0
        14px;

    border:
        1px solid #dedede;

    border-radius: 13px;

    outline: none;

    background: #fafafa;

    color: #252525;

    font-size: 14px;

    transition: .2s;
}


.campo-input::placeholder {
    color: #aaa;
}


.campo-input:focus {
    border-color: #5f27e0;

    background: white;

    box-shadow:
        0 0 0 3px
        rgba(95, 39, 224, .09);
}


/* =========================================================
   SENHA
========================================================= */

.senha-container {
    position: relative;
}


.senha-input {
    padding-right: 50px;
}


.mostrar-senha {
    position: absolute;

    top: 50%;
    right: 7px;

    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border: none;

    background: transparent;

    cursor: pointer;

    font-size: 17px;

    border-radius: 10px;
}


.mostrar-senha:active {
    background: #f2efff;
}


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

.botao-login {
    width: 100%;
    height: 51px;

    margin-top: 7px;

    border: none;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #16207f,
        #5f27e0
    );

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(95, 39, 224, .22);

    transition: .15s;
}


.botao-login:active {
    transform: scale(.98);
}


/* =========================================================
   ERRO
========================================================= */

.login-erro {
    margin-bottom: 18px;

    padding: 12px 14px;

    background: #fff1f1;

    border:
        1px solid #ffd8d8;

    border-radius: 12px;

    color: #c23d3d;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   AJUDA
========================================================= */

.login-ajuda {
    margin-top: 24px;

    text-align: center;

    color: #6b6b6b;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   LOGIN NO DESKTOP
========================================================= */

@media (min-width: 700px) {

    .pagina-login {
        max-width: none;
        border: none;
    }

    .login-container {
        max-width: 460px;
        margin: auto;
    }

}


/* =========================================================
   DESKTOP / SIMULAÇÃO DE CELULAR
========================================================= */

@media (min-width: 700px) {

    body {
        max-width: 480px;

        margin: auto;

        border-left:
            1px solid #eeeeee;

        border-right:
            1px solid #eeeeee;
    }

    .menu-inferior {
        max-width: 480px;

        margin: auto;
    }

}

/* =========================================================
   HOME - INDICADORES E LOJAS DO PROMOTOR
========================================================= */

.resumo-home {
    margin-top: -18px;

    background: white;

    border-radius: 18px;

    padding: 20px;

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

.titulo-secao-home {
    margin-top: 0;
}

.cards-indicadores-home {
    display: grid;

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

    gap: 12px;
}

.indicador-home-card {
    display: block;

    min-width: 0;

    padding: 15px;

    background: #f6f7fb;

    border-radius: 15px;

    color: inherit;

    text-decoration: none;
}

.indicador-home-card:active {
    transform: scale(.98);
}

.indicador-home-topo {
    display: flex;

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

    gap: 6px;

    font-size: 12px;

    color: #656565;
}

.indicador-home-icone {
    font-size: 17px;
}

.indicador-home-valor {
    margin-top: 12px;

    font-size: 27px;
    font-weight: bold;

    color: #16207f;
}

.indicador-home-texto {
    min-height: 28px;

    margin-top: 3px;

    font-size: 10px;
    line-height: 1.35;

    color: #777;
}

.secao-home-lojas {
    margin-top: 24px;
}

.titulo-home-linha {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;
}

.titulo-secao-sem-margem {
    margin-top: 0;
    margin-bottom: 3px;
}

.subtitulo-home {
    font-size: 11px;
    color: #777;
}

.link-ver-todas {
    flex-shrink: 0;

    padding-bottom: 2px;

    color: #5f27e0;

    font-size: 11px;
    font-weight: bold;

    text-decoration: none;
}

.home-lojas-lista {
    display: grid;
    gap: 12px;
}

.home-loja-card {
    display: block;

    padding: 17px;

    background: white;

    border-radius: 18px;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.home-loja-card:active {
    transform: scale(.985);
}

.home-loja-topo {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.home-loja-identificacao {
    min-width: 0;
    flex: 1;
}

.home-loja-nome {
    font-size: 15px;
    font-weight: bold;

    color: #222;
}

.home-loja-cidade {
    margin-top: 4px;

    font-size: 11px;

    color: #888;
}

.home-loja-visita {
    margin-top: 13px;

    padding: 10px 12px;

    background: #f7f7fa;

    border-radius: 11px;

    font-size: 11px;

    color: #666;
}

.home-loja-visita strong {
    color: #252525;
}

.home-loja-metricas {
    display: grid;

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

    gap: 8px;

    margin-top: 14px;
}

.home-loja-metrica {
    min-width: 0;

    padding: 10px 5px;

    background: #fafafa;

    border-radius: 11px;

    text-align: center;
}

.home-loja-metrica span {
    display: block;

    overflow: hidden;

    font-size: 9px;

    color: #888;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-loja-metrica strong {
    display: block;

    margin-top: 5px;

    font-size: 16px;

    color: #16207f;
}

.home-loja-metrica .home-pendencias-numero {
    color: #e67924;
}

.home-loja-rodape {
    display: flex;

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

    margin-top: 14px;

    padding-top: 12px;

    border-top: 1px solid #eeeeee;

    font-size: 11px;
    font-weight: bold;

    color: #5f27e0;
}

.home-loja-seta {
    font-size: 19px;
    line-height: 1;
}

.home-atencao {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    padding: 15px;

    background: #fff7ed;

    border-radius: 17px;
}

.home-atencao-icone {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: white;

    border-radius: 12px;

    font-size: 19px;
}

.home-atencao-conteudo {
    min-width: 0;
}

.home-atencao-titulo {
    font-size: 12px;
    font-weight: bold;

    color: #8a551c;
}

.home-atencao-texto {
    margin-top: 4px;

    font-size: 11px;
    line-height: 1.45;

    color: #8a551c;
}


/* =========================================================
   MENU INFERIOR - 5 OPÇÕES
========================================================= */

.menu-inferior {
    gap: 0;
}

.menu-item {
    flex: 1;
    min-width: 0;
    padding: 0 2px;
    font-size: 9.5px;
}

.menu-item span {
    font-size: 20px;
}


/* =========================================================
   ASSIDUIDADE
========================================================= */

.painel-principal {
    margin-top: -18px;
    padding: 20px;

    background: white;

    border-radius: 18px;

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

.painel-principal-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.painel-principal-label {
    font-size: 12px;
    color: #6b6b6b;
}

.painel-principal-valor {
    margin-top: 5px;

    font-size: 34px;
    font-weight: bold;

    color: #16207f;
}

.selo-meta {
    flex-shrink: 0;

    padding: 6px 9px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: bold;
}

.selo-meta-ok {
    background: #e8f8f2;
    color: #03ad78;
}

.selo-meta-atencao {
    background: #fff2e8;
    color: #e67924;
}

.barra-grande {
    margin-top: 17px;
}

.painel-meta-texto {
    margin-top: 9px;

    font-size: 11px;
    color: #777;
}

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

.resumo-assiduidade-card {
    padding: 16px 5px;

    background: white;

    border-radius: 15px;

    text-align: center;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.resumo-assiduidade-numero {
    font-size: 23px;
    font-weight: bold;
    color: #16207f;
}

.resumo-assiduidade-label {
    margin-top: 5px;

    font-size: 9.5px;
    line-height: 1.25;

    color: #777;
}

.destaque-verde {
    color: #03ad78;
}

.destaque-laranja {
    color: #e67924;
}

.coluna-assiduidade {
    background: linear-gradient(
        180deg,
        #03ad78,
        #16207f
    );
}

.titulo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contador-discreto {
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    background: #f1edff;
    color: #5f27e0;

    border-radius: 20px;

    font-size: 10px;
}

.ocorrencias-card {
    overflow: hidden;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.ocorrencia-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px;

    border-bottom: 1px solid #eeeeee;
}

.ocorrencia-item:last-child {
    border-bottom: none;
}

.ocorrencia-conteudo {
    min-width: 0;
    flex: 1;
}

.ocorrencia-data {
    font-size: 10px;
    color: #888;
}

.ocorrencia-tipo {
    margin-top: 4px;

    font-size: 13px;
    font-weight: bold;

    color: #252525;
}

.ocorrencia-motivo {
    margin-top: 4px;

    font-size: 11px;
    color: #777;
}

.estado-vazio {
    padding: 26px 18px;

    text-align: center;

    font-size: 12px;
    color: #777;
}


/* =========================================================
   EFETIVIDADE
========================================================= */

.resumo-efetividade {
    margin-top: -18px;
}

.metricas-efetividade {
    grid-template-columns: repeat(3, 1fr);
}

.resultado-lojas-card {
    overflow: hidden;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.resultado-loja-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px;

    color: inherit;
    text-decoration: none;

    border-bottom: 1px solid #eeeeee;
}

.resultado-loja-item:last-child {
    border-bottom: none;
}

.resultado-loja-info {
    min-width: 0;
    flex: 1;
}

.resultado-loja-nome {
    font-size: 14px;
    font-weight: bold;

    color: #252525;
}

.resultado-loja-metricas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;

    margin-top: 7px;
}

.resultado-loja-metricas span {
    font-size: 10px;
    color: #777;
}

.resultado-loja-metricas strong {
    margin-left: 3px;
    color: #16207f;
}


/* =========================================================
   ASSIDUIDADE - REFINO BASEADO NO PAINEL OPERACIONAL
========================================================= */

.painel-meta-linha {
    margin-top: 10px;

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

    font-size: 11px;
    color: #777;
}

.periodo-chip {
    flex-shrink: 0;

    padding: 5px 9px;

    background: #f4f4f8;

    border-radius: 20px;

    color: #6b6b6b;

    font-size: 10px;
}

.grade-resumo-assiduidade-4 {
    grid-template-columns: repeat(2, 1fr);
}

.destaque-azul {
    color: #2471c8;
}

.alerta-assiduidade {
    margin-top: 14px;

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

    padding: 15px;

    background: #fff7ed;

    border-radius: 16px;

    border: 1px solid #ffe2c2;
}

.alerta-assiduidade-icone {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    background: white;

    border-radius: 11px;

    font-size: 18px;
}

.alerta-assiduidade-titulo {
    font-size: 12px;
    font-weight: bold;

    color: #9a5b16;
}

.alerta-assiduidade-texto {
    margin-top: 3px;

    font-size: 11px;
    line-height: 1.4;

    color: #8a551c;
}

.meta-legenda {
    padding: 5px 8px;

    background: #eef5ff;

    color: #2471c8;

    border-radius: 20px;

    font-size: 9px;
    font-weight: bold;
}

.assiduidade-dia-card {
    padding: 7px 16px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.assiduidade-dia-item {
    display: grid;

    grid-template-columns:
        52px
        1fr
        42px;

    align-items: center;

    gap: 10px;

    padding: 11px 0;

    border-bottom: 1px solid #eeeeee;
}

.assiduidade-dia-item:last-child {
    border-bottom: none;
}

.assiduidade-dia-data {
    font-size: 10px;
    font-weight: bold;

    color: #666;
}

.assiduidade-dia-barra {
    width: 100%;
    height: 7px;

    overflow: hidden;

    background: #eeeeee;

    border-radius: 20px;
}

.assiduidade-dia-preenchimento {
    height: 100%;

    border-radius: 20px;
}

.assiduidade-dia-ok {
    background: #0a9f35;
}

.assiduidade-dia-alerta {
    background: #e6a11a;
}

.assiduidade-dia-valor {
    text-align: right;

    font-size: 10px;
    font-weight: bold;
}

.texto-ok {
    color: #0a9f35;
}

.texto-alerta {
    color: #d48b00;
}


/* =========================================================
   EFETIVIDADE - REFINO BASEADO NO PAINEL OPERACIONAL
========================================================= */

.painel-efetividade {
    margin-top: -18px;
}

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

.efetividade-resumo-card {
    min-width: 0;

    padding: 15px 7px;

    background: white;

    border-radius: 15px;

    text-align: center;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.efetividade-resumo-label {
    min-height: 25px;

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

    font-size: 10px;
    line-height: 1.2;

    color: #777;
}

.efetividade-resumo-numero {
    margin-top: 6px;

    font-size: 20px;
    font-weight: bold;

    color: #16207f;
}

.abastecimento-semanal-card {
    padding: 7px 16px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.abastecimento-semana {
    display: grid;

    grid-template-columns:
        38px
        1fr
        47px;

    align-items: center;

    gap: 10px;

    padding: 11px 0;

    border-bottom: 1px solid #eeeeee;
}

.abastecimento-semana:last-child {
    border-bottom: none;
}

.abastecimento-semana-label {
    font-size: 10px;
    font-weight: bold;

    color: #666;
}

.abastecimento-semana-barra {
    height: 7px;

    overflow: hidden;

    background: #eeeeee;

    border-radius: 20px;
}

.abastecimento-semana-preenchimento {
    height: 100%;

    border-radius: 20px;
}

.abastecimento-semana-ok {
    background: #2471c8;
}

.abastecimento-semana-alerta {
    background: #e6a11a;
}

.abastecimento-semana-valor {
    text-align: right;

    font-size: 10px;
    font-weight: bold;
}

.categorias-efetividade-card {
    overflow: hidden;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.categoria-efetividade-item {
    padding: 14px 16px;

    border-bottom: 1px solid #eeeeee;
}

.categoria-efetividade-item:last-child {
    border-bottom: none;
}

.categoria-efetividade-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.categoria-efetividade-nome {
    min-width: 0;

    flex: 1;

    font-size: 12px;
    font-weight: bold;

    color: #252525;
}

.categoria-efetividade-percentual {
    flex-shrink: 0;

    font-size: 12px;
    font-weight: bold;
}

.categoria-efetividade-detalhe {
    margin-top: 4px;

    font-size: 10px;

    color: #888;
}

.categoria-efetividade-barra {
    height: 6px;

    margin-top: 9px;
}

.barra-atencao {
    background: #e6a11a;
}

.pontos-atencao-card {
    overflow: hidden;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, .05);
}

.ponto-atencao-item {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 14px 15px;

    border-bottom: 1px solid #eeeeee;
}

.ponto-atencao-item:last-child {
    border-bottom: none;
}

.ponto-atencao-icone {
    width: 31px;
    height: 31px;

    flex-shrink: 0;

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

    background: #fff2e8;

    color: #d97706;

    border-radius: 10px;

    font-size: 14px;
    font-weight: bold;
}

.ponto-atencao-conteudo {
    min-width: 0;

    flex: 1;
}

.ponto-atencao-nome {
    font-size: 11px;
    font-weight: bold;

    color: #333;
}

.ponto-atencao-detalhe {
    margin-top: 3px;

    font-size: 9px;

    color: #888;
}

.ponto-atencao-valor {
    flex-shrink: 0;

    font-size: 11px;
    font-weight: bold;
}

/* Identidade GNX: direção Aura */
:root {
    --gnx-ink: #211b39;
    --gnx-purple: #62419a;
    --gnx-lilac: #eee8fb;
    --gnx-teal: #16b8c2;
}

body {
    background: #f5f7f8;
    color: var(--gnx-ink);
}

.home-marca {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: #fff;
    font-size: 12px;
    color: #403a5c;
}

.home-marca img {
    display: block;
    width: 112px;
    height: auto;
}

.header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(125deg, #282052, #433078 58%, #68439d);
    border-radius: 0 0 26px 26px;
    padding: 24px 22px 40px;
}

.header::before,
.header::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.header::before {
    width: 230px;
    height: 230px;
    right: -85px;
    top: -105px;
    background: radial-gradient(circle, rgba(22, 184, 194, .64), transparent 68%);
    animation: gnx-flutuar 12s ease-in-out infinite alternate;
}

.header::after {
    width: 190px;
    height: 190px;
    right: -42px;
    bottom: -115px;
    border: 1px solid rgba(255, 255, 255, .27);
    background: radial-gradient(circle at 35% 35%, rgba(167, 111, 240, .30), transparent 70%);
    animation: gnx-flutuar 15s ease-in-out infinite alternate-reverse;
}

.header h1 {
    position: relative;
    max-width: 90%;
    font-size: clamp(23px, 6vw, 30px);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.header p {
    position: relative;
    max-width: 320px;
    line-height: 1.45;
    color: #e8dcfa;
    opacity: 1;
}

.header-small {
    position: relative;
    margin-bottom: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    opacity: .9;
}

.voltar {
    min-height: 36px;
    gap: 9px;
    margin-bottom: 18px;
    padding: 6px 13px 6px 8px;
    border: 1px solid rgba(255, 255, 255, .27);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 12px;
    font-weight: 700;
    opacity: 1;
    transition: background .2s ease, transform .2s ease;
}

.voltar span {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 22px;
    line-height: 1;
}

.voltar:hover {
    background: rgba(255, 255, 255, .22);
}

.voltar:active {
    transform: scale(.97);
}

.pagina-inicio .header {
    min-height: 190px;
    padding-top: 32px;
    padding-bottom: 48px;
}

.pagina-inicio .resumo-home {
    position: relative;
    margin-top: -18px;
    border-radius: 22px;
    box-shadow: 0 9px 30px rgba(38, 26, 79, .08);
}

.indicador-home-card {
    background: #fafbfc;
    border: 1px solid #f0edf5;
    transition: transform .2s ease, box-shadow .2s ease;
}

.indicador-home-card:hover,
.home-loja-card:hover {
    box-shadow: 0 7px 24px rgba(60, 39, 112, .12);
}

.indicador-home-valor {
    color: #181d3a;
}

.barra {
    height: 5px;
    background: #e2e7ea;
}

.barra-preenchimento {
    background: linear-gradient(90deg, var(--gnx-teal), #7952d7);
}

.folheto-home-link {
    background: #eee9fc;
    color: #2c2053;
    box-shadow: none;
    transition: background .2s ease, transform .2s ease;
}

.folheto-home-link:hover {
    background: #e8defa;
}

.folheto-home-icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: #ded4f8;
    font-size: 23px;
}

.link-ver-todas,
.home-loja-rodape {
    color: #62419a;
}

.menu-inferior {
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 5px 7px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #eef0f2;
    box-shadow: 0 -6px 24px rgba(35, 26, 65, .07);
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 13px;
    color: #657080;
    line-height: 1.15;
    transition: background .2s ease, color .2s ease;
}

.menu-item span {
    margin-bottom: 4px;
    width: 23px;
    height: 23px;
    background-color: currentColor;
    font-size: 0;
    line-height: 1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.menu-item[href$="/inicio"] span {
    -webkit-mask-image: url('../img/nav-inicio.svg');
    mask-image: url('../img/nav-inicio.svg');
}

.menu-item[href$="/lojas"] span {
    -webkit-mask-image: url('../img/nav-lojas.svg');
    mask-image: url('../img/nav-lojas.svg');
}

.menu-item[href$="/assiduidade"] span {
    -webkit-mask-image: url('../img/nav-assiduidade.svg');
    mask-image: url('../img/nav-assiduidade.svg');
}

.menu-item[href$="/efetividade"] span,
.menu-item[href$="/desempenho"] span {
    -webkit-mask-image: url('../img/nav-efetividade.svg');
    mask-image: url('../img/nav-efetividade.svg');
}

.menu-item[href$="/perfil"] span {
    -webkit-mask-image: url('../img/nav-perfil.svg');
    mask-image: url('../img/nav-perfil.svg');
}

.menu-item.ativo {
    background: #e5ddfa;
    color: #59338f;
}

.menu-item:hover:not(.ativo) {
    background: #f4f0fc;
    color: #59338f;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--gnx-teal);
    outline-offset: 3px;
}

.pagina-login {
    background: linear-gradient(160deg, #282052 0%, #68439d 38%, #f5f7f8 38%);
}

.login-logo {
    width: max-content;
    margin: 0 auto 22px;
    padding: 11px 17px;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(28, 21, 58, .14);
}

.login-logo img {
    width: 148px;
}

@keyframes gnx-flutuar {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-22px, 18px, 0) scale(1.13); }
}

@media (prefers-reduced-motion: reduce) {
    .header::before,
    .header::after {
        animation: none;
    }

    .voltar,
    .indicador-home-card,
    .folheto-home-link,
    .menu-item {
        transition: none;
    }
}

/* Administração e comunicações */
.pagina-admin {
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 30px;
    border: 0;
    background: #f5f6f9;
}

.admin-shell {
    width: min(100% - 32px, 1050px);
    margin: 26px auto 0;
}

.admin-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 155px;
    padding: 25px 30px;
    border-radius: 25px;
    background: linear-gradient(125deg, #282052, #57408c 65%, #7854ae);
    color: #fff;
}

.admin-hero img {
    display: block;
    width: 118px;
    padding: 9px;
    border-radius: 12px;
    background: white;
}

.admin-kicker {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #dfd4f5;
}

.admin-hero h1 {
    font-size: clamp(25px, 4vw, 34px);
    letter-spacing: -.03em;
}

.admin-hero p {
    margin-top: 6px;
    font-size: 14px;
    color: #ede6fa;
}

.admin-sair {
    margin-left: auto;
    padding: 9px 15px;
    border: 1px solid #ac9ace;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.admin-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    margin: 16px 0 22px;
    padding: 5px;
    border: 1px solid #e9e6f0;
    border-radius: 15px;
    background: #fff;
}

.admin-nav a {
    flex: 1;
    min-width: max-content;
    padding: 11px 18px;
    border-radius: 11px;
    color: #514b65;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.admin-nav a.ativo,
.admin-nav a:hover {
    background: #eee8fb;
    color: #58348d;
}

.admin-card,
.admin-resumo a,
.admin-acoes a {
    background: #fff;
    border: 1px solid #ece9f2;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(40, 30, 80, .04);
}

.admin-card {
    margin-bottom: 18px;
    padding: 24px;
}

.admin-card h2 {
    margin-bottom: 7px;
    font-size: 20px;
}

.admin-secao-topo p,
.admin-descricao {
    color: #6e6a7b;
    font-size: 13px;
}

.admin-resumo,
.admin-acoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admin-resumo a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    color: #514b65;
    text-decoration: none;
    font-size: 12px;
}

.admin-resumo strong {
    color: #503281;
    font-size: 28px;
}

.admin-tabela-wrap { overflow-x: auto; margin-top: 20px; }
.admin-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-tabela th { text-align: left; color: #777187; font-size: 11px; }
.admin-tabela th,
.admin-tabela td { padding: 13px 10px; border-bottom: 1px solid #efedf4; }
.admin-tabela a,
.admin-publicacao-acoes a { color: #5c3792; font-weight: 700; text-decoration: none; }
.admin-status {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eee8fb;
    color: #57358c;
    font-size: 11px;
    font-weight: 700;
}
.admin-vazio { padding: 20px 0 4px; color: #777187; font-size: 13px; }
.admin-aviso { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: #e7f7f6; color: #135e65; }

.admin-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-acoes a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    color: var(--gnx-ink);
    text-decoration: none;
}
.admin-acoes strong { font-size: 17px; }
.admin-acoes small { color: #777187; font-size: 12px; }
.admin-acoes b { margin-top: 10px; color: #5c3792; font-size: 12px; }
.admin-acao-icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eee8fb;
    color: #63429b;
    font-size: 22px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-top: 18px;
}
.admin-campo-largo { grid-column: 1 / -1; }
.admin-textarea { min-height: 130px; resize: vertical; font: inherit; }
.publico-selector {
    margin: 4px 0 22px;
    padding: 19px;
    border: 1px solid #ded7ef;
    border-radius: 16px;
    background: #faf9fe;
}
.publico-selector legend { padding: 0 6px; color: #3b285e; font-weight: 700; }
.publico-selector > p { margin-bottom: 18px; color: #686176; font-size: 12px; line-height: 1.5; }
.publico-campo { margin-bottom: 15px; }
.publico-campo:last-child { margin-bottom: 0; }
.publico-resultados:not(:empty) {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 5px;
    padding: 6px;
    border: 1px solid #e2dced;
    border-radius: 10px;
    background: #fff;
    color: #6e6879;
    font-size: 12px;
}
.publico-resultados button {
    display: block;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: #302b42;
    text-align: left;
    cursor: pointer;
}
.publico-resultados button:hover { background: #f2ecfb; }
.publico-selecionados { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.publico-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 8px 6px 11px;
    border-radius: 999px;
    background: #e9e1f8;
    color: #3c2863;
    font-size: 12px;
}
.publico-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publico-chip button { border: 0; background: none; color: #57358c; font-size: 18px; cursor: pointer; }
.admin-publicar { max-width: 280px; }
.admin-publicacao {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #efedf4;
}
.admin-publicacao:last-child { border-bottom: 0; }
.admin-publicacao strong { font-size: 14px; }
.admin-publicacao p { margin: 5px 0; color: #665f72; font-size: 12px; }
.admin-publicacao small { color: #6d5b8a; }
.admin-mensagem { max-width: 620px; white-space: pre-wrap; }
.admin-publicacao-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-botao-discreto { padding: 7px 9px; border: 0; background: #f8e9e9; color: #8c3232; border-radius: 8px; cursor: pointer; }
.admin-conferencia dl { display: grid; gap: 10px; margin: 14px 0 26px; }
.admin-conferencia dl div { display: grid; grid-template-columns: minmax(130px, 30%) 1fr; gap: 10px; padding: 12px; border-radius: 9px; background: #faf9fd; }
.admin-conferencia dt { color: #777187; font-size: 12px; }
.admin-conferencia dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.admin-confirmacao { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0; line-height: 1.45; font-size: 13px; }
.admin-decisao { display: flex; gap: 10px; }
.admin-decisao button { padding: 11px 18px; border: 0; border-radius: 9px; background: #62419a; color: #fff; cursor: pointer; }
.admin-decisao button + button { background: #f8e9e9; color: #8c3232; }
.admin-decisao button:disabled { opacity: .45; cursor: not-allowed; }
.admin-voltar { display: inline-block; margin-top: 25px; color: #62419a; font-weight: 700; text-decoration: none; }

.avisos-home { margin-top: 24px; }
.aviso-home-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
    padding: 14px;
    border-radius: 15px;
    background: #fff;
    color: var(--gnx-ink);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(40, 30, 80, .05);
}
.aviso-home-card > span:nth-child(2) { flex: 1; min-width: 0; }
.aviso-home-card strong,
.aviso-home-card small { display: block; }
.aviso-home-card strong { font-size: 13px; }
.aviso-home-card small { overflow: hidden; margin-top: 4px; color: #6e6879; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.aviso-home-card > span:last-child { color: #62419a; font-size: 23px; }
.aviso-home-sinal { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: #eee8fb; color: #62419a; }
.avisos-home-vazio { padding: 13px 0; color: #777187; font-size: 12px; }
.avisos-container { padding-top: 22px; }
.aviso-card { margin-bottom: 14px; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(40, 30, 80, .05); }
.aviso-card-topo { display: flex; justify-content: space-between; color: #694b9d; }
.aviso-card-topo small { color: #777187; }
.aviso-card h2 { margin: 11px 0 8px; font-size: 18px; }
.aviso-card p { color: #4f4a5b; line-height: 1.55; white-space: pre-wrap; }

@media (max-width: 640px) {
    .admin-shell { width: min(100% - 20px, 1050px); margin-top: 10px; }
    .admin-hero { flex-wrap: wrap; gap: 14px; padding: 22px; border-radius: 20px; }
    .admin-hero img { width: 95px; }
    .admin-sair { margin-left: 0; }
    .admin-resumo { gap: 7px; }
    .admin-resumo a { padding: 11px; font-size: 10px; }
    .admin-resumo strong { font-size: 22px; }
    .admin-acoes { grid-template-columns: 1fr; }
    .admin-card { padding: 18px; }
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-publicacao { flex-direction: column; }
}