/* Shell compartilhado (menu lateral + topbar) e sistema de design de todas
   as telas autenticadas do WR Log. Qualquer padrao usado em mais de uma
   pagina (titulo, card, tabela, badge, estado vazio, alerta) deve viver
   aqui - nao ser retipado localmente em cada pagina.

   Tema: claro e o padrao (compativel com o visual original do sistema).
   Escuro e opcional, ativado com [data-theme="dark"] na tag <html> - ver
   applyTemaSalvo() em shell.js (le a preferencia salva em localStorage) e o
   seletor em Configuracoes > Aparencia. Os dois temas usam os MESMOS nomes
   de variavel: o restante deste arquivo (botoes, tabelas, badges, sidebar)
   nunca precisa saber qual tema esta ativo, so consome var(--wr-*). */
:root{
  --wr-bg:#F1F2F4; --wr-bg-subtle:#E9EBEF; --wr-surface:#F8F8F9; --wr-surface-2:#EDEEF0; --wr-border:#E0E2E6; --wr-border-strong:#C9CDD3;
  --wr-text:#172033; --wr-text-muted:#667085; --wr-text-faint:#98A2B3;

  --wr-navy:#0E1420; --wr-navy-surface:#141B2B; --wr-navy-border:#232C40; --wr-navy-text-muted:#8792A6;

  --wr-amber:#E2A93A; --wr-amber-strong:#C98A1D; --wr-amber-soft:#FBF1DD;
  --wr-green:#2F9E62; --wr-green-soft:#E5F5EC; --wr-green-strong:#1C6B3C;
  --wr-red:#D6553F; --wr-red-soft:#FBEAE6; --wr-red-strong:#9A3A26;
  --wr-blue:#3B7DD8; --wr-blue-soft:#E9F1FC;

  --wr-radius-sm:8px; --wr-radius:14px; --wr-radius-lg:20px;
  --wr-ease:cubic-bezier(.16,1,.3,1);
  --wr-shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --wr-shadow:0 8px 24px -12px rgba(16,24,40,.14), 0 2px 4px rgba(16,24,40,.03);
  --wr-shadow-lg:0 24px 48px -18px rgba(16,24,40,.25);

  --wr-body-bg:linear-gradient(145deg,#F5F6F7 0%,#F1F2F4 52%,#F4F5F6 100%);
  --wr-sidebar-bg:linear-gradient(180deg,#0C1321 0%,#101A2D 100%);
  --wr-sidebar-shadow:2px 0 22px -10px rgba(0,0,0,.5);
  --wr-topbar-bg:rgba(248,248,249,.94);
  --wr-topbar-border:rgba(226,230,237,.9);
  --wr-topbar-shadow:0 4px 18px -17px rgba(16,24,40,.45);
  --wr-modal-overlay-bg:rgba(14,20,32,.55);
  --wr-page-title-color:#111B2E;

  --wr-sidebar-w: 236px; --wr-sidebar-w-collapsed: 68px;
  color-scheme: light;
}

/* ---------- Tema escuro (opcional) ---------- */
:root[data-theme="dark"]{
  --wr-bg:#15171B; --wr-bg-subtle:#1B1E23; --wr-surface:#202329; --wr-surface-2:#292D33;
  --wr-border:rgba(255,255,255,.08); --wr-border-strong:rgba(255,255,255,.14);
  --wr-text:#EEF0F4; --wr-text-muted:rgba(238,240,244,.6); --wr-text-faint:rgba(238,240,244,.38);

  --wr-navy:#15171B; --wr-navy-surface:#202329; --wr-navy-border:rgba(255,255,255,.1); --wr-navy-text-muted:rgba(238,240,244,.6);

  --wr-amber-strong:#F0BB55; --wr-amber-soft:rgba(226,169,58,.14);
  --wr-green:#4FB57B; --wr-green-soft:rgba(79,181,123,.14); --wr-green-strong:#7FD9A4;
  --wr-red:#E27567; --wr-red-soft:rgba(226,117,103,.14); --wr-red-strong:#F0968A;
  --wr-blue:#6EA3EF; --wr-blue-soft:rgba(110,163,239,.14);

  --wr-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --wr-shadow:0 12px 32px -16px rgba(0,0,0,.55);
  --wr-shadow-lg:0 28px 64px -24px rgba(0,0,0,.65);

  --wr-body-bg:var(--wr-bg);
  --wr-sidebar-bg:var(--wr-surface);
  --wr-sidebar-shadow:none;
  --wr-topbar-bg:rgba(25,27,32,.88);
  --wr-topbar-border:var(--wr-border);
  --wr-topbar-shadow:none;
  --wr-modal-overlay-bg:rgba(0,0,0,.6);
  --wr-page-title-color:var(--wr-text);
  color-scheme: dark;
}

*{box-sizing:border-box;}
/* 0.875rem = 14px no tamanho "Normal" (raiz sem [data-font-size], 16px de padrao do navegador) - o valor
   permanece EXATAMENTE o mesmo de antes pra quem nao mexer na preferencia. Como quase todo o resto do
   produto usa rem para fonte/espacamento, mudar so o font-size da raiz (ver [data-font-size] abaixo e
   wrAplicarFonteSalva() em shell.js) escala a interface inteira a partir daqui. */
body{margin:0; background:var(--wr-body-bg); color:var(--wr-text); font-family:'Inter','IBM Plex Sans',system-ui,sans-serif; font-size:.875rem; line-height:1.5; -webkit-font-smoothing:antialiased;}
::selection{background:var(--wr-amber-soft); color:var(--wr-text);}

/* Tamanho da fonte (Configuracoes > Aparencia): 4 tamanhos, "Normal" e o padrao (sem atributo, sem
   nenhuma mudanca visual). Preferencia pessoal salva por navegador - ver WR_FONTE_CHAVE em shell.js. */
html[data-font-size="pequena"]{font-size:87.5%;}
html[data-font-size="grande"]{font-size:112.5%;}
html[data-font-size="muito-grande"]{font-size:125%;}

a{color:inherit;}
button, input, select, textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--wr-amber-strong); outline-offset:2px; border-radius:4px;}
button{touch-action:manipulation;}
input,select,textarea{color:var(--wr-text);}
input::placeholder,textarea::placeholder{color:var(--wr-text-faint); opacity:1;}
input:disabled,select:disabled,textarea:disabled,button:disabled{cursor:not-allowed;}

.wr-shell{display:flex; min-height:100vh;}
.wr-embed .wr-sidebar,.wr-embed .wr-topbar,.wr-embed .wr-sidebar-overlay,.wr-embed .wr-page-title{display:none !important;}
.wr-embed .wr-content{padding:.4rem .2rem 1.5rem; animation:none;}
.wr-embed body{background:transparent;}

