/* ============================================================================
   Íris — folha de estilo compartilhada do painel (B.1 redesenho).
   Fonte ÚNICA da identidade visual: todas as telas do painel linkam este arquivo
   (/painel/iris.css). Mudou uma cor aqui → muda em todas as telas.
   Tokens derivados do Design System gerado no Claude Design (logo: balões roxo +
   verde-água formando o olho; azul do site como cor de ação). Fonte: Inter.
   Classes prefixadas com `iris-` para conviver com o CSS antigo durante a migração.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Marca — azul (ação) */
  --iris-blue:#1A56A0; --iris-blue-700:#0F3A75; --iris-blue-200:#DCE6F2; --iris-blue-50:#F0F5FC;
  /* Marca — roxo e verde-água (logo / degradê) */
  --iris-purple:#4A2C63; --iris-purple-400:#6E4B8C; --iris-teal:#23B3A4; --iris-teal-300:#5FCABF;
  /* Neutros */
  --iris-ink:#0F1729; --iris-gray-700:#4A5568; --iris-gray-500:#718096; --iris-gray-200:#E7ECF2;
  --iris-white:#FFFFFF; --iris-surface:#F6F8FB;
  /* Status */
  --iris-success:#16A34A; --iris-success-bg:#E9F7EF; --iris-danger:#DC2626; --iris-danger-bg:#FEF2F2;
  --iris-warning:#F59E0B; --iris-warning-ink:#B4730A; --iris-warning-bg:#FEF3DA;
  /* Degradê e sombras da marca */
  --iris-grad:linear-gradient(100deg,var(--iris-teal) 0%,var(--iris-blue) 52%,var(--iris-purple) 100%);
  --iris-shadow:0 1px 2px rgba(15,23,41,.04),0 6px 20px rgba(15,23,41,.06);
  --iris-shadow-sm:0 1px 3px rgba(15,23,41,.06);
  --iris-radius:16px; --iris-radius-sm:9px;
}

/* Ponte de tokens do Design System (ui_kits/painel/*.jsx) — mapeia os nomes que as
   telas do design usam (--color-action, --text-muted, --radius-pill, …) para os
   valores da marca Íris acima. ADITIVO: nada existente usa estes nomes, então é
   seguro. Permite portar as telas .jsx do design para produção sem traduzir token a
   token (v0.176.x — redesign painel).

   `--color-action` aponta para `--accent` (não mais direto para `--iris-blue`) desde
   2026-07-31 — decisão do Eric na sessão da v0.239.0: os dois eram DOIS NOMES
   independentes para o mesmo azul, e uma tela podia misturar os dois sem que nada
   acusasse (era o caso do `comando.html`: `--color-action` em três lugares e o hex
   cru `#1A56A0` num quarto). Agora só existe UM valor de verdade (`--accent`); este
   token é ponte pura, e nenhuma tela do painel deve usá-lo diretamente — use
   `--accent`. Ele fica só para a portabilidade das telas `.jsx` do design, que é o
   motivo original de existir. */
:root{
  /* Ação / texto — ponte para --accent, nunca usar direto numa tela nova */
  --color-action:var(--accent);
  --text-strong:var(--iris-ink); --text-body:var(--iris-gray-700); --text-muted:var(--iris-gray-500);
  /* Superfícies / linhas */
  --border-hairline:var(--iris-gray-200); --surface-tint:var(--iris-blue-50);
  --surface-page:var(--iris-surface); --surface-card:var(--iris-white);
  /* Raios */
  --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  /* Sombras */
  --shadow-xs:0 1px 2px rgba(15,23,41,.05);
  --shadow-sm:var(--iris-shadow-sm); --shadow-md:var(--iris-shadow);
  --shadow-lg:0 4px 12px rgba(15,23,41,.10),0 14px 40px rgba(15,23,41,.10);
  /* Degradê / motion */
  --gradient-iris:var(--iris-grad);
  --dur-fast:.18s; --dur-base:.22s; --ease-standard:cubic-bezier(.2,.6,.2,1);
}

/* ============================================================================
   TOKENS DE BASE (Fase 2 do redesenho, v0.234.0) — os nomes genéricos que o
   RESTO deste arquivo já usava sem nunca definir.

   O problema que isto resolve: `iris.css` referenciava --muted (23x), --warn,
   --danger, --bg, --text, --panel, --border, --success, --accent e --accent-2,
   mas só os definia `painel_superadmin/_base_css.html`, injetado tela a tela
   por substituição de texto — opt-in. Resultado medido em 2026-07-29: 52 das
   60 telas NÃO recebiam o bloco, e quem esquecia ficava com var() indefinida
   (texto branco em fundo branco). Definidos aqui, valem em toda tela que linka
   /painel/iris.css — que são todas.

   Os valores são ALIAS dos tokens --iris-* logo acima, byte-idênticos aos que
   _base_css.html usava: nenhuma cor nova, nenhuma mudança visual. Uma tela que
   redefina qualquer um destes no seu próprio <style> continua ganhando (o
   <style> da página vem depois deste <link>); a migração é segura em qualquer
   ordem.
   ============================================================================ */
:root{
  /* Superfícies */
  --bg:var(--iris-surface); --panel:var(--iris-white); --panel-2:var(--iris-blue-50);
  --border:var(--iris-gray-200);
  /* Texto */
  --text:var(--iris-ink); --muted:var(--iris-gray-500);
  /* Ação */
  --accent:var(--iris-blue); --accent-2:var(--iris-blue-700);
  /* Status */
  --success:var(--iris-success); --warn:var(--iris-warning-ink);
  --danger:var(--iris-danger); --neutral:var(--iris-gray-500);
  /* Fundo de linha/cartão sob o ponteiro (era #F5F3F9 cru aqui e nas telas) */
  --bg-hover:#F5F3F9;

  /* Escala de z-index NOMEADA — antes cada tela inventava a sua (2, 5, 20, 30,
     50, 51, 60, 80, 90, 95, 100, 9999 em uso simultâneo), e por isso modal,
     dropdown, sino e paleta ⌘K brigavam: a paleta vinha em 100 e o modal de
     reuniões comerciais em 9999, ou seja, a paleta abria ATRÁS dele. Toda
     camada nova usa um destes nomes; o lint de UI reprova z-index cru.

     São 9 degraus porque são 9 camadas de verdade — em especial as três de
     moldura, que precisam de ordem entre si: cabeçalho de tabela grudado fica
     ABAIXO da topbar da página, que fica ABAIXO da faixa da marca (os três se
     sobrepõem nos 4px do topo quando a página rola). */
  /* Os três primeiros degraus são EMPILHAMENTO LOCAL — a ordem entre irmãos
     dentro de um mesmo cartão (o fundo decorativo do login, o texto por cima
     dele). Não são camadas do painel; existem com nome porque a regra "nada de
     z-index cru" só é honesta se valer também para o próprio `iris.css`, que
     tinha 7 deles e ficava de fora da varredura (revisão independente, v0.236.0). */
  --z-fundo:0;       /* pano de fundo decorativo, atrás dos irmãos  */
  --z-base:1;        /* acima do fluxo normal, nada mais            */
  --z-acima:2;       /* o conteúdo por cima do pano de fundo        */
  --z-sticky:10;     /* cabeçalho/coluna grudado DENTRO do conteúdo */
  --z-chrome:100;    /* topbar e cabeçalho da página                */
  --z-brandbar:110;  /* a faixa de degradê da marca, sempre no topo */
  --z-dropdown:200;  /* menu, sino, autocomplete                    */
  --z-overlay:300;   /* o fundo escurecido de um modal              */
  --z-modal:400;     /* a caixa do modal                            */
  --z-toast:500;     /* aviso passageiro — precisa ser lido         */
  --z-cmdk:600;      /* a paleta ⌘K, acima de tudo                  */
}

/* Base */
.iris *{box-sizing:border-box}
.iris{margin:0;min-height:100%;background:var(--iris-surface);color:var(--iris-ink);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}

/* Barra de degradê da marca (topo da página) */
.iris-brandbar{height:4px;background:var(--iris-grad)}

/* Cabeçalho com a logo no topo esquerdo */
.iris-header{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:14px 26px;
  background:var(--iris-white);border-bottom:1px solid var(--iris-gray-200);position:sticky;top:0;z-index:var(--z-chrome)}
.iris-logo{display:flex;align-items:center;gap:12px;margin-right:6px}
.iris-logo img{height:42px;width:auto;display:block}
.iris-logo-div{height:34px;width:1px;background:var(--iris-gray-200)}
.iris-ctx{display:flex;flex-direction:column;gap:1px}
.iris-ctx .clinic{font-weight:700;font-size:15px;color:var(--iris-ink);display:flex;align-items:center;gap:6px}
.iris-ctx .period{color:var(--iris-gray-500);font-size:12px}
.iris-spacer{flex:1}
.iris-nav{display:flex;flex-wrap:wrap;gap:6px}
.iris-nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--iris-gray-700);
  background:var(--iris-white);border:1px solid var(--iris-gray-200);border-radius:var(--iris-radius-sm);
  padding:8px 13px;font-size:13px;font-weight:600;transition:all .18s}
.iris-nav a:hover{border-color:var(--iris-blue);color:var(--iris-blue);background:var(--iris-blue-50);transform:translateY(-1px)}
.iris-nav a.primary{background:var(--iris-blue);color:#fff;border-color:var(--iris-blue);box-shadow:0 4px 12px rgba(26,86,160,.25)}
.iris-nav a.primary:hover{background:var(--iris-blue-700)}
.iris-exit{color:var(--iris-gray-500);text-decoration:none;font-size:13px;padding:8px 6px;font-weight:600}

/* Conteúdo */
.iris-main{padding:26px 26px 40px;max-width:1200px;margin:0 auto}

/* ============================================================================
   SHELL DE SIDEBAR (Claude Design / AppShell) — chrome novo do painel.
   Sidebar fixa à esquerda (logo + nav + status WhatsApp + clínica) + topbar.
   Convive com o header horizontal antigo durante a migração das 22 telas.
   ============================================================================ */
html,body{margin:0;min-height:100%}
.iris-app *{box-sizing:border-box}
.iris-app{display:flex;min-height:100vh;background:var(--iris-surface);color:var(--iris-ink);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.iris-app .iris-brandbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-brandbar)}

/* Sidebar — v0.273.0: mesmo padrão do menu do superadmin (`.side`, ver bloco
   mais abaixo), recolhida pra só ícones por padrão, expande no hover
   empurrando `.iris-shell-main` (sem overlay). */
.iris-side{width:64px;flex:none;background:var(--iris-white);border-right:1px solid var(--iris-gray-200);
  padding:22px 16px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  transition:width .3s ease}
.iris-side.is-expanded{width:248px;overflow:visible}
.iris-side:not(.is-expanded){padding-left:8px;padding-right:8px}
.iris-side:not(.is-expanded) .iris-side-logo>div{display:none}
.iris-side:not(.is-expanded) .iris-side-sep{visibility:hidden}
.iris-side:not(.is-expanded) .iris-side-link .lbl{display:none}
.iris-side:not(.is-expanded) .iris-side-link .pill{position:absolute;top:5px;right:3px;min-width:14px;height:14px;font-size:8px;padding:0}
.iris-side:not(.is-expanded) .iris-wa{justify-content:center;padding-left:0;padding-right:0}
.iris-side:not(.is-expanded) .iris-wa .t{display:none}
.iris-side:not(.is-expanded) .iris-side-clinic{justify-content:center;padding-left:0;padding-right:0}
.iris-side:not(.is-expanded) .iris-side-clinic select,.iris-side:not(.is-expanded) .iris-side-clinic .plan{display:none}
.iris-side-logo{display:flex;align-items:center;gap:10px;padding:0 6px 12px}
.iris-side-logo img{height:34px;width:auto;display:block}
.iris-side-logo .nm{font-weight:900;font-size:18px;letter-spacing:.5px;color:var(--iris-purple);line-height:1.05;white-space:nowrap}
.iris-side-logo .sub{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--iris-gray-500);text-transform:uppercase;white-space:nowrap}
.iris-side-nav{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px;scrollbar-gutter:stable;scrollbar-width:thin;
  scrollbar-color:var(--iris-gray-500) var(--iris-gray-200)}
.iris-side-nav::-webkit-scrollbar{width:6px}
.iris-side-nav::-webkit-scrollbar-track{background:var(--iris-gray-200)}
.iris-side-nav::-webkit-scrollbar-thumb{background:var(--iris-gray-500);border-radius:3px}
.iris-side-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  font:inherit;text-decoration:none;padding:8px 12px;height:35px;box-sizing:border-box;
  border-radius:var(--iris-radius-sm);border:none;
  margin-bottom:2px;position:relative;font-size:13.5px;font-weight:500;color:var(--iris-gray-700);
  background:transparent;transition:all .18s;white-space:nowrap}
.iris-side-link svg{flex:none;width:19px;height:19px}
.iris-side-link:hover{color:var(--iris-ink);background:rgba(15,23,41,.035)}
.iris-side-link.active{font-weight:700;color:var(--iris-blue);background:var(--iris-blue-50)}
.iris-side-link.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--iris-blue)}
.iris-side-link .lbl{flex:1;overflow:hidden}
.iris-side-link .pill{flex:none;box-sizing:border-box;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:var(--iris-danger);
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.iris-side-sep{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--iris-gray-500);
  padding:8px 12px 4px;white-space:nowrap;overflow:hidden}
/* Pílula de status do WhatsApp */
.iris-wa{margin-top:8px;padding:12px 13px;height:48px;box-sizing:border-box;border-radius:var(--iris-radius);width:100%;display:flex;
  align-items:center;gap:9px;text-align:left;font:inherit;border:1px solid rgba(22,163,74,.22);background:var(--iris-success-bg)}
.iris-wa.off{border-color:rgba(220,38,38,.22);background:var(--iris-danger-bg)}
/* Marca esta pílula como a página atual (ex.: wa.html) sem disputar com as cores
   de status da conexão (verde/vermelho/laranja acima) — anel externo azul. */
