/*
  Simplim TemplateWeb — folha de estilo canonica
  ------------------------------------------------
  Esta e a FONTE UNICA do sistema visual aprovado (sidebar navy colapsavel,
  cartoes com orelha lateral colorida + sombra tingida, tabelas com zebra
  discreta, dialogos de confirmacao, notificacoes toast, popup de cadastro,
  selecao de cor de marca do cliente).

  Nao edite uma copia deste arquivo dentro de um projeto consumidor.
  Referencie/copie este arquivo tal como esta. Se precisar de uma mudanca
  visual, ela deve ser feita AQUI e propagada, nao duplicada e adaptada em
  cada projeto — ver commons/TemplateWeb/TemplateWeb.md, secao "Regra para
  futuras manutencoes".

  Convencao de nomes: toda classe, variavel CSS (--sim-*) e id de icone
  comeca com o prefixo "sim-" para nao colidir com Bootstrap/Tailwind/Bulma
  ou qualquer outro framework CSS que conviva na mesma pagina (ex.: .btn,
  .card, .badge, .panel sao nomes extremamente comuns — .sim-btn, .sim-card,
  .sim-badge, .sim-panel nao colidem).
*/

:root{
  color-scheme:light;
  --sim-page:#e4ecf5;
  --sim-canvas:#eef4f8;
  --sim-card:#ffffff;
  --sim-ink:#4a5058;
  --sim-muted:#647289;
  --sim-muted-2:#8a97ab;
  --sim-line:#e1e8f1;
  --sim-line-soft:#edf2f8;
  --sim-navy:#152c48;
  --sim-navy-2:#1d3c60;
  --sim-navy-3:#25517f;
  --sim-accent:#0378ae;
  --sim-accent-ink:#075f8c;
  --sim-accent-soft:#e5f2f8;
  --sim-violet:#6d28d9;
  --sim-violet-soft:#f1eafd;
  --sim-ok:#0ca30c;
  --sim-ok-soft:#e9f9ea;
  --sim-ok-ink:#0a7d0a;
  --sim-warn:#b4750a;
  --sim-warn-soft:#fdf3de;
  --sim-crit:#d03b3b;
  --sim-crit-soft:#fceceb;
  --sim-crit-ink:#b32424;
  --sim-cat-1-soft:#f7dede;--sim-cat-1-ink:#812222;
  --sim-cat-2-soft:#f7e6de;--sim-cat-2-ink:#813f22;
  --sim-cat-3-soft:#f7edde;--sim-cat-3-ink:#815b22;
  --sim-cat-4-soft:#f7f4de;--sim-cat-4-ink:#817722;
  --sim-cat-5-soft:#f2f7de;--sim-cat-5-ink:#6e8122;
  --sim-cat-6-soft:#ebf7de;--sim-cat-6-ink:#528122;
  --sim-cat-7-soft:#e3f7de;--sim-cat-7-ink:#358122;
  --sim-cat-8-soft:#def7e1;--sim-cat-8-ink:#22812c;
  --sim-cat-9-soft:#def7e8;--sim-cat-9-ink:#228148;
  --sim-cat-10-soft:#def7ef;--sim-cat-10-ink:#228165;
  --sim-cat-11-soft:#def7f7;--sim-cat-11-ink:#228181;
  --sim-cat-12-soft:#deeff7;--sim-cat-12-ink:#226581;
  --sim-cat-13-soft:#dee8f7;--sim-cat-13-ink:#224881;
  --sim-cat-14-soft:#dee1f7;--sim-cat-14-ink:#222c81;
  --sim-cat-15-soft:#e3def7;--sim-cat-15-ink:#352281;
  --sim-cat-16-soft:#ebdef7;--sim-cat-16-ink:#522281;
  --sim-cat-17-soft:#f2def7;--sim-cat-17-ink:#6e2281;
  --sim-cat-18-soft:#f7def4;--sim-cat-18-ink:#812277;
  --sim-cat-19-soft:#f7deed;--sim-cat-19-ink:#81225b;
  --sim-cat-20-soft:#f7dee6;--sim-cat-20-ink:#81223f;
  --sim-zebra:rgba(21,34,56,.018);
  --sim-shadow-neutral:0 16px 38px rgba(21,34,56,.08);
  --sim-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23647289' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --sim-page:#0e1420;
  --sim-canvas:#121a28;
  --sim-card:#182234;
  --sim-ink:#eef2f9;
  --sim-muted:#9aa7bd;
  --sim-muted-2:#76839a;
  --sim-line:#263349;
  --sim-line-soft:#1e2a3d;
  --sim-navy:#0b1726;
  --sim-navy-2:#13233a;
  --sim-navy-3:#1c3555;
  --sim-accent:#4fb3e0;
  --sim-accent-ink:#8fd2ee;
  --sim-accent-soft:#16273f;
  --sim-violet:#a382e8;
  --sim-violet-soft:#251c3d;
  --sim-ok:#4fc750;
  --sim-ok-soft:#132a16;
  --sim-ok-ink:#6fd370;
  --sim-warn:#e2a53e;
  --sim-warn-soft:#2e2410;
  --sim-crit:#e8746a;
  --sim-crit-soft:#3a1e1c;
  --sim-crit-ink:#f0948b;
  --sim-cat-1-soft:#3b1c1c;--sim-cat-1-ink:#e69494;
  --sim-cat-2-soft:#3b251c;--sim-cat-2-ink:#e6ac94;
  --sim-cat-3-soft:#3b2e1c;--sim-cat-3-ink:#e6c594;
  --sim-cat-4-soft:#3b381c;--sim-cat-4-ink:#e6de94;
  --sim-cat-5-soft:#353b1c;--sim-cat-5-ink:#d5e694;
  --sim-cat-6-soft:#2b3b1c;--sim-cat-6-ink:#bde694;
  --sim-cat-7-soft:#223b1c;--sim-cat-7-ink:#a4e694;
  --sim-cat-8-soft:#1c3b1f;--sim-cat-8-ink:#94e69c;
  --sim-cat-9-soft:#1c3b28;--sim-cat-9-ink:#94e6b4;
  --sim-cat-10-soft:#1c3b32;--sim-cat-10-ink:#94e6cd;
  --sim-cat-11-soft:#1c3b3b;--sim-cat-11-ink:#94e6e6;
  --sim-cat-12-soft:#1c323b;--sim-cat-12-ink:#94cde6;
  --sim-cat-13-soft:#1c283b;--sim-cat-13-ink:#94b4e6;
  --sim-cat-14-soft:#1c1f3b;--sim-cat-14-ink:#949ce6;
  --sim-cat-15-soft:#221c3b;--sim-cat-15-ink:#a494e6;
  --sim-cat-16-soft:#2b1c3b;--sim-cat-16-ink:#bd94e6;
  --sim-cat-17-soft:#351c3b;--sim-cat-17-ink:#d594e6;
  --sim-cat-18-soft:#3b1c38;--sim-cat-18-ink:#e694de;
  --sim-cat-19-soft:#3b1c2e;--sim-cat-19-ink:#e694c5;
  --sim-cat-20-soft:#3b1c25;--sim-cat-20-ink:#e694ac;
  --sim-zebra:rgba(238,242,249,.025);
  --sim-shadow-neutral:0 16px 38px rgba(0,0,0,.45);
  --sim-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239aa7bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --sim-page:#0e1420;--sim-canvas:#121a28;--sim-card:#182234;--sim-ink:#eef2f9;--sim-muted:#9aa7bd;--sim-muted-2:#76839a;
    --sim-line:#263349;--sim-line-soft:#1e2a3d;--sim-navy:#0b1726;--sim-navy-2:#13233a;--sim-navy-3:#1c3555;
    --sim-accent:#4fb3e0;--sim-accent-ink:#8fd2ee;--sim-accent-soft:#16273f;--sim-violet:#a382e8;--sim-violet-soft:#251c3d;
    --sim-ok:#4fc750;--sim-ok-soft:#132a16;--sim-ok-ink:#6fd370;--sim-warn:#e2a53e;--sim-warn-soft:#2e2410;
    --sim-crit:#e8746a;--sim-crit-soft:#3a1e1c;--sim-crit-ink:#f0948b;--sim-zebra:rgba(238,242,249,.025);
    --sim-shadow-neutral:0 16px 38px rgba(0,0,0,.45);
    --sim-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239aa7bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --sim-cat-1-soft:#3b1c1c;--sim-cat-1-ink:#e69494;--sim-cat-2-soft:#3b251c;--sim-cat-2-ink:#e6ac94;
    --sim-cat-3-soft:#3b2e1c;--sim-cat-3-ink:#e6c594;--sim-cat-4-soft:#3b381c;--sim-cat-4-ink:#e6de94;
    --sim-cat-5-soft:#353b1c;--sim-cat-5-ink:#d5e694;--sim-cat-6-soft:#2b3b1c;--sim-cat-6-ink:#bde694;
    --sim-cat-7-soft:#223b1c;--sim-cat-7-ink:#a4e694;--sim-cat-8-soft:#1c3b1f;--sim-cat-8-ink:#94e69c;
    --sim-cat-9-soft:#1c3b28;--sim-cat-9-ink:#94e6b4;--sim-cat-10-soft:#1c3b32;--sim-cat-10-ink:#94e6cd;
    --sim-cat-11-soft:#1c3b3b;--sim-cat-11-ink:#94e6e6;--sim-cat-12-soft:#1c323b;--sim-cat-12-ink:#94cde6;
    --sim-cat-13-soft:#1c283b;--sim-cat-13-ink:#94b4e6;--sim-cat-14-soft:#1c1f3b;--sim-cat-14-ink:#949ce6;
    --sim-cat-15-soft:#221c3b;--sim-cat-15-ink:#a494e6;--sim-cat-16-soft:#2b1c3b;--sim-cat-16-ink:#bd94e6;
    --sim-cat-17-soft:#351c3b;--sim-cat-17-ink:#d594e6;--sim-cat-18-soft:#3b1c38;--sim-cat-18-ink:#e694de;
    --sim-cat-19-soft:#3b1c2e;--sim-cat-19-ink:#e694c5;--sim-cat-20-soft:#3b1c25;--sim-cat-20-ink:#e694ac;
  }
}

/*
  Reset minimo, escopado em .sim-app sempre que possivel para nao vazar
  para uma pagina hospedeira maior. box-sizing:border-box global e a
  unica excecao deliberada (e praticamente universal em qualquer reset
  CSS serio; idempotente se o host ja fizer o mesmo).
*/
*{box-sizing:border-box}
/* Tipografia/cor base compartilhada por qualquer raiz do sistema
   (.sim-app = telas com sidebar, .sim-auth-wrapper = tela de login) - o
   layout (grid vs. flex) fica em cada classe separadamente logo abaixo.
   Sem isso, qualquer raiz nova esquecida aqui cai na fonte padrao do
   navegador em vez de "Segoe UI". */
