/* notaai — padrao visual unico (sistema online, PDV web, login e app do celular).
   Tokens: mesmos do PDV moderno. Tema escolhido pelo usuario (html[data-tema] = claro | escuro, localStorage "pdv_tema").
   Marca do sistema: .na-marca (CSS puro). Logo do cliente em destaque: .na-loja. */
:root, html[data-tema="claro"] {
  --bg: #eef2f7; --painel: #ffffff; --card: #ffffff; --card2: #f6f8fb; --borda: #e2e8f0; --borda2: #cbd5e1;
  --texto: #1e293b; --forte: #0f172a; --sub: #64748b; --fraco: #94a3b8; --input: #f8fafc;
  --acento: #059669; --acento2: #0d9488; --acento-txt: #ffffff; --acento-suave: rgba(5,150,105,.10);
  --perigo: #dc2626; --aviso: #d97706; --info: #0284c7; --sombra: 0 8px 24px rgba(15,23,42,.08);
  --raio: 14px; --raio-sm: 10px; --fonte: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
html[data-tema="escuro"] {
  --bg: #0b0f17; --painel: #0f172a; --card: #151c2c; --card2: #1b2436; --borda: #1f2a3d; --borda2: #2b3850;
  --texto: #e2e8f0; --forte: #f8fafc; --sub: #94a3b8; --fraco: #64748b; --input: #0b1220;
  --acento: #10b981; --acento2: #14b8a6; --acento-txt: #04130d; --acento-suave: rgba(16,185,129,.12);
  --perigo: #f87171; --aviso: #f59e0b; --info: #38bdf8; --sombra: 0 10px 30px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------ marca notaai */
.na-marca { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fonte); font-weight: 800; letter-spacing: -.3px; color: var(--forte); text-decoration: none; line-height: 1; }
.na-marca .na-pontos { display: inline-flex; gap: 3px; }
.na-marca .na-pontos i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.na-marca .na-pontos i:nth-child(1) { background: #ef4444; } .na-marca .na-pontos i:nth-child(2) { background: #06b6d4; } .na-marca .na-pontos i:nth-child(3) { background: #84cc16; }
.na-marca .na-nome { font-size: 19px; }
.na-marca .na-nome b { color: var(--acento); font-weight: 900; }
.na-marca.na-mini .na-nome { display: none; }
.na-selo { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-family: var(--fonte);
  background: linear-gradient(135deg, var(--acento), var(--acento2)); color: var(--acento-txt); }
.na-assinatura { font-size: 11px; color: var(--fraco); font-family: var(--fonte); }
.na-assinatura .na-marca .na-nome { font-size: 12px; } .na-assinatura .na-marca .na-pontos i { width: 5px; height: 5px; }

/* ------------------------------------------------------------ logo do cliente (destaque) */
.na-loja { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 12px 10px 6px; border-radius: var(--raio);
  background: var(--card); border: 1px solid var(--borda); color: var(--texto); font-family: var(--fonte); text-decoration: none !important; }
.na-loja .na-loja-logo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.na-loja .na-loja-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.na-loja .na-loja-logo.na-sem { background: linear-gradient(135deg, var(--acento), var(--acento2)); color: var(--acento-txt); font-weight: 900; font-size: 22px; border: 0; }
.na-loja .na-loja-txt { min-width: 0; }
.na-loja .na-loja-nome { font-weight: 800; color: var(--forte); font-size: 14px; line-height: 1.2; white-space: normal; }
.na-loja .na-loja-sub { font-size: 11.5px; color: var(--sub); margin-top: 3px; }
.na-loja .na-loja-sub a { color: var(--acento); }
.na-loja.na-grande { flex-direction: column; text-align: center; }
.na-loja.na-grande .na-loja-logo { width: 140px; height: 90px; }

/* ================================================================ sistema online (AdminLTE) */
body.na { font-family: var(--fonte) !important; color: var(--texto); background: var(--bg) !important; }
body.na .wrapper, body.na .content-wrapper, body.na .right-side { background: var(--bg) !important; background-image: none !important; }
body.na a { color: var(--acento); }
body.na .text-muted, body.na .help-block { color: var(--sub) !important; }
body.na hr { border-color: var(--borda); }

/* cabecalho */
body.na .main-header .navbar, body.na .main-header .logo { background: var(--painel) !important; border-bottom: 1px solid var(--borda) !important; box-shadow: none !important; }
body.na .main-header .logo { border-right: 1px solid var(--borda); display: flex !important; align-items: center; justify-content: center; }
body.na .main-header .navbar .nav > li > a, body.na .main-header .sidebar-toggle { color: var(--sub) !important; font-weight: 500; font-size: 13px; }
body.na .main-header .navbar .nav > li > a:hover, body.na .main-header .sidebar-toggle:hover { color: var(--forte) !important; background: var(--card2) !important; }
body.na .main-header .navbar .nav > li > a.clock { font-family: ui-monospace, Consolas, monospace; color: var(--texto) !important; }
body.na .main-header .user-image { border: 2px solid var(--acento); }
body.na .main-header .dropdown-menu { background: var(--card) !important; border: 1px solid var(--borda) !important; box-shadow: var(--sombra); border-radius: var(--raio-sm); }
body.na .main-header .dropdown-menu, body.na .main-header .dropdown-menu * { color: var(--texto) !important; }
body.na .main-header .dropdown-menu > li.header, body.na .main-header .dropdown-menu > li.footer > a, body.na .main-header .user-header, body.na .main-header .user-footer { background: var(--card2) !important; border-color: var(--borda) !important; }
body.na .main-header .dropdown-menu .menu > li > a { border-bottom: 1px solid var(--borda) !important; }
body.na .main-header .dropdown-menu > li > a:hover, body.na .main-header .dropdown-menu .menu > li > a:hover { background: var(--card2) !important; }
#na-tema-btn i { color: var(--aviso); font-size: 15px; } html[data-tema="claro"] #na-tema-btn i { color: #6366f1; }

/* menu lateral */
body.na .main-sidebar, body.na .left-side { background: var(--painel) !important; border-right: 1px solid var(--borda); }
body.na .sidebar a { font-size: 13.5px !important; }
body.na .sidebar-menu > li > a { color: var(--sub) !important; border-left: 3px solid transparent !important; border-radius: 0 !important; font-weight: 500; }
body.na .sidebar-menu > li > a > .fa:first-child { width: 22px; color: inherit !important; }
body.na .sidebar-menu > li:hover > a, body.na .sidebar-menu > li.active > a { background: var(--card2) !important; color: var(--acento) !important; border-left-color: var(--acento) !important; }
body.na .sidebar-menu > li > .treeview-menu, body.na.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
body.na.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) { background: var(--card) !important; border: 0; }
body.na.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, body.na.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) { border: 1px solid var(--borda); }
body.na .sidebar-menu .treeview-menu > li > a { color: var(--sub) !important; font-size: 13px !important; }
body.na .sidebar-menu .treeview-menu > li > a > .fa { color: var(--fraco) !important; }
body.na .sidebar-menu .treeview-menu > li > a:hover, body.na .sidebar-menu .treeview-menu > li.active > a { color: var(--forte) !important; }
body.na .sidebar-menu .treeview-menu > li.active > a > .fa { color: var(--acento) !important; }
body.na.sidebar-collapse .na-loja { display: none; }