.iris-wa.active{box-shadow:0 0 0 2px var(--iris-blue-200)}
.iris-wa .ic{flex:none;display:inline-flex;color:var(--iris-success)}
.iris-wa.off .ic{color:var(--iris-danger)}
.iris-wa .t{font-size:12px;line-height:1.3;flex:1;min-width:0}
.iris-wa .t b{display:block;font-weight:700;color:var(--iris-success)}
.iris-wa.off .t b{color:var(--iris-danger)}
.iris-wa .t span{color:var(--iris-gray-500);font-size:11px}
.iris-wa{cursor:pointer;transition:background .18s,border-color .18s}
.iris-wa .ic{position:relative}
.iris-wa .xb{display:none}
.iris-wa.off .xb{display:grid;place-items:center;position:absolute;right:-4px;bottom:-3px;
  width:13px;height:13px;border-radius:50%;background:var(--iris-danger);color:#fff;
  font-size:8px;font-weight:700;border:2px solid var(--iris-danger-bg)}
/* conectando -> laranja (3º estado) */
.iris-wa.connecting{border-color:rgba(245,158,11,.32);background:var(--iris-warning-bg)}
.iris-wa.connecting .ic{color:var(--iris-warning)}
.iris-wa.connecting .t b{color:var(--iris-warning-ink)}
.iris-wa.connecting .xb{display:none}
/* Modal do QR (conectar WhatsApp direto do balão) */
.iris-qr-modal{border:0;border-radius:18px;padding:0;width:min(560px,94vw);max-height:94vh;
  box-shadow:0 24px 70px rgba(15,23,41,.35)}
.iris-qr-modal[open]{display:flex;flex-direction:column;height:min(760px,94vh)}   /* fechado = none (default) */
.iris-qr-modal::backdrop{background:rgba(15,23,41,.55)}
.iris-qr-modal .hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 8px;flex:none}
.iris-qr-modal .hd b{font-size:17px;color:var(--iris-ink)}
.iris-qr-modal .hd button{border:0;background:transparent;font-size:19px;cursor:pointer;color:var(--iris-gray-500)}
.iris-qr-modal p{margin:0 20px 12px;color:var(--iris-gray-500);font-size:13.5px;flex:none}
.iris-qr-modal iframe{width:100%;flex:1;min-height:0;border:0;display:block}
.iris-qr-modal .ft{flex:none;padding:14px 18px 16px;display:flex;justify-content:center;
  background:var(--iris-surface);border-top:1px solid var(--iris-gray-200)}
.iris-qr-modal .ft .iris-btn{width:100%;padding:12px 18px;font-size:14px}
/* Rodapé: clínica atual */
.iris-side-clinic{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 6px 0;border-top:1px solid var(--iris-gray-200)}
.iris-side-clinic .av{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:13px;background:linear-gradient(135deg,var(--iris-purple-400),var(--iris-purple))}
.iris-side-clinic select{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--iris-ink);cursor:pointer;padding:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iris-side-clinic .plan{font-size:11px;color:var(--iris-gray-500)}

/* Coluna principal (topbar + conteúdo) */
.iris-shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.iris-topbar{height:64px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--iris-gray-200);position:sticky;top:0;z-index:var(--z-chrome);
  display:flex;align-items:center;gap:14px;padding:0 26px}
.iris-search{position:relative;flex:1;max-width:420px}
.iris-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--iris-gray-500)}
.iris-search input{width:100%;height:40px;border:1px solid var(--iris-gray-200);border-radius:var(--iris-radius-sm);
  padding:0 14px 0 34px;font-size:13.5px;font-family:inherit;background:var(--iris-surface);color:var(--iris-ink);outline:none}
.iris-search input:focus{border-color:var(--iris-blue);box-shadow:0 0 0 3px rgba(26,86,160,.18)}
.iris-topbar .grow{flex:1}
.iris-iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--iris-gray-700);transition:all .15s;position:relative;text-decoration:none}
.iris-iconbtn:hover{background:var(--iris-blue-50);color:var(--iris-blue)}
.iris-topbar .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:13px;background:linear-gradient(135deg,var(--iris-blue),var(--iris-purple-400))}
.iris-topbar .sep{width:1px;height:26px;background:var(--iris-gray-200)}
.iris-content{flex:1;padding:26px 30px 48px;max-width:1180px;width:100%}

/* Login / porta de entrada — fundo com a identidade Íris (gradiente da marca +
   grafismos: o olho da logo + blobs translúcidos). Card branco flutuando. */
.iris-login{position:relative;min-height:100vh;display:grid;place-items:center;
  background:var(--iris-grad);padding:24px;overflow:hidden}
.iris-login-bg{position:absolute;inset:0;z-index:var(--z-fundo);overflow:hidden;pointer-events:none}
.iris-login-blob{position:absolute;border-radius:50%;filter:blur(2px)}
.iris-login-blob.b1{width:440px;height:440px;background:rgba(255,255,255,.10);top:-150px;left:-130px}
.iris-login-blob.b2{width:320px;height:320px;background:rgba(95,202,191,.32);bottom:-120px;right:-90px}
.iris-login-blob.b3{width:200px;height:200px;background:rgba(110,75,140,.30);top:58%;left:7%}
.iris-login-eye{position:absolute;width:min(64vh,580px);height:auto;right:-40px;top:50%;
  transform:translateY(-50%);opacity:.15}
.iris-login-card{position:relative;z-index:var(--z-base);width:100%;max-width:380px;background:var(--iris-white);
  border-radius:20px;box-shadow:0 22px 60px rgba(15,23,41,.30);padding:38px 32px 32px;text-align:center}
.iris-login-card img{height:52px;width:auto;margin-bottom:16px}
.iris-login-card h1{font-size:22px;font-weight:800;margin:0 0 22px;letter-spacing:-.02em;color:var(--iris-ink)}
.iris-login-card p{margin:0 0 22px;color:var(--iris-gray-500);font-size:13.5px}
.iris-login-card .field{text-align:left;margin-bottom:14px}
.iris-login-card label{display:block;font-size:12.5px;font-weight:700;color:var(--iris-gray-700);margin-bottom:5px}
.iris-login-card input{width:100%;box-sizing:border-box;height:44px;border:1px solid var(--iris-gray-200);
  border-radius:var(--iris-radius-sm);padding:0 14px;font-size:14px;font-family:inherit;background:var(--iris-surface);outline:none}
.iris-login-card input:focus{border-color:var(--iris-blue);box-shadow:0 0 0 3px rgba(26,86,160,.18);background:#fff}
.iris-login-card .iris-btn{width:100%;height:46px;margin-top:4px}

@media (max-width:860px){
  .iris-app{flex-direction:column}
  .iris-side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
  .iris-side-logo{padding:0 8px 0 0}
  .iris-side-nav{flex:1 1 100%;display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;order:3}
  .iris-side-link{width:auto;margin:0;flex:none;white-space:nowrap}
  .iris-side-link.active::before{display:none}
  .iris-wa{margin-top:0;width:auto;order:2}
  .iris-side-clinic{margin-top:0;border-top:0;order:2;padding-top:0}
  .iris-topbar{padding:0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}.iris-content{padding:16px 12px 32px}
}

/* Saudação / hero com grafismos da marca */
.iris-hero{position:relative;overflow:hidden;border-radius:20px;padding:30px 32px;margin-bottom:24px;color:#fff;background:var(--iris-grad)}
.iris-hero h1{font-size:25px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em;position:relative;z-index:var(--z-acima)}
.iris-hero p{margin:0;font-size:15px;opacity:.92;position:relative;z-index:var(--z-acima);max-width:660px}
.iris-hero .iris-pills{display:flex;gap:10px;margin-top:16px;position:relative;z-index:var(--z-acima);flex-wrap:wrap}
.iris-hero .iris-pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}
.iris-blob{position:absolute;border-radius:50%;opacity:.5;z-index:var(--z-base)}
.iris-blob.b1{width:240px;height:240px;background:rgba(255,255,255,.12);right:-40px;top:-90px}
.iris-blob.b2{width:150px;height:150px;background:rgba(95,202,191,.35);right:140px;bottom:-70px}
.iris-eye{position:absolute;right:34px;top:50%;transform:translateY(-50%);z-index:var(--z-base);opacity:.85}

/* Seções */
.iris-section{background:var(--iris-white);border:1px solid var(--iris-gray-200);border-radius:var(--iris-radius);
  padding:24px;margin-bottom:20px;box-shadow:var(--iris-shadow)}
.iris-grid-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.iris-grid-head .ic{width:32px;height:32px;border-radius:9px;background:var(--iris-blue-50);color:var(--iris-blue);display:grid;place-items:center;font-size:16px}
.iris-grid-head h2{font-size:17px;font-weight:750;margin:0}
.iris-sub{color:var(--iris-gray-500);font-size:13px;margin:0 0 18px}
/* Estendida pra também casar `.badge` do superadmin (2026-08-03, decisão do
   Eric — ver a ponte de nomes na antiga régua bare, linha ~1010). `.err` do
   superadmin usa as cores de `.danger`; `.purple` usa as de `.roxo`. */
.iris-badge,.iris-super .iris-app .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:8px;text-transform:uppercase;letter-spacing:.3px;background:var(--iris-blue-50);color:var(--iris-blue)}
/* v0.292.0 — sem isto, `display:inline-flex` acima vence o `display:none` do
   atributo `hidden` nativo (mesma origem CSS, autor bate user-agent): o badge
   "Alterações não salvas" ficava sempre visível, mesmo com `hidden` setado
   corretamente pelo JS (achado real em produção, tela de Agentes/A Íris). */
.iris-badge[hidden],.iris-super .iris-app .badge[hidden]{display:none}
.iris-badge.warn,.iris-super .iris-app .badge.warn{background:var(--iris-warning-bg);color:var(--iris-warning-ink)}
.iris-badge.ok,.iris-super .iris-app .badge.ok{background:var(--iris-success-bg);color:var(--iris-success)}
/* v0.233.1 — faltava a variante de PERIGO. Sem ela, a Saúde da Configuração
   pintava "3 impedem a Íris de funcionar" no azul informativo (o estado pior com
   a cor mais calma), porque só existiam .warn e .ok. */
.iris-badge.danger,.iris-super .iris-app .badge.err{background:var(--iris-danger-bg);color:var(--iris-danger)}
/* v0.238.0 — faltava o estado NEUTRO (o que saiu, o que foi arquivado). A Fila
   pintava "removida" em cinza com CSS próprio; sem esta variante, adotar o
   componente teria promovido "removida" ao azul informativo, do mesmo jeito que
   a falta da `.danger` fez na Saúde da Configuração. */
/* `--iris-gray-700`, não `--iris-gray-500`: a revisão mediu 3,77:1 de contraste
   com o 500 sobre a superfície — abaixo do mínimo de 4,5:1, e PIOR do que a
   pílula que a Fila tinha antes (4,02:1, que ao menos tinha borda). Com o 700
   passa folgado. As outras variantes da família também estão abaixo; isso é
   dívida anterior e está no backlog — mas a variante NOVA não nasce devendo. */
.iris-badge.neutro{background:var(--iris-surface);color:var(--iris-gray-700)}
/* Roxo — usado pelo selo "novo" do Assistente (2026-08-02). Faltava esta
   variante e por isso a tela mantinha um `.as-badge` próprio, quase idêntico. */