.sim-app,.sim-auth-wrapper{
  color:var(--sim-ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14.5px;line-height:1.5;
}
.sim-app ::selection,.sim-auth-wrapper ::selection{background:var(--sim-accent-soft)}
.sim-app{
  background:var(--sim-page);
  display:grid;grid-template-columns:246px minmax(0,1fr);
  min-height:100vh;
  transition:grid-template-columns .18s ease;
}
.sim-tabular{font-variant-numeric:tabular-nums}
/* Utilitario de fonte monoespacada para identificadores/codigos em texto
   corrido (ex.: nome de base virtual numa celula de tabela). Sem prefixo
   "sim-" de proposito: varias telas de Central/Agent ja usam class=mono
   esperando que isto exista - antes desta regra, a classe era um no-op
   silencioso (nenhum CSS a mira). */
.mono{font-family:Consolas,"SFMono-Regular",Menlo,Monaco,ui-monospace,monospace}

/* Modificador opcional: usar .sim-app.sim-framed para preview/estilo-guia
   (cartao com cantos arredondados, sombra e altura propria) em vez do
   layout de producao (borda a borda, 100vh). */
.sim-app.sim-framed{
  min-height:0;border-radius:16px;overflow:hidden;border:1px solid var(--sim-line);
  box-shadow:0 24px 56px rgba(15,30,50,.11);
}
.sim-app.sim-collapsed{grid-template-columns:72px minmax(0,1fr)}
/* Propositalmente NAO ha breakpoint que empilha a sidebar em cima do
   conteudo em telas estreitas - o menu deve permanecer sempre na lateral.
   Em telas estreitas, o ResizeObserver (simplim-template.js) ja recolhe a
   barra para 72px (SIM_AUTO_COLLAPSE_WIDTH); o conteudo so fica mais
   apertado, com scroll horizontal proprio onde precisar (.sim-tablewrap),
   nunca a sidebar subindo para cima da pagina. */
@media (prefers-reduced-motion:reduce){.sim-app{transition:none}}

/* ---------- barra lateral (menu) ---------- */
.sim-side{
  background:var(--sim-navy);color:#dbe6f3;padding:22px 18px;
  display:flex;flex-direction:column;
  height:100vh;max-height:100vh;position:sticky;top:0;
  transition:padding .18s ease;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
}
.sim-side::-webkit-scrollbar{display:none}
.sim-app.sim-collapsed .sim-side{padding:22px 12px}
.sim-side-top{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.sim-app.sim-collapsed .sim-side-top{flex-direction:column;gap:12px}
.sim-side-burger{
  width:38px;height:38px;border-radius:9px;background:var(--sim-navy-2);display:grid;place-items:center;flex:none;
  border:0;cursor:pointer;padding:0;
}
.sim-side-burger:focus-visible{outline:2px solid #8fb8f4;outline-offset:2px}
.sim-side-burger span.sim-burger-mid{display:block;width:16px;height:2px;background:#cfe0f2;position:relative}
.sim-side-burger span.sim-burger-mid:before,.sim-side-burger span.sim-burger-mid:after{content:"";position:absolute;left:0;width:16px;height:2px;background:#cfe0f2}
.sim-side-burger span.sim-burger-mid:before{top:-5px}.sim-side-burger span.sim-burger-mid:after{top:5px}
.sim-side-burger .sim-burger-vendor-mark{display:none;width:70%;height:70%;object-fit:contain}
.sim-app.sim-collapsed .sim-side-burger span.sim-burger-mid{display:none}
.sim-app.sim-collapsed .sim-side-burger .sim-burger-vendor-mark{display:block}

/* Slot da logo da clinica (tenant) — distinto da marca Simplim (vendor),
   que fica fixa no rodape em .sim-side-brand. Use .sim-client-logo.sim-empty
   quando a clinica ainda nao configurou uma logo. */
.sim-client-logo{
  display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex:1;min-height:42px;height:auto;max-height:56px;padding:3px 8px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);overflow:hidden;
}
.sim-client-logo img{
  max-height:42px;width:100%;height:auto;object-fit:contain;margin:0 auto;display:block;
}
.sim-client-logo .sim-mark{
  width:24px;height:24px;border-radius:6px;background:var(--sim-accent);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:10.5px;
}
.sim-client-logo .sim-name{font-size:12.5px;font-weight:700;color:#e7eef7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-client-logo.sim-empty{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.22);justify-content:center;min-height:38px}
.sim-client-logo.sim-empty .sim-name{color:#7d8ea6;font-weight:600;font-size:11.5px}
.sim-app.sim-collapsed .sim-client-logo{background:none;border:none;padding:0;flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.sim-app.sim-collapsed .sim-client-logo img{max-height:32px;max-width:38px}
.sim-app.sim-collapsed .sim-client-logo .sim-name{display:none}

/* Usuario logado + menu suspenso (perfil / configuracoes / sair / aparencia) */
.sim-side-user{
  display:flex;align-items:center;gap:10px;padding:6px;margin:-6px -6px 10px;border-radius:10px;
  border:0;background:transparent;width:calc(100% + 12px);cursor:pointer;font:inherit;text-align:left;
}
.sim-side-user:hover,.sim-side-user[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.sim-app.sim-collapsed .sim-side-user{justify-content:center;padding:6px;width:auto;margin:0 auto 10px}
.sim-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--sim-accent);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:12.5px;
}
.sim-side-user .sim-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.sim-side-user .sim-who b{font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.sim-side-user .sim-who small{font-size:11px;color:#93a7c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-side-user .sim-chev{margin-left:auto;color:#7d8ea6;font-size:10px;flex:none}
.sim-app.sim-collapsed .sim-side-user .sim-who,.sim-app.sim-collapsed .sim-side-user .sim-chev{display:none}

.sim-user-menu{
  display:none;position:absolute;left:18px;top:78px;width:224px;background:var(--sim-card);color:var(--sim-ink);
  border:1px solid var(--sim-line);border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.3);padding:8px;z-index:30;
}
.sim-user-menu.sim-open{display:block}
.sim-app.sim-collapsed .sim-user-menu{left:60px;top:64px}
.sim-user-menu-head{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;border-bottom:1px solid var(--sim-line-soft);margin-bottom:6px}
.sim-user-menu-head .sim-avatar{width:32px;height:32px;font-size:12px}
.sim-user-menu-head b{display:block;font-size:13px}
.sim-user-menu-head small{display:block;font-size:11px;color:var(--sim-muted);margin-top:1px}
.sim-user-menu-item{display:block;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--sim-ink);text-decoration:none}
.sim-user-menu-item:hover{background:var(--sim-line-soft)}
.sim-user-menu-colors{margin-top:6px;padding:10px 8px 4px;border-top:1px solid var(--sim-line-soft)}
.sim-user-menu-colors p{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--sim-muted);font-weight:700;margin:0 0 9px}

.sim-side-divider{height:1px;background:rgba(255,255,255,.1);margin:0 0 18px}
.sim-side-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#8ea3bd;font-weight:700;margin:0 0 6px}
/* Consumidor pode deixar AppEyebrow vazio pra omitir a linha inteira (nao
   so o texto) - sem isso um <p> vazio ainda ocupa espaco por causa do
   proprio margin-bottom acima. */
.sim-side-eyebrow:empty{display:none}
.sim-side-title{font-size:17px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.sim-side-sub{font-size:12.5px;color:#93a7c0;margin:0 0 22px}
.sim-app.sim-collapsed .sim-side-eyebrow,.sim-app.sim-collapsed .sim-side-title,.sim-app.sim-collapsed .sim-side-sub,
.sim-app.sim-collapsed .sim-side-foot{display:none}

.sim-side-nav{display:flex;flex-direction:column;gap:3px}
.sim-side-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px 10px 9px;border-radius:9px;color:#b7c6da;
  text-decoration:none;font-size:13.5px;font-weight:600;border-left:3px solid transparent;
}
.sim-side-nav a.sim-active{background:rgba(255,255,255,.13);color:#fff;border-left-color:#8fb8f4}
.sim-nav-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:width .15s ease,height .15s ease}
.sim-side-nav a.sim-active .sim-nav-ico{width:18px;height:18px;stroke-width:2}
@media (prefers-reduced-motion:reduce){.sim-nav-ico{transition:none}}
.sim-app.sim-collapsed .sim-side-nav a{justify-content:center;gap:0;border-left:none;padding:11px 0}
.sim-app.sim-collapsed .sim-side-nav a .sim-nav-label{display:none}

/* Seletor de cor de marca do cliente (grade de 10 amostras, dentro do sim-user-menu) */
.sim-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.sim-swatch{width:100%;height:26px;border-radius:7px;border:2px solid transparent;padding:0;cursor:pointer}
.sim-swatch.sim-active{border-color:var(--sim-ink);box-shadow:0 0 0 2px var(--sim-accent-soft)}

/* Claro/Escuro/Automatico - mesma moldura visual de .sim-user-menu-colors,
   logo abaixo do seletor de cor de marca. "Automatico" = nenhum
   data-theme no <html> (segue --sim-*/@media prefers-color-scheme, ja
   definidos no topo deste arquivo); "Claro"/"Escuro" fixam
   data-theme="light"/"dark" (ver simplim-template.js). */
.sim-user-menu-theme{margin-top:6px;padding:10px 8px 4px;border-top:1px solid var(--sim-line-soft)}
/* Rotulo "TEMA" com um pequeno padding-left proprio (so o texto - a grade
   de botoes abaixo NAO leva esse ajuste, fica como sempre esteve) para
   alinhar com "APARENCIA"/"Meu perfil"/etc. Isolado nesta regra (nao no
   padding do .sim-user-menu-theme, que so desloca o texto sem afetar a
   grade) de proposito: pedido explicito para mexer so na palavra TEMA. */
.sim-user-menu-theme p{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--sim-muted);font-weight:700;margin:0 0 9px;padding-left:8px}
.sim-theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.sim-theme-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 7px;
  border:1.5px solid var(--sim-line);border-radius:8px;background:none;font-family:inherit;
  color:var(--sim-muted);font-size:11px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
  /* Central/Agent tem um "button{height:36px}" generico (pre-TemplateWeb)
     que, sem isso, comprime o icone+rotulo empilhados deste botao (~50px
     de conteudo) num box de 36px - height:auto aqui (especificidade maior
     que o seletor de elemento generico) restaura o tamanho natural. */
  height:auto;
}
.sim-theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sim-theme-btn:hover{border-color:var(--sim-accent-soft);color:var(--sim-ink)}
.sim-theme-btn.sim-active{border-color:var(--sim-accent);color:var(--sim-accent-ink);background:var(--sim-accent-soft)}

.sim-side-foot{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
}
.sim-side-brand{
  padding:4px 2px;
  text-align:center;
  color:#dbe6f3;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  cursor:pointer;
  user-select:none;
}
.sim-side-brand img{
  width:100%;
  height:auto;
  display:block;
  transition:filter .25s ease, transform .25s ease;
}
.sim-side-brand small{display:block;font-weight:600;font-size:10px;color:#8ea3bd;letter-spacing:.06em;margin-top:2px}

.sim-side-binary{
  color:#8ea3bd;
  font-size:11px;
  line-height:1.5;
  overflow-wrap:anywhere;
  /* Estado padrão recolhido: altura zero e invisível */
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  padding-top:0;
  border-top:1px solid transparent;
  pointer-events:none;
  transform:translateY(6px);
  transition:max-height .32s cubic-bezier(0.2, 0.8, 0.2, 1),
             opacity .22s ease,
             margin-top .32s cubic-bezier(0.2, 0.8, 0.2, 1),
             padding-top .32s cubic-bezier(0.2, 0.8, 0.2, 1),
             border-color .25s ease,
             transform .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sim-side-binary b{color:#c9d6e4;font-weight:700}

/* Ao posicionar o mouse sobre o logo da Simplim (ou rodapé), as informações surgem inferiormente empurrando o logo */
.sim-side-foot:hover .sim-side-binary,
.sim-side-foot.sim-expanded .sim-side-binary,
.sim-side-foot:focus-within .sim-side-binary{
  max-height:130px;
  opacity:1;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.14);
  pointer-events:auto;
  transform:translateY(0);
}
.sim-side-foot:hover .sim-side-brand img,
.sim-side-foot.sim-expanded .sim-side-brand img{
  filter:brightness(1.1);
}

/* ---------- area de conteudo ---------- */
/* Coluna flex (nao so bloco) para o rodape (.sim-content-foot, margin-top:
   auto) grudar no fim da tela quando os dados sao curtos, e cair logo
   apos os dados (sem espaco extra, so a borda) quando eles passam da
   tela - o item de grid ja fica esticado a 100vh pelo .sim-app acima. */
.sim-content{background:var(--sim-canvas);padding:16px 24px 4px;min-width:0;display:flex;flex-direction:column}
.sim-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.sim-chip-eyebrow{
  display:inline-flex;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--sim-accent-soft);color:var(--sim-accent-ink);padding:5px 11px;border-radius:7px;margin-bottom:10px;
}
.sim-page-title{font-size:25px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.sim-page-desc{color:var(--sim-muted);margin:0;font-size:13.8px;max-width:56ch}
.sim-period-card{
  background:var(--sim-card);border:1px solid var(--sim-line);border-radius:12px;padding:12px 18px;box-shadow:var(--sim-shadow-neutral);
  min-width:220px;
  /* Destaque no topo (mesmo charme visual do .sim-panel-accent, so que em
     cima em vez de na lateral - cartao de ambiente e mais "identidade",
     nao uma lista). */
  border-top:3px solid var(--sim-accent);
}
.sim-period-card span{display:block;font-size:11px;color:var(--sim-muted-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.sim-period-card b{font-size:15px}

.sim-panel{
  background:var(--sim-card);border:1px solid var(--sim-line);border-radius:14px;padding:18px 20px;box-shadow:var(--sim-shadow-neutral);
  margin-top:16px;
  /* Todo consumidor real injeta .sim-panel dentro de um container
     display:grid/flex proprio (ex.: .content-grid) sem grid-template-
     columns - sem min-width:0 aqui, o item de grid nao encolhe abaixo do
     seu min-content e forca a pagina inteira a ficar larga, mesmo com o
     .sim-tablewrap interno tendo overflow-x:auto proprio. */
  min-width:0;
}
.sim-panel h2{font-size:16.5px;margin:0 0 4px;font-weight:700}
.sim-panel .sim-h2-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sim-panel .sim-h2-row h2{margin:0}

/* Sub-secao de gerenciamento dentro de um formulario (ex.: credenciais
   internas dentro de "Editar cliente interno") - existe pra separar
   visualmente "gerenciar algo relacionado ao registro" de "editar o
   registro em si", com borda propria em vez de so um h3.sim-cell-sub
   solto entre o resto dos campos. */
.sim-subsection{border:1px solid var(--sim-line);border-radius:12px;padding:14px;margin:4px 0 22px;background:var(--sim-card)}
.sim-subsection-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sim-subsection-head h3{font-size:13.5px;margin:0;color:var(--sim-ink);font-weight:700}
/* Grade dos itens dentro de .sim-subsection (ex.: as credenciais) - cada
   item cabe confortavel em ~260px (badge+chip+guid+data+acao), entao a
   largura total do painel e desperdicada empilhando 1 por linha; auto-fill
   (nao auto-fit) garante que um item sozinho fique estreito na 1a coluna
   em vez de esticar pra 100% da largura. */
.sim-subsection-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
/* Item da grade (ex.: uma credencial) - cartao proprio pra caber
   badge+chip+guid+data+acao sem virar uma linha de texto corrida (era
   exatamente o problema: tipo/status/data concatenados numa unica string). */
.sim-subsection-item{
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  border:1px solid var(--sim-line);border-radius:11px;padding:12px 14px;background:var(--sim-canvas);
}
.sim-subsection-item-main{display:flex;flex-direction:column;gap:6px;min-width:0}
/* So o botao de Revogar alinha a direita dentro do cartao estreito - o
   bloco -main (badge/chip/guid/data) continua esticando full-width
   (align-items padrao da coluna e stretch). */
.sim-subsection-item > .sim-btn{align-self:flex-end}
.sim-subsection-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sim-subsection-item .sim-guid-copy{margin-top:0}

/* Rodape de acoes do formulario (Salvar/Voltar) - divisor + espaco proprio
   pra nunca ficar colado na acao anterior (era o outro problema: duas
   .sim-action-row uma embaixo da outra sem margem nenhuma). */
.sim-form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--sim-line)}
/* Agrupa o titulo com uma acao ao lado (ex.: "+" de criar novo) - fica do
   lado esquerdo do sim-h2-row, com o badge (se houver) empurrado para a
   direita pelo justify-content:space-between do pai. */
.sim-h2-title{display:flex;align-items:center;gap:8px}
/* Botao compacto so-icone (ex.: "+" ao lado do titulo de uma tabela, para
   criar um registro novo) - menor que .sim-btn, pensado para ficar colado
   no texto em vez de ocupar uma linha de acoes propria. */
.sim-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border:0;border-radius:8px;padding:0;
  background:var(--sim-accent);color:#fff;font-size:17px;font-weight:700;line-height:1;
  cursor:pointer;
}
.sim-icon-btn:hover{background:var(--sim-accent-ink)}
/* Ate agora todo uso real de .sim-icon-btn era o glifo de texto "+" -
   regra de svg faltava (primeiro uso: botao de instalar biblioteca
   privada/escolher arquivo, Provisionar Data Source). Mesmo tratamento
   fill:none+stroke:currentColor de .sim-rowbtn-icon/.sim-nav-ico. */
.sim-icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Botao de acao de linha de tabela (ex.: editar/duplicar/integrar) - so
   icone, discreto (bordered), diferente do .sim-icon-btn solido (que e
   para a acao primaria "+" de criar novo ao lado do titulo). */
.sim-rowbtn-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--sim-line);background:var(--sim-card);color:var(--sim-muted);border-radius:7px;cursor:pointer;margin-right:5px;padding:0}
/* fill:none+stroke:currentColor (mesmo tratamento de .sim-nav-ico/.sim-dialog-icon
   svg/.sim-toast-icon) faltava aqui e nos outros 3 seletores de icone desta
   consulta - sem isso os <use> desses simbolos caem no default do SVG
   (fill solido preto, sem stroke), rendendo formas solidas/estranhas em
   vez do traco fino do mockup. */
.sim-rowbtn-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-rowbtn-icon:hover{border-color:var(--sim-accent);color:var(--sim-accent-ink);background:var(--sim-accent-soft)}
.sim-rowbtn-icon.sim-disabled{opacity:.35;cursor:default;border-style:dashed}
.sim-rowbtn-icon.sim-disabled:hover{border-color:var(--sim-line);color:var(--sim-muted);background:var(--sim-card)}
/* Container das acoes de linha so-icone (Editar/Duplicar/Integrar) - flex
   simples, sem impor grade nenhuma. .action-form (grade generica 2 colunas
   min-180px, reaproveitada por route-actions/internal-client-actions para
   botoes de TEXTO) nao serve aqui: forcava cada icone de 28px numa celula
   min-180px, quebrando em mais de uma linha e deixando os icones espalhados. */
.sim-row-actions{display:flex;align-items:center}
/* Destaque lateral (charme visual) - ex.: painel de busca. */
.sim-panel.sim-panel-accent{border-left:3px solid var(--sim-accent)}

/* Caixa de busca (icone + input) - substitui estilo inline solto para
   poder estilizar :focus-within; sem isso o input mostra o contorno de
   foco padrao do navegador por cima da caixa (parece uma borda extra
   desalinhada, sem seguir o border-radius do container). */
.sim-search-box{display:flex;align-items:center;gap:8px;height:40px;min-width:0;border:1px solid var(--sim-line);border-radius:9px;background:var(--sim-card);padding:0 12px;transition:border-color .15s ease}
.sim-search-box:focus-within{border-color:var(--sim-accent)}
.sim-search-box input{outline:none}

.sim-filters{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr)) auto;gap:14px;align-items:end}

