:root{
  --brand:#0E7C7B;
  --brand-strong:color-mix(in srgb,var(--brand) 86%, black);
  --brand-soft:color-mix(in srgb,var(--brand) 14%, white);
  --brand-softer:color-mix(in srgb,var(--brand) 8%, white);
  --on-brand:#fff;

  --bg:#f5f7f8; --surface:#ffffff; --surface-2:#fbfcfd;
  --text:#10201f; --text-soft:#5b6b6a; --line:#e3e9e9;
  --shadow:0 1px 2px rgba(16,32,31,.05),0 8px 24px -12px rgba(16,32,31,.12);

  --amber:#c47f17; --green:#1f8f4e; --red:#c0392b; --blue:#2b78c4;
  --slate:#6b7785; --violet:#7a5bd0;

  --sbw:252px; --sbw-collapsed:68px; --radius:14px;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
[data-theme="dark"]{
  --brand-soft:color-mix(in srgb,var(--brand) 26%, #0d1716);
  --brand-softer:color-mix(in srgb,var(--brand) 16%, #0d1716);
  --bg:#0c1413; --surface:#111d1c; --surface-2:#0f1a19;
  --text:#e9f0ef; --text-soft:#93a3a1; --line:#1f2e2c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
  --amber:#e0a93f; --green:#3fb56e; --red:#e0685b; --blue:#5aa0e6;
  --slate:#9aa6b2; --violet:#a78bea;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);
     -webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
.mono,.num{font-family:var(--mono);font-feature-settings:"tnum" 1}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;
       stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.logo .mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
     background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff}
.logo .mark svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;
     stroke-linecap:round;stroke-linejoin:round}
.logo .name{line-height:1.05;font-size:15px}
.logo .name small{display:block;font-weight:500;font-size:11px;color:var(--text-soft);letter-spacing:.02em}

/* ---------- APP SHELL ---------- */
#app{display:grid;min-height:100%;grid-template-columns:var(--sbw) 1fr;
   grid-template-rows:60px 1fr;grid-template-areas:"side top" "side main";transition:grid-template-columns .22s}
body.collapsed #app{grid-template-columns:var(--sbw-collapsed) 1fr}

.top{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 18px;
   background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--text-soft);
   transition:background .15s,color .15s}
.icon-btn:hover{background:var(--brand-softer);color:var(--brand)}
/* Sino de novidades (link no topo) + selo de não vistas */
.bell{position:relative}
.bell.on{background:var(--brand-soft);color:var(--brand)}
.bell-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
   display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1;font-family:var(--mono);
   color:#fff;background:var(--red);border-radius:9px;box-shadow:0 0 0 2px var(--surface)}
.u-badge{margin-left:auto;font-size:10.5px;font-weight:700;font-family:var(--mono);
   color:#fff;background:var(--red);border-radius:9px;padding:1px 6px}
/* Botão de acesso rápido "Nova solicitação" no topo */
.btn-nova{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;
   background:var(--brand);color:var(--on-brand);font-weight:600;font-size:13.5px;white-space:nowrap}
.btn-nova:hover{filter:brightness(1.06)}
.btn-nova .ic{width:17px;height:17px}
@media (max-width:680px){.btn-nova span{display:none}.btn-nova{padding:0 11px}}
.top .logo{margin-right:auto}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{width:34px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--text-soft)}
.seg button.on{background:var(--brand);color:#fff}
.swatch{width:30px;height:30px;border-radius:8px;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);
   background:var(--brand);position:relative;overflow:hidden}
.swatch input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
   display:grid;place-items:center;font-weight:700;font-size:13px;text-transform:uppercase;
   border:none;padding:0;cursor:pointer}
