/* ds.css — Linguagem de design compartilhada (DicomRouter)
   Estilo iOS/Apple: clareza, deferência (o conteúdo manda), fluidez e deleite.
   Camada de "feel" compartilhada entre hub (index), editor (laudo) e secretária —
   aditiva: refina movimento, feedback de toque, foco e confirmações sem reescrever
   o layout de cada página. */

:root{
  /* cor */
  --ds-brand:#0e4a8c; --ds-brand-2:#0ea5a4;
  --ds-ink:#0f172a; --ds-muted:#64748b; --ds-line:#e2e8f0;
  --ds-bg:#f5f7fa; --ds-surface:#ffffff; --ds-soft:#f1f5f9;
  --ds-ok:#15803d; --ds-warn:#b45309; --ds-danger:#b91c1c;
  /* tipografia (system font — SF no Apple, Segoe no Windows) */
  --ds-font:-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* escala de espaçamento (base 4) */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:24px; --ds-6:32px;
  /* raio · sombra · motion */
  --ds-radius:12px; --ds-radius-lg:16px;
  --ds-shadow:0 1px 3px rgba(2,6,23,.08),0 8px 24px rgba(2,6,23,.08);
  --ds-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- movimento + feedback de toque (cobre as classes do hub e do editor) ---- */
button,.btn,.btn-primary,.btn-secondary,.admin-menu-btn,.tabp,.tabadd,.row,
.controls select,.controls button{
  transition: background .18s var(--ds-ease), color .18s var(--ds-ease),
              box-shadow .2s var(--ds-ease), transform .11s var(--ds-ease),
              border-color .18s var(--ds-ease), filter .18s var(--ds-ease);
}
button:not(:disabled):active,.btn:not(:disabled):active,.btn-primary:active,
.btn-secondary:active,.admin-menu-btn:active,.tabp:active,.tabadd:active,.row:active{
  transform: scale(.975);
}
.btn:not(:disabled):hover,.btn-primary:hover,.btn-secondary:hover{ filter: brightness(1.05); }

/* ---- foco acessível (anel iOS) ---- */
:focus-visible{ outline:2px solid var(--ds-brand-2); outline-offset:2px; }

/* ---- toast flutuante (confirmação) ---- */
#toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(34px);
  background:#0f172a; color:#fff; padding:12px 20px; border-radius:14px;
  box-shadow:0 14px 38px rgba(2,6,23,.42); font-weight:600; font-size:14px;
  opacity:0; pointer-events:none; z-index:80; max-width:90vw;
  transition:opacity .26s var(--ds-ease), transform .26s var(--ds-ease); }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast.ok{ background:#0f5132; } #toast.err{ background:#7f1d1d; }

/* ---- autosave + troca de aba (editor) ---- */
#save{ display:inline-flex; align-items:center; gap:6px; }
#save::before{ content:''; width:7px; height:7px; border-radius:50%;
  background:var(--ds-muted); opacity:.45; transition:background .2s, opacity .2s; }
#save.saving::before{ background:#f59e0b; opacity:1; animation:ds-pulse 1s var(--ds-ease) infinite; }
#save.saved::before{ background:var(--ds-ok); opacity:1; }
@keyframes ds-pulse{ 50%{ opacity:.3; } }
@keyframes ds-procIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.editor.swap{ animation: ds-procIn .24s var(--ds-ease); }
.editor{ transition: box-shadow .25s var(--ds-ease); }
.editor:focus{ box-shadow:0 3px 18px rgba(14,74,140,.13); }

/* ---- modais: entrada suave ---- */
.modal.show .box{ animation: ds-modalIn .22s var(--ds-ease); }
@keyframes ds-modalIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---- handoff entre páginas: crossfade nativo ao navegar (worklist → editor) ---- */
@view-transition{ navigation: auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.28s; animation-timing-function:cubic-bezier(.22,.61,.36,1); }
/* fade-in de conteúdo ao aparecer (editor/seletor) */
@keyframes ds-appear{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.ds-appear{ animation: ds-appear .28s var(--ds-ease); }

/* botão pulsando p/ chamar atenção (ex.: abrir visualizador quando pop-up bloqueado) */
@keyframes ds-glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,165,164,0); } 50%{ box-shadow:0 0 0 4px rgba(14,165,164,.30); } }
.glow{ animation: ds-glow 1.4s var(--ds-ease) infinite; border-color:var(--ds-brand-2) !important; }

/* ---- navegação no topo (nav.js v2): voltar + hub + clínica atual ---- */
.navtop{ display:flex; align-items:center; gap:6px; margin-right:8px; flex:none }
.navtop-back,.navtop-home{ width:34px; height:34px; border-radius:10px; border:1px solid var(--ds-line);
  background:#fff; color:var(--ds-brand); display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; cursor:pointer; text-decoration:none; flex:none;
  transition:background .18s var(--ds-ease); }
.navtop-back:hover,.navtop-home:hover{ background:var(--ds-soft) }
.navtop-clin{ max-width:220px; padding:8px 9px; border:1px solid var(--ds-line); border-radius:10px;
  background:#fff; color:var(--ds-muted); font:600 12.5px var(--ds-font); cursor:pointer }
.navtop-clin.on{ color:var(--ds-ink); border-color:var(--ds-brand-2) }
.navtop-clin.hub{ margin-right:10px }
@media (max-width:640px){ .navtop-clin{ max-width:132px } }
@media print{ .navtop,.navtop-clin{ display:none !important } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  button:active,.btn:active{ transform:none !important; }
}