/* Card de consulta e filtros: grade de campos com posicoes definidas
   (rotulo sempre acima do campo, largura minima por campo, quebra de
   linha automatica) + acoes alinhadas a direita (limpar/buscar). Reaproveita
   .sim-field/.sim-btn - so acrescenta o layout de grade e o alinhamento
   das acoes. Use quando .sim-filters (3 campos + botao numa linha so) for
   estreito demais para a quantidade de filtros da tela. */
.sim-query-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.sim-query-grid .sim-field.sim-wide{grid-column:1/-1}
.sim-actions-end{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* Espacamento vertical padrao entre campos empilhados (Nome/Descricao/SQL/
   etc.) - faltava por completo antes disso (so .sim-auth-card .sim-field
   tinha margem propria, escopada so a tela de login), deixando qualquer
   formulario de campo unico (fora de .sim-form-grid/.sim-query-grid/
   .sim-grid3) com as linhas coladas umas nas outras. Dentro de uma grade,
   o proprio gap da grade ja cuida do espacamento entre linhas - zerar aqui
   evita dobrar esse espaco (e preserva o visual ja existente das telas que
   usam .sim-form-grid/.sim-query-grid hoje). */
/* Checkbox customizado (appearance:none + marca de visto desenhada em CSS
   puro, sem depender de icone/imagem) no lugar do checkbox nativo do
   sistema operacional - aplicado GLOBALMENTE (nao so num componente ou tela
   especifica) para qualquer checkbox futuro herdar isso automaticamente,
   em vez de cada tela precisar lembrar de estilizar o seu (era exatamente
   esse o problema antes: so .sim-auth-remember, no login, tinha esse
   tratamento - qualquer checkbox fora dali, como o de "Confirmar
   sobrescrita" do Importar ADC, caia no visual nativo do navegador, que
   destoava do tema escuro do resto da tela). */
/* Refeito 2026-08-07: o truque antigo (::after com border-trick "L"
   rotacionado 45deg virando visto) foi reportado 2x pelo usuario
   renderizando errado (virava um risco diagonal, caixa "achatada") em
   telas diferentes (Importar ADC, Papeis de Usuarios) - ::after/::before
   gerado dentro de um input (elemento substituido/com UI nativa) depende
   de blockificacao de item flex que nem todo motor de renderizacao aplica
   de forma confiavel. Trocado por um SVG desenhado direto como
   background-image no :checked - no dependencia nenhuma de pseudo-elemento
   em cima de um <input>, funciona identico em qualquer navegador/contexto. */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;min-width:16px;min-height:16px;margin:0;flex:none;cursor:pointer;
  border:1.5px solid var(--sim-line);border-radius:5px;background-color:var(--sim-card);
  background-repeat:no-repeat;background-position:center;background-size:10px 10px;
  display:inline-block;vertical-align:-3px;
  transition:background-color .15s ease,border-color .15s ease;
}
input[type=checkbox]:hover{border-color:var(--sim-accent)}
input[type=checkbox]:checked{
  background-color:var(--sim-accent);border-color:var(--sim-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

/* Switch (interruptor) - alternativa ao checkbox pra UM UNICO
   comportamento liga/desliga (ex.: "Ativar apos o teste"), fora de uma
   lista de selecao multipla. Convencao: manter o checkbox quadrado
   (input[type=checkbox] acima) em listas densas de selecao multipla
   (ex.: Escopos/Permissoes, .sim-param-list); trocar para .sim-switch
   especificamente em toggles individuais de comportamento (ex.: opcoes
   pos-provisionamento de um Data Source). Ver [[project_webadmin_migration]]. */
.sim-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.sim-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.sim-switch-track{position:relative;display:inline-block;width:38px;height:22px;border-radius:999px;background:var(--sim-line);flex:none;transition:background .15s ease}
.sim-switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s ease}
.sim-switch input:checked ~ .sim-switch-track{background:var(--sim-accent)}
.sim-switch input:checked ~ .sim-switch-track .sim-switch-thumb{transform:translateX(16px)}

/* Seletor de arquivo por icone - input[type=file] nativo fica escondido
   (mas ainda funcional/focavel, so.sim-file-pick input[type=file] abaixo),
   um .sim-icon-btn dispara .click() nele (JS generico em
   simplim-template.js, funciona em qualquer .sim-file-pick renderizado
   via innerHTML) e o nome do arquivo escolhido aparece ao lado - troca o
   "Escolher arquivo" cinza sem estilo nenhum do navegador. */
.sim-file-pick{display:flex;align-items:center;gap:10px;height:40px}
.sim-file-pick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.sim-file-pick-name{font-size:13px;color:var(--sim-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sim-field{margin-bottom:18px}
.sim-form-grid .sim-field,.sim-query-grid .sim-field,.sim-grid3 .sim-field{margin-bottom:0}
.sim-field label{display:block;font-size:12px;color:var(--sim-muted);margin-bottom:6px;font-weight:600}
.sim-field input:not([type=checkbox]),.sim-field select{
  width:100%;height:40px;border:1px solid var(--sim-line);border-radius:9px;padding:0 12px;font-size:13.5px;
  background-color:var(--sim-card);color:var(--sim-ink);
}
/* "select" tem regra propria (nao so a generica acima) pra seta customizada:
   Bootstrap ja desenha uma via ".form-select" (appearance:none +
   background-image), mas a regra generica de cima usa "background"
   (shorthand) - isso zera TODAS as sub-propriedades de fundo nao repetidas,
   inclusive a "background-image" da seta do Bootstrap, deixando o combo
   com cara de campo de texto comum, sem indicativo visual de dropdown. */
.sim-field select{
  padding-right:36px;
  background-image:var(--sim-select-arrow);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
}
.sim-field input[type=checkbox]{margin-right:6px}
.sim-field label:has(input[type=checkbox]){display:flex;align-items:center;font-size:13px;color:var(--sim-ink);font-weight:500;margin-bottom:0}
.sim-field textarea{width:100%;border:1px solid var(--sim-line);border-radius:9px;padding:11px 12px;background:var(--sim-card);color:var(--sim-ink);font-size:13.5px;resize:vertical}
.sim-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sim-label-row label{margin-bottom:0}

/* Campo de busca via popup de lookup (ex.: Material, Operador/Usuario) -
   input somente-leitura + botao de busca (lupa) dentro da MESMA caixa, em
   vez de <input> e <button class="sim-btn sim-ghost"> soltos lado a lado.
   O campo inteiro fica clicavel (cursor:pointer) porque nunca aceita
   digitacao direta - so abre o popup (ver GetBuscarEdit/GetBuscarButton em
   commons/D2Bridge/untD2CrudPadrao.pas, que tambem religa o OnClick do
   campo pro mesmo handler do botao). O icone (#sim-ico-search) e' injetado
   no botao via InjectButtonIcon (commons/D2Bridge/untD2Base.pas), chamado
   de TfrmD2CrudPadrao.RenderD2Bridge - aqui so o layout/cor da caixa.
   ".sim-field input:not([type=checkbox]){width:100%;...}" (mesmo arquivo,
   acima) e o ".row" do Bootstrap ("flex-wrap:wrap", D2Bridge sempre marca
   Row/Col tambem como ".row") ganhavam do reset abaixo mesmo com
   especificidade igual/maior aqui - !important nas propriedades de
   layout do input remove a ambiguidade de vez (mesma solucao ja usada em
   d2bridge-depara.css pro mesmo tipo de conflito D2Bridge/Bootstrap).
   flex-wrap:nowrap no proprio ".sim-lookup-field" evita o botao quebrar
   pra uma segunda linha quando o input tenta ficar largo demais. */
.sim-lookup-field{display:flex;flex-wrap:nowrap;align-items:stretch;height:40px;border:1px solid var(--sim-line);border-radius:9px;background:var(--sim-card);overflow:hidden;cursor:pointer;transition:border-color .15s ease}
.sim-lookup-field:hover,.sim-lookup-field:focus-within{border-color:var(--sim-accent)}
.sim-lookup-field input:not([type=checkbox]){flex:1 1 auto!important;min-width:0!important;width:auto!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;padding:0 12px!important;font-size:13.5px;color:var(--sim-ink);font-family:inherit;cursor:pointer;text-overflow:ellipsis}
.sim-lookup-field input:focus{outline:none}
/* A lupa e' desenhada so em CSS (mask-image + background:currentColor),
   NAO como <svg> injetado no HTML do botao (D2Bridge/Prism.Button.pas
   reconstroi o innerHTML do botao a partir de Caption/Enabled toda vez que
   uma dessas propriedades muda no servidor - ex.: ao abrir "Novo", que
   habilita o botao - e essa reconstrucao nao passa pelo RenderD2Bridge de
   novo, entao um <svg> injetado la sumia depois da primeira mudanca de
   Enabled, confirmado ao vivo via CDP). mask-image so depende da classe
   CSS, nunca do conteudo HTML do botao - sobrevive a qualquer numero de
   toggles de Enabled/Caption. background:currentColor faz a lupa
   acompanhar sozinha a cor do texto (branco habilitado, --sim-muted
   desabilitado, ver a regra :disabled abaixo). */
.sim-lookup-field-btn{flex:none;width:38px;height:100%;display:grid;place-items:center;border:0;padding:0;background:var(--sim-accent);color:#fff;cursor:pointer}
.sim-lookup-field-btn:hover{background:var(--sim-accent-ink)}
.sim-lookup-field-btn::before{
  content:'';display:block;width:15px;height:15px;background:currentColor;flex:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='9.5' r='5.5'/%3E%3Cline x1='13.7' y1='13.7' x2='20.5' y2='20.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='9.5' r='5.5'/%3E%3Cline x1='13.7' y1='13.7' x2='20.5' y2='20.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
.sim-lookup-field-btn:disabled,.sim-lookup-field-btn.disabled{background:var(--sim-line);color:var(--sim-muted);cursor:not-allowed}
.sim-lookup-field input:disabled{color:var(--sim-muted);cursor:not-allowed}
.sim-lookup-field:has(input:disabled){cursor:not-allowed}

/* Editor de SQL - fonte de largura fixa garantida (facilita ler
   indentacao) mesmo dentro de .sim-field; seletor composto com .sim-field
   textarea para nunca perder para a regra generica acima por
   especificidade, seja qual for a ordem no arquivo. */
.sim-sql-edit,.sim-field textarea.sim-sql-edit{font-family:Consolas,"SFMono-Regular",Menlo,Monaco,ui-monospace,monospace;font-size:13.5px;line-height:1.65;tab-size:2}
.sim-sql-edit-large{flex:1;min-height:400px}

/* Nota pequena com icone (ex.: explicando um comportamento automatico). */
.sim-inline-note{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sim-muted-2);margin-top:10px}
.sim-inline-note svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Botao pequeno texto+icone, ex.: "Expandir" ao lado de um label. */
.sim-mini-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--sim-line);border-radius:7px;background:var(--sim-card);color:var(--sim-muted);font-size:11.5px;font-weight:600;cursor:pointer}
.sim-mini-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-mini-btn:hover{border-color:var(--sim-accent);color:var(--sim-accent-ink)}

/* Popup modal generico (editor de SQL expandido, tela de integracao) -
   overflow:hidden aqui, so o .sim-modal-body rola, para cabecalho+botao
   fechar ficarem fixos e os cantos arredondados nunca serem cortados. */
.sim-modal-backdrop{position:fixed;inset:0;background:rgba(10,14,22,.55);display:flex;align-items:center;justify-content:center;z-index:500;padding:32px}
.sim-modal{background:var(--sim-card);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.sim-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px;flex:none}
.sim-modal-head h2{margin:0;font-size:16.5px;font-weight:700}
.sim-modal-body{flex:1;min-height:0;overflow-y:auto;padding:0 24px 22px}

/* Lista de parametros detectados automaticamente do SQL de uma consulta -
   4 por linha (pedido explicito); cada cartao empilha nome/tipo/obrigatorio
   verticalmente (nao caberia lado a lado numa celula de 1/4 da largura).
   auto-fill (nao auto-fit) + minmax: quebra para 3/2/1 coluna sozinho
   conforme a largura da pagina diminui, MAS as colunas vazias continuam
   reservando espaco em vez de serem colapsadas - com auto-fit, tendo so
   1-3 parametros os cartoes esticavam para ocupar a linha toda; com
   auto-fill eles ficam do tamanho de uma entre 4 colunas mesmo sozinhos,
   so sobra espaco em branco no final da linha. */
.sim-param-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:8px}
.sim-param-row{display:flex;flex-direction:column;gap:7px;background:var(--sim-canvas);border:1px solid var(--sim-line);border-radius:9px;padding:9px 10px}
.sim-param-row .sim-param-name{font-family:Consolas,monospace;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-param-row .sim-param-name .sim-dot{width:6px;height:6px;border-radius:50%;background:var(--sim-accent);flex:none}
.sim-param-row select{height:32px;width:100%;border:1px solid var(--sim-line);border-radius:7px;background:var(--sim-card);color:var(--sim-ink);font-size:12.5px;padding:0 8px}
.sim-param-row label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sim-muted)}
.sim-param-empty{font-size:12.5px;color:var(--sim-muted-2);padding:14px;text-align:center;border:1px dashed var(--sim-line);border-radius:9px;margin-top:8px;grid-column:1/-1}