/* conteudo */
body.na .content-header > h1 { color: var(--forte) !important; font-weight: 800; letter-spacing: -.3px; font-size: 22px; }
body.na .content-header > .breadcrumb > li > a, body.na .content-header > .breadcrumb > li { color: var(--sub) !important; }
body.na .box, body.na .info-box, body.na .small-box, body.na .panel, body.na .well, body.na .nav-tabs-custom {
  background: var(--card) !important; border: 1px solid var(--borda) !important; border-radius: var(--raio) !important; box-shadow: none !important; color: var(--texto); }
body.na .box.box-primary, body.na .box.box-success, body.na .box.box-info, body.na .box.box-warning, body.na .box.box-danger, body.na .box.box-default { border-top: 1px solid var(--borda) !important; }
body.na .box.box-danger { border-left: 3px solid var(--perigo) !important; } body.na .box.box-warning { border-left: 3px solid var(--aviso) !important; }
body.na .box-header { color: var(--forte); border-bottom: 1px solid var(--borda); }
body.na .box-header .box-title { font-weight: 700; font-size: 14px; }
body.na .box-footer, body.na .panel-heading, body.na .panel-footer { background: var(--card2) !important; border-color: var(--borda) !important; color: var(--texto) !important; border-radius: 0 0 var(--raio) var(--raio); }
body.na .info-box-icon { border-radius: var(--raio) 0 0 var(--raio); }
body.na .info-box-text { color: var(--sub); font-weight: 600; } body.na .info-box-number { color: var(--forte); }
body.na .btn-app { background: var(--card) !important; border: 1px solid var(--borda) !important; color: var(--texto) !important; border-radius: var(--raio) !important; box-shadow: none !important; font-size: 13px !important; height: auto !important; }
body.na .btn-app:hover { border-color: var(--acento) !important; color: var(--acento) !important; }

