:root {
    --sc-roxo: #6C5CE7;
    --sc-roxo-escuro: #4834b4;
    --sc-rosa: #E84393;
    --sc-verde: #00B894;
    --sc-amarelo: #FDCB6E;
    --sc-vermelho: #D63031;
    --sc-azul: #0984E3;
    --sc-fundo: #F4F5FB;
    --sc-texto: #2D3436;
    --sc-cinza: #7a8290;
    --sc-borda: #e6e8f0;
    --topbar-h: 60px;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sc-fundo);
    color: var(--sc-texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

.btn-primary {
    --bs-btn-bg: var(--sc-roxo);
    --bs-btn-border-color: var(--sc-roxo);
    --bs-btn-hover-bg: var(--sc-roxo-escuro);
    --bs-btn-hover-border-color: var(--sc-roxo-escuro);
    --bs-btn-active-bg: var(--sc-roxo-escuro);
    --bs-btn-disabled-bg: var(--sc-roxo);
    --bs-btn-disabled-border-color: var(--sc-roxo);
}
.btn-outline-primary {
    --bs-btn-color: var(--sc-roxo);
    --bs-btn-border-color: var(--sc-roxo);
    --bs-btn-hover-bg: var(--sc-roxo);
    --bs-btn-hover-border-color: var(--sc-roxo);
    --bs-btn-active-bg: var(--sc-roxo);
}
.text-primary { color: var(--sc-roxo) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--sc-roxo);
    box-shadow: 0 0 0 .2rem rgba(108, 92, 231, .15);
}
a { color: var(--sc-roxo); }