/* Parametro compartilhado da base virtual (name/tipo/valor editaveis, uso
   em {{:NOME}} nas consultas) - linha nome+tipo+valor+remover, diferente
   da lista de parametros detectados (que e so leitura de tipo/
   obrigatorio). Tipo agora faz parte do cadastro (faltava - sem ele nao
   havia como saber o formato esperado ao referenciar {{:NOME}} no SQL). */
.sim-route-param-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sim-route-param-row input{flex:1;height:38px;border:1px solid var(--sim-line);border-radius:8px;padding:0 11px;font-size:13px;background:var(--sim-card);color:var(--sim-ink)}
.sim-route-param-row input:first-child{font-family:Consolas,monospace}
.sim-route-param-row select{flex:0 0 140px;height:38px;border:1px solid var(--sim-line);border-radius:8px;padding:0 10px;font-size:12.5px;background:var(--sim-card);color:var(--sim-ink)}

/* Bloco de codigo (JSON de exemplo na tela de integracao) com botao de
   copiar no canto. */
.sim-code-block-wrap{position:relative;margin:8px 0 16px}
.sim-code-block{margin:0;background:var(--sim-canvas);border:1px solid var(--sim-line);border-radius:9px;padding:14px 16px;font-family:Consolas,monospace;font-size:12.5px;line-height:1.6;overflow-x:auto;white-space:pre}
.sim-copy-block-btn{position:absolute;top:8px;right:8px;height:26px;padding:0 10px;border:1px solid var(--sim-line);border-radius:7px;background:var(--sim-card);color:var(--sim-muted);font-size:11px;font-weight:600;cursor:pointer}
.sim-copy-block-btn:hover{border-color:var(--sim-accent);color:var(--sim-accent-ink)}
.sim-copy-block-btn.sim-copied{border-color:var(--sim-ok);color:var(--sim-ok-ink)}
.sim-endpoint-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sim-muted);margin:-4px 0 16px}
.sim-endpoint-line .sim-method{font-family:Consolas,monospace;font-size:11px;font-weight:700;background:var(--sim-ok-soft);color:var(--sim-ok-ink);padding:2px 7px;border-radius:5px}

/* GUID clicavel para copiar - linha propria abaixo do codigo/descricao
   numa celula de tabela (ex.: coluna "Consulta"). */
.sim-guid-copy{display:flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin-top:4px;font-family:Consolas,monospace;font-size:10.5px;color:var(--sim-muted-2);cursor:pointer;text-align:left;white-space:nowrap}
.sim-guid-copy svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-guid-copy:hover{color:var(--sim-accent-ink)}
.sim-guid-copy.sim-copied{color:var(--sim-ok-ink)}

.sim-btn{
  height:40px;border:0;border-radius:9px;background:var(--sim-accent);color:#fff;font-weight:700;padding:0 20px;
  font-size:13.5px;cursor:pointer;
}
.sim-btn:hover{background:var(--sim-accent-ink)}
.sim-btn.sim-ghost{background:var(--sim-card);color:var(--sim-ink);border:1px solid var(--sim-line)}
.sim-btn.sim-danger{background:var(--sim-crit)}
.sim-btn.sim-danger:hover{background:var(--sim-crit-ink)}
/* Variante ghost pra acao destrutiva que aparece REPETIDA por item numa
   lista (ex.: "Revogar" por credencial) - sim-danger (solido) e reservado
   pra acao rara e unica (ex.: "Reiniciar servico"); aqui o peso teria que
   ser mais discreto, mas ainda assim distinto do ghost neutro. */
.sim-btn.sim-ghost.sim-crit-tone{color:var(--sim-crit-ink);border-color:var(--sim-crit-soft)}
.sim-btn.sim-ghost.sim-crit-tone:hover{background:var(--sim-crit-soft)}
/* Variante menor de .sim-btn pra acao secundaria dentro do cabecalho de
   uma secao (ex.: "Gerar token" acima da lista de credenciais) - nao
   compete em tamanho com Salvar/o botao principal da tela. */
.sim-btn.sim-btn-sm{height:32px;padding:0 14px;font-size:12.5px}
/* Modificador pra .sim-btn com icone+texto (ex.: "Gerar token", "Revogar")
   - escopado, nao mexe no .sim-btn base pra nao afetar os botoes so-texto
   ja existentes no resto do app. */
.sim-btn.sim-btn-icon{display:inline-flex;align-items:center;gap:7px}
.sim-btn.sim-btn-icon svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Ex.: "Testar consulta" desabilitado enquanto o formulario tem alteracoes
   nao salvas (a execucao sempre le a versao gravada no banco, nunca a
   textarea) - precisa de um estado visual claro, senao passa despercebido
   com so o cursor padrao do navegador pra "disabled". */
.sim-btn:disabled{background:var(--sim-line);color:var(--sim-muted);cursor:not-allowed}
.sim-btn:disabled:hover{background:var(--sim-line)}
.sim-action-row{display:flex;flex-wrap:wrap;gap:10px}

/* Bootstrap (bootstrap.min.css, carregado ANTES deste arquivo) define
   ".modal-backdrop{background-color:#000}" - preto absoluto por baixo de
   QUALQUER popup real (".modal"/".d2bridgepopup", ver commons/D2Bridge/
   untD2Base.pas) fica duro/frio, sem relacao com o resto da paleta navy
   deste tema. Mesmo tom (e mesma opacidade final, .5 x .48 ~= .48) ja
   usado pelos overlays proprios do tema (.sim-dialog-overlay abaixo,
   .sim-modal-backdrop) - troca so a COR de fundo, a logica de show/hide
   e opacidade do proprio Bootstrap continua intacta.
   */