/* tabelas */
body.na .table, body.na table.dataTable { color: var(--texto); background: transparent !important; }
body.na .table > thead > tr > th, body.na .table > thead > tr > td, body.na .table tr.active > th { background: var(--card2) !important; color: var(--sub) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; border-color: var(--borda) !important; }
body.na .table > tbody > tr > td, body.na .table > tbody > tr > th, body.na .table > tfoot > tr > td, body.na .table > tfoot > tr > th, body.na .table-bordered { border-color: var(--borda) !important; }
body.na .table-striped > tbody > tr:nth-of-type(odd) { background: var(--card2) !important; }
body.na .table-hover > tbody > tr:hover { background: var(--acento-suave) !important; }
body.na .table > tbody > tr.warning > td { background: rgba(245,158,11,.12) !important; } body.na .table > tbody > tr.info > td { background: rgba(56,189,248,.10) !important; }
body.na .table > tbody > tr.danger > td { background: rgba(248,113,113,.12) !important; } body.na .table > tbody > tr.success > td { background: var(--acento-suave) !important; }
body.na .dataTables_wrapper, body.na .dataTables_info { color: var(--sub) !important; }
body.na .pagination > li > a, body.na .pagination > li > span { background: var(--card) !important; border-color: var(--borda) !important; color: var(--texto) !important; }
body.na .pagination > .active > a, body.na .pagination > .active > span { background: var(--acento) !important; border-color: var(--acento) !important; color: var(--acento-txt) !important; }

/* formularios */
body.na .form-control, body.na .select2-container--default .select2-selection--single, body.na .select2-container--default .select2-selection--multiple, body.na .input-group-addon, body.na .dataTables_filter input, body.na .dataTables_length select {
  background: var(--input) !important; border: 1px solid var(--borda2) !important; color: var(--texto) !important; border-radius: var(--raio-sm) !important; box-shadow: none !important; }
body.na .form-control:focus, body.na .select2-container--focus .select2-selection { border-color: var(--acento) !important; box-shadow: 0 0 0 3px var(--acento-suave) !important; }
body.na .form-control[disabled], body.na .form-control[readonly] { opacity: .75; }
body.na .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--texto) !important; }
body.na .select2-dropdown { background: var(--card) !important; border-color: var(--borda2) !important; color: var(--texto); }
body.na .select2-container--default .select2-results__option[aria-selected=true] { background: var(--card2) !important; }
body.na .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--acento) !important; color: var(--acento-txt) !important; }
body.na label { color: var(--texto); font-weight: 600; }
body.na .input-group-addon { border-radius: var(--raio-sm) 0 0 var(--raio-sm) !important; }

/* botoes */
body.na .btn { border-radius: var(--raio-sm) !important; font-weight: 600; }
body.na .btn-primary, body.na .btn-success, body.na .bg-purple { background: linear-gradient(135deg, var(--acento), var(--acento2)) !important; border-color: transparent !important; color: var(--acento-txt) !important; }
body.na .btn-primary:hover, body.na .btn-success:hover { filter: brightness(1.06); }
body.na .btn-default { background: var(--card) !important; border-color: var(--borda2) !important; color: var(--texto) !important; }
body.na .btn-default:hover, body.na .btn-default.active { background: var(--card2) !important; }
body.na .btn-danger { background: var(--perigo) !important; border-color: var(--perigo) !important; }
body.na .btn-warning { background: var(--aviso) !important; border-color: var(--aviso) !important; }
body.na .btn-info { background: var(--info) !important; border-color: var(--info) !important; }
body.na .bg-green, body.na .label-success, body.na .label-primary { background: var(--acento) !important; color: var(--acento-txt) !important; }
body.na .label { border-radius: 6px; }
body.na .text-green { color: var(--acento) !important; } body.na .text-red { color: var(--perigo) !important; }