/* Menu do usuário (dropdown nas iniciais do cabeçalho) */
.usermenu{position:relative;display:flex}
.usermenu-pop{position:absolute;right:0;top:calc(100% + 10px);min-width:236px;z-index:50;
   background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.usermenu-pop[hidden]{display:none}
.usermenu-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.usermenu-head .u-name{font-weight:600;font-size:13.5px;line-height:1.2}
.usermenu-head .u-mail{font-size:11.5px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usermenu-pop .u-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:9px;
   color:var(--text-soft);font-size:13.5px;text-align:left;background:none;border:none;cursor:pointer;text-decoration:none}
.usermenu-pop .u-item:hover{background:var(--brand-softer);color:var(--text)}
.usermenu-pop .u-item svg{width:18px;height:18px;flex:none}
.usermenu-pop form{margin:0}
.u-ver{padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--line);
   font-family:var(--mono);font-size:11px;color:var(--text-soft);text-align:center}

.side{grid-area:side;background:var(--surface);border-right:1px solid var(--line);
   display:flex;flex-direction:column;padding:14px 12px;gap:3px;overflow:hidden}
.side .logo{padding:6px 8px 14px}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft);
   padding:12px 12px 5px;font-weight:600;white-space:nowrap}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--text-soft);
   font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s;width:100%;text-align:left}
.nav:hover{background:var(--brand-softer);color:var(--text)}
.nav.on{background:var(--brand-soft);color:var(--brand-strong);font-weight:600}
.nav.on svg{color:var(--brand)}
.nav .txt{transition:opacity .15s}
.nav .badge{margin-left:auto;font-size:11px;background:var(--brand);color:#fff;border-radius:20px;padding:1px 8px;font-family:var(--mono)}
body.collapsed .nav .txt,body.collapsed .nav .badge,body.collapsed .nav-label,
body.collapsed .side .logo .name{opacity:0;pointer-events:none}
body.collapsed .side .logo{justify-content:center}
.side .spacer{flex:1}

.main{grid-area:main;overflow:auto;padding:26px 30px 60px}
.crumb{font-size:12.5px;color:var(--text-soft);margin-bottom:4px}
h1.page{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 22px}
.toolbar{display:flex;align-items:center;gap:12px;margin:0 0 18px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.select,.btn-sec{height:38px;border:1px solid var(--line);background:var(--surface);border-radius:10px;
   padding:0 12px;color:var(--text);font-size:13.5px}
.btn-primary{height:38px;border-radius:10px;background:var(--brand);color:var(--on-brand);font-weight:600;
   font-size:13.5px;padding:0 16px;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{filter:brightness(1.06)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;
   box-shadow:var(--shadow);position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.tile .n{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;letter-spacing:-.02em}
.tile .l{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;color:var(--text-soft);font-weight:500}
.tile .l .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel .head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.panel .head h2{font-size:15px;margin:0;font-weight:600}
.panel .head .date{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--text-soft)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
.rel-scroll{overflow-x:auto;max-width:100%}
/* Relatório detalhado: subtítulo do grupo à esquerda e a quantidade encostada na margem
   direita; o fecho repete o total do filtro inteiro, também à direita. */
.rel-grupo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
   margin:20px 0 8px;padding:0 16px;font-size:15px;font-weight:600;color:var(--brand)}
.rel-grupo-qtd{color:var(--text-soft);font-weight:400;white-space:nowrap}
.rel-total{margin:14px 0 0;padding:12px 16px;border-top:1px solid var(--line);
   text-align:right;font-size:13.5px;color:var(--text-soft)}
.rel-total strong{color:var(--text);font-family:var(--mono)}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-soft);
   font-weight:600;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
td{padding:12px 16px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--brand-softer)}
/* Cabeçalho ordenável (tag `th_ord`): a seta só aparece na coluna em uso; nas demais o espaço
   fica reservado para a linha não "pular" quando a ordenação muda. */
th.th-ord{padding:0}
th.th-ord>a{display:flex;align-items:center;gap:5px;padding:11px 16px;color:inherit;text-decoration:none;
   cursor:pointer;white-space:nowrap}
th.th-ord>a:hover{color:var(--brand);background:var(--brand-softer)}
th.th-ord.num>a{justify-content:flex-start}
th.th-ord .ord-seta{display:inline-block;min-width:9px;font-size:11px;line-height:1}
th.th-ord.ord-ativa>a{color:var(--brand)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;
   background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--c)}