.modal-backdrop{background-color:#0f172a!important}

/* Grade de modulos - grid de icone+rotulo clicavel para escolher um
   sub-item dentro de um modulo (ex.: Cadastros > Clientes/Fornecedores/...).
   Promovido do mockup de navegacao aprovado (sidebar/shell, 2026-08) - usa
   so tokens --sim-* ja existentes (accent-soft/accent-ink/card/line),
   nenhuma cor nova. Mesma tecnica de sombra tingida na cor de acento ja
   usada em .sim-kpi (ver secao "cartoes de indicador" acima). Rotulo usa
   classe propria (.sim-modcard-label), nao seletor de tag - TLabel do
   D2Bridge sempre renderiza como <span> (ver .sim-field-label no de-para),
   e este componente pode ser consumido de qualquer stack, nao so D2Bridge. */
.sim-modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.sim-modcard{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:var(--sim-card);border:1px solid var(--sim-line);border-radius:14px;padding:20px 12px;
  cursor:pointer;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.sim-modcard:hover{border-color:var(--sim-accent);box-shadow:var(--sim-shadow-neutral);transform:translateY(-1px)}
/* O card real e' um <button class="btn btn-primary sim-modcard"> (D2Bridge
   renderiza TButton assim por padrao) - sem isso, o proprio Bootstrap
   pinta um azul solido fixo (".btn-primary:hover/:focus/:active") por
   cima no hover/foco, destoando de qualquer cor de marca escolhida e
   deixando o rotulo (cor pensada pro fundo claro do card) ilegivel.
   Confirmado ao vivo, 2026-08-26. */
.sim-modcard:hover,
.sim-modcard:focus,
.sim-modcard:focus-visible,
.sim-modcard:active {
  background: var(--sim-card) !important;
  color: inherit !important;
  border-color: var(--sim-accent) !important;
  box-shadow: var(--sim-shadow-neutral) !important;
}
.sim-modicon{
  width:44px;height:44px;border-radius:12px;background:var(--sim-accent-soft);color:var(--sim-accent-ink);
  display:grid;place-items:center;flex:none;
}
.sim-modicon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sim-modcard-label{font-size:12.8px;font-weight:600;color:var(--sim-ink);line-height:1.3}

/* ---------- dialogos (confirmacao / destrutivo / formulario em popup) ---------- */
.sim-dialog-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.48);display:none;align-items:center;justify-content:center;
  padding:24px;z-index:200;
}
.sim-dialog-overlay.sim-open{display:flex}
.sim-dialog-box{
  width:min(420px,100%);background:var(--sim-card);border-radius:14px;padding:22px;
  box-shadow:0 30px 74px rgba(0,0,0,.35);border:1px solid var(--sim-line);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
/* Borda lateral colorida seguindo o tipo da mensagem — so nos dialogos de
   confirmacao/alerta (data-sim-variant); o popup de cadastro (.sim-wide) nao
   carrega essa marcacao porque nao e uma mensagem de status. */
.sim-dialog-box[data-sim-variant]{border-left:4px solid var(--sim-tone,var(--sim-accent))}
.sim-dialog-box[data-sim-variant="confirm"]{--sim-tone:var(--sim-accent)}
.sim-dialog-box[data-sim-variant="danger"]{--sim-tone:var(--sim-crit)}
/* "warning"/"success" - mesmo espirito de "confirm"/"danger" acima, so
   completando as 4 cores que ".sim-toast[data-sim-tone]" ja tem (ok/crit/
   warn), pra um dialogo de atencao/aviso poder ter cor propria (amarelo)
   em vez de cair no azul generico de "confirm". Aditivo: nao muda o
   comportamento de quem ja usa "confirm"/"danger" hoje. */
.sim-dialog-box[data-sim-variant="warning"]{--sim-tone:var(--sim-warn)}
.sim-dialog-box[data-sim-variant="success"]{--sim-tone:var(--sim-ok)}
.sim-dialog-box.sim-wide{width:min(560px,100%);padding-top:0;overflow:hidden}
/* Popup "Testar consulta" do grid de Consultas (Central): geralmente tem
   varias colunas/linhas de resultado, e o .sim-wide padrao (560px, sem teto
   de altura) tanto ficava estreito quanto estourava a altura da tela com
   tabelas grandes. .sim-xwide alarga o popup e trava a altura em 80vh.
   A rolagem fica so na propria grade de dados (.sim-tablewrap) - o resumo
   "Linhas/Tempo" e o botao "Copiar dados" continuam sempre visiveis, sem
   precisar rolar a tela pra achar eles. */
.sim-dialog-box.sim-xwide{width:min(920px,96vw);max-height:80vh;display:flex;flex-direction:column}
.sim-dialog-box.sim-xwide #query-grid-test-output{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.sim-dialog-box.sim-xwide #query-grid-test-output .sim-tablewrap{flex:1 1 auto;overflow-y:auto;min-height:0}
/* Menu popup do botao "Copiar dados" (JSON/Texto/Tabela) - mesmo espirito
   visual de .sim-dialog-box. position:fixed (nao absolute) com left/top
   calculados via JS a partir do botao (mesma licao do tooltip .sim-tip
   acima): #query-grid-test-output precisa de overflow:hidden pra travar a
   rolagem na propria grade (.sim-tablewrap), e um menu position:absolute
   dentro dele seria cortado por esse overflow ao abrir pra baixo do botao,
   que fica perto da borda inferior do popup. */
.sim-menu-wrap{display:inline-block}
.sim-menu{
  position:fixed;min-width:180px;background:var(--sim-card);
  border:1px solid var(--sim-line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.22);
  padding:6px;z-index:210;display:flex;flex-direction:column;gap:2px;
}
.sim-menu[hidden]{display:none}
.sim-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 10px;border-radius:7px;font-size:13px;color:var(--sim-ink);font-family:inherit;
}
.sim-menu button:hover,.sim-menu button:focus-visible{background:var(--sim-accent-soft);color:var(--sim-accent-ink)}
.sim-dialog-box header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
/* Cabecalho do popup de cadastro: fundo igual ao do menu lateral (--sim-navy) */
.sim-dialog-box.sim-wide header{
  margin:0 -22px 20px;padding:18px 22px;background:var(--sim-navy);border-radius:13px 13px 0 0;
}
.sim-dialog-box.sim-wide header h3{color:#fff}
.sim-dialog-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.sim-dialog-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-dialog-icon.sim-info{background:var(--sim-accent-soft);color:var(--sim-accent-ink)}
.sim-dialog-icon.sim-crit{background:var(--sim-crit-soft);color:var(--sim-crit-ink)}
.sim-dialog-icon.sim-warn{background:var(--sim-warn-soft);color:var(--sim-warn)}
.sim-dialog-icon.sim-ok{background:var(--sim-ok-soft);color:var(--sim-ok-ink)}
.sim-dialog-box h3{margin:0;font-size:17px;font-weight:700}
.sim-dialog-box p{margin:0 0 20px;color:var(--sim-muted);font-size:13.5px;line-height:1.55}
.sim-dialog-box p b{color:var(--sim-ink)}
.sim-dialog-actions{display:flex;justify-content:flex-end;gap:10px}

/* Popup generico de mensagem/reautenticacao do Central Admin (#message-modal)
   - visualmente no mesmo padrao de .sim-dialog-overlay/.sim-dialog-box, mas
   com nome proprio de proposito: aquele componente ja tem um sistema de
   abrir/fechar proprio em simplim-template.js (clique fora, Esc,
   [data-sim-close]) que fecharia este popup por fora do fluxo de
   reautenticacao (Promise pendente nunca resolvida/rejeitada). Este aqui
   continua controlado so pelo atributo "hidden" (ver CentralAdminJs). */
.sim-msgmodal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.48);display:flex;align-items:center;justify-content:center;padding:24px;z-index:600}
.sim-msgmodal-overlay[hidden]{display:none}
.sim-msgmodal-box{width:min(420px,100%);background:var(--sim-card);border-radius:14px;padding:22px;box-shadow:0 30px 74px rgba(0,0,0,.35);border:1px solid var(--sim-line);border-left:4px solid var(--sim-accent);font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
.sim-msgmodal-box h2{margin:0 0 10px;font-size:17px;font-weight:700;color:var(--sim-ink)}
.sim-msgmodal-box p{margin:0 0 16px;color:var(--sim-muted);font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.sim-msgmodal-password{width:100%;height:40px;border:1px solid var(--sim-line);border-radius:9px;padding:0 12px;font-size:13.5px;background:var(--sim-card);color:var(--sim-ink);margin-bottom:16px}
.sim-msgmodal-actions{display:flex;justify-content:flex-end;gap:10px}

/* Tooltip customizado (ver simplim-template.js) - troque title="..." por
   data-tip="..." em qualquer elemento pra usar. position:fixed (calculado
   via JS a cada hover/foco), nunca clipado por overflow:hidden de nenhum
   container ancestral - diferente de um ::after posicionado absolute. */
.sim-tip{
  position:fixed;z-index:900;background:var(--sim-navy);color:#fff;font-size:11.5px;font-weight:600;
  padding:6px 10px;border-radius:7px;max-width:260px;white-space:pre-line;line-height:1.4;
  box-shadow:0 10px 24px rgba(0,0,0,.3);pointer-events:none;
  /* Mesmo problema ja corrigido em .sim-dialog-box/.sim-msgmodal-box: este
     elemento e anexado direto no <body> (fora de .sim-app/.sim-auth-wrapper,
     os 2 unicos seletores com font-family:"Segoe UI" no topo do arquivo),
     entao sem isso aqui caia na fonte padrao (serif) do navegador. */
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
.sim-tip[hidden]{display:none}

.sim-form-grid{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.sim-form-grid .sim-field.sim-wide{grid-column:1/-1}

/* Grade de campos curtos (codigo/nome/base virtual, timeout/limite de
   linhas/tamanho maximo/cache, valores de teste dos parametros do
   cadastro de consultas) - auto-fill+minmax encaixa 4 por linha numa
   largura normal de painel e quebra sozinho para 3/2/1 quando a pagina
   fica mais estreita. auto-fill (nao auto-fit): quando tem menos de 4
   campos (ex.: so 1-2 parametros no teste), eles ficam do tamanho de uma
   entre 4 colunas em vez de esticar para ocupar a linha toda. */
.sim-grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:20px}

/* Largura de campo por tipo de dado (.sim-field-row + tier) - alternativa
   a .sim-grid3 para formularios de cadastro em que os campos tem tamanhos
   de conteudo bem diferentes entre si (ex.: "UF" vs "Descricao", ou
   "Porta" vs "Banco/alias" que na pratica e um caminho de arquivo longo).
   .sim-grid3 continua valido (grade N-colunas iguais) quando os campos sao
   mesmo parecidos em tamanho - nao e obrigatorio migrar uma tela existente
   so por existir esta alternativa. Cada .sim-field dentro de
   .sim-field-row pode declarar uma classe de tier (xs/sm/md/lg/xl); sem
   nenhuma, o campo se comporta como .sim-grid3 hoje (flex:1 1 200px),
   entao nada quebra numa tela ainda nao revisada. Calibrado em "ch"
   (unidade de caractere) pra acompanhar o tipo/tamanho da coluna no banco
   - ver TemplateWeb.md, secao "Paineis, formularios e botoes de acao",
   pra tabela de referencia e exemplos. Ver [[project_webadmin_migration]]
   pro caso de uso real (Provisionar Data Source). */
.sim-field-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.sim-field-row .sim-field{margin-bottom:0;flex:1 1 200px}
.sim-field-row .sim-field-xs{flex:0 0 auto}
.sim-field-row .sim-field-xs input:not([type=checkbox]),.sim-field-row .sim-field-xs select{width:7ch;min-width:64px}
.sim-field-row .sim-field-sm{flex:0 0 auto}
.sim-field-row .sim-field-sm input:not([type=checkbox]),.sim-field-row .sim-field-sm select{width:13ch;min-width:104px}
.sim-field-row .sim-field-md{flex:0 1 auto}
.sim-field-row .sim-field-md input:not([type=checkbox]),.sim-field-row .sim-field-md select{width:23ch;min-width:172px}
.sim-field-row .sim-field-lg{flex:1 1 260px;max-width:360px}
.sim-field-row .sim-field-lg input:not([type=checkbox]),.sim-field-row .sim-field-lg select{width:100%}
.sim-field-row .sim-field-xl{flex:1 1 100%}
.sim-field-row .sim-field-xl input:not([type=checkbox]),.sim-field-row .sim-field-xl select{width:100%}
/* input[type=number] tem as setas de incremento/decremento desenhadas
   pelo proprio navegador dentro da caixa do campo - nos tiers estreitos
   isso espreme o ultimo digito contra o padding direito (reportado no
   campo "Porta": o ultimo "0" ficava ilegivel atras da seta). +3ch por
   tier so pra number; texto comum no mesmo tier fica como estava. */
.sim-field-row .sim-field-xs input[type=number]{width:10ch;min-width:80px}
.sim-field-row .sim-field-sm input[type=number]{width:16ch;min-width:124px}
.sim-field-row .sim-field-md input[type=number]{width:26ch;min-width:192px}
/* input[type=date]/[type=datetime-local] tambem desenham cromo proprio do
   navegador dentro da caixa (icone de calendario, maior que as setas do
   number acima) - no tier "sm" (padrao pra "Data") isso cortava ate o ano
   do valor exibido. Mesma logica do number: so os tiers onde esse tipo
   realmente aparece hoje (sm="Data", md="Data e hora") ganham largura
   extra; texto comum no mesmo tier fica como estava. */
.sim-field-row .sim-field-sm input[type=date]{width:18ch;min-width:140px}
.sim-field-row .sim-field-md input[type="datetime-local"]{width:28ch;min-width:210px}
/* O icone nativo de calendario (chrome do proprio Chromium/Edge, nao um
   SVG nosso - por isso so da pra ajustar via este pseudo-elemento
   webkit-only, sem equivalente cross-browser) vem solido/preto por padrao
   e destoa do resto dos icones da tela (traco fino, cor --sim-muted).
   Reduz a opacidade pra ficar mais leve, alinhado ao peso visual dos
   demais icones - nao da pra recolorir/redesenhar o glyph em si. */
.sim-field-row input[type=date]::-webkit-calendar-picker-indicator,
.sim-field-row input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;
}
.sim-field-row input[type=date]::-webkit-calendar-picker-indicator:hover,
.sim-field-row input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{opacity:.85}

/* ---------- notificacoes toast (canto superior direito, fecham sozinhas) ---------- */
.sim-toast-stack{
  position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:300;
  width:min(340px,90vw);
}
.sim-toast{
  background:var(--sim-card);border:1px solid var(--sim-line);border-left:4px solid var(--sim-tone,var(--sim-accent));
  border-radius:10px;padding:12px 14px;box-shadow:0 18px 40px rgba(0,0,0,.2);position:relative;overflow:hidden;
  display:flex;gap:10px;align-items:flex-start;
}
.sim-toast.sim-leaving{opacity:0;transform:translateX(10px);transition:opacity .18s ease,transform .18s ease}
.sim-toast[data-sim-tone="ok"]{--sim-tone:var(--sim-ok)}
.sim-toast[data-sim-tone="crit"]{--sim-tone:var(--sim-crit)}
.sim-toast[data-sim-tone="warn"]{--sim-tone:var(--sim-warn)}
.sim-toast-icon{width:19px;height:19px;flex:none;margin-top:1px;color:var(--sim-tone,var(--sim-accent));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-toast-body{flex:1;min-width:0}
.sim-toast-body b{display:block;font-size:13.5px;margin-bottom:2px}
.sim-toast-body span{font-size:12.3px;color:var(--sim-muted);line-height:1.4}
.sim-toast-close{border:0;background:none;color:var(--sim-muted-2);cursor:pointer;font-size:13px;padding:2px;flex:none;line-height:1}
.sim-toast-close:hover{color:var(--sim-ink)}
.sim-toast-bar{
  position:absolute;left:0;bottom:0;height:3px;background:var(--sim-tone,var(--sim-accent));width:100%;
  animation:sim-toast-shrink 5s linear forwards;
}
/* O mouse em cima PAUSA a animacao (e portanto o fechamento) — a duracao
   vive so aqui no CSS; nunca defina "animation" via JS inline, isso reseta
   o play-state e quebra a pausa no hover (ver TemplateWeb.md). */
.sim-toast:hover .sim-toast-bar{animation-play-state:paused}
/* Spinner pequeno de "carregando" (ex.: testando consulta no agente) -
   ao lado de um texto, nunca sozinho. */
.sim-spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--sim-line);border-top-color:var(--sim-accent);animation:sim-spin .7s linear infinite;display:inline-block;margin-right:6px;vertical-align:-2px}
@keyframes sim-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sim-spin{animation-duration:2.4s}}

