/* ============================================================================ modais.css — os modais do evolun-kbal. O TKbalModal (runtime/src/KbalModal.pas) monta sempre a mesma estrutura, trocando so o PREFIXO de classes que o modal informa: -overlay > -dialog > -head ( -title, -close ) [ TopHtml ] -body -acoes ...e poe/tira a classe -open no para travar o scroll do fundo. No D2SCI/D2Kbal cada modal tinha o seu arquivo com essas mesmas regras repetidas; aqui a parte estrutural e escrita UMA vez, com a lista de prefixos do projeto, e cada modal so acrescenta o que e dele. Prefixos: cfg (Configuracao), lgfn (Login rapido), mexp (Expedicao), mitem (Item do pedido), mpag (Pagamentos da venda), mgrd (Grade do pedido / especificacoes). ============================================================================ */ /* ---- estrutura comum ---------------------------------------------------- */ .cfg-overlay, .lgfn-overlay, .mexp-overlay, .mpag-overlay, .mgrd-overlay, .mitem-overlay { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 18, 24, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .cfg-overlay.is-open, .lgfn-overlay.is-open, .mexp-overlay.is-open, .mpag-overlay.is-open, .mgrd-overlay.is-open, .mitem-overlay.is-open { display: flex; } body.cfg-open, body.lgfn-open, body.mexp-open, body.mpag-open, body.mgrd-open, body.mitem-open { overflow: hidden; } .cfg-dialog, .lgfn-dialog, .mexp-dialog, .mpag-dialog, .mgrd-dialog, .mitem-dialog { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 2rem); border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-lg); overflow: hidden; animation: kb-modal-in .16s cubic-bezier(.22, 1, .36, 1) both; } @keyframes kb-modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } } .cfg-dialog { max-width: 26rem; } .lgfn-dialog { max-width: 24rem; } .mexp-dialog { max-width: 42rem; } .mitem-dialog { max-width: 28rem; } .mpag-dialog { max-width: 34rem; } .mgrd-dialog { max-width: 52rem; } .cfg-head, .lgfn-head, .mexp-head, .mpag-head, .mgrd-head, .mitem-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-bottom: 1px solid var(--card-border); background: var(--primary); color: #111; } .cfg-title, .lgfn-title, .mexp-title, .mpag-title, .mgrd-title, .mitem-title { flex: 1; margin: 0; font-size: .88rem; font-weight: 800; } .cfg-close, .lgfn-close, .mexp-close, .mpag-close, .mgrd-close, .mitem-close { border: 0; background: none; color: inherit; font-size: 1rem; line-height: 1; padding: .25rem .4rem; border-radius: .35rem; cursor: pointer; } .cfg-close:hover, .lgfn-close:hover, .mexp-close:hover, .mpag-close:hover, .mgrd-close:hover, .mitem-close:hover { background: rgba(0, 0, 0, .12); } .cfg-body, .lgfn-body, .mexp-body, .mpag-body, .mgrd-body, .mitem-body { padding: 1.1rem; overflow-y: auto; } .cfg-acoes, .lgfn-acoes, .mexp-acoes, .mpag-acoes, .mgrd-acoes, .mitem-acoes { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid var(--card-border); } /* Botao primario, compartilhado pelos rodapes. */ .cfg-salvar, .lgfn-entrar, .mexp-salvar, .mpag-concluir, .mgrd-salvar, .mitem-gravar { min-width: 7rem; padding: .5rem 1rem; border: 0; border-radius: var(--radius); background: var(--primary); color: #111; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; } .cfg-salvar:hover, .lgfn-entrar:hover, .mexp-salvar:hover, .mitem-gravar:hover { background: var(--primary-hover); } /* Campo rotulado, comum aos modais. */ .lgfn-campo, .mexp-campo, .mitem-campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .85rem; } .lgfn-campo label, .mexp-campo label, .mitem-campo span { font-size: .7rem; font-weight: 600; color: var(--text-muted); } .lgfn-campo input, .lgfn-campo select, .mexp-campo input, .mexp-campo select, .mitem-campo input { padding: .5rem .65rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .84rem; outline: none; width: 100%; } .lgfn-campo input:focus, .lgfn-campo select:focus, .mexp-campo input:focus, .mexp-campo select:focus, .mitem-campo input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* Mensagem de erro/status dentro do modal. */ .lgfn-erro, .mexp-status, .mitem-erro { margin: .35rem 0 0; font-size: .78rem; font-weight: 600; color: var(--danger); } /* ============================ Configuracao ============================== */ .cfg-secao { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--card-border); } .cfg-secao--ultima { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .cfg-secao-titulo { display: flex; align-items: center; gap: .45rem; margin-bottom: .75rem; font-size: .78rem; font-weight: 700; color: var(--primary); } .cfg-linha { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; font-size: .84rem; color: var(--text); } .cfg-linha:last-child { margin-bottom: 0; } .cfg-sub { font-size: .75rem; color: var(--text-muted); } .cfg-num { width: 4.5rem; padding: .35rem .5rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .84rem; text-align: center; outline: none; } .cfg-num:focus { border-color: var(--primary); } .cfg-temas { display: flex; gap: .5rem; } .cfg-tema { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; } .cfg-tema:hover { border-color: var(--primary); color: var(--text); } .cfg-tema.active { background: var(--primary); border-color: var(--primary); color: #111; font-weight: 700; } /* ============================ Login rapido ============================== */ .lgfn-ajuda { margin: 0 0 1rem; font-size: .82rem; color: var(--text-muted); } /* ============================== Expedicao =============================== */ .mexp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .85rem; } .mexp-campo--full { grid-column: 1 / -1; } @media (max-width: 560px) { .mexp-grid { grid-template-columns: 1fr; } } .mexp-qtd { display: flex; align-items: center; gap: .35rem; } .mexp-qtd input { text-align: center; } .mexp-qtd button { width: 2.1rem; height: 2.1rem; flex-shrink: 0; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); cursor: pointer; } .mexp-qtd button:hover { color: var(--primary); border-color: var(--primary); } .mexp-checks { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: .35rem; } /* ============================ Item do pedido ============================ */ .mitem-desc { margin: 0 0 1rem; font-weight: 700; color: var(--text); } .mitem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .85rem; } .mitem-total { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--text-muted); } .mitem-total strong { color: var(--text); font-size: 1rem; } .mitem-recalc { margin-left: auto; padding: .3rem .65rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: .76rem; cursor: pointer; } .mitem-recalc:hover { color: var(--primary); border-color: var(--primary); } /* ========================= Pagamentos da venda ========================= */ /* Layout copiado do modal-pagamentos.js do D2Kbal: caixa dos planos (tabela), resumo financeiro e grid dos pagamentos realizados, os tres empilhados dentro do corpo rolavel com a mesma folga do "space-y-3" do original. */ .mpag-box { margin-bottom: .75rem; border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; } /* Sem 'display' proprio aqui: a .hidden (variables.css) precisa vencer. */ .mpag-box:last-of-type { margin-bottom: 0; } /* atualizarBloqueioSelecao(): venda quitada, lista de planos inativa. */ .mpag-box.is-bloqueado { opacity: .5; pointer-events: none; } /* ---- tabela de planos (era o DataTables #tabelaPlanos) ---- */ .mpag-tabela { width: 100%; border-collapse: collapse; } .mpag-tabela thead th { padding: .5rem .8rem; text-align: left; font-size: .74rem; font-weight: 800; color: var(--text-muted); border-bottom: 1px solid var(--card-border); background: var(--app-bg); } .mpag-linha { cursor: pointer; } .mpag-linha td { padding: .5rem .8rem; font-size: .84rem; color: var(--text); border-bottom: 1px solid var(--card-border); } .mpag-linha:hover td { background: var(--app-bg); } /* Ultima linha: a borda da caixa ja fecha a tabela. */ .mpag-tabela tbody tr:last-child > td { border-bottom: 0; } .mpag-linha.is-sel td { background: var(--primary-soft); font-weight: 600; } /* ---- linha expandida do valor (row.child do DataTables) ---- */ .mpag-child > td { padding: .6rem .8rem; border-bottom: 1px solid var(--card-border); } .mpag-child-box { padding: .7rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--app-bg); } .mpag-child-titulo { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; color: var(--text-muted); } .mpag-child-linha { display: flex; gap: .5rem; } .mpag-child-linha input { flex: 1; min-width: 0; padding: .45rem .65rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .86rem; font-variant-numeric: tabular-nums; outline: none; } .mpag-child-linha input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .mpag-confirmar { padding: .45rem .9rem; border: 0; border-radius: var(--radius); background: var(--primary); color: #111; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; } .mpag-confirmar:hover { background: var(--primary-hover); } /* ---- resumo financeiro ---- */ .mpag-resumo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; padding: .75rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--app-bg); } .mpag-resumo > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .mpag-resumo span { font-size: .8rem; color: var(--text-muted); } .mpag-resumo strong { font-size: .86rem; color: var(--text); font-variant-numeric: tabular-nums; } /* ---- pagamentos realizados ---- */ .mpag-feitos-head { padding: .45rem .8rem; border-bottom: 1px solid var(--card-border); background: var(--app-bg); } .mpag-feitos-head h4 { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .72rem; font-weight: 700; color: var(--text-muted); } .mpag-feitos-head i { color: var(--primary); } .mpag-feitos-cols, .mpag-feito { display: flex; align-items: center; gap: .5rem; } .mpag-feitos-cols { padding: .35rem .8rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--card-border); } .mpag-col-nome { flex: 1; min-width: 0; } .mpag-col-parc { width: 5rem; flex: none; text-align: center; } .mpag-col-valor { width: 7rem; flex: none; text-align: right; } .mpag-col-acao { width: 2.25rem; flex: none; } .mpag-feito { padding: .5rem .8rem; font-size: .82rem; } .mpag-feito + .mpag-feito { border-top: 1px solid var(--card-border); } .mpag-feito-nome { flex: 1; min-width: 0; } .mpag-feito-titulo { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* So no celular, como o "sm:hidden" do original. */ .mpag-feito-sub { display: none; margin-top: .1rem; font-size: .72rem; color: var(--text-muted); } .mpag-feito-parc { width: 5rem; flex: none; text-align: center; font-size: .8rem; color: var(--text-muted); } .mpag-feito-valor { width: 7rem; flex: none; text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .mpag-feito-del { width: 2.25rem; height: 2.25rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); background: none; color: var(--danger); font-size: .9rem; cursor: pointer; } .mpag-feito-del:hover { background: var(--danger); color: #fff; } .mpag-feitos-rodape { display: flex; flex-direction: column; gap: .25rem; padding: .5rem .8rem; border-top: 1px solid var(--card-border); background: var(--app-bg); } .mpag-feitos-rodape > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .mpag-feitos-rodape span { font-size: .78rem; color: var(--text-muted); } .mpag-feitos-rodape strong { font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums; } /* Precisa da mesma altura de seletor que a regra do rodape acima. */ .mpag-feitos-rodape .mpag-total-pago { color: var(--success); } @media (max-width: 640px) { .mpag-feitos-cols, .mpag-feito-parc, .mpag-feito-valor { display: none; } .mpag-feito-sub { display: block; } } .mpag-status { margin: .6rem 0 0; font-size: .78rem; font-weight: 600; color: var(--danger); } .mpag-limpar { margin-right: auto; padding: .5rem .9rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; } .mpag-limpar:hover { color: var(--danger); border-color: var(--danger); } /* ===================== Grade do pedido / especificacoes ================ */ .mgrd-item { margin: 0; padding: .7rem 1.1rem 0; font-size: .84rem; font-weight: 700; color: var(--text); } .mgrd-tabs { display: flex; gap: .25rem; margin: .6rem 0 0; padding: 0 1.1rem; list-style: none; border-bottom: 1px solid var(--card-border); } .mgrd-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; } .mgrd-tab:hover { color: var(--text); } .mgrd-tab.active { color: var(--primary); border-bottom-color: var(--primary); } /* .hidden (variables.css) e esta regra tem a mesma especificidade e o modais.css vem depois — sem isto um pane/box com display proprio ignoraria o .hidden e ficaria sempre visivel. */ .mgrd-corlinha.hidden { display: none; } .mgrd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; } .mgrd-card { display: flex; flex-direction: column; gap: .3rem; padding: .6rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); } .mgrd-card-nome { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .mgrd-card-qtd, .mgrd-card-cor { padding: .4rem .5rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .84rem; outline: none; width: 100%; } .mgrd-card-qtd { text-align: center; font-variant-numeric: tabular-nums; } .mgrd-card-qtd:focus, .mgrd-card-cor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .mgrd-acao { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; padding: .45rem .8rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .mgrd-acao:hover { color: var(--primary); border-color: var(--primary); } .mgrd-secao { padding-top: .9rem; margin-top: .9rem; border-top: 1px solid var(--card-border); } .mgrd-secao:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .mgrd-secao-titulo { margin-bottom: .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); } /* Titulo de secao com acao a direita (o "+ Adicionar" das imagens). */ .mgrd-secao-titulo--acao { display: flex; align-items: center; gap: .5rem; } .mgrd-add-img { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--primary); border-radius: var(--radius); background: none; color: var(--primary); font: inherit; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } .mgrd-add-img:hover { background: var(--primary); color: #111; } .mgrd-imgs-vazio { margin: 0; padding: .9rem 0; text-align: center; font-size: .78rem; color: var(--text-muted); } .mgrd-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .mgrd-chip { padding: .35rem .7rem; border: 1px solid var(--card-border); border-radius: 999px; background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .mgrd-chip:hover { border-color: var(--primary); color: var(--text); } .mgrd-chip.is-on { background: var(--primary); border-color: var(--primary); color: #111; } .mgrd-corlinha { display: flex; flex-direction: column; gap: .25rem; margin-top: .6rem; } .mgrd-corlinha label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .mgrd-corlinha select { padding: .4rem .5rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .84rem; outline: none; max-width: 16rem; } .mgrd-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; } .mgrd-img { display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border: 1px solid var(--card-border); border-radius: var(--radius); } .mgrd-img-preview { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px dashed var(--card-border); border-radius: var(--radius); background: var(--app-bg); color: var(--text-muted); font-size: 1.4rem; cursor: pointer; overflow: hidden; } .mgrd-img-preview img { display: none; width: 100%; height: 100%; object-fit: cover; } .mgrd-img.tem-img .mgrd-img-preview img { display: block; } .mgrd-img.tem-img .mgrd-img-preview i { display: none; } .mgrd-img-file { display: none; } .mgrd-img-rotulo { padding: .35rem .5rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .78rem; outline: none; } .mgrd-img-rotulo:focus { border-color: var(--primary); } .mgrd-img-limpar { align-self: flex-end; border: 0; background: none; color: var(--text-muted); font-size: .82rem; cursor: pointer; } .mgrd-img-limpar:hover { color: var(--danger); } .mgrd-dica { margin: .5rem 0 0; font-size: .74rem; color: var(--text-muted); } .mgrd-totais { display: flex; align-items: center; gap: 1rem; margin-right: auto; font-size: .8rem; color: var(--text-muted); } .mgrd-totais strong { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; } .mgrd-status { flex-basis: 100%; margin: .5rem 0 0; font-size: .78rem; font-weight: 600; color: var(--danger); } .mgrd-acoes { flex-wrap: wrap; }