.iris-badge.roxo,.iris-super .iris-app .badge.purple{background:#F2ECF8;color:var(--iris-purple-400)}

/* Cards de status */
.iris-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
/* v0.238.0 — os 240px foram calibrados para as 3 caixas do dashboard. A Fila tem
   CINCO números: no 1400px de tela cabem 4 e o quinto cai sozinho numa segunda
   fileira, que lê como erro de montagem. Medido em foto, não no olho.
   v0.238.1 (revisão independente): eram 185px, e a 1280px o quinto voltava a
   cair — a peça falhava justamente no notebook mais comum. Medido de 1920 a
   1024: com 158px os 5 ficam numa fileira até **1200px**; abaixo disso quebra,
   e quebrar é o certo. O preço a 1200px é o rótulo "Tempo médio" em duas
   linhas — melhor do que o quinto cartão sozinho embaixo. */
.iris-cards.compacto{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.iris-card{position:relative;overflow:hidden;background:var(--iris-white);border:1px solid var(--iris-gray-200);
  border-radius:14px;padding:20px;box-shadow:var(--iris-shadow-sm);display:flex;gap:15px;align-items:center}
.iris-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--iris-blue)}
.iris-card .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:24px;flex:none;color:#fff;background:linear-gradient(135deg,var(--iris-blue),var(--iris-purple-400))}
.iris-card .val{font-size:32px;font-weight:800;line-height:1}
.iris-card .lbl{font-size:13px;color:var(--iris-gray-500);margin-top:5px;max-width:160px}
.iris-card.warn::before{background:var(--iris-warning)}
.iris-card.warn .ic{background:linear-gradient(135deg,#f7b733,#f59e0b)}.iris-card.warn .val{color:var(--iris-warning-ink)}
.iris-card.ok::before{background:var(--iris-success)}
.iris-card.ok .ic{background:linear-gradient(135deg,#34d399,#16a34a)}.iris-card.ok .val{color:var(--iris-success)}

/* Formulários / filtros */
.iris-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.iris-filtros .f{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--iris-gray-500)}
/* Alinhamento pela BASE (2026-08-02). Divergência real achada ao convergir as 9
   telas que tinham o próprio `.filtros`: 5 alinham os controles pelo pé porque o
   rótulo fica ACIMA do campo — centralizar desalinharia a régua dos inputs.
   Quem sobrescrever o container inteiro (o `audit.html` troca por `display:grid`)
   PRECISA declarar `align-items` explicitamente: o padrão é `center`, e sob
   grade isso faz os itens pararem de esticar — um bloco do audit desabou de
   198px pra 59px quando essa linha faltou. */
.iris-filtros.alinha-base{align-items:flex-end}
.iris input[type=text],.iris input[type=file],.iris select,.iris textarea{background:#fff;border:2px solid var(--iris-gray-200);
  border-radius:var(--iris-radius-sm);padding:9px 12px;font-size:14px;font-family:inherit;color:var(--iris-ink);transition:border-color .2s}
.iris input:focus,.iris select:focus,.iris textarea:focus{outline:none;border-color:var(--iris-blue)}

/* Botões */
.iris-btn{border:0;background:var(--iris-blue);color:#fff;border-radius:var(--iris-radius-sm);padding:10px 18px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s;box-shadow:0 4px 12px rgba(26,86,160,.22)}
.iris-btn:hover{background:var(--iris-blue-700);transform:translateY(-1px)}
/* v0.275.0 — feedback de clique (pedido do Eric: "algum tipo de efeito ao
   clicar, pra ver que foram clicados"). Nenhum botão do sistema tinha
   `:active` — só `:hover`, que não dispara em touch. `transition-duration`
   mais curto aqui pra o "afundar" parecer instantâneo (a saída de volta usa
   a transição normal do botão, mais lenta, então o solta é suave). */
.iris-btn:active{transform:scale(.96);transition-duration:.05s}
.iris-btn:disabled{opacity:.5;cursor:default;transform:none}
.iris-btn.sec{background:#fff;color:var(--iris-blue);border:2px solid var(--iris-gray-200);box-shadow:none;padding:8px 16px}
.iris-btn.sec:hover{border-color:var(--iris-blue);background:var(--iris-blue-50)}
.iris-btn.danger{background:#fff;color:var(--iris-danger);border:2px solid var(--iris-danger);box-shadow:none;padding:6px 12px;font-size:12px}
.iris-btn.danger:hover{background:var(--iris-danger);color:#fff}
/* v0.238.0 — botão DENTRO de linha de tabela: menor que o botão de formulário,
   porque a coluna de ações não pode dominar a tabela. Era o que cada tela
   resolvia com um `.btn-action` próprio (a Fila e o marketing tinham o seu, com
   valores diferentes). Só o tamanho muda: cor, foco e estados vêm do `.iris-btn`.

   CORREÇÃO v0.238.1 (revisão independente): a primeira versão deste comentário
   dizia que sem o `mini` os dois botões da linha EMPILHAM. É FALSO — quem
   impede o empilhamento é o `white-space:nowrap` na célula. Medido nas 4
   combinações em 6 larguras: com `nowrap` eles nunca empilham, com ou sem
   `mini`; sem `nowrap` empilham SEMPRE, inclusive com `mini`. Eu vi os botões
   continuarem empilhados depois de aplicar o `mini` — e mesmo assim dei o
   crédito à peça errada. O que o `mini` compra de fato: 21px a menos de altura
   de linha a 1400px (abaixo de 1200px, nada) e uma coluna de ações mais estreita. */
.iris-btn.mini{padding:5px 11px;font-size:12px;border-radius:9px;box-shadow:none}
.iris-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}

/* Tabela */
.iris-tablewrap{border:1px solid var(--iris-gray-200);border-radius:14px;overflow:hidden;overflow-x:auto}
.iris-table{width:100%;border-collapse:collapse;font-size:13.5px}
.iris-table th{background:var(--iris-surface);color:var(--iris-gray-500);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:13px 16px}
.iris-table td{padding:14px 16px;border-top:1px solid var(--iris-gray-200);color:var(--iris-gray-700)}
.iris-table tbody tr:hover{background:var(--iris-blue-50)}
.iris-table code{background:var(--iris-blue-50);color:var(--iris-blue);border-radius:6px;padding:2px 9px;font-size:12.5px;font-weight:700}

/* Upload */
.iris-upload{border:2px dashed var(--iris-blue-200);border-radius:14px;padding:22px;display:flex;flex-wrap:wrap;
  gap:14px;align-items:center;background:linear-gradient(180deg,var(--iris-blue-50),#fff)}
.iris-upload small{color:var(--iris-gray-500);font-size:12.5px}
.iris-upload a{color:var(--iris-blue);font-size:13px;text-decoration:none;font-weight:700}

/* Mensagens de feedback */
.iris-msg{padding:11px 14px;border-radius:10px;margin-top:12px;font-size:13px;display:none}
.iris-msg.ok{background:var(--iris-success-bg);border:1px solid #bfe8cd;color:var(--iris-success)}
.iris-msg.err{background:var(--iris-danger-bg);border:1px solid #f6c9c9;color:var(--iris-danger)}
/* v0.238.0 — o aviso que não é erro nem sucesso: "esta tela existe, mas o plano
   desta clínica não a inclui". A Fila tinha esse bloco como `.banner` próprio. */
.iris-msg.warn{background:var(--iris-warning-bg);border:1px solid #f0dca6;color:var(--iris-warning-ink)}
/* v0.239.0 — a `.iris-msg` nasce `display:none` porque foi feita para o caso em
   que a tela já tem a caixa no HTML e o JavaScript a REVELA depois de salvar.
   A Saúde da clínica tem o caso oposto: a mensagem é INJETADA por innerHTML no
   momento em que aparece, já devendo estar visível. Adotar o componente cru ali
   teria escondido para sempre todo "Salvo" e todo "Erro:" da aba de limiares —
   a mesma classe de estrago que a memória registra sobre unificar `.msg` às
   cegas. Não dá para inverter o padrão (`display:block` na base) sem revelar as
   caixas escondidas de todas as telas que já usam o componente; então a
   variante é de quem chega depois. */
.iris-msg.visivel{display:block}
.iris-msg ul{margin:6px 0 0;padding-left:20px}
/* Mensagem ACIMA do conteúdo a que se refere, não abaixo (2026-08-02).
   `documentos.html` avisa antes da lista de fotos: margem embaixo, texto mais
   firme. Divergência real, virou modificador em vez de média. */
.iris-msg.topo{margin:0 0 16px;font-weight:600}
.iris-empty{color:var(--iris-gray-500);padding:22px;text-align:center;font-size:13px}

/* Pré-visualização de referência de tom (aba Mensagens da Fase 4) —
   NÃO é preview de envio literal (o texto não é substituído/enviado como
   está, ver comentário de atendimento_zone.py). Visual neutro (nem verde de
   marca do WhatsApp) de propósito, pra não sugerir "isto é o app real". */
.iris-wa-preview{background:var(--iris-surface);border:1px solid var(--iris-gray-200);border-radius:14px;padding:16px;max-width:420px}
.iris-wa-bubble{background:var(--iris-white);border:1px solid var(--iris-gray-200);border-radius:12px;border-bottom-left-radius:4px;padding:10px 14px;font-size:13.5px;line-height:1.5;color:var(--iris-gray-700);white-space:pre-wrap}

/* Abas (v0.239.0) — peça que faltava da Fase 3.
   ESCOPO, medido antes de escrever: quatro telas declaram `.tabs`/`.tab` no
   próprio <style>, mas NÃO são o mesmo componente. `health`, `billing` e `drill`
   são a mesma família — aba sublinhada, inativa cinza, ativa com a borda
   inferior na cor de destaque; variam só em gap (2/4/6px), padding e corpo da
   fonte (12,5/13/14px), que é drift, não intenção. Já `comercial_cms` é outra
   coisa: pílula com bolinha colorida por aba, sombra, cor própria por seção e
   ativo PREENCHIDO. Unificar as quatro apagaria a navegação colorida do CMS —
   é a armadilha do `.card` que tem o mesmo nome em telas diferentes. Esta peça
   é a família sublinhada; o CMS fica de fora de propósito.
   O `drill` tem 9 abas e precisa rolar de lado; isso vira variante quando ele
   for adotado — não nasce aqui por suposição. */
.iris-tabs{display:flex;gap:4px;border-bottom:1px solid var(--iris-gray-200);margin-bottom:18px}
.iris-tab{padding:9px 14px;cursor:pointer;color:var(--iris-gray-500);border:0;background:transparent;
  border-bottom:2px solid transparent;font:inherit;font-size:13.5px;font-weight:650;
  transition:color .12s,border-color .12s}
.iris-tab:hover{color:var(--iris-ink)}
/* `.ativa`, não `.active`: o resto do arquivo é em português (`.compacto`,
   `.neutro`, `.mini`, `.perigo`) e misturar os dois idiomas na mesma família é
   como a tela seguinte erra o nome da classe e não vê nada acontecer. */
.iris-tab.ativa{color:var(--iris-ink);border-bottom-color:var(--iris-blue);font-weight:800}
/* Variante ROLÁVEL (v0.249.0) — a peça que faltava, prevista desde que esta
   família nasceu (comentário acima): telas com muitas abas (drill.html, 9)
   não cabem na largura fixa. Opt-in via `.rolavel` para não afetar health/
   billing, que têm só 2 abas cada e não precisam disto. */
.iris-tabs.rolavel{flex-wrap:nowrap;overflow-x:auto;position:relative;scrollbar-width:none}
.iris-tabs.rolavel::-webkit-scrollbar{display:none}
.iris-tabs.rolavel::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
  background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
.iris-tabs.rolavel .iris-tab{flex:none}
/* Aba desabilitada ("em breve") — Fase 4, tela de Agentes: abas que ainda não
   existem aparecem na régua (honesto sobre o que falta) mas não são clique
   morto. `pointer-events:none` porque a aba tem `onclick`; sem isto o clique
   ainda dispararia mesmo com `disabled` (atributo de formulário, não de div). */
.iris-tab[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* Ponto de "alteração não salva" na aba — mesma função do `item.dirty` de
   biblioteca de abas com edição multi-seção (cada aba salva por si). */
.iris-tab .ponto-sujo{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--iris-warning);margin-left:6px;vertical-align:middle}
/* v0.292.0 — mesmo defeito do `.iris-badge` acima: sem este `[hidden]`, o
   ponto fica sempre visível na aba, mesmo com a checagem de "sujo" correta. */
.iris-tab .ponto-sujo[hidden]{display:none}
/* v0.239.0, cobrado pela SEGUNDA tela a adotar as abas (billing) — e é
   exatamente o que a lição da v0.238.x previa: a peça nasceu calibrada para UM
   caso. A Saúde troca os painéis por `style.display` no JavaScript; a billing
   troca por CLASSE, que é o jeito melhor (o estado da aba fica no HTML, não
   espalhado em atribuições de estilo). Sem esta peça, a 2ª tela teria mantido
   `.tab-panel` local e a 3ª inventaria o dela — que é como o drift começa. */
.iris-tab-panel{display:none}
.iris-tab-panel.ativa{display:block}

/* ============================================================================
   Conversas (Painel Único) — réplica fiel da tela APROVADA do Design System
   (ui_kits/painel/ConversasScreen.jsx): cabeçalho + placar IA/humano, lista de
   conversas à esquerda, transcrição ao vivo à direita (balões azul=Íris,
   branco=paciente), barra de hand-off. Usa só os tokens da marca acima.
   ============================================================================ */
/* Cabeçalho da página (título + subtítulo + placar à direita) */
.iris-conv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:18px}
.iris-conv-head h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.iris-conv-head p{color:var(--iris-gray-500);font-size:14px;margin:0}
.iris-conv-stats{display:flex;gap:8px;flex-wrap:wrap}
.iris-conv-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:8px;white-space:nowrap}
.iris-conv-badge.ia{background:var(--iris-success-bg);color:var(--iris-success)}
.iris-conv-badge.ia::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--iris-success)}
.iris-conv-badge.hum{background:var(--iris-warning-bg);color:var(--iris-warning-ink)}

/* Grade: lista (300) | transcrição (resto) — dois cartões, alinhados ao topo */
.iris-inbox{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}

/* Coluna esquerda — lista de conversas (cartão) */
.iris-ibx-list{background:var(--iris-white);border:1px solid var(--iris-gray-200);
  border-radius:var(--iris-radius);overflow:hidden;box-shadow:var(--iris-shadow);
  max-height:540px;overflow-y:auto}
.iris-ibx-item{display:flex;gap:11px;align-items:center;width:100%;text-align:left;cursor:pointer;
  font:inherit;padding:13px 15px;border:none;border-bottom:1px solid var(--iris-gray-200);
  border-left:3px solid transparent;background:var(--iris-white);transition:background .15s}
.iris-ibx-item:last-child{border-bottom:none}
.iris-ibx-item:hover{background:var(--iris-surface)}
.iris-ibx-item.active{background:var(--iris-blue-50);border-left-color:var(--iris-blue)}
.iris-ibx-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.3px;background:var(--iris-teal)}
.iris-ibx-av.purple{background:var(--iris-purple)}
.iris-ibx-body{flex:1;min-width:0}
.iris-ibx-row1{display:flex;justify-content:space-between;gap:6px}
.iris-ibx-name{font-weight:700;font-size:13.5px;color:var(--iris-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iris-ibx-time{font-size:11px;color:var(--iris-gray-500);flex:none}
.iris-ibx-row2{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-top:3px}
.iris-ibx-prev{font-size:12px;color:var(--iris-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iris-ibx-badge{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--iris-success);
  color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.iris-ibx-who{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.iris-ibx-who.ia{color:var(--iris-teal)}
.iris-ibx-who.hum{color:var(--iris-gray-500)}

/* Coluna direita — transcrição (cartão de altura fixa) */
.iris-ibx-conv{background:var(--iris-white);border:1px solid var(--iris-gray-200);
  border-radius:var(--iris-radius);overflow:hidden;box-shadow:var(--iris-shadow);
  display:flex;flex-direction:column;height:540px}
.iris-ibx-patient{display:flex;align-items:center;gap:11px;padding:14px 18px;
  border-bottom:1px solid var(--iris-gray-200);background:var(--iris-white)}
.iris-ibx-patient .pinfo{flex:1;min-width:0}
.iris-ibx-patient .nm{font-weight:700;font-size:14.5px;color:var(--iris-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iris-ibx-patient .sub{font-size:12px;color:var(--iris-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iris-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;flex:none}
.iris-tag.blue{background:var(--iris-blue-50);color:var(--iris-blue)}
.iris-tag.teal{background:rgba(35,179,164,.13);color:var(--iris-teal)}
.iris-ibx-back{display:none;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--iris-gray-500);padding:0 4px}
.iris-ibx-thread{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--iris-surface)}
.iris-ibx-day{align-self:center;font-size:11px;font-weight:600;color:var(--iris-gray-500);margin:2px 0}
.iris-bubble{max-width:74%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;
  box-shadow:var(--iris-shadow-sm);word-wrap:break-word;white-space:pre-wrap}
.iris-bubble .meta{display:block;font-size:10px;margin-top:4px;opacity:.6;text-align:right}
.iris-bubble.in{align-self:flex-start;background:var(--iris-white);color:var(--iris-ink);
  border:1px solid var(--iris-gray-200);border-bottom-left-radius:4px}
/* Íris (IA) = roxo degradê · operador (humano) = azul degradê (cores escolhidas pelo Eric) */
.iris-bubble.out{align-self:flex-end;color:#fff;background:linear-gradient(135deg,var(--iris-purple-400),var(--iris-purple));border-bottom-right-radius:4px}
.iris-bubble.out.op{background:linear-gradient(135deg,var(--iris-blue),var(--iris-blue-700))}
.iris-bubble.sys{align-self:center;background:var(--iris-warning-bg);color:var(--iris-warning-ink);font-size:12px;box-shadow:none;text-align:center}
.iris-bubble .att{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.iris-att-img{max-width:240px;max-height:280px;border-radius:10px;display:block;cursor:pointer;margin:2px 0}
.iris-att-audio{display:block;margin:2px 0;max-width:240px;height:40px}
a.att{color:inherit;text-decoration:underline}
/* Barra de hand-off (quem está respondendo + assumir/devolver) */
.iris-ibx-handoff{display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-top:1px solid var(--iris-gray-200);background:var(--iris-white)}
.iris-ibx-handoff .stat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--iris-gray-500)}
.iris-ibx-handoff .stat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--iris-gray-500)}
.iris-ibx-handoff .stat.on{color:var(--iris-success)}
.iris-ibx-handoff .stat.on::before{background:var(--iris-success)}
.iris-ibx-handoff .grow{flex:1}
.iris-ibx-placeholder{flex:1;display:grid;place-items:center;text-align:center;color:var(--iris-gray-500);padding:30px}
.iris-ibx-placeholder .big{font-size:40px;margin-bottom:10px;opacity:.5}
/* Compositor (aparece quando a conversa está em atendimento humano — F2/F3b) */
.iris-ibx-composer{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;
  border-top:1px solid var(--iris-gray-200);background:var(--iris-white)}
.iris-ibx-composer textarea{flex:1;resize:none;max-height:120px;min-height:42px;line-height:1.4;
  border:2px solid var(--iris-gray-200);border-radius:12px;padding:10px 14px;font-size:14px;font-family:inherit}
.iris-ibx-composer textarea:focus{outline:none;border-color:var(--iris-blue)}
.iris-ibx-composer .iris-btn{flex:none;height:42px}

/* ============================================================================
   Sino de Notificações (Central de Notificações do painel — /painel/app/notificacoes).
   Um botão de ícone na topbar + badge numérico (não-vistas) + dropdown com o feed
   (mais recente primeiro). Usado em todas as telas de painel_clinica com topbar.
   ============================================================================ */
.iris-notif-wrap{position:relative}
.iris-notif-badge{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 3px;
  border-radius:999px;background:var(--iris-danger);color:#fff;font-size:9.5px;font-weight:700;
  display:none;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--iris-white)}
.iris-notif-panel{position:absolute;top:48px;right:0;width:340px;max-width:calc(100vw - 24px);
  max-height:420px;overflow-y:auto;background:var(--iris-white);border:1px solid var(--iris-gray-200);
  border-radius:var(--iris-radius);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown)}
.iris-notif-panel .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--iris-gray-200);position:sticky;top:0;background:var(--iris-white)}
.iris-notif-panel .hd b{font-size:13.5px}
.iris-notif-panel .hd button{border:0;background:transparent;color:var(--iris-blue);font-size:12px;
  font-weight:600;cursor:pointer;padding:2px;font-family:inherit}
.iris-notif-panel .hd button:hover{text-decoration:underline}
.iris-notif-panel .list{display:flex;flex-direction:column}
.iris-notif-panel .item{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--iris-gray-200);background:transparent;cursor:pointer;
  padding:11px 14px;font:inherit;color:inherit}
.iris-notif-panel .item:last-child{border-bottom:none}
.iris-notif-panel .item:hover{background:var(--iris-surface)}
.iris-notif-panel .item .dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--iris-gray-200)}
.iris-notif-panel .item .dot.pend{background:var(--iris-danger)}
.iris-notif-panel .item .dot.info{background:var(--iris-blue)}
.iris-notif-panel .item .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.iris-notif-panel .item .tit{font-size:12.5px;font-weight:700;color:var(--iris-ink)}
.iris-notif-panel .item .det{font-size:12px;color:var(--iris-gray-500);white-space:normal;word-break:break-word}
.iris-notif-panel .item .acao{font-size:11.5px;color:var(--iris-blue);font-weight:600}
.iris-notif-panel .item .qd{flex:none;font-size:10.5px;color:var(--iris-gray-500);margin-top:1px;white-space:nowrap}
.iris-notif-panel .empty{padding:26px 16px;text-align:center;color:var(--iris-gray-500);font-size:12.5px}
@media (max-width:640px){
  .iris-notif-panel{position:fixed;top:60px;left:12px;right:12px;width:auto;max-width:none;max-height:70vh}
}

/* Mobile (PWA mobile-first) */
@media (max-width:640px){
  .iris-header{padding:10px 12px}
  .iris-logo img{height:34px}
  .iris-nav a{flex:1 1 auto;min-height:40px;justify-content:center}
  .iris-main{padding:14px}
  .iris-section,.iris-hero{padding:18px}
  .iris-cards{grid-template-columns:1fr}
  .iris input,.iris select,.iris .iris-btn{font-size:16px}  /* evita zoom do iOS */
  /* Inbox: vira uma coluna; a conversa some até escolher (toggle via .show-conv) */
  .iris-inbox{grid-template-columns:1fr}
  .iris-ibx-list{max-height:none}
  .iris-ibx-conv{height:calc(100vh - 180px)}
  .iris-inbox .iris-ibx-conv{display:none}
  .iris-inbox.show-conv .iris-ibx-list{display:none}
  .iris-inbox.show-conv .iris-ibx-conv{display:flex}
  .iris-ibx-back{display:inline-block}
  .iris-bubble{max-width:86%}
}

/* ============================================================================
   Íris — polimento visual v2 (SÓ apresentação; aditivo). Ao levar de volta pra
   VPS, anexar este bloco ao final de /painel/iris.css. Nenhum seletor novo é
   exigido no HTML: só refina o que já existe.
   ============================================================================ */
.iris-app ::selection{background:rgba(26,86,160,.16)}
.iris-app :is(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(26,86,160,.30);outline-offset:1px}

/* Topbar — título mais presente; botões numa régua única de 36px */
.iris-topbar{gap:10px}
.iris-topbar>strong{font-size:16px!important;font-weight:800!important;letter-spacing:-.2px;color:var(--iris-ink);white-space:nowrap}
.iris-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;white-space:nowrap;text-decoration:none}
.iris-btn svg{width:15px;height:15px;flex:none}
.iris-topbar .iris-btn{height:36px;padding:0 14px;font-size:13px}
.iris-btn.sec{border-width:1.5px;font-weight:650}
.iris-btn.sec:hover{transform:translateY(-1px)}
a.iris-btn:hover{text-decoration:none}

/* Sidebar — trilho ativo com o degradê da marca; raios coerentes */
.iris-side-link{border-radius:9px}
.iris-side-link.active::before{background:var(--iris-grad)}
.iris-wa{border-radius:14px}
.iris-side-clinic .av svg{width:16px;height:16px}

/* Cartões de dado (hub/superadmin legado) — raio 14, hover com respiro */
.iris-app .cards{gap:18px}
.iris-app .card{border-radius:14px;padding:18px;box-shadow:var(--iris-shadow-sm);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.iris-app .card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(15,23,41,.10)}
.iris-app .card h3{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.iris-app .card .kpi{border-radius:10px}
.iris-app .card .kpi .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.iris-app .tag{border-radius:999px;padding:3px 10px;font-weight:650}
.iris-painel .btn{border-radius:9px;font-weight:600}
.iris-card .val{font-variant-numeric:tabular-nums}
.iris-table td{font-variant-numeric:tabular-nums}

/* Hero — pílulas alinhadas, ícone de linha */
.iris-hero .iris-pill{display:inline-flex;align-items:center;gap:7px}
.iris-hero .iris-pill svg{width:14px;height:14px;flex:none}

/* Estados vazios / carregando — quadro tracejado gentil */
.iris-app .empty,.iris-empty{padding:44px 20px;border:1.5px dashed var(--iris-gray-200);border-radius:14px;background:var(--iris-white)}

/* Barra de botões — 4 telas comerciais do superadmin tinham a MESMA regra local
   (proposta_comercial, simulacao, roi_comercial, mudanca_plano), byte a byte */
.iris-app .btns{display:flex;gap:8px;flex-wrap:wrap}

/* Painel de seção — 8 telas repetiam a mesma caixa (fundo+borda+raio),
   3 variantes reais: com sombra (.elevado), com respiro embaixo (.espacado),
   ou nenhuma das duas (comercial_cms) */
.iris-app .panel{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.iris-app .panel.elevado{box-shadow:var(--shadow-sm)}
.iris-app .panel.espacado{margin-bottom:18px}

/* Formulário empilhado — 5 telas comerciais do superadmin, 2 larguras reais
   (640px na maioria, 520px em .estreito). comercial_cms tem um .frm com
   formato diferente (padding+gap próprios, sem largura máxima) e NÃO entra
   nesta família — divergência real, não drift. */
.iris-app .frm{display:flex;flex-direction:column;gap:14px;max-width:640px}
.iris-app .frm.estreito{max-width:520px}

/* Cabeçalho de painel — mesma caixa em 7 telas, mas 2 papéis diferentes
   escondidos atrás do mesmo nome: cabeçalho com título+ação ao lado (flex),
   e rótulo de seção só-texto (uppercase, sem flex). Decisão do Eric
   (2026-08-03): 2 classes separadas, não um modificador em cima da outra.
   .entre é pra quem empurra o conteúdo pras pontas (comercial_cms,
   reunioes_comerciais) — as demais só encostam com o gap padrão. */
.iris-app .panel-h{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.iris-app .panel-h.entre{justify-content:space-between}
.iris-app .panel-h .ttl{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.iris-app .panel-h-rotulo{padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}

/* Banner de aviso/sucesso/erro — 5 telas tinham a cor embutida no .banner
   BASE, cada uma com receita diferente (2 receitas de laranja, 1 vermelha
   por padrão, 1 sem cor nenhuma). Decisão do Eric (2026-08-03): base sem
   cor; laranja forte (agentbot.html) vira o padrão de aviso via .warn; cor
   só entra com .warn/.ok/.bad, no mesmo padrão que direitos.html já usava. */
.iris-app .banner{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.iris-app .banner.warn{border:1px solid var(--iris-warning);background:var(--iris-warning-bg);color:var(--warn)}
.iris-app .banner.ok{border:1px solid var(--iris-success);background:var(--iris-success-bg);color:var(--ok)}
.iris-app .banner.bad{border:1px solid var(--iris-danger);background:var(--iris-danger-bg);color:var(--danger)}

/* Busca global (⌘K) — vidro e cantos da marca */
div#cmdk-bg{background:rgba(15,23,41,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
div#cmdk-box{border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,41,.30)}
input#cmdk-input{font-family:inherit}
#cmdk-results .cmdk-item{border-radius:9px}
#cmdk-results .cmdk-item:hover{background:var(--iris-blue-50)}

/* Diálogos nativos — véu com blur */
dialog::backdrop{background:rgba(15,23,41,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Legado (_BASE_CSS) — botões, abas, tabelas.
   v0.275.0 — escopo trocado de `.iris-app` pra `.iris-painel` (classe do
   `<body>`, presente nos dois painéis): mesmo bug do `.abtn` (achado do
   Eric) — um `.btn` num modal criado via `document.body.appendChild` nasce
   FORA de `.iris-app` (que já fechou no HTML), então perdia todo este
   polimento (fica só com o fallback cru de `_base_css.html`, que também só
   existe no superadmin — no painel da clínica um `.btn` fora de `.iris-app`
   ficava tão cru quanto o `.abtn` ficava). `.iris-painel` cobre os dois. */
.iris-painel .btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;font-weight:600;white-space:nowrap;transition:all var(--dur-fast) var(--ease-standard)}
.iris-topbar .btn{height:36px;padding:0 14px;font-size:13px}
.iris-painel .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,86,160,.18)}
.iris-painel .btn.ghost:hover{background:var(--iris-blue-50)}
.iris-painel .btn.danger:hover{box-shadow:0 4px 12px rgba(220,38,38,.20)}
.iris-painel .btn:active{transform:scale(.96);transition-duration:.05s}
.iris-app .tabs{gap:2px;scrollbar-width:none}
.iris-app .tabs::-webkit-scrollbar{display:none}
.iris-app .tab{font-weight:600;border-bottom-width:2.5px;transition:color var(--dur-fast) var(--ease-standard)}
.iris-app .tab:hover{color:var(--text)}
.iris-app .tab.active{font-weight:700}
.iris-app .panel-body{border-radius:14px;padding:20px;box-shadow:var(--iris-shadow-sm)}
.iris-app .toolbar input[type=search],.iris-app .toolbar input[type=text]{height:36px;border-radius:9px;padding:0 12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.iris-app .toolbar input[type=search]:focus,.iris-app .toolbar input[type=text]:focus{border-color:var(--iris-blue);box-shadow:0 0 0 3px rgba(26,86,160,.16)}
.iris-app table.grid th{font-weight:700;letter-spacing:.4px;font-size:10.5px;background:var(--iris-surface)}
.iris-app table.grid td{font-variant-numeric:tabular-nums}
.iris-app table.grid tr:hover{background:var(--iris-blue-50)}

/* Pop-ups (modais legados) — véu com blur, cantos e sombra da marca */
.modal-bg{background:rgba(15,23,41,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-box{border-radius:16px;box-shadow:0 24px 70px rgba(15,23,41,.30);padding:24px}
.modal-box h2{font-size:18px;font-weight:800;letter-spacing:-.2px}
.modal-box .field label{font-weight:700}

/* Chips de sugestão (consoles de chat) — nunca quebram linha */
.as-chip{white-space:nowrap}

/* Barras de rolagem discretas dentro do app */
.iris-app ::-webkit-scrollbar{width:10px;height:10px}
.iris-app ::-webkit-scrollbar-track{background:transparent}
.iris-app ::-webkit-scrollbar-thumb{background:rgba(15,23,41,.16);border-radius:8px;border:3px solid transparent;background-clip:content-box}
.iris-app ::-webkit-scrollbar-thumb:hover{background-color:rgba(15,23,41,.28)}


.iris-side{padding:20px 14px 16px;gap:2px}
.iris-side-logo{padding:2px 8px 16px;margin-bottom:2px;border-bottom:1px solid var(--iris-gray-200)}
.iris-side-logo img{height:38px}
.iris-side-nav{gap:1px}
.iris-side-link{border-radius:10px;padding:8px 11px;gap:11px;transition:background .15s,color .15s}
.iris-side-link svg{opacity:.72;transition:opacity .15s}
.iris-side-link:hover svg,.iris-side-link.active svg{opacity:1}
.iris-side-link.active{box-shadow:inset 0 0 0 1px rgba(26,86,160,.12)}
.iris-side-sep{position:relative;margin-top:14px;padding:14px 12px 6px;font-size:9.5px}
.iris-side-sep::before{content:"";position:absolute;left:12px;right:12px;top:6px;height:1px;background:var(--iris-gray-200)}
.iris-side-nav>.iris-side-sep:first-child{margin-top:2px}
.iris-side-nav>.iris-side-sep:first-child::before{content:none}
.iris-side-clinic{padding:12px 8px 0}
.iris-side-clinic .av{box-shadow:0 3px 8px rgba(74,44,99,.28)}
.iris-exit{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--iris-gray-200);color:var(--iris-gray-500);background:#fff;padding:0;transition:all .15s;flex:none}
.iris-exit svg{width:16px;height:16px}
.iris-exit:hover{border-color:var(--iris-danger);color:var(--iris-danger);background:var(--iris-danger-bg);transform:translateY(-1px)}
.iris-hero{padding:32px 36px;box-shadow:0 14px 38px rgba(74,44,99,.22)}
.iris-hero h1{font-size:27px}
.iris-hero p{font-size:14.5px;line-height:1.6}
.iris-hero .iris-pill{display:inline-flex;align-items:center;gap:7px}
.iris-section{border-radius:16px;transition:box-shadow .18s}
.iris-grid-head .ic{background:linear-gradient(135deg,var(--iris-blue-50),#fff);box-shadow:inset 0 0 0 1px var(--iris-blue-200)}
.iris-grid-head h2{letter-spacing:-.2px}
.iris-cards{gap:16px}
.iris-card{border-radius:14px;transition:transform .16s cubic-bezier(.2,.6,.2,1),box-shadow .16s}
.iris-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,41,.10)}
.iris-card .val{letter-spacing:-.5px}
.iris-tablewrap{border-radius:14px}
.iris-table th{font-weight:800}
.iris-table tbody tr{transition:background .12s}
.iris-upload{border-radius:14px;gap:16px}
.iris-badge,.iris-super .iris-app .badge{border-radius:999px;font-weight:800}
.iris-topbar{gap:12px}
.iris-iconbtn{border-radius:10px}
.iris-notif-panel{border-radius:16px}


/* ============================================================================
   Íris — polimento v4: passada MAIS OUSADA (só apresentação, aditiva, cascata
   sobre v2/v3). Traz o degradê da marca pra dentro da UI (não só no hero),
   tipografia mais forte, ícones com chip colorido, botão primário em degradê.
   ============================================================================ */
/* Sidebar — item ativo vira um chip cheio no degradê da marca (não só risco) */
.iris-side-link.active{background:var(--iris-grad)!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(74,44,99,.28)!important}
.iris-side-link.active svg{opacity:1!important;color:#fff!important}
.iris-side-link.active::before{display:none!important}
.iris-side-link:hover:not(.active){background:var(--iris-blue-50)!important}
.iris-side-logo .nm{font-size:19px!important;background:var(--iris-grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px!important}

/* Hero — textura sutil de pontos + heading maior + pílulas com contraste */
.iris-hero{position:relative;padding:36px 40px!important;box-shadow:0 18px 44px rgba(74,44,99,.28)!important}
.iris-hero::after{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.4px,transparent 1.4px);
  background-size:18px 18px;mix-blend-mode:overlay}
.iris-hero h1{font-size:30px!important;font-weight:900!important}
.iris-hero p{font-size:15px!important}
.iris-hero .iris-pill{background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.32)!important;
  font-weight:700!important}

/* Ícones de seção — chip em degradê, ícone branco */
.iris-grid-head .ic{background:var(--iris-grad)!important;color:#fff!important;
  box-shadow:0 4px 10px rgba(74,44,99,.25)!important;font-size:15px!important}

/* Cards de KPI — número em degradê, borda superior colorida */
.iris-card{border-top:3px solid transparent!important;
  border-image:var(--iris-grad) 1!important}
.iris-card .val{background:var(--iris-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:900!important}
.iris-card.warn .val{background:linear-gradient(120deg,#f7b733,#f59e0b);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.iris-card.ok .val{background:linear-gradient(120deg,#34d399,#16a34a);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}

/* Botão primário — degradê da marca, mais presença */
.iris-btn:not(.sec):not(.danger){background:var(--iris-grad)!important;
  box-shadow:0 6px 16px rgba(74,44,99,.28)!important;font-weight:700!important}
.iris-btn:not(.sec):not(.danger):hover{filter:brightness(1.08);transform:translateY(-1px)}

/* Badges de destaque — degradê sutil quando "ok"/"info" */
.iris-badge,.iris-super .iris-app .badge{font-weight:800!important}

/* Tabela — cabeçalho com leve tom de marca */
.iris-table th{background:linear-gradient(180deg,#F7F5FB,#F2EEF9)!important;color:var(--iris-purple)!important;
  font-weight:800!important}

/* Notificação — badge em degradê */
.iris-notif-badge{background:var(--iris-grad)!important}

/* Avatar do topo / clínica — anel com a marca */
.iris-topbar .av,.iris-side-clinic .av{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(74,44,99,.25)!important}

/* Separadores da sidebar — mais presença */
.iris-side-sep{color:var(--iris-purple)!important;font-weight:800!important}

/* ============================================================================
   Íris — shell ESCURO do painel SUPERADMIN (só a sidebar; o painel da clínica
   continua com .iris-side clara, intocada). Vars prefixadas --sh- pra não
   colidir com --bg/--muted/--warn/--danger genéricos que _base_css.html
   redefine por página. Cores da marca reaproveitam os tokens --iris-* já
   existentes (nada de --teal/--blue/--purple/--grad novos).
   ============================================================================ */
:root{
  --sh-bg0:#251536; --sh-bg1:#1A0E27; --sh-line:rgba(255,255,255,.08);
  --sh-text:#BCAFCE; --sh-text-dim:#8B7BA3; --sh-label:#6E5F86; --sh-white:#F4F1F8;
}
/* v0.272.0/v0.273.0/v0.274.0 — menu recolhido pra só ícones por padrão,
   expande no hover (pedido do Eric). v0.273.0: (a) trocado de flutuar por
   cima do conteúdo pra EMPURRAR `.iris-content` (o Eric viu item da direita
   ficando coberto) — sem precisar de wrapper `.side-fill`/`position:absolute`
   nenhum, é só o próprio `.side` (item flex de verdade) animando a largura;
   (b) transição alongada de .16s pra .3s (Eric: "muito rápido"). v0.274.0:
   trocado `:hover` puro por uma classe `.is-expanded` controlada por JS
   (`iris-turbo.js`) — o Turbo desmonta/remonta o `<aside permanent>` a cada
   navegação, e o navegador NÃO reavalia `:hover` sozinho sem um novo
   `mousemove`; clicar um item com o mouse parado em cima do menu fazia ele
   "recolher" na cara do usuário mesmo sem o cursor ter saído da área (Eric:
   "se o mouse permanecer na área expandida, o menu deve permanecer
   expandido"). A classe é reaplicada em todo `turbo:load` comparando a
   última posição conhecida do mouse contra a caixa do menu. */
.side{width:64px;flex:none;background:linear-gradient(178deg,var(--sh-bg0),var(--sh-bg1) 70%);
  color:var(--sh-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow:hidden;transition:width .3s ease}
.side.is-expanded{width:256px;overflow:visible}
.side:not(.is-expanded) .side-logo{justify-content:center;padding-left:0;padding-right:0}
.side:not(.is-expanded) .side-logo>div{display:none}
.side:not(.is-expanded) .side-alertas{padding-left:8px;padding-right:8px}
.side:not(.is-expanded) .side-alertas-btn span:first-of-type{display:none}
.side:not(.is-expanded) .side-alertas .iris-notif-badge{position:absolute;top:2px;right:2px;margin-left:0}
.side:not(.is-expanded) .ngroup .glbl{visibility:hidden}
.side:not(.is-expanded) .nitem span:not(.pill){display:none}
.side:not(.is-expanded) .nitem .pill{position:absolute;top:5px;right:3px;min-width:14px;height:14px;font-size:8px;padding:0}
.side:not(.is-expanded) .side-foot{justify-content:center;padding-left:0;padding-right:0}
.side:not(.is-expanded) .side-foot .who{display:none}
.side-logo{display:flex;align-items:center;gap:11px;padding:20px 18px 16px}
.side-logo .mark{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.side-logo .mark img{width:28px;height:auto;display:block}
.side-logo .nm{font-size:17px;font-weight:900;letter-spacing:2.5px;color:var(--sh-white);line-height:1;white-space:nowrap}
.side-logo .sub{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--sh-text-dim);margin-top:3px;white-space:nowrap}
.side-alertas{position:relative;padding:0 18px 8px}
.side-alertas-btn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;height:32px;box-sizing:border-box;border-radius:9px;
  border:1px solid var(--sh-line);background:rgba(255,255,255,.03);color:var(--sh-text);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.side-alertas-btn:hover{background:rgba(255,255,255,.07);color:var(--sh-white)}
.side-alertas-btn svg{flex:none;width:16px;height:16px;stroke-width:1.75;opacity:.85}
.side-alertas-btn span:first-of-type{flex:1}
.side-alertas .iris-notif-badge{position:static;margin-left:auto}
.side-nav{flex:1;overflow-y:auto;padding:2px 12px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.side-nav::-webkit-scrollbar{width:5px}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.ngroup{margin-top:14px}
.ngroup:first-child{margin-top:4px}
.ngroup .glbl{font-size:9.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--sh-label);padding:0 10px 5px;white-space:nowrap;overflow:hidden}
.nitem{display:flex;align-items:center;gap:10px;padding:7px 10px;height:31px;box-sizing:border-box;
  margin-bottom:1px;border-radius:9px;
  color:var(--sh-text);font-size:13px;font-weight:500;position:relative;transition:background .15s,color .15s;
  text-decoration:none;white-space:nowrap}
.nitem span:not(.pill){overflow:hidden}
.nitem:hover{text-decoration:none}
.nitem svg{flex:none;width:17px;height:17px;stroke-width:1.75;opacity:.75;transition:opacity .15s}
.nitem:hover{background:rgba(255,255,255,.05);color:var(--sh-white);text-decoration:none}
.nitem:hover svg{opacity:1}
.nitem.on{background:rgba(255,255,255,.08);color:var(--sh-white);font-weight:700}
.nitem.on svg{opacity:1;color:var(--iris-teal-300)}
.nitem.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--iris-teal),var(--iris-teal-300))}
.nitem .pill{flex:none;box-sizing:border-box;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--iris-danger);
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.side-foot{border-top:1px solid var(--sh-line);padding:12px 14px;display:flex;align-items:center;gap:10px}
.side-foot .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--iris-grad);
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800}
.side-foot .who{flex:1;min-width:0}
.side-foot .who b{display:block;font-size:12.5px;color:var(--sh-white);line-height:1.2}
.side-foot .who span{font-size:10.5px;color:var(--sh-text-dim)}
.side-foot .sair{flex:none;width:32px;height:32px;border-radius:9px;border:none;background:transparent;
  color:var(--sh-text-dim);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.side-foot .sair:hover{background:rgba(220,38,38,.18);color:#F1968F}
.side-foot .sair svg{width:16px;height:16px}

@media (max-width:860px){
  .iris-super .iris-app{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
  .side-logo{padding:0 8px 0 0}
  .side-nav{flex:1 1 100%;display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;order:3;padding:2px 0}
  .ngroup{margin-top:0;display:flex;gap:4px;flex:none}
  .ngroup .glbl{display:none}
  .nitem{width:auto;margin:0;flex:none;white-space:nowrap}
  .nitem.on::before{display:none}
  .side-foot{margin-top:0;border-top:0;order:2;padding:0 0 0 8px}
}

/* ============================================================================
   Íris — CONTEÚDO do conceito novo do superadmin (Claude Design, redesign/*,
   sync 2026-07-06). Fonte: conceito.css. Escopado sob `.iris-super .iris-app`
   (só telas com a sidebar escura) pra nunca vazar pro painel da clínica, que
   já tem `.card`/`.badge`/etc próprios com outro visual.
   Ponte de tokens: os nomes que o conceito.css usa (--card,--line,--ink,--ok,
   --blue,--grad,...) mapeiam pros tokens que já existem — _base_css.html (por
   página, superadmin) e --iris-* (aqui). Nenhum nome novo pra cor "de base";
   só os que faltavam (--line-2,--teal,--purple,--blue-700,--grad,--shadow-*,
   --ok-bg,--warn-bg,--danger-bg) ganham valor direto reaproveitando --iris-*.
   ============================================================================ */
:root{
  --card:var(--panel); --line:var(--border); --line-2:#DDD8E8; --ink:var(--text);
  --body:var(--muted); --ok:var(--success); --ok-bg:var(--iris-success-bg);
  --warn-bg:var(--iris-warning-bg); --danger-bg:var(--iris-danger-bg);
  --teal:var(--iris-teal); --teal-300:var(--iris-teal-300); --purple:var(--iris-purple);
  --purple-400:var(--iris-purple-400); --blue:var(--accent); --blue-700:var(--accent-2);
  --grad:var(--iris-grad); --shadow-sm:var(--iris-shadow-sm); --shadow-lift:var(--iris-shadow);
}
.iris-super .iris-app .iris-content{max-width:1480px}

.iris-super .iris-app .phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.iris-super .iris-app .phead .tit .eyebrow{font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}
.iris-super .iris-app .phead .tit .eyebrow::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--grad)}
.iris-super .iris-app .phead h1{margin:2px 0 0;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.15}
.iris-super .iris-app .phead .acts{margin-left:auto;display:flex;align-items:center;gap:8px}
/* v0.275.0 — escopo era `.iris-super .iris-app .abtn`: os botões de modais
   abertos via JS (`document.body.appendChild`, ex. "Cancelar"/"Gerar CSV" do
   Hub) nascem FORA de `.iris-app` (viram irmãos, não descendentes — o
   `.iris-app` já fechou no HTML antes do <script> rodar), então nunca
   casavam com o seletor e renderizavam como `<button>` cru do navegador
   (achado do Eric). `.iris-super` sozinho (classe do `<body>`) já basta pra
   escopar certo — todo modal injetado por JS ainda é descendente do body. */
.iris-super .abtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--card);color:var(--body);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all .15s;text-decoration:none}
.iris-super .abtn svg{width:15px;height:15px;stroke-width:2}
.iris-super .abtn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px);text-decoration:none}
.iris-super .abtn:active{transform:scale(.96);transition-duration:.05s}
.iris-super .iris-app .kbd-search{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--card);color:var(--muted);font-size:13px;cursor:pointer;
  min-width:200px;transition:all .15s}
.iris-super .iris-app .kbd-search:hover{border-color:var(--blue);color:var(--blue)}
.iris-super .iris-app .kbd-search svg{width:14px;height:14px}
.iris-super .iris-app .kbd-search .k{margin-left:auto;font-size:10.5px;font-weight:700;border:1px solid var(--line-2);
  border-radius:5px;padding:1px 5px;background:var(--bg)}

.iris-super .iris-app .kpis[hidden],.iris-super .iris-app .toolrow[hidden]{display:none}
/* Componente único de "cards de número" (achado 8, 2026-07-13, Eric — antes 4
   sistemas concorrentes: .aggband/.cell numa faixa só, .pill da Frota WhatsApp,
   .card/.label/.val sem CSS da Contenção do bot, e este .kpi/.kpis, que era só
   da tela Comercial). Balões retangulares individuais, cantos arredondados,
   número em destaque colorido por semântica (.ok/.warn/.danger no valor). */
.iris-super .iris-app .kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.iris-super .iris-app .kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.iris-super .iris-app .kpi .v{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.15;font-variant-numeric:tabular-nums}
.iris-super .iris-app .kpi .v small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0}
.iris-super .iris-app .kpi .l{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.iris-super .iris-app .kpi .d{font-size:12px;color:var(--muted);margin-top:5px}
.iris-super .iris-app .kpi .d .warn{color:var(--warn);font-weight:650}
.iris-super .iris-app .kpi.ok .v{color:var(--ok)}
.iris-super .iris-app .kpi.warn .v{color:var(--warn)}
.iris-super .iris-app .kpi.danger .v{color:var(--danger)}

.iris-super .iris-app .toolrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.iris-super .iris-app .seg{display:flex;gap:6px;flex-wrap:wrap}
.iris-super .iris-app .seg button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card);cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--body);transition:all .15s}
.iris-super .iris-app .seg button:hover{border-color:var(--purple-400);color:var(--purple)}
.iris-super .iris-app .seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.iris-super .iris-app .seg button .n{font-size:11px;font-weight:800;background:rgba(23,17,38,.08);border-radius:999px;
  min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center}
.iris-super .iris-app .seg button.on .n{background:rgba(255,255,255,.22)}
.iris-super .iris-app .fq{margin-left:auto;min-width:180px;max-width:300px;flex:1}
.iris-super .iris-app .fq input{width:100%;height:34px;border:1px solid var(--line-2);border-radius:10px;padding:0 12px;
  font:inherit;font-size:13px;background:var(--card);color:var(--ink);transition:all .15s}
.iris-super .iris-app .fq input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(35,179,164,.18)}

.iris-super .iris-app .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.iris-super .iris-app .sec-label{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:8px 0 -4px;
  font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.iris-super .iris-app .sec-label::after{content:"";flex:1;height:1px;background:var(--line-2)}
.iris-super .iris-app .sec-label .hint{font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px}

.iris-super .iris-app .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;
  display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-sm);
  transition:transform .16s cubic-bezier(.2,.6,.2,1),box-shadow .16s,border-color .16s}