/* ---------- Sidebar ---------- */
.wr-sidebar{
  width:var(--wr-sidebar-w); flex-shrink:0; background:var(--wr-sidebar-bg); color:#fff;
  display:flex; flex-direction:column; border-right:1px solid var(--wr-navy-border);
  transition:width .18s var(--wr-ease); overflow:hidden; position:sticky; top:0; height:100vh;
  box-shadow:var(--wr-sidebar-shadow);
}
:root[data-theme="dark"] .wr-sidebar{color:var(--wr-text);}
.wr-shell.wr-collapsed .wr-sidebar{width:var(--wr-sidebar-w-collapsed);}

.wr-sidebar-brand{display:flex;align-items:center;gap:.7rem;padding:1.3rem 1.1rem 1.15rem;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.045);position:relative;}
:root[data-theme="dark"] .wr-sidebar-brand{border-bottom-color:var(--wr-border);}
.wr-sidebar-brand::before{
  content:""; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
  background:radial-gradient(120px 90px at 15% 0%, rgba(226,169,58,.15), transparent 70%);
}
.wr-brand-marca{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--wr-amber),var(--wr-amber-strong)); color:#141B2B; position:relative; z-index:1;
  box-shadow:0 4px 10px -4px rgba(226,169,58,.6);
}
.wr-brand-marca svg{width:18px; height:18px; stroke-width:2.1;}
.wr-brand-texto{display:flex; flex-direction:column; gap:.1rem; min-width:0; overflow:hidden; position:relative; z-index:1;}
.wr-sidebar-brand span.name{font-family:'IBM Plex Sans',sans-serif; font-weight:750; letter-spacing:.08em; text-transform:uppercase; font-size:.86rem; line-height:1.15;}
.wr-sidebar-brand span.subtitulo{font-size:.6rem; font-weight:500; letter-spacing:.02em; color:var(--wr-navy-text-muted); text-transform:none; overflow:hidden; text-overflow:ellipsis;}
.wr-sidebar-brand span.autoria{font-size:.55rem; font-weight:400; letter-spacing:.01em; color:var(--wr-navy-text-muted); text-transform:none; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wr-shell.wr-collapsed .wr-sidebar-brand{justify-content:center; padding:1.3rem .3rem 1.15rem;}
.wr-brand-logo{display:block; width:100%; max-width:190px; height:auto; position:relative; z-index:1;}
.wr-brand-icone{display:none; width:38px; height:38px; object-fit:contain; position:relative; z-index:1;}
.wr-shell.wr-collapsed .wr-brand-texto{display:none;}
.wr-shell.wr-collapsed .wr-brand-icone{display:block;}

.wr-sidebar-nav{display:flex; flex-direction:column; gap:.15rem; padding:.6rem .6rem; flex:1; overflow-y:auto;}
.wr-nav-subtitulo{
  padding:.9rem .8rem .3rem; font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--wr-navy-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* Item flex com overflow:hidden perde a altura minima automatica dentro
     de .wr-sidebar-nav (flex-direction:column) - em telas baixas, onde o
     menu inteiro nao cabe na altura disponivel, isso faz o flexbox
     espremer so os titulos de grupo ate quase sumir, sem afetar os links
     (que nao tem overflow:hidden). flex-shrink:0 tira este item da
     distribuicao de encolhimento. */
  flex-shrink:0;
}
.wr-nav-subtitulo:first-child{padding-top:.3rem;}
.wr-shell.wr-collapsed .wr-nav-subtitulo{display:none;}
.wr-nav-item{
  display:flex; align-items:center; gap:.75rem; padding:.62rem .75rem; border-radius:var(--wr-radius-sm);
  color:var(--wr-navy-text-muted); text-decoration:none; font-size:.85rem; font-weight:500; white-space:nowrap;
  transition:background .16s var(--wr-ease),color .16s var(--wr-ease),transform .16s var(--wr-ease);
}
.wr-nav-item svg{width:18px; height:18px; flex-shrink:0;}
.wr-nav-item:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(2px);}
:root[data-theme="dark"] .wr-nav-item:hover{color:var(--wr-text);}
.wr-nav-item.ativo{background:linear-gradient(90deg,rgba(226,169,58,.16),rgba(255,255,255,.06));color:#fff;box-shadow:inset 3px 0 0 var(--wr-amber);}
:root[data-theme="dark"] .wr-nav-item.ativo{color:var(--wr-amber-strong);}
.wr-shell.wr-collapsed .wr-nav-item span.label{display:none;}
.wr-shell.wr-collapsed .wr-nav-item{justify-content:center;}

.wr-sidebar-footer{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.9rem 1.1rem; border-top:1px solid var(--wr-navy-border); font-size:.72rem; color:var(--wr-navy-text-muted); white-space:nowrap; overflow:hidden;}
.wr-sidebar-footer .empresa{overflow:hidden; text-overflow:ellipsis;}
.wr-sidebar-footer .wr-versao{flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:.64rem; padding:.12rem .4rem; border-radius:5px; background:rgba(255,255,255,.08); color:var(--wr-navy-text-muted);}
.wr-shell.wr-collapsed .wr-sidebar-footer{display:none;}

.wr-sidebar-collapse-btn{
  margin:.4rem .6rem; padding:.5rem; border-radius:var(--wr-radius-sm); border:1px solid var(--wr-navy-border);
  background:var(--wr-navy-surface); color:var(--wr-navy-text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:color .12s ease, border-color .12s ease;
}
.wr-sidebar-collapse-btn:hover{color:#fff; border-color:var(--wr-amber);}
:root[data-theme="dark"] .wr-sidebar-collapse-btn:hover{color:var(--wr-text);}
.wr-sidebar-collapse-btn svg{width:16px; height:16px;}

/* ---------- Topbar + conteudo ---------- */
.wr-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.wr-topbar{
  display:flex; align-items:center; gap:.9rem; min-height:64px; padding:.8rem 1.75rem; background:var(--wr-topbar-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--wr-topbar-border);position:sticky;top:0;z-index:5;box-shadow:var(--wr-topbar-shadow);
}
.wr-topbar-toggle{
  background:none; border:1px solid var(--wr-border); border-radius:var(--wr-radius-sm); width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--wr-text); flex-shrink:0;
  transition:background .12s ease;
}
.wr-topbar-toggle:hover{background:var(--wr-bg-subtle);}
.wr-topbar-title{font-family:'IBM Plex Sans',sans-serif;font-weight:750;font-size:.95rem;letter-spacing:-.01em;flex:1;min-width:0;}
.wr-topbar-actions{display:flex; align-items:center; gap:.6rem; flex-shrink:0;}
.wr-btn-icone{
  background:none; border:1px solid var(--wr-border); border-radius:var(--wr-radius-sm); padding:.42rem .65rem;
  display:flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.78rem; font-weight:600; color:var(--wr-text);
  transition:background .12s ease, border-color .12s ease;
}
.wr-btn-icone:hover{background:var(--wr-bg-subtle); border-color:var(--wr-text-faint);}
.wr-btn-icone svg{width:15px; height:15px;}
.wr-topbar-identity{display:flex;align-items:center;gap:.55rem;min-width:0;}
.wr-topbar-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--wr-blue-soft);color:var(--wr-primary);font-size:.67rem;font-weight:750;letter-spacing:.02em;flex-shrink:0;}
.wr-topbar-user{display:flex;flex-direction:column;min-width:0;line-height:1.18;white-space:nowrap;}
.wr-topbar-user b{max-width:180px;overflow:hidden;text-overflow:ellipsis;font-size:.76rem;font-weight:700;color:var(--wr-text);}
.wr-topbar-user small{font-size:.62rem;font-weight:650;letter-spacing:.05em;color:var(--wr-text-muted);}
.wr-content{width:min(100%,1600px);margin:0 auto;padding:2.25rem 2.5rem 3.5rem;flex:1;animation:wr-content-in .22s ease-out both;}
@keyframes wr-content-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.wr-sidebar-overlay{display:none;}
@media (max-width:820px){
  .wr-sidebar{position:fixed; z-index:20; box-shadow:2px 0 12px rgba(0,0,0,.25);}
  .wr-shell:not(.wr-collapsed) .wr-sidebar{width:var(--wr-sidebar-w);}
  .wr-shell.wr-collapsed .wr-sidebar{width:0; border:none;}
  .wr-topbar-title{font-size:.95rem;}
  .wr-topbar-identity{display:none;}
  .wr-content{padding:1.1rem 1rem 6rem;}
  /* Escurece o resto da tela enquanto o menu esta aberto sobrepondo o
     conteudo - da a pista visual de que ha algo "atras" e da pra fechar
     tocando em qualquer lugar fora do menu (ver overlay.addEventListener
     em shell.js), nao so pelo botao. */
  .wr-shell:not(.wr-collapsed) .wr-sidebar-overlay{
    display:block; position:fixed; inset:0; z-index:19; background:rgba(9,10,15,.45);
  }
}

