/* ============================================================
   ABA PROTOCOLOS — usa as cores e classes do sistema (index.html)
   ============================================================ */
#view-protocolos{background:var(--paper); min-height:0;}
.pr-head-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
#pr-search{
  width:240px; max-width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:16px;
  font-family:'Inter',sans-serif; font-size:13px; background:var(--paper);
}
#pr-search:focus{outline:2px solid var(--green); outline-offset:1px;}
.pr-new{font-size:13px !important; padding:8px 14px !important; border-radius:16px !important;}

.pr-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 32px; border-bottom:1px solid var(--line); background:var(--white);}
.pr-stat{font-size:12.5px; color:var(--gray-blue); margin-right:6px;}
.pr-stat b{font-family:'Poppins',sans-serif; font-size:16px; color:var(--ink); margin-right:3px; font-variant-numeric:tabular-nums;}
.pr-stat.pend b{color:#9A5B0E;} .pr-stat.ok b{color:var(--status-done);}
.pr-toolbar .filter-tabs{margin-left:auto;}

.pr-list{flex:1; overflow-y:auto; padding:18px 32px 40px; display:flex; flex-direction:column; gap:8px; min-height:0;}
.pr-row{
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:12px 14px;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.4fr) 150px auto; gap:14px; align-items:center;
}
.pr-row .emp{font-weight:600; font-size:14px; overflow-wrap:anywhere;}
.pr-row .meta{font-size:12px; color:var(--gray-blue); margin-top:2px;}
.pr-row .docs{font-size:13px;}
.pr-num{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:var(--gray-blue); margin-top:2px;}
.pr-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:12px; white-space:nowrap;}
.pr-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.pr-pill.pendente{background:#FBEEDC; color:#9A5B0E;}
.pr-pill.assinado{background:var(--status-done-light); color:var(--status-done);}
.pr-pill.excluido{background:var(--paper-dark); color:var(--gray-blue);}
.pr-sub{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray-blue); margin-top:4px;}
.pr-sub svg{width:12px; height:12px;}
.pr-acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.pr-acts .mini-btn{display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.pr-acts .mini-btn svg{width:14px; height:14px;}
.pr-acts .mini-btn.wa{color:#1F8F4E;}
.pr-acts .mini-btn.danger{color:var(--stamp-red);}
.pr-why{font-size:12px; color:var(--gray-blue); text-align:right;}

/* modal próprio da aba (mais largo que o padrão) */
.pr-overlay{display:none; position:fixed; inset:0; background:rgba(27,42,65,.45); align-items:center; justify-content:center; z-index:58; padding:16px;}
.pr-overlay.active{display:flex;}
.pr-modal{width:min(720px,100%) !important; max-height:92vh; overflow-y:auto; position:relative;}
.pr-modal.sm{width:min(460px,100%) !important;}
.pr-x{position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--gray-blue);}
.pr-hint{font-size:12.5px; color:var(--gray-blue); margin:-8px 0 14px;}
.pr-grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.pr-opt{font-weight:400; color:var(--gray-blue); font-size:11px; margin-left:4px;}
.pr-modal .field input, .pr-modal .field textarea{width:100%;}
.pr-warn{background:#FBEEDC; color:#8A5A1F; border-radius:3px; padding:8px 12px; font-size:12.5px; margin:-6px 0 14px;}

.pr-combo{position:relative;}
.pr-combo-list{position:absolute; left:0; right:0; top:100%; margin-top:2px; background:var(--white); border:1px solid var(--line); border-radius:3px; box-shadow:0 12px 28px -12px rgba(0,0,0,.3); max-height:260px; overflow-y:auto; z-index:5;}
.pr-combo-list button{display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left; border:0; border-top:1px solid var(--line); background:transparent; padding:8px 12px; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);}
.pr-combo-list button:first-child{border-top:0;}
.pr-combo-list button:hover, .pr-combo-list button.on{background:var(--paper);}
.pr-combo-list .cn{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; color:var(--gray-blue); white-space:nowrap;}
.pr-combo-list .fil{font-size:10px; font-weight:700; color:var(--green); margin-left:6px;}
.pr-combo-list .none{padding:10px 12px; font-size:12.5px; color:var(--gray-blue);}

.pr-sec{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-blue); margin:6px 0 8px;}
.pr-vol{border:1px solid var(--line); border-radius:3px; padding:10px 12px; margin-bottom:10px; background:var(--paper);}
.pr-vol-h{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.pr-vol-h input{flex:1; min-width:0; border:0; border-bottom:1px dashed var(--paper-darker); background:transparent; padding:4px 2px; font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; color:var(--ink);}
.pr-vol-h input::placeholder{font-weight:400; color:var(--gray-blue);}
.pr-item{display:grid; grid-template-columns:minmax(0,1fr) 180px 30px; gap:6px; margin-top:6px;}
.pr-item input{padding:8px 10px; border:1px solid var(--line); border-radius:2px; background:var(--white); font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); min-width:0;}
.pr-item input:focus, .pr-vol-h input:focus{outline:2px solid var(--green); outline-offset:1px;}
.pr-rm{border:1px solid var(--line); background:var(--white); border-radius:2px; cursor:pointer; color:var(--gray-blue); font-size:15px;}
.pr-sugs{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;}
.pr-sug{border:1px dashed var(--paper-darker); background:var(--white); border-radius:12px; padding:3px 9px; font-size:11.5px; cursor:pointer; color:var(--gray-blue); font-family:'Inter',sans-serif;}
.pr-sug:hover{border-color:var(--ink); color:var(--ink);}
.pr-foot{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:18px;}
.pr-foot .btn{width:auto; margin-top:0; padding:10px 16px;}