/* alertas, modais, abas */
body.na .alert { border-radius: var(--raio-sm) !important; border: 1px solid transparent; }
body.na .alert-success { background: var(--acento-suave) !important; color: var(--acento) !important; border-color: var(--acento) !important; }
body.na .alert-danger { background: rgba(248,113,113,.12) !important; color: var(--perigo) !important; border-color: var(--perigo) !important; }
body.na .alert-warning { background: rgba(245,158,11,.12) !important; color: var(--aviso) !important; border-color: var(--aviso) !important; }
body.na .alert-info { background: rgba(56,189,248,.10) !important; color: var(--info) !important; border-color: var(--info) !important; }
body.na .alert a { color: inherit; text-decoration: underline; }
body.na .modal-content { background: var(--card) !important; border: 1px solid var(--borda) !important; border-radius: var(--raio) !important; color: var(--texto); box-shadow: var(--sombra); }
body.na .modal-header, body.na .modal-footer { border-color: var(--borda) !important; }
body.na .modal-title { color: var(--forte); font-weight: 700; }
body.na .close { color: var(--texto); text-shadow: none; }
body.na .nav-tabs { border-color: var(--borda); }
body.na .nav-tabs > li > a { color: var(--sub); border-radius: var(--raio-sm) var(--raio-sm) 0 0; }
body.na .nav-tabs > li.active > a, body.na .nav-tabs-custom > .nav-tabs > li.active > a { background: var(--card) !important; color: var(--forte) !important; border-color: var(--borda) var(--borda) transparent !important; }
body.na .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--acento); }
body.na .dropdown-menu { background: var(--card); border-color: var(--borda); }
body.na .dropdown-menu > li > a { color: var(--texto); } body.na .dropdown-menu > li > a:hover { background: var(--card2); color: var(--forte); }
body.na .main-footer { background: var(--painel) !important; border-top: 1px solid var(--borda) !important; color: var(--sub) !important; }
body.na .redactor-box, body.na .redactor-editor { background: var(--input) !important; color: var(--texto) !important; border-color: var(--borda2) !important; }
body.na .redactor-toolbar { background: var(--card2) !important; }
html[data-tema="escuro"] body.na .content img:not(.na-keep) { opacity: .95; }
html[data-tema="escuro"] body.na .bg-gray, html[data-tema="escuro"] body.na .bg-gray-light { background: var(--card2) !important; color: var(--texto) !important; }

