/* =====================================================================
   estilo.css - Aparência do SISCOM.
   As cores ficam em variáveis (:root) para trocar o tema num só lugar.
   ===================================================================== */

:root {                                   /* variáveis globais */
  --fundo: #f4f6f8;                       /* fundo da página */
  --cartao: #ffffff;                      /* fundo de cartões e tabelas */
  --texto: #1d2733;                       /* cor principal do texto */
  --sutil: #6b7785;                       /* texto secundário */
  --borda: #dde2e8;                       /* linhas e bordas */
  --primaria: #0f766e;                    /* verde-farmácia dos botões principais */
  --primaria-escura: #0b5d57;             /* botão ao passar o mouse */
  --perigo: #b42318;                      /* vermelho de excluir/erros */
  --alerta: #b54708;                      /* laranja de avisos */
  --menu: #12333a;                        /* fundo do menu lateral */
  --raio: 8px;                            /* arredondamento padrão */
}

* { box-sizing: border-box; }             /* largura inclui padding e borda (mais previsível) */

body {                                    /* página inteira */
  margin: 0;                              /* remove a margem padrão do navegador */
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* fonte do sistema */
  color: var(--texto);                    /* cor do texto */
  background: var(--fundo);               /* cor de fundo */
}

h1, h2, h3 { margin: 0 0 .6em; line-height: 1.2; } /* títulos com espaço só embaixo */
h1 { font-size: 1.5rem; }                 /* título de página */
h2 { font-size: 1.15rem; }                /* título de seção */
.sutil { color: var(--sutil); }           /* texto apagado */
.erro { color: var(--perigo); min-height: 1.2em; } /* mensagem de erro */
.num { text-align: right; font-variant-numeric: tabular-nums; } /* números alinhados à direita */
[hidden] { display: none !important; }    /* garante que hidden sempre esconde */

/* ---------- Botões e campos ---------- */
button {                                  /* botão padrão */
  font: inherit;                          /* mesma fonte da página */
  padding: .5em 1em;                      /* espaço interno */
  border: 1px solid var(--borda);         /* borda clara */
  border-radius: var(--raio);             /* cantos arredondados */
  background: var(--cartao);              /* fundo branco */
  color: var(--texto);                    /* texto escuro */
  cursor: pointer;                        /* mãozinha */
}
button:hover { border-color: var(--sutil); } /* destaque ao passar o mouse */
button:disabled { opacity: .5; cursor: default; } /* desabilitado */
button.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; } /* botão principal */
button.primario:hover { background: var(--primaria-escura); } /* hover do principal */
button.perigo { color: var(--perigo); border-color: #f1c0bb; } /* botão de excluir */
button.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; } /* confirmar ação perigosa */
button.grande { padding: .8em 1em; font-size: 1.05rem; font-weight: 600; } /* botão principal do PDV */
button.pequeno { padding: .25em .7em; font-size: .85rem; } /* botão dentro de tabela */
button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; white-space: nowrap; } /* texto e tecla lado a lado, sem quebrar */
kbd { font: 600 .75rem/1 ui-monospace, monospace; padding: .2em .4em; border-radius: 4px; background: rgba(0,0,0,.12); } /* "F2" dentro do botão */
input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--primaria); } /* caixa de marcar no tamanho natural */
.opcao { display: flex; align-items: center; gap: .5em; cursor: pointer; } /* rótulo de checkbox alinhado */

