/* =========================================================================
   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); }
/* palavra-passe com o botão do olho (mostrar / esconder) */
.lg-senha { position: relative; display: grid; }
.lg-senha input { padding-right: 44px; }
.lg-olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: 4px; background: transparent; color: var(--suave); cursor: pointer; }
.lg-olho:hover { color: var(--azul); background: var(--azul-cl); }
.lg-olho:focus-visible { outline: 2px solid var(--azul); outline-offset: 0; }
.lg-olho[aria-pressed="true"] { 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-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* campo-armadilha para robôs */
.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(220px, 1fr)); gap: 4px 10px; padding: 8px; border: 1px solid var(--linha); border-radius: 4px; max-height: 280px; overflow: auto; align-items: start; }
/* o quadrado não encolhe quando o nome ocupa várias linhas; fica alinhado com a primeira linha do nome */
.us-lista label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); font-size: 13px; line-height: 1.3; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
.us-lista label:hover { background: var(--fundo); }
.us-lista label:has(input:checked) { background: var(--azul-cl); }
.us-lista input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; cursor: pointer; }
.us-lista .us-nome { display: block; }
.us-lista .us-nif { display: block; font-size: 11.5px; color: var(--suave); margin-top: 1px; }
.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: 22px; 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: 86px; z-index: 60; width: 370px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 120px); 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: minmax(0, 1fr); height: auto; } .pos-artigos { max-height: 50vh; } .pos-esq, .pos-dir { min-width: 0; } .pos-topo { flex-wrap: wrap; } .pos-topo input { min-width: 0; flex-basis: 100%; } }
/* ---------- 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; }

/* Ficha do artigo (separadores) */
.art-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--linha); }
.art-cab { align-items: flex-end; }
.art-chk { flex-direction: row !important; gap: 6px; align-items: center; white-space: nowrap; }
.art-abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--linha); margin: 14px 0 12px; }
.art-abas button { border: 0; background: none; padding: 8px 14px; font: inherit; font-size: 13px; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.art-abas button:hover { color: var(--navy); }
.art-abas button.sel { color: var(--navy); font-weight: 700; border-bottom-color: var(--laranja); }
.art-pag { min-height: 250px; }
.art-col2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 680px) { .art-col2 { grid-template-columns: 1fr; } }
.art-grupo { border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px 12px; }
.art-grupo h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.art-op { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13.5px; }
.art-pvp { width: 100%; } .art-pvp td, .art-pvp th { padding: 3px 6px; } .art-pvp input { width: 100%; }
/* Ficha do funcionário */
.ff-cab { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-bottom: 12px; }
.ff-foto { display: grid; gap: 8px; justify-items: center; }
.ff-foto img, .ff-foto .ff-avatar { width: 112px; height: 112px; border-radius: 10px; object-fit: cover; border: 1px solid var(--linha); }
.ff-foto-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 220px; }
.ff-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: #e7ecf2; color: #3d4a5a; font-weight: 700; letter-spacing: .02em; flex: none; }
.ff-foto .ff-avatar { border-radius: 10px; }
.ff-foto-mini { border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--linha); }
.ff-ident { flex: 1; min-width: 240px; }
.ff-ident h1 { margin: 0 0 6px; }
.ff-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--suave); font-size: 13.5px; }
.ff-prog { margin-top: 10px; display: grid; gap: 4px; font-size: 13px; max-width: 520px; }
.ff-barra { height: 8px; background: #e7ecf2; border-radius: 5px; overflow: hidden; }
.ff-barra span { display: block; height: 100%; background: var(--laranja); transition: width .2s; }
.ff-falta { color: var(--suave); font-size: 12px; }
.ff-obr { color: var(--vermelho); }
.ff .campo.erro input, .ff .campo.erro select, .ff .campo.erro textarea { border-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(201,42,42,.15); }
.ff-abas { overflow-x: auto; flex-wrap: nowrap; }
.ff-abas button { white-space: nowrap; }
.ff-sub { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.ff-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ff-tab th { text-align: left; color: var(--suave); font-weight: 600; width: 40%; background: none; text-transform: none; letter-spacing: 0; font-size: 13px; position: static; }
.ffo-quadro { display: grid; place-items: center; background: #f1f3f6; border-radius: 8px; padding: 10px; }
.ffo-quadro canvas { width: 280px; height: 280px; max-width: 100%; border-radius: 8px; cursor: grab; touch-action: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
th.ord { cursor: pointer; user-select: none; }
.fi .fi-id { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
.fi .fi-foto { width: 90px; height: 90px; border-radius: 6px; object-fit: cover; border: 1px solid #ccc; }
.fi .fi-sem { display: grid; place-items: center; background: #eef1f4; font-weight: 700; color: #555; }
.fi .fi-nome { font-size: 16px; font-weight: 700; }
.fi .fi-h { margin: 12px 0 4px; font-size: 12.5px; border-bottom: 1px solid #333; padding-bottom: 2px; text-transform: uppercase; letter-spacing: .03em; }
.fi .fi-t { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fi .fi-t th, .fi .fi-t td { padding: 3px 6px; border-bottom: 1px solid #e5e5e5; text-align: left; background: none; position: static; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.fi .fi-t tbody th { width: 38%; color: #555; font-weight: 600; }
@media (max-width: 640px) { .ff-cab { flex-direction: column; align-items: stretch; } .ff-foto { justify-items: start; } }
/* Recibo de salário */
.rs { font-size: 12.5px; color: #1f2937; }
.rs .rs-cab { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.rs .rs-cab .doc-emit { display: flex; gap: 12px; align-items: center; line-height: 1.45; }
.rs .rs-tit { margin: 18px 0 10px; font-size: 22px; font-weight: 400; color: var(--navy); border: 0; padding: 0; }
.rs table { width: 100%; border-collapse: collapse; }
.rs .rs-dados th, .rs .rs-dados td { border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; font-size: 12.5px; background: none; text-transform: none; letter-spacing: 0; position: static; }
.rs .rs-dados th { color: var(--azul-esc); font-weight: 600; width: 19%; background: #fafbfc; }
.rs .rs-dados td { width: 31%; }
.rs .rs-mov { margin-top: 16px; }
.rs .rs-mov thead th { color: var(--azul-esc); font-weight: 600; font-size: 12.5px; text-transform: none; letter-spacing: 0; background: none; border-bottom: 2px solid #222; padding: 6px 8px; position: static; }
.rs .rs-mov td { padding: 6px 8px; border: 0; font-size: 12.5px; }
.rs .rs-mov tbody tr:nth-child(odd) td { background: #f5f6f8; }
.rs .rs-mov tr.rs-tot td { background: #eef0f3 !important; border-top: 1px solid #d1d5db; }
.rs .rs-mov tr.rs-pago td { background: none !important; border-top: 2px solid #222; font-size: 13.5px; }
.rs .rs-mov tr.rs-pago td:first-child { border-top: 0; }
.rs .rs-mov tr.rs-pago b { color: var(--azul-esc); }
.rs .rs-decl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.rs .rs-lbl { color: var(--azul-esc); font-weight: 600; margin-bottom: 4px; }
.rs .rs-ass { margin-top: 34px; }
.rs .rs-mini { color: #6b7280; font-size: 11px; }
.rs .rs-rod { margin-top: 24px; border-top: 1px solid #222; padding-top: 8px; text-align: center; line-height: 1.6; color: #4b5563; font-size: 11.5px; }
/* processamento salarial em massa */
.rh-massa { padding: 10px 14px; }
.rh-massa .rh-massa-tit { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.rh-massa .rh-massa-tit .sub { margin: 0; }
/* relatório individual de assiduidade e quadro no recibo */
.ra .ra-dias td { padding: 3px 8px; font-size: 11.5px; }
.ra .ra-dias tr.ra-er td { color: #b42318; font-weight: 600; }
.ra .ra-dias tr.ra-av td { color: #a15c07; }
.ra .ra-dias tr.ra-ok td { color: #0d3f7a; }
.ra .ra-dias tr.ra-cz td { color: #6b7280; }
.ra .ra-tot { margin-top: 12px; }
.rs .rs-assid { margin-top: 12px; }
.rs .rs-assid thead tr:first-child th { color: var(--azul-esc); border-bottom: 1px solid #d1d5db; }
.rs .rs-assid td { background: none !important; }
/* processamento salarial: verificação antes de processar */
.rh-check { padding: 10px 14px; }
.rh-passos { display: flex; gap: 8px; flex-wrap: wrap; }
.rh-passo { padding: 4px 10px; border-radius: 999px; background: var(--azul-cl); color: var(--azul-esc); font-size: 12.5px; }
.rh-passo b { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: var(--azul-esc); color: #fff; font-size: 11px; margin-right: 4px; }
.rh-passo.ok { background: #e7f6ec; color: #18794e; }
.rh-passo.ok b { background: #18794e; }
/* painel de RH */
.prh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.prh-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--branco, #fff); border: 1px solid #e5e7eb; border-radius: 10px; color: inherit; text-decoration: none; }
a.prh-tile[href]:hover { border-color: var(--azul); }
.prh-t { font-size: 12px; color: #6b7280; }
.prh-v { font-size: 22px; font-weight: 700; color: var(--azul-esc); }
.prh-s { font-size: 11.5px; color: #6b7280; }
.prh-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .prh-duas { grid-template-columns: 1fr; } }
.prh-al { list-style: none; margin: 0; padding: 0; }
.prh-a { padding: 6px 10px; border-left: 3px solid #a15c07; background: #fff8eb; margin-bottom: 6px; border-radius: 4px; }
.prh-a.er { border-color: #b42318; background: #fef3f2; }
.prh-a.in { border-color: var(--azul); background: var(--azul-cl); }
.prh-a a { color: inherit; text-decoration: none; }
.prh-graf { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 8px 0 0; border-bottom: 1px solid #e5e7eb; }
.prh-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.prh-col:hover .prh-bar { background: var(--azul); }
.prh-bar { width: 60%; max-width: 34px; background: var(--azul-esc); border-radius: 4px 4px 0 0; }
.prh-col span { position: absolute; bottom: -18px; font-size: 11px; color: #6b7280; }
.prh-graf + details { margin-top: 26px !important; }
.prh-dep { display: grid; grid-template-columns: 34% 1fr auto; gap: 8px; align-items: center; margin: 6px 0; font-size: 12.5px; }
.prh-dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prh-dt { background: #f1f3f5; height: 10px; border-radius: 4px; overflow: hidden; }
.prh-dt span { display: block; height: 100%; background: var(--azul-esc); border-radius: 0 4px 4px 0; }
.prh-dv { color: #374151; font-variant-numeric: tabular-nums; }
/* documentos de RH (contrato, declaração, certificado) */
.drh { font-size: 13px; color: #1f2937; }
.drh .rs-cab { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.drh .rs-cab .doc-emit { display: flex; gap: 12px; align-items: center; line-height: 1.45; }
.drh-dest { margin: 22px 0 0; text-align: right; line-height: 1.5; }
.drh-tit { text-align: center; font-size: 17px; letter-spacing: .06em; color: var(--azul-esc); margin: 26px 0 18px; border: 0; padding: 0; }
.drh-corpo { line-height: 1.75; text-align: justify; outline: none; }
.drh-corpo:focus { box-shadow: 0 0 0 2px var(--azul-cl); border-radius: 4px; }
.drh-corpo p { margin: 0 0 12px; }
.drh-local { margin-top: 22px !important; text-align: right; }
.drh-falta { background: #fff3c4; color: #8a5a00; padding: 0 3px; border-radius: 3px; }
.drh-assin { display: flex; justify-content: center; gap: 60px; margin-top: 46px; text-align: center; }
.drh-assin.dois { justify-content: space-between; }
.drh-ass { min-width: 240px; }
.drh-linha { border-top: 1px solid #222; margin-bottom: 6px; }
.drh-carimbo { align-self: flex-end; color: #9ca3af; font-size: 11px; }
@media print { .drh-falta { background: none; color: inherit; } }
.drh-subt { text-align: center; margin: 0 0 16px; color: #4b5563; }
/* folha de vencimentos com todas as rubricas (17 colunas): letra mais pequena, títulos em duas linhas */
.mrh-larga table { font-size: 11.5px; }
.mrh-larga th { white-space: normal; line-height: 1.2; vertical-align: bottom; min-width: 64px; }
.mrh-larga td, .mrh-larga th { padding: 4px 5px; }
@media print { .mrh-larga table { font-size: 8.5px; } .mrh-larga td, .mrh-larga th { padding: 2px 3px; } .mrh-larga th { min-width: 0; } }
/* no PDF (Exportar PDF) a folha de vencimentos cabe na largura do A4 horizontal */
.pdf-caixa .mrh-larga { overflow: visible !important; }
.pdf-caixa .mrh-larga table { font-size: 7.1px !important; width: 100%; table-layout: auto; }
.pdf-caixa .mrh-larga th, .pdf-caixa .mrh-larga td { padding: 2px 2.5px !important; min-width: 0 !important; }
.pdf-caixa .mrh-larga th { font-size: 6.6px !important; text-transform: none !important; letter-spacing: 0 !important; }
.pdf-caixa .mrh-larga .mrh-nome { min-width: 96px !important; }
@media print { .mrh-larga .mrh-nome { min-width: 96px; } .mrh-larga th { text-transform: none; font-size: 7.5px; } }
/* entregas AGT e INSS: dois cartões lado a lado */
.ent-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .ent-duas { grid-template-columns: 1fr; } }