/* ================================================================ login */
body.na-login { min-height: 100vh; margin: 0; background: var(--bg) !important; font-family: var(--fonte); color: var(--texto); display: flex; align-items: center; justify-content: center; padding: 16px; }
body.na-login .login-box { width: 100%; max-width: 400px; margin: 0; }
body.na-login .login-logo { margin-bottom: 18px; text-align: center; }
body.na-login .login-logo .na-marca .na-nome { font-size: 30px; } body.na-login .login-logo .na-pontos i { width: 10px; height: 10px; }
body.na-login .login-box-body { background: var(--card); border: 1px solid var(--borda); border-radius: 18px !important; box-shadow: var(--sombra); padding: 26px; color: var(--texto); }
body.na-login .login-box-msg { color: var(--sub); padding: 0 0 12px; }
body.na-login .login-box-msg b { color: var(--forte); }
body.na-login .form-control { background: var(--input); border: 1px solid var(--borda2); color: var(--texto); border-radius: var(--raio-sm) !important; height: 44px; }
body.na-login .form-control:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
body.na-login .form-control-feedback { line-height: 44px; color: var(--fraco); }
body.na-login .btn { border-radius: var(--raio-sm) !important; font-weight: 700; }
body.na-login .btn-primary { background: linear-gradient(135deg, var(--acento), var(--acento2)); border: 0; color: var(--acento-txt); }
body.na-login .btn-info { background: transparent; border: 1px solid var(--borda2); color: var(--texto); }
body.na-login .text-danger { color: var(--perigo); } body.na-login a { color: var(--acento); }
body.na-login .na-login-tema { position: fixed; top: 14px; right: 14px; border: 1px solid var(--borda); background: var(--card); color: var(--sub); border-radius: 10px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
body.na-login .modal-content { background: var(--card); color: var(--texto); border-radius: 14px; }

/* ================================================================ PDV web: logo do cliente no topo */
.na-pdv-loja { float: left; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-family: var(--fonte); color: var(--forte); font-weight: 800; font-size: 14px; }
.na-pdv-loja img { height: 38px; max-width: 130px; object-fit: contain; background: #fff; border-radius: 9px; padding: 3px 6px; border: 1px solid var(--borda); }

/* ================================================================ celular: o sistema online vira app (ate 767px) */
.na-tabbar, .na-appbar-titulo, .na-app-loja, .na-instalar { display: none; }
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body.na { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); overscroll-behavior-y: none; }
  /* barra superior do app */
  body.na .main-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; padding-top: env(safe-area-inset-top, 0px); background: var(--painel); box-shadow: 0 1px 0 var(--borda); }
  body.na .main-header .logo { display: none !important; }
  body.na .main-header .navbar { margin: 0 !important; min-height: 54px; display: flex; align-items: center; border-bottom: 0 !important; }
  body.na .main-header .sidebar-toggle { display: none !important; }
  body.na .main-header .navbar > .nav.pull-left, body.na .main-header .navbar .clock { display: none !important; }
  body.na .na-app-loja { display: flex; flex: 0 0 auto; width: 34px; height: 34px; margin-left: 12px; border-radius: 10px; overflow: hidden; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--borda); font-weight: 900; color: var(--acento-txt); }
  body.na .na-app-loja.na-sem { background: linear-gradient(135deg, var(--acento), var(--acento2)); border: 0; }
  body.na .na-app-loja img { max-width: 100%; max-height: 100%; object-fit: contain; }
  body.na .na-appbar-titulo { display: block; flex: 1; min-width: 0; padding: 0 10px; font-size: 17px; font-weight: 800; color: var(--forte); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.na .main-header .navbar-custom-menu { margin-left: auto; }
  body.na .main-header .navbar-custom-menu > .nav > li > a { padding: 15px 9px !important; }
  body.na .main-header .seletor-loja > a > span, body.na .main-header .seletor-loja > a > small, body.na .main-header .user-menu .hidden-xs { display: none !important; }
  body.na .main-header .navbar-custom-menu .dropdown-menu { position: fixed !important; top: calc(56px + env(safe-area-inset-top, 0px)) !important; left: 8px !important; right: 8px !important; width: auto !important; max-height: 70vh; overflow: auto; }
  body.na .content-wrapper { padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important; margin-left: 0 !important; min-height: 100vh !important; }
  body.na .content-header { display: none; }
  body.na .content { padding: 12px 12px 18px !important; }
  body.na .main-footer { display: none; }

  /* menu lateral vira gaveta */
  body.na .main-sidebar { position: fixed !important; top: 0 !important; bottom: 0; width: min(86vw, 320px) !important; padding-top: env(safe-area-inset-top, 0px) !important;
    transform: translateX(-105%) !important; transition: transform .22s ease !important; z-index: 1045 !important; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  body.na.sidebar-open .main-sidebar { transform: none !important; }
  body.na.sidebar-open .content-wrapper, body.na.sidebar-open .main-footer { transform: none !important; }
  body.na .na-veu { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.na.sidebar-open .na-veu { opacity: 1; pointer-events: auto; }
  body.na .sidebar-menu > li > a { padding: 13px 15px; font-size: 15px !important; }
  body.na .sidebar-menu .treeview-menu > li > a { padding: 9px 15px 9px 26px; font-size: 14px !important; }
  body.na .na-loja { margin: 14px 12px 8px; }

  /* barra de abas inferior */
  body.na .na-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    background: var(--painel); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 18px rgba(15,23,42,.06); }
  body.na .na-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; color: var(--sub) !important;
    font-size: 11px; font-weight: 600; text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
  body.na .na-tabbar a i { font-size: 20px; line-height: 1; }
  body.na .na-tabbar a.ativo { color: var(--acento) !important; }
  body.na .na-tabbar a.na-vender i { width: 44px; height: 44px; margin-top: -18px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--acento), var(--acento2)); color: var(--acento-txt); box-shadow: 0 6px 16px var(--acento-suave); font-size: 19px; }

  /* conteudo com cara de app */
  body.na .box, body.na .info-box, body.na .small-box, body.na .nav-tabs-custom { border-radius: 16px !important; margin-bottom: 12px; }
  body.na .box-header { padding: 12px 14px; } body.na .box-body { padding: 12px 14px; }
  body.na .box-footer { display: flex; flex-wrap: wrap; gap: 8px; }
  body.na .box-footer .btn, body.na form .btn-primary[type=submit], body.na form button.btn-primary { min-height: 46px; }
  body.na .form-control, body.na .select2-container .select2-selection--single { min-height: 46px !important; font-size: 16px !important; } /* 16px: o iPhone nao da zoom */
  body.na .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px !important; }
  body.na .select2-container .select2-selection--single .select2-selection__arrow { height: 44px !important; }
  body.na .btn { min-height: 38px; }
  body.na .btn-xs { min-height: 30px; padding: 4px 9px; }
  body.na .row { margin-left: -6px; margin-right: -6px; } body.na [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  body.na .table-responsive, body.na .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0; }
  body.na .dataTables_wrapper .row:first-child > div { width: 100%; text-align: left !important; }
  body.na .dataTables_filter, body.na .dataTables_filter label, body.na .dataTables_filter input { width: 100% !important; margin: 0 !important; }
  body.na .dataTables_length { display: none; }
  body.na .dataTables_paginate { float: none !important; text-align: center !important; margin-top: 8px; }
  body.na .table { font-size: 13px; } body.na .table > thead > tr > th { white-space: nowrap; }
  body.na .painel-atalhos { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  body.na .painel-atalhos .btn-app, body.na .btn-app { margin: 0 !important; min-width: 0 !important; width: 100%; padding: 10px 2px !important; font-size: 11px !important; white-space: normal; line-height: 1.2; }
  body.na .btn-app > .fa { font-size: 20px; display: block; margin-bottom: 4px; }
  body.na .btn-app .badge { top: -6px; right: -4px; }

  /* janelas viram folhas que sobem de baixo */
  body.na .modal-dialog { margin: 0 !important; width: 100% !important; position: fixed !important; left: 0; right: 0; bottom: 0; max-height: 92vh; }
  body.na .modal.fade .modal-dialog { transform: translateY(30%); } body.na .modal.in .modal-dialog { transform: none; }
  body.na .modal-content { border-radius: 20px 20px 0 0 !important; max-height: 92vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.na .modal-footer .btn { min-height: 44px; }

  /* aviso para instalar */
  body.na .na-instalar { display: flex; align-items: center; gap: 10px; position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 1036;
    background: var(--card); border: 1px solid var(--borda); border-radius: 16px; padding: 10px 12px; box-shadow: var(--sombra); font-size: 13px; color: var(--texto); }
  body.na .na-instalar[hidden] { display: none; }
  body.na .na-instalar img { width: 38px; height: 38px; border-radius: 10px; }
  body.na .na-instalar b { color: var(--forte); display: block; }
  body.na .na-instalar .btn { min-height: 34px; padding: 5px 12px; }
  body.na .na-instalar .na-x { border: 0; background: none; color: var(--fraco); font-size: 20px; padding: 0 4px; }
}
/* aberto como app instalado (sem barra do navegador) */
@media (display-mode: standalone) { body.na .main-header { -webkit-user-select: none; user-select: none; } }

/* celular: tabelas viram cartoes (rotulo de cada campo vem do cabecalho) */
@media (max-width: 767px) {
  body.na table.na-cartoes { width: 100% !important; border: 0 !important; background: transparent !important; }
  body.na table.na-cartoes > thead, body.na table.na-cartoes > tfoot { display: none !important; }
  body.na table.na-cartoes > tbody > tr { display: block; background: var(--card) !important; border: 1px solid var(--borda) !important; border-radius: 14px; margin: 0 0 10px; padding: 6px 12px; }
  body.na table.na-cartoes > tbody > tr:nth-of-type(odd) { background: var(--card) !important; }
  body.na table.na-cartoes > tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0 !important; padding: 6px 0 !important;
    text-align: right !important; min-height: 0; font-size: 14px; word-break: break-word; }
  body.na table.na-cartoes > tbody > tr > td + td { border-top: 1px dashed var(--borda) !important; }
  body.na table.na-cartoes > tbody > tr > td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; color: var(--sub); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
  body.na table.na-cartoes > tbody > tr > td[data-label=""]::before { display: none; }
  body.na table.na-cartoes > tbody > tr > td.na-titulo { font-weight: 800; color: var(--forte); font-size: 15px; justify-content: flex-start; text-align: left !important; }
  body.na table.na-cartoes > tbody > tr > td.na-titulo::before { display: none; }
  body.na table.na-cartoes > tbody > tr > td.na-acoes { justify-content: flex-end; flex-wrap: wrap; }
  body.na table.na-cartoes > tbody > tr > td.na-acoes::before { display: none; }
  body.na table.na-cartoes > tbody > tr > td.na-acoes .btn-group, body.na table.na-cartoes > tbody > tr > td.na-acoes .text-center { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; float: none; }
  body.na table.na-cartoes > tbody > tr > td.na-acoes .btn { min-height: 36px; min-width: 40px; border-radius: 10px !important; float: none; }
  body.na table.na-cartoes > tbody > tr > td.na-img { justify-content: flex-start; } body.na table.na-cartoes > tbody > tr > td.na-img::before { display: none; }
  body.na table.na-cartoes > tbody > tr > td.dataTables_empty { justify-content: center; } body.na table.na-cartoes > tbody > tr > td.dataTables_empty::before { display: none; }
  body.na .dataTables_wrapper .dataTables_scrollHead { display: none; }
}

