*{box-sizing:border-box;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
body{
  margin:0;
  font-family:"Segoe UI","MS Shell Dlg 2",Arial,sans-serif;
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(160deg,#0f3d63 0%,#1e5799 35%,#2989d8 60%,#207cca 80%,#1a5f9e 100%);
  padding:20px 0 76px;
}
.titlebar{
  max-width:1284px; margin:0 auto; background:#1B2430; color:#cfd8dc;
  font-size:12.5px; padding:6px 76px 6px 12px; border-radius:6px 6px 0 0;
  display:flex; justify-content:space-between; align-items:center; position:relative;
}
.titlebar::after{
  content:"─   ▢   ✕"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:11px; letter-spacing:3px; color:#8b98a5; pointer-events:none; font-family:Arial,sans-serif;
}
.window{
  max-width:1284px;
  margin:0 auto;
  background:#f0f2f5;
  border:1px solid #cfd6dd;
  border-radius:0 0 8px 8px;
  padding:14px;
  box-shadow:0 25px 50px -25px rgba(0,0,0,.35);
  min-height:640px;
}
h1.tela-titulo{ font-size:17px; color:#2c3e50; margin:2px 6px 14px; }
.card{
  background:#fff; border:1px solid #e0e0e0; border-radius:15px;
  padding:14px 16px; margin-bottom:12px;
}
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.lbl{ font-size:13.5px; color:#2c3e50; font-weight:600; }
.qinput, select.qinput, input.qinput{
  font-size:14px; border:2px solid #e9ecef; border-radius:8px; padding:6px 9px;
  background:#f8f9fa; outline:none;
}
.qinput:focus{ border-color:#3498db; background:#fff; }

/* ===== AJUSTE: BOTÕES MENORES E MAIS ELEGANTES ===== */
.btn{
  border:none; border-radius:6px; color:#fff; font-weight:bold; font-size:13px;
  padding:6px 12px; cursor:pointer; transition:background .12s; display:inline-flex; align-items:center; gap:4px;
}
.btn.blue{ background:rgb(83,152,255); }
.btn.blue:hover{ background:rgb(68,117,222); }
.btn.green{ background:#2ecc71; }
.btn.green:hover{ background:#27ae60; }
.btn.red{ background:#e74c3c; }
.btn.red:hover{ background:#c0392b; }
.btn.gray{ background:#95a5a6; }
.btn.gray:hover{ background:#7f8c8d; }
.btn.orange{ background:#f39c12; }
.btn.orange:hover{ background:#e08e0b; }

table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
table.tbl thead th{
  background:#f8f9fa; padding:8px; text-align:left; font-weight:bold; color:#2c3e50;
  border-bottom:2px solid #3498db; position:sticky; top:0; cursor:help;
}
table.tbl td{ padding:6px 8px; border-bottom:1px solid #f0f0f0; }
table.tbl td.num, table.tbl th.num{ text-align:right; }
.table-wrap{ max-height:360px; overflow-y:auto; }
.empty-msg{ text-align:center; color:#95a5a6; font-size:13px; padding:40px 10px; }
.pill{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700; color:#fff; }
.pill.ok{ background:#2ecc71; }
.pill.no{ background:#e74c3c; }

[data-tip]{ position:relative; }
[data-tip]::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#2c3e50; color:#fff; font-size:12px; font-weight:500; line-height:1.35;
  padding:7px 10px; border-radius:6px; white-space:pre-line; width:max-content; max-width:240px;
  text-align:left; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
  z-index:80; box-shadow:0 8px 20px rgba(0,0,0,.3);
}
[data-tip]::before{
  content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#2c3e50; opacity:0; transition:opacity .15s; z-index:80;
}
[data-tip]:hover::after, [data-tip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }

.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
  align-items:center; justify-content:center;
}
.modal-overlay.show{ display:flex; }
.modal{ background:#fff; border-radius:12px; width:420px; max-width:92vw; max-height:80vh; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.4); display:flex; flex-direction:column;}
.modal-head{ background:#2c3e50; color:#fff; padding:12px 16px; font-weight:700; display:flex; justify-content:space-between; }
.modal-head .x{ cursor:pointer; opacity:.8; }
.modal-head .x:hover{ opacity:1; }
.modal-body{ padding:14px 16px; overflow-y:auto; }
.modal-item{ display:flex; justify-content:space-between; padding:8px 6px; border-bottom:1px solid #f0f0f0; cursor:pointer; font-size:13px; }
.modal-item:hover{ background:#f4f8ff; }
.modal-foot{ padding:10px 16px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #eee; }
.btn-plain{ padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; background:#eceff1; color:#2c3e50; }
.btn-plain.primary{ background:#3498db; color:#fff; }
.mono{ font-variant-numeric:tabular-nums; }

#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#2c3e50; color:#fff; padding:10px 18px; border-radius:8px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:all .2s; z-index:300; box-shadow:0 10px 30px rgba(0,0,0,.3);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.back-link{ color:#3498db; text-decoration:none; font-size:12.5px; font-weight:700; }
.back-link:hover{ text-decoration:underline; }

/* ===== CRUD genérico (busca + edição) ===== */
.crud-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
tr.crud-row{ cursor:pointer; }
tr.crud-row:hover{ background:#f4f8ff; }
tr.crud-row.sel{ background:#dbeafe; }
.form-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 14px; }
.form-grid.cols2{ grid-template-columns:repeat(2, 1fr); }
.form-field{ display:flex; flex-direction:column; gap:3px; }
.form-field label{ font-size:11.5px; font-weight:700; color:#5a6772; }
.form-field input, .form-field select{
  font-size:13.5px; border:2px solid #e9ecef; border-radius:7px; padding:6px 8px; background:#f8f9fa; outline:none;
}
.form-field input:focus, .form-field select:focus{ border-color:#3498db; background:#fff; }
.stock-verde{ background:#c8ffc8 !important; }
.stock-amarelo{ background:#ffffc8 !important; }
.stock-vermelho{ background:#ffc8c8 !important; }
.stock-semcontrole{ background:#ffd6ec !important; }
.qbtn-adm img{ width:56px; height:56px; object-fit:contain; }

/* ============================= TOUR GUIADO AUTOMÁTICO ============================= */
.tour-fab{
  position:fixed; top:16px; right:16px; z-index:9996; background:rgb(83,152,255); color:#fff; border:none;
  border-radius:24px; padding:11px 18px; font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.3); display:flex; align-items:center; gap:6px;
  font-family:"Segoe UI","MS Shell Dlg 2",Arial,sans-serif;
}
.tour-fab:hover{ background:rgb(68,117,222); }
.tour-fab.stop{ background:#e74c3c; }
.tour-fab.stop:hover{ background:#c0392b; }

@keyframes tourGlow{
  0%,100%{ box-shadow:0 0 0 9999px rgba(0,0,0,.62), 0 0 18px 4px rgba(243,156,18,.85); }
  50%{ box-shadow:0 0 0 9999px rgba(0,0,0,.62), 0 0 30px 10px rgba(243,156,18,1); }
}
.tour-spot{
  position:fixed; border:3px solid #f39c12; border-radius:12px; opacity:0;
  transition:left .45s ease,top .45s ease,width .45s ease,height .45s ease,opacity .3s ease;
  pointer-events:none; z-index:9997; animation:tourGlow 1.6s ease-in-out infinite;
}

.tour-cursor{
  position:fixed; width:1px; height:1px; margin:-13px 0 0 -4px; pointer-events:none; z-index:9999; opacity:0;
  transition:left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  font-size:24px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.tour-cursor::before{ content:"🖱️"; }
.tour-cursor.clicking::before{ content:"👆"; }
.tour-cursor.clicking{ animation:tourClick .26s ease; }
@keyframes tourClick{ 0%{transform:scale(1);} 40%{transform:scale(.7);} 100%{transform:scale(1);} }

/* ============================= BARRA DE TAREFAS DO WINDOWS ============================= */
.win-taskbar{
  position:fixed; left:0; right:0; bottom:0; height:44px; z-index:9995;
  background:#1f2937f2; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; padding:0 10px; border-top:1px solid rgba(255,255,255,.08);
  font-family:"Segoe UI","MS Shell Dlg 2",Arial,sans-serif;
  box-shadow:0 -6px 18px rgba(0,0,0,.25);
}
.wtb-start{
  width:34px; height:34px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:16px; margin-right:8px; flex-shrink:0; cursor:default;
}
.wtb-start:hover{ background:rgba(255,255,255,.10); }
.wtb-search{
  background:#0f172a; color:#94a3b8; font-size:12px; padding:7px 14px; border-radius:16px;
  flex:0 1 220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:none;
}
.wtb-spacer{ flex:1; }
.wtb-tray{ display:flex; align-items:center; gap:12px; padding:0 10px; color:#cbd5e1; font-size:13px; flex-shrink:0; }
.wtb-clock{ color:#e2e8f0; font-size:11px; text-align:right; line-height:1.25; padding-left:10px; border-left:1px solid rgba(255,255,255,.15); flex-shrink:0; white-space:nowrap; }

@media (max-width:600px){
  .wtb-search{ display:none; }
  .win-taskbar{ height:40px; padding:0 8px; }
  .wtb-start{ width:30px; height:30px; font-size:14px; }
}

/* ============================= RESPONSIVO / MOBILE ============================= */
@media (max-width:900px){
  body{ padding:10px 0 58px; }
  .titlebar{ max-width:100%; margin:0 8px; border-radius:6px 6px 0 0; font-size:11.5px; padding:6px 62px 6px 10px; }
  .titlebar::after{ right:10px; font-size:10px; letter-spacing:2px; }
  .window{
    max-width:100%; margin:0 8px; padding:10px; min-height:0;
    border-radius:0 0 6px 6px;
  }
  h1.tela-titulo{ font-size:15.5px; margin:2px 4px 10px; }
  .card{ padding:10px 12px; border-radius:12px; }
  .row{ gap:8px; }
  .crud-toolbar{ gap:6px; }
  .crud-toolbar input.qinput, .crud-toolbar .qinput{ min-width:0 !important; width:100%; }
  .btn{ padding:6px 12px; font-size:12.5px; }

  /* tabelas: permite rolagem horizontal em vez de espremer colunas */
  .table-wrap{ overflow-x:auto; max-height:min(60vh,420px); -webkit-overflow-scrolling:touch; }
  table.tbl{ min-width:560px; font-size:12.5px; }

  /* formulários: 1 coluna no celular */
  .form-grid, .form-grid.cols2{ grid-template-columns:1fr; gap:8px; }
}

/* ===== Celular: tela inteira, sem moldura, como uma gravação real ===== */
@media (max-width:600px){
  html, body{ height:100%; }
  body{
    display:flex; flex-direction:column;
    padding:0; margin:0;
    height:100%; height:100dvh;
  }
  .titlebar{ max-width:100%; width:100%; margin:0; border-radius:0; box-sizing:border-box; flex:0 0 auto; }
  .window{
    max-width:100%; width:100%; margin:0; padding:10px 10px 52px;
    border:none; border-radius:0; box-sizing:border-box;
    flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0;
  }
  .form-field[style*="grid-column"]{ grid-column:auto !important; }

  /* modais ocupam quase a tela toda */
  .modal{ width:96vw !important; max-width:96vw !important; max-height:88vh; }
  .modal-body{ padding:12px; }

  /* tooltips de hover atrapalham no touch — reduz para não cobrir a tela */
  [data-tip]::after{ max-width:180px; font-size:11px; }

  /* tour guiado: elementos menores para não tomar a tela toda */
  .tour-fab{ top:8px; right:8px; padding:9px 14px; font-size:12px; }
}

@media (max-width:480px){
  h1.tela-titulo{ font-size:14px; }
  table.tbl{ min-width:520px; font-size:12px; }
  .qbtn-adm img{ width:44px; height:44px; }
}

/* ================================================================================== */
/* ===== FORÇA BRUTA PARA ENCOLHER A BARRA AZUL DO TOPO E REMOVER O BOTÃO INICIAR ===== */
/* ================================================================================== */

/* 1. Remove o botão "Iniciar Apresentação" */
.tour-fab,
button:contains("Iniciar Apresentação"),
a:contains("Iniciar Apresentação") {
    display: none !important;
}

/* 2. Aplica um "reset" violento no container da barra azul */
/* Tenta pegar qualquer div, header ou nav que esteja no topo */
header, nav, .titlebar, div[style*="background"] {
    height: 36px !important;          /* Encolhe para 36 pixels */
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 12px !important;       /* Remove o espaçamento grosso */
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #0f3d63 !important; /* Mantém a cor, mas fina */
}

/* 3. Ajusta o botão "Voltar" dentro da barra fina */
.back-link, a[href*="index.html"] {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 10px !important;      /* Fonte menor */
    font-weight: 700 !important;
    padding: 3px 12px !important;    /* Botão fino */
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    position: static !important;     /* Remove qualquer posição absoluta */
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}
.back-link::before, a[href*="index.html"]::before {
    content: "← ";
    font-size: 14px !important;
}