/* Odontograma (panel de PC). Solo tokens del canon: azul = buen estado (--info-*), rojo = mal estado (--danger-*). */
.odg { display: grid; gap: var(--sp-4); min-width: 0; }

/* Barra: dentición a la izquierda, leyenda a la derecha */
.odg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); }
.odg-bar-mode { display: flex; align-items: center; gap: var(--sp-3); }
.odg-bar-label { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--neutral-ink); }
.odg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); font-size: var(--fs-meta); color: var(--text-primary); }
.odg-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.odg-swatch { width: var(--icon-md); height: var(--icon-md); border: var(--border-w) solid transparent; border-radius: var(--r-sm); }
.odg-swatch.is-azul { background: var(--info-solid); border-color: var(--info-ink); }
.odg-swatch.is-rojo { background: var(--danger-solid); border-color: var(--danger-ink); }
.odg-tip { margin: 0; font-size: var(--fs-hint); line-height: var(--lh-snug); color: var(--text-subtle); }

/* Dibujo */
.odg-chart { display: grid; gap: var(--sp-4); padding: var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); overflow-x: auto; }
.odg-rowwrap { display: grid; gap: var(--sp-1); min-width: 640px; }
.odg-rowwrap.is-superior + .odg-rowwrap.is-inferior { padding-top: var(--sp-3); border-top: var(--border-w) dashed var(--border-default); }
.odg-caption { margin: 0; font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.odg-row { display: flex; }
.odg-half { display: flex; flex: 1 1 0; min-width: 0; }
.odg-half.is-left { justify-content: flex-end; border-right: var(--border-w) solid var(--border-strong); }
.odg-half.is-right { justify-content: flex-start; }
.odg-tooth { flex: 0 0 12.5%; max-width: 64px; min-width: 0; padding-inline: 1px; }
.odg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.odg-svg text { font-family: inherit; }

.odg-face { fill: var(--surface-1); stroke: var(--border-strong); stroke-width: 1; transition: fill var(--dur-fast) var(--ease); }
.odg-face.is-azul { fill: var(--info-solid); stroke: var(--info-ink); }
.odg-face.is-rojo { fill: var(--danger-solid); stroke: var(--danger-ink); }
/* Cómo se pinta una cara: «relleno» (por omisión, arriba), «contorno» (solo el borde) y «sombreado» (tono suave). */
.odg-face.is-contorno { fill: var(--surface-1); stroke-width: 2.4; }
.odg-face.is-contorno.is-azul { stroke: var(--info-solid); }
.odg-face.is-contorno.is-rojo { stroke: var(--danger-solid); }
.odg-face.is-sombreado.is-azul { fill: color-mix(in srgb, var(--info-solid) 35%, var(--surface-1)); }
.odg-face.is-sombreado.is-rojo { fill: color-mix(in srgb, var(--danger-solid) 35%, var(--surface-1)); }
.odg-hit { outline: none; }
.odg-hit.is-write { cursor: pointer; }
.odg-hit.is-write:hover .odg-face:not(.is-azul):not(.is-rojo) { fill: var(--surface-selected); }
.odg-hit.is-write:hover .odg-face, .odg-hit:focus-visible .odg-face { stroke: var(--focus); stroke-width: 2; }
.odg-number-area { fill: transparent; }
.odg-hit.is-write:hover .odg-number-area, .odg-hit.odg-number:focus-visible .odg-number-area { fill: var(--surface-selected); }
.odg-hit.odg-number:focus-visible .odg-number-area { stroke: var(--focus); stroke-width: 1; }
.odg-num { fill: var(--text-strong); font-weight: var(--fw-medium); }

/* Marcas de pieza entera, siglas y tramos */
.odg-mark { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.odg-mark.is-azul, .odg-span.is-azul { stroke: var(--info-solid); }
.odg-mark.is-rojo, .odg-span.is-rojo { stroke: var(--danger-solid); }
.odg-span { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.odg-span.is-thin { stroke-width: 1.8; }
.odg-span.is-thick { stroke-width: 4; }
.odg-mark-letter { stroke: none; font-weight: var(--fw-bold); }
.odg-span.is-azul .odg-mark-letter { fill: var(--info-ink); }
.odg-span.is-rojo .odg-mark-letter { fill: var(--danger-ink); }
.odg-mark-text { font-weight: var(--fw-bold); pointer-events: none; }
.odg-mark-text.is-azul { fill: var(--info-ink); }
.odg-mark-text.is-rojo { fill: var(--danger-ink); }

/* Lista de hallazgos registrados */
.odg-list { display: grid; gap: var(--sp-2); }
.odg-list-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-strong); }
.odg-count { font-weight: var(--fw-regular); color: var(--text-muted); }
.odg-empty { margin: 0; padding: var(--sp-4); border: var(--border-w) dashed var(--border-default); border-radius: var(--r-lg); font-size: var(--fs-body); color: var(--text-muted); }
.odg-items { max-height: calc(var(--row-h) * 7); overflow: auto; border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); }
.odg-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.odg-item + .odg-item { border-top: var(--border-w) solid var(--border-soft); }
.odg-dot { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: 2px; border-radius: var(--r-full); }
.odg-dot.is-azul { background: var(--info-solid); }
.odg-dot.is-rojo { background: var(--danger-solid); }
.odg-item-main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.odg-item-text { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-strong); }
.odg-item-meta { font-size: var(--fs-meta); color: var(--text-muted); }
.odg-item-note { font-size: var(--fs-meta); color: var(--text-value); }
.odg-item-void { font-size: var(--fs-meta); color: var(--danger-ink); }
.odg-item.is-voided .odg-item-text { text-decoration: line-through; color: var(--text-subtle); font-weight: var(--fw-regular); }
.odg-item.is-voided .odg-dot { opacity: .4; }
.odg-item .ui-btn { flex: none; }

/* Diálogos (registrar y anular) */
.odg-dialog { position: relative; }
.odg-dialog .ui-dialog-title { padding-right: var(--sp-8); }
.odg-close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.odg-place { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-strong); }
.odg-options { display: grid; gap: var(--sp-3); max-height: calc(var(--row-h) * 4); padding: var(--sp-3); overflow: auto; border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-2); }
.odg-group { display: grid; gap: var(--sp-1); }
.odg-group-title { margin: 0; font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.odg-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.odg-details { display: grid; gap: var(--sp-3); }
.odg-fixed { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--text-muted); }
.odg-label-row { display: flex; align-items: center; gap: var(--sp-2); }
.odg-dialog .ui-field > .ui-input, .odg-dialog .ui-field > .ui-select, .odg-dialog .ui-field > .ui-textarea { width: 100%; box-sizing: border-box; }