/* cartao compacto: foto + nome na primeira linha, campos em 2 colunas, botoes no fim */
@media (max-width: 767px) {
  body.na table.na-cartoes > tbody > tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 0; padding: 12px; }
  body.na table.na-cartoes > tbody > tr > td { display: block; width: 50%; padding: 0 8px 0 0 !important; text-align: left !important; border: 0 !important; font-size: 14px; }
  body.na table.na-cartoes > tbody > tr > td + td { border-top: 0 !important; }
  body.na table.na-cartoes > tbody > tr > td::before { display: block; max-width: none; font-size: 10.5px; margin-bottom: 1px; }
  body.na table.na-cartoes > tbody > tr > td.na-img { order: -2; width: 52px; } body.na table.na-cartoes > tbody > tr > td.na-img img { width: 44px !important; height: 44px !important; object-fit: cover; border-radius: 10px; }
  body.na table.na-cartoes > tbody > tr > td.na-titulo { order: -1; width: auto; flex: 1 1 60%; align-self: center; font-size: 15px; }
  body.na table.na-cartoes > tbody > tr > td.na-acoes { width: 100%; padding: 8px 0 0 !important; border-top: 1px solid var(--borda) !important; display: flex; }
  body.na table.na-cartoes > tbody > tr > td.dataTables_empty { width: 100%; text-align: center !important; }
}
@media (max-width: 767px) {
  body.na table.na-cartoes > tbody > tr > td { box-sizing: border-box; }
  body.na table.na-cartoes > tbody > tr > td:not(.na-acoes) * { text-align: left !important; }
  body.na table.na-cartoes > tbody > tr > td:not(.na-acoes) > div { display: inline; padding: 0 !important; }
}
@media (max-width: 767px) {
  body.na .dataTables_filter label { display: flex !important; align-items: center; gap: 8px; font-weight: 600; }
  body.na .dataTables_filter input { flex: 1; min-width: 0; width: auto !important; }
}