.iris-super .iris-app .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.iris-super .iris-app .chead{display:flex;align-items:center;gap:11px}
.iris-super .iris-app .cavatar{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px}
.iris-super .iris-app .cid{flex:1;min-width:0}
.iris-super .iris-app .cid h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iris-super .iris-app .cid .slug{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iris-super .iris-app .cgear{flex:none;color:var(--muted);display:grid;place-items:center;width:30px;height:30px;border-radius:9px;transition:all .15s}
.iris-super .iris-app .cgear:hover{color:var(--purple);background:rgba(74,44,99,.08)}
.iris-super .iris-app .cgear svg{width:16px;height:16px;stroke-width:1.75}
.iris-super .iris-app .cstate{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.iris-super .iris-app .st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;white-space:nowrap}
.iris-super .iris-app .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.iris-super .iris-app .st.ativa{background:var(--ok-bg);color:var(--ok)}
.iris-super .iris-app .st.piloto{background:#EAF1FB;color:var(--blue)}
.iris-super .iris-app .st.demo{background:rgba(23,17,38,.05);color:var(--body)}
.iris-super .iris-app .st.pend{background:var(--warn-bg);color:var(--warn)}
.iris-super .iris-app .st.susp,.iris-super .iris-app .st.cancel{background:var(--danger-bg);color:var(--danger)}
.iris-super .iris-app .st.interna{background:var(--purple);color:#fff}
.iris-super .iris-app .pl{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  border:1px dashed var(--line-2);font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.iris-super .iris-app .ckpis{display:grid;grid-template-columns:1fr 1fr 1.3fr;border-top:1px solid var(--line);padding-top:12px}
.iris-super .iris-app .ck{padding:0 12px;border-left:1px solid var(--line)}
.iris-super .iris-app .ck:first-child{padding-left:0;border-left:none}
.iris-super .iris-app .ck .v{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.2}
.iris-super .iris-app .ck .v.zero{color:var(--muted);font-weight:600}
.iris-super .iris-app .ck .l{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.iris-super .iris-app .cfoot{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:auto}
.iris-super .iris-app .cfoot svg{width:13px;height:13px;flex:none;stroke-width:1.75}
.iris-super .iris-app .cfoot .live{color:var(--ok);font-weight:650}
.iris-super .iris-app .card-conc{position:relative;overflow:hidden;border-color:rgba(74,44,99,.28)}
.iris-super .iris-app .card-conc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.iris-super .iris-app .card-conc:hover{border-color:var(--purple-400)}

/* `.iris-empty` entra junto (2026-08-02): a regra cobria só a grafia CURTA, e a
   longa é a da biblioteca. Enquanto as telas escreviam `class="empty"` ninguém
   notou — mas na primeira tela migrada pra `.iris-empty` o estado vazio perdeu
   `grid-column:1/-1` e encolheu dentro de uma grade. A linha vizinha já tratava
   as duas grafias; esta tinha ficado para trás. */
.iris-super .iris-app .empty,.iris-super .iris-app .iris-empty{grid-column:1/-1;color:var(--muted);padding:44px 20px;text-align:center;
  border:1.5px dashed var(--line-2);border-radius:16px;background:var(--card)}

/* `.badge` do superadmin adotou o visual da `.iris-badge` da biblioteca
   (2026-08-03, decisão do Eric) — pílula sólida maiúscula, não mais o
   contorno fino de antes. A régua agora mora nas regras de `.iris-badge`
   acima (linhas ~304-324, ~750, ~800), estendidas pra também casar
   `.iris-super .iris-app .badge`; aqui só a PONTE de nome pras duas variantes
   que o superadmin batizou diferente: `.err`→cores de `.danger`,
   `.purple`→cores de `.roxo`. `.badge.info` não tem irmã na biblioteca — cai
   pro azul da pílula sem modificador (é a mesma cor que já usava). */
.iris-super .iris-app section.block{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:20px;box-shadow:var(--shadow-sm)}
.iris-super .iris-app section.block.off{opacity:.45;pointer-events:none}
.iris-super .iris-app section.block h2{font-size:15px;margin:0 0 4px;display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.2px}
.iris-super .iris-app section.block h2 .ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--purple)}
.iris-super .iris-app section.block h2 .ic svg{width:16px;height:16px;stroke-width:1.75}
.iris-super .iris-app section.block .sub{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.iris-super .iris-app .field{margin-bottom:14px}
.iris-super .iris-app .field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.iris-super .iris-app .field input[type=text],.iris-super .iris-app .field input[type=search],.iris-super .iris-app .field select,.iris-super .iris-app .field textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;
  padding:10px 13px;font-family:inherit;font-size:13.5px;outline:none;background:var(--card);color:var(--ink);transition:all .15s}
.iris-super .iris-app .field :is(input,select,textarea):focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(35,179,164,.18)}
.iris-super .iris-app .field .help{font-size:11.5px;color:var(--muted);margin-top:5px}
.iris-super .iris-app .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.iris-super .iris-app .row2{grid-template-columns:1fr}}
.iris-super .iris-app .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}
.iris-super .iris-app button.do{font:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;color:#fff;background:var(--blue);transition:all .15s}
.iris-super .iris-app button.do:hover{background:var(--blue-700)}
.iris-super .iris-app button.do.ok{background:var(--ok)}
.iris-super .iris-app button.do.ghost{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.iris-super .iris-app button.do.ghost:hover{border-color:var(--teal);background:var(--card)}
.iris-super .iris-app button.do.danger{background:var(--danger)}
.iris-super .iris-app button.do:disabled{opacity:.5;cursor:not-allowed}
.iris-super .iris-app .hint{font-size:12.5px;color:var(--muted)}
.iris-super .iris-app .alert{margin-top:12px;border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.5;display:flex;gap:9px}
.iris-super .iris-app .alert.warn{background:var(--warn-bg);border:1px solid rgba(180,115,10,.3);color:var(--ink)}
.iris-super .iris-app .alert .ai{flex:none;color:var(--warn)}
.iris-super .iris-app .alert .ai svg{width:16px;height:16px;stroke-width:2}
.iris-super .iris-app .kv{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:6px 0;font-size:13px;align-items:center}
.iris-super .iris-app .kv .k{color:var(--muted);font-weight:700}
.iris-super .iris-app .kv select,.iris-super .iris-app .kv input{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:13px;
  outline:none;background:var(--card);color:var(--ink)}
.iris-super .iris-app .kv :is(select,input):focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(35,179,164,.18)}
.iris-super .iris-app .msg{padding:10px 14px;border-radius:10px;margin:0 0 16px;font-size:13px;font-weight:600;display:none}
.iris-super .iris-app .msg.err{background:var(--danger-bg);border:1px solid rgba(220,38,38,.3);color:var(--danger)}
.iris-super .iris-app .msg.ok{background:var(--ok-bg);border:1px solid rgba(22,163,74,.3);color:var(--ok)}
/* `.warn` faltava (2026-08-03) — a irmã `.iris-msg.warn` tem, esta não. Nenhuma
   tela chama `showMsg(..., 'warn')` hoje (medido: 0 ocorrências), então não
   era bug ativo — mas a próxima tela que precisar de um aviso amarelo (não
   erro, não sucesso) ia herdar `err` por engano, sem ninguém perceber. */
.iris-super .iris-app .msg.warn{background:var(--warn-bg);border:1px solid rgba(180,115,10,.35);color:var(--warn)}
.iris-super .iris-app .spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:iris-sa-cspin .8s linear infinite;flex:none}
@keyframes iris-sa-cspin{to{transform:rotate(360deg)}}
#toast{position:fixed;right:20px;bottom:20px;z-index:var(--z-toast);background:var(--sh-bg1,#1A0E27);color:#fff;padding:12px 18px;border-radius:12px;
  font-size:13.5px;font-weight:600;box-shadow:0 12px 30px rgba(23,17,38,.35);opacity:0;transform:translateY(10px);
  transition:opacity .2s,transform .2s;pointer-events:none}
