:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #dde1e7;
  --text: #16191f;
  --muted: #5f6774;
  --accent: #e3122c;          /* rojo eléctrico KOTXIA */
  --accent-ink: #ffffff;
  --accent-soft: #fde8eb;
  --ok: #18794e;
  --warn-bg: #fff4e5;
  --warn-ink: #8a4b00;
  --danger: #c21426;
  --radius: 5px;
  --chrome: #1C2026;          /* ribbon grafito */
  --chrome-2: #262B33;
  --chrome-line: #323843;
  --chrome-ink: #E8EBEF;
  --chrome-muted: #9AA3B0;
  --work: #EEF0F3;            /* superficies de trabajo */
  --film: #0A0C0F;            /* película / negatoscopio */
  --ready: #22A06B;
  --ribbon-h: 84px;
  --status-h: 26px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* visor: siempre oscuro (convención radiológica) */
  --vw-bg: #0b0d10;
  --vw-panel: #14171c;
  --vw-panel-2: #1c2027;
  --vw-border: #2a2f38;
  --vw-text: #e6e8eb;
  --vw-muted: #8b93a1;
  --vw-annot: #ffd400;
  --vw-select: #34d1ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.topbar {
  height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 16px; letter-spacing: -.01em; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.mode-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--muted); }
select.lang-select { width: auto; height: 30px; padding: 0 6px; font-size: 13px; }
.login .lang-select { justify-self: start; }

/* ---------- controles ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; white-space: nowrap; font-weight: 500;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(.94); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=date],
input[type=tel], input[type=number], select, textarea {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
label.field, div.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
label.field > span, div.field > span { font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }

/* ---------- páginas ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.page-head .spacer { flex: 1; }
.search { max-width: 420px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* tabla de pacientes */
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.list td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover { background: var(--surface-2); }
table.list tbody tr:last-child td { border-bottom: 0; }
.code { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.alert-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 6px; }

