*{box-sizing:border-box}
body{margin:0;background:#0d0d0e;color:#f5f2eb;font-family:Arial,sans-serif}
.app{display:flex;min-height:100vh}
.menu{width:250px;min-width:250px;background:#151516;border-right:1px solid #39332a;padding:25px 15px;display:flex;flex-direction:column}
.logo{display:flex;align-items:center;gap:12px;padding:5px 8px 30px;border-bottom:1px solid #39332a}
.logo span{border:2px solid #c8a45d;border-radius:50%;padding:12px;color:#c8a45d;font-weight:bold}
.logo h1{font-size:14px;letter-spacing:2px;margin:0}
.logo p{color:#c8a45d;font-size:10px;letter-spacing:2px;margin:6px 0 0}
.menu-titulo{color:#777;font-size:10px;letter-spacing:2px;margin:30px 10px 12px}
.menu nav{display:flex;flex-direction:column;gap:7px}
.menu-item{background:transparent;color:#aaa;border:0;text-align:left;padding:14px;border-radius:7px;cursor:pointer;font-size:14px;margin:0;transition:.2s}
.menu-item:hover,.menu-item.ativo{background:#302819;color:#e1c27e}
.menu-rodape{margin-top:auto;padding:20px 10px 0;border-top:1px solid #39332a;display:flex;flex-direction:column;gap:6px;color:#c8a45d;font-size:11px}
.menu-rodape small{color:#777}
.conteudo{flex:1;min-width:0;padding:30px}
.topo{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;border-bottom:1px solid #39332a;padding-bottom:20px;margin-bottom:25px}
.topo h2{color:#e1c27e;margin:0}.topo p{color:#999;margin-bottom:0}.status{color:#c8a45d;font-size:11px}
.pagina{display:none}.pagina.ativa{display:block}
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-bottom:25px}
.card,.painel{background:#19191b;border:1px solid #39332a;border-radius:12px;padding:20px;margin-bottom:20px}
.card p{color:#aaa;font-size:13px}.card strong{color:#e1c27e;font-size:27px}
.painel h3{color:#e1c27e;margin-top:0}.painel p{color:#aaa;line-height:1.6}
label{display:block;color:#c8a45d;margin-top:14px}
input,select{width:100%;padding:12px;margin-top:7px;border-radius:7px;border:1px solid #444;background:#101012;color:white}
input[type=checkbox]{width:auto}.checkbox-label{display:flex;align-items:center;gap:8px}
button{padding:13px 20px;background:#c8a45d;border:0;border-radius:7px;font-weight:bold;cursor:pointer}
button:hover{background:#e1c27e}
form>button{margin-top:18px}
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:15px}
th,td{padding:13px;border-bottom:1px solid #39332a;text-align:left;white-space:nowrap}
th{color:#c8a45d;font-size:13px}td{color:#ddd;font-size:13px}
td button{padding:8px 11px;margin:2px;font-size:12px}
#listaClientes td:last-child,#listaAgendamentos td:last-child{min-width:150px}
footer{text-align:center;padding:25px;color:#777;font-size:11px}
.recurso-config{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid #39332a}
.recurso-config p{margin-bottom:0;font-size:13px}
.controle{display:flex;align-items:center;gap:8px;white-space:nowrap}.controle input{width:auto;margin:0}
.modal-fundo{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-conteudo{background:#181818;border:1px solid #b99750;border-radius:12px;padding:25px;width:100%;max-width:430px;color:white}
.modal-conteudo h2{color:#d4af62;margin-bottom:20px}
.modal-conteudo label{display:block;margin-top:15px;color:#d4af62}
.modal-conteudo input,.modal-conteudo select{width:100%;padding:12px;margin-top:7px;background:#101012;color:white;border:1px solid #444;border-radius:7px}
.modal-acoes{display:flex;gap:10px;margin-top:25px}.modal-acoes button{flex:1;padding:12px}
#cancelarAtendimento{background:#333;color:white}
.ajuda{font-size:12px;color:#888;margin-top:10px}
.horario-linha{display:grid;grid-template-columns:130px 1fr 1fr 90px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #39332a}
.horario-linha label{margin:0}.horario-linha input{margin:0}.horario-linha .dia-check{display:flex;align-items:center;gap:8px;color:#ddd}.horario-linha .dia-check input{width:auto;margin:0}
.status-cancelado{color:#e28b8b}.status-confirmado{color:#9bd49b}.status-em-atendimento{color:#e1c27e;font-weight:800}
@media(max-width:800px){.app{flex-direction:column}.menu{width:100%;min-width:0}.menu nav{display:grid;grid-template-columns:repeat(2,1fr)}.menu-rodape{margin-top:20px}.conteudo{padding:20px 15px}.horario-linha{grid-template-columns:1fr 1fr}.horario-linha .dia-check{grid-column:1/-1}}

/* Ficha individual e extrato do cliente */
.ficha-fundo{align-items:flex-start;overflow-y:auto}
.ficha-conteudo{max-width:1100px;margin:20px auto;max-height:none}
.ficha-topo{display:flex;justify-content:space-between;align-items:center;gap:15px}
.ficha-topo h2{margin:0}.ficha-topo p{color:#aaa;margin:7px 0}
.ficha-indicadores{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:18px 0}
.ficha-indicadores .card{margin:0;padding:14px}.ficha-indicadores .card strong{font-size:20px}
.ficha-secao{border-top:1px solid #39332a;padding-top:15px;margin-top:18px}
.ficha-secao h3{color:#e1c27e}.form-movimentacao{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:8px;align-items:end}
.form-movimentacao label{margin-top:8px}.form-movimentacao button{margin-top:18px;min-height:43px}
@media(max-width:700px){.form-movimentacao{grid-template-columns:1fr}.ficha-conteudo{padding:16px}.ficha-topo{align-items:flex-start}}

#listaClientes td:last-child button:nth-child(2){background:#e1c27e;color:#17130b;border:2px solid #fff0c2;font-weight:800;padding:10px 13px}

.estoque-alerta{color:#ff9b82;font-weight:bold}
#pagina-produtos form{max-width:760px}
#pagina-produtos .painel{overflow:hidden}

/* Financeiro */
.form-financeiro{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:10px;align-items:end}
.form-financeiro label{margin-top:8px}
.form-financeiro button{margin-top:18px;min-height:43px}
.filtros-financeiro{display:grid;grid-template-columns:repeat(2,minmax(180px,260px));gap:14px}
#pagina-financeiro .painel{overflow:hidden}
@media(max-width:700px){.form-financeiro,.filtros-financeiro{grid-template-columns:1fr}}


/* Experiência mobile: navegação compacta e telas adaptadas ao celular */
@media(max-width:800px){
  .app{display:block;min-height:100vh}
  .menu{position:sticky;top:0;z-index:100;width:100%;min-width:0;padding:10px 12px 8px;border-right:0;border-bottom:1px solid #39332a}
  .logo{padding:2px 4px 10px;gap:9px}
  .logo span{padding:8px;font-size:13px}
  .logo h1{font-size:12px;letter-spacing:1.5px}
  .logo p{font-size:9px;margin-top:3px}
  .menu-titulo,.menu-rodape{display:none}
  .menu nav{display:flex;flex-direction:row;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 5px;scrollbar-width:thin}
  .menu-item{flex:0 0 auto;padding:10px 12px;font-size:12px;white-space:nowrap}
  .conteudo{padding:17px 12px 28px}
  .topo{align-items:flex-start;margin-bottom:17px;padding-bottom:14px}
  .topo h2{font-size:21px}
  .topo p{font-size:12px;margin-top:6px}
  .status{font-size:9px;padding-top:5px}
  .painel,.card{padding:15px;border-radius:10px}
  .indicadores{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:15px}
  .card{margin-bottom:0;min-width:0}
  .card p{font-size:11px;margin:0 0 8px}
  .card strong{font-size:21px;overflow-wrap:anywhere}
  input,select{font-size:16px;min-height:44px}
  button{min-height:44px}
  form>button{width:100%}
  .tabela{margin-right:-3px}
  table{min-width:650px}
  th,td{padding:10px;font-size:12px}
  .horario-linha{grid-template-columns:1fr 1fr;gap:8px}
  .form-financeiro,.filtros-financeiro,.form-movimentacao{grid-template-columns:1fr}
  .ficha-conteudo{width:100%;margin:0;padding:14px}
  .ficha-indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha-topo{flex-wrap:wrap}
  .modal-fundo{padding:10px;align-items:flex-start;overflow-y:auto}
  .modal-conteudo{margin:12px auto;padding:18px}
}
@media(max-width:420px){
  .conteudo{padding-left:10px;padding-right:10px}
  .topo h2{font-size:19px}
  .status{max-width:115px;text-align:right;line-height:1.4}
  .indicadores{gap:7px}
  .card{padding:12px}
  .card strong{font-size:19px}
  .menu-item{padding:9px 10px;font-size:11px}
}

.acoes-backup{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.acoes-backup button{min-height:46px}
#statusBackup{overflow-wrap:anywhere}
@media(max-width:600px){.acoes-backup{display:grid;grid-template-columns:1fr}.acoes-backup button{width:100%}}

/* Módulo de planos e pacotes */
.form-planos{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px;align-items:end}
.form-planos label{margin-top:8px}
.form-planos button{margin-top:18px;min-height:44px}
#pagina-planos .painel{overflow:hidden}
#pagina-planos .filtros-financeiro{margin-bottom:12px}
@media(max-width:700px){.form-planos{grid-template-columns:1fr}}


/* Relatórios */
.rel-filtros{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr)) auto;gap:10px;align-items:end;margin-top:16px}
.rel-filtros button{min-height:44px}
.rel-indicadores{margin-top:16px}
#pagina-relatorios .painel{margin-bottom:16px}
@media(max-width:700px){.rel-filtros{grid-template-columns:1fr}.rel-filtros button{width:100%}}

/* Gestão de comissões */
#pagina-colaboradores .painel{overflow:hidden}
#pagina-colaboradores .form-financeiro{grid-template-columns:repeat(3,minmax(170px,1fr))}
#pagina-colaboradores button:disabled{opacity:.5;cursor:not-allowed;background:#555;color:#ddd}
#listaComissoesPendentes td:nth-child(5){color:#e1c27e;font-weight:700}
@media(max-width:700px){#pagina-colaboradores .form-financeiro{grid-template-columns:1fr}}
/* =====================================
   MENU PREMIUM - ALVES DO CORTE
===================================== */

.menu {
    width: 260px;
    min-width: 260px;
    padding: 26px 18px;
    background: #111112;
    border-right: 1px solid #292929;
}

.menu nav {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 25px;
}

.menu-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid #292929;
    border-radius: 10px;
    background: #19191b;
    color: #c5c5c5;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .25s ease;
}

.menu-item:hover {
    background: #252321;
    border-color: #a98542;
    color: #e6c477;
    transform: translateX(3px);
}

.menu-item.ativo {
    background: linear-gradient(110deg, #3a2d18, #211b12);
    border: 1px solid #c29a50;
    color: #e6c477;
    box-shadow: 0 3px 12px rgba(194,154,80,.12);
}

.menu-titulo {
    margin-top: 35px;
    color: #a98542;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
}

.menu-rodape {
    border-top: 1px solid #292929;
    padding-top: 18px;
    margin-top: 35px;
}

/* ÁREA PRINCIPAL */

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

/* NAVEGAÇÃO EM TELAS MENORES */

@media (max-width: 850px) {
    .app {
        flex-direction: column;
    }

    .menu {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid #292929;
    }

    .menu nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .menu-item {
        min-height: 46px;
        padding: 10px;
        font-size: 12px;
    }

    .menu-rodape {
        display: none;
    }
}/* ==========================================
   ALVES DO CORTE - NOVA NAVEGAÇÃO PREMIUM
========================================== */

.menu {
    width: 275px;
    min-width: 275px;
    padding: 25px 16px;
    background: #111112;
    border-right: 1px solid #30291e;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.logo {
    padding-bottom: 25px;
    margin-bottom: 8px;
}

.menu-titulo {
    color: #b99750;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 22px 5px 16px;
}

.menu nav {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.menu-item {
    width: 100%;
    min-height: 49px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #1a1a1c;
    border: 1px solid #303033;
    border-radius: 9px;
    color: #c5c5c5;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: .25s ease;
}

.menu-item:hover {
    background: #252119;
    border-color: #a98542;
    color: #e1c27e;
    transform: translateX(3px);
}

.menu-item.ativo {
    background: linear-gradient(110deg, #382d1b, #211b12);
    border: 1px solid #c8a45d;
    color: #f0d18a;
    box-shadow: 0 3px 15px rgba(200,164,93,.12);
    position: relative;
}

.menu-item.ativo::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: #e1c27e;
    border-radius: 5px;
}

.menu-rodape {
    margin-top: auto;
    padding: 22px 10px 5px;
    border-top: 1px solid #30291e;
}

/* ÁREA PRINCIPAL */

.conteudo {
    flex: 1;
    min-width: 0;
    padding: 30px;
}

/* TRANSIÇÃO DAS PÁGINAS */

.pagina {
    display: none;
}

.pagina.ativa {
    display: block;
    animation: entradaPagina .25s ease;
}

@keyframes entradaPagina {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE */

@media(max-width:850px) {

    .app {
        flex-direction: column;
    }

    .menu {
        width: 100%;
        min-width: 0;
        height: auto;
        position: relative;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid #30291e;
    }

    .logo {
        padding-bottom: 15px;
    }

    .menu-titulo {
        margin: 15px 5px;
    }

    .menu nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .menu-item {
        min-height: 47px;
        padding: 10px;
        font-size: 12px;
        justify-content: flex-start;
    }

    .menu-rodape {
        display: none;
    }

    .conteudo {
        padding: 20px 14px;
    }
}

@media(max-width:380px) {
    .menu nav {
        grid-template-columns: 1fr;
    }
}/* ==========================================
   ALVES DO CORTE - DASHBOARD PREMIUM V2
========================================== */

:root {
    --ouro: #c8a45d;
    --ouro-claro: #e6c982;
    --fundo: #0d0d0e;
    --superficie: #171719;
    --superficie-2: #1d1d20;
    --borda: #34312b;
    --texto: #f5f2eb;
    --texto-secundario: #a5a19a;
}

/* ESTRUTURA */

body {
    background: var(--fundo);
    color: var(--texto);
    font-family: Arial, sans-serif;
}

.app {
    min-height: 100vh;
}

/* MENU LATERAL */

.menu {
    width: 265px;
    min-width: 265px;
    padding: 25px 16px;
    background: #111112;
    border-right: 1px solid var(--borda);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.logo {
    padding-bottom: 25px;
}

.menu-titulo {
    color: var(--ouro);
    font-size: 10px;
    letter-spacing: 2px;
    margin: 28px 8px 18px;
}

.menu nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    padding: 13px 15px;
    background: #1a1a1c;
    border: 1px solid #303033;
    border-radius: 9px;
    color: #c8c5be;
    font-size: 13px;
    font-weight: 600;
    transition: .25s;
}

.menu-item:hover {
    background: #292319;
    border-color: var(--ouro);
    color: var(--ouro-claro);
    transform: translateX(3px);
}

.menu-item.ativo {
    background: linear-gradient(110deg,#3b301e,#211b12);
    border: 1px solid var(--ouro);
    color: var(--ouro-claro);
    box-shadow: 0 4px 15px rgba(200,164,93,.10);
}

/* CONTEÚDO */

.conteudo {
    padding: 32px;
    max-width: 1800px;
    margin: 0 auto;
}

.topo {
    padding-bottom: 22px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--borda);
}

.topo h2 {
    font-size: 25px;
    font-weight: 700;
    color: var(--ouro-claro);
}

.topo p {
    font-size: 13px;
    color: var(--texto-secundario);
}

.status {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--ouro);
}

/* BOAS-VINDAS */

.dashboard-boas-vindas {
    background: linear-gradient(115deg,#211c14,#171719 70%);
    border: 1px solid #57462b;
    border-radius: 14px;
    padding: 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.dashboard-etiqueta {
    color: var(--ouro);
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: bold;
}

.dashboard-boas-vindas h2 {
    font-size: 25px;
    margin: 15px 0 10px;
}

.dashboard-boas-vindas p {
    color: var(--texto-secundario);
    font-size: 13px;
}

.dashboard-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-acoes button {
    padding: 13px 18px;
    border-radius: 8px;
}

.dashboard-acoes .botao-secundario {
    background: #292929;
    border: 1px solid var(--ouro);
    color: var(--ouro-claro);
}

/* TÍTULOS */

.dashboard-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
    gap: 15px;
}

.dashboard-titulo h3 {
    font-size: 18px;
    margin: 0;
}

.dashboard-titulo p {
    font-size: 12px;
    color: var(--texto-secundario);
}

.dashboard-periodo {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--ouro);
}

/* INDICADORES */

.dashboard-indicadores {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.dashboard-indicadores .card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 22px;
    min-height: 135px;
    transition: .25s;
}

.dashboard-indicadores .card:hover {
    border-color: var(--ouro);
    transform: translateY(-3px);
}

.dashboard-indicadores .card p {
    color: var(--texto-secundario);
    font-size: 12px;
    margin-bottom: 17px;
}

.dashboard-indicadores .card strong {
    display: block;
    font-size: 29px;
    color: var(--texto);
    margin-bottom: 8px;
}

.dashboard-indicadores .card small {
    font-size: 11px;
    color: #999;
}

.dashboard-indicadores .card.destaque {
    background: linear-gradient(135deg,#332817,#1b1915);
    border-color: #8d703c;
}

.dashboard-indicadores .card.destaque strong {
    color: var(--ouro-claro);
    font-size: 25px;
}

/* DIVISÃO DO DASHBOARD */

.dashboard-grade {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.dashboard-painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 13px;
    padding: 24px;
    margin-bottom: 20px;
}

.painel-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.painel-cabecalho h3 {
    color: var(--ouro-claro);
    font-size: 17px;
    margin: 0 0 8px;
}

.painel-cabecalho p {
    color: var(--texto-secundario);
    font-size: 12px;
    margin: 0;
}

.botao-link {
    background: transparent;
    border: 1px solid var(--borda);
    color: var(--ouro-claro);
    font-size: 11px;
    padding: 10px 14px;
}

.botao-link:hover {
    background: #302719;
}

/* AGENDA */

.dashboard-resumo-agenda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.dashboard-resumo-agenda > div {
    background: #222224;
    border: 1px solid #38342c;
    border-radius: 10px;
    padding: 17px;
}

.dashboard-resumo-agenda strong {
    display: block;
    color: var(--ouro-claro);
    font-size: 26px;
    margin-bottom: 7px;
}

.dashboard-resumo-agenda span {
    color: var(--texto-secundario);
    font-size: 11px;
}

.dashboard-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-lista > div {
    background: #222224;
    border: 1px solid #35312a;
    border-radius: 9px;
    padding: 14px;
}

.dashboard-vazio {
    color: var(--texto-secundario);
    font-size: 12px;
}

/* ACESSO RÁPIDO */

.dashboard-atalhos {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
}

.dashboard-atalhos button {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: #222224;
    border: 1px solid #37332c;
    color: var(--texto);
    padding: 15px;
    border-radius: 9px;
    font-size: 12px;
    transition: .2s;
}

.dashboard-atalhos button:hover {
    background: #302719;
    border-color: var(--ouro);
}

.dashboard-atalhos button span {
    color: var(--ouro-claro);
    font-size: 17px;
}

.dashboard-atalhos button b {
    margin-left: auto;
    color: var(--ouro);
}

/* GESTÃO */

.dashboard-gestao {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
}

.dashboard-gestao button {
    background: #222224;
    border: 1px solid #39332a;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

.dashboard-gestao button:hover {
    border-color: var(--ouro);
    background: #29241b;
}

.dashboard-gestao button span {
    color: var(--ouro);
    font-size: 10px;
    letter-spacing: 1px;
}

.dashboard-gestao button strong {
    color: white;
    font-size: 14px;
}

.dashboard-gestao button small {
    color: var(--texto-secundario);
    font-size: 11px;
}

/* PAINÉIS DAS OUTRAS ABAS */

.pagina > .painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 13px;
    padding: 25px;
    margin-bottom: 22px;
}

.pagina > .painel > h3 {
    font-size: 18px;
    color: var(--ouro-claro);
    margin-bottom: 15px;
}

/* CAMPOS */

input, select {
    background: #111113;
    border: 1px solid #414044;
    border-radius: 8px;
    color: white;
    padding: 13px;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--ouro);
    box-shadow: 0 0 0 2px rgba(200,164,93,.12);
}

label {
    font-size: 13px;
    font-weight: 600;
}

form > button {
    margin-top: 20px;
}

/* TABELAS */

.tabela {
    border: 1px solid var(--borda);
    border-radius: 10px;
    margin-top: 15px;
}

table {
    min-width: 650px;
}

th {
    background: #222224;
    color: var(--ouro-claro);
}

td {
    padding: 15px;
}

tr:hover td {
    background: #202022;
}

/* BOTÕES GERAIS */

button {
    transition: .2s ease;
}

button:focus-visible {
    outline: 2px solid var(--ouro-claro);
    outline-offset: 3px;
}

/* RODAPÉ */

footer {
    border-top: 1px solid var(--borda);
    margin-top: 35px;
    padding: 25px;
    letter-spacing: 1px;
}

/* TABLETS */

@media(max-width:1200px) {
    .dashboard-indicadores {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .dashboard-grade {
        grid-template-columns: 1fr;
    }
}

/* CELULAR */

@media(max-width:800px) {

    .app {
        flex-direction: column;
    }

    .menu {
        position: relative;
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 18px;
    }

    .menu nav {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 9px;
    }

    .menu-item {
        min-height: 46px;
        padding: 11px;
        font-size: 12px;
    }

    .menu-rodape {
        margin-top: 20px;
    }

    .conteudo {
        padding: 20px 14px;
    }

    .dashboard-boas-vindas {
        padding: 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-boas-vindas h2 {
        font-size: 21px;
    }

    .dashboard-indicadores {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .dashboard-indicadores .card {
        padding: 16px;
    }

    .dashboard-gestao {
        grid-template-columns: 1fr;
    }

    .dashboard-atalhos {
        grid-template-columns: 1fr;
    }

    .topo h2 {
        font-size: 21px;
    }
}

@media(max-width:420px) {
    .dashboard-indicadores {
        grid-template-columns: 1fr;
    }

    .dashboard-resumo-agenda {
        grid-template-columns: 1fr;
    }

    .dashboard-acoes {
        width: 100%;
    }

    .dashboard-acoes button {
        flex: 1;
    }
}/* ======================================
   ALVES DO CORTE - AGENDA PREMIUM V1
====================================== */

#pagina-agenda > .painel {
    background: #171719;
    border: 1px solid #39332a;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 24px;
}

#pagina-agenda > .painel > h3 {
    color: #e6c982;
    font-size: 19px;
    margin-bottom: 12px;
}

#pagina-agenda > .painel > p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.6;
}

/* INDICADORES DA AGENDA */

#pagina-agenda .indicadores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 22px;
}

#pagina-agenda .indicadores .card {
    background: #222224;
    border: 1px solid #40392e;
    border-radius: 12px;
    padding: 22px;
    margin: 0;
    transition: .25s;
}

#pagina-agenda .indicadores .card:hover {
    border-color: #c8a45d;
    transform: translateY(-3px);
}

#pagina-agenda .indicadores .card p {
    color: #aaa;
    font-size: 12px;
}

#pagina-agenda .indicadores .card strong {
    color: #e6c982;
    font-size: 30px;
}

/* FORMULÁRIO DE AGENDAMENTO */

#formAgendamento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    margin-top: 20px;
}

#formAgendamento label {
    align-self: end;
    color: #d5b875;
    font-size: 13px;
    margin-top: 12px;
}

#formAgendamento select,
#formAgendamento input {
    width: 100%;
    min-width: 0;
    height: 48px;
    background: #101012;
    border: 1px solid #45413a;
    border-radius: 8px;
    color: #fff;
}

#formAgendamento select:focus,
#formAgendamento input:focus {
    border-color: #c8a45d;
    outline: none;
    box-shadow: 0 0 0 2px rgba(200,164,93,.12);
}

#formAgendamento .ajuda {
    grid-column: 1 / -1;
    background: #242017;
    border: 1px solid #51432b;
    padding: 13px;
    border-radius: 8px;
    color: #d6bd83;
    line-height: 1.5;
}

#formAgendamento .modal-acoes {
    grid-column: 1 / -1;
    margin-top: 12px;
}

#salvarAgendamento {
    width: 100%;
    min-height: 50px;
    background: linear-gradient(110deg,#c8a45d,#e0bd75);
    color: #17130c;
    font-weight: bold;
    border-radius: 9px;
    transition: .25s;
}

#salvarAgendamento:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

/* CONSULTA DE DATA */

#filtroAgenda {
    max-width: 300px;
    height: 46px;
    background: #101012;
    border: 1px solid #51452e;
    border-radius: 8px;
    color: white;
    padding: 12px;
}

/* TABELA DE AGENDAMENTOS */

#pagina-agenda .tabela {
    overflow-x: auto;
    border: 1px solid #39332a;
    border-radius: 10px;
    margin-top: 18px;
}

#listaAgendamentos th {
    background: #25221c;
    color: #e6c982;
    padding: 16px;
    font-size: 12px;
}

#listaAgendamentos td {
    padding: 16px;
    border-bottom: 1px solid #35312a;
    font-size: 13px;
}

#listaAgendamentos tr:hover td {
    background: #242321;
}

#listaAgendamentos .status-confirmado {
    color: #a9d9a5;
    font-weight: bold;
}

#listaAgendamentos .status-cancelado {
    color: #e58e8e;
    font-weight: bold;
}

#listaAgendamentos button {
    background: #392323;
    color: #f0a0a0;
    border: 1px solid #704040;
    padding: 9px 13px;
    border-radius: 7px;
    font-size: 11px;
}

#listaAgendamentos button:hover {
    background: #593030;
}

/* CELULAR */

@media(max-width:800px) {

    #pagina-agenda > .painel {
        padding: 17px;
    }

    #pagina-agenda .indicadores {
        grid-template-columns: 1fr;
    }

    #formAgendamento {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #formAgendamento .ajuda,
    #formAgendamento .modal-acoes {
        grid-column: 1;
    }

    #filtroAgenda {
        max-width: 100%;
    }

    #pagina-agenda .tabela table {
        min-width: 700px;
    }
}/* =================================
   CALENDÁRIO SEMANAL PREMIUM
================================= */

.calendario-premium{
    padding:26px!important;
    margin-bottom:24px!important;
    border:1px solid #57462b!important;
    border-radius:14px!important;
    background:#171719!important;
}

.cal-topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.cal-etiqueta{
    color:#c8a45d;
    font-size:10px;
    letter-spacing:2px;
    font-weight:bold;
}

.cal-topo h3{
    color:#e6c982;
    margin:10px 0;
    font-size:20px;
}

.cal-topo p,
.cal-ajuda{
    color:#aaa;
    font-size:12px;
}

.cal-controles{
    display:flex;
    gap:8px;
}

.cal-controles button{
    min-width:42px;
    height:40px;
    background:#25221c;
    color:#e6c982;
    border:1px solid #57462b;
    border-radius:8px;
    cursor:pointer;
}

.cal-controles button:hover{
    background:#49371c;
}

.cal-periodo{
    color:#e6c982;
    font-size:13px;
    font-weight:bold;
    margin:22px 0 15px;
}

.cal-legenda{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:20px;
    color:#bbb;
    font-size:11px;
}

.cal-legenda span{
    display:flex;
    align-items:center;
    gap:6px;
}

.cal-legenda i{
    width:9px;
    height:9px;
    border-radius:50%;
}

.cal-legenda .confirmado{background:#c8a45d}
.cal-legenda .concluido{background:#58ad78}
.cal-legenda .cancelado{background:#d16a6a}
.cal-legenda .ausente{background:#888}

.cal-scroll{
    overflow-x:auto;
    padding-bottom:10px;
}

.cal-dias{
    display:grid;
    grid-template-columns:repeat(7,minmax(145px,1fr));
    gap:10px;
    min-width:1050px;
}

.cal-dia{
    background:#202022;
    border:1px solid #38332a;
    border-radius:10px;
    min-height:180px;
    padding:10px;
}

.cal-dia-hoje{
    border-color:#c8a45d;
}

.cal-dia-selecionado{
    box-shadow:inset 0 0 0 1px #e6c982;
    background:#29241b;
}

.cal-dia-cabecalho{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:12px 5px;
    margin-bottom:12px;
    background:#29251e;
    border:1px solid #40382b;
    border-radius:8px;
    color:#ddd;
    cursor:pointer;
}

.cal-dia-cabecalho strong{
    color:#e6c982;
    font-size:25px;
}

.cal-dia-cabecalho small{
    color:#aaa;
    font-size:10px;
}

.cal-evento{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:10px;
    margin-bottom:8px;
    border-radius:7px;
    background:#292929;
    border-left:3px solid #c8a45d;
    font-size:11px;
    overflow-wrap:anywhere;
}

.cal-evento strong{
    color:#e6c982;
    font-size:13px;
}

.cal-evento span{
    color:white;
    font-weight:bold;
}

.cal-evento small{
    color:#aaa;
}

.cal-evento.concluido{border-left-color:#58ad78}
.cal-evento.cancelado{border-left-color:#d16a6a;opacity:.65}
.cal-evento.ausente{border-left-color:#888}

.cal-status{
    font-size:9px!important;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.cal-vazio{
    text-align:center;
    color:#777;
    padding:20px 5px;
    font-size:11px;
}

.cal-ajuda{
    margin-top:15px;
}

@media(max-width:700px){
    .calendario-premium{
        padding:16px!important;
    }

    .cal-topo h3{
        font-size:17px;
    }

    .cal-legenda{
        gap:10px;
    }
}
/* =====================================================
   ACESSO: LOGIN, USUÁRIO, PERFIS E AVISOS
===================================================== */

/* Estados da tela */
#telaLogin{display:none}
body.verificando #telaLogin,body.modo-login #telaLogin{display:flex}
body.verificando .app,body.modo-login .app{display:none}

#telaLogin{
    min-height:100vh;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:radial-gradient(circle at 50% 0%,#2a2216 0%,#0d0d0e 60%);
}

.login-caixa{
    width:100%;
    max-width:400px;
    background:#151516;
    border:1px solid #57462b;
    border-radius:16px;
    padding:34px 28px 26px;
    box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.login-logo{text-align:center;margin-bottom:22px}
.login-logo span{
    display:inline-flex;align-items:center;justify-content:center;
    width:58px;height:58px;border:2px solid #c8a45d;border-radius:50%;
    color:#c8a45d;font-weight:bold;font-size:18px;margin-bottom:14px;
}
.login-logo h1{margin:0;font-size:18px;letter-spacing:3px;color:#f5f2eb}
.login-logo p{margin:7px 0 0;color:#c8a45d;font-size:10px;letter-spacing:2.5px}

#formLogin label{margin-top:16px}
#formLogin button{width:100%;margin-top:24px;min-height:48px;font-size:15px;color:#17130b}
#formLogin button:disabled{opacity:.6;cursor:wait}

#loginCarregando{display:none;text-align:center;color:#aaa;font-size:14px;padding:18px 0}
body.verificando #loginCarregando{display:block}
body.verificando #formLogin,body.verificando .login-rodape{display:none}

.login-mensagem{min-height:20px;margin:16px 0 0;font-size:13px;color:#d6bd83;text-align:center;line-height:1.5}
.login-mensagem.erro{color:#ff8f8f}
.login-rodape{margin:14px 0 0;font-size:11px;color:#777;text-align:center}

/* Usuário no topo */
.usuario-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.usuario-info{display:flex;flex-direction:column;text-align:right;line-height:1.3}
.usuario-info strong{color:#f5f2eb;font-size:13px}
.usuario-info small{color:#c8a45d;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.usuario-topo .botao-link{min-height:38px}

.status-nuvem{font-size:10px;letter-spacing:.5px;color:#8fcf95;white-space:nowrap}
.status-nuvem[data-estado="salvando"]{color:#e1c27e}
.status-nuvem[data-estado="erro"]{color:#ff8f8f}
.status-nuvem[data-estado="offline"]{color:#ff9b82}

/* Avisos flutuantes */
#avisoSistema{
    position:fixed;right:20px;bottom:20px;z-index:10000;
    max-width:min(420px,calc(100vw - 40px));
    padding:14px 18px;border-radius:10px;
    background:#1d1d20;border:1px solid #57462b;color:#f5f2eb;
    font-size:13px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.45);
    opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s ease;
}
#avisoSistema.visivel{opacity:1;transform:translateY(0)}
#avisoSistema.aviso-sucesso{border-color:#3f7d50}
#avisoSistema.aviso-erro{border-color:#8a3d3d;color:#ffd4d4}

/* Perfis de acesso */
.grade-permissoes{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:8px;margin-top:10px;
}
.grade-permissoes label{
    display:flex;align-items:center;gap:9px;margin:0;
    padding:11px 12px;background:#202022;border:1px solid #39332a;border-radius:8px;
    color:#ddd;font-weight:500;cursor:pointer;
}
.grade-permissoes label:has(input:checked){border-color:#c8a45d;background:#29241b;color:#f0d18a}
.grade-permissoes input,.opcao-perfil input{width:auto;min-height:0;margin:0;accent-color:#c8a45d}
.opcao-perfil{margin-top:16px;color:#ddd;font-weight:500}
.acoes-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.celula-quebra{white-space:normal;min-width:220px}

/* Botões secundários */
.botao-cancelar{background:#333;color:#fff}
.botao-cancelar:hover{background:#444}
.botao-perigo{background:#392323;color:#f0a0a0;border:1px solid #704040}
.botao-perigo:hover{background:#593030}
#painelUsuarios form button[type=submit]{align-self:end}

/* Janela de formulário */
.modal-conteudo label input,.modal-conteudo label select{display:block}
.modal-erro{color:#ff8f8f;font-size:13px;min-height:18px;margin:14px 0 0}
.modal-acoes .botao-cancelar{flex:1}

/* Minha área */
#pagina-minhaarea .indicadores{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#pagina-minhaarea .card.destaque{background:linear-gradient(135deg,#332817,#1b1915);border-color:#8d703c}

@media(max-width:800px){
    .topo{flex-direction:column;align-items:stretch}
    .usuario-topo{justify-content:space-between}
    .usuario-info{text-align:left;margin-right:auto}
    .status-nuvem{width:100%}
    .login-caixa{padding:28px 20px 22px}
    #pagina-minhaarea .indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================
   AGENDAMENTO ONLINE: pedidos e alertas
===================================================== */
.barra-pedidos{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    margin:-10px 0 22px;padding:12px 16px;border-radius:12px;
    background:linear-gradient(110deg,#3b2f17,#211b12);border:1px solid #c8a45d;color:#f0d18a;
    animation:pulsoPedidos 2s ease-in-out infinite;
}
.barra-pedidos[hidden]{display:none}
.barra-pedidos button{min-height:38px;padding:8px 16px}
@keyframes pulsoPedidos{0%,100%{box-shadow:0 0 0 0 rgba(200,164,93,.0)}50%{box-shadow:0 0 0 4px rgba(200,164,93,.18)}}

.painel-pedidos{border-color:#c8a45d!important;background:#1e1a12!important}
.painel-pedidos[hidden]{display:none}
.botao-confirmar{background:#3f7d50;color:#fff}
.botao-confirmar:hover{background:#4f9a63}

.contador-menu{
    margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
    background:#e05a4f;color:#fff;font-size:12px;font-weight:bold;
    display:inline-flex;align-items:center;justify-content:center;
}
.status-solicitado{color:#f0b85a;font-weight:bold}
#listaAgendamentos .status-solicitado{color:#f0b85a}

#avisoSistema.aviso-alerta{border-color:#c8a45d;background:#2a2216;color:#f0d18a;font-weight:600}
#avisoSistema.aviso-alerta.visivel{pointer-events:auto;cursor:pointer}
.botao-link.avisos-desligados{border-color:#8a6a35;color:#f0b85a}

.link-agendamento{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.link-agendamento input{flex:1;min-width:220px;margin:0;color:#e6c982;font-weight:600}
.link-agendamento button{min-height:44px}
.campo-largo{grid-column:1/-1}
#formAgendamentoOnline .opcao-perfil{margin-top:8px}

.cal-legenda .solicitado{background:#f0b85a}
.cal-evento.solicitado{border-left-color:#f0b85a;background:#2d2618}

@media(max-width:800px){
    .barra-pedidos{margin-top:0}
    .barra-pedidos button{width:100%}
    .link-agendamento button{flex:1}
}