#toast.show{opacity:1;transform:translateY(0)}
.iris-super .iris-app table.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.iris-super .iris-app table.grid th{font-weight:800;letter-spacing:.5px;font-size:10.5px;text-transform:uppercase;color:var(--muted);
  background:var(--bg);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.iris-super .iris-app table.grid td{padding:13px 16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--body);font-variant-numeric:tabular-nums}
.iris-super .iris-app table.grid tbody tr:hover{background:var(--bg-hover)}
.iris-super .iris-app .tablewrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;overflow-x:auto;box-shadow:var(--shadow-sm)}
.iris-super .iris-app .tablewrap table.grid{border:none;border-radius:0}

#cmdk-modal{position:fixed;inset:0;z-index:var(--z-cmdk);display:none}
#cmdk-bg{position:absolute;inset:0;background:rgba(23,17,38,.5);backdrop-filter:blur(3px)}
#cmdk-box{position:relative;max-width:600px;margin:80px auto;background:var(--card,#fff);
  border:1px solid var(--line,#E7ECF2);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(23,17,38,.35)}
#cmdk-input{width:100%;padding:16px 20px;background:transparent;color:var(--ink,#0F1729);border:none;
  border-bottom:1px solid var(--line,#E7ECF2);font:inherit;font-size:16px;outline:none}
#cmdk-results{max-height:400px;overflow:auto;padding:8px}
.cmdk-section{padding:8px 12px;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:800}
.cmdk-item{padding:8px 12px;border-radius:9px;cursor:pointer}
.cmdk-item:hover{background:var(--bg)}
.cmdk-item .meta{color:var(--muted);font-size:12px;margin-top:2px}


/* ============================================================================
   DENSIDADE (Fase 2 do redesenho, v0.234.0) — a diferença REAL entre os dois
   painéis, decidida com o Eric em 2026-07-29.

   O plano original pedia "duas peles, clara e escura". Mas o superadmin já foi
   escuro por inteiro e VOCÊ o clareou de propósito na v0.197.0 (2026-07-06),
   deixando só a sidebar ameixa — e isso funciona: bate o olho e sabe onde
   está. O que NÃO existia é a diferença que de fato serve aos dois públicos:

     · a gestora usa o painel ~10 min por dia, não é técnica → card grande,
       respiro, tudo à mão;
     · o Eric passa horas na frota → cabe mais linha na tela sem rolar.

   Até aqui os dois tinham exatamente o mesmo espaçamento. Aqui a diferença sai
   de UM lugar: `templating.super_page()` carimba `class="iris-denso"` no
   <body> de toda tela do superadmin, e só estas regras respondem por ela.
   Nenhuma tela é tocada, e o painel da clínica fica intocado por construção
   (a classe nunca chega lá).

   Os seletores repetem `.iris-super .iris-app` porque é o prefixo que o resto
   do arquivo usa para o conteúdo do superadmin — sem repetir, a regra base
   ganharia por especificidade e a densidade não valeria de nada.

   ARMADILHA JÁ PAGA (2026-08-03, achada na própria migração do rename): aqui
   embaixo é `.iris-denso.iris-super` GRUDADO, sem espaço — as duas classes
   vivem no MESMO `<body>`. Um espaço (`.iris-denso .iris-super`) vira
   combinador de descendente e passa a exigir `.iris-super` DENTRO de um
   elemento `.iris-denso`, que nunca acontece — a regra simplesmente para de
   casar, calada (especificidade mais alta que a base, mas seletor que nunca
   bate). Foi exatamente o que a troca mecânica de `.iris-app:has(.side)` por
   `.iris-super .iris-app` fez aqui — funcionou nos ~130 outros lugares porque
   lá só havia UMA classe do body na cadeia; aqui havia duas, e a segunda
   virou passageira do combinador errado. Medido: padding de `.iris-content`
   caindo de 22px pro 30px da regra base, com efeito cascata na grade de KPI.
   ============================================================================ */
.iris-denso.iris-super .iris-app .iris-content{padding:18px 22px 32px}
.iris-denso.iris-super .iris-app .phead{margin-bottom:14px}
.iris-denso.iris-super .iris-app .kpis{gap:10px;margin-bottom:14px}
.iris-denso.iris-super .iris-app .kpi{padding:10px 13px;border-radius:11px}
.iris-denso.iris-super .iris-app .card{padding:13px;border-radius:12px}
.iris-denso.iris-super .iris-app table.grid th{padding:7px 12px}
.iris-denso.iris-super .iris-app table.grid td{padding:8px 12px;font-size:13px}

/* ============================================================================
   ESTADOS DE CARREGAMENTO (Fase 3 do redesenho, v0.234.0) — o visual do que o
   `iris-ui.js` desenha: skeleton, falhou e vazio.

   Medido em 2026-07-30 com um endpoint fora do ar: 33 das 59 telas não diziam
   nada à pessoa. Estas três classes são a resposta, e valem em qualquer tela
   porque vêm no iris.css, que toda tela linka.

   Skeleton, nunca spinner: o bloco cinza mostra a FORMA do que vem, então a
   página não "pula" quando o conteúdo chega. E o `iris-ui.js` só o mostra
   depois de 300ms — abaixo disso, piscaria e ficaria pior que nada.
   ============================================================================ */
/* As cores são fixas, não `var(--bg)`/`var(--bg-hover)`: esses dois valem
   #F6F8FB e #F5F3F9, que dentro de um card branco davam contraste de 1,06:1 —
   e 1,04:1 entre os dois pontos do gradiente, ou seja, a pulsação também era
   invisível. Medido no Chrome em 2026-07-30: a tela seguia "não dizendo nada",
   agora com um retângulo que ninguém enxergava. #8996A8 dá exatamente 3,00:1
   contra o branco, o mínimo que a WCAG 1.4.11 pede para componente sem texto,
   e a pulsação sobe para 1,82:1. */
.iris-skel{height:14px;border-radius:7px;margin:9px 0;
  background:linear-gradient(90deg,#8996A8 25%,#C2CAD6 37%,#8996A8 63%);
  background-size:400% 100%;animation:iris-skel-brilho 1.4s ease-in-out infinite}
.iris-skel:first-child{width:70%}
.iris-skel:nth-child(2){width:92%}
.iris-skel:nth-child(3){width:55%}
@keyframes iris-skel-brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.iris-skel{animation:none}}

/* Falhou / vazio — mesma caixa, cores e texto diferentes DE PROPÓSITO: a
   pessoa precisa distinguir "a Íris está fora do ar" de "não há nada aqui". */
.iris-estado{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.iris-estado .ic{font-size:20px;line-height:1}
.iris-estado p{margin:0;max-width:420px;line-height:1.5}
.iris-estado.erro{color:var(--danger)}
.iris-estado.erro .ic{filter:saturate(1.2)}
.iris-estado-btn{border:1px solid var(--border);background:var(--panel);color:var(--accent);
  border-radius:var(--radius-md);padding:7px 15px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.iris-estado-btn:hover{border-color:var(--accent);background:var(--panel-2)}

/* Faixa de "a Íris caiu" (Fase 3) — rede de segurança global do iris-ui.js.
   Fica no TOPO (o rodapé é dos avisos — as duas coisas brigavam pelo mesmo
   canto, visto no navegador) e só aparece em erro de rede ou 5xx. Não é
   modal de propósito: não bloqueia o que a pessoa está fazendo, só avisa que o
   que está na tela pode estar velho. */
/* pointer-events:none na faixa, auto só nos botões: a faixa fica POR CIMA da
   topbar (top:14px, centralizada), e sem isso ela engolia os cliques dos
   controles que estão embaixo — a pessoa clicava na busca ou no sino e não
   acontecia nada, sem nenhuma pista do porquê. Achado da revisão adversarial
   de 2026-07-30. O texto não é clicável, então nada se perde. */
.iris-caiu{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;align-items:center;gap:11px;max-width:min(620px,calc(100vw - 32px));
  background:var(--iris-ink);color:#fff;padding:11px 16px;border-radius:var(--radius-pill);
  font-size:13.5px;line-height:1.4;box-shadow:var(--shadow-lg);pointer-events:none}
.iris-caiu button{pointer-events:auto;border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;border-radius:var(--radius-pill);padding:5px 13px;font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.iris-caiu button:hover{background:rgba(255,255,255,.14)}
.iris-caiu .iris-caiu-x{border:0;padding:0 4px;font-size:17px;line-height:1;opacity:.72}
.iris-caiu .iris-caiu-x:hover{background:transparent;opacity:1}
.iris-caiu-n{font-weight:700;opacity:.75}

/* Avisos (o _toast do plano, Fase 3) — o que substituiu os 91 `alert()` do
   navegador. Empilham no canto, não bloqueiam, e cada um fecha no ×.
   Reaproveita a linguagem visual do #toast que já existia acima. */
.iris-avisos{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.iris-aviso{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
  max-width:min(420px,calc(100vw - 36px));background:var(--iris-ink);color:#fff;
  padding:11px 13px 11px 16px;border-radius:var(--radius-lg);font-size:13.5px;line-height:1.45;
  box-shadow:var(--shadow-lg);animation:iris-aviso-entra .18s var(--ease-standard)}
.iris-aviso.erro{background:var(--danger)}
.iris-aviso.ok{background:var(--success)}
.iris-aviso button{flex:none;border:0;background:transparent;color:#fff;opacity:.7;
  font:inherit;font-size:17px;line-height:1;padding:0 2px;cursor:pointer}
.iris-aviso button:hover{opacity:1}
@keyframes iris-aviso-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.iris-aviso{animation:none}}

/* ============================================================================
   MODAL / CONFIRMAR (Fase 3 do redesenho, v0.237.0) — o que substitui as
   caixas do NAVEGADOR (`confirm()` e `prompt()`).

   Medido em 2026-07-30: o painel tinha 55 `confirm()` e 18 `prompt()`. Os
   `alert()` já haviam saído (viraram `IrisUI.aviso`), estes não. A caixa nativa
   é ruim pelo mesmo motivo do `alert`: tem a cara do navegador e não a da Íris,
   não formata nada (o texto de exclusão de clínica chega com `\n\n` cru), não
   distingue ação destrutiva de ação comum, e o `prompt()` não valida — o
   `drill.html` chegava a chamar `confirm('Motivo precisa ter pelo menos 3
   caracteres. Tentar de novo?')` para simular validação que a caixa não tem.

   Construído sobre o `<dialog>` NATIVO de propósito: Esc, foco preso dentro da
   caixa, devolução do foco ao sair e a *top layer* (acima de qualquer z-index)
   vêm de graça e corretos — reimplementar isso à mão é como nascem armadilhas
   de acessibilidade. O `<form method=dialog>` dá o Enter que confirma.

   O `.iris-modal` é classe, então ganha (0,1,0) de qualquer `dialog{}` que as
   telas ainda declarem no seu <style> (0,0,1) — as 4 telas com diálogo próprio
   seguem intocadas.
   ============================================================================ */
.iris-modal{border:0;padding:0;background:transparent;color:var(--text);
  max-width:min(460px,calc(100vw - 32px));z-index:var(--z-modal)}
.iris-modal::backdrop{background:rgba(15,23,41,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.iris-modal .cx{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-lg)}
.iris-modal h2{margin:0 0 9px;font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--text)}
/* `pre-line` porque as mensagens vêm dos `confirm()` antigos, que usavam \n
   para separar parágrafo (a exclusão definitiva de clínica tem três). */
.iris-modal p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted);white-space:pre-line}
.iris-modal label{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px}
.iris-modal input[type=text],.iris-modal textarea{width:100%;box-sizing:border-box;background:var(--panel);
  color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;
  font:inherit;font-size:13.5px;outline:none;transition:border-color var(--dur-fast) var(--ease-standard)}
.iris-modal :is(input,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,160,.14)}
.iris-modal textarea{min-height:84px;resize:vertical}
.iris-modal .dica{font-size:12px;color:var(--muted);margin-top:6px}
.iris-modal .erro{font-size:12.5px;color:var(--danger);margin-top:7px;font-weight:600}
.iris-modal .acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.iris-modal .acoes button{font:inherit;font-size:13.5px;font-weight:700;padding:9px 17px;
  border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
  transition:all var(--dur-fast) var(--ease-standard)}
.iris-modal .acoes .ok{background:var(--accent);color:#fff}
.iris-modal .acoes .ok:hover{background:var(--accent-2)}
.iris-modal .acoes .ok:disabled{opacity:.45;cursor:not-allowed}
.iris-modal .acoes .ok:disabled:hover{background:var(--accent)}
/* Ação destrutiva: o botão que confirma é VERMELHO e o foco nasce no Cancelar
   (ver `iris-ui.js`) — quem apertar Enter sem ler não apaga nada. */
.iris-modal.perigo .acoes .ok{background:var(--danger)}
.iris-modal.perigo .acoes .ok:hover{filter:brightness(.92)}
.iris-modal .acoes .cancelar{background:var(--panel);color:var(--text);border-color:var(--border)}
.iris-modal .acoes .cancelar:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:480px){
  .iris-modal .acoes{flex-direction:column-reverse}
  .iris-modal .acoes button{width:100%}
}

/* ============================================================================
   CAMPO (Fase 3 do redesenho, 2026-07-31) — a 12ª peça da biblioteca: rótulo +
   controle + dica + erro, um bloco só.

   Não é invenção nova — é o que o `.iris-modal` já faz para `label`/`.dica`/
   `.erro` (linhas acima) e o que o `.field` do superadmin já faz para o
   controle e o foco, só que cada um só valia dentro do dono. `.iris-campo`
   generaliza os dois para qualquer tela, clínica ou superadmin.

   A cor do foco é a MESMA divisão intencional do resto do painel — decidida
   com o Eric em 2026-07-31: azul (`--accent`) por padrão (clínica), verde-água
   (`--teal`) sob `.iris-super .iris-app` (superadmin). Não é capricho: são dois
   públicos com densidade e leitura diferentes, e o painel já carrega essa
   divisão em toda parte — um campo cinza-genérico destoaria dos dois.

   Markup:
     <div class="iris-campo">
       <label for="x">Rótulo</label>
       <input id="x" type="text">
       <div class="dica">Ajuda opcional, sempre visível.</div>
       <div class="erro" hidden>Só aparece com IrisUI.campoErro().</div>
     </div>

   `IrisUI.campoErro(alvo, texto)` / `IrisUI.campoOk(alvo)` (iris-ui.js) tocam
   a classe `.invalido` no wrapper e trocam dica por erro — nunca os dois ao
   mesmo tempo, para não competir por espaço debaixo do controle.
   ============================================================================ */
.iris-campo{margin-bottom:14px}
.iris-campo>label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.iris-campo :is(input,select,textarea){width:100%;box-sizing:border-box;border:1px solid var(--line-2);
  border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;outline:none;
  background:var(--card);color:var(--ink);transition:all .15s}
.iris-campo textarea{resize:vertical}
.iris-campo :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,160,.14)}
.iris-super .iris-app .iris-campo :is(input,select,textarea):focus{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(35,179,164,.18)}
.iris-campo .dica{font-size:11.5px;color:var(--muted);margin-top:5px}
.iris-campo .erro{font-size:12.5px;color:var(--danger);margin-top:5px;font-weight:600}
.iris-campo.invalido :is(input,select,textarea){border-color:var(--danger)}
.iris-campo.invalido .dica{display:none}