/* ================================================================ PDV web no celular: carrinho em cima, catalogo embaixo, Finalizar sempre visivel */
@media (max-width: 767px) {
  body.pos { overflow-x: hidden; }
  body.pos .wrapper { overflow-x: hidden; }
  body.pos .main-sidebar { display: none !important; }
  body.pos .main-header { position: sticky !important; top: 0; z-index: 1030; padding-top: env(safe-area-inset-top, 0px); }
  body.pos .main-header .logo { width: 50px !important; float: left; padding: 0 !important; }
  body.pos .main-header .navbar { margin-left: 50px !important; display: flex; align-items: center; min-height: 50px; }
  body.pos .main-header .navbar-custom-menu { margin-left: auto; max-width: calc(100vw - 110px); overflow-x: auto; scrollbar-width: none; }
  body.pos .main-header .navbar-custom-menu::-webkit-scrollbar { display: none; }
  body.pos .main-header .navbar-custom-menu > .nav { display: flex; flex-wrap: nowrap; }
  body.pos .main-header .navbar-custom-menu > .nav > li { float: none; }
  body.pos .main-header .navbar-custom-menu > .nav > li > a { padding: 15px 9px !important; white-space: nowrap; }
  body.pos .main-header .navbar-custom-menu .clock, body.pos .main-header .navbar-custom-menu kbd { display: none !important; }
  body.pos .na-pdv-loja { padding: 0 6px; } body.pos .na-pdv-loja span { display: none; } body.pos .na-pdv-loja img { height: 32px; max-width: 70px; }
  body.pos .content-wrapper { margin-left: 0 !important; padding: 0 !important; min-height: 0 !important; }
  body.pos .layout-table, body.pos .layout-table > tbody, body.pos .layout-table > tbody > tr, body.pos .layout-table > tbody > tr > td { display: block !important; width: 100% !important; }
  body.pos #pos, body.pos #pos-sale-form, body.pos #leftdiv, body.pos #lefttop, body.pos #print, body.pos #list-table-div, body.pos #totaldiv, body.pos #botbuttons {
    width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; box-sizing: border-box; }
  body.pos #leftdiv { padding: 8px 10px 0 !important; }
  body.pos #list-table-div { height: auto !important; min-height: 120px; max-height: none !important; }
  body.pos #add_item, body.pos .select2-selection { font-size: 16px !important; min-height: 44px; }
  body.pos #botbuttons { position: sticky !important; bottom: 0; z-index: 25; background: var(--painel); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--borda); display: flex; gap: 8px; align-items: stretch; }
  body.pos #botbuttons > * { float: none !important; }
  body.pos #payment { flex: 1; width: auto !important; min-height: 58px; font-size: 18px !important; }
  body.pos #right-col, body.pos .contents { display: block !important; margin: 0 !important; padding: 12px 10px 20px !important; width: 100% !important; }
  body.pos #item-list .items > div { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  body.pos .modal-dialog { margin: 0 !important; width: 100% !important; position: fixed; bottom: 0; left: 0; right: 0; }
  body.pos .modal-content { border-radius: 20px 20px 0 0 !important; max-height: 92vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 767px) {
  body.pos .main-header { display: flex !important; align-items: center; max-height: none; }
  body.pos .main-header .logo { flex: 0 0 50px; float: none; height: 50px; display: flex !important; align-items: center; justify-content: center; }
  body.pos .main-header .navbar { flex: 1; min-width: 0; margin-left: 0 !important; }
  body.pos .main-header .navbar-custom-menu { display: block !important; }
  body.pos .layout-table > tbody > tr { display: flex !important; flex-direction: column; }
  body.pos .layout-table > tbody > tr > td:has(#pos) { order: -1; }
}
@media (max-width: 767px) {
  body.pos #print { height: auto !important; }
  body.pos #list-table-div { height: auto !important; min-height: 90px !important; max-height: 38vh !important; overflow: auto !important; }
  body.pos #botbuttons > .row { display: flex; gap: 8px; margin: 0 !important; width: 100%; align-items: stretch; }
  body.pos #botbuttons > .row > [class*="col-"] { float: none !important; width: auto !important; padding: 0 !important; }
  body.pos #botbuttons > .row > [class*="col-"]:first-child { flex: 0 0 36%; }
  body.pos #botbuttons > .row > [class*="col-"]:last-child { flex: 1; min-width: 0; }
  body.pos #botbuttons #payment { width: 100% !important; height: 100%; font-size: 16px !important; padding: 8px !important; white-space: normal; }
  body.pos #botbuttons .btn-group-vertical .btn { min-height: 40px; }
}

/* aviso de instalar: dentro da tela (no topo do conteudo), nunca flutuando por cima */
@media (max-width: 767px) {
  body.na .na-instalar { position: static !important; margin: 0 0 12px; box-shadow: none; flex-wrap: wrap; }
  body.na .na-instalar .na-inst-bts { display: flex; gap: 8px; width: 100%; }
  body.na .na-instalar .na-inst-bts .btn { flex: 1; min-height: 40px; font-size: 14px; }
  body.na .na-instalar .na-x { font-size: 14px; color: var(--texto); padding: 5px 12px; }
}
@media (max-width: 767px) {
  body.na table.na-cartoes, body.na table.na-cartoes > tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
  body.na table.na-cartoes > tbody > tr { width: 100%; box-sizing: border-box; }
  body.na table.na-cartoes > tbody > tr > td { min-width: 0; overflow-wrap: anywhere; }
}