@keyframes sim-toast-shrink{from{width:100%}to{width:0%}}
@keyframes sim-toast-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  90%{transform:translateX(1px)}
}
@media (prefers-reduced-motion:no-preference){
  .sim-toast.sim-enter{animation:sim-toast-shake .5s ease}
}

/* ---------- cartoes de indicador (KPI): orelha superior colorida + sombra tingida ---------- */
.sim-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.sim-kpi-row.sim-cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.sim-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.sim-kpi-row.sim-cols-3{grid-template-columns:1fr}}
.sim-kpi{
  background:var(--sim-card);border-radius:16px;padding:16px 18px;border-top:3px solid var(--sim-tone,var(--sim-accent));
  box-shadow:0 12px 26px var(--sim-tone-shadow, rgba(3,120,174,.11));
}
.sim-kpi[data-sim-tone="crit"]{--sim-tone:var(--sim-crit);--sim-tone-shadow:rgba(208,59,59,.11)}
.sim-kpi[data-sim-tone="ok"]{--sim-tone:var(--sim-ok);--sim-tone-shadow:rgba(12,163,12,.10)}
.sim-kpi[data-sim-tone="violet"]{--sim-tone:var(--sim-violet);--sim-tone-shadow:rgba(109,40,217,.10)}
.sim-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--sim-muted);font-weight:700;margin-bottom:10px}
.sim-kpi-value{font-size:24px;font-weight:800;letter-spacing:-.01em}
.sim-kpi-value.sim-crit{color:var(--sim-crit-ink)}
.sim-kpi-sub{font-size:12px;color:var(--sim-muted-2);margin-top:6px}

/* Placeholder animado de um .sim-kpi enquanto os dados reais nao chegaram
   (ex.: Visao Geral do Central logo ao abrir) - mesmo tamanho/formato do
   card real (so sem border-top colorido, que depende do dado), pra nao
   haver salto de layout quando o conteudo de verdade substituir isto. */
.sim-kpi-skeleton{border-top-color:var(--sim-line)}
/* Faixa (nao opacidade) - as 2 pontas do degrade usam a MESMA cor de base
   (rgba a partir de --sim-muted) em alfas bem diferentes (.10 vs .26), pra
   garantir contraste real entre elas; a versao anterior (opacidade de
   --sim-line-soft, ja quase branco, contra --sim-card branco) nao tinha
   diferenca visivel o bastante pra notar o pulso. animation-delay negativo
   comeca a faixa ja "correndo" em vez do frame inicial parado.  */