/* ============================================================================
   BARRA DE AÇÃO (Fase 3 do redesenho, 2026-07-31) — a 13ª e última peça:
   Salvar/Descartar fixos no rodapé, pré-requisito da Fase 4 (tela de Agentes,
   onde um editor de configuração precisa desta barra para existir).

   Fica ESCONDIDA por padrão (`hidden`) — só aparece quando a tela tem algo
   pendente de salvar, e é a própria tela quem decide isso chamando
   `IrisUI.barraAcao(alvo, {aoSalvar, aoDescartar}).mostrar()`. O componente não
   adivinha "sujo"; ele só dá o lugar e o comportamento de sair dele.

   A guarda de saída (`beforeunload`) é o que falta hoje em toda tela do
   painel: fechar a aba ou navegar com a barra visível pergunta antes — sem
   isso um formulário preenchido é descartado em silêncio, o mesmo defeito que
   o `IrisUI.confirmar` já resolveu para o clique dentro da página.

   Markup:
     <div class="iris-barra-acao" hidden>
       <span class="msg">Alterações não salvas</span>
       <button type="button" class="descartar">Descartar</button>
       <button type="button" class="salvar">Salvar</button>
     </div>
   ============================================================================ */
.iris-barra-acao{position:sticky;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:12px 20px;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(15,23,41,.08);z-index:var(--z-sticky)}
.iris-barra-acao[hidden]{display:none}
.iris-barra-acao .msg{flex:1;font-size:13px;color:var(--muted);font-weight:600}
.iris-barra-acao button{font:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;
  border-radius:10px;border:1px solid transparent;cursor:pointer;transition:all .15s}
