/* =========================================================================
   MÓDULOS NOVOS — ecrã de entrada, utilizador no topo, aviso de subscrição,
   páginas de Gestão MbongoPlus (utilizadores, planos, pagamentos).
   Segue o "acabamento profissional" do style.css: linhas finas, cantos 4–6px, sem sombras.
   ========================================================================= */

/* ---------- Ecrã de entrada (login.html) ---------- */
body.pg-login { background: var(--fundo); min-height: 100vh; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 420px) 1fr; }
.login-marca { background: var(--navy); color: #fff; padding: 48px 40px; display: flex; flex-direction: column; position: relative; }
.login-marca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--laranja); }
.login-logo { width: 64px; height: 64px; object-fit: contain; }
.login-nome { font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin-top: 18px; }
.login-lema { color: #b7c4d8; margin-top: 2px; }
.login-lista { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 12px; color: #dfe6f0; }
.login-lista li { padding-left: 18px; position: relative; }
.login-lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--laranja); }
.login-rodape { margin-top: auto; color: #8796ad; font-size: 12px; }
.login-caixa { display: grid; place-items: center; padding: 32px 20px; }
.lg-form { width: 100%; max-width: 400px; display: grid; gap: 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 6px; padding: 28px; }
.lg-form h1 { font-size: 22px; margin: 0; }
.lg-sub { color: var(--suave); margin: -6px 0 2px; line-height: 1.5; }
.lg-campo { display: grid; gap: 5px; }
.lg-campo span { font-size: 12px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.lg-campo input { font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid #c3cdd9; border-radius: 4px; background: #fff; color: var(--texto); }
.lg-campo input:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul); }
.lg-btn { justify-content: center; padding: 10px 14px; font-size: 15px; }
.lg-btn:disabled { opacity: .55; cursor: default; }
.lg-btn-sec { justify-content: center; }
.lg-link { background: none; border: 0; color: var(--azul); font: inherit; cursor: pointer; justify-self: center; padding: 2px; }
.lg-link:hover { text-decoration: underline; }
.lg-erro { background: var(--vermelho-cl); color: var(--vermelho); border: 1px solid #efc0c0; border-radius: 4px; padding: 9px 12px; }
.lg-info { background: #f2f6fb; border: 1px solid #d3e0ef; border-radius: 4px; padding: 9px 12px; color: #2b3a4d; }
.lg-nota { color: var(--suave); font-size: 12.5px; margin: 0; line-height: 1.5; }
.lg-check { display: flex; gap: 8px; align-items: center; }
.codigo-rec { font-family: Consolas, "Courier New", monospace; font-size: 22px; font-weight: 700; letter-spacing: .08em; text-align: center; padding: 14px; border: 1px dashed var(--laranja); border-radius: 4px; background: var(--laranja-cl); color: var(--navy); user-select: all; word-break: break-all; }
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { padding: 24px 20px; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .login-logo { width: 40px; height: 40px; }
  .login-nome { font-size: 22px; margin: 0; }
  .login-lista, .login-rodape { display: none; }
}

.lg-modo { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--suave); font-size: 12.5px; text-align: center; display: grid; gap: 2px; }

/* ---------- Estado da ligação ao servidor (topo) e "a carregar" ---------- */
.topo-sinc { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; color: #dfe6f0; background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.topo-sinc[hidden] { display: none; }
.topo-sinc .pt { width: 8px; height: 8px; border-radius: 50%; background: #5fcf98; flex: none; }
.topo-sinc.av .pt { background: #f5b84a; }
.topo-sinc.er { border-color: #f2857a; color: #ffd9d4; }
.topo-sinc.er .pt { background: #f2857a; }
@media (max-width: 900px) { .topo-sinc .tx { display: none; } }
.carregar { display: flex; align-items: center; gap: 10px; padding: 40px 0; color: var(--suave); }
.roda { width: 18px; height: 18px; border: 2px solid var(--linha); border-top-color: var(--azul); border-radius: 50%; animation: roda .8s linear infinite; }
@keyframes roda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roda { animation: none; } }

/* ---------- Utilizador na barra de topo ---------- */
.topo-utilizador { display: inline-flex; gap: 6px; }
.topo-utilizador .btn-topo { text-decoration: none; }
.topo-utilizador .btn-topo span { display: inline-flex; flex-direction: column; line-height: 1.15; }
.topo-utilizador .btn-topo small { font-size: 10.5px; color: #b7c4d8; }
@media (max-width: 900px) { .topo-utilizador .btn-topo span { display: none; } }

/* ---------- Aviso de subscrição (faixa no topo da página) ---------- */
.sub-faixa { border: 1px solid; border-radius: 4px; padding: 9px 13px; margin: 0 0 12px; font-size: 13px; }
.sub-faixa.av { background: #fff8e8; border-color: #ecd9a8; color: #6b4a00; }
.sub-faixa.er { background: var(--vermelho-cl); border-color: #efc0c0; color: var(--vermelho); }

/* ---------- Validade da subscrição: anel que esvazia com o tempo ---------- */
.sub-anel { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 9px 3px 4px; background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: #dfe6f0; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.sub-anel:hover { background: rgba(255,255,255,.08); }
.sub-anel.alerta { border-color: #f5b84a; color: #ffe2a8; }
.sub-anel .sub-anel-svg circle:first-child { stroke: rgba(255,255,255,.18); }
.sub-anel-svg, .sub-anel-svg * { flex: none; }
.sub-anel-svg text { stroke: none !important; fill: var(--navy); }
.sub-anel-n { font-size: 34px; font-weight: 700; } .sub-anel-l { font-size: 11px; fill: var(--suave) !important; }
.sub-painel { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sub-dados { display: grid; gap: 6px; font-size: 13.5px; min-width: 220px; flex: 1; }
.sub-dados span { display: inline-block; min-width: 72px; color: var(--suave); }
.sub-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; background: var(--azul-cl); border-radius: 6px; }
.sub-total b { font-size: 20px; color: var(--navy); } .sub-total small { color: var(--suave); width: 100%; }
.sub-faixa .btn { margin-left: 8px; }
@media (max-width: 900px) { .sub-anel span { display: none; } }

/* ---------- Formulários de utilizadores, perfis e planos ---------- */
.us-emps { display: grid; gap: 6px; }
.us-emps > label { display: flex; gap: 6px; align-items: center; }
.us-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 4px; max-height: 220px; overflow: auto; }
.us-lista label { display: flex; gap: 6px; align-items: center; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); font-size: 13px; }
.us-lista.escondido { display: none; }

/* ---------- Modelo de facturação (SAF-T / electrónica) ---------- */
.modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0 0 12px; }
.modelo-op { display: flex; gap: 10px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--linha); border-radius: 6px; padding: 12px 14px; cursor: pointer; }
.modelo-op input { margin-top: 3px; }
.modelo-op > span { display: grid; gap: 3px; }
.modelo-op .sub { margin: 0; font-size: 12.5px; }
.modelo-op.sel { border-color: var(--azul); background: var(--azul-cl); }
.modelo-op.bloq { cursor: default; }
.modelo-op.bloq:not(.sel) { opacity: .6; }

/* ---------- Formatos de impressão: A5 e talão (impressora térmica) ---------- */
.doc-imp.ft.ft-a5 { max-width: 600px; aspect-ratio: 148 / 210; padding: 22px 24px 16px; font-size: 11px; }
.ft-a5 .ft-tipo { font-size: 22px; } .ft-a5 .ft-num { font-size: 14px; } .ft-a5 .ft-emp { font-size: 13px; }
.ft-a5 .ft-cli { margin: 8px 0 14px 50%; font-size: 12px; } .ft-a5 .ft-cli-nome { font-size: 13.5px; }
.ft-a5 .ft-info { margin-bottom: 18px; } .ft-a5 th, .ft-a5 td { padding: 3px 4px; font-size: 10px; }
.ft-a5 .ft-quadros { gap: 12px; margin-top: 10px; } .ft-a5 .ft-tot { flex-basis: 46%; width: 46% !important; }
.ft-a5 .doc-logo { max-height: 48px; max-width: 110px; } .ft-a5 .ft-ref { margin: 12px 0 6px; font-size: 12px; }
.ft-a5 .ft-assin { padding-top: 28px; } .ft-a5 .ft-qr { width: 112px !important; height: 112px !important; }
@media print { .doc-imp.ft.ft-a5 { max-width: none; aspect-ratio: 136 / 196; padding: 0 !important; } .ft-a5 .ft-qr { width: 26mm !important; height: 26mm !important; } }
.pdf-caixa .doc-imp.ft.ft-a5 { aspect-ratio: 148 / 206; padding: 16px 18px 10px !important; }
.pdf-caixa .ft-a5 .ft-qr { width: 104px !important; height: 104px !important; }

.fmt-imp { display: inline-flex; flex: none; }
.fmt-imp .btn { border-radius: 0; margin: 0 0 0 -1px; } .fmt-imp .btn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; } .fmt-imp .btn:last-child { border-radius: 0 4px 4px 0; }
.doc-imp.talao { font-family: Arial, Helvetica, sans-serif; background: #fff; color: #000; font-size: 11px; line-height: 1.35; padding: 14px 12px; margin: 0 auto; border: 1px solid var(--linha); border-radius: 4px; box-sizing: content-box; }
.doc-imp.talao + .doc-imp.talao { margin-top: 18px; }
.talao .tl-c { text-align: center; }
.talao .tl-logo { text-align: center; margin-bottom: 4px; } .talao .tl-logo img { max-width: 60%; max-height: 54px; }
.talao .tl-emp { font-weight: 700; font-size: 12.5px; }
.talao .tl-tipo { font-weight: 700; font-size: 13px; margin-top: 2px; } .talao .tl-num { font-weight: 700; }
.talao .tl-via, .talao .tl-anul { font-weight: 700; letter-spacing: 1px; border: 1px solid #000; display: table; margin: 3px auto 0; padding: 0 6px; }
.talao .tl-sep { border-top: 1px dashed #000; margin: 6px 0; }
.talao .tl-l { display: flex; justify-content: space-between; gap: 8px; } .talao .tl-l span:last-child { text-align: right; } .talao .tl-l span:first-child { flex: 1; min-width: 0; }
.talao .tl-art { margin-top: 3px; font-weight: 700; }
.talao .tl-tot { font-weight: 700; font-size: 13px; margin-top: 3px; } .talao .tl-b { font-weight: 700; }
.talao .tl-p { margin: 4px 0; }
.talao .tl-qr { text-align: center; margin: 8px 0 4px; } .talao .tl-qr img { image-rendering: pixelated; }
.talao .tl-legal { font-size: 9px; margin-top: 4px; }
@media print { .doc-imp.talao { border: 0; padding: 0; margin: 0; } .doc-imp.talao + .doc-imp.talao { page-break-before: always; break-before: page; } }
.pdf-caixa .doc-imp.talao { padding: 0 !important; border: 0 !important; }

/* ---------- Assistente (botão no canto inferior direito) ---------- */
.assist-btn { position: fixed; right: 22px; bottom: 74px; /* acima do selo «Powered by Netlify» */ z-index: 60; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(20,35,58,.28); }
.assist-btn:hover { background: var(--navy-3); }
.assist-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.assist-ponto { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--laranja); border: 2px solid #fff; }
.assist { position: fixed; right: 22px; bottom: 138px; z-index: 60; width: 370px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 170px); background: #fff; border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 12px 40px rgba(20,35,58,.22); display: flex; flex-direction: column; overflow: hidden; }
.assist[hidden] { display: none; }
.assist-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--navy); color: #fff; border-bottom: 3px solid var(--laranja); }
.assist-cab img { width: 30px; height: 30px; object-fit: contain; }
.assist-cab div { flex: 1; display: grid; line-height: 1.2; } .assist-cab span { font-size: 11.5px; color: #b7c4d8; }
.assist-x { background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8; } .assist-x:hover { opacity: 1; }
.assist-corpo { flex: 1; overflow-y: auto; padding: 16px; background: var(--fundo); display: flex; flex-direction: column; gap: 12px; }
.assist-ola { font-size: 21px; line-height: 1.25; color: var(--navy); margin: 6px 0 4px; }
.assist-cartao { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--texto); }
.assist-cartao:hover { border-color: var(--azul); } .assist-cartao span { display: grid; gap: 2px; } .assist-cartao small { color: var(--suave); font-size: 12px; }
.assist-cartao svg, .assist-item svg, .assist-voltar svg, .assist-pesq svg, .assist-escrever svg, .assist-abas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.assist-cartao svg { color: var(--laranja); }
.assist-caixa { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 8px; display: grid; gap: 2px; }
.assist-pesq { display: flex; align-items: center; gap: 8px; background: var(--fundo); border-radius: 6px; padding: 0 10px; margin-bottom: 4px; color: var(--azul); }
.assist-pesq input { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 600; padding: 10px 0; outline: none; color: var(--texto); }
.assist-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; }
.assist-item:hover { background: var(--azul-cl); } .assist-item svg { color: var(--azul); }
.assist-vazio { color: var(--suave); margin: 6px 8px; font-size: 13px; }
.assist-tit { margin: 0; font-size: 15px; color: var(--navy); }
.assist-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: 4px 2px -6px; }
.assist-voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--azul); font: inherit; cursor: pointer; padding: 0; }
.assist-passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.assist-nota { margin: 0; padding: 8px 10px; background: var(--amarelo-cl); border-radius: 6px; font-size: 12.5px; color: #6b4a00; }
.assist-nov { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; display: grid; gap: 3px; }
.assist-nov span { font-size: 11px; color: var(--suave); } .assist-nov b { color: var(--navy); } .assist-nov p { margin: 0; font-size: 13px; line-height: 1.45; }
.assist-conversa { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; margin: -16px -16px 0; padding: 16px; }
.assist-msg { max-width: 88%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.assist-msg.eu { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.assist-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--linha); border-bottom-left-radius: 3px; }
.assist-msg.bot ol { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; } .assist-msg.bot .btn { margin-top: 6px; }
.assist-msg .assist-nota { margin-top: 6px; } .assist-tb { margin-top: 8px; font-size: 12px; color: var(--suave); }
.assist-escrever { display: flex; gap: 8px; margin: 0 -16px -16px; padding: 10px 12px; background: #fff; border-top: 1px solid var(--linha); }
.assist-escrever input { flex: 1; border: 1px solid #c3cdd9; border-radius: 6px; padding: 8px 10px; font: inherit; }
.assist-escrever input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.assist-escrever button { border: 0; background: var(--azul); color: #fff; border-radius: 6px; width: 38px; cursor: pointer; display: grid; place-items: center; }
.assist-abas { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linha); background: #fff; }
.assist-abas button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 0 8px; background: none; border: 0; font: inherit; font-size: 11.5px; color: var(--suave); cursor: pointer; }
.assist-abas button.sel { color: var(--azul); font-weight: 600; } .assist-abas button:hover { color: var(--azul); }
.assist-abas svg { width: 20px; height: 20px; } .assist-abas .assist-ponto { top: 6px; right: calc(50% - 16px); }
.assist-texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--suave); }
.assist-area { width: 100%; box-sizing: border-box; border: 1px solid #c3cdd9; border-radius: 6px; padding: 9px 10px; font: inherit; resize: vertical; background: #fff; }
.assist-area:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.assist-wa { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.assist-wa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assist-rodape { display: block; text-align: center; font-size: 12px; padding: 7px; background: #fff; border-top: 1px solid var(--linha); }
@media (max-width: 560px) { .assist { right: 8px; left: 8px; width: auto; bottom: 80px; } .assist-btn { right: 14px; bottom: 14px; } }
@media print { .assist, .assist-btn { display: none !important; } }

/* ---------- Calendário fiscal ---------- */
.cf-tab tr.cf-mes td { background: var(--fundo) !important; font-weight: 700; color: var(--navy); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; padding-top: 10px; }
.cf-tab tr.cf-feito td { color: var(--suave); }
.cf-tab td { vertical-align: middle; white-space: nowrap; padding-top: 5px; padding-bottom: 5px; }
.cf-tab .btn.fino { padding: 3px 9px; }
.cf-tab td:nth-child(3) { white-space: normal; }
.cf-tab .cf-prorrog { font-size: 11px; font-weight: 700; color: var(--laranja, #e8590c); }

/* ---------- Planos ---------- */
.planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plano-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; }
.plano-cartao.inactivo { opacity: .65; }
.plano-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plano-cab h3 { margin: 0; font-size: 16px; }
.plano-preco { font-size: 22px; font-weight: 700; color: var(--navy); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.plano-preco small { font-size: 12px; font-weight: 400; color: var(--suave); }
.plano-cartao ul { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 3px; font-size: 13px; flex: 1; }
.plano-cartao li { padding-left: 18px; position: relative; }
.plano-cartao li.sim::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.plano-cartao li.nao { color: #9aa6b8; text-decoration: line-through; }
.plano-cartao li.nao::before { content: "–"; position: absolute; left: 2px; }
.plano-cartao .btn { align-self: flex-start; }

/* ---------- Ponto de venda (ecrã táctil) ---------- */
.pos-ecra { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; height: calc(100vh - 150px); min-height: 520px; }
body.pos-cheio .menu, body.pos-cheio .topo, body.pos-cheio .migalhas, body.pos-cheio .assist-btn { display: none !important; }
body.pos-cheio main { margin: 0 !important; padding: 10px !important; max-width: none !important; }
body.pos-cheio .pos-ecra { height: calc(100vh - 20px); }
.pos-esq { display: flex; flex-direction: column; min-height: 0; }
.pos-topo { display: flex; gap: 8px; margin-bottom: 8px; } .pos-topo input { flex: 1; font-size: 16px; padding: 12px 14px; }
.pos-fams { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pos-fams button { border: 1px solid var(--linha); background: #fff; border-radius: 22px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
.pos-fams button.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.pos-artigos { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 96px; gap: 8px; align-content: start; }
.pos-art { border: 1px solid var(--linha); border-top: 4px solid var(--laranja); border-radius: 8px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; font-size: 14px; line-height: 1.2; user-select: none; touch-action: manipulation; }
.pos-art:active { transform: scale(.97); background: #fff4ec; } .pos-art b { font-size: 15px; color: var(--navy); align-self: flex-end; }
.pos-dir { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: 10px; min-height: 0; overflow: hidden; }
.pos-cab { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.pos-linhas { flex: 1; overflow-y: auto; padding: 4px 8px; }
.pos-l { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef0f3; }
.pos-l-d { display: flex; flex-direction: column; cursor: pointer; font-size: 14px; } .pos-l-d span { color: var(--suave); font-size: 12.5px; }
.pos-l-b button { width: 40px; height: 40px; border: 1px solid var(--linha); background: #fff; border-radius: 8px; font-size: 20px; cursor: pointer; margin-left: 4px; touch-action: manipulation; }
.pos-l-v { font-weight: 700; min-width: 76px; text-align: right; } .pos-l-x { border: 0; background: none; color: var(--vermelho); font-size: 16px; cursor: pointer; padding: 6px; }
.pos-vazio { color: var(--suave); text-align: center; padding: 30px 10px; }
.pos-tot { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-top: 2px solid var(--navy); } .pos-tot b { font-size: 30px; color: var(--navy); }
.pos-acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px 8px; }
.pos-acoes button { border: 1px solid var(--linha); background: #fff; border-radius: 8px; padding: 12px 4px; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.pos-cobrar { margin: 0 10px 10px; border: 0; border-radius: 10px; background: var(--laranja); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 1px; padding: 18px; cursor: pointer; touch-action: manipulation; }
.pos-cobrar:disabled { background: #c9ced6; cursor: default; }
.pos-cob { min-width: min(520px, 90vw); }
.pos-meios { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pos-meios button { border: 2px solid var(--linha); background: #fff; border-radius: 10px; padding: 16px 8px; font-size: 15px; cursor: pointer; }
.pos-meios button.sel { border-color: var(--laranja); background: #fff4ec; font-weight: 700; }
.pos-ent { font-size: 28px !important; padding: 10px 14px !important; width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.pos-notas { display: flex; gap: 6px; flex-wrap: wrap; } .pos-notas button { flex: 1; border: 1px solid var(--linha); background: #fff; border-radius: 8px; padding: 12px 6px; font-size: 15px; cursor: pointer; }
.pos-troco { margin-top: 10px; font-size: 18px; } .pos-troco b { font-size: 26px; color: var(--verde); }
.pos-ok { font-size: 17px !important; padding: 12px 22px !important; }
.pos-esp { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pos-esp button { border: 1px solid var(--linha); border-left: 4px solid var(--azul); background: #fff; border-radius: 8px; padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.pos-esp button span { color: var(--suave); font-size: 12px; }
.pos-imp { position: absolute; left: -12000px; top: 0; }
@media print { .pos-imp { position: static; } body:has(.pos-ecra) .print-cab { display: none; } }
@media (max-width: 900px) { .pos-ecra { grid-template-columns: 1fr; height: auto; } .pos-artigos { max-height: 50vh; } }
/* ---------- Planos de pagamento em prestações (mapa) ---------- */
.pp-mapa { font-size: 12px; }
.pp-intro { margin: 4px 0 10px; text-align: justify; }
.pp-mapa h3 { font-size: 12.5px; margin: 12px 0 4px; }
.pp-t { width: 100%; border-collapse: collapse; }
.pp-t th, .pp-t td { border: 1px solid #333; padding: 3px 6px; font-size: 11.5px; }
.pp-t th { background: #f1f3f6 !important; font-weight: 700; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp-t .c { text-align: center; } .pp-t .n { text-align: right; white-space: nowrap; }
.pp-id td:first-child { width: 38%; }
.pp-tot td { font-weight: 700; }
.pp-pago { color: #2b8a3e; } .pp-porpagar { color: #c92a2a; }
.pp-nota { margin-top: 12px; font-size: 10.5px; color: #555; }
.pp-plano { table-layout: fixed; } .pp-plano td, .pp-plano th { word-break: break-word; } .pp-plano td.n { white-space: nowrap; font-size: 11px; }
.pp-t th { position: static !important; text-transform: none; letter-spacing: 0; color: #000; font-size: 11.5px; }
.pp-t th { white-space: normal !important; line-height: 1.2; vertical-align: middle; }
select.pp-sel-porpagar { color: #c92a2a; font-weight: 700; } select.pp-sel-pago { color: #2b8a3e; font-weight: 700; }
.pp-porpagar { color: #c92a2a !important; }
.pp-carta p { margin: 0 0 8px; line-height: 1.5; }
.pp-data { text-align: right; } .pp-para { margin-top: 10px !important; } .pp-assunto { margin: 12px 0 !important; }
.pp-alerta { border-left: 3px solid #c92a2a; padding-left: 8px; }
.pp-fecho { margin-top: 14px !important; }
.pp-assin { margin: 34px 0 0 auto; width: 260px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pp-assin .pp-linha { border-top: 1px solid #333; margin-bottom: 4px; } .pp-assin span { color: #555; }.pp-fecho { margin: 14px 0 0; line-height: 1.5; } .pp-fim { break-inside: avoid; page-break-inside: avoid; } .pp-assin { margin-top: 26px; }
.pp-pago { color: #2b8a3e !important; }

/* ---------- Alarmes (calendário fiscal, prestações): a faixa pisca enquanto houver obrigações por resolver ---------- */
@keyframes alarmeEr { 0%, 100% { background: #fdecea; border-color: #f5c2c0; box-shadow: none; } 50% { background: #f8b4ae; border-color: #c92a2a; box-shadow: 0 0 0 3px rgba(201,42,42,.25); } }
@keyframes alarmeAv { 0%, 100% { background: #fff4e5; border-color: #ffd8a8; box-shadow: none; } 50% { background: #ffd08a; border-color: #e8590c; box-shadow: 0 0 0 3px rgba(232,89,12,.25); } }
.sub-faixa.alarme { border: 1px solid transparent; }
.sub-faixa.alarme.er { animation: alarmeEr 1.1s ease-in-out infinite; }
.sub-faixa.alarme.av { animation: alarmeAv 1.4s ease-in-out infinite; }
.sub-faixa.alarme:hover { animation-play-state: paused; } /* pára enquanto o rato está por cima, para ler e clicar */
@media (prefers-reduced-motion: reduce) { .sub-faixa.alarme.er, .sub-faixa.alarme.av { animation-duration: 2.6s; } }
@media print { .sub-faixa.alarme { animation: none; } }/* POS — estado da caixa no topo do talão */
.pos-caixa { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--linha); }
.pos-caixa.ok { background: #ebfbee; color: #2b8a3e; } .pos-caixa.off { background: #fff4e6; color: #d9480f; font-weight: 600; }
.pos-acoes button:disabled { opacity: .45; cursor: default; }
/* Resumo de vendas e descontos no POS */
.rv-barra { display: grid; gap: 2px; } .rv-barra span { display: block; height: 7px; border-radius: 2px; min-width: 1px; }
#t-rv tr.sel td { background: #fff4ec !important; }
.rv-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.pos-desc { color: #2b8a3e; font-weight: 700; }