/* ---------- LOGIN ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--sc-roxo) 0%, var(--sc-rosa) 100%);
}
.login-card {
    background: #fff;
    border-radius: 18px;
    padding: 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
}
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.login-logo {
    width: 64px; height: 64px; margin: 0 auto .85rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--sc-roxo), var(--sc-rosa));
    color: #fff; font-weight: 700; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.login-brand h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.login-brand p { color: var(--sc-cinza); margin: .25rem 0 0; font-size: .875rem; }
.marca-empresa {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--sc-borda);
    text-align: center; color: var(--sc-cinza);
}
.marca-empresa small { display: block; font-size: .7rem; margin-bottom: .4rem; }
.marca-empresa img { max-width: 180px; height: auto; }
.login-dica {
    margin: 1.25rem 0 0; text-align: center;
    font-size: .75rem; color: var(--sc-cinza);
}

/* ---------- ESTRUTURA ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
    background: linear-gradient(90deg, var(--sc-roxo), var(--sc-roxo-escuro));
    display: flex; align-items: center; gap: .5rem;
    padding: 0 1rem; z-index: 1040; color: #fff;
}
.topbar-brand {
    color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; gap: .5rem;
}
.topbar-logo {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.btn-perfil {
    color: #fff; border: 0; background: rgba(255, 255, 255, .12);
    border-radius: 30px; padding: .3rem .75rem .3rem .3rem;
    display: flex; align-items: center; gap: .5rem; font-size: .85rem;
}
.btn-perfil:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--sc-rosa); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.badge-caixa {
    align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .15); color: #fff;
    border-radius: 20px; padding: .3rem .75rem; font-size: .78rem;
}

.badge-whatsapp {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--sc-verde); color: #fff; text-decoration: none;
    border-radius: 20px; padding: .3rem .7rem; font-size: .78rem; font-weight: 600;
}
.badge-whatsapp:hover { color: #fff; filter: brightness(1.08); }
.badge-whatsapp.d-none { display: none !important; }

.sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: var(--sidebar-w); background: #fff;
    border-right: 1px solid var(--sc-borda);
    overflow-y: auto; z-index: 1035;
    display: flex; flex-direction: column;
    transition: transform .25s ease;
}
.sidebar .nav { padding: .75rem .6rem; flex: 1; }
.sidebar .nav-link {
    color: var(--sc-texto); border-radius: 10px;
    padding: .6rem .8rem; margin-bottom: 2px;
    display: flex; align-items: center; gap: .65rem; font-weight: 500;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 20px; color: var(--sc-cinza); }
.sidebar .nav-link:hover { background: #f1f0fd; color: var(--sc-roxo); }
.sidebar .nav-link:hover i { color: var(--sc-roxo); }
.sidebar .nav-link.ativo { background: var(--sc-roxo); color: #fff; }
.sidebar .nav-link.ativo i { color: #fff; }
.sidebar-secao {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sc-cinza); padding: 1rem .8rem .35rem; font-weight: 700;
}
.sidebar-rodape {
    padding: .75rem 1rem; border-top: 1px solid var(--sc-borda);
    color: var(--sc-cinza); text-align: center;
}
.sidebar-marca { display: block; max-width: 140px; height: auto; margin: 0 auto .35rem; }
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 1030; display: none;
}
.conteudo {
    margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + 1.25rem) 1.25rem 2.5rem;
    min-height: 100vh;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 30px rgba(0, 0, 0, .15); }
    .sidebar.aberta { transform: translateX(0); }
    .sidebar-backdrop.visivel { display: block; }
    .conteudo { margin-left: 0; padding-left: .85rem; padding-right: .85rem; }
}

/* ---------- COMPONENTES ---------- */
.pagina-titulo {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    margin-bottom: 1.25rem;
}
.pagina-titulo h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.pagina-titulo .acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.card {
    border: 1px solid var(--sc-borda); border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.card-header {
    background: #fff; border-bottom: 1px solid var(--sc-borda);
    font-weight: 600; border-radius: 14px 14px 0 0 !important;
}

.kpi { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; }
.kpi-icone {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
}
.kpi-valor { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.kpi-rotulo { font-size: .78rem; color: var(--sc-cinza); }
.bg-roxo { background: var(--sc-roxo); }
.bg-rosa { background: var(--sc-rosa); }
.bg-verde { background: var(--sc-verde); }
.bg-amarelo { background: var(--sc-amarelo); }
.bg-vermelho { background: var(--sc-vermelho); }
.bg-azul { background: var(--sc-azul); }

.table { --bs-table-hover-bg: #f7f6ff; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--sc-cinza); border-bottom: 2px solid var(--sc-borda);
    white-space: nowrap; font-weight: 700;
}
.tabela-scroll { overflow-x: auto; }

.badge-status { font-size: .72rem; padding: .32em .65em; border-radius: 20px; font-weight: 600; }
.st-Agendado { background: #e3f0ff; color: #0b5ed7; }
.st-Confirmado { background: #e2f8f1; color: #0b7a5f; }
.st-EmAtendimento { background: #fff2d8; color: #92650a; }
.st-Concluido { background: #e6f6e9; color: #1d7a33; }
.st-Cancelado { background: #ffe5e5; color: #b02a2a; }
.st-NaoCompareceu { background: #f0f0f0; color: #555; }
.st-Aberta { background: #fff2d8; color: #92650a; }
.st-Fechada { background: #e6f6e9; color: #1d7a33; }
.st-Aberto { background: #e2f8f1; color: #0b7a5f; }
.st-Fechado { background: #f0f0f0; color: #555; }
.st-Pendente { background: #fff2d8; color: #92650a; }
.st-Pago { background: #e6f6e9; color: #1d7a33; }
.st-Vencido { background: #ffe5e5; color: #b02a2a; }

.vazio { text-align: center; color: var(--sc-cinza); padding: 2.5rem 1rem; }
.vazio i { font-size: 2.25rem; display: block; margin-bottom: .5rem; opacity: .45; }

/* Agenda */
.agenda-grade { display: grid; gap: .75rem; }
.agenda-coluna { background: #fff; border: 1px solid var(--sc-borda); border-radius: 14px; overflow: hidden; }
.agenda-coluna-topo {
    padding: .6rem .85rem; font-weight: 600; color: #fff;
    display: flex; align-items: center; justify-content: space-between;
}
.agenda-lista { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; min-height: 80px; }
.agenda-item {
    border-left: 4px solid var(--sc-roxo); background: #f8f8fd;
    border-radius: 8px; padding: .55rem .7rem; cursor: pointer;
}
.agenda-item:hover { background: #f1f0fd; }
.agenda-hora { font-weight: 700; font-size: .85rem; }
.agenda-cliente { font-size: .85rem; }
.agenda-servico { font-size: .75rem; color: var(--sc-cinza); }

/* PDV / comanda */
.pdv-total {
    background: linear-gradient(135deg, var(--sc-roxo), var(--sc-rosa));
    color: #fff; border-radius: 14px; padding: 1rem 1.25rem;
}
.pdv-total .valor { font-size: 1.85rem; font-weight: 700; }
.lista-selecao { max-height: 320px; overflow-y: auto; }
.lista-selecao .item {
    padding: .55rem .7rem; border-radius: 8px; cursor: pointer;
    display: flex; justify-content: space-between; gap: .5rem;
}
.lista-selecao .item:hover { background: #f1f0fd; }

.filtro-barra {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem;
}
.filtro-barra .form-control, .filtro-barra .form-select { min-width: 150px; }

.paginacao { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

@media print {
    .topbar, .sidebar, .pagina-titulo .acoes, .filtro-barra, .filtro-vendas { display: none !important; }
    #abas-rel, .paginacao, .card-header .btn { display: none !important; }
    /* Botoes de acao (pagar, editar, excluir...) nao tem informacao no papel. */
    .conteudo .btn { display: none !important; }
    /* Abas, caixas de selecao e icones dos indicadores sao da tela: no papel so ocupam espaco
       (com 4 indicadores por linha o icone empurrava o valor para fora do cartao). */
    .conteudo .nav-pills, .conteudo .form-check-input, .conteudo .kpi-icone { display: none !important; }
    .kpi { padding: .6rem .75rem; }
    /* Meio gutter das .row g-3 (margens negativas), senao as bordas dos cartoes saem da pagina. */
    .conteudo { margin: 0; padding: 0 .5rem; min-height: 0; }
    /* O Chart.js fixa a largura do canvas em px pela tela e nao redimensiona ao imprimir:
       reduz proporcionalmente para caber na pagina em vez de cortar o grafico. */
    canvas { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 9cm; margin: 0 auto; }
    .card:has(canvas), .col-lg-3 > .card { break-inside: avoid; }
    /* Linha flex com grafico: quando o cartao e empurrado para a proxima pagina o Chrome nao recalcula
       a altura da coluna e o canvas vaza por tras do conteudo seguinte. Empilha em bloco e solta o h-100. */
    .row:has(canvas) { display: block; }
    .row:has(canvas) > [class*="col-"] { width: 100%; max-width: 100%; margin-bottom: 1rem; }
    .row:has(canvas) > [class*="col-"]:last-child { margin-bottom: 0; }
    .h-100 { height: auto !important; }
    .card-header { break-after: avoid; }
    /* Indicadores 4 por linha, como na tela. */
    .row > .col-6.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .row > .col-lg-4:has(> .card > .kpi) { flex: 0 0 33.333%; max-width: 33.333%; }
    /* Grades de cartoes (pacotes, profissionais): 2 por linha e cartao nunca partido entre paginas. */
    #area-lista.row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
    #area-lista.row > [class*="col-"] > .card { break-inside: avoid; }
    .kpi-valor { font-size: 1.05rem; }
    /* No papel nao ha rolagem: as tabelas mostram todas as linhas e colunas. */
    .tabela-scroll { overflow: visible !important; max-height: none !important; }
    .tabela-scroll table { font-size: .66rem; }
    .tabela-scroll .table > :not(caption) > * > * { padding: .2rem .25rem; white-space: normal; }
    .tabela-scroll .table thead th { font-size: .6rem; letter-spacing: 0; white-space: normal; }
    .tabela-scroll .table > :not(caption) > * > .text-end { white-space: nowrap; }
    /* O Chrome imprime sem fundo por padrao: texto branco sobre faixa ou selo colorido sumiria. */
    .agenda-coluna-topo, .badge, .foto-cliente, .kpi-icone { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Agenda em 2 colunas de texto corrido (gasta menos papel que a grade); um horario nunca e partido. */
    .agenda-grade { display: block; column-count: 2; column-gap: .75rem; margin: 0; }
    .agenda-grade > [class*="col-"] { width: 100%; max-width: 100%; padding: 0; margin: 0 0 .75rem; }
    .agenda-coluna { overflow: visible; }
    .agenda-coluna-topo { break-after: avoid; padding: .35rem .6rem; }
    .agenda-lista { padding: .35rem; gap: .3rem; min-height: 0; }
    .agenda-item { break-inside: avoid; padding: .3rem .5rem; }
}

/* ---------- AJUDA E SOBRE ---------- */
.sidebar-versao { display: block; font-size: .8rem; color: var(--sc-cinza); text-decoration: none; }
.sidebar-versao:hover { color: var(--sc-roxo); }

.ajuda-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ajuda-indice { position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100vh - var(--topbar-h) - 2rem); display: flex; flex-direction: column; }
.ajuda-lista { overflow-y: auto; padding: 0 .5rem .5rem; }
.ajuda-item {
    display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem;
    border-radius: 8px; color: var(--sc-texto); text-decoration: none; font-weight: 500;
}
.ajuda-item i:first-child { color: var(--sc-cinza); width: 18px; }
.ajuda-item:hover { background: #f1f0fd; color: var(--sc-roxo); }
.ajuda-item.ativo { background: var(--sc-roxo); color: #fff; }
.ajuda-item.ativo i { color: #fff; }
.ajuda-titulo { font-size: 1.3rem; font-weight: 700; margin: 0; }
.ajuda-secao { margin-top: 1.25rem; line-height: 1.6; }
.ajuda-secao h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.ajuda-secao ol, .ajuda-secao ul { padding-left: 1.25rem; margin-bottom: .5rem; }
.ajuda-secao li { margin-bottom: .25rem; }
.ajuda-dica, .ajuda-atencao {
    display: flex; gap: .6rem; padding: .65rem .85rem; border-radius: 10px; margin: .5rem 0; font-size: .85rem;
}
.ajuda-dica { background: #f1f0fd; color: var(--sc-roxo-escuro); }
.ajuda-atencao { background: #fff4dd; color: #8a5a00; }

.sobre-capa {
    display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem;
    background: linear-gradient(135deg, var(--sc-roxo), var(--sc-rosa)); color: #fff; border: 0;
}
.sobre-capa .login-logo { background: rgba(255, 255, 255, .2); flex: 0 0 auto; }
.sobre-capa h3 { font-weight: 700; }
.sobre-versao {
    display: inline-block; margin-top: .5rem; padding: .2rem .7rem; border-radius: 20px;
    background: rgba(255, 255, 255, .2); font-size: .78rem; font-weight: 600;
}
.sobre-linha {
    display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
    border-bottom: 1px dashed var(--sc-borda);
}
.sobre-linha:last-child { border-bottom: 0; }
.sobre-linha span { color: var(--sc-cinza); }
.sobre-linha strong { text-align: right; font-weight: 600; word-break: break-word; }

@media (max-width: 991.98px) {
    .ajuda-layout { grid-template-columns: 1fr; }
    .ajuda-indice { position: static; max-height: 320px; }
}

@media print {
    .ajuda-indice { display: none !important; }
    .ajuda-layout { display: block; }
}

/* ---------- LICENCA ---------- */
.aviso-licenca {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
    padding: .6rem .9rem; border-radius: 10px; text-decoration: none;
    background: #fff6e0; color: #7a5300; border: 1px solid #f5d68a;
}
.aviso-licenca:hover { color: #5c3f00; background: #fff0c8; }
.aviso-licenca.bloqueio { background: #fdecec; color: #8a1f1f; border-color: #f2b8b8; }
.aviso-licenca i { font-size: 1.1rem; }
.licenca-codigo {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em;
    background: var(--sc-fundo); border: 1px dashed var(--sc-borda); border-radius: 8px; padding: .35rem .6rem;
    display: inline-block; word-break: break-all;
}
.licenca-capa { display: flex; align-items: center; gap: 1rem; }
.licenca-capa .icone {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; flex: 0 0 auto;
}
.licenca-capa .icone.ok { background: #e3f8f2; color: var(--sc-verde); }
.licenca-capa .icone.alerta { background: #fff6e0; color: #c58a00; }
.licenca-capa .icone.erro { background: #fdecec; color: var(--sc-vermelho); }
@media print { .aviso-licenca { display: none !important; } }

/* ---------- Foto do cliente e antes x depois ---------- */
.foto-cliente {
    --tam: 64px;
    width: var(--tam); height: var(--tam); flex: 0 0 var(--tam);
    border-radius: 50%; overflow: hidden;
    background: var(--sc-rosa); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--tam) * .36); font-weight: 700;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--sc-borda);
}
.foto-cliente img { width: 100%; height: 100%; object-fit: cover; }
.foto-cliente.clicavel { cursor: zoom-in; }

.antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ad-quadro { margin: 0; min-width: 0; }
.ad-quadro figcaption {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--sc-cinza); margin-bottom: .25rem;
}
.ad-foto {
    height: 340px; width: 100%;
    border-radius: 10px; overflow: hidden;
    background: var(--sc-fundo); border: 1px solid var(--sc-borda);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.ad-foto img { width: 100%; height: 100%; object-fit: contain; }
.ad-foto[data-ad-foto] { cursor: zoom-in; }
.ad-upload { cursor: pointer; border-style: dashed; margin: 0; }
.ad-upload:hover { border-color: var(--sc-roxo); }

.visualizador-imagem {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, .88); cursor: zoom-out;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
}
.visualizador-imagem img { max-width: 100%; max-height: calc(100% - 3rem); object-fit: contain; border-radius: 6px; }
.visualizador-imagem .legenda { color: #fff; margin-top: .75rem; font-size: .9rem; }
.visualizador-imagem .btn-close { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 576px) { .ad-foto { height: 220px; } }
.foto-cliente.foto-lista { box-shadow: none; }
.foto-cliente.foto-profissional { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); font-size: calc(var(--tam) * .38); }