.sim-skel{
  background:linear-gradient(100deg, rgba(100,114,137,.10) 30%, rgba(100,114,137,.26) 50%, rgba(100,114,137,.10) 70%);
  background-size:220% 100%;border-radius:6px;
  animation:sim-skel-shimmer 1.6s ease-in-out infinite;animation-delay:-.8s;
}
.sim-skel-label{width:65%;height:11px;margin-bottom:12px}
.sim-skel-value{width:45%;height:24px;margin-bottom:8px}
.sim-skel-sub{width:80%;height:11px}
@keyframes sim-skel-shimmer{0%{background-position:200% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.sim-skel{animation:none;background:rgba(100,114,137,.16)}}

/* Loader NATIVO do D2Bridge (framework, nao commons - injetado em runtime
   por Prism/support/assets/js/d2bridgeloader.js, classes ".d2bridge-loader-*"
   fixas do vendor) - vem com 3 bolinhas em vermelho/roxo/amarelo (#FA5667/
   #7A45E5/#FAC24C), sem nenhum token --sim-*, destoando de qualquer marca.
   "Pulso Simplim" (opcao aprovada, ver mockup) - mesma mecanica de bolinha
   saltando, so recolorida pra --sim-accent em 3 opacidades/tamanhos
   decrescentes (sugere profundidade em vez de 3 cores arbitrarias), caixa
   no estilo cartao do TemplateWeb (--sim-card/--sim-line) em vez de branco
   fixo com borda "groove" - assim funciona em tema escuro tambem, sem
   nenhum ajuste extra.
   !important em tudo de proposito: o <style> do loader e' injetado via
   "document.head.appendChild" DEPOIS do <link> deste arquivo (carrega em
   $(document).ready, nao no <head> estatico) - em empate de especificidade
   ele venceria por ordem de insercao no CSSOM; !important remove essa
   dependencia de timing. Mesma cor de fundo do dim (rgba preta fixa, nao
   var(--sim-*)) nos dois temas de proposito - e' so uma camada de
   escurecimento por cima do que ja estiver na tela, nao uma superficie
   propria que precise seguir o tema (mesmo raciocinio do overlay de sessao
   expirada, ver GetSessionExpiredWatchdogJs). O <p> do texto some da
   estrutura original com o texto ANTES das bolinhas no DOM - "order" (flex)
   inverte a ordem visual sem precisar tocar no HTML gerado pelo framework. */
#d2bridge-loader{background-color:rgba(15,23,42,.35)!important}
.d2bridge-loader-wrapp{
  background-color:var(--sim-card)!important;
  border:1px solid var(--sim-line)!important;
  border-radius:14px!important;
  box-shadow:0 18px 40px rgba(0,0,0,.22)!important;
}
.d2bridge-loader-item{
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
  align-items:center!important;gap:12px 7px!important;
}
.d2bridge-loader-text{
  color:var(--sim-muted)!important;font-size:12.5px!important;font-weight:600!important;
  margin:0!important;order:2;flex-basis:100%;
}
.d2bridge-loader-ball-box{background-color:var(--sim-accent)!important}
.d2bridge-loader-ball-box.ball-1{opacity:1;width:9px!important;height:9px!important}
.d2bridge-loader-ball-box.ball-2{opacity:.7;width:8px!important;height:8px!important}
.d2bridge-loader-ball-box.ball-3{opacity:.45;width:7px!important;height:7px!important}

/* Comparativos empilhados dentro do KPI (N bases de comparação, ex.: mesmo
   mês ano anterior / mês anterior / média 12 meses). A cor de cada linha
   (sim-alta/sim-baixa/sim-neutro) é decidida por quem consome - ver
   TemplateWeb.md sobre a inversão de tom para métricas de custo. */
.sim-kpi-comparativos{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.sim-kpi-comparativo{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.sim-kpi-comparativo .sim-alta{color:var(--sim-ok)}
.sim-kpi-comparativo .sim-baixa{color:var(--sim-crit)}
.sim-kpi-comparativo .sim-neutro{color:var(--sim-muted)}
.sim-kpi-comparativo-rotulo{color:var(--sim-muted)}
.sim-kpi-value-nota{font-size:12px;font-weight:400;color:var(--sim-muted)}

/* Variante "atenção" do badge (ex.: certificado vencendo em breve) -
   faltava ao lado de sim-crit/sim-ok/sim-accent/sim-muted, mesmo o par de
   tokens --sim-warn/--sim-warn-soft ja existindo (usado ate aqui so por
   sim-toast/sim-rowchip). */
.sim-badge.sim-warn{background:var(--sim-warn-soft);color:var(--sim-warn)}

/* ---------- grade de cartoes de status (ex.: listeners) - 2 colunas, orelha
   superior colorida por tom (mesmo mecanismo de --sim-tone do sim-kpi), com
   um valor em destaque (endereco/porta) e linhas de kv com separador. ---------- */
.sim-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:760px){.sim-status-grid{grid-template-columns:1fr}}
.sim-status-card{
  background:var(--sim-card);border:1px solid var(--sim-line);border-radius:12px;padding:15px 16px;
  border-top:3px solid var(--sim-tone,var(--sim-line));min-width:0;
}
.sim-status-card[data-sim-tone="ok"]{--sim-tone:var(--sim-ok)}
.sim-status-card[data-sim-tone="warn"]{--sim-tone:var(--sim-warn)}
.sim-status-card[data-sim-tone="crit"]{--sim-tone:var(--sim-crit)}
.sim-status-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.sim-status-card-head b{font-size:13.5px}
.sim-status-card-highlight{font-family:Consolas,"SFMono-Regular",Menlo,Monaco,ui-monospace,monospace;font-size:15px;font-weight:700;margin-bottom:10px;word-break:break-all}
.sim-status-card-kv{display:flex;justify-content:space-between;gap:10px;font-size:11.8px;color:var(--sim-muted);padding:6px 0;border-top:1px solid var(--sim-line-soft)}
.sim-status-card-kv b{color:var(--sim-ink);font-weight:600}
.sim-status-card-kv input[type=number]{width:110px;height:30px;border:1px solid var(--sim-line);border-radius:6px;padding:0 8px;font-size:12px;background:var(--sim-card);color:var(--sim-ink);text-align:right}

/* ---------- linha-resumo colapsavel (ex.: certificados) - clique no resumo
   expande/recolhe o detalhe (formulario completo), reduzindo o que a tela
   mostra de cara quando ha varios itens do mesmo tipo. ---------- */
.sim-collapse-row{border:1px solid var(--sim-line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.sim-collapse-summary{display:flex;align-items:center;gap:16px;padding:14px 16px;cursor:pointer;background:var(--sim-card)}
.sim-collapse-summary:hover{background:var(--sim-line-soft)}
.sim-collapse-name{font-weight:700;font-size:13.5px;min-width:150px;flex:none}
.sim-collapse-meta{flex:1;display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:var(--sim-muted)}
.sim-collapse-meta b{color:var(--sim-ink);font-weight:600}
.sim-collapse-toggle{border:0;background:none;color:var(--sim-accent-ink);font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;flex:none;pointer-events:none}
.sim-collapse-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.sim-collapse-row.sim-open .sim-collapse-toggle svg{transform:rotate(180deg)}
.sim-collapse-body{display:none;padding:16px;border-top:1px solid var(--sim-line);background:var(--sim-canvas)}
.sim-collapse-row.sim-open .sim-collapse-body{display:block}

/* Gráfico Simplim: lista de barras horizontais. Uso simples (rótulo+barra+
   valor numa linha só) ou rico (cabeçalho com contagem + 2 valores + barra
   embaixo, sem rótulo/valor inline) - ver TemplateWeb.md pros dois exemplos
   de marcação HTML. */
.sim-chart-barras{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.sim-chart-item + .sim-chart-item{border-top:1px solid var(--sim-line);padding-top:12px}
.sim-chart-cabecalho{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sim-chart-titulo{font-size:13px;font-weight:700;color:var(--sim-ink)}
.sim-chart-contagem{font-size:11px;color:var(--sim-muted)}
.sim-chart-subvalores{display:flex;justify-content:space-between;font-size:12px;color:var(--sim-muted);margin-bottom:6px}
.sim-chart-subvalores b{color:var(--sim-ink);font-weight:700}
.sim-chart-linha{display:flex;align-items:center;gap:12px;font-size:13px}
.sim-chart-rotulo{width:170px;flex:none;color:var(--sim-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-chart-trilha{flex:1;height:10px;border-radius:6px;background:var(--sim-line-soft);overflow:hidden;display:block}
.sim-chart-preenchimento{display:block;height:100%;border-radius:6px;background:var(--sim-accent)}
.sim-chart-valor{width:36px;flex:none;text-align:right;font-weight:700;color:var(--sim-ink)}

.sim-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
}
.sim-badge.sim-crit{background:var(--sim-crit-soft);color:var(--sim-crit-ink)}
.sim-badge.sim-ok{background:var(--sim-ok-soft);color:var(--sim-ok-ink)}
/* Variante neutra/informativa (ex.: contador "N no total" ao lado de um
   titulo de tabela) - nem "critico" nem "sucesso", so uma contagem. */
.sim-badge.sim-accent{background:var(--sim-accent-soft);color:var(--sim-accent-ink)}
/* Variante neutra "sem estado" (ex.: nunca conectado) - distinta de
   sim-accent, que e para contagens/informativos, nao para ausencia de estado. */
.sim-badge.sim-muted{background:var(--sim-line-soft);color:var(--sim-muted-2)}
.sim-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Segunda linha secundaria dentro de uma celula de tabela (ex.: nome
   abaixo do codigo) - forca quebra de linha mesmo em elementos inline. */
.sim-cell-sub{display:block;font-size:11.5px;color:var(--sim-muted-2);margin-top:2px;font-weight:500}
/* Valor de celula de tabela que navega para o registro relacionado (ex.:
   "Base virtual" na lista de Consultas abrindo a propria rota) - mesma
   tipografia da celula normal, so ganha sublinhado+cor de destaque no
   hover, para nao competir visualmente com o dado em si. */
.sim-cell-link{color:inherit;text-decoration:none;cursor:pointer}
.sim-cell-link:hover{color:var(--sim-accent-ink);text-decoration:underline}

/* Barra segmentada (ex.: realizado / projecao / meta) */
.sim-stackbar{display:flex;height:34px;border-radius:8px;overflow:hidden;background:var(--sim-line-soft);margin-top:6px}
.sim-stackbar div{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.sim-stackbar .sim-seg-1{background:var(--sim-navy-3)}
.sim-stackbar .sim-seg-2{background:var(--sim-accent)}
.sim-stackbar .sim-seg-rest{background:var(--sim-line);color:var(--sim-muted)}
.sim-stack-legend{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--sim-muted);flex-wrap:wrap}
.sim-stack-legend span{display:inline-flex;align-items:center;gap:6px}
.sim-stack-legend i{width:10px;height:10px;border-radius:3px}

/* Sub-cartoes agrupados (orelha superior violeta = agrupamento secundario, nao status) */
.sim-subcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:820px){.sim-subcards{grid-template-columns:1fr}}
.sim-subcard{border:1px solid var(--sim-line);border-top:4px solid var(--sim-violet);border-radius:12px;padding:14px 16px;background:var(--sim-card)}
.sim-subcard span{font-size:11.5px;color:var(--sim-muted);display:block;margin-bottom:6px}
.sim-subcard b{font-size:18px}

.sim-chip-toggle{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.sim-chip-toggle .sim-opt{
  display:flex;align-items:center;gap:8px;border:1px solid var(--sim-line);background:var(--sim-card);border-radius:10px;
  padding:9px 14px;font-size:12.5px;font-weight:700;color:var(--sim-muted);
}
.sim-chip-toggle .sim-opt.sim-active{color:var(--sim-accent-ink);border-color:var(--sim-accent-soft);background:var(--sim-accent-soft)}

/* Faixa de abas "grudada" no painel seguinte (ex.: dominio Usuarios/
   Agentes com sub-telas) - link puro por item, sem caixa propria (ao
   contrario de .sim-chip-toggle acima, que e pra filtros). Borda
   esquerda/direita/superior igual ao .sim-panel (mesma --sim-line, sem
   border-bottom) - o vao real entre a faixa e o painel nao vinha de
   margin/padding (ver comentario abaixo, era gap do grid pai), entao com
   esse vao ja cancelado a borda pode voltar sem parecer duas caixas
   encostadas; sem ela, o painel "ganhando" borda do nada bem onde a faixa
   termina lia como falha de renderizacao.
*/
.sim-tabstrip{
  display:flex;gap:4px;flex-wrap:wrap;margin:16px 0 0;padding:2px 6px 0;
  background:var(--sim-card);border:1px solid var(--sim-line);border-bottom:0;
  border-radius:14px 14px 0 0;
}
.sim-tabstrip a{
  display:inline-flex;align-items:center;gap:6px;border:0;background:none;text-decoration:none;cursor:pointer;
  padding:11px 16px 3px;font-size:12.8px;font-weight:700;color:var(--sim-muted);
  border-bottom:2.5px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.sim-tabstrip a:hover{color:var(--sim-ink)}
.sim-tabstrip a.sim-active{color:var(--sim-accent-ink);border-bottom-color:var(--sim-accent)}
/* margin-top negativo (nao 0!) - o vao real nao vinha do padding/margin do
   .sim-panel (isso ja tinha sido zerado), vinha do CONTAINER PAI: #content
   usa class=content-grid, definida em CentralAdminCss (compilada no .exe,
   nao neste arquivo) como "display:grid;gap:12px" - esse gap insere espaco
   fixo entre QUALQUER par de filhos diretos do grid, independente de
   margin/padding dos proprios itens. Descoberto so depois de inspecionar o
   DOM renderizado de verdade (Elements/Computed do DevTools) - nenhuma
   revisao de arquivo fonte teria achado isso, já que a regra do gap fica
   num arquivo totalmente diferente. margin-top:-12px cancela exatamente
   esse gap (unico jeito de "remover" gap de grid pra um par especifico de
   itens, sem mexer no container inteiro e afetar o espacamento entre os
   outros paineis empilhados). */
/* padding-top:14px (nao 0) - depois de cancelar o gap do grid pai (acima),
   sobra so o espaco que a aba/sublinhado ja usa (bem apertado agora, ver
   .sim-tabstrip a) - sem isso o conteudo (ex.: botao "+") ficava colado no
   sublinhado. Esse padding e "interno" ao painel, entao nao reabre o vao
   entre a faixa de abas e o painel (a borda continua se tocando). */
.sim-tabstrip + .sim-panel{margin-top:-12px;border-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:14px}
.sim-radio-row{display:flex;gap:22px;margin:12px 0 4px;font-size:13px;color:var(--sim-muted);flex-wrap:wrap}
.sim-radio-row label{display:flex;align-items:center;gap:7px}
.sim-radio-row input{accent-color:var(--sim-accent)}
.sim-radio-row .sim-sel{color:var(--sim-ink);font-weight:700}

/* Padrao visual de tooltip/legenda para grafico de linha (a interatividade
   de hover/crosshair e especifica de cada grafico — ver example.html para
   uma referencia de implementacao). */
.sim-chart-wrap{position:relative;margin-top:16px}
.sim-chart-legend{display:flex;gap:20px;margin-bottom:10px;font-size:12.5px;color:var(--sim-muted);flex-wrap:wrap}
.sim-chart-legend span{display:inline-flex;align-items:center;gap:7px}
.sim-chart-legend i{width:16px;height:0;border-top:2.5px solid var(--sim-accent)}
.sim-chart-legend i.sim-dash{border-top:2.5px dashed var(--sim-muted-2)}
.sim-chart-tip{
  position:absolute;pointer-events:none;background:var(--sim-navy);color:#fff;border-radius:8px;padding:8px 11px;
  font-size:11.5px;box-shadow:0 12px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .1s;white-space:nowrap;z-index:5;
}
.sim-chart-tip b{display:block;font-size:12.5px;margin-bottom:2px}

.sim-ranking{display:flex;flex-direction:column}
.sim-rank-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--sim-line-soft)}
.sim-rank-item:first-child{border-top:none}
.sim-rank-num{
  width:24px;height:24px;border-radius:50%;background:var(--sim-accent-soft);color:var(--sim-accent-ink);font-weight:700;
  font-size:12px;display:grid;place-items:center;flex:none;
}
.sim-rank-num.sim-crit{background:var(--sim-crit-soft);color:var(--sim-crit-ink)}
.sim-rank-item b{flex:1;font-size:13.8px;font-weight:700}
.sim-rank-item .sim-val{font-weight:700;font-size:13.8px}
.sim-rank-item .sim-val.sim-ok{color:var(--sim-ok-ink)}
.sim-rank-item .sim-val.sim-crit{color:var(--sim-crit-ink)}

/* Cartoes de destaque com borda lateral (bom = verde, ruim = vermelho) */
.sim-highlights{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media (max-width:700px){.sim-highlights{grid-template-columns:1fr}}
.sim-hl{background:var(--sim-card);border:1px solid var(--sim-line);border-left:4px solid var(--sim-ok);border-radius:0 12px 12px 0;padding:14px 16px}
.sim-hl.sim-bad{border-left-color:var(--sim-crit)}
.sim-hl span{font-size:11.5px;color:var(--sim-muted);display:block;margin-bottom:6px}
.sim-hl b{font-size:16.5px;display:block;margin-bottom:4px}
.sim-hl em{font-style:normal;font-weight:800;color:var(--sim-ok-ink)}
.sim-hl.sim-bad em{color:var(--sim-crit-ink)}

/* ---------- tabelas (zebra discreta, paginacao com total) ---------- */
.sim-tablewrap{overflow-x:auto;margin-top:10px;border:1px solid var(--sim-line);border-radius:12px}
table.sim-data{border-collapse:collapse;width:100%;font-size:13px;min-width:640px}
table.sim-data th{
  text-align:left;background:var(--sim-line-soft);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sim-muted);font-weight:700;padding:11px 14px;white-space:nowrap;position:sticky;top:0;
}
table.sim-data td{padding:11px 14px;border-top:1px solid var(--sim-line-soft);white-space:nowrap}
/* Zebra bem discreta: a propria cor do texto (--sim-ink) a ~2% de opacidade,
   funciona igual nos dois temas sem precisar de token separado. Aplica-se
   na <tr> inteira para acompanhar a linha durante rolagem horizontal. */
table.sim-data tbody tr:nth-child(even){background:var(--sim-zebra)}
table.sim-data tbody tr:hover{background:var(--sim-line-soft)}
table.sim-data td.sim-neg{color:var(--sim-crit-ink);font-weight:700}
table.sim-data td.sim-accent-bar{border-left:3px solid var(--sim-crit)}
.sim-pill{display:inline-flex;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:8px}
.sim-pill.sim-ok{background:var(--sim-ok-soft);color:var(--sim-ok-ink)}
.sim-pill.sim-crit{background:var(--sim-crit-soft);color:var(--sim-crit-ink)}

.sim-accordion{margin-top:10px}
.sim-acc-head{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid var(--sim-line);font-weight:700;font-size:14px}
.sim-acc-head span{width:22px;height:22px;border-radius:50%;background:var(--sim-line-soft);display:grid;place-items:center;font-size:15px;color:var(--sim-muted)}

.sim-pagefoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--sim-muted);flex-wrap:wrap;gap:8px}
.sim-pagefoot .sim-pg{display:flex;gap:6px}
.sim-pagefoot button{border:1px solid var(--sim-line);background:var(--sim-card);border-radius:7px;height:28px;padding:0 10px;color:var(--sim-muted);font-size:12px}
.sim-pagefoot button.sim-cur{background:var(--sim-navy);color:#fff;border-color:var(--sim-navy)}
/* O seletor de itens-por-pagina (#pager-page-size) cai no "input,select"
   generico de Central/Agent (pre-TemplateWeb, background:white fixo) por
   ter especificidade menor - esta regra (classe + tipo) tem prioridade e
   corrige o combo para seguir o tema (claro/escuro) de verdade. */
.sim-pagefoot select{border:1px solid var(--sim-line);background:var(--sim-card);border-radius:7px;height:28px;padding:0 8px;color:var(--sim-ink);font-size:12px}

.sim-statusdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
.sim-statusdot.sim-ok{background:var(--sim-ok)}
.sim-statusdot.sim-muted{background:var(--sim-muted-2)}
.sim-rowchip{
  display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--sim-line-soft);color:var(--sim-muted);margin:2px 4px 2px 0;
}
.sim-rowchip.sim-ok{background:var(--sim-ok-soft);color:var(--sim-ok-ink)}
.sim-rowchip.sim-muted{background:var(--sim-line-soft);color:var(--sim-muted-2)}
.sim-rowchip.sim-crit{background:var(--sim-crit-soft);color:var(--sim-crit-ink)}
.sim-rowchip.sim-accent{background:var(--sim-accent-soft);color:var(--sim-accent-ink)}
.sim-rowchip.sim-warn{background:var(--sim-warn-soft);color:var(--sim-warn)}
/* Paleta categorica (20 tons) - identificacao de categoria/etiqueta livre
   (ex.: tipo de procedimento numa clinica), sem significado de status. Ver
   TemplateWeb.md, secao "Paleta categorica em chip". */
.sim-rowchip.sim-cat-1{background:var(--sim-cat-1-soft);color:var(--sim-cat-1-ink)}
.sim-rowchip.sim-cat-2{background:var(--sim-cat-2-soft);color:var(--sim-cat-2-ink)}
.sim-rowchip.sim-cat-3{background:var(--sim-cat-3-soft);color:var(--sim-cat-3-ink)}
.sim-rowchip.sim-cat-4{background:var(--sim-cat-4-soft);color:var(--sim-cat-4-ink)}
.sim-rowchip.sim-cat-5{background:var(--sim-cat-5-soft);color:var(--sim-cat-5-ink)}
.sim-rowchip.sim-cat-6{background:var(--sim-cat-6-soft);color:var(--sim-cat-6-ink)}
.sim-rowchip.sim-cat-7{background:var(--sim-cat-7-soft);color:var(--sim-cat-7-ink)}
.sim-rowchip.sim-cat-8{background:var(--sim-cat-8-soft);color:var(--sim-cat-8-ink)}
.sim-rowchip.sim-cat-9{background:var(--sim-cat-9-soft);color:var(--sim-cat-9-ink)}
.sim-rowchip.sim-cat-10{background:var(--sim-cat-10-soft);color:var(--sim-cat-10-ink)}
.sim-rowchip.sim-cat-11{background:var(--sim-cat-11-soft);color:var(--sim-cat-11-ink)}
.sim-rowchip.sim-cat-12{background:var(--sim-cat-12-soft);color:var(--sim-cat-12-ink)}
.sim-rowchip.sim-cat-13{background:var(--sim-cat-13-soft);color:var(--sim-cat-13-ink)}
.sim-rowchip.sim-cat-14{background:var(--sim-cat-14-soft);color:var(--sim-cat-14-ink)}
.sim-rowchip.sim-cat-15{background:var(--sim-cat-15-soft);color:var(--sim-cat-15-ink)}
.sim-rowchip.sim-cat-16{background:var(--sim-cat-16-soft);color:var(--sim-cat-16-ink)}
.sim-rowchip.sim-cat-17{background:var(--sim-cat-17-soft);color:var(--sim-cat-17-ink)}
.sim-rowchip.sim-cat-18{background:var(--sim-cat-18-soft);color:var(--sim-cat-18-ink)}
.sim-rowchip.sim-cat-19{background:var(--sim-cat-19-soft);color:var(--sim-cat-19-ink)}
.sim-rowchip.sim-cat-20{background:var(--sim-cat-20-soft);color:var(--sim-cat-20-ink)}

/* ---------- rodape da area de conteudo ---------- */
.sim-content-foot{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:auto;padding-top:5px;padding-bottom:3px;border-top:1px solid var(--sim-line);
  position:relative;min-height:24px;
}
.sim-powered{font-size:11.5px;color:var(--sim-muted);text-decoration:none;line-height:1}
.sim-powered b{color:var(--sim-ink)}
.sim-powered:hover{color:var(--sim-accent-ink)}
.sim-content-foot-status{
  display:none;
}
.sim-social{display:flex;gap:5px}
.sim-social a{
  width:21px;height:21px;border-radius:50%;background:var(--sim-card);border:1px solid var(--sim-line);
  display:grid;place-items:center;color:var(--sim-muted);
}
.sim-social a:hover{color:var(--sim-accent-ink);border-color:var(--sim-accent-soft);background:var(--sim-accent-soft)}
.sim-soc-ico{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- tela de login ----------
   Lado navy com mensagem institucional (some abaixo de 860px, ocupa o
   espaco restante) + faixa do cartao de credenciais em largura
   PROPORCIONAL ao viewport (~27%, com min/max) - proporcao entre os dois
   lados, tamanhos de fonte e disposicao do texto extraidos de um print da
   tela de login real em producao (intedocs.app.simplim.com.br,
   renderizada por D2Bridge). Reaproveita .sim-field, .sim-btn,
   .sim-powered/.sim-social/.sim-soc-ico do resto do sistema - so
   acrescenta o layout de tela cheia, o padrao de rotulo flutuante
   (.sim-auth-card .sim-field - ver comentario mais abaixo) e o toggle de
   mostrar/ocultar senha. Mesmo conteudo/campos da pagina de origem,
   redesenhada com os tokens deste sistema em vez do tema Bootstrap
   generico que a pagina de origem usava.
   Imagem de fundo (img-auth-big.webp - convertida de .jpg para .webp pela
   propria Simplim so para reduzir tamanho de arquivo, mesma qualidade; nao
   reprocessar/reconverter esse arquivo) exposta via --sim-auth-bg-url,
   definida abaixo como caminho relativo (uso web estatico, arquivo ao lado
   deste CSS). O Delphi puro (BuildLoginPageHtml/LoadAuthBackgroundDataUri)
   sobrescreve essa variavel com um data URI base64 via <style> inline,
   para o HTML final continuar autocontido sem depender de servir a imagem
   separadamente - mesma tecnica ja usada para recolorir --sim-accent no
   seletor de cor de marca (ver simplim-template.js). Nao troque isto por
   um background-image direto sem passar pela variavel, ou o Delphi perde
   o ponto de sobrescrita.
   O fundo fica no proprio .sim-auth-wrapper (pagina inteira), nao mais so
   em .sim-auth-side - assim o background-size:cover calcula o recorte com
   base no viewport inteiro, nao na caixa do lado esquerdo isoladamente.
   .sim-auth-form-side recebe um fundo solido opaco por cima (mesma logica
   de sempre, so que agora precisa ser explicito) para o cartao de login
   continuar legivel sem a foto atras dele.
   IMPORTANTE: a imagem NAO leva nenhum tratamento (sem gradiente escuro,
   sem opacidade, sem overlay) por cima - pedido explicito para manter as
   cores naturais da foto. Uma versao anterior tinha um linear-gradient
   escurecendo o topo/base para dar contraste ao texto branco - removido de
   proposito. Nao reintroduzir nenhum overlay aqui sem pedido explicito. */
:root{--sim-auth-bg-url:url('./img-auth-big.webp')}
/* justify-content:space-between de proposito: os dois lados tem largura
   fixa agora (.sim-auth-side 66%, .sim-auth-form-side 27% - nao somam
   100%), entao sobra uma faixa no meio. Isso ancora o lado institucional
   na borda esquerda e o cartao de login na borda direita, e a faixa que
   sobra so revela mais da propria imagem de fundo (sem tratamento nenhum
   por cima dela, ver comentario abaixo) - nao e um bug. */
.sim-auth-wrapper{min-height:100vh;display:flex;justify-content:space-between;background:var(--sim-auth-bg-url) center/cover no-repeat}
/* Largura fixa (nao mais flex:1 preenchendo o restante) - reduzida 10% a
   pedido (73% efetivo antes, com o cartao em 27% -> 66% agora). */
.sim-auth-side{flex:0 0 66%;display:none;align-items:center;padding:64px;position:relative;color:#fff}
@media (min-width:860px){.sim-auth-side{display:flex}}
/* max-width em dobro (560px -> 1120px) de proposito: e o espaco util para
   o titulo/subtitulo escreverem sem quebrar - ver comentarios abaixo. */
.sim-auth-side-inner{max-width:1120px;margin-left:80px;position:relative;z-index:1}
/* Selecao de texto (Ctrl+A / arrastar o mouse) neste lado em azul com leve
   transparencia - troca a regra geral (.sim-app,.sim-auth-wrapper
   ::selection, la em cima, usa --sim-accent-soft, pensada para texto
   escuro sobre fundo claro) que ficaria apagada/sem contraste aqui em
   cima de texto branco/foto. */
.sim-auth-side ::selection{background:rgba(3,120,174,.4)}
/* simplim-logo2.png: variante so com a caixa "SIMPLIM" (sem o subtitulo
   "Simples assim" de simplim-logo.png, usado no rodape do menu) - o
   tagline abaixo do logo faz esse papel aqui, dispensando o subtitulo.
   Tamanho e deslocamento (margin-left acima, no container) calibrados a
   pedido, em tres rodadas: logo 70% maior (210px -> 357px), +5%
   (357px -> 375px), +10% (375px -> 413px); bloco inteiro (logo+titulo+texto)
   deslocado 80px para a direita, mantendo os tres elementos alinhados
   entre si. */
.sim-auth-logo{width:413px;height:auto;display:block;margin-bottom:36px}
/* white-space:nowrap de proposito - pedido explicito para o titulo nunca
   quebrar linha. Seguro porque .sim-auth-side nao tem mais overflow:hidden
   (removido antes) e o container acima tem o dobro da largura util
   (1120px) - um texto que nao coubesse so estouraria visivelmente o
   container, nao seria cortado; nas resolucoes normais de uso desta tela
   ele cabe integralmente numa linha so. Fonte aumentada (32->34->38px) e
   negrito reduzido (800->700->600) em rodadas sucessivas de ajuste fino. */
.sim-auth-side h1{font-size:38px;line-height:1.25;margin:0 0 16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
/* Sem max-width em ch aqui de proposito: a quebra de linha e manual (<br>
   no HTML, no ponto exato pedido) - um max-width mais estreito que cada
   uma das duas linhas voltaria a quebra-las de novo por conta propria,
   gerando 3-4 linhas em vez de 2. A largura util disponivel (container
   acima, 1120px) e generosa o bastante para cada linha inteira caber. */
.sim-auth-side p{font-size:22px;line-height:1.5;color:#d7e1ec;margin:0}

.sim-auth-form-side{
  flex:0 0 27%;min-width:304px;max-width:496px;display:flex;align-items:center;justify-content:center;padding:32px;
  position:relative;z-index:1;background:var(--sim-canvas);
}
@media (max-width:859px){.sim-auth-form-side{flex:1 1 auto;min-width:0;max-width:100%}}
.sim-auth-card{width:100%;max-width:380px}
/* font-weight reduzido (700 -> 600) e quebra de linha manual no HTML
   ("Entre com suas<br>credenciais.") - nao depende mais do tamanho da
   fonte/largura do cartao para quebrar no ponto certo. */
.sim-auth-card h2{font-size:30px;line-height:1.25;font-weight:600;margin:0 0 28px;letter-spacing:-.01em}

.sim-auth-alert{
  display:flex;align-items:center;gap:9px;background:var(--sim-crit-soft);color:var(--sim-crit-ink);
  border-radius:9px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:20px;
}
.sim-auth-alert svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}

/* Campo com rotulo flutuante (padrao "Material"): so a linha inferior
   aparece, o rotulo comeca dentro do campo como se fosse o placeholder; ao
   focar ou preencher, o rotulo sobe e encolhe. Uso especifico da tela de
   login (o resto do sistema usa .sim-field com rotulo sempre acima, ver
   TemplateWeb.md) - por isso a ordem no HTML e invertida aqui: <input>
   antes de <label>, requisito do seletor ~ usado abaixo. O input precisa
   de placeholder=" " (um espaco) para :placeholder-shown funcionar. */
.sim-auth-card .sim-field{position:relative;margin-bottom:22px}
/* :not([type=checkbox]) repetido de proposito so para igualar/superar a
   especificidade da regra geral ".sim-field input:not([type=checkbox])"
   (ambas ficariam empatadas em (0,2,1) e dependeriam da ordem no arquivo -
   isto remove essa fragilidade). */
.sim-auth-card .sim-field input:not([type=checkbox]){
  width:100%;height:50px;border:0;border-bottom:1.5px solid var(--sim-line);border-radius:0;
  padding:21px 2px 6px;background:transparent;font-size:14.5px;color:var(--sim-ink);
}
.sim-auth-card .sim-field input:focus{outline:none;border-bottom-color:var(--sim-accent)}
.sim-auth-card .sim-field label{
  position:absolute;left:2px;top:16px;margin:0;color:var(--sim-muted);font-size:14.5px;font-weight:400;
  pointer-events:none;transition:top .15s ease,font-size .15s ease,color .15s ease;
}
.sim-auth-card .sim-field input:focus ~ label,
.sim-auth-card .sim-field input:not(:placeholder-shown) ~ label{
  top:1px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--sim-muted);
}
.sim-auth-card .sim-field input:focus ~ label{color:var(--sim-accent-ink)}

.sim-auth-password-wrap{position:relative}
.sim-auth-password-toggle{
  position:absolute;right:2px;top:12px;border:0;background:none;color:var(--sim-muted);cursor:pointer;padding:4px;
}
.sim-auth-password-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}

/* Texto em cinza escuro (nao var(--sim-ink), que e quase preto) e checkbox
   customizado (appearance:none + marca de visto desenhada em CSS puro, sem
   depender de icone/imagem) no lugar do checkbox nativo do sistema
   operacional, que destoava do resto do visual moderno da tela. */
.sim-auth-remember{display:flex;align-items:center;gap:10px;margin:6px 0 22px;font-size:13.5px;color:#454b57}
.sim-auth-remember input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;cursor:pointer;
  border:1.5px solid var(--sim-line);border-radius:5px;background:var(--sim-card);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease;
}
.sim-auth-remember input[type=checkbox]:hover{border-color:var(--sim-accent)}
.sim-auth-remember input[type=checkbox]:checked{background:var(--sim-accent);border-color:var(--sim-accent)}
.sim-auth-remember input[type=checkbox]::after{
  content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transition:transform .12s ease;
}
.sim-auth-remember input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}

/* Botao compacto, NAO ocupa a largura toda do cartao - assim como na tela
   de login real de referencia (alinhado a esquerda, largura de conteudo). */
.sim-auth-card .sim-btn{padding:0 30px;margin-bottom:4px}

.sim-auth-foot{margin-top:26px;text-align:center;border-top:1px solid var(--sim-line);padding-top:20px}
.sim-auth-foot .sim-powered{display:block;margin-bottom:12px}
.sim-auth-foot .sim-social{justify-content:center}