/* ficha */
.patient-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.patient-card { padding: 16px; }
.patient-card dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 0; }
.patient-card dt { color: var(--muted); font-size: 13px; }
.patient-card dd { margin: 0; word-break: break-word; }
.alerts-banner { background: var(--accent-soft); color: var(--danger); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 12px; font-weight: 500; white-space: pre-wrap; }
.study { padding: 14px 16px; margin-bottom: 14px; }
.study-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.study-head h3 { margin: 0; font-size: 15px; }
.kind-tag { font-size: 12px; background: var(--surface-2); border-radius: 99px; padding: 2px 10px; color: var(--muted); }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb { width: 132px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #000; cursor: pointer; position: relative; padding: 0; }
.thumb img { display: block; width: 100%; height: 104px; object-fit: contain; }
.thumb .cap { display: block; background: var(--surface); font-size: 12px; padding: 4px 6px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.dropzone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 14px; color: var(--muted);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type=text] { max-width: 180px; height: 30px; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(15, 18, 24, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px; }
.modal h2 { margin: 0 0 16px; font-size: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.error { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: min(380px, 100%); padding: 28px; display: grid; gap: 14px; }
.login .brand { font-size: 20px; margin-bottom: 4px; }
.setup-h { margin: 8px 0 -4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
label.field > small { font-size: 12px; }

/* toast */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1f232a; color: #fff;
  padding: 10px 16px; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; max-width: 90vw; }
.toast.show { opacity: 1; }
.toast.err { background: var(--danger); }

/* ---------- v0.3: clínica, puestos, administración ---------- */
.where { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.lock-banner { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 10px 12px;
  margin-bottom: 12px; font-weight: 500; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
table.list.static tbody tr { cursor: default; }
table.list tr.dim td { opacity: .55; }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: 6px; }
.tag { font-size: 12px; border-radius: 99px; padding: 2px 9px; background: var(--surface-2); color: var(--muted); }
.tag.ok { background: #e6f4ec; color: var(--ok); }
.tag.danger { background: var(--accent-soft); color: var(--danger); }
.pair-code { font: 700 34px/1.2 var(--mono); letter-spacing: .12em; text-align: center; padding: 18px; margin: 10px 0;
  background: var(--surface-2); border-radius: var(--radius); user-select: all; }
.check-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check-row input { margin-top: 3px; accent-color: var(--accent); }
.vw-ro { background: #3a2a00; color: #ffd27a; font-size: 12px; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }

/* ---------- visor ---------- */
body.viewer-mode { background: var(--vw-bg); overflow: hidden; }
body.viewer-mode .topbar, body.viewer-mode .ribbon, body.viewer-mode .statusbar { display: none !important; }
.viewer { position: fixed; inset: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) 260px;
  grid-template-rows: 46px minmax(0, 1fr) 92px; color: var(--vw-text); background: var(--vw-bg); }
.vw-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: var(--vw-panel); border-bottom: 1px solid var(--vw-border); min-width: 0; }
.vw-top .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-top .sub { color: var(--vw-muted); font-size: 13px; white-space: nowrap; }
.vw-top .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vw-btn { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--vw-border);
  background: var(--vw-panel-2); color: var(--vw-text); cursor: pointer; white-space: nowrap; }
.vw-btn:hover { border-color: #3c4350; }
.vw-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.vw-btn:disabled { opacity: .45; cursor: default; }
.dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vw-annot); display: inline-block; }

.vw-tools { background: var(--vw-panel); border-right: 1px solid var(--vw-border); display: flex; flex-direction: column;
  align-items: center; padding: 8px 0; gap: 4px; }
.tool { width: 40px; height: 40px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--vw-muted); cursor: pointer; display: grid; place-items: center; }
.tool svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover { color: var(--vw-text); background: var(--vw-panel-2); }
.tool.active { color: #fff; background: var(--accent); }
.tool-sep { width: 28px; height: 1px; background: var(--vw-border); margin: 4px 0; }

.vw-stage { position: relative; overflow: hidden; background: #000; touch-action: none; }
.vw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vw-overlay { position: absolute; left: 10px; bottom: 8px; font: 12px/1.5 var(--mono); color: var(--vw-muted);
  pointer-events: none; text-shadow: 0 1px 2px #000; white-space: pre; }
.vw-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(20, 23, 28, .9);
  border: 1px solid var(--vw-border); padding: 6px 12px; border-radius: 6px; font-size: 13px; pointer-events: none; }
.vw-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--vw-muted); }

.vw-side { background: var(--vw-panel); border-left: 1px solid var(--vw-border); overflow-y: auto; padding: 12px 14px; }
.vw-side h4 { margin: 14px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--vw-muted); font-weight: 600; }
.vw-side h4:first-child { margin-top: 0; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 8px; font-size: 13px; }
.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.slider output { font-family: var(--mono); color: var(--vw-muted); font-size: 12px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.row .vw-btn { flex: 1; padding: 0 6px; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; cursor: pointer; }
.check input { accent-color: var(--accent); }
.info { font-size: 12px; color: var(--vw-muted); display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.info b { color: var(--vw-text); font-weight: 500; }
.warn-cal { color: var(--vw-annot); font-size: 12px; margin-top: 6px; }
.annot-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.annot-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.annot-list li:hover, .annot-list li.sel { background: var(--vw-panel-2); }
.annot-list .val { margin-left: auto; font-family: var(--mono); color: var(--vw-annot); }
.annot-list button { background: none; border: 0; color: var(--vw-muted); cursor: pointer; padding: 0 2px; }

.vw-strip { grid-column: 1 / -1; background: var(--vw-panel); border-top: 1px solid var(--vw-border);
  display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; }
.vw-strip button { flex: 0 0 auto; width: 96px; height: 74px; border-radius: 6px; border: 2px solid transparent;
  background: #000; padding: 0; cursor: pointer; overflow: hidden; }
.vw-strip button.cur { border-color: var(--accent); }
.vw-strip img { width: 100%; height: 100%; object-fit: contain; display: block; }

.table-wrap { overflow-x: auto; }

@media (max-width: 640px) {
  table.list th:nth-child(n+4), table.list td:nth-child(n+4) { display: none; }
  #user-name, .mode-badge, .where { display: none; }
  .search { max-width: none; order: 10; flex-basis: 100%; }
}

@media (max-width: 900px) {
  .patient-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .viewer { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 46px minmax(0, 1fr) auto 80px; }
  .vw-side { grid-column: 1 / -1; max-height: 34vh; border-left: 0; border-top: 1px solid var(--vw-border); }
  .tool { width: 36px; height: 36px; }
}

/* ---------- explorador de pacientes (maestro-detalle, estilo CS) ---------- */
.workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--list-w, 360px); height: calc(100vh - var(--ribbon-h) - var(--status-h));
  background: var(--border); gap: 1px; overflow: hidden;
}
.workspace.list-left { grid-template-columns: var(--list-w, 360px) 6px minmax(0, 1fr); }
.workspace.list-left .ws-list { order: -2; }
.workspace.list-left > .splitter { order: -1; }
.workspace.exam { grid-template-columns: minmax(0, 1fr); }
.ws-list, .ws-detail { background: var(--surface); min-height: 0; min-width: 0; display: flex; flex-direction: column; }

.ws-list-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.ws-list-head h2 { font-size: 15px; margin: 0; }
.ws-list-head .spacer { flex: 1; }
.ws-count { font-size: 12px; }
.icon-btn { width: 30px; padding: 0; justify-content: center; font-size: 15px; }
.ws-search { padding: 0 12px 8px; border-bottom: 1px solid var(--border); }
.ws-search .search { max-width: none; height: 32px; }
.ws-list-scroll { overflow: auto; flex: 1; outline: none; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.ws-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-weight: 600;
  font-size: 12px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
  user-select: none; cursor: pointer; }
.ws-table th:nth-child(1) { width: 42%; } .ws-table th:nth-child(2) { width: 32%; }
.ws-table th:nth-child(3) { width: 26%; }
.ws-table th.on { color: var(--text); }
.ws-table th:hover { background: var(--border); }
.ws-table td { padding: 5px 8px; border-bottom: 1px solid var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-table td.ln { font-weight: 600; }
.ws-table td.num, .ws-table td.code { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.ws-table td.code { font-family: var(--mono); font-size: 12px; }
.ws-table tr[data-id] { cursor: pointer; }
.ws-table tr[data-id]:hover td { background: var(--surface-2); }
.ws-table tr.sel td, .ws-table tr.sel:hover td { background: var(--accent); color: var(--accent-ink); }
.ws-table tr.sel .alert-dot { background: #fff; }
.ws-table tr:focus { outline: none; }
.ws-more { margin: 8px auto; display: flex; }

.ws-detail { position: relative; }
.ws-detail.loading > * { opacity: .55; transition: opacity .15s .1s; }
.ws-placeholder { margin: auto; text-align: center; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.ws-ph-icon { color: #B7BEC8; }

.ws-patient { display: flex; align-items: flex-start; gap: 16px; padding: 14px 18px 10px; border-bottom: 1px solid var(--border); }
.ws-patient-main { flex: 1; min-width: 0; }
.ws-patient h1 { font-size: 20px; margin: 0 0 6px; font-weight: 500; letter-spacing: -.01em; }
.ws-patient h1 .ln { font-weight: 700; text-transform: uppercase; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.fact span { color: var(--muted); margin-right: 6px; }
.fact b { font-weight: 600; }
.ws-patient-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ws-detail > .lock-banner, .ws-detail > .alerts-banner { margin: 8px 18px 0; }

.ws-tools { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ws-tools .spacer { flex: 1; }
.ws-tabs { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius); }
.ws-tab { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--muted); }
.ws-tab .n { margin-left: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-tab.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.ws-tab:disabled { opacity: .45; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--text); color: var(--surface); }

.ws-grid { flex: 1; overflow: auto; padding: 6px 18px 18px; background: #e9ecf0; }
.ws-grid[data-size=s] { --tile: 120px; }
.ws-grid[data-size=l] { --tile: 240px; }
.ws-group h3 { font-size: 13px; margin: 12px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.ws-group h3 .desc { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
  background: var(--vw-panel); color: var(--vw-text); cursor: pointer; text-align: left; }
.tile:hover { border-color: var(--vw-border); }
.tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tile-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #000; }
.tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.tile-cap { display: flex; gap: 6px; padding: 5px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.tile-cap b { font-weight: 600; }
.tile-cap span { color: var(--vw-muted); overflow: hidden; text-overflow: ellipsis; }
.ws-noimg { margin: 60px auto; text-align: center; color: var(--muted); display: grid; gap: 8px; justify-items: center; max-width: 360px; }

.ws-status { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 4px 18px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ws-status:empty { display: none; }
.ws-status .st-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ws-status .spacer { flex: 1; }

.ws-drop { position: absolute; inset: 8px; border: 3px dashed var(--accent); border-radius: 12px; background: rgba(255, 255, 255, .88);
  display: grid; place-items: center; font-size: 17px; font-weight: 600; color: var(--accent); pointer-events: none; z-index: 5; }
.imp-pick { display: flex; gap: 10px; align-items: flex-start; }
.imp-files ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }

@media (max-width: 900px) {
  .workspace, .workspace.list-left { grid-template-columns: 1fr; grid-template-rows: 42vh minmax(0, 1fr); height: auto; min-height: calc(100vh - 52px); }
  .workspace > .splitter { display: none; }
  .workspace .ws-list, .workspace.list-left .ws-list { order: -1; }
  .ws-patient { flex-direction: column; }
}

/* ---------- captura ---------- */
label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
label.check input { width: 16px; height: 16px; }
.cap-status { margin-top: 4px; padding: 18px; border-radius: var(--radius); display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 4px 12px; font-size: 15px; font-weight: 600; background: var(--surface-2); }
.cap-status small { grid-column: 2; font-weight: 400; color: var(--muted); font-size: 13px; }
.cap-status.armed { background: #e7f6ee; color: var(--ok); }
.cap-status.failed { background: var(--warn-bg); color: var(--warn-ink); grid-template-columns: 1fr; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: currentColor; animation: kxd-pulse 1.1s ease-in-out infinite; }
@keyframes kxd-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }


/* =====================================================================
   Marco de aplicación de escritorio: ribbon, barra de estado, película
   ===================================================================== */
body.app-chrome { background: var(--work); overflow: hidden; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.logo { flex: none; display: block; }
.brand { display: flex; align-items: center; gap: 10px; }

/* ---------- ribbon ---------- */
.ribbon { height: var(--ribbon-h); display: flex; align-items: stretch; background: var(--chrome); color: var(--chrome-ink);
  border-bottom: 1px solid #000; user-select: none; position: relative; z-index: 20; }
.rb-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 0 14px; text-decoration: none; color: inherit;
  border-right: 1px solid var(--chrome-line); font-size: 15px; letter-spacing: -.01em; }
.rb-brand b { font-weight: 700; }
.rb-groups { display: flex; align-items: stretch; }
.rb-group { display: flex; flex-direction: column; padding: 6px 6px 3px; border-right: 1px solid var(--chrome-line); }
.rb-row { display: flex; gap: 2px; flex: 1; }
.rb-caption { font-size: 11px; color: var(--chrome-muted); text-align: center; padding-top: 2px; }
.rb-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 62px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit;
  cursor: pointer; font-size: 12px; }
.rb-btn:hover:not(:disabled) { background: var(--chrome-2); border-color: var(--chrome-line); }
.rb-btn:active:not(:disabled) { background: #14181D; }
.rb-btn.on { background: #2E3540; border-color: #46505E; box-shadow: inset 0 -2px 0 var(--accent); }
.rb-btn:disabled { opacity: .32; cursor: default; }
.rb-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.rb-ico { display: grid; place-items: center; width: 34px; height: 30px; }
.rb-primary .rb-ico { background: var(--accent); color: #fff; border-radius: 6px; }
.rb-primary:hover:not(:disabled) .rb-ico { filter: brightness(1.08); }
.rb-label { white-space: nowrap; }
.rb-badge { position: absolute; top: 6px; right: 12px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--chrome); background: #59616D; }
.lv-ok { background: var(--ready) !important; }
.lv-warn { background: #E8A33D !important; }
.lv-busy { background: #4C9AFF !important; animation: kxd-pulse 1.1s ease-in-out infinite; }
.lv-idle { background: #8A929E !important; }
.lv-off { background: #59616D !important; }
.rb-right { margin-left: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; padding: 0 14px; }
.ribbon .where { font-size: 12px; color: var(--chrome-muted); }
.rb-tools { display: flex; align-items: center; gap: 4px; }
.rb-mini { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 4px; border: 1px solid transparent;
  background: transparent; color: var(--chrome-ink); font-size: 12.5px; cursor: pointer; text-decoration: none; }
.rb-mini:hover { background: var(--chrome-2); border-color: var(--chrome-line); }
.ribbon select.lang-select { height: 28px; background: var(--chrome-2); color: var(--chrome-ink); border-color: var(--chrome-line); font-size: 12.5px; }

/* ---------- barra de estado ---------- */
.statusbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--status-h); display: flex; align-items: center; gap: 18px;
  padding: 0 12px; background: #DFE2E7; border-top: 1px solid #C9CED6; font-size: 12px; color: #3B424D; z-index: 20; }
.sb-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb-spacer { flex: 1; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: #8A929E; }

/* ---------- popover de sensores ---------- */
.popover { position: fixed; z-index: 60; width: 370px; background: var(--surface); color: var(--text); border: 1px solid #C9CED6;
  border-radius: 6px; box-shadow: 0 12px 32px rgba(16, 24, 40, .22); padding: 12px; }
.pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sn-list { display: grid; gap: 2px; }
.sn-item { display: grid; grid-template-columns: 28px 1fr 12px; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 4px; }
.sn-item:hover { background: var(--surface-2); }
.sn-ico { color: var(--muted); display: grid; place-items: center; }
.sn-text { display: grid; min-width: 0; }
.sn-text b { font-weight: 600; font-size: 13px; }
.sn-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-dot { width: 10px; height: 10px; border-radius: 50%; background: #B7BEC8; }
.st-online .sn-dot { background: var(--ready); box-shadow: 0 0 0 3px rgba(34, 160, 107, .18); }
.st-online .sn-ico { color: var(--ready); }
.st-offline .sn-dot { background: #8A929E; }
.st-error .sn-dot { background: var(--danger); }
.st-unknown .sn-dot { background: #E8A33D; }
.sn-empty { color: var(--muted); margin: 8px 4px; display: flex; gap: 8px; align-items: center; }
.sn-note { color: var(--muted); font-size: 12px; margin: 10px 4px 0; line-height: 1.4; }

/* ---------- explorador: escritorio, denso ---------- */
.ws-patient { align-items: center; padding: 10px 16px; background: var(--surface); }
.ws-avatar { width: 40px; height: 40px; border-radius: 8px; background: var(--work); color: #59616D; display: grid; place-items: center; flex: none; }
.ws-patient h1 { font-size: 18px; margin: 0 0 3px; }
.alerts-banner { display: flex; gap: 8px; align-items: center; }
.ws-tools { background: var(--surface); padding: 6px 16px; }
.ws-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--work); }
.ws-stage { --tile: 168px; }
.ws-stage[data-size=s] { --tile: 120px; }
.ws-stage[data-size=l] { --tile: 240px; }
.ws-stage .ws-grid { flex: 1; background: transparent; }
.ws-noimg { margin: auto; }
.noimg-ico { color: #8A929E; }
.noimg-actions { display: flex; gap: 8px; }
.btn .ic { margin-left: -2px; }

/* ---------- vista Película: negatoscopio + tira ---------- */
.film-view { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--film); }
.lightbox { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at center, #1A1F26 0%, #0A0C0F 70%); }
.lb-img { position: absolute; inset: 46px 70px 14px; margin: auto; width: auto; height: auto;
  /* absoluta: el tamaño real de la imagen (p. ej. 1200×1600) no agranda la caja; se centra en el espacio libre */
  max-width: min(calc(100% - 140px), 620px); max-height: min(calc(100% - 60px), 420px); object-fit: contain; cursor: zoom-in;
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, .6); transition: opacity .15s; }
.lb-img.loading { opacity: .35; }
.lb-info { position: absolute; left: 14px; top: 12px; display: flex; gap: 12px; align-items: baseline; color: #D7DCE3; font-size: 13px;
  text-shadow: 0 1px 2px #000; }
.lb-info b { color: #fff; font-size: 14px; }
.lb-n { color: #8A929E; font-variant-numeric: tabular-nums; }
.lb-open { position: absolute; right: 14px; top: 10px; background: rgba(28, 32, 38, .85); color: #E8EBEF; border-color: #3A414C; }
.lb-open:hover { background: #2A3039; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 64px; border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, .06); color: #C9CED6; font-size: 34px; line-height: 1; cursor: pointer; }
.lb-nav:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }

/* la tira: película negra con perforaciones arriba y abajo y el código impreso en el borde */
.filmstrip { --hole: rgba(238, 240, 243, .82); display: flex; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: hidden;
  padding: 18px 10px; background-color: #050608;
  background-image:
    radial-gradient(circle at 50% 50%, var(--hole) 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 50% 50%, var(--hole) 0 2.6px, transparent 3.2px);
  background-size: 14px 14px, 14px 14px; background-repeat: repeat-x, repeat-x;
  background-position: 0 2px, 0 calc(100% - 2px);
  border-top: 1px solid #000; scrollbar-color: #3A414C #050608; outline: none; }
.filmstrip:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.film-leader { flex: none; display: flex; align-items: center; padding: 0 10px 0 14px; margin-left: 6px; color: #E8A33D;
  border-left: 2px solid #2A2F37; }
.film-leader:first-child { border-left: 0; margin-left: 0; padding-left: 4px; }
.film-leader span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.ws-stage { --fw: 132px; --fh: 99px; }
.ws-stage[data-size=s] { --fw: 100px; --fh: 75px; }
.ws-stage[data-size=l] { --fw: 184px; --fh: 138px; }
.frame { flex: none; width: calc(var(--fw) + 16px); display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 3px; margin: 0 3px; border: 0; border-radius: 2px;
  background: #15181D; cursor: pointer; }
.frame-img { display: grid; place-items: center; width: var(--fw); height: var(--fh); background: #000; overflow: hidden; }
.frame-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; opacity: .82; transition: opacity .12s; }
.frame:hover .frame-img img { opacity: 1; }
.frame-edge { font: 600 9.5px/1 var(--mono); color: #E8A33D; letter-spacing: .03em; white-space: nowrap; text-align: left; opacity: .85;
  overflow: hidden; text-overflow: clip; }
.frame.sel { background: #2A1418; box-shadow: 0 0 0 2px var(--accent); }
.frame.sel .frame-img img { opacity: 1; }
.frame.sel .frame-edge { color: #FFB86B; opacity: 1; }

/* ---------- vista Lista ---------- */
.ws-listview { flex: 1; overflow: auto; background: var(--surface); }
.img-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.img-table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
  padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.img-table td { padding: 4px 10px; border-bottom: 1px solid var(--surface-2); white-space: nowrap; }
.img-table tr[data-id] { cursor: pointer; }
.img-table tr[data-id]:hover td { background: var(--surface-2); }
.img-table tr.sel td, .img-table tr.sel:hover td { background: #FBE3E6; }
.img-table td.num { font-variant-numeric: tabular-nums; }
.img-table .lv-thumb { width: 64px; padding: 3px 10px; }
.img-table .lv-thumb img { width: 52px; height: 40px; object-fit: contain; background: #000; display: block; border-radius: 2px; }
.img-table .lv-name { color: var(--muted); }

/* mosaico: selección también con la marca roja */
.tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ws-drop > div { display: grid; justify-items: center; gap: 10px; }

@media (max-width: 900px) {
  .rb-brand .rb-name, .rb-caption, .ribbon .where { display: none; }
  .rb-btn { min-width: 48px; padding: 4px; }
  .rb-label { font-size: 11px; }
  body.app-chrome { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-busy, .pulse { animation: none; }
  .lb-img { transition: none; }
}
body.app-chrome #view { height: calc(100vh - var(--ribbon-h) - var(--status-h)); overflow: auto; }
body.app-chrome .workspace { height: 100%; }
/* inicio de sesión / emparejamiento / configuración: pantalla de arranque de la aplicación */
.login-wrap { background: var(--chrome); }
.login-wrap .login { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border-color: #000; }

/* ---------- chips de filtro ---------- */
.filter-chips { display: inline-flex; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 9px; border-radius: 13px; border: 1px solid #F3B3BC;
  background: var(--accent-soft); color: var(--danger); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip:hover { background: #F9D2D8; }

/* ---------- arcada dental flotante ---------- */
.odontogram { position: fixed; right: 440px; top: 150px; z-index: 40; width: 620px; background: #15181D; color: #D7DCE3;
  border: 1px solid #000; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); user-select: none; }
.odo-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; background: #2A3039; border-radius: 8px 8px 0 0;
  cursor: move; font-size: 12.5px; touch-action: none; }
.odo-head .spacer { flex: 1; }
.odo-close { width: 24px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #C9CED6; cursor: pointer; }
.odo-close:hover { background: var(--accent); color: #fff; }
.odo-body { display: grid; grid-template-columns: 26px 1fr 26px; align-items: start; gap: 6px; padding: 10px 8px 4px; }
.odo-total { display: grid; place-items: center; width: 24px; height: 22px; font-size: 12px; color: #9AA3B0; font-variant-numeric: tabular-nums; }
.odo-quicks { display: grid; gap: 4px; }
.odo-quick { width: 24px; height: 22px; border: 1px solid #3A414C; border-radius: 4px; background: #1C2026; color: #C9CED6; font-size: 11px; font-weight: 700; cursor: pointer; }
.odo-quick:hover { border-color: #6B7480; }
.odo-quick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.arch-svg { width: 100%; height: auto; display: block; overflow: visible;
  background: radial-gradient(ellipse at center, #3A3E44 0%, #24272C 70%, #1B1E22 100%); border-radius: 4px; }
.tooth { cursor: pointer; outline: none; }
.tooth .t-img { filter: url(#t-base); transition: filter .12s; }
.tooth.has .t-img { filter: url(#t-has); }
.tooth:hover .t-img { filter: url(#t-hover); }
.tooth.lit .t-img { filter: url(#t-lit); }
.tooth.filter .t-img { filter: url(#t-filter); }
.tooth .t-hit { fill: transparent; stroke: none; }
.tooth:focus-visible .t-hit { stroke: #fff; stroke-width: .35; stroke-dasharray: 1 .8; }
.t-num { font: 600 2.6px/1 var(--font); fill: #6B7480; pointer-events: none; }
.t-num.has { fill: #C9CED6; }
.t-num.filter { fill: #FF8A97; }
.odo-hint { font-size: 11.5px; color: #8A929E; padding: 2px 12px 8px 40px; }
body.viewer-mode .odontogram { display: none !important; }
@media (max-width: 1200px) { .odontogram { right: 12px; width: 480px; } }

/* ---- barra de imágenes de la ficha (como en CS): vistas · Data|Tipo · Filtro · tamaño */
.img-bar { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: #0B0C0E;
  border-top: 1px solid #000; border-bottom: 1px solid #23272D; flex-wrap: wrap; }
.img-bar .spacer { flex: 1; }
.ib-views { display: flex; gap: 2px; }
.ib-btn { width: 34px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: #8E96A3; cursor: pointer; }
.ib-btn:hover { color: #E6E9EE; background: #1C2026; }
.ib-btn.on { color: #3D8BFF; background: #14233A; border-color: #24426C; }
.ib-sep { width: 1px; height: 22px; background: #2A2F36; margin: 0 6px; }
.ib-group { display: flex; align-items: center; }
.ib-pipe { color: #B5793A; padding: 0 1px; }
.ib-text { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 7px; border: 0; border-radius: 5px;
  background: transparent; color: #B08A5E; font-size: 14px; cursor: pointer; }
.ib-text:hover { color: #E6E9EE; background: #1C2026; }
.ib-text.on { color: #3D8BFF; }
.ib-filter { color: #6E9BD8; margin-left: 10px; }
.ib-filter.on { color: #3D8BFF; }
.ib-badge:empty { display: none; }
.ib-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #3D8BFF; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
.img-bar .filter-chips { margin-left: 4px; }
.img-bar .chip { height: 24px; background: #2A1418; border-color: #6B2A35; color: #FFB3BE; }
.img-bar .chip:hover { background: #3A1A20; }
.ib-sizes { display: inline-flex; border: 1px solid #2A2F36; border-radius: 5px; overflow: hidden; }
.ib-sizes[hidden] { display: none; }
.ib-size { width: 28px; height: 24px; border: 0; background: transparent; color: #8E96A3; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.ib-size + .ib-size { border-left: 1px solid #2A2F36; }
.ib-size.on { background: #2A3039; color: #fff; }
.ib-btn:focus-visible, .ib-text:focus-visible, .ib-size:focus-visible { outline: 2px solid #3D8BFF; outline-offset: 1px; }

.filter-pop { width: 280px; padding: 6px; }
.fp-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 4px; }
.fp-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent;
  color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.fp-item:hover:not(:disabled) { background: var(--surface-2); }
.fp-item:disabled { opacity: .45; cursor: default; }
.fp-item.on { font-weight: 600; }
.fp-check { width: 16px; display: grid; place-items: center; color: var(--accent); }
.fp-label { flex: 1; display: flex; align-items: center; gap: 6px; }
.fp-n { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fp-key { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--surface-2); font-size: 11px; }
.fp-hint { display: grid; gap: 6px; justify-items: start; padding: 2px 8px 6px 30px; font-size: 12.5px; color: var(--muted); }
.fp-foot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; display: flex; justify-content: flex-end; }

/* ---- vista Linha temporal */
.timeline { flex: 1; min-height: 0; overflow: auto; outline: none; background: var(--film, #111); }
.tl-track { position: relative; display: flex; align-items: flex-end; gap: 14px; min-height: 100%; padding: 16px 24px 0;
  box-sizing: border-box; width: max-content; min-width: 100%; }
.tl-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 46px; height: 2px; background: #3A414C; }
.tl-col { display: flex; flex-direction: column; align-items: center; gap: 0; }
.tl-stack { display: flex; flex-direction: column-reverse; gap: 8px; padding-bottom: 10px; }
.tl-item { display: flex; flex-direction: column; width: var(--fw, 132px); padding: 0; border: 2px solid transparent; border-radius: 4px;
  background: #000; cursor: pointer; overflow: hidden; }
.tl-item:hover { border-color: #4A525E; }
.tl-item.sel { border-color: #3D8BFF; box-shadow: 0 0 0 1px #3D8BFF; }
.tl-img { display: grid; place-items: center; height: var(--fh, 99px); background: #000; }
.tl-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.tl-cap { font-size: 10.5px; color: #8E96A3; padding: 2px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #0B0C0E; font-variant-numeric: tabular-nums; }
.tl-tick { width: 10px; height: 10px; border-radius: 50%; background: #3D8BFF; border: 2px solid #111; position: relative; z-index: 1; margin-bottom: 1px; }
.tl-date { display: grid; justify-items: center; height: 40px; padding-top: 4px; font-size: 11.5px; color: #C9CED6; font-variant-numeric: tabular-nums; }
.tl-date span { color: #6B7480; font-size: 10.5px; }
.tl-year { align-self: stretch; display: flex; align-items: flex-start; padding-top: 2px; border-left: 1px dashed #3A414C; padding-left: 6px; margin-left: 4px; }
.tl-year span { font-size: 12px; font-weight: 700; color: #6E9BD8; }

/* ---- explorador de pacientes (ventana principal) y ventana de exame */
.workspace.exam { grid-template-columns: minmax(0, 1fr); }
body.exam-window #admin-link, body.exam-window #logout-btn, body.exam-window #lang-select { display: none !important; }
.rb-group[hidden], .rb-btn[hidden] { display: none !important; }
body.exam-window .odontogram { right: 16px; top: auto; bottom: 190px; width: 520px; }

/* ---- ventana de exame: paciente en el ribbon */
body.exam-window .ribbon .where { max-width: 46vw; }
.rb-patient { display: inline-flex; align-items: baseline; gap: 12px; color: #9AA3B0; font-size: 12.5px; }
.rb-patient b { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.rb-alert { display: inline-flex; align-items: center; gap: 4px; align-self: center; max-width: 260px; padding: 2px 8px; border-radius: 10px;
  background: #5A1620; color: #FFC2CB; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- janela «Dente n.º X» */
.tooth-win { position: fixed; left: 16px; top: 140px; z-index: 41; width: max-content; min-width: 300px; max-width: min(820px, calc(100vw - 32px)); background: #15181D; color: #D7DCE3;
  border: 1px solid #3A414C; border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.tooth-win[hidden] { display: none; }
.tw-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; background: #2A3039; border-radius: 8px 8px 0 0;
  cursor: move; user-select: none; font-size: 13px; }
.tw-head .spacer { flex: 1; }
.tw-count { color: #8A929E; font-size: 12px; }
.tw-btn { width: 26px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #C9CED6; cursor: pointer; }
.tw-btn:hover:not(:disabled) { background: #3A414C; color: #fff; }
.tw-btn:disabled { opacity: .4; cursor: default; }
.tw-close:hover { background: var(--accent) !important; }
.tw-row { display: flex; gap: 6px; overflow-x: auto; padding: 8px; outline: none; scroll-behavior: smooth; }
.tw-frame { flex: none; display: flex; flex-direction: column; width: 150px; padding: 0; border: 2px solid transparent; border-radius: 4px;
  background: #000; cursor: pointer; overflow: hidden; }
.tw-frame:hover { border-color: #4A525E; }
.tw-frame.sel { border-color: #3D8BFF; box-shadow: 0 0 0 1px #3D8BFF; }
.tw-img { display: grid; place-items: center; height: 112px; background: #000; }
.tw-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.tw-cap { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; background: #0B0C0E; font-size: 11px; color: #8E96A3;
  white-space: nowrap; overflow: hidden; }
.tw-cap b { color: #D7DCE3; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-empty { margin: 0; padding: 18px 10px; color: #8A929E; font-size: 13px; }
body.viewer-mode .tooth-win { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tw-row { scroll-behavior: auto; } }

/* ---- painel «Análise IA» (ventana de exame) */
.ai-panel { position: fixed; top: var(--ribbon-h); right: 0; bottom: var(--status-h); z-index: 45; width: 440px; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 30px rgba(0, 0, 0, .18); }
.ai-panel[hidden] { display: none; }
body.ai-open .workspace.exam { margin-right: 440px; }
body.ai-open.exam-window .odontogram { right: 456px; }
body.viewer-mode .ai-panel { display: none !important; }
.ai-head { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 14px; background: #1C2026; color: #fff; }
.ai-head .ic { color: #C9CED6; }
.ai-head .spacer { flex: 1; }
.ai-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 9px; background: #2A3039; color: #C9CED6; }
.ai-badge:empty { display: none; }
.ai-badge.demo { background: #5A4A12; color: #FFE08A; }
.ai-x { width: 28px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #C9CED6; cursor: pointer; }
.ai-x:hover { background: var(--accent); color: #fff; }
.ai-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ai-tab { border: 0; background: transparent; padding: 7px 12px; font-size: 13px; color: var(--muted); border-radius: 6px 6px 0 0; cursor: pointer; }
.ai-tab.on { background: var(--surface); color: var(--text); font-weight: 600; }
.ai-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-pad { padding: 8px; }
.ai-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--muted); }
.ai-empty.error-box { color: var(--accent); }
.ai-running { display: grid; justify-items: center; gap: 12px; padding: 30px 8px; text-align: center; }
.ai-running p { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.ai-thumbs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ai-thumbs img { width: 72px; height: 54px; object-fit: contain; background: #000; border-radius: 3px; animation: ai-pulse 1.6s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ai-thumbs img { animation: none; } }
.ai-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--muted); }
.ai-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 9px; text-transform: uppercase; letter-spacing: .03em; }
.ai-status.st-draft { background: #FFF1C9; color: #7A5600; }
.ai-status.st-validated { background: #D8F3E1; color: #145C32; }
.ai-status.st-discarded, .ai-status.st-error { background: var(--surface-2); color: var(--muted); }
.ai-warn, .ai-ok { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; }
.ai-warn { background: #FFF6DC; color: #6B4C00; border: 1px solid #F1D88A; }
.ai-ok { background: #E6F6EC; color: #145C32; border: 1px solid #A9DDBC; }
.ai-sec h4 { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ai-sec p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; }
.ai-sec.small p { font-size: 12.5px; }
.ai-n { font-size: 11px; background: var(--surface-2); border-radius: 8px; padding: 0 6px; color: var(--muted); }
.ai-imp { font-weight: 500; }
.ai-findings, .ai-evo, .ai-recs, .ai-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ai-findings li { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); }
.ai-findings li.sev-none { border-left-color: #A9B1BC; }
.ai-findings li.sev-mild { border-left-color: #E3B341; }
.ai-findings li.sev-moderate { border-left-color: #E8833A; }
.ai-findings li.sev-severe { border-left-color: var(--accent); }
.ai-f-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 2px; font-size: 12.5px; }
.ai-cat { color: var(--muted); }
.ai-sev { font-weight: 700; font-size: 11px; }
.ai-sev.s-moderate { color: #B5561A; } .ai-sev.s-severe { color: var(--accent); } .ai-sev.s-mild { color: #8A6A00; } .ai-sev.s-none { color: var(--muted); }
.ai-conf { margin-left: auto; font-size: 11px; color: var(--muted); }
.ai-evo li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 13px; }
.ai-chg { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 9px; background: var(--surface-2); white-space: nowrap; }
.ai-chg.c-worsened, .ai-chg.c-new { background: #FDE0E4; color: #A51D2D; }
.ai-chg.c-improved, .ai-chg.c-resolved { background: #D8F3E1; color: #145C32; }
.ai-chg.c-stable { background: #E4ECF7; color: #24426C; }
.ai-recs li { font-size: 13px; padding-left: 14px; position: relative; }
.ai-recs li::before { content: "–"; position: absolute; left: 2px; color: var(--muted); }
.ai-text { width: 100%; min-height: 220px; resize: vertical; font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.ai-text[readonly] { background: var(--surface-2); }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; bottom: -16px; padding: 8px 0; background: var(--surface); }
.ai-hist li button { width: 100%; display: grid; gap: 3px; justify-items: start; text-align: left; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 13px; color: var(--text); }
.ai-hist li button:hover { border-color: #9AA3B0; }
.ai-hist small { color: var(--muted); }
.rb-ai .rb-ico .ic { color: #FF4D5E; }
.tw-ai { display: inline-flex; align-items: center; width: auto; gap: 4px; padding: 0 8px; font-size: 11.5px; color: #FF8A97; white-space: nowrap; }
.ai-adm-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.ai-adm-status.ok { border-left: 4px solid #2E9E5B; }
.ai-adm-status.off { border-left: 4px solid #E3B341; }
.ai-adm-status .muted { margin-left: auto; font-size: 13px; }
.ai-key .row { display: flex; gap: 6px; }
.ai-key .row input { flex: 1; }
.ai-key[hidden], .form-grid label[hidden] { display: none; }
/* el ribbon de la ventana de exame tiene más grupos: la zona del paciente se recorta, no se sale */
.rb-right { min-width: 0; flex: 0 1 auto; overflow: hidden; }
body.exam-window .ribbon .where { max-width: 100%; }
.rb-patient { min-width: 0; overflow: hidden; }
.rb-patient b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-alert { max-width: 200px; }

/* ---- painel IA: imagem com marcas, medições, cáries */
.ai-fig-sec { gap: 6px; display: grid; }
.ai-fig { position: relative; background: #000; border-radius: 6px; overflow: hidden; line-height: 0; }
.ai-fig img { width: 100%; height: auto; display: block; }
.ai-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ai-ov g { pointer-events: auto; cursor: default; }
.ai-box rect { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ai-box text, .ai-line text { font: 700 32px/1 var(--font); paint-order: stroke; stroke: rgba(0,0,0,.8); stroke-width: 5px; }
.ai-box.hl rect { stroke-width: 4.5; fill: rgba(255, 255, 255, .08); }
.ai-line line { stroke: #4FD1FF; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 4; }
.ai-line circle { fill: #4FD1FF; }
.ai-line text { fill: #4FD1FF; }
.ai-line.hl line { stroke-width: 3.5; stroke-dasharray: none; }
.ai-fig-bar { display: flex; align-items: center; gap: 10px; }
.ai-fig-tabs { display: flex; gap: 3px; }
.ai-fig-tabs button { border: 1px solid var(--border); background: var(--surface); border-radius: 5px; padding: 2px 7px; font-size: 12px; cursor: pointer; }
.ai-fig-tabs button.on { background: #1C2026; color: #fff; border-color: #1C2026; }
.ai-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; margin-left: auto; }
.ai-mark { width: 9px; height: 9px; border-radius: 2px; align-self: center; }
.ai-imgno { font-size: 11px; color: var(--muted); }
.ai-chip { font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); }
.ai-chip.depth { font-weight: 700; background: #FDE7D6; color: #8A3B0A; }
.ai-chip.d-D3 { background: #FDE0E4; color: #A51D2D; }
.ai-chip.d-E1, .ai-chip.d-E2 { background: #FFF1C9; color: #7A5600; }
.ai-findings li.hl, .ai-measures li.hl { box-shadow: 0 0 0 2px #3D8BFF; }
.ai-measures { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ai-measures li { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.ai-ruler { color: #1597C2; align-self: center; }
.ai-m-label { flex: 1; }
.ai-m-val { font-variant-numeric: tabular-nums; }
.ai-note { font-size: 11.5px; margin-top: 4px; }
/* editor do prompt */
.prompt-ta { width: 100%; min-height: 320px; resize: vertical; box-sizing: border-box; padding: 10px; border: 1px solid var(--border);
  border-radius: 6px; font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.prompt-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 6px; color: var(--muted); }
.prompt-fixed { margin-top: 12px; }
.prompt-fixed summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.prompt-fixed pre { white-space: pre-wrap; font-size: 12px; background: var(--surface-2); padding: 10px; border-radius: 6px; }
.ai-settings-modal { max-height: calc(100vh - 190px); overflow: auto; padding-right: 4px; }
.modal:has(.ai-settings-modal) { width: min(980px, 100%); }

/* ---- menu de contexto */
.ctx-menu { position: fixed; z-index: 90; min-width: 240px; padding: 4px; background: #1C2026; border: 1px solid #3A414C; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45); color: #E6E9EE; }
.ctx-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent;
  color: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ctx-item:hover:not(:disabled), .ctx-item:focus-visible { background: #2D5BA8; outline: none; }
.ctx-item:disabled { opacity: .45; cursor: default; }
.ctx-ico { width: 16px; display: grid; place-items: center; color: #FF6B7C; }
.ctx-sep { height: 1px; margin: 4px 6px; background: #3A414C; }

/* Kotxia Assist */
.ai-head { height: 50px; }
.ai-who { display: grid; line-height: 1.15; }
.ai-who b { font-size: 14px; letter-spacing: .01em; }
.ai-task { font-size: 12px; color: #9AA3B0; }
.assist-mark { flex: none; border-radius: 6px; }
.ai-warn small { opacity: .85; }

/* ---- perguntas ao Kotxia Assist */
.ai-cost { font-variant-numeric: tabular-nums; color: #1C6B3A; font-weight: 600; }
.ai-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ai-chat li { display: grid; gap: 4px; }
.ai-chat-empty { font-size: 12.5px; }
.ai-q { justify-self: end; max-width: 88%; background: #1C2026; color: #fff; padding: 7px 10px; border-radius: 10px 10px 2px 10px; font-size: 13px; display: grid; }
.ai-q small { color: #9AA3B0; font-size: 11px; }
.ai-a { justify-self: start; max-width: 92%; background: #F2EBFF; border: 1px solid #DCCBFF; padding: 7px 10px; border-radius: 10px 10px 10px 2px; }
.ai-a p { margin: 0 0 3px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.ai-chat li.hl .ai-a { box-shadow: 0 0 0 2px #B58CFF; }
.ai-ask-row { display: grid; gap: 6px; margin-top: 8px; }
.ai-ask { width: 100%; box-sizing: border-box; resize: vertical; min-height: 54px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.ai-ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-box.ask rect { stroke-dasharray: 8 5; }
.ai-box.ask text { fill: #B58CFF; }
.ai-line.ask line { stroke: #B58CFF; }
.ai-line.ask circle, .ai-line.ask text { fill: #B58CFF; }

/* ---- marcas do Kotxia Assist no negatoscópio */
.lb-ov { position: absolute; pointer-events: none; overflow: visible; }
.lb-ov g { pointer-events: auto; }
.lb-ai { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 2px; background: rgba(20, 23, 28, .9); border: 1px solid #3A414C;
  border-radius: 8px; padding: 2px; z-index: 2; }
.lb-ai[hidden] { display: none; }
.lb-ai button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #E6E9EE; font-size: 12.5px;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.lb-ai button:hover { background: #2A3039; }
.lb-ai-eye { color: #8E96A3 !important; }
.lb-ai-eye.on { color: #4FD1FF !important; }

/* ---- consumo de IA */
.usage-month { display: grid; gap: 6px; margin-bottom: 14px; }
.usage-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.usage-bar i { display: block; height: 100%; background: #2E9E5B; border-radius: 5px; }
.usage-bar.warn i { background: #E3B341; }
.usage-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kpi { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.kpi small { color: var(--muted); font-size: 11.5px; }
.kpi b { font-size: 16px; font-variant-numeric: tabular-nums; }
.usage h4 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.usage-days { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; }
.usage-days:empty::after { content: "—"; color: var(--muted); }
.ud { flex: 1; height: 100%; display: flex; align-items: flex-end; max-width: 26px; }
.ud i { display: block; width: 100%; background: #2D5BA8; border-radius: 2px 2px 0 0; }
/* 4 tabelas (tipo, utilizador, modelo, fornecedor): 2 por linha; cada uma ocupa a sua célula e rola se precisar */
.usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px 24px; }
.usage-grid > div { min-width: 0; overflow-x: auto; }
.usage-grid .usage-t { width: 100%; table-layout: auto; }
.usage-t th, .usage-t td { padding: 6px 8px; vertical-align: top; }
.usage-t th { white-space: nowrap; }
.usage-t td.num, .usage-t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-t td:first-child { overflow-wrap: anywhere; }
.usage-t { font-size: 12.5px; }
.num-in { width: 110px; }

/* ---- vista 3D da arcada */
/* janela flutuante: move-se pela barra de título, redimensiona-se pelo canto; a janela do dente (41) fica por cima */
.v3d { position: fixed; z-index: 40; display: grid; grid-template-rows: auto auto 1fr auto auto; background: #1B1E22; color: #E6E9EE;
  border: 1px solid #3A414C; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); outline: none; }
.v3d.max { border-radius: 0; border-width: 0; }
.v3d-head { cursor: grab; user-select: none; }
.v3d-head.dragging { cursor: grabbing; }
.v3d.max .v3d-head { cursor: default; }
.fw-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 50%, #5A616C 50%, #5A616C 58%, transparent 58%, transparent 70%, #5A616C 70%, #5A616C 78%, transparent 78%); }
.v3d.max .fw-grip { display: none; }
.v3d-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #14171B; border-bottom: 1px solid #2A2F36; flex-wrap: wrap; }
.v3d-head .spacer { flex: 1; }
.v3d-head .muted { color: #9AA3B0; }
.v3d-note { font-size: 12px; color: #FFD27A; background: #3A2E10; padding: 2px 8px; border-radius: 10px; }
.v3d-opts { display: flex; gap: 12px; font-size: 13px; }
.v3d-chk { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.v3d-canvas { min-height: 0; position: relative; }
.v3d-canvas > .pano-ref, .v3d-canvas > .v3d-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v3d-canvas > [hidden] { display: none !important; }
.v3d-gl canvas { width: 100% !important; height: 100% !important; display: block; }
.pano-ref { cursor: grab; touch-action: none; }
.v3d-loading { position: absolute; inset: 0; display: grid; place-items: center; gap: 8px; color: #C9CED6; pointer-events: none; }
.v3d-loading[hidden] { display: none; }
.v3d-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 12px; font-size: 12px; color: #C9CED6; border-top: 1px solid #2A2F36; }
.v3d-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid #5A616C; }
.v3d-help { padding: 0 12px 8px; font-size: 11.5px; color: #8A929E; }
.v3d-tip { position: absolute; z-index: 2; display: grid; gap: 2px; padding: 6px 9px; background: rgba(12, 14, 17, .94); border: 1px solid #3A414C;
  border-radius: 6px; font-size: 12px; pointer-events: none; max-width: 280px; }
.v3d-tip[hidden] { display: none; }
.v3d-tip-f { color: #FFC27A; }

.v3d-bar { display: flex; padding: 6px 12px; background: #14171B; border-bottom: 1px solid #2A2F36; }
.v3d-opts { flex-wrap: wrap; align-items: center; gap: 14px; }
.v3d-opts label[hidden] { display: none; }
.v3d-seg { border-color: #3A414C; }
.v3d-seg button { background: #1C2026; color: #C9CED6; }
.v3d-seg button + button { border-left-color: #3A414C; }
.v3d-seg button.on { background: #E6E9EE; color: #14171B; }
.v3d-sl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.v3d-sl input { width: 110px; }
.v3d { background: #000; }

/* ---- comparação cronológica (compare.js) */
.max > .fw-grip { display: none; }
.cmp { position: fixed; z-index: 40; display: grid; grid-template-rows: auto 1fr auto; background: #15181D; color: #E6E9EE;
  border: 1px solid #3A414C; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); outline: none; }
.cmp.max { border-radius: 0; border-width: 0; }
.cmp-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #14171B; border-bottom: 1px solid #2A2F36; cursor: grab; user-select: none; }
.cmp-head.dragging { cursor: grabbing; }
.cmp.max .cmp-head { cursor: default; }
.cmp-head .spacer { flex: 1; }
.cmp-head .muted, .cmp .muted { color: #9AA3B0; }
.cmp-head .btn { color: #E6E9EE; border-color: #3A414C; }
.cmp-body { display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--cmp-side-w, 300px); min-height: 0; }
.cmp-stage { position: relative; min-width: 0; min-height: 0; background: #0D0E10; }
.cmp-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cmp-ov { touch-action: none; }
.cmp-loading { position: absolute; inset: 0; display: grid; place-items: center; gap: 8px; color: #C9CED6; }
.cmp-side { overflow-y: auto; border-left: 1px solid #2A2F36; padding: 10px 12px 18px; display: grid; gap: 14px; align-content: start; font-size: 12.5px; }
.cmp-side h4 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #9AA3B0; font-weight: 700; }
.cmp-side h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cmp-side section { display: grid; gap: 7px; }
.cmp-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-side .btn { color: #E6E9EE; border-color: #3A414C; background: #1C2026; }
.cmp-side .btn.ghost { background: transparent; }
.cmp-chk { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.cmp-seg { border-color: #3A414C; justify-self: start; }
.cmp-seg button { background: #1C2026; color: #C9CED6; }
.cmp-seg button.on { background: #E6E9EE; color: #14171B; }
.cmp-layers { display: grid; gap: 4px; }
.cmp-layer { display: grid; grid-template-columns: auto 46px 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.cmp-layer:hover { background: #1C2026; }
.cmp-layer.on { border-color: #F2A93B; background: #221C12; }
.cmp-layer img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; background: #000; }
.cmp-lmeta { display: grid; gap: 1px; min-width: 0; }
.cmp-lmeta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.cmp-lmeta input[type=range] { width: 100%; }
.cmp-lbtn { display: grid; gap: 2px; }
.cmp-lbtn button { background: #1C2026; color: #C9CED6; border: 1px solid #3A414C; border-radius: 4px; font-size: 9px; line-height: 1; padding: 3px 5px; cursor: pointer; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
.cmp-grid label { display: grid; gap: 3px; color: #C9CED6; }
.cmp-grid input[type=number], .cmp-side select, .cmp-kernel input { background: #0F1115; color: #E6E9EE; border: 1px solid #3A414C; border-radius: 5px; padding: 4px 6px; font: inherit; min-width: 0; }
.cmp-grid input[type=range] { width: 100%; }
.cmp-kernel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cmp-kernel input { text-align: center; }
.cmp-kernel label { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; color: #9AA3B0; }
.cmp-kernel label input { width: 70px; }
.cmp-help { font-size: 11.5px; line-height: 1.45; margin: 0; }
.cmp-status { padding: 5px 12px; font-size: 11.5px; border-top: 1px solid #2A2F36; }

/* comparação: controlos compactos junto à imagem, histograma, Kotxia Assist */
.cmp-hist { position: absolute; left: 10px; bottom: 10px; z-index: 4; padding: 6px 7px 5px; background: rgba(20, 23, 27, .88);
  border: 1px solid #3A414C; border-radius: 8px; display: grid; gap: 3px; }
.cmp-hist[hidden] { display: none; }
.cmp-hist canvas { width: 236px; height: 92px; display: block; cursor: ew-resize; }
.cmp-hist-info { display: flex; gap: 8px; align-items: center; font-size: 10.5px; flex-wrap: wrap; max-width: 236px; }
.cmp-hist-info .hs { color: #F2A93B; } .cmp-hist-info .hr { color: #5AD2E6; }
.cmp-hist-info button { margin-left: auto; background: #1C2026; color: #E6E9EE; border: 1px solid #3A414C; border-radius: 4px; font-size: 10.5px; padding: 1px 6px; cursor: pointer; }
.cmp-aichip { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; max-width: 60%;
  padding: 5px 8px; background: rgba(20, 23, 27, .9); border: 1px solid #3A414C; border-radius: 8px; font-size: 11.5px; }
.cmp-aichip[hidden] { display: none; }
.cmp-aichip small { color: #FFD27A; flex-basis: 100%; }
.cmp-aichip button { background: #1C2026; color: #E6E9EE; border: 1px solid #3A414C; border-radius: 5px; font-size: 11px; padding: 2px 7px; cursor: pointer; }
.cmp-ai-k { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #E3122C; color: #fff; }
.cmp-aibusy { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; display: grid; justify-items: center; gap: 4px;
  padding: 10px 16px; background: rgba(20, 23, 27, .94); border: 1px solid #E3122C; border-radius: 10px; font-size: 13px; }
.cmp-aibusy[hidden] { display: none; }
.cmp-aibusy small { color: #9AA3B0; }
.cmp-aibtn { background: #E3122C !important; border-color: #E3122C !important; color: #fff !important; }
.cmp-head .btn.on { background: #E6E9EE; color: #14171B; }
.cmp-tip { position: absolute; z-index: 6; max-width: 290px; display: grid; gap: 3px; padding: 7px 10px; pointer-events: none;
  background: rgba(12, 14, 17, .96); border: 1px solid #3A414C; border-radius: 7px; font-size: 12px; color: #E6E9EE; }
.cmp-tip[hidden] { display: none; }
.cmp-tip span { color: #C9CED6; }
.cmp-side[hidden] { display: none; }
.cmp-body:has(> .cmp-side[hidden]) { grid-template-columns: 1fr; }
.cmp-body:has(> .cmp-side[hidden]) > .splitter { display: none; }

/* «Comparar» onde se vê um dente: miniaturas, negatoscópio, visor */
.tile-img, .frame-img, .tl-img { position: relative; }
.cmp-badge { position: absolute; right: 4px; top: 4px; display: flex; gap: 3px; z-index: 1; }
.cmp-badge > span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 5px; cursor: pointer;
  background: rgba(14, 16, 20, .82); color: #E6E9EE; border: 1px solid rgba(255,255,255,.18); font: 600 10.5px/1 system-ui, sans-serif; }
.cmp-badge > span small { color: #F2A93B; font-size: 10px; }
.cmp-badge > span:hover { background: #F2A93B; color: #1A1206; border-color: #F2A93B; }
.cmp-badge > span:hover small { color: #1A1206; }
.lb-cmp { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.lb-cmp-btn, .vw-cmp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(28, 32, 38, .9); color: #E8EBEF; border: 1px solid #F2A93B; font: 600 12.5px/1.2 system-ui, sans-serif; }
.lb-cmp-btn:hover, .vw-cmp-btn:hover { background: #F2A93B; color: #1A1206; }
.vw-cmp { position: absolute; left: 10px; bottom: 34px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 3; }
.vw-cmp-ico { font-size: 14px; }
.cmp-al { font-size: 10.5px; font-weight: 600; }
.cmp-al.ref { color: #F2A93B; } .cmp-al.ok { color: #3DDC97; } .cmp-al.ok.low { color: #E3B341; } .cmp-al.ko { color: #FF6B6B; }
.cmp-side .btn.cmp-alignbtn { border-color: #3DDC97; color: #3DDC97; }

/* divisores arrastáveis entre painéis */
.splitter { cursor: col-resize; background: var(--border, #2A2F36); position: relative; z-index: 2; touch-action: none; }
.splitter::after { content: ""; position: absolute; left: 2px; top: 50%; width: 2px; height: 34px; margin-top: -17px; border-radius: 2px; background: #8A929E; opacity: .55; }
.splitter:hover, .splitter.dragging { background: #F2A93B; }
.splitter:hover::after, .splitter.dragging::after { background: #1A1206; opacity: .8; }
.cmp-body > .splitter { background: #2A2F36; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing canvas { pointer-events: none; }

/* «Ficheiros» da ficha */
.ib-print { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.ib-files { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.ib-files .ib-badge:empty { display: none; }
.ib-files.on { color: #F2A93B; }
.pf2 { padding: 14px 18px; display: grid; gap: 12px; align-content: start; overflow: auto; height: 100%; box-sizing: border-box; }
.pf2-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf2-head h3 { margin: 0; font-size: 15px; }
.pf2-help { font-size: 12px; }
.pf2-head .btn { align-self: center; }
.pf2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.pf2-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); }
.pf2-card:hover { border-color: #F2A93B; }
.pf2-kind { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 8px; font: 800 12px/1 system-ui, sans-serif;
  letter-spacing: .03em; color: #fff; background: #5A616C; }
.k-cbct .pf2-kind { background: #3B6FD8; } .k-dicom .pf2-kind { background: #2F8F83; } .k-scan3d .pf2-kind { background: #8E5BD8; }
.k-pdf .pf2-kind { background: #D8423B; } .k-video .pf2-kind { background: #D88A2F; } .k-image .pf2-kind { background: #4A9A3F; }
.pf2-info { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; }
.pf2-info b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-actions { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; justify-content: flex-start; min-width: 0; }
.pf2-actions .btn { display: inline-flex; align-items: center; gap: 4px; }
.modal:has(.pf2-frame) { width: min(1100px, 96vw); }
.pf2-frame { width: 100%; height: 72vh; border: 0; border-radius: 6px; background: #111; display: block; }
.pf2-img { object-fit: contain; }

/* comparação: barra de ferramentas vertical e seleção múltipla */
.cmp-tools { position: absolute; left: 8px; top: 8px; z-index: 5; display: grid; gap: 3px; padding: 4px; background: rgba(20, 23, 27, .9);
  border: 1px solid #3A414C; border-radius: 9px; }
.cmp-tools button { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; color: #C9CED6; border: 1px solid transparent; border-radius: 6px; cursor: pointer; padding: 0; }
.cmp-tools button:hover:not(:disabled) { background: #2A3039; color: #fff; }
.cmp-tools button.on { background: #F2A93B; color: #1A1206; }
.cmp-tools button:disabled { opacity: .35; cursor: default; }
.cmp-tools-sep { height: 1px; background: #3A414C; margin: 2px 4px; }
.cmp-layer.picked { border-color: rgba(242,169,59,.45); background: #1E1A12; }
.cmp-gtag { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #1E3A5F; color: #9CC8FF; font-size: 10.5px; }
.cmp-ltag { margin-left: 4px; font-size: 11px; }

/* ---- estúdio do sorriso (janela flutuante) */
.v3d.sm { grid-template-rows: auto 1fr; }
.sm-body { display: grid; grid-template-columns: 1fr 268px; min-height: 0; }
.sm-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #111417; }
.sm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.sm-hint { position: absolute; left: 58px; right: 8px; bottom: 6px; font-size: 11.5px; color: #AEB6C2; pointer-events: none;
  text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-side { border-left: 1px solid #2A2F36; background: #171A1E; overflow: auto; padding: 8px 12px 14px; font-size: 13px; }
.sm-side section { padding: 8px 0 10px; border-bottom: 1px solid #262B32; display: grid; gap: 7px; }
.sm-side section:last-child { border-bottom: 0; }
.sm-side h4 { margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8F98A5; }
.sm-side .muted { color: #8F98A5; }
.sm-side .small { font-size: 11.5px; margin: 0; line-height: 1.35; }
.sm-side .btn { justify-content: center; }
.sm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sm-ai { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; padding: 8px; border: 1px solid #2E353D; border-radius: 8px; }
.sm-ai .row { display: flex; gap: 6px; align-items: center; }
.sm-ai select { flex: 1; min-width: 0; background: #1B2026; color: #DDE2E8; border: 1px solid #2E353D; border-radius: 6px; padding: 5px 6px; font: inherit; font-size: 12.5px; }
.sm-ai small { font-size: 11px; line-height: 1.35; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sm-chips .muted { font-size: 11px; width: 30px; }
.sm-chip { min-width: 26px; height: 24px; padding: 0 5px; border-radius: 6px; border: 1px solid #3A414C; background: #22272E; color: #DDE2E8; cursor: pointer; font-size: 12px; }
.sm-chip:hover:not(:disabled) { border-color: #F2A93B; }
.sm-chip.on { background: #F2A93B; color: #1A1206; border-color: #F2A93B; }
.sm-chip.off { opacity: .35; text-decoration: line-through; cursor: default; }
.sm-sl { display: grid; grid-template-columns: 1fr 44px; gap: 2px 8px; align-items: center; font-size: 12px; color: #C9CED6; }
.sm-sl span { grid-column: 1 / -1; }
.sm-sl input { width: 100%; }
.sm-sl output { text-align: right; font-variant-numeric: tabular-nums; color: #9AA3B0; }
.sm-save { gap: 6px; }
.sm-tools { top: 8px; }
.tile-sim { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(242,169,59,.92); color: #1A1206; font-size: 10.5px; font-weight: 600; }
@media (max-width: 760px) { .sm-body { grid-template-columns: 1fr; grid-template-rows: 1fr 40%; } .sm-side { border-left: 0; border-top: 1px solid #2A2F36; } }
.sm-side .btn { color: #E6E9EE; border-color: #3A414C; background: #1C2026; }
.sm-side .btn:hover:not(:disabled) { background: #262C34; }
.sm-side .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sm-side .btn.ghost { background: transparent; }
.sm-btns .btn { height: auto; min-height: 28px; padding: 4px 8px; white-space: normal; line-height: 1.2; text-align: center; }
.sm-side .check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: #C9CED6; }

/* ---- «Ficheiros»: revisão antes de gravar na ficha */
.pf2-review { border: 1px solid #F2A93B; background: #FFF8EC; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; display: grid; gap: 8px; }
.pf2-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #7A4B00; }
.pf2-review-head .spacer { flex: 1; }
.pf2-pend { display: grid; grid-template-columns: 58px minmax(140px, 1.2fr) 150px 140px minmax(160px, 2fr) auto; gap: 10px; align-items: center;
  background: var(--surface, #fff); border: 1px solid var(--line, #E3E6EA); border-radius: 8px; padding: 8px; }
.pf2-pend .pf2-info { min-width: 0; display: grid; }
.pf2-pend .pf2-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-field { display: grid; gap: 2px; font-size: 11.5px; color: var(--muted, #6B7280); }
.pf2-field select, .pf2-field input { height: 30px; font-size: 13px; }
.ib-badge.pend { background: #F2A93B; color: #1A1206; margin-left: 3px; }
.ib-badge.pend:empty { display: none; }
.lb-sim { padding: 1px 6px; border-radius: 5px; background: #F2A93B; color: #1A1206; font-size: 11px; font-weight: 600; }
@media (max-width: 1100px) { .pf2-pend { grid-template-columns: 58px 1fr 1fr; } .pf2-field.grow { grid-column: 1 / -1; } }
.pf2-pend .pf2-actions { grid-column: auto; grid-row: auto; display: flex; gap: 6px; margin: 0; padding: 0; }
.pf2-pend .pf2-kind { grid-row: auto; }

/* ---- arcada pelas fotografias (IA) */
.v3d.arch { grid-template-rows: auto 1fr; }
.arch-body { display: grid; grid-template-columns: 1fr 330px; min-height: 0; }
.arch-main { overflow: auto; padding: 12px 14px 20px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.arch-side { border-left: 1px solid #2A2F36; background: #171A1E; overflow: auto; padding: 12px 14px; font-size: 13px; display: grid; gap: 4px; align-content: start; }
.arch-side section { padding: 8px 0; border-top: 1px solid #262B32; }
.arch-side h4, .arch-main h4 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8F98A5; }
.arch-side p { margin: 4px 0; line-height: 1.4; color: #DDE2E8; }
.arch-side ul { margin: 0; padding-left: 18px; color: #DDE2E8; line-height: 1.4; }
.arch-side .muted, .arch-main .muted { color: #8F98A5; }
.arch-side .small { font-size: 11.5px; }
.arch-side .btn { color: #E6E9EE; border-color: #3A414C; background: #1C2026; }
.arch-side .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.arch-side .btn.ghost { background: transparent; }
.arch-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.arch-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.arch-dl { display: grid; grid-template-columns: 112px 1fr; gap: 4px 10px; margin: 0; }
.arch-dl dt { color: #8F98A5; font-size: 12px; }
.arch-dl dd { margin: 0; color: #DDE2E8; }
.arch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.arch-tooth { background: #1E1A12; border: 1px solid rgba(242,169,59,.45) !important; border-radius: 8px; padding: 8px 10px !important; }
.arch-pad { padding: 20px; }
.arch-pick { border: 1px solid #3A414C; border-radius: 10px; padding: 10px 12px; background: #1A1D22; display: grid; gap: 10px; }
.arch-pick-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arch-pick-head .spacer, .arch-chart-head .spacer { flex: 1; }
.arch-cost { font-size: 12px; color: #FFD27A; }
.arch-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.arch-thumb { position: relative; display: grid; gap: 3px; justify-items: center; cursor: pointer; padding: 4px; border-radius: 8px; border: 1px solid #2A2F36; opacity: .55; }
.arch-thumb.on { opacity: 1; border-color: #F2A93B; }
.arch-thumb img { width: 110px; height: 76px; object-fit: cover; border-radius: 5px; background: #000; }
.arch-thumb input { position: absolute; left: 8px; top: 8px; }
.arch-thumb small { color: #9AA3B0; font-size: 11px; }
.arch-chart { background: #111417; border: 1px solid #262B32; border-radius: 10px; padding: 10px 12px 14px; }
.arch-chart-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.arch-chart-head .check { display: inline-flex; gap: 6px; align-items: center; color: #DDE2E8; font-size: 13px; }
.arch-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: #C9CED6; }
.arch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.arch-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.arch-row > :nth-child(8) { margin-right: 6px; }
.arch-occ { height: 1px; background: #3A414C; margin: 8px 0; }
.arch-cell { position: relative; display: grid; justify-items: center; gap: 2px; padding: 3px 2px 4px; border-radius: 7px; cursor: pointer;
  background: #0B0D10; border: 1.5px solid var(--st, #22272E); color: #E6E9EE; min-width: 0; }
.arch-cell canvas { width: 100%; max-width: 72px; aspect-ratio: 72 / 92; height: auto; border-radius: 4px; display: block; }
.arch-cell b { font-size: 12px; }
.arch-cell small { position: absolute; top: 4px; right: 4px; font-size: 10px; background: rgba(0,0,0,.65); padding: 0 4px; border-radius: 4px; color: #FFE7B3; }
.arch-cell.none { border-color: #1C2026; opacity: .45; }
.arch-cell.gap { border-style: dashed; }
.arch-cell.on { outline: 2px solid #F2A93B; outline-offset: 1px; }
.arch-empty { width: 100%; max-width: 72px; aspect-ratio: 72 / 92; display: grid; place-items: center; font-size: 10px; color: #8F98A5; text-align: center; }
.arch-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.arch-gallery figure { margin: 0; background: #0B0D10; border: 1px solid #262B32; border-radius: 8px; overflow: hidden; }
.arch-gallery canvas { width: 100%; height: auto; display: block; }
.arch-gallery figcaption { padding: 6px 8px; font-size: 12px; color: #C9CED6; }
@media (max-width: 900px) { .arch-body { grid-template-columns: 1fr; } .arch-side { border-left: 0; border-top: 1px solid #2A2F36; } }

/* ---- arcada pelas fotografias v2: só imagens, boca 3D */
.v3d.arch { grid-template-rows: auto 1fr auto; }
.v3d.arch > .arch-main { overflow: auto; padding: 12px 14px 18px; display: grid; gap: 14px; align-content: start; min-height: 0; }
.arch-foot { padding: 5px 14px; font-size: 11px; color: #8F98A5; border-top: 1px solid #262B32; background: #14171B; }
.arch-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.arch-actions .btn { color: #E6E9EE; border-color: #3A414C; background: #1C2026; }
.arch-actions .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.arch-actions .btn.ghost { background: transparent; }
.arch-costtag { font-size: 11.5px; }
.arch-3dwrap { position: relative; border: 1px solid #262B32; border-radius: 10px; overflow: hidden; background: #111417; }
.arch-3d { position: relative; height: min(58vh, 560px); min-height: 320px; }
.arch-3d canvas { display: block; width: 100%; height: 100%; }
.arch-3dtools { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.arch-chips { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 9px; background: rgba(20,23,27,.86); border: 1px solid #3A414C; pointer-events: auto; }
.arch-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: #C9CED6; font-size: 12px; cursor: pointer; }
.arch-chip:hover { background: #2A3039; color: #fff; }
.arch-chip.on { background: #F2A93B; color: #1A1206; }
.arch-sep { width: 1px; background: #3A414C; margin: 2px 3px; }
.arch-tip { position: absolute; z-index: 3; pointer-events: none; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.82); color: #E6E9EE; font-size: 12px; white-space: nowrap; }
.arch-tip[hidden] { display: none; }
.arch-seg { display: inline-flex; border: 1px solid #3A414C; border-radius: 8px; overflow: hidden; }
.arch-seg button { background: #1A1D22; color: #C9CED6; border: 0; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.arch-seg button + button { border-left: 1px solid #3A414C; }
.arch-seg button.on { background: #F2A93B; color: #1A1206; }
.arch-chart .arch-legend { margin-bottom: 8px; }
.v3d.arch > .arch-main { display: flex; flex-direction: column; }
.v3d.arch > .arch-main > * { flex: none; }

/* ---- visor de digitalizações intraorais (STL/PLY/OBJ) */
.v3d.scanv { grid-template-rows: auto 1fr; }
.scanv-body { display: grid; grid-template-columns: 1fr 270px; min-height: 0; }
.scanv-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #111417; }
.scanv-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scanv-info { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: 11.5px; color: #9AA3B0; pointer-events: none; text-shadow: 0 1px 2px #000; }
.scanv-labels { position: absolute; inset: 0; pointer-events: none; }
.scanv-mm { position: absolute; transform: translate(-50%, -130%); padding: 2px 7px; border-radius: 6px; background: #F2A93B; color: #1A1206; font: 600 12px system-ui, sans-serif; white-space: nowrap; }
.scanv-mm[hidden] { display: none; }
.scanv-side { border-left: 1px solid #2A2F36; background: #171A1E; overflow: auto; padding: 8px 12px 14px; font-size: 13px; }
.scanv-side section { padding: 8px 0 10px; border-bottom: 1px solid #262B32; display: grid; gap: 6px; }
.scanv-side section:last-child { border-bottom: 0; }
.scanv-side h4 { margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8F98A5; }
.scanv-side .muted { color: #8F98A5; } .scanv-side .small { font-size: 11.5px; margin: 0; }
.scanv-side .btn { color: #E6E9EE; border-color: #3A414C; background: #1C2026; }
.scanv-side .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.scanv-side .btn.ghost { background: transparent; }
.scanv-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.scanv-row { display: flex; align-items: center; gap: 6px; }
.scanv-row .scanv-file { flex: 1; min-width: 0; }
.scanv-op { width: 70px; flex: none; accent-color: #F2A93B; }
.scanv-file { display: flex; align-items: center; gap: 7px; color: #C9CED6; cursor: pointer; padding: 3px 0; }
.scanv-file .scanv-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; box-shadow: 0 0 0 2px #171A1E, 0 0 0 3px #5A616C; flex: none; }
.scanv-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanv-file small { color: #8F98A5; }
.scanv-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid #3A414C; border-radius: 8px; overflow: hidden; }
.scanv-seg button { background: #1A1D22; color: #C9CED6; border: 0; padding: 5px 9px; font-size: 12px; cursor: pointer; }
.scanv-seg button + button { border-left: 1px solid #3A414C; }
.scanv-seg button.on { background: #F2A93B; color: #1A1206; }
.scanv-list { margin: 0; padding-left: 16px; color: #DDE2E8; }
@media (max-width: 860px) { .scanv-body { grid-template-columns: 1fr; grid-template-rows: 1fr 40%; } }
.scanv-fdi { position: absolute; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 5px; background: rgba(0,0,0,.72); color: #fff; font: 700 11px system-ui, sans-serif; pointer-events: none; }
.scanv-fdi[hidden] { display: none; }
.arch-model { margin-right: 6px; }
.arch-model button { padding: 4px 10px; font-size: 12px; }

/* ---- simulação estética IA */
.v3d.aes { grid-template-rows: auto 1fr; }
.aes-body { display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.aes-stage { position: relative; min-width: 0; min-height: 0; background: #111417; overflow: hidden; }
.aes-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: ew-resize; touch-action: none; }
.aes-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11.5px; color: #AEB6C2; pointer-events: none; text-shadow: 0 1px 2px #000; }
.aes-side { border-left: 1px solid #2A2F36; background: #171A1E; overflow: auto; padding: 10px 12px 14px; font-size: 13px; display: grid; gap: 4px; align-content: start; }
.aes-side section { padding: 8px 0; border-bottom: 1px solid #262B32; display: grid; gap: 7px; }
.aes-side h4 { margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8F98A5; }
.aes-side .muted { color: #8F98A5; } .aes-side .small { font-size: 11.5px; margin: 0; line-height: 1.35; }
.aes-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.aes-task { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 8px; border: 1px solid #3A414C; background: #1C2026; color: #DDE2E8; cursor: pointer; font-size: 12px; }
.aes-task:hover { border-color: #F2A93B; }
.aes-task.on { background: #F2A93B; color: #1A1206; border-color: #F2A93B; }
.aes-field { display: grid; gap: 3px; font-size: 12px; color: #9AA3B0; }
.aes-field input, .aes-field textarea { background: #0F1215; color: #E6E9EE; border: 1px solid #3A414C; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; resize: vertical; }
.aes-run { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; }
.aes-cost { font-size: 12px; color: #FFD27A; }
.aes-block { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: #2A2410; color: #FFD27A; font-size: 12.5px; }
.aes-block.credit { background: #3A1518; color: #FFB4B4; border: 1px solid #7A2A30; }
.aes-results { display: flex; flex-wrap: wrap; gap: 5px; }
.aes-res { padding: 4px 9px; border-radius: 6px; border: 1px solid #3A414C; background: #1C2026; color: #DDE2E8; cursor: pointer; font-size: 12px; }
.aes-res.on { background: #F2A93B; color: #1A1206; border-color: #F2A93B; }
.aes-caption { margin: 0; color: #DDE2E8; }
.aes-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.aes-side .btn { color: #E6E9EE; border-color: #3A414C; background: #1C2026; }
.aes-side .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.aes-side .btn.ghost { background: transparent; }
.aes-disc { margin-top: 6px !important; }
@media (max-width: 860px) { .aes-body { grid-template-columns: 1fr; grid-template-rows: 1fr 45%; } }
/* aviso global de IA sem crédito */
.ai-credit { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(var(--ribbon-h, 84px) + 6px); display: flex; align-items: center; gap: 10px;
  max-width: min(760px, 94vw); padding: 8px 10px 8px 14px; border-radius: 10px; background: #3A1518; color: #FFD6D6; border: 1px solid #7A2A30;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 13px; }
.ai-credit .btn { color: #fff; border-color: #B44A52; background: #5A1F25; }
.aes-img { display: flex; flex-direction: column; gap: 8px !important; margin: 6px 0 10px; padding: 10px; border: 1px solid #2E353D; border-radius: 8px; }
.aes-img .btn { align-self: flex-start; }
.aes-next { display: block; flex-basis: 100%; margin-top: 6px; color: #8F98A5; font-size: 11.5px; line-height: 1.4; }
.no-ai .ai-only, .no-ai [data-ai] { display: none !important; }
.aes-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; color: #DDE2E8; }
.aes-check input { margin-top: 3px; }
.aes-check small { display: block; color: #8F98A5; font-size: 11.5px; }
.aes-finish { margin: 0; font-size: 12px; font-weight: 600; }
.aes-finish.vertex { color: #7FE0B0; }
.aes-finish.local { color: #C9CED6; }

/* ---- setas numeradas da IA (achados) e zona assinalada para perguntar */
.ai-call .zone { fill: none; stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .85; }
.ai-call .arrow { stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.ai-call .badge { stroke: rgba(0,0,0,.6); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ai-call .num { fill: #111; font-weight: 800; font-family: var(--font); }
.ai-call .lab-bg { fill: rgba(10,12,15,.78); }
.ai-call .lab-head { font-weight: 700; font-family: var(--font); }
.ai-call .lab-txt { font-family: var(--font); }
.ai-call.hl .zone { stroke-width: 3; stroke-dasharray: none; opacity: 1; fill: rgba(255,255,255,.07); }
.ai-call.hl .badge { stroke: #fff; stroke-width: 2.5; }
.ai-box.zone-new rect, .ai-box.zone-q rect { stroke-dasharray: 7 4; fill: rgba(255,140,26,.08); }
.ai-box.zone-new text, .ai-box.zone-q text { fill: #FF8C1A; }
.ai-fig.zoning .ai-ov { pointer-events: auto; cursor: crosshair; }
.ai-num { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; color: #111;
  font-size: 11px; font-weight: 800; }
.ai-findings li.dim { opacity: .55; }
.ai-zone-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 6px; background: rgba(255,140,26,.14);
  color: #B85F00; font-size: 12px; font-weight: 600; }
.ai-zone-chip .ai-x { margin-left: auto; }
.ai-zone-tag { color: #FF8C1A; font-weight: 800; margin-right: 4px; }
.ai-fig-bar { flex-wrap: wrap; }
/* janela «Leitura IA» */
.ai-read { z-index: 50; grid-template-rows: auto minmax(0, 1fr) !important; }    /* por cima do painel lateral da IA */
.ai-read .ai-read-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.ai-read-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #0E1013; overflow: auto; }
.ai-read-stage .ai-fig { flex: 0 0 auto; width: fit-content; max-width: 100%; margin: 0 auto; }
.ai-read-stage .ai-fig img { max-width: 100%; height: auto; }
.ai-read-stage { overflow: hidden; }
.ai-read-stage .ai-fig-bar { color: #DDE2E8; }
.ai-read-stage .ai-fig-bar .ai-toggle { color: #DDE2E8; }
.ai-read-stage .ai-fig-bar .btn:not(.primary) { color: var(--text); }
.ai-read-stage .ai-fig-bar .btn.ghost { color: #DDE2E8; }
.ai-read-stage .ai-fig-tabs button { color: var(--text); }
.ai-read-stage .ai-fig-tabs button.on { color: #fff; background: #F2A93B; border-color: #F2A93B; }
.ai-read-side { color: var(--text); overflow: auto; padding: 12px 14px; background: var(--surface, #fff); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) { .ai-read .ai-read-body { grid-template-columns: 1fr; } }

/* sessão de digitalização intraoral (cartão único em «Ficheiros») */
.pf2-card.k-session .pf2-kind { background: linear-gradient(135deg, #7A5AF8, #4F8CF7); }
.pf2-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pf2-roles span { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #EEF0F7; color: #3A4152; }

/* visor de digitalizações: controlo profissional (0.23.0) */
.scanv-tools { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 3; max-width: calc(100% - 120px); }
.scanv-tg { display: flex; background: rgba(23,26,30,.92); border: 1px solid #333A43; border-radius: 9px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.scanv-tb { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: #C9CED6; border: 0; padding: 6px 8px; cursor: pointer; font: 500 12px system-ui, sans-serif; }
.scanv-tb + .scanv-tb { border-left: 1px solid #2C323A; }
.scanv-tb:hover:not(:disabled) { background: #232830; color: #fff; }
.scanv-tb.on { background: #F2A93B; color: #1A1206; }
.scanv-tb:disabled { opacity: .38; cursor: default; }
.scanv-tb:focus-visible { outline: 2px solid #F2A93B; outline-offset: -2px; }
.scanv-hint { position: absolute; right: 10px; top: 52px; max-width: 46%; text-align: right; font-size: 11px; color: #8F98A5; pointer-events: none; text-shadow: 0 1px 2px #000; }
.scanv-info { right: 100px; }
.scanv-cube { position: absolute; right: 18px; bottom: 30px; width: 76px; height: 76px; z-index: 3; perspective: none; }
.scanv-cube-in { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.scanv-face { position: absolute; left: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; padding: 0;
  background: rgba(40,46,54,.93); border: 1px solid #56606C; color: #D7DCE3; font: 700 8.5px system-ui, sans-serif; letter-spacing: .04em;
  cursor: pointer; backface-visibility: hidden; }
.scanv-face:hover { background: #F2A93B; color: #1A1206; }
.scanv-face.f-front { background: rgba(58,52,40,.95); }
.scanv-pivot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #F2A93B; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px rgba(242,169,59,.25); }
.scanv-pivot[hidden] { display: none; }
.scanv-fdi.on { background: #F2A93B; color: #1A1206; transform: translate(-50%, -50%) scale(1.15); }
.scanv-row.sel .scanv-file span { color: #F2A93B; }
.scanv-selcard { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #1F242B; border: 1px solid #F2A93B55; }
.scanv-selcard b { color: #F2A93B; font-size: 14px; }
.scanv-selcard small { color: #9AA3B0; }
.scanv-hidden { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.scanv-hidden .chip { background: #2A2F36; color: #E6E9EE; border: 1px solid #3A414C; border-radius: 999px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.scanv-hidden .chip:hover { border-color: #F2A93B; }
@media (max-width: 860px) { .scanv-hint { display: none; } .scanv-tb.txt span { display: none; } }

/* digitalização intraoral como exploração do historial (0.23.0) */
.scan-thumb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px;
  background: radial-gradient(circle at 50% 38%, #3B3550, #17151F 72%); color: #E9E2FF; }
.scan-thumb b { font: 800 15px system-ui, sans-serif; letter-spacing: .08em; }
.scan-thumb small { font-size: 11px; color: #B9B0D6; }
.frame-img, .tl-img, .tile-img, .lv-thumb { position: relative; }
.lv-thumb .scan-thumb { position: static; width: 56px; height: 42px; border-radius: 4px; }
.lv-thumb .scan-thumb .ic, .lv-thumb .scan-thumb small { display: none; }
.lb-scan { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  color: #E6E9EE; background: radial-gradient(circle at 50% 42%, #2E2A40, #0E0F13 70%); }
.lb-scan b { font-size: 18px; }
.lb-scan .pf2-roles span { background: #2A2F3A; color: #D7DCE3; }
.pf2-scans-note { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed #8B7FC4; background: #F4F1FF; color: #3B2F7A; font: inherit; cursor: pointer; text-align: left; }
.pf2-scans-note:hover { background: #ECE6FF; }

/* imprimir radiografias — modelos 1/2/4/6/9 por folha (0.25.0) */
.pr-modal { width: min(1080px, 96vw); max-width: none; }
.pr-dlg { display: grid; grid-template-columns: 330px 1fr; gap: 18px; min-height: 0; height: min(calc(100vh - 220px), 620px); }
.pr-opts { display: grid; align-content: start; gap: 6px; overflow: auto; padding-right: 4px; }
.pr-opts h4 { margin: 8px 0 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b7280); }
.pr-opts textarea { resize: vertical; font: inherit; }
.pr-tpl, .pr-or { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-tpl button, .pr-or button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line, #d8dce3); border-radius: 8px; background: var(--card, #fff); color: inherit; cursor: pointer; font: inherit; font-size: 13px; }
.pr-tpl button.on, .pr-or button.on { border-color: var(--accent, #d71d2b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d71d2b) 25%, transparent); font-weight: 600; }
.pr-mini { display: grid; gap: 1.5px; width: 17px; height: 23px; padding: 1.5px; border: 1px solid currentColor; border-radius: 2px; opacity: .8; }
.pr-mini.landscape { width: 23px; height: 17px; }
.pr-mini b { background: currentColor; opacity: .55; border-radius: 1px; }
.pr-sum { margin: 6px 0 0; font-weight: 600; }
.pr-side { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-left: 1px solid var(--line, #e3e6eb); padding-left: 14px; }
.pr-side-head { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; }
.pr-list { overflow: auto; display: grid; align-content: start; gap: 6px; }
.pr-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line, #e3e6eb); border-radius: 9px; opacity: .55; }
.pr-row.on { opacity: 1; border-color: color-mix(in srgb, var(--accent, #d71d2b) 45%, transparent); }
.pr-pick { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pr-pick img { width: 64px; height: 50px; object-fit: contain; background: #000; border-radius: 5px; }
.pr-meta { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; gap: 3px 8px; align-items: center; }
.pr-meta small { color: var(--muted, #6b7280); }
.pr-meta input[type=text] { font-size: 12.5px; padding: 4px 6px; }
.pr-meta input:first-of-type { grid-column: 1 / 3; grid-row: 2; width: 100%; }
.pr-meta input:last-of-type { grid-column: 3; grid-row: 1 / 3; }
@media (max-width: 820px) { .pr-dlg { grid-template-columns: 1fr; max-height: 74vh; overflow: auto; } .pr-side { border: 0; padding: 0; } }
.print-sheet { display: none; }
/* folhas (iguais no ecrã da pré-visualização e no papel) */
.print-sheet { color: #000; font: 10pt/1.3 system-ui, sans-serif; }
.ps-page { display: flex; flex-direction: column; gap: 3mm; overflow: hidden; break-after: page; background: #fff; box-sizing: content-box; }
.ps-page:last-child { break-after: auto; }
.ps-page.real { overflow: visible; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1.2pt solid #000; padding-bottom: 2.5mm; }
.ps-clinic { display: grid; } .ps-clinic b { font-size: 12.5pt; }
.ps-title { text-align: right; font-weight: 700; font-size: 11.5pt; display: grid; } .ps-title span { font-weight: 400; font-size: 9pt; }
.ps-pat { display: flex; flex-wrap: wrap; gap: 1mm 7mm; }
.ps-pat span { color: #555; margin-right: 2mm; }
.ps-grid { flex: 1; min-height: 0; display: grid; gap: 3mm; }
.ps-page.real .ps-grid { display: block; flex: none; }
.ps-cell { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 1mm; break-inside: avoid; }
.ps-imgbox { flex: 1; min-height: 0; position: relative; background: #000; }
.ps-page.real .ps-imgbox { background: none; }
.ps-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ps-page.real .ps-img { position: static; }
.ps-cell figcaption { display: flex; flex-wrap: wrap; gap: 0 3mm; font-size: 8.5pt; }
.ps-cell figcaption em { flex-basis: 100%; font-style: normal; color: #222; }
.ps-cell figcaption em i { color: #666; font-size: 7.5pt; }
.ps-scale { font-size: 8pt; color: #444; }
.ps-notes { border: 0.75pt solid #999; border-radius: 2mm; padding: 2.5mm 3.5mm; }
.ps-notes h3 { margin: 0 0 1mm; font-size: 9.5pt; } .ps-notes p { margin: 0; white-space: pre-wrap; }
.ps-foot { padding-top: 1.5mm; border-top: 0.5pt solid #999; font-size: 7.5pt; color: #555; display: flex; justify-content: space-between; gap: 4mm; }
/* pré-visualização */
.pv-back { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr; background: #3B4048; }
.pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #1C2026; color: #E6E9EE; }
.pv-bar .muted { color: #9AA3B0; }
.pv-zoom { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.pv-paper { overflow: auto; padding: 24px 16px 40px; }
.pv-paper .print-sheet { display: block; width: max-content; margin: 0 auto; }
.pv-paper .ps-page { padding: 10mm; margin: 0 auto 8mm; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
@media print {
  /* só as folhas da pré-visualização vão para o papel */
  body.printing > *:not(.pv-back) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing .pv-back { position: static; display: block; background: #fff; }
  body.printing .pv-bar { display: none !important; }
  body.printing .pv-paper { padding: 0; overflow: visible; }
  body.printing .print-sheet { display: block; zoom: 1 !important; width: auto; margin: 0; }
  body.printing .ps-page { padding: 0; margin: 0; box-shadow: none; }
}
.pv-status { color: #8FD18F; font-size: 13px; }

/* observações assinadas (0.26.0) */
.pr-obs { grid-column: 1 / -1; font-size: 11.5px; color: #5B4A12; background: #FFF6DA; border-radius: 6px; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-badge { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px;
  background: #FFD24A; color: #2B2103; font: 700 11px system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; }
.obs-badge:hover { background: #FFE07A; }
.lb-info .obs-badge, .lv-name .obs-badge { position: static; margin-left: 8px; vertical-align: middle; }
.obs-card { position: fixed; z-index: 90; width: min(340px, 90vw); max-height: 60vh; overflow: auto; padding: 10px 12px; border-radius: 10px;
  background: #1C2026; color: #E6E9EE; box-shadow: 0 10px 30px rgba(0,0,0,.45); border: 1px solid #FFD24A66; font-size: 13px; pointer-events: none; }
.obs-card-h { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #FFD24A; margin-bottom: 6px; }
.obs-card-h span { margin-left: auto; color: #9AA3B0; font-weight: 500; }
.obs-card .obs-item { padding: 6px 0; border-top: 1px solid #2C323A; }
.obs-card .obs-item p { margin: 0 0 2px; white-space: pre-wrap; }
.obs-card small { color: #9AA3B0; }
.obs-more { display: block; margin-top: 4px; }
.obs-dlg { display: grid; gap: 10px; min-width: min(520px, 86vw); }
.obs-dlg .field { display: grid; gap: 4px; } .obs-dlg .field > span { font-size: 12.5px; color: var(--muted, #667); }
.obs-dlg textarea { resize: vertical; font: inherit; }
.obs-for { margin: 0; font-weight: 600; }
.obs-list { display: grid; gap: 8px; max-height: 38vh; overflow: auto; }
.obs-list .obs-item { padding: 8px 10px; border-radius: 9px; background: #FFF9E6; border: 1px solid #F2DE9C; }
.obs-list .obs-item p { margin: 0 0 4px; white-space: pre-wrap; }
.obs-foot { display: flex; align-items: center; gap: 8px; } .obs-foot small { color: #7A6A3A; } .obs-foot .btn { margin-left: auto; }
.obs-sign { display: flex; align-items: center; gap: 6px; margin: 0; }
.vw-obs-h { display: flex; align-items: center; justify-content: space-between; }
.vw-obs-h .vw-btn { padding: 2px 8px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.vw-obs { display: grid; gap: 6px; }
.vw-obs-item { padding: 6px 8px; border-radius: 7px; background: #2A2614; border: 1px solid #5C5023; }
.vw-obs-item p { margin: 0 0 2px; white-space: pre-wrap; color: #F3E9C6; font-size: 12.5px; }
.vw-obs-item small { color: #B9AE86; font-size: 11px; }
.pv-bar .btn:not(.primary) { background: #2A2F36; color: #E6E9EE; border-color: #3A414C; }
.pv-bar .btn:not(.primary):hover { background: #343A43; }

/* visor: processado por indicação, histograma, perfil (0.27.0) */
.vw-proc { display: grid; gap: 6px; }
.vw-presets, .vw-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.vw-btn.sm { padding: 3px 8px; font-size: 12px; }
.vw-presets .vw-btn.on, .vw-seg .vw-btn.on { background: #F2A93B; color: #1A1206; border-color: #F2A93B; }
.vw-pseudo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.vw-hist-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-top: 4px; }
.vw-hist-h .check { font-size: 12px; }
.vw-hist, .vw-prof-c { width: 100%; height: auto; border-radius: 6px; border: 1px solid #2C323A; cursor: ew-resize; touch-action: none; }
.vw-prof-c { cursor: default; }
.vw-prof:empty { display: none; }
.vw-prof { display: grid; gap: 6px; }
.vw-side label.check { color: #C9CED6; }

/* série radiográfica (FMX) (0.28.0) */
.mtw { grid-template-rows: auto auto 1fr auto; }
.mt-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #2A2F36; background: #171A1E; color: #C9CED6; }
.mt-bar .btn:not(.primary):not(.danger) { background: #232830; color: #E6E9EE; border-color: #3A414C; }
.mt-count { font-weight: 600; }
.mt-body { display: grid; grid-template-columns: 1fr 230px; min-height: 0; }
.mt-grid { overflow: auto; padding: 16px 18px; display: grid; align-content: start; gap: 14px; background: #0F1114; }
.mt-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.mt-rowlabel { color: #8F98A5; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; writing-mode: horizontal-tb; }
.mt-frames { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; }
.mt-frame { position: relative; flex: 0 1 auto; display: grid; place-items: center; background: #050607; border: 2px dashed #3A414C; border-radius: 8px; cursor: pointer; overflow: hidden; }
.mt-frame.v { width: clamp(64px, 9vw, 130px); aspect-ratio: 3 / 4; }
.mt-frame.h { width: clamp(90px, 12vw, 170px); aspect-ratio: 4 / 3; }
.mt-frame.full { border-style: solid; border-color: #2C323A; }
.mt-frame.next { border-color: #F2A93B; box-shadow: 0 0 0 3px rgba(242,169,59,.25); }
.mt-frame.over { border-color: #34d1ff; box-shadow: 0 0 0 3px rgba(52,209,255,.3); }
.mt-frame:hover .mt-acts { opacity: 1; }
.mt-n { position: absolute; left: 5px; top: 4px; z-index: 2; font: 700 11px system-ui, sans-serif; color: #F2A93B; text-shadow: 0 1px 2px #000; }
.mt-teeth { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2px 4px; font: 600 10.5px system-ui, sans-serif; color: #DDE2E8; background: rgba(0,0,0,.55); text-align: center; }
.mt-empty { color: #5C6672; }
.mt-frame.next .mt-empty { color: #F2A93B; }
.mt-imgbox { position: absolute; inset: 0; display: grid; place-items: center; cursor: grab; }
.mt-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s; }
.mt-frame .mt-img { width: 100%; height: 100%; }
.mt-acts { position: absolute; right: 4px; top: 4px; z-index: 3; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; }
.mt-acts button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 5px; background: rgba(20,24,29,.85); color: #E6E9EE; cursor: pointer; font-size: 13px; padding: 0; }
.mt-side { border-left: 1px solid #2A2F36; background: #171A1E; padding: 10px 12px; overflow: auto; color: #C9CED6; }
.mt-side h4 { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8F98A5; }
.mt-side .small { font-size: 11.5px; margin: 0 0 8px; }
.mt-tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; min-height: 120px; border-radius: 8px; padding: 4px; }
.mt-tray.over { outline: 2px dashed #34d1ff; }
.mt-tray-item { display: grid; gap: 3px; cursor: grab; }
.mt-tray-item .mt-img { width: 100%; aspect-ratio: 3 / 4; background: #000; border-radius: 6px; }
.mt-tray-item small { font-size: 10.5px; color: #9AA3B0; text-align: center; }
.mt-status { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid #2A2F36; background: #171A1E; color: #DDE2E8; font-size: 13px; }
.mt-armed { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #8FD18F; font-weight: 600; }
.mt-new { display: grid; gap: 12px; min-width: min(560px, 86vw); }
.mt-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mt-opt { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 1px solid var(--line, #d8dce3); border-radius: 10px; cursor: pointer; text-align: center; }
.mt-opt:has(input:checked) { border-color: var(--accent, #d71d2b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d71d2b) 25%, transparent); }
.mt-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mt-mini { display: grid; gap: 3px; justify-items: center; }
.mt-mini-row { display: flex; gap: 2px; }
.mt-mini i { display: block; background: #c5ccd6; border-radius: 1.5px; }
.mt-mini i.v { width: 8px; height: 11px; } .mt-mini i.h { width: 11px; height: 8px; }
.mt-mini i.on { background: #F2A93B; }
.mount-thumb { background: radial-gradient(circle at 50% 40%, #33302A, #15130F 72%); }
.mount-thumb .mt-mini i { background: #59606b; } .mount-thumb .mt-mini i.on { background: #F2A93B; }
.lb-mount .mt-mini { transform: scale(2.2); margin: 22px 0 26px; }
.lb-mount .mt-mini i { background: #4A515C; } .lb-mount .mt-mini i.on { background: #F2A93B; }
@media (max-width: 900px) { .mt-body { grid-template-columns: 1fr; } .mt-side { border-left: 0; } .mt-frames { flex-wrap: wrap; } }

/* exportar DICOM, ligação segura, ponte PMS (0.29.0) */
.sh-dlg { display: grid; gap: 10px; min-width: min(560px, 88vw); }
.sh-form { display: grid; gap: 10px; }
.sh-form textarea { resize: vertical; font: inherit; }
.sh-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.sh-pin { font: 600 16px ui-monospace, monospace; letter-spacing: .15em; }
.sh-result { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: #EAF7EE; border: 1px solid #B7E3C3; }
.sh-result > b { display: flex; align-items: center; gap: 6px; color: #1E6B34; }
.sh-urlrow { display: flex; gap: 6px; } .sh-url { flex: 1; font: 13px ui-monospace, monospace; }
.sh-reach { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; }
.sh-reach.r-this_pc, .sh-reach.r-lan { color: #8A5A00; }
.sh-list { display: grid; gap: 6px; max-height: 30vh; overflow: auto; }
.sh-list h4 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #667); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line, #e3e6eb); border-radius: 8px; }
.sh-row div { display: grid; } .sh-row small { color: var(--muted, #667); }
.sh-row:not(.st-active) { opacity: .6; }
.br-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.br-sim { display: block; margin: 4px 0; text-align: left; }
.br-info span { color: var(--muted, #667085); } .br-info b { color: var(--text, #1c2026); font-weight: 600; }

/* ---- visor CBCT (cbct.js / vol3d.js) */
.cbv { grid-template-rows: auto auto 1fr auto; background: #0B0D10; }
.cb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; background: #14171B; border-bottom: 1px solid #2A2F36; }
.cb-bar .spacer { flex: 1; }
.cb-grp { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #2A2F36; border-radius: 8px; background: #101317; }
.cb-k { font-size: 11.5px; color: #8A929E; padding: 0 6px 0 4px; }
.cb-b { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent;
  color: #C9CED6; font: inherit; font-size: 12.5px; cursor: pointer; }
.cb-b:hover { background: #222831; color: #fff; }
.cb-b.on { background: #E6E9EE; color: #14171B; }
.cb-b.primary { background: #2563EB; color: #fff; }
.cb-b.primary:hover { background: #1D4ED8; }
.cb-b.sm { height: 24px; padding: 0 7px; font-size: 11.5px; }
.cb-sel { height: 28px; background: #1C2026; color: #E6E9EE; border: 1px solid #2A2F36; border-radius: 6px; font-size: 12.5px; padding: 0 4px; }
.cb-sel.sm { height: 24px; font-size: 11.5px; }
.cb-body { position: relative; min-height: 0; }
.cb-grid { position: absolute; inset: 0; display: grid; gap: 3px; background: #2A2F36; padding: 0; }
.cb-grid[data-layout="mpr"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cb-grid[data-layout="pano"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.1fr); }
.cb-grid[data-layout="pano"] > .p-pano { grid-column: 1 / -1; }
.cb-grid.one { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
.cb-grid.one > *:not(.on):not(:has(.on)) { display: none; }
.cb-grid.one .cb-cross > .cb-pane:not(.on) { display: none; }
.cb-grid.one .cb-cross { grid-template-columns: 1fr; }
.cb-grid.one > .p-pano.on { grid-column: auto; }
.cb-pane { position: relative; min-width: 0; min-height: 0; background: #000; overflow: hidden; }
.cb-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.cbv[data-tool="wl"] .cb-cv { cursor: ns-resize; }
.cbv[data-tool="pan"] .cb-cv { cursor: grab; }
.cbv[data-tool="curve"] .p-ax .cb-cv { cursor: copy; }
.cb-lab { position: absolute; left: 8px; top: 6px; font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px #000; pointer-events: none; z-index: 2; }
.cb-crosswrap { display: grid; grid-template-rows: auto 1fr; min-height: 0; background: #2A2F36; gap: 3px; }
.cb-crosshead { background: #101317; color: #8A929E; font-size: 11.5px; padding: 4px 8px; }
.cb-cross { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; min-height: 0; }
.cb-pane.mid { box-shadow: inset 0 0 0 1px #C084FC; }
.p-v3d .cb-cv { display: none; }
.cb-gl, .cb-glov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cb-gl { cursor: grab; touch-action: none; }
.cb-glov { pointer-events: none; }
.cb-3dtools { position: absolute; right: 6px; top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end;
  max-width: calc(100% - 120px); z-index: 2; background: rgba(16, 19, 23, .8); padding: 3px; border-radius: 7px; }
.cb-3dtools input[type=range] { width: 90px; }
.cb-no3d { position: absolute; inset: 0; display: grid; place-items: center; color: #8A929E; font-size: 13px; padding: 20px; text-align: center; }
.cb-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #C9CED6; background: #0B0D10; z-index: 5; }
.cb-busy[hidden] { display: none; }
.cb-prog { width: 280px; height: 6px; border-radius: 3px; background: #2A2F36; overflow: hidden; }
.cb-prog i { display: block; height: 100%; width: 0; background: #5AA9FF; transition: width .2s; }
.cb-status { display: flex; align-items: center; gap: 14px; padding: 5px 12px; font-size: 12px; color: #C9CED6; background: #14171B; border-top: 1px solid #2A2F36; min-height: 26px; }
.cb-status .spacer { flex: 1; }
.cb-status .muted { color: #8A929E; }
.cb-status b { color: #FFE08A; min-width: 70px; }
.cb-help { color: #6F7783; }
.cb-snapopts { display: grid; gap: 6px; margin: 6px 0 10px; }
.cbct-thumb { background: radial-gradient(circle at 50% 40%, #2C3440, #11151A); color: #9FC6FF; }
.cb-break { flex-basis: 100%; height: 0; }
.cb-sel { width: auto; max-width: 160px; }
.cb-3dtools { max-width: calc(100% - 140px); }

/* ---- planificação de implantes (cbplan.js) */
.pl-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; display: none; flex-direction: column; gap: 10px; padding: 10px;
  background: #101317; border-left: 1px solid #2A2F36; color: #D5DAE1; overflow-y: auto; font-size: 12.5px; z-index: 4; }
.cb-body.with-plan .pl-panel { display: flex; }
.cb-body.with-plan .cb-grid { right: 301px; }
.pl-head, .pl-sec, .pl-row, .pl-nerve { display: flex; align-items: center; gap: 6px; }
.pl-head b { font-size: 13.5px; }
.pl-head .spacer, .pl-row .spacer, .pl-nerve .spacer { flex: 1; }
.pl-sec { justify-content: space-between; color: #8A929E; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0; }
.pl-panel section { display: grid; gap: 6px; }
.pl-nerve, .pl-imp { padding: 6px; border: 1px solid #2A2F36; border-radius: 8px; background: #151920; }
.pl-nerve.on, .pl-imp.on { border-color: #5AA9FF; box-shadow: 0 0 0 1px #5AA9FF inset; }
.pl-imp { display: grid; gap: 5px; cursor: pointer; }
.pl-row.small { font-size: 11.5px; flex-wrap: wrap; }
.pl-row.muted, .pl-panel .muted { color: #8A929E; }
.pl-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pl-tooth { width: 44px; height: 24px; background: #1C2026; color: #fff; border: 1px solid #2A2F36; border-radius: 6px; padding: 0 5px; font-weight: 600; }
.pl-d { padding: 1px 6px; border-radius: 9px; font-weight: 600; }
.pl-d.ok { background: rgba(60, 203, 127, .14); color: #6EE7A8; }
.pl-d.warn { background: rgba(245, 165, 36, .16); color: #FBBF24; }
.pl-d.bad { background: rgba(242, 85, 90, .18); color: #FF8A8E; }
.pl-note { font-size: 11px; color: #8A929E; border-top: 1px solid #2A2F36; padding-top: 8px; margin: 0; }
.cbv[data-tool="implant"] .cb-cv, .cbv[data-tool="nerve"] .cb-cv { cursor: cell; }
.pl-panel { overflow-x: hidden; }
.pl-nerve { flex-wrap: wrap; }
.pl-panel .pl-tooth { background: #1C2026; color: #fff; border: 1px solid #2A2F36; }
.pl-panel .cb-sel.sm { max-width: 92px; }
.pl-sec .cb-b { flex: none; }
.pl-panel .pl-tooth { width: 46px; padding: 0 4px; flex: none; box-sizing: border-box; text-align: center; }
.pl-imp .pl-row { flex-wrap: wrap; }
.pl-panel .cb-sel.sm { max-width: 84px; }

/* ---- cofre cifrado (vaultui.js) */
.vk { display: grid; gap: 12px; max-width: 560px; }
.vk-key { font: 600 19px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; padding: 14px 16px;
  border: 2px dashed var(--accent, #e3122c); border-radius: 10px; background: #fff7f8; text-align: center; word-break: normal; user-select: all; }
.vk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #FFF4E5; color: #7A4B00; font-size: 13px; }
.vk-in { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.vk-forgot { justify-self: start; margin-top: -4px; }
.vk-card { padding: 16px; margin-bottom: 16px; }
.vk-card-h { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.vk-missing { color: #B42318; }

/* modal bloqueado: abana em vez de fechar */
.modal-nudge { animation: modal-nudge .32s ease; }
@keyframes modal-nudge { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }
.vk-key { user-select: all; -webkit-user-select: all; }
.vk-steps { display: flex; gap: 8px; font-size: 12px; color: var(--muted, #888); margin-bottom: 8px; }
.vk-steps .on { color: inherit; font-weight: 600; }
.vk-in { width: 100%; font-family: ui-monospace, monospace; letter-spacing: .04em; }
.vk-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; width: 100%; }