.iris-barra-acao .descartar{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.iris-barra-acao .descartar:hover{border-color:var(--danger);color:var(--danger)}
.iris-barra-acao .salvar{background:var(--accent);color:#fff}
.iris-barra-acao .salvar:hover{background:var(--accent-2)}
.iris-super .iris-app .iris-barra-acao .salvar{background:var(--teal)}
.iris-super .iris-app .iris-barra-acao .salvar:hover{background:var(--iris-teal-300)}
.iris-barra-acao .salvar:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:480px){
  .iris-barra-acao{flex-wrap:wrap}
  .iris-barra-acao .msg{flex:1 1 100%}
}

/* ============================================================================
   BASE DO PAINEL (Fase 2 do redesenho, v0.236.0) — o esqueleto que TODA tela
   dos dois painéis recebe, de um lugar só.

   O problema que isto resolve, medido em 2026-07-30: o painel do SUPERADMIN
   tinha uma base compartilhada desde a v0.234.0 (`_base_css.html`, injetado
   por `super_page()`), e por isso suas 31 telas nascem em Inter, com margin
   zerada e `border-box`. O painel da CLÍNICA nunca teve base nenhuma:
   `clinica_page()` injeta sidebar e sino, mais nada. Cada tela declarava o seu
   `body` no `<style>`, com valores divergentes entre elas.

   RESSALVA (revisão independente, v0.236.0): a versão anterior deste comentário
   dizia que "26 das 33 telas da clínica não rodam na fonte da marca". É FALSO.
   O `.iris-app` (linha 142 deste arquivo) já impunha `font-family:'Inter'` a
   tudo dentro do shell, que é onde vive quase todo o conteúdo — o `body{}` de
   cada tela só valia para o que ficasse FORA dele. O número saiu de medir o
   `body{}` e concluir sobre o que a pessoa vê, sem conferir o container por
   cima. O que a base mudou de verdade está no CONTROLE_VERSOES da v0.236.0.

   `:where(.iris-painel)` de propósito: `:where()` não soma especificidade, então
   estas regras valem (0,0,1) — o MESMO peso de um `body{}` escrito na tela. Uma
   tela que ainda declare o seu continua ganhando (o `<style>` vem depois do
   `<link>`), e a migração pode ser feita tela a tela sem quebrar as demais. A
   classe é pendurada no `<body>` por `super_page()`/`clinica_page()`, então
   página pública (agendamento, pareamento, privacidade, login) NÃO recebe nada
   disto — elas têm paleta e tipografia próprias por decisão.
   ============================================================================ */
:where(.iris-painel) *{box-sizing:border-box}
body:where(.iris-painel){margin:0;min-height:100%;
  background:var(--bg);color:var(--text);
  font:14px/1.55 'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}

/* v0.275.0 — rede de segurança pro pedido do Eric ("efeito ao clicar em
   TODOS os botões do sistema"): cobre qualquer `<button>` que ainda não
   tenha migrado pra `.iris-btn`/`.btn`/`.abtn` (que já ganharam seu próprio
   `:active` mais específico, e por isso vencem este aqui). `:where()` de
   propósito — especificidade (0,0,1), nunca disputa com uma classe. */
:where(.iris-painel) button:active{transform:scale(.97);transition:transform .05s}

/* Interruptor (v0.239.0) — a peça `_toggle` da Fase 3.
   ESCOPO medido antes de escrever: cinco telas declaram `.toggle`, e são DUAS
   coisas. `drill` e `features_board` têm as 6 regras BYTE A BYTE iguais;
   `features` é o mesmo componente com drift (42×24 e 18px de botão, contra
   38×22 e 16px). Esses três são esta peça: `<input type=checkbox>` invisível +
   `.slider`, que é o jeito que funciona no teclado e no leitor de tela de graça.
   `notifications` era a exceção: `<div>` com `::after` e classe trocada por
   JavaScript — parecia igual e NÃO respondia a teclado nenhum. Foi migrado
   para cá junto (v0.239.0), o que é conserto de acessibilidade, não só de CSS. */
.iris-toggle{position:relative;display:inline-block;width:38px;height:22px;cursor:pointer;vertical-align:middle}
.iris-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.iris-toggle .slider{position:absolute;inset:0;background:var(--iris-gray-200);border-radius:999px;transition:.15s;pointer-events:none}
.iris-toggle .slider::before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.iris-toggle input:checked + .slider{background:var(--iris-success)}
.iris-toggle input:checked + .slider::before{transform:translateX(16px)}
/* Foco VISÍVEL: o input é transparente, então sem isto quem navega por teclado
   não enxerga onde está — o defeito que o `<div>` do notifications tinha por
   inteiro. */
.iris-toggle input:focus-visible + .slider{box-shadow:0 0 0 3px var(--iris-blue-200)}
.iris-toggle.desligado{opacity:.5}
.iris-toggle.desligado input{cursor:not-allowed}
.iris-toggle.saving{opacity:.5;pointer-events:none}

/* Placar denso (v0.239.0) — o número grande com rótulo miúdo do superadmin.
   ESCOPO medido: CINCO telas declaram `.kpi`/`.iris-kpi` (`redes`, `comercial`,
   `pedidos`, `reunioes_comerciais`, `rede_cockpit`) e as CINCO adotam esta régua
   (2026-08-03) — `rede_cockpit.html` era a única com cópia local divergente
   (`--panel` em vez de `--card`, raio 12 em vez de 14, sem sombra, `auto-fit`
   em vez de `auto-fill`); `--card` é `var(--panel)` desde a ponte de tokens
   deste arquivo, então adotar não muda cor nenhuma, só junta a régua.

   NÃO é o `.iris-card`, e a diferença é de propósito: aquele é o cartão da
   gestora — ícone, número de 32px em degradê, respiro —, e este é o do Eric, que
   passa horas na frota e precisa de mais linha na tela. É a mesma distinção que
   o `.iris-denso` já formaliza. Unificar os dois deixaria um dos dois públicos
   pior servido. */
.iris-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.iris-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.iris-kpi .v{font-size:25px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.iris-kpi .l{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.iris-kpi.ok .v{color:var(--ok)}
.iris-kpi.warn .v{color:var(--warn)}
.iris-kpi.err .v{color:var(--danger)}
.iris-kpi.info .v{color:var(--blue)}

/* Cabeçalho de card + controles de período (Fase 3, v0.247.0).
   ESCOPO medido: `agenda.html`, `painel.html` (Calendários — comentário do
   próprio arquivo já dizia "reusa o layout já aprovado da Agenda") e
   `profissionais.html` declaram a família `.ag-*` com estas regras BYTE A BYTE
   iguais. Nome mantido com o prefixo `ag-` (não `iris-`) de propósito: são as
   MESMAS três telas que já usam esse nome hoje, sem HTML nem JS pra trocar —
   trocar o nome custaria risco sem ganho. Onde uma tela precisa de algo a
   mais (`.ag-btn.pri`, `.ag-btn:disabled`, `.ag-sel` com largura própria,
   `.ag-badge` com cor própria, `.ag-card` com padding próprio) a regra fica
   LOCAL naquela tela — a cascata (o `<style>` da tela vem depois deste
   arquivo) deixa a local vencer sem precisar de `!important`. */
.ag-nav{width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--border-hairline);
  background:#fff;cursor:pointer;font-size:18px;color:var(--text-body);display:grid;place-items:center}
.ag-nav:hover{border-color:var(--accent)}
.ag-toggle{display:inline-flex;background:var(--surface-page);border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);padding:3px}
.ag-vt{font:inherit;cursor:pointer;font-size:13px;font-weight:700;padding:6px 16px;
  border-radius:var(--radius-pill);border:none;background:transparent;color:var(--text-muted);
  transition:all var(--dur-fast) var(--ease-standard)}
.ag-vt.on{background:#fff;color:var(--accent);box-shadow:var(--shadow-xs)}
.ag-btn{font:inherit;cursor:pointer;font-size:13.5px;font-weight:700;padding:9px 15px;
  border-radius:var(--radius-md);border:1px solid var(--border-hairline);background:#fff;
  color:var(--text-body);display:inline-flex;align-items:center}
.ag-btn:hover:not(:disabled){border-color:var(--accent)}
.ag-card-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ag-card-h h2{margin:0;font-size:16px;font-weight:800}
.ag-card-h .ic{font-size:18px}
.ag-stamp{font-size:11.5px;color:var(--text-muted);align-self:center}

/* Modal artesanal "ag" (Fase 3, v0.247.0) — cabeçalho com ícone + botão fechar
   + corpo + rodapé + rótulo + campo. ESCOPO: `agenda.html` e
   `profissionais.html`, byte a byte iguais (`agenda` soma só a variante
   `.ag-mh-ic.dan`, que fica local por ser dela só). Não é `.iris-modal`: aquele
   é sobre `<dialog>` nativo, este é o conteúdo interno que as duas telas
   desenham dentro do PRÓPRIO shell de modal (`.ag-modal`/`.ag-box`, que
   continua local a `agenda.html` — `profissionais.html` já usa `<dialog
   class="iris-modal">` como shell e só reaproveitava este conteúdo interno). */
.ag-mh{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border-hairline)}
.ag-mh h2{margin:0;font-size:18px;font-weight:800}
.ag-mh-ic{width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:18px;flex:none}
.ag-mh-ic.act{background:var(--surface-tint);color:var(--accent)}
.ag-x{width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--border-hairline);
  background:#fff;cursor:pointer;color:var(--text-muted);display:grid;place-items:center;font-size:15px}
.ag-mb{padding:18px 22px}
.ag-mf{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--border-hairline);justify-content:flex-end}
.ag-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--text-body);margin:14px 0 6px}
.ag-lbl:first-child{margin-top:0}
.ag-inp{width:100%;height:40px;border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  padding:0 13px;font-size:13.5px;font-family:inherit;color:var(--text-strong);background:var(--surface-page);outline:none}
.ag-inp:focus{border-color:var(--accent)}