/* =====================================================================
   Sistema de design compartilhado - usar estas classes em toda pagina
   nova em vez de recriar o padrao localmente.
   ===================================================================== */

/* ---------- Titulos de pagina ---------- */
.wr-page-title{font-family:'IBM Plex Sans',sans-serif; font-size:clamp(1.6rem,2vw,2rem); font-weight:750; letter-spacing:-.035em; line-height:1.2; margin:0 0 .4rem; color:var(--wr-page-title-color); text-wrap:balance;}
.wr-page-sub{color:var(--wr-text-muted); margin:0 0 1.75rem; max-width:820px; font-size:.92rem; line-height:1.55;}
.wr-section-title{font-family:'IBM Plex Sans',sans-serif; font-size:1.05rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .35rem; color:var(--wr-text);}

/* ---------- Cards / superficies ---------- */
.wr-card{background:var(--wr-surface); border:1px solid var(--wr-border); border-radius:var(--wr-radius); box-shadow:var(--wr-shadow-sm);}
.wr-card-pad{padding:1.25rem 1.5rem;}

/* ---------- Tabelas ---------- */
.wr-table-wrap{overflow-x:auto; background:var(--wr-surface); border:1px solid var(--wr-border); border-radius:10px; box-shadow:none; margin-bottom:1.25rem;}
.wr-table{width:100%; border-collapse:collapse; font-size:.84rem;}
.wr-table th, .wr-table td{text-align:left; padding:.78rem 1rem; border-top:1px solid var(--wr-border); vertical-align:middle; height:52px;}
.wr-table th{background:var(--wr-bg-subtle); color:var(--wr-text-muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.055em; font-weight:700; border-top:none; white-space:nowrap;}
.wr-table th.wr-coluna-interativa{cursor:pointer; user-select:none;}
.wr-table th.wr-coluna-interativa:hover{color:var(--wr-text);}
.wr-ordenar-coluna,.wr-filtrar-coluna{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--wr-text-faint);cursor:pointer;vertical-align:middle;padding:.12rem .18rem;margin-left:.2rem;border-radius:4px;font-size:.75rem;line-height:1;}
.wr-ordenar-coluna:hover,.wr-filtrar-coluna:hover,.wr-filtrar-coluna.ativo{color:var(--wr-amber-strong);background:var(--wr-amber-soft);}
.wr-ordenar-coluna.ativo{color:var(--wr-amber-strong);}
.wr-menu-filtro-tabela{position:fixed;z-index:90;width:min(290px,calc(100vw - 1.5rem));max-height:min(430px,calc(100vh - 1.5rem));overflow:hidden;display:flex;flex-direction:column;background:var(--wr-surface);border:1px solid var(--wr-border-strong);border-radius:10px;box-shadow:var(--wr-shadow-lg);padding:.65rem;}
.wr-menu-filtro-tabela input[type="search"]{width:100%;min-height:34px;border:1px solid var(--wr-border);border-radius:7px;padding:.35rem .55rem;background:var(--wr-surface);margin-bottom:.5rem;}
.wr-menu-filtro-opcoes{overflow:auto;display:flex;flex-direction:column;gap:.15rem;max-height:260px;padding:.1rem;}
.wr-menu-filtro-opcoes label{display:flex;align-items:center;gap:.45rem;padding:.28rem .35rem;border-radius:5px;font-size:.78rem;cursor:pointer;}
.wr-menu-filtro-opcoes label:hover{background:var(--wr-bg-subtle);}
.wr-menu-filtro-todos{display:flex;align-items:center;gap:.45rem;padding:.3rem .35rem;margin-bottom:.25rem;border-bottom:1px solid var(--wr-border);font-size:.78rem;font-weight:700;cursor:pointer;}
.wr-menu-filtro-acoes{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.6rem;padding-top:.55rem;border-top:1px solid var(--wr-border);}
.wr-filtrado-fora{display:none !important;}
.wr-table tbody tr{transition:background .1s ease;}
.wr-table tbody tr:hover{background:var(--wr-bg-subtle);}
.wr-table td.mono, .wr-mono{font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;}

/* ---------- Estado vazio / carregando ---------- */
.vazio{padding:2.2rem 1rem; text-align:center; color:var(--wr-text-muted); font-size:.85rem;}