.empty{padding:26px 16px;color:var(--text-soft);text-align:center}

@media(max-width:880px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  body:not(.collapsed) #app{grid-template-columns:var(--sbw-collapsed) 1fr}
  body:not(.collapsed) .nav .txt,body:not(.collapsed) .nav .badge,
  body:not(.collapsed) .nav-label,body:not(.collapsed) .side .logo .name{opacity:0}
  .main{padding:20px 16px 50px}
  .fgrid{grid-template-columns:1fr}
}

/* ---------- Formulários ---------- */
.form-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
   box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.form-sec h2{font-size:14px;margin:0 0 14px;font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fgrid.compacta{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 12px}
.f{display:flex;flex-direction:column;gap:6px}
.f.wide{grid-column:1/-1}
.f label{font-size:12.5px;font-weight:600;color:var(--text-soft)}
.f input,.f select,.f textarea{height:40px;border:1px solid var(--line);background:var(--surface-2);
   border-radius:10px;padding:0 12px;color:var(--text);font-size:14px;font-family:inherit}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand);
   box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.f textarea{height:auto;min-height:64px;padding:10px 12px}
.f select[multiple]{height:auto;min-height:104px;padding:6px}
/* OPME + guia de OPME lado a lado no card 2; a guia colapsa (:empty) quando não se usa OPME. */
.opme-guia{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.opme-guia>.f{flex:1 1 260px;min-width:0}
#guia-opme-wrap:empty{display:none}

.grade{display:flex;flex-direction:column;gap:8px}
.grade-sala{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
   border-radius:10px;padding:10px 12px;cursor:pointer}
.grade-sala:hover{background:var(--brand-softer)}
.grade-sala:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.grade-sala .s-nome{font-weight:600;margin-right:auto}
.grade-sala .aviso{font-size:11.5px;color:var(--amber)}
.grade-collapse>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;
   padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;font-size:13px}
.grade-collapse>summary::-webkit-details-marker{display:none}
.grade-collapse>summary::before{content:"▸";color:var(--brand);font-size:12px;transition:transform .15s}
.grade-collapse[open]>summary::before{transform:rotate(90deg)}
.grade-collapse>summary:hover{background:var(--brand-softer)}
.grade-collapse>summary .sala-escolhida{margin-left:auto;font-weight:500;color:var(--brand);font-size:12.5px}
.grade-collapse #grade{margin-top:8px;max-height:300px;overflow-y:auto}
/* Listas recolhíveis do card 2 (Procedimentos/Hemocomponentes/Recursos) + filtro de busca. */
.lista-recolhivel>summary~*{margin-top:8px}
.filtro-lista{width:100%}

/* As três listas ficam lado a lado numa faixa própria, alinhadas pelo topo: abrir
   uma não estica a linha do grid nem desloca os campos simples do card. */
.listas-sel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.listas-sel>details{min-width:0}
.listas-sel .check-list{max-height:220px}
@media (max-width:900px){ .listas-sel{grid-template-columns:1fr} }

/* Campo condicional preenchido por HTMX (reciprocidade, guia): enquanto não tem
   conteúdo, sai do fluxo — senão deixa uma célula vazia no meio do grid. */
.f.cond:not(:has(*)){display:none}
.status-filtro .sit-checks{flex-direction:column;gap:6px;margin-top:8px;padding:8px 10px;
   border:1px solid var(--line);border-radius:8px;max-height:240px;overflow-y:auto;background:var(--surface)}