/* Toast "ag" (Fase 3, v0.247.0) — pill único embaixo, centralizado, com ponto
   de status. ESCOPO: `agenda.html` e `profissionais.html`, byte a byte iguais
   (`agenda` soma `.ag-tt-undo`, o botão "Desfazer", que fica local por ser dela
   só). NÃO é o mesmo componente que `IrisUI.aviso()`/`.iris-aviso` — aquele é
   pilha de caixas no canto com dedupe e fechar; este é status efêmero único. */
.ag-tt{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:var(--z-toast);
  background:var(--text-strong);color:#fff;padding:11px 20px;border-radius:var(--radius-pill);font-size:13.5px;
  font-weight:600;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.ag-tt.on{opacity:1;transform:translateX(-50%) translateY(0)}
.ag-tt .dot{width:7px;height:7px;border-radius:50%;background:var(--iris-success)}

/* Modal manual "de formulário" (Fase 3, v0.247.0) — cabeçalho com título+fechar,
   corpo, rodapé; caixa central sem o backdrop. ESCOPO: `comercial.html` e
   `reunioes_comerciais.html`, byte a byte iguais nestas 5 seletores.
   NÃO inclui `.modal-bg` (o backdrop): `usuarios.html` usa o MESMO nome de
   classe pra um backdrop com valores DIFERENTES (sem blur, z-index de overlay
   em vez de modal) — hoisting isso quebraria a tela dele. Cada tela mantém o
   próprio `.modal-bg` e a própria largura (`max-width`) do `.modal`. */
.modal{background:var(--card);border-radius:16px;width:100%;box-shadow:0 24px 70px rgba(23,17,38,.35)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-h h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.2px}
.modal-h button{background:none;border:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.modal-b{padding:18px 20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--line)}

/* ============================================================================
   CHAT — peça compartilhada (2026-08-02, item 3 da Fase 2 / dívida da Fase 3).

   Nasceu do `.as-*` que vivia DUPLICADO no `<style>` de 3 telas de conversa:
   `painel_clinica/assistente.html`, `painel_clinica/suporte.html` e
   `painel_superadmin/comando.html` (134 linhas somadas). As três desenham a
   mesma coisa — cartão com feed, balões, "digitando…", compositor com chips.

   Duas divergências REAIS foram achadas ao comparar os 3 blocos, e as duas
   viraram modificador em vez de sumirem numa média:

     `.iris-chat.empilhado` — assistente e comando põem os balões lado a lado
       (`justify-content`); o suporte EMPILHA (`flex-direction:column` +
       `align-items`). Não é a mesma regra com valor diferente, é outro layout.
     `.iris-chat.destaque` — o comando (cockpit do Eric) usa degradê da marca no
       balão da pessoa e um cinza mais fechado no feed.

   O resto divergia só em `#fff` × `var(--card)`: os tokens dos dois painéis
   foram unificados na Fase 2, então hoje resolvem igual — fica o token, que é
   quem sobrevive a uma troca de pele (§1 do PLANO_REDESIGN_PAINEL_v2).
   ============================================================================ */
.iris-chat{background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xs);overflow:hidden;display:flex;flex-direction:column;height:420px;max-width:760px}
.iris-chat-feed{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
  background:var(--surface-page)}

.iris-chat-row{display:flex}
.iris-chat-row.me{justify-content:flex-end}
.iris-chat-row.bot{justify-content:flex-start}
.iris-chat.empilhado .iris-chat-row{flex-direction:column}
.iris-chat.empilhado .iris-chat-row.me{align-items:flex-end}
.iris-chat.empilhado .iris-chat-row.bot{align-items:flex-start}

.iris-chat-bubble{max-width:76%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;box-shadow:var(--shadow-xs)}
.iris-chat-bubble.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.iris-chat-bubble.bot{background:var(--card);color:var(--text-strong);
  border:1px solid var(--border-hairline);border-bottom-left-radius:4px}
.iris-chat.destaque .iris-chat-bubble.me{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.iris-chat.destaque .iris-chat-feed{background:var(--iris-gray-200)}

.iris-chat-typing{display:inline-flex;align-items:center;gap:5px;padding:13px 15px}
.iris-chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--text-muted);opacity:.4;
  animation:iris-chat-bounce 1.1s infinite ease-in-out}
.iris-chat-typing span:nth-child(2){animation-delay:.18s}
.iris-chat-typing span:nth-child(3){animation-delay:.36s}
@keyframes iris-chat-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:.9;transform:translateY(-3px)}}

.iris-chat-foot{border-top:1px solid var(--border-hairline);background:var(--card);padding:11px 14px}
.iris-chat-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.iris-chat-chip{cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--text-body);
  white-space:nowrap;background:var(--surface-tint);border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);padding:5px 12px}
.iris-chat-chip:hover{border-color:var(--accent);color:var(--accent)}
.iris-chat-compose{display:flex;gap:10px;align-items:center}
.iris-chat-input{flex:1;height:42px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
  padding:0 16px;font-family:inherit;font-size:13.5px;outline:none;background:var(--surface-page);
  color:var(--text-strong)}
.iris-chat-input:focus{border-color:var(--accent)}
.iris-chat-input:disabled{opacity:.6}
.iris-chat-send{cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;height:42px;padding:0 20px;
  border-radius:var(--radius-pill);border:none;background:var(--accent);color:#fff}
.iris-chat-send:disabled{opacity:.5;cursor:default}