/* ---------- Alertas / mensagens de formulario ---------- */
.msg{border-radius:var(--wr-radius-sm); padding:.7rem 1rem; font-size:.85rem; font-weight:500; margin-top:.8rem;}
.msg.ok{background:var(--wr-green-soft); color:var(--wr-green-strong);}
.msg.erro{background:var(--wr-red-soft); color:var(--wr-red-strong);}

/* ---------- Pilulas de status (substitui .status/.status-pill/badge-* locais) ---------- */
.wr-status-pill{display:inline-flex;align-items:center;gap:.42rem;font-weight:650;font-size:.83rem;--cor:var(--wr-amber);}
.wr-status-pill .dot{width:8px; height:8px; border-radius:999px; background:var(--cor); flex-shrink:0;}
.wr-status-pill.sucesso{--cor:var(--wr-green);}
.wr-status-pill.alerta{--cor:var(--wr-amber);}
.wr-status-pill.critico{--cor:var(--wr-red);}
.wr-status-pill.neutro{--cor:var(--wr-text-faint);}

/* ---------- Badges (chip solido, ex: rampa/turno/tag) ---------- */
.wr-badge{display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:.76rem;padding:.3rem .62rem;border-radius:var(--wr-radius-sm);white-space:nowrap;letter-spacing:.01em;font-variant-numeric:tabular-nums;}
.wr-badge.sucesso{background:var(--wr-green-soft); color:var(--wr-green-strong);}
.wr-badge.alerta{background:var(--wr-amber-soft); color:var(--wr-amber-strong);}
.wr-badge.critico{background:var(--wr-red-soft); color:var(--wr-red-strong);}
.wr-badge.info{background:var(--wr-blue-soft); color:var(--wr-blue);}
.wr-badge.neutro{background:var(--wr-bg-subtle); color:var(--wr-text-muted); font-weight:600;}
.wr-badge.escuro{background:#123a25; color:var(--wr-green);}
:root[data-theme="dark"] .wr-badge.escuro{background:rgba(79,181,123,.18); color:var(--wr-green-strong);}

/* ---------- Botoes ---------- */
.wr-btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:40px; border-radius:var(--wr-radius-sm); border:1px solid var(--wr-border); background:var(--wr-surface); color:var(--wr-text); font-size:.84rem; font-weight:650; padding:.55rem 1rem; cursor:pointer; transition:background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease;}
.wr-btn:hover{background:var(--wr-bg-subtle);}
.wr-btn:active{transform:translateY(1px);}
.wr-btn-primario{background:var(--wr-navy); border-color:var(--wr-navy); color:#fff; box-shadow:0 1px 2px rgba(14,20,32,.18);}
.wr-btn-primario:hover{background:#202a3c; border-color:#202a3c; color:#fff;}
:root[data-theme="dark"] .wr-btn-primario{background:linear-gradient(160deg,var(--wr-amber-strong),var(--wr-amber) 85%); border-color:transparent; color:#161200; box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
:root[data-theme="dark"] .wr-btn-primario:hover{filter:brightness(1.06); background:linear-gradient(160deg,var(--wr-amber-strong),var(--wr-amber) 85%); color:#161200;}
.wr-btn-perigo{background:var(--wr-red-soft); border-color:var(--wr-red-soft); color:var(--wr-red-strong);}
.wr-btn-perigo:hover{background:var(--wr-red); color:#fff; border-color:var(--wr-red);}
.wr-btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Campos de formulario ---------- */
.wr-input, input[type="text"].wr-input, textarea.wr-input, select.wr-input{
  width:100%; min-height:40px; padding:.55rem .75rem; border-radius:var(--wr-radius-sm); border:1px solid var(--wr-border);
  font-size:.88rem; outline:none; background:var(--wr-surface); color:var(--wr-text); transition:border-color .12s ease, box-shadow .12s ease;
}
.wr-input:focus{border-color:var(--wr-amber-strong); box-shadow:0 0 0 3px rgba(226,169,58,.18);}

/* ---------- Modal (overlay + caixa), vira bottom-sheet no mobile ---------- */
.wr-modal-overlay{position:fixed; inset:0; background:var(--wr-modal-overlay-bg); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem;}
.wr-modal{background:var(--wr-surface); border-radius:var(--wr-radius-lg); box-shadow:var(--wr-shadow-lg); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:1.5rem 1.6rem; color:var(--wr-text);}
.wr-modal h2{font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:-.02em; margin:0 0 .3rem 0;}
.wr-modal .wr-page-sub{margin-bottom:1.2rem;}
.wr-modal-acoes{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.3rem;}

@media (max-width:480px){
  .wr-modal-overlay{align-items:flex-end; padding:0;}
  .wr-modal{border-radius:20px 20px 0 0; max-width:none; width:100%; padding:1.3rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom));}
  .wr-modal-acoes{flex-direction:column-reverse;}
  .wr-modal-acoes .wr-btn{width:100%;}
}

/* ---------- Toast (aviso nao-bloqueante, ver wrToast() em shell.js) ---------- */
.wr-toast-container{
  position:fixed; top:1rem; right:1rem; z-index:200; display:flex; flex-direction:column; gap:.6rem;
  max-width:360px; width:calc(100% - 2rem); pointer-events:none;
}
.wr-toast{
  display:flex; align-items:flex-start; gap:.6rem; padding:.8rem 1rem; border-radius:10px;
  font-size:.85rem; font-weight:500; line-height:1.4; box-shadow:var(--wr-shadow-lg);
  background:var(--wr-surface); color:var(--wr-text); border:1px solid var(--wr-border);
  animation:wr-toast-entrar .18s var(--wr-ease); pointer-events:auto;
}
.wr-toast span{flex:1;}
.wr-toast-erro{border-color:var(--wr-red); background:linear-gradient(var(--wr-red-soft),var(--wr-red-soft)) var(--wr-surface); color:var(--wr-red-strong);}
.wr-toast-sucesso{border-color:var(--wr-green); background:linear-gradient(var(--wr-green-soft),var(--wr-green-soft)) var(--wr-surface); color:var(--wr-green-strong);}
.wr-toast-info{border-color:var(--wr-blue); background:linear-gradient(var(--wr-blue-soft),var(--wr-blue-soft)) var(--wr-surface); color:var(--wr-text);}
.wr-toast-fechar{background:none; border:none; font-size:1.15rem; line-height:1; cursor:pointer; color:inherit; opacity:.6; padding:0; flex-shrink:0;}
.wr-toast-fechar:hover{opacity:1;}
.wr-toast-saindo{animation:wr-toast-sair .18s var(--wr-ease) forwards;}
@keyframes wr-toast-entrar{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
@keyframes wr-toast-sair{from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-6px);}}
@media (max-width:480px){
  .wr-toast-container{top:auto; bottom:1rem; right:.75rem; left:.75rem; max-width:none; width:auto;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

/* ---------- Protecoes da conta de demonstracao (ver wrAplicarProtecoesDemo
   em shell.js) - dificulta copia dentro do navegador e deixa qualquer
   print tirado mesmo assim identificavel pela marca d'agua. ---------- */
html.wr-demo-protegido, html.wr-demo-protegido *{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
html.wr-demo-protegido input, html.wr-demo-protegido textarea{
  -webkit-user-select:text; -moz-user-select:text; user-select:text; /* ainda precisa dar pra digitar */
}
.wr-marca-dagua{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-repeat:repeat; opacity:.7;
}
@media print{
  html.wr-demo-protegido .wr-shell{display:none !important;}
  html.wr-demo-protegido::before{
    content:"Impressão bloqueada — versão de apresentação do WR Log.";
    display:block; padding:3rem; font-family:sans-serif; font-size:1.1rem;
  }
}

/* ---------- Camada visual: cards/tabelas/botoes com profundidade sutil ---------- */
.wr-content>header,.wr-content>.cabecalho,.wr-content>.motorista-header,.settings-hero{position:relative;}
.wr-card,.card,.settings-panel,.painel-expandido,.bloco-lv,.barra-filtros,.secao-chamada,.secao-fila,.secao-rampas{
  border-color:var(--wr-border);box-shadow:0 10px 28px -22px rgba(16,24,40,.34); background:var(--wr-surface);
}
:root[data-theme="dark"] .wr-card,:root[data-theme="dark"] .card,:root[data-theme="dark"] .settings-panel,:root[data-theme="dark"] .painel-expandido,:root[data-theme="dark"] .bloco-lv,:root[data-theme="dark"] .barra-filtros,:root[data-theme="dark"] .secao-chamada,:root[data-theme="dark"] .secao-fila,:root[data-theme="dark"] .secao-rampas{box-shadow:none;}
.card,.settings-panel,.painel-expandido{border-radius:16px;}
.wr-table-wrap{border-radius:12px;box-shadow:0 10px 24px -22px rgba(16,24,40,.30);}
:root[data-theme="dark"] .wr-table-wrap{box-shadow:none;}
.wr-table th{padding:.85rem 1rem;}
.wr-table td{padding:.88rem 1rem;}
.wr-btn,.btn-inicio,.btn-secundario,.btn-apresentar{box-shadow:0 1px 1px rgba(16,24,40,.03);}
:root[data-theme="dark"] .wr-btn,:root[data-theme="dark"] .btn-inicio,:root[data-theme="dark"] .btn-secundario{box-shadow:none;}
.wr-btn:hover,.btn-inicio:hover,.btn-secundario:hover{box-shadow:0 5px 14px -10px rgba(16,24,40,.36);}
:root[data-theme="dark"] .wr-btn:hover,:root[data-theme="dark"] .btn-inicio:hover,:root[data-theme="dark"] .btn-secundario:hover{box-shadow:none; border-color:var(--wr-border-strong);}
.wr-input,.barra-controles select,.file-input::file-selector-button{border-color:var(--wr-border);}
.wr-input:hover,.barra-controles select:hover{border-color:var(--wr-border-strong);}
.wr-modal{border:1px solid rgba(255,255,255,.8);}
:root[data-theme="dark"] .wr-modal{border-color:var(--wr-border-strong);}
.atalho,.quadrante,.card-dashboard-lv,.cartao-chamado,.resumo-item,.kpi,.kpi-full,.mini-kpi,.chassi-kpi,.kpi-protocolo{
  box-shadow:0 10px 26px -22px rgba(16,24,40,.38); background:var(--wr-surface); border:1px solid var(--wr-border);
}
:root[data-theme="dark"] .atalho,:root[data-theme="dark"] .quadrante,:root[data-theme="dark"] .card-dashboard-lv,:root[data-theme="dark"] .cartao-chamado,:root[data-theme="dark"] .resumo-item,:root[data-theme="dark"] .kpi,:root[data-theme="dark"] .kpi-full,:root[data-theme="dark"] .mini-kpi,:root[data-theme="dark"] .chassi-kpi,:root[data-theme="dark"] .kpi-protocolo{box-shadow:none;}
.atalho:hover,.quadrante:hover{box-shadow:0 16px 30px -22px rgba(16,24,40,.42);}
:root[data-theme="dark"] .atalho:hover,:root[data-theme="dark"] .quadrante:hover{box-shadow:none; border-color:var(--wr-border-strong); transform:translateY(-2px);}
.settings-panel:hover,.card-dashboard-lv:hover{border-color:var(--wr-border-strong);}
.barra-filtros,.barra-controles{background:var(--wr-surface);backdrop-filter:blur(8px);}
.grupo-botoes button,.chip-filtro,.horario-btn,.btn-flag{transition:transform .12s var(--wr-ease),box-shadow .12s var(--wr-ease),border-color .12s var(--wr-ease),background .12s var(--wr-ease);}
.grupo-botoes button:hover,.chip-filtro:hover,.horario-btn:hover,.btn-flag:hover{transform:translateY(-1px);box-shadow:0 5px 12px -10px rgba(16,24,40,.45);}
:root[data-theme="dark"] .grupo-botoes button:hover,:root[data-theme="dark"] .chip-filtro:hover,:root[data-theme="dark"] .horario-btn:hover,:root[data-theme="dark"] .btn-flag:hover{box-shadow:none; border-color:var(--wr-border-strong);}

/* ---------- Botões: escala única em todo o SaaS ---------- */
.wr-btn,.btn-inicio,.btn-secundario,.btn-apresentar,.btn-chamar,.btn-confirmar,.btn-agendar,.btn-rampa,.btn-flag,.btn-sindicato,.btn-imprimir,.btn-acao,.btn-inserir-frota,.chip-filtro,.horario-btn,.grupo-botoes button{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.5rem .82rem;border-radius:8px;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:.72rem;font-weight:750;letter-spacing:.025em;line-height:1;white-space:nowrap;transition:background .14s var(--wr-ease),border-color .14s var(--wr-ease),color .14s var(--wr-ease),box-shadow .14s var(--wr-ease),transform .08s var(--wr-ease);
}
.wr-btn:active,.btn-inicio:active,.btn-secundario:active,.btn-apresentar:active,.btn-chamar:active,.btn-confirmar:active,.btn-agendar:active,.btn-rampa:active,.btn-flag:active,.btn-sindicato:active,.btn-imprimir:active,.btn-acao:active,.btn-inserir-frota:active,.chip-filtro:active,.horario-btn:active,.grupo-botoes button:active{transform:translateY(1px);}
.wr-table .btn-acao,.wr-table .btn-inserir-frota,.wr-table .btn-chassi,.wr-table .btn-rampa,.wr-table .grupo-turno button,.grupo-status button{min-height:30px;padding:.34rem .58rem;border-radius:7px;font-size:.66rem;font-weight:750;letter-spacing:.015em;}
.acoes,.acoes-lv,.bloco-lv-acoes{gap:.45rem;}
.grupo-turno{border-radius:7px;box-shadow:0 1px 2px rgba(16,24,40,.03);}
.grupo-turno button{min-width:32px;}
.wr-topbar-toggle{min-height:34px;padding:0;border-radius:8px;}
.wr-btn-icone{min-height:34px;border-radius:8px;font-weight:700;}
@media(max-width:640px){
  .wr-btn,.btn-inicio,.btn-secundario,.btn-apresentar,.btn-chamar,.btn-confirmar{min-height:44px;font-size:.74rem;}
  .acoes .btn-acao{min-height:44px; min-width:44px;}
  /* "Inserir frota" e "Chassi" (colunas Frota/Chassis do Patio) ficam FORA
     do wrapper .acoes (que so envolve a coluna Acoes) - sem isto, essas
     duas acoes reais e frequentes ficavam presas em 30px de altura mesmo
     no celular, abaixo do minimo de toque. O mesmo vale pros botoes de
     turno (1o/2o/3o), que tambem nao sao .btn-acao puro. */
  .wr-table .btn-inserir-frota,.wr-table .btn-chassi,.wr-table .grupo-turno button{min-height:44px;}
}
@media(max-width:820px){
  .wr-content{padding-top:1.35rem;}
  .wr-page-title{font-size:1.55rem;}
  .wr-table th,.wr-table td{padding:.72rem .8rem;}
}

/* ---------- Tabs ---------- */
.wr-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--wr-border); margin-bottom: 1.5rem; gap: 1rem; overflow-x: auto; scrollbar-width: none; }
.wr-tabs::-webkit-scrollbar { display: none; }
.wr-tab { text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--wr-text-muted); padding: .75rem .25rem; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; white-space: nowrap; margin-bottom: -1px; }
.wr-tab:hover { color: var(--wr-text); }
.wr-tab.ativo { color: var(--wr-primary); border-bottom-color: var(--wr-primary); }

.wr-sidebar-nav::-webkit-scrollbar { display: none; }
.wr-sidebar-nav { -ms-overflow-style: none; scrollbar-width: none; }

/* =====================================================================
   Direção visual 2026
   Interface inspirada em produtos Apple: conteúdo em primeiro plano,
   contraste tipográfico, superfícies discretas e interações previsíveis.
   Esta camada fica no shell para que as telas legadas também recebam a
   mesma qualidade visual sem alterar seus fluxos ou integrações.
   ===================================================================== */
:root{
  --wr-primary:#007AFF;
  --wr-primary-hover:#0066D6;
  --wr-bg:#F1F2F4;
  --wr-bg-subtle:#E9EBEF;
  --wr-surface:#F8F8F9;
  --wr-surface-2:#EDEEF0;
  --wr-border:rgba(60,60,67,.14);
  --wr-border-strong:rgba(60,60,67,.25);
  --wr-text:#1D1D1F;
  --wr-text-muted:#6E6E73;
  --wr-text-faint:#98989D;
  --wr-navy:#1D1D1F;
  --wr-navy-surface:#252529;
  --wr-navy-border:rgba(255,255,255,.1);
  --wr-navy-text-muted:rgba(255,255,255,.58);
  --wr-radius-sm:10px;
  --wr-radius:16px;
  --wr-radius-lg:24px;
  --wr-shadow-sm:0 1px 2px rgba(0,0,0,.035),0 3px 10px rgba(0,0,0,.025);
  --wr-shadow:0 12px 32px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.035);
  --wr-shadow-lg:0 24px 64px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);
  --wr-body-bg:radial-gradient(900px 420px at 72% -12%,rgba(0,122,255,.055),transparent 60%),linear-gradient(180deg,#F6F6F7 0%,#F1F2F4 100%);
  --wr-sidebar-bg:linear-gradient(180deg,#1D1D1F 0%,#111113 100%);
  --wr-topbar-bg:rgba(246,246,247,.88);
  --wr-topbar-border:rgba(60,60,67,.12);
  --wr-topbar-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 5px 20px -20px rgba(0,0,0,.4);
  --wr-page-title-color:#1D1D1F;
}

:root[data-theme="dark"]{
  --wr-primary:#0A84FF;
  --wr-primary-hover:#409CFF;
  --wr-bg:#15171B;
  --wr-bg-subtle:#1B1E23;
  --wr-surface:#202329;
  --wr-surface-2:#292D33;
  --wr-border:rgba(255,255,255,.12);
  --wr-border-strong:rgba(255,255,255,.22);
  --wr-text:#F5F5F7;
  --wr-text-muted:rgba(235,235,245,.6);
  --wr-text-faint:rgba(235,235,245,.36);
  --wr-navy:#202329;
  --wr-navy-surface:#292D33;
  --wr-navy-border:rgba(255,255,255,.12);
  --wr-navy-text-muted:rgba(235,235,245,.6);
  --wr-body-bg:radial-gradient(760px 400px at 70% -16%,rgba(10,132,255,.09),transparent 58%),linear-gradient(180deg,#191B20 0%,#15171B 100%);
  --wr-sidebar-bg:rgba(32,35,41,.96);
  --wr-topbar-bg:rgba(25,27,32,.9);
  --wr-topbar-border:rgba(255,255,255,.1);
  --wr-page-title-color:#F5F5F7;
}

html{background:var(--wr-bg);}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.008em;}
button,input,select,textarea{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;}
:focus-visible{outline-color:var(--wr-primary);outline-offset:3px;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:rgba(60,60,67,.25);border:3px solid transparent;background-clip:padding-box;border-radius:999px;}
::-webkit-scrollbar-track{background:transparent;}

.wr-sidebar{border-right-color:rgba(255,255,255,.08);box-shadow:10px 0 32px -26px rgba(0,0,0,.75);}
.wr-sidebar-brand{padding:1.45rem 1.1rem 1.2rem;border-bottom-color:rgba(255,255,255,.08);}
.wr-sidebar-brand::before{height:100px;background:radial-gradient(160px 90px at 12% 0%,rgba(0,122,255,.24),transparent 72%);}
.wr-nav-item{border-radius:10px;padding:.66rem .78rem;font-size:.82rem;font-weight:600;letter-spacing:-.008em;}
.wr-nav-item:hover{background:rgba(255,255,255,.09);transform:none;}
.wr-nav-item.ativo{background:linear-gradient(90deg,rgba(0,122,255,.35),rgba(0,122,255,.12));box-shadow:inset 3px 0 0 #0A84FF;}
.wr-sidebar-collapse-btn{border-radius:10px;background:rgba(255,255,255,.045);}

.wr-topbar{min-height:68px;padding:.85rem 2.25rem;backdrop-filter:saturate(180%) blur(22px);}
.wr-topbar-toggle,.wr-btn-icone{border-radius:10px;background:rgba(255,255,255,.58);}
:root[data-theme="dark"] .wr-topbar-toggle,:root[data-theme="dark"] .wr-btn-icone{background:rgba(255,255,255,.06);}
.wr-topbar-title{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.92rem;font-weight:700;letter-spacing:-.02em;}
.wr-content{max-width:1720px;padding:2.5rem 2.75rem 4rem;}
.wr-page-title,.wr-section-title,.wr-modal h2{font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:-.038em;}
.wr-page-title{font-size:clamp(1.75rem,2.35vw,2.35rem);font-weight:750;}
.wr-page-sub{font-size:.9rem;line-height:1.6;color:var(--wr-text-muted);}

.wr-card,.card,.settings-panel,.painel-expandido,.bloco-lv,.barra-filtros,.secao-chamada,.secao-fila,.secao-rampas,
.atalho,.quadrante,.card-dashboard-lv,.cartao-chamado,.resumo-item,.kpi,.kpi-full,.mini-kpi,.chassi-kpi,.kpi-protocolo{
  border-color:var(--wr-border);border-radius:var(--wr-radius);box-shadow:var(--wr-shadow-sm);
}
.wr-card:hover,.card:hover,.settings-panel:hover,.atalho:hover,.quadrante:hover,.card-dashboard-lv:hover{
  border-color:var(--wr-border-strong);box-shadow:var(--wr-shadow);transform:translateY(-1px);
}
.wr-table-wrap{border-radius:var(--wr-radius);border-color:var(--wr-border);box-shadow:var(--wr-shadow-sm);}
.wr-table th{background:var(--wr-surface-2);color:var(--wr-text-muted);font-size:.66rem;letter-spacing:.075em;padding:.82rem 1rem;}
.wr-table th,.wr-table td{border-color:var(--wr-border);}
.wr-table td{padding:.9rem 1rem;}
.wr-table tbody tr:hover{background:color-mix(in srgb,var(--wr-primary) 4%,transparent);}

.wr-btn,.btn-inicio,.btn-secundario,.btn-apresentar,.btn-chamar,.btn-confirmar,.btn-agendar,.btn-rampa,.btn-flag,.btn-sindicato,.btn-imprimir,.btn-acao,.btn-inserir-frota,.chip-filtro,.horario-btn,.grupo-botoes button{
  border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:650;letter-spacing:-.01em;
}
.wr-btn{background:rgba(255,255,255,.72);border-color:var(--wr-border);}
.wr-btn:hover{background:var(--wr-surface);border-color:var(--wr-border-strong);}
.wr-btn-primario{background:var(--wr-primary);border-color:var(--wr-primary);box-shadow:0 6px 14px -9px rgba(0,122,255,.7);}
.wr-btn-primario:hover{background:var(--wr-primary-hover);border-color:var(--wr-primary-hover);box-shadow:0 8px 18px -9px rgba(0,122,255,.75);}
:root[data-theme="dark"] .wr-btn-primario,:root[data-theme="dark"] .wr-btn-primario:hover{background:var(--wr-primary);border-color:var(--wr-primary);color:#fff;}

/* Contraste previsível no modo escuro. Alguns fluxos antigos usam botões
   neutros para ações principais; antes herdavam cinza claro e texto branco.
   Esta regra final garante leitura sem descaracterizar ações primárias,
   perigosas ou os estados específicos de cada tela. */
:root[data-theme="dark"] .wr-btn:not(.wr-btn-primario):not(.wr-btn-perigo),
:root[data-theme="dark"] .btn-inicio,:root[data-theme="dark"] .btn-secundario,
:root[data-theme="dark"] .btn-apresentar,:root[data-theme="dark"] .btn-chamar,
:root[data-theme="dark"] .btn-confirmar,:root[data-theme="dark"] .btn-agendar,
:root[data-theme="dark"] .btn-rampa,:root[data-theme="dark"] .btn-flag,
:root[data-theme="dark"] .btn-sindicato,:root[data-theme="dark"] .btn-imprimir,
:root[data-theme="dark"] .btn-acao,:root[data-theme="dark"] .btn-inserir-frota,
:root[data-theme="dark"] .chip-filtro,:root[data-theme="dark"] .horario-btn,
:root[data-theme="dark"] .grupo-botoes button,:root[data-theme="dark"] .btn-mini{
  background:#2C2C2E;color:#F5F5F7;border-color:rgba(255,255,255,.22);text-shadow:none;
}
:root[data-theme="dark"] .wr-btn:not(.wr-btn-primario):not(.wr-btn-perigo):hover,
:root[data-theme="dark"] .btn-inicio:hover,:root[data-theme="dark"] .btn-secundario:hover,
:root[data-theme="dark"] .btn-apresentar:hover,:root[data-theme="dark"] .btn-chamar:hover,
:root[data-theme="dark"] .btn-confirmar:hover,:root[data-theme="dark"] .btn-agendar:hover,
:root[data-theme="dark"] .btn-rampa:hover,:root[data-theme="dark"] .btn-flag:hover,
:root[data-theme="dark"] .btn-sindicato:hover,:root[data-theme="dark"] .btn-imprimir:hover,
:root[data-theme="dark"] .btn-acao:hover,:root[data-theme="dark"] .btn-inserir-frota:hover,
:root[data-theme="dark"] .chip-filtro:hover,:root[data-theme="dark"] .horario-btn:hover,
:root[data-theme="dark"] .grupo-botoes button:hover,:root[data-theme="dark"] .btn-mini:hover{
  background:#3A3A3C;color:#FFF;border-color:rgba(255,255,255,.36);
}
:root[data-theme="dark"] button:disabled,:root[data-theme="dark"] .wr-btn:disabled{
  background:#35353A !important;color:rgba(255,255,255,.82) !important;
  border-color:rgba(255,255,255,.18) !important;opacity:.88;
}
.wr-input,input[type="search"],.barra-controles select,.barra-filtros input,.campo-modal input{
  border-radius:10px;border-color:var(--wr-border);background:color-mix(in srgb,var(--wr-surface) 92%,transparent);
}
.wr-input:focus,input[type="search"]:focus,.barra-controles select:focus,.barra-filtros input:focus,.campo-modal input:focus{
  border-color:var(--wr-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--wr-primary) 16%,transparent);outline:none;
}

.wr-tabs{width:max-content;max-width:100%;gap:.15rem;padding:.25rem;margin-bottom:1.6rem;border:1px solid var(--wr-border);border-radius:12px;background:var(--wr-bg-subtle);}
.wr-tab{margin:0;padding:.52rem .82rem;border:0;border-radius:8px;font-size:.8rem;}
.wr-tab.ativo{background:var(--wr-surface);color:var(--wr-text);border:0;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.wr-tab:hover{color:var(--wr-text);background:color-mix(in srgb,var(--wr-surface) 65%,transparent);}
.wr-modal-overlay{backdrop-filter:saturate(140%) blur(8px);}
.wr-modal{border-color:rgba(255,255,255,.72);border-radius:24px;box-shadow:var(--wr-shadow-lg);}
:root[data-theme="dark"] .wr-modal{border-color:var(--wr-border);}

@media(max-width:820px){
  .wr-topbar{padding:.75rem 1rem;min-height:60px;}
  .wr-content{padding:1.35rem 1rem calc(2.75rem + env(safe-area-inset-bottom));}
  .wr-page-title{font-size:1.7rem;}
  .wr-card,.card,.settings-panel,.painel-expandido,.bloco-lv,.barra-filtros,.secao-chamada,.secao-fila,.secao-rampas{border-radius:14px;}
}

/* =====================================================================
   Responsividade transversal
   Esta camada final protege tambem as telas legadas, que possuem barras de
   acao e campos criados antes do shell. Ela evita rolagem horizontal da
   pagina sem esconder tabelas: estas continuam rolaveis dentro do proprio
   container. Os breakpoints cobrem tablets (820px) e celulares (640px).
   ===================================================================== */
html,body{max-width:100%;overflow-x:clip;}
img,svg,video,canvas{max-width:100%;}
.wr-content>*{min-width:0;}
.wr-content :is(.wr-card,.card,.settings-panel,.painel-expandido,.bloco-lv,.barra-filtros,.secao-chamada,.secao-fila,.secao-rampas,.cartao-d){min-width:0;}

@media(max-width:820px){
  /* O painel lateral e' completamente retirado da area de toque quando
     fechado. Isso evita que links invisiveis interceptem toques no conteudo. */
  .wr-shell.wr-collapsed .wr-sidebar{visibility:hidden;pointer-events:none;}
  .wr-shell:not(.wr-collapsed) .wr-sidebar{visibility:visible;pointer-events:auto;}
  .wr-sidebar{max-width:calc(100vw - 3rem);}
  .wr-topbar-actions{gap:.4rem;}
  .wr-topbar-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wr-content{width:100%;}
  .wr-content [style*="min-width"]{min-width:0!important;}
  .wr-content :is(.wr-table-wrap,.rolagem-d,.patio-tabela-wrap,.rd-compacta){max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
}

@media(max-width:640px){
  /* 16px impede o zoom automatico do Safari ao focar campos. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important;}
  .wr-topbar{gap:.55rem;padding:.65rem .75rem;padding-top:max(.65rem,env(safe-area-inset-top));}
  .wr-topbar-toggle{width:40px;height:40px;min-height:40px;}
  .wr-topbar-actions .wr-fullscreen-label,.wr-topbar-actions #wrFullscreenBtn{display:none;}
  .wr-topbar-actions .wr-btn-icone{min-width:40px;min-height:40px;padding:.45rem;}
  .wr-content{padding:.95rem .75rem calc(2rem + env(safe-area-inset-bottom));}
  .wr-page-title{font-size:clamp(1.45rem,7vw,1.7rem);overflow-wrap:anywhere;}
  .wr-page-sub{margin-bottom:1.2rem;}
  .wr-card-pad{padding:1rem;}
  .wr-btn{min-height:44px;}
  .wr-modal{max-height:calc(100dvh - env(safe-area-inset-top));}
  .wr-modal-overlay{min-height:100dvh;}
  .wr-content :is(.documentos-acoes,.barra-busca,.linha-d,.rotas-toolbar,.rotas-filtros,.portaria-tabsbar,.barra-limite,.filtros-bar,.acoes-geracao-cargas){align-items:stretch;}
  .wr-content :is(.documentos-acoes,.barra-busca,.linha-d,.barra-limite,.filtros-bar)>.wr-input,
  .wr-content :is(.documentos-acoes,.barra-busca,.linha-d,.barra-limite,.filtros-bar)>input,
  .wr-content :is(.documentos-acoes,.barra-busca,.linha-d,.barra-limite,.filtros-bar)>select{width:100%!important;flex:1 1 100%;}
  .wr-content :is(.documentos-acoes,.barra-busca,.linha-d,.barra-limite,.filtros-bar)>.wr-btn{flex:1 1 auto;}
  .wr-table{font-size:.8rem;}
  .wr-table th,.wr-table td{padding:.68rem .72rem;}
}

/* Aviso de titularidade (WRTECH): menu esquerdo e topo direito */
.wr-propriedade{margin:.4rem .9rem .5rem;padding:.55rem .65rem;border:1px solid var(--wr-navy-border,rgba(255,255,255,.12));border-radius:10px;font-size:.62rem;line-height:1.45;color:var(--wr-navy-text-muted,#8792A6)}
.wr-propriedade b{color:#fff;font-weight:650}
.wr-collapsed .wr-propriedade{display:none}
.wr-topbar-propriedade{font-size:.68rem;color:var(--wr-text-muted);white-space:nowrap;max-width:440px;overflow:hidden;text-overflow:ellipsis;margin-right:.4rem}
.wr-topbar-propriedade b{color:var(--wr-text);font-weight:650}
@media(max-width:1280px){.wr-topbar-propriedade{display:none}}

/* Botao Voltar (shell.js: wrInserirBotaoVoltar) */
.wr-btn-voltar{white-space:nowrap; flex:none;}
.wr-pilha-acoes{display:inline-flex; flex-direction:column; align-items:stretch; gap:.4rem;}
.wr-pilha-acoes .wr-btn{width:100%; justify-content:center; white-space:nowrap;}
.wr-btn-voltar-linha{margin-left:auto; align-self:flex-start;}
.wr-grupo-acoes{display:inline-flex; align-items:flex-start; gap:.6rem; margin-left:auto; flex:none;}
.wr-linha-acoes{align-items:flex-start !important;}
.wr-linha-acoes > span:not(.wr-pilha-acoes), .wr-linha-acoes > .atualizacao{align-self:center;}
.wr-btn-voltar-solto{float:right; margin:0 0 .5rem 1rem; min-height:34px; padding:.35rem .8rem; font-size:.8rem;}
@media print{#wrBtnVoltar{display:none !important;}}