input, select {                           /* campos de formulário */
  font: inherit;                          /* mesma fonte */
  padding: .45em .6em;                    /* espaço interno */
  border: 1px solid var(--borda);         /* borda */
  border-radius: var(--raio);             /* arredondado */
  background: #fff;                       /* fundo */
  width: 100%;                            /* ocupa a largura do rótulo */
  min-width: 0;                           /* deixa encolher em telas estreitas */
}
input:focus, select:focus { outline: 2px solid var(--primaria); outline-offset: -1px; } /* foco visível */
input.somente-leitura { background: #eef2f6; color: var(--texto); font-weight: 650; cursor: not-allowed; } /* campo gerado pelo sistema (cinza, não editável) */
input.somente-leitura:focus { outline: none; } /* sem destaque de foco: não dá para digitar */

.campo { display: flex; flex-direction: column; gap: .25em; } /* rótulo em cima, campo embaixo */
.campo > span { font-size: .85rem; color: var(--sutil); } /* texto do rótulo */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8em; } /* campos lado a lado que quebram linha */
.barra { display: flex; flex-wrap: wrap; gap: .6em; align-items: end; margin-bottom: 1em; } /* barra de filtros/ações */
.barra .campo { min-width: 160px; }       /* largura mínima de filtros */
.acoes { display: flex; gap: .6em; justify-content: flex-end; margin-top: 1em; flex-wrap: wrap; } /* botões no rodapé de forms */
.largura-toda { grid-column: 1 / -1; }    /* dentro de .grade, ocupa a linha inteira */
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: .8em; } /* título + botão na mesma linha */
.cabecalho h1 { margin: 0; }              /* sem margem extra no título */
.faixa-ok { background: #dcfae6; color: #085d3a; border-radius: var(--raio); padding: .6em .9em; margin: 0; } /* aviso verde (deu certo) */
.faixa-alerta { background: #fef0c7; color: #7a2e0e; border-radius: var(--raio); padding: .6em .9em; margin: 0 0 1em; } /* aviso amarelo de largura total */

/* ---------- Login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; } /* centraliza o cartão */
.login-cartao { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: .8em; } /* cartão estreito */

/* ---------- Estrutura da aplicação ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } /* menu + conteúdo */
.menu {                                   /* menu lateral */
  background: var(--menu);                /* fundo escuro */
  color: #cfe3e1;                         /* texto claro */
  display: flex; flex-direction: column;  /* itens em coluna */
  padding: 1em .6em;                      /* espaço interno */
  position: sticky; top: 0; height: 100vh; overflow-y: auto; /* fica fixo ao rolar */
}
.menu a { color: inherit; text-decoration: none; padding: .45em .7em; border-radius: 6px; } /* links do menu */
.menu a:hover { background: rgba(255,255,255,.08); } /* hover */
.menu a.ativo { background: rgba(255,255,255,.16); color: #fff; } /* tela atual */
.marca { font-weight: 700; font-size: 1.2rem; color: #fff; padding: .2em .7em 1em; overflow-wrap: anywhere; } /* nome da farmácia (nome longo quebra a linha) */
.menu a { display: block; }               /* cada link numa linha própria (não grudam um no outro) */
.grupo-menu { margin-top: .6em; }          /* espaço acima do grupo Cadastros */
.grupo-menu summary {                      /* título clicável "Cadastros" */
  cursor: pointer; padding: .45em .7em; border-radius: 6px; /* mesma área de clique dos links */
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; /* estilo de título de grupo */
  list-style: none;                        /* tira o triângulo padrão */
}
.grupo-menu summary::-webkit-details-marker { display: none; } /* tira o triângulo no Chrome/Edge antigos */
.grupo-menu summary::after { content: "▸"; float: right; } /* seta fechada */
.grupo-menu[open] summary::after { content: "▾"; } /* seta aberta */
.grupo-menu summary:hover { background: rgba(255,255,255,.08); opacity: 1; } /* hover */
.submenu { display: flex; flex-direction: column; padding-left: .5em; border-left: 1px solid rgba(255,255,255,.12); margin-left: .7em; } /* links em coluna, recuados */
.submenu a { padding: .35em .7em; font-size: .92rem; } /* links de cadastro um pouco menores */
.menu-rodape { margin-top: auto; display: flex; flex-direction: column; padding-top: 1em; border-top: 1px solid rgba(255,255,255,.12); } /* rodapé */
.menu-rodape span { padding: .2em .7em; font-size: .85rem; opacity: .8; } /* nome do usuário */
.conteudo { padding: 24px; min-width: 0; } /* área das telas (min-width evita estouro horizontal) */

/* ---------- Cartões e tabelas ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.1em; } /* caixa branca */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1em; margin-bottom: 1em; } /* grade de indicadores */
.indicador .valor { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; } /* número grande */
.indicador .rotulo { color: var(--sutil); font-size: .85rem; } /* legenda */
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1em; margin-bottom: 1em; } /* duas colunas que viram uma */

.tabela-caixa { overflow-x: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); } /* rolagem só na tabela */
table { width: 100%; border-collapse: collapse; } /* tabela ocupa tudo, bordas simples */
th, td { padding: .5em .7em; border-bottom: 1px solid var(--borda); text-align: left; white-space: nowrap; } /* células */
th { font-size: .8rem; color: var(--sutil); font-weight: 600; background: #fafbfc; position: sticky; top: 0; } /* cabeçalho */
tbody tr.clicavel { cursor: pointer; }    /* linha que abre detalhe */
tbody tr.clicavel:hover { background: #f0f7f6; } /* hover na linha */
td.quebra { white-space: normal; min-width: 220px; } /* nomes longos podem quebrar */

.etiqueta { display: inline-block; padding: .1em .5em; border-radius: 99px; font-size: .78rem; background: #eef2f6; } /* pílula de status */
.etiqueta.ok { background: #dcfae6; color: #085d3a; } /* verde */
.etiqueta.alerta { background: #fef0c7; color: #93370d; } /* amarelo */
.etiqueta.perigo { background: #fee4e2; color: #912018; } /* vermelho */
.paginacao { display: flex; gap: 1em; align-items: center; justify-content: flex-end; margin-top: .8em; flex-wrap: wrap; } /* paginação */

/* ---------- Gráfico de barras simples (painel) ---------- */
.grafico { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: .5em; } /* barras alinhadas embaixo */
.grafico .barra-g { flex: 1; background: var(--primaria); border-radius: 3px 3px 0 0; min-height: 1px; opacity: .85; } /* cada barra */
.grafico .barra-g:hover { opacity: 1; }   /* destaque */
.grafico-eixo { display: flex; justify-content: space-between; font-size: .75rem; color: var(--sutil); margin-top: .3em; } /* datas embaixo */

/* ---------- PDV ---------- */
.pdv { display: grid; grid-template-columns: 1fr 320px; gap: 1em; align-items: start; } /* carrinho + pagamento */
.pdv .busca input { font-size: 1.2rem; padding: .6em .8em; } /* campo de busca grande */
.resultados { margin-top: .5em; max-height: 260px; overflow-y: auto; } /* lista de resultados */
.total-pdv { font-size: 2rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } /* total grande */
.pagamento { display: flex; flex-direction: column; gap: .8em; position: sticky; top: 16px; } /* coluna de pagamento */
.qtd { width: 70px; text-align: right; } /* campo de quantidade no carrinho */
.pergunta-impressao { margin-top: 1em; padding: .9em 1em; border: 1px solid var(--borda); border-radius: var(--raio); background: #f6faf9; } /* caixa "Imprimir o comprovante?" */
.botoes-linha { display: flex; gap: .4em; justify-content: flex-end; align-items: center; flex-wrap: wrap; } /* botões lado a lado */
a.botao-link { padding: .5em 1em; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); color: var(--texto); text-decoration: none; } /* link com cara de botão */
a.botao-link:hover { border-color: var(--sutil); } /* hover */
code, .bloco-codigo { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .88rem; } /* texto de comando */
code { background: #eef2f6; padding: .1em .35em; border-radius: 4px; } /* trecho de código no meio do texto */
.bloco-codigo { background: #12333a; color: #e6f2f0; padding: .9em 1em; border-radius: var(--raio); overflow-x: auto; white-space: pre; } /* bloco de comandos */

.cartao table td { white-space: normal; overflow-wrap: anywhere; } /* tabelas dentro de cartões quebram linha (não estouram) */
tr.linha-apagada td { opacity: .55; } /* lote esgotado: aparece, mas apagado */

/* ---------- Tela Usuários ---------- */
.separador-form { margin-top: .6em; padding-top: .8em; border-top: 1px solid var(--borda); font-weight: 650; } /* "Acesso ao sistema" */
.opcao-campo .opcao { min-height: 2.3em; } /* checkbox alinhado à altura dos inputs */
.resumo-perfil { background: #f6faf9; border: 1px solid var(--borda); border-radius: var(--raio); padding: .7em .9em; font-size: .9rem; } /* o que o perfil libera */

/* ---------- Tela Perfis de acesso ---------- */
.perfis-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1em; align-items: start; } /* lista + editor */
.lista-perfis { display: flex; flex-direction: column; gap: .4em; position: sticky; top: 16px; } /* lista de perfis */
.item-perfil { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; gap: .1em; padding: .7em .9em; } /* cada perfil */
.item-perfil.ativo { border-color: var(--primaria); background: #f0f7f6; box-shadow: inset 3px 0 0 var(--primaria); } /* perfil aberto */
.grupo-permissoes { border: 1px solid var(--borda); border-radius: var(--raio); margin: 1em 0 0; padding: .4em 1em .8em; } /* caixa de um grupo */
.grupo-permissoes legend { font-weight: 650; padding: 0 .4em; } /* nome do grupo */
.permissao { display: flex; gap: .7em; align-items: flex-start; padding: .55em 0; border-bottom: 1px dashed var(--borda); cursor: pointer; } /* uma permissão */
.permissao:last-child { border-bottom: 0; } /* sem linha no último */
.permissao input { margin-top: .2em; width: 1.05em; height: 1.05em; } /* checkbox um pouco maior */
@media (max-width: 800px) {               /* celular/tablet */
  .perfis-layout { grid-template-columns: 1fr; } /* lista em cima do editor */
  .lista-perfis { position: static; flex-direction: row; flex-wrap: wrap; } /* perfis em linha */
}

/* ---------- Tela Empresa ---------- */
.empresa-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2em; align-items: start; } /* formulário + prévia */
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; } /* 4 colunas; campos ocupam 1, 2 ou 4 */
.previa-cupom { width: 86mm; border: 1px solid var(--borda); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); border-radius: 4px; } /* papel da prévia */
@media (max-width: 1000px) {              /* tela média: prévia embaixo do formulário */
  .empresa-layout { grid-template-columns: 1fr; } /* uma coluna */
}
@media (max-width: 560px) {               /* celular: campos em 2 colunas */
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 colunas */
  .grade-4 > .campo { grid-column: span 2 !important; } /* cada campo na linha toda */
  .previa-cupom { max-width: 100%; } /* prévia não estoura a tela */
}

.botoes-pdv { display: grid; grid-template-columns: 1fr; gap: .6em; margin-top: .4em; } /* Finalizar e Limpar com espaço entre eles */
.botoes-pdv kbd { background: rgba(255,255,255,.22); } /* tecla legível sobre o botão verde */
.botoes-pdv button:not(.primario) kbd { background: #eef2f6; } /* tecla no botão branco */

/* ---------- Modal e avisos ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(15,23,32,.45); display: grid; place-items: center; padding: 16px; z-index: 10; } /* fundo escuro */
.modal { background: var(--cartao); border-radius: var(--raio); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; } /* janela */
.modal-largo { max-width: 960px; }        /* janela larga */
.modal header { display: flex; justify-content: space-between; align-items: center; padding: .9em 1.1em; border-bottom: 1px solid var(--borda); } /* topo */
.modal header h2 { margin: 0; }           /* título sem margem */
.modal .fechar { border: 0; font-size: 1.4rem; line-height: 1; padding: 0 .3em; } /* botão × */
.modal-corpo { padding: 1.1em; overflow-y: auto; } /* conteúdo rolável */
.aviso { position: fixed; right: 16px; bottom: 16px; padding: .8em 1.1em; border-radius: var(--raio); color: #fff; z-index: 20; max-width: calc(100% - 32px); } /* toast */
.aviso-ok { background: #067647; }        /* verde */
.aviso-erro { background: var(--perigo); } /* vermelho */

/* ---------- Telas estreitas (celular) ---------- */
@media (max-width: 800px) {               /* abaixo de 800px de largura */
  .app { grid-template-columns: 1fr; }    /* menu em cima do conteúdo */
  .menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; gap: .2em; } /* menu vira barra */
  .marca, .grupo-menu { width: 100%; }    /* nome e grupo Cadastros ocupam a linha inteira */
  .submenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-left: 0; margin-left: 0; padding-left: 0; } /* cadastros em grade organizada */
  .menu-rodape { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; gap: .2em; } /* rodapé em linha */
  .conteudo { padding: 16px; }            /* margem lateral de 16px */
  .pdv { grid-template-columns: 1fr; }    /* pagamento abaixo do carrinho */
}

/* ---- Vários clientes: cadastro, bloqueio e área do dono ---- */
.cadastro-cartao { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: .8em; } /* cadastro: mais largo que o login */
p.rodape-login { margin-top: 1em; font-size: .85rem; } /* suporte e versão abaixo dos cartões da entrada */
#tela-login { align-content: center; } /* cartão e rodapé juntos no meio da tela */
.centro { text-align: center; margin: 0; }  /* texto centralizado (links abaixo do botão) */
a.botao-pagar { background: var(--primaria); border-color: var(--primaria); color: #fff; text-align: center; font-weight: 600; } /* "Pagar mensalidade" */
#faixa-assinatura a { color: inherit; font-weight: 650; } /* link "Pagar agora" na faixa */
.etiqueta.neutra { background: #eef0f3; color: #344054; } /* situação sem cor (ex.: sem cobrança) */

/* ---------- Assinatura: medidor da faixa de espaço ---------- */
.medidor { height: .7em; background: #eef2f6; border-radius: 99px; overflow: hidden; } /* trilho */
.medidor > div { height: 100%; background: var(--primaria); border-radius: 99px; } /* parte usada */
.medidor.alerta > div { background: var(--alerta); } /* perto de mudar de faixa */
.medidor.perigo > div { background: var(--perigo); } /* passou do limite */
tr.linha-atual td { background: #ecfdf3; } /* faixa atual na tabela de preços */

/* ---------- Código de verificação do cadastro ---------- */
.captcha { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; } /* imagem, campo e botão lado a lado (quebra no celular) */
.captcha img { border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; } /* moldura da imagem */
.captcha input { width: 8em; font-size: 1.2rem; letter-spacing: .2em; text-align: center; } /* resposta */

/* Tela Relatórios: lista à esquerda, relatório à direita */
.relatorios { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1em; align-items: start; } /* duas colunas */
.lista-relatorios { display: flex; flex-direction: column; gap: .2em; } /* botões em coluna */
.lista-relatorios h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sutil); margin: .8em 0 .3em; } /* nome do grupo */
.lista-relatorios h3:first-child { margin-top: 0; } /* primeiro grupo sem espaço em cima */
.lista-relatorios .item-relatorio { justify-content: flex-start; white-space: normal; text-align: left; background: none; border: 0; padding: .45em .6em; border-radius: var(--raio); cursor: pointer; } /* item da lista */
.item-relatorio:hover { background: rgba(15, 118, 110, .08); } /* passa o mouse */
.item-relatorio.ativo { background: var(--primaria); color: #fff; } /* escolhido */
.tabela-relatorio { overflow: auto; max-height: 60vh; margin-top: .5em; } /* rolagem da prévia */
.cartao .tabela-relatorio th, .cartao .tabela-relatorio td { white-space: nowrap; overflow-wrap: normal; } /* uma linha por registro (vence a regra de .cartao table td) */
.tabela-relatorio thead th { position: sticky; top: 0; background: var(--cartao); } /* cabeçalho fixo */
@media (max-width: 800px) { .relatorios { grid-template-columns: 1fr; } } /* celular: uma coluna */

/* Tela Vencimentos: cartões que funcionam como filtro */
button.cartao-filtro { display: block; width: 100%; text-align: left; white-space: normal; font: inherit; color: inherit; background: var(--cartao); cursor: pointer; } /* cartão clicável */
button.cartao-filtro:hover { border-color: var(--primaria); } /* destaque ao passar o mouse */