.alert{border:1px solid var(--line);border-left:4px solid var(--red);
   background:color-mix(in srgb,var(--red) 8%,var(--surface));padding:10px 14px;
   border-radius:10px;font-size:13px}
.alert.ok{border-left-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--surface))}
.msgs{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.btn-sec{display:inline-flex;align-items:center;cursor:pointer}

.modal-alerta{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
   padding:20px;background:rgba(16,32,31,.55)}
.modal-alerta-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
   box-shadow:var(--shadow);width:min(560px,100%);max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.modal-alerta-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-alerta-head .ic{width:22px;height:22px;color:var(--amber);flex:none}
.modal-alerta-head h2{margin:0;font-size:16px}
.modal-alerta-body{padding:4px 20px;overflow-y:auto}
.modal-alerta-body .aviso-bloco{padding:14px 0;border-bottom:1px solid var(--line)}
.modal-alerta-body .aviso-bloco:last-child{border-bottom:0}
.modal-alerta-body .aviso-bloco strong{display:block;margin-bottom:4px;font-size:14px}
.modal-alerta-body .aviso-bloco p{margin:0;font-size:13px;line-height:1.5;color:var(--text-soft)}
.modal-alerta-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.btn-ciente{background:var(--brand);color:#fff;border:0;padding:9px 18px;border-radius:8px;
   font-weight:600;cursor:pointer;font-size:13.5px}
.btn-ciente:hover{filter:brightness(1.05)}

/* ---- Atalho de horários no campo data/hora ---- */
.campo-com-botao{display:flex;gap:6px}
.campo-com-botao input{flex:1}
.btn-busca-horarios{flex:none;display:inline-flex;align-items:center;justify-content:center;
   border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:0 10px;cursor:pointer;color:var(--brand)}
.btn-busca-horarios:hover{background:var(--brand-softer)}

/* ---- Grade de salas/horários ---- */
.grade-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.grade-controls .gc-row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.grade-controls .gc-grupo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grade-controls input[type=date],.grade-controls input[type=time]{width:auto;max-width:160px}
.grade-controls .gc-dia{font-weight:600;margin-left:4px}
.grade-controls .gc-mut{font-size:13px;color:var(--text-soft)}
.grade-controls .gc-sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.grade-controls .gc-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft)}
.grade-controls .gc-check input{width:auto}
.grade-controls .gc-nav{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:var(--surface);cursor:pointer;font-size:13px}
.grade-controls .gc-nav:hover{background:var(--brand-softer)}

.panel.grade-card{padding:14px 16px}
.grade-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.grade-card .grade-scroll{border-radius:0}
table.grade-horarios{border-collapse:collapse;width:max-content;min-width:100%;font-size:12px}
table.grade-horarios th,table.grade-horarios td{border:1px solid var(--line)}
table.grade-horarios thead th{padding:6px 4px;text-align:center;color:var(--text-soft);font-weight:600;white-space:nowrap;min-width:34px}
table.grade-horarios .col-sala{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;
   padding:6px 12px;min-width:230px;font-weight:600}
.equip-pick{display:flex;align-items:center;gap:8px;cursor:pointer}
.equip-pick input{width:auto;margin:0;flex:none}
table.grade-horarios tbody td.cel{width:34px;height:30px;padding:0}
td.cel[role=button]{cursor:pointer}
td.cel[role=button]:hover{outline:2px solid var(--brand);outline-offset:-2px}