.pr-wa{background:#E7F7EC; color:#10301C; border-radius:10px 10px 10px 2px; padding:10px 12px; font-size:13.5px; white-space:pre-wrap; margin:6px 0 4px;}
.pr-link{display:flex; gap:6px; align-items:center; background:var(--paper); border-radius:3px; padding:8px 10px; margin-top:10px;}
.pr-link code{flex:1; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; overflow-wrap:anywhere;}
.pr-qr{display:grid; place-items:center; gap:10px; text-align:center; margin:6px 0;}
.pr-qr .box{background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px;}
.pr-wait{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#9A5B0E;}
.pr-wait i{width:8px; height:8px; border-radius:50%; background:currentColor; animation:prPulse 1.4s infinite;}
.pr-done{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--status-done); background:var(--status-done-light); padding:6px 12px; border-radius:14px;}
@keyframes prPulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pr-wait i{animation:none}}

/* ---------- celular ---------- */
@media (max-width:760px){
  /* ajuste básico do sistema para telas pequenas: menu vira uma faixa no topo */
  #app.active{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);}
  #sidebar{flex-direction:row; align-items:center; padding:6px 6px; overflow-x:auto; gap:2px;}
  #sidebar .brand{display:none;}
  #sidebar .nav-item{padding:9px 12px; border-left:0; border-bottom:3px solid transparent; white-space:nowrap;}
  #sidebar .nav-item.active{border-bottom-color:var(--gold);}
  #sidebar .sidebar-footer{margin:0 0 0 auto; border-top:0; padding:0 8px; white-space:nowrap; display:flex; gap:10px; align-items:center;}
  #sidebar .who-role{display:none;}
  #sidebar .logout{margin-top:0;}
  #main{height:100%; min-height:0;}
  .view-header{padding:14px 16px; flex-wrap:wrap; gap:8px;}

  .pr-toolbar{padding:10px 16px;}
  .pr-toolbar .filter-tabs{margin-left:0; overflow-x:auto;}
  .pr-list{padding:12px 12px 30px;}
  .pr-row{grid-template-columns:1fr auto;}
  .pr-row .pr-docs{grid-column:1/-1; order:3;}
  .pr-row .pr-acts{grid-column:1/-1; order:4; justify-content:flex-start;}
  .pr-grid2{grid-template-columns:1fr;}
  .pr-item{grid-template-columns:minmax(0,1fr) 30px;}
  .pr-item .per{grid-column:1; grid-row:2;}
  #pr-search{width:100%;}
}