.st-aprovado{background:#1f8f4e}
.st-aprovado_ressalva{background:#8cc66b}
.st-aguardando{background:#e8b53a}
.st-pedido{background:#e7dcc7}
.st-reservado{background:#2b78c4}
.st-disponivel{background:var(--surface)}
.st-indisponivel{background:#d9dde1}
.st-higienizacao{background:#b08aa0}
.st-insuficiente{background:#e8773a}
/* Visibilidade por vínculo: cirurgia de outra equipe — só "ocupado", sem situação. */
.st-ocupado{background:#7b8794}

/* Cabeçalho de página com ações na linha do título (ex.: Sincronizar SADT). */
.page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.page-head h1.page{margin:0}

/* Log da integração SADT (agenda de salas): recolhido por padrão, expande no clique. */
.sadt-log{margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.sadt-log>summary{cursor:pointer;padding:9px 14px;font-size:13.5px;display:flex;align-items:center;gap:10px;list-style:none;user-select:none}
.sadt-log>summary::-webkit-details-marker{display:none}
.sadt-log>summary::before{content:"▸";color:var(--text-soft);transition:transform .15s}
.sadt-log[open]>summary::before{transform:rotate(90deg)}
.sadt-log .sadt-titulo{font-weight:600}
.sadt-log .sadt-tag{font-size:11px;font-weight:700;border-radius:20px;padding:2px 10px}
.sadt-log .sadt-tag.ok{color:var(--green);background:var(--brand-softer)}
.sadt-log .sadt-tag.warn{color:#fff;background:var(--amber)}
.sadt-log .sadt-quando{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-soft)}
.sadt-log-corpo{padding:0 14px 12px}

.grade-legenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--text-soft)}
.grade-legenda .lg{display:inline-flex;align-items:center;gap:6px}
.grade-legenda .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--line);display:inline-block}

/* ---- Modal da grade (atalho na Nova Solicitação) ---- */
.modal-grade{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
   padding:16px;background:rgba(16,32,31,.55)}
.modal-grade-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
   width:min(1150px,97vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-grade-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-grade-head h2{margin:0;font-size:16px;flex:1}
.modal-grade-head .x{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--text-soft)}
.modal-grade-head .x:hover{color:var(--text)}
.modal-grade-body{padding:16px 18px;overflow:auto}

/* ---- Filtro de seleção múltipla na barra de filtros (ex.: salas) ---- */
.filtro-multi{position:relative}
.filtro-multi>summary{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
   list-style:none;white-space:nowrap;max-width:230px}
.filtro-multi>summary::-webkit-details-marker{display:none}
.filtro-multi>summary .rotulo{overflow:hidden;text-overflow:ellipsis}
.filtro-multi>summary .seta{margin-left:auto;color:var(--text-soft);font-size:11px}
.filtro-multi[open]>summary,.filtro-multi.tem-selecao>summary{border-color:var(--brand);color:var(--brand)}
.filtro-multi-painel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:300px;max-width:90vw;
   background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
   padding:10px;display:flex;flex-direction:column;gap:8px}
.filtro-multi-painel.alinhar-direita{left:auto;right:0}
.filtro-multi-painel .check-list{max-height:240px}
.filtro-multi-painel .filtro-lista{width:100%}
.filtro-multi-acoes{display:flex;gap:8px;justify-content:flex-end}
.filtro-multi-acoes .btn-sec{height:34px;border-radius:9px;padding:0 12px}
.filtro-multi-acoes .btn-primary{height:34px;padding:0 14px}
/* Tela estreita: o painel de 300px não cabe ancorado ao botão (a barra quebra em linhas
   e ele pode ficar em qualquer ponto). Abre então na largura inteira da barra de filtros. */
@media (max-width:700px){
  .barra-filtros{position:relative}
  .barra-filtros .filtro-multi{position:static}
  .barra-filtros .filtro-multi-painel,
  .barra-filtros .filtro-multi-painel.alinhar-direita{left:0;right:0;width:auto;max-width:none}
}

/* ---- Listas de seleção múltipla (checkbox) ---- */
.check-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;
   border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
.check-item{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.check-item input{width:auto;margin:0;flex:none}
.check-item .muted{color:var(--text-soft)}
.check-item.item-ocupado{opacity:.7}
.check-item .ocupado-tag{color:var(--red);font-size:11px}

/* ---- Campo de duração (digita 1 em 1; botões de 5 em 5) ---- */
.dur-field{display:flex;gap:6px;align-items:stretch}
.dur-field input{flex:1;text-align:center}
.dur-step{flex:none;width:36px;border:1px solid var(--line);background:var(--surface);
   border-radius:8px;cursor:pointer;font-size:18px;line-height:1;color:var(--text)}
.dur-step:hover{background:var(--brand-softer)}
input.no-spin::-webkit-outer-spin-button,input.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.no-spin{-moz-appearance:textfield}

/* ---- Checkboxes de situação (filtro de relatório) ---- */
.sit-checks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px}

/* ---- Dashboards (KPIs + gráficos CSS) ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi-num{font-size:26px;font-weight:700;color:var(--brand);line-height:1.1}
.kpi-lbl{font-size:12.5px;color:var(--text-soft);margin-top:4px}

.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

.charts-row{display:flex;flex-wrap:wrap;gap:24px 28px}
.chart{display:flex;align-items:center;gap:16px;min-width:230px}
.pie{width:150px;height:150px;border-radius:50%;flex:none;border:1px solid var(--line);background:var(--surface-2,var(--surface))}
.pie.donut{-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%);mask:radial-gradient(circle,transparent 46%,#000 47%)}
.legend{list-style:none;margin:0;padding:0;font-size:13px;display:flex;flex-direction:column;gap:6px}
.legend li{display:flex;align-items:center;gap:8px}
.legend .legend-tit{font-weight:600;color:var(--text)}
.legend .sw{width:12px;height:12px;border-radius:3px;flex:none;display:inline-block}

.vbars{display:flex;align-items:flex-end;gap:14px;padding-top:6px}
.vbar{flex:1;text-align:center;min-width:46px}
.vbar-col{height:180px;display:flex;align-items:flex-end}
.vbar-fill{width:62%;margin:0 auto;background:var(--brand);border-radius:6px 6px 0 0;min-height:2px}
.vbar-lbl{font-size:12px;color:var(--text-soft);margin-top:6px}
.vbar-lbl strong{display:block;color:var(--text);font-size:13px;margin-top:2px}

/* ---- Salas ao vivo: cards de status por sala.
   Cores = tokens de status do app (validados: CVD ΔE≥27 e contraste ≥3:1 nos dois temas);
   o estado carrega sempre rótulo em texto + ponto — a cor nunca é o único código. ---- */
.salas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sala-card{border:1px solid var(--line);border-left:6px solid var(--c,var(--slate));border-radius:12px;
  padding:14px;background:var(--surface)}
.sala-card.cirurgia{--c:var(--blue)}
.sala-card.desinfeccao{--c:var(--amber)}
.sala-card.livre{--c:var(--green)}
.sala-card .sala-nome{font-weight:700;display:flex;flex-direction:column;margin-bottom:8px}
.sala-card .sala-nome small{font-weight:500;color:var(--text-soft);font-size:12px}
.sala-card .sala-estado{color:var(--c);font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.sala-card .sala-estado .dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.sala-card.cirurgia .sala-estado .dot,.sala-card.desinfeccao .sala-estado .dot{animation:vivo-pulse 1.6s ease-in-out infinite}
.sala-card .sala-info{margin-top:6px;font-size:13px;color:var(--text-soft);line-height:1.5}
@keyframes vivo-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Detalhe / gestão ---------- */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
.dl .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-soft);font-weight:600}
.dl .v{font-size:14px;margin-top:2px}
.dl .wide{grid-column:1/-1}
.acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.decisao-extra{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}

/* ---- Dashboard inicial: período + caixas clicáveis ---- */
.dash-periodo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.per-btn{text-decoration:none;height:34px;display:inline-flex;align-items:center;padding:0 14px;
   border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:13px;font-weight:600}
.per-btn:hover{background:var(--brand-softer)}
.per-btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.dash-periodo .per-dia{margin:0;font-size:13px;color:var(--text-soft);display:inline-flex;align-items:center;gap:6px}
.dash-periodo input[type=date]{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
   background:var(--surface-2);color:var(--text);font-family:inherit}
.dash-periodo .per-label{margin-left:auto;font-size:13px;color:var(--text-soft);font-family:var(--mono)}
.tiles a.tile{text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tiles a.tile:hover{border-color:var(--brand)}
.tiles a.tile.tile-on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft),var(--shadow)}
.acoes button{height:38px;border-radius:10px;padding:0 16px;font-weight:600;font-size:13.5px;
   border:1px solid var(--line);background:var(--surface-2);color:var(--text)}
.acoes button:hover{background:var(--brand-soft);color:var(--brand-strong);border-color:var(--brand)}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.hist li:last-child{border-bottom:none}
.hist .when{font-family:var(--mono);font-size:12px;color:var(--text-soft);white-space:nowrap;min-width:118px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:2px 10px}
.row-check{display:flex;align-items:center;gap:8px;font-size:13.5px}
/* Documentos preservados entre um erro de validação e o reenvio da solicitação. */
.anexos-enviados{display:flex;flex-direction:column;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.anexos-enviados li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.anexos-enviados .row-check{font-size:12.5px;color:var(--text-soft)}
.arquivo-enviado{margin:0 0 8px;font-size:12.5px;color:var(--text-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row-check input{width:16px;height:16px}
.bar{height:8px;border-radius:6px;background:var(--brand-softer);overflow:hidden;min-width:60px}
.bar>span{display:block;height:100%;background:var(--brand)}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:var(--text-soft);font-weight:500}
.tabs a.on{background:var(--brand-soft);color:var(--brand-strong);border-color:var(--brand);font-weight:600}

/* ---------- Logo (imagem) ---------- */
.logo img.mark{width:auto;height:34px;max-width:132px;border-radius:6px;object-fit:contain;background:transparent}
.login-card .logo img.mark{width:auto;height:54px;max-width:230px;border-radius:8px}
body.collapsed .side .logo img.mark{max-width:48px}

/* ---------- Login ---------- */
#login{min-height:100%;display:grid;place-items:center;padding:24px;
   background:radial-gradient(1200px 600px at 80% -10%,var(--brand-softer),transparent 60%),var(--bg)}
.login-card{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--line);
   border-radius:20px;box-shadow:var(--shadow);padding:34px 30px 28px}
.login-card .logo{justify-content:center;margin-bottom:6px}
.login-card .logo .mark{width:46px;height:46px;border-radius:12px}
.login-sub{text-align:center;color:var(--text-soft);font-size:13px;margin:14px 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--text-soft)}
.field .wrap{position:relative;display:flex;align-items:center}
.field .wrap svg{position:absolute;left:12px;color:var(--text-soft);width:18px;height:18px}
.field .input{width:100%;height:44px;border:1px solid var(--line);background:var(--surface-2);
   border-radius:11px;padding:0 12px 0 38px;font-size:14px;color:var(--text)}
.field .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.btn{height:46px;width:100%;border-radius:11px;background:var(--brand);color:var(--on-brand);
   font-weight:600;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.login-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12.5px}

/* ===== Página de Novidades (notas de versão) ===== */
.page-sub{color:var(--text-soft);font-size:13.5px;margin:2px 0 22px}
.nov-grupo{margin-bottom:26px}
.nov-grupo-head{display:flex;align-items:center;gap:10px;margin:0 0 13px}
.nov-versao{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;
   text-transform:uppercase;color:var(--text-soft);white-space:nowrap}
.nov-grupo-head::after{content:"";flex:1;height:1px;background:var(--line)}
.nov-novas-tag{order:3;font-size:11px;font-weight:700;color:var(--brand);
   background:var(--brand-soft);border-radius:20px;padding:2px 10px;white-space:nowrap}
.nov-lista{display:flex;flex-direction:column;gap:12px}
.nov-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);
   border-radius:var(--radius);padding:15px 18px;box-shadow:var(--shadow)}
.nov-card.cat-novidade{border-left-color:var(--green)}
.nov-card.cat-melhoria{border-left-color:var(--blue)}
.nov-card.cat-correcao{border-left-color:var(--amber)}
.nov-card.is-nova{background:var(--brand-softer)}
.nov-card.is-destaque{box-shadow:0 0 0 1px var(--brand-soft),var(--shadow)}
.nov-card-top{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.nov-cat{font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:20px;padding:2px 10px;color:#fff}
.nov-cat.cat-novidade{background:var(--green)}
.nov-cat.cat-melhoria{background:var(--blue)}
.nov-cat.cat-correcao{background:var(--amber)}
.nov-destaque{color:var(--amber);font-size:15px;line-height:1}
.nov-novo{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);
   border-radius:20px;padding:2px 8px;text-transform:uppercase;letter-spacing:.03em}
.nov-data{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-soft)}
.nov-titulo{margin:0 0 5px;font-size:15px;font-weight:600;line-height:1.3}
.nov-desc{font-size:13.5px;color:var(--text-soft);line-height:1.55}

/* Material de apoio (manual da secretária, no topo das Novidades) */
.apoio-sec{margin:0 0 26px}
.apoio-head{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;
   text-transform:uppercase;color:var(--text-soft);margin:0 0 10px}
.apoio-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);
   background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
   border-radius:var(--radius);padding:15px 18px;box-shadow:var(--shadow);transition:border-color .12s}
.apoio-card:hover{border-color:var(--brand)}
.apoio-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
   border-radius:10px;background:var(--brand-softer);color:var(--brand)}
.apoio-ic .ic{width:20px;height:20px}
.apoio-txt{display:flex;flex-direction:column;gap:2px}
.apoio-txt strong{font-size:15px;font-weight:600}
.apoio-txt small{font-size:13px;color:var(--text-soft);line-height:1.45}
.apoio-go{margin-left:auto;color:var(--brand);font-weight:600;font-size:14px;white-space:nowrap}

/* Cadastro de procedimento pelo solicitante (modal da Nova Solicitação). */
.btn-novo-proc{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 10px;gap:6px;margin-top:8px}
.form-novo-proc .f.listas-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.form-novo-proc .f.listas-proc .check-list{max-height:200px}
.form-novo-proc .toolbar{margin:16px 0 0}
.form-novo-proc .empty{padding:10px 0;text-align:left;font-size:12.5px}
.erro-campo{font-size:12px;color:var(--red)}
@media (max-width:900px){ .form-novo-proc .f.listas-proc{grid-template-columns:1fr} }

/* ---------- Impressão (relatório / listagens) ---------- */
.print-header{display:none}
@media print {
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .side,.top,.crumb,.no-print{display:none !important}
  #app{display:block !important}
  .main{padding:0 !important}
  .panel{box-shadow:none !important;border:1px solid #999}
  a{color:inherit !important;text-decoration:none !important}
  table{font-size:11px}
  /* Relatório: não corta a tabela larga na impressão e reduz para caber na página. */
  .rel-scroll{overflow:visible !important}
  .rel-scroll table{font-size:9px;table-layout:fixed;word-break:break-word}
  .rel-scroll th,.rel-scroll td{padding:3px 5px}
  .pill{border:1px solid #999}
  .print-header{display:flex !important;align-items:center;gap:16px;
    border-bottom:2px solid #333;padding-bottom:10px;margin-bottom:14px}
  .print-header img{height:46px;max-width:170px;object-fit:contain}
  .print-header .ph-info{flex:1}
  .print-header .ph-title{font-size:18px;font-weight:700}
  .print-header .ph-empresa{font-size:13px;color:#333}
  .print-header .ph-meta{text-align:right;font-size:11px;color:#333;line-height:1.5}
  @page{margin:12mm}
}