/* ==========================================================================
   sgm-odontograma.css - estilo do widget de odontograma (leitura, BI)

   Portado VERBATIM do CSS() de
   Projeto_Saude/SISWEB/Ambulatorio/html/uOdontograma.pas (linhas 70-278),
   com um typo vivo corrigido no porte: .odo-zoom-inf {ransform -> transform}.

   Regra de ouro 1: so o ESTILO vai para arquivo servido. Comportamento e markup
   do odontograma vivem em sgm-odontograma.js / html uJsOdontograma.pas.
   As classes/ids abaixo sao contrato - o JS e o markup dependem deles byte a
   byte (.odo-*, .tooth*, .face-*, .sextant*, .arcada*, .num, .css-dente*,
   .odonto-historico-lock*, #tooth-NN, #face-NN, #faces-*, #arcada-*).
   ========================================================================== */

.odo-shell {display: inline-block; max-width: 100%;}
.odo-zoom {display: inline-block; transform-origin: top center;}
.odo-wrap {max-width: 980px; margin: 0 auto; padding: 0px;}
@media (max-width: 1024px) {
  .odo-zoom {transform: scale(0.9);}
	.odo-wrap {padding: 4px;}
	.odo-grid {gap: 6px;}
	.tooth {width: 44px;}
	.tooth svg {width: 40px;height: 64px;}
}
@media (max-width: 768px) {
	.odo-zoom {transform: scale(0.75);}
	.odo-grid {gap: 4px;}
	.tooth {width: 40px;}
	.tooth svg {width: 36px; height: 60px;}
}
@media (max-width: 480px) {
	.odo-zoom {transform: scale(0.65);}
}
.odo-grid{display:grid; grid-template-columns: repeat(16, 1fr); gap: 13px; justify-items:center; position:relative; width: 100%; top: 30px;}
.odo-grid > div:nth-child(n):nth-child(-n+32) {align-self: start;}
.odo-grid > div:nth-child(n+33):nth-child(-n+64) {align-self: end;}
.odo-grid > div.tooth:nth-child(n+17) {align-self: end;}
.sextant-group { display: contents; }
#arcada-superior > #tooth-13 { grid-column: 6; }
#arcada-superior > #tooth-12 { grid-column: 7; }
#arcada-superior > #tooth-11 { grid-column: 8; }
#arcada-superior > #tooth-21 { grid-column: 9; }
#arcada-superior > #tooth-22 { grid-column: 10; }
#arcada-superior > #tooth-23 { grid-column: 11; }
#arcada-inferior > #tooth-43 { grid-column: 6; }
#arcada-inferior > #tooth-42 { grid-column: 7; }
#arcada-inferior > #tooth-41 { grid-column: 8; }
#arcada-inferior > #tooth-31 { grid-column: 9; }
#arcada-inferior > #tooth-32 { grid-column: 10; }
#arcada-inferior > #tooth-33 { grid-column: 11; }
#arcada-inferior.sextantes-lower-offset .tooth { transform: translateY(38px); }
#arcada-superior.sextantes-upper-offset .tooth { transform: translateY(10px); }
.odo-grid#faces-superiores > .face-geo, .odo-grid#faces-inferiores > .face-geo {grid-column: span 1; width: 32px; height: 32px; margin: 0 auto; }
#faces-superiores > #face-18 { grid-column: 1; }
#faces-superiores > #face-17 { grid-column: 2; }
#faces-superiores > #face-16 { grid-column: 3; }
#faces-superiores > #face-15 { grid-column: 4; }
#faces-superiores > #face-14 { grid-column: 5; }
#faces-superiores > #face-13 { grid-column: 6; }
#faces-superiores > #face-12 { grid-column: 7; }
#faces-superiores > #face-11 { grid-column: 8; }
#faces-superiores > #face-21 { grid-column: 9; }
#faces-superiores > #face-22 { grid-column: 10; }
#faces-superiores > #face-23 { grid-column: 11; }
#faces-superiores > #face-24 { grid-column: 12; }
#faces-superiores > #face-25 { grid-column: 13; }
#faces-superiores > #face-26 { grid-column: 14; }
#faces-superiores > #face-27 { grid-column: 15; }
#faces-superiores > #face-28 { grid-column: 16; }
#faces-inferiores > #face-48 { grid-column: 1; }
#faces-inferiores > #face-47 { grid-column: 2; }
#faces-inferiores > #face-46 { grid-column: 3; }
#faces-inferiores > #face-45 { grid-column: 4; }
#faces-inferiores > #face-44 { grid-column: 5; }
#faces-inferiores > #face-43 { grid-column: 6; }
#faces-inferiores > #face-42 { grid-column: 7; }
#faces-inferiores > #face-41 { grid-column: 8; }
#faces-inferiores > #face-31 { grid-column: 9; }
#faces-inferiores > #face-32 { grid-column: 10; }
#faces-inferiores > #face-33 { grid-column: 11; }
#faces-inferiores > #face-34 { grid-column: 12; }
#faces-inferiores > #face-35 { grid-column: 13; }
#faces-inferiores > #face-36 { grid-column: 14; }
#faces-inferiores > #face-37 { grid-column: 15; }
#faces-inferiores > #face-38 { grid-column: 16; }
.tooth{width: 48px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; cursor: pointer; user-select: none; text-align: center; top: 5px;}
.tooth-badge{position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #1459A4; color: #fff; font-size: 11px; font-weight: 600; display: flex;
             align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.25); pointer-events: none;}
.tooth-badge.lower-arc{top: auto; bottom: -4px;}
.tooth svg{width: 44px; height: 70px; display:block;}
.tooth .num{font-size:12px; font-weight:600; margin-top:4px; color:#000;}
.tooth-label-svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;}
.tooth-root-band-svg {pointer-events: none;}
.tooth:hover svg{background: transparent !important; filter: drop-shadow(rgba(0, 0, 0, 0.14) 0px 4px 5px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 10px) drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px);}
svg.tooth-outline-active-svg path, svg.tooth-outline-active-svg use {stroke: #2196f3; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;}
svg.tooth-outline-active-svg path, svg.tooth-outline-active-svg use {fill-opacity: 1;}
.odosep{height: 15px;}
.t-incisor path, .t-canine path, .t-premolar path, .t-molar path{fill: var(--fill); stroke: var(--stroke); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;}
.face-geo {width: 36px; height: 36px; display: inline-block; margin: 2px;}
.face-geo svg {width: 100%; height: 100%; display: block; overflow: visible;}
.face-poly {fill: #ffffff; stroke: #5f6478; stroke-width: 0.8; cursor: pointer; transition: fill 0.2s ease;}
.face-poly:hover {fill: #e9f2ff; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 3px);}
.face-poly.fill-amarelo { fill: #FBE4A2 !important; }
.face-poly.fill-cinza   { fill: #B0B0B0 !important; }
.face-poly.fill-vermelho{ fill: #E74C3C !important; }
.face-poly.fill-verde   { fill: #2ECC71 !important; }
.face-poly.fill-azul    { fill: #0066d9 !important; }
.css-dente {max-width: 100%; outline: 0; transition: 0.2s; filter: drop-shadow(rgba(0, 0, 0, 0.04) 0px 2px 1px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 5px);}
.css-dente:hover {filter: drop-shadow(rgba(0, 0, 0, 0.14) 0px 4px 5px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 10px) drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px);}
.css-dentetop {cursor: pointer; stroke: rgb(143, 143, 162); fill: rgb(240, 240, 245);}
.css-dentebottom {cursor: pointer; stroke: rgb(143, 143, 162); fill: rgb(255, 255, 255);}
.css-dentepath {fill: rgb(0, 105, 208); opacity: 0; transition: opacity 0.125s;}
.fill-amarelo { fill: #FBE4A2 !important; }
.fill-cinza   { fill: #B0B0B0 !important; }
.fill-vermelho{ fill: #E74C3C !important; }
.fill-verde   { fill: #2ECC71 !important; }
.fill-azul    { fill: #0066d9 !important; }
.odo-toolbar label {cursor: pointer;}
.arcada-badge {position: absolute; right: -8px; top: -10px; transform: none; min-width: 30px; height: 30px; border-radius: 999px; background: #1459A4; color: #fff; font-size: 14px; font-weight: 600;
               display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.25);}
.sextant-box {display: inline-block; min-width: 180px;}
.sextant-item {padding: 2px 0; border-radius: 3px; text-align: center;}
.sextant-item.sextant-active {background-color: #e9f2ff;}
.sextant-frame {position: absolute; border: 1px solid #d0d0d0; border-radius: 4px; background: transparent; pointer-events: none; box-sizing: border-box; display: none;}
.sextant-frame-active {border-color: #1459A4; box-shadow: 0 0 0 2px rgba(20,89,164,0.2);}
.sextant-badge {position: absolute; right: 0px; top: -10px; min-width: 22px; height: 22px; border-radius: 999px; background: #1459A4; color: #fff; font-size: 12px; font-weight: 600; display: flex;
                align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.25); pointer-events: none;}
.odo-grid.view-arcadas {display: flex !important; gap: 0 !important; justify-content: center; flex-wrap: nowrap;}
.odo-grid.view-arcadas > div {grid-column: unset !important;}
.odo-shell-inf {display: inline-block; max-width: 100%; overflow-x: auto;}
.odo-zoom-inf {display: inline-block; transform-origin: top center;}
.odo-wrap-inf {max-width: 980px; margin: 0 auto; padding: 8px;}
@media (max-width: 1024px) {
 .odo-zoom-inf {transform: scale(0.9);}
	.odo-wrap-inf {padding: 4px;}
	.odo-grid-inf {gap: 6px;}
	.tooth-inf {width: 44px;}
	.tooth-inf svg {width: 40px; height: 64px;}
}
@media (max-width: 768px) {
	.odo-zoom-inf {transform: scale(0.75);}
	.odo-grid-inf {gap: 4px;}
	.tooth-inf {width: 40px;}
	.tooth-inf svg {width: 36px; height: 60px;}
}
@media (max-width: 480px) {
	.odo-zoom-inf {transform: scale(0.65);}
}
.odo-grid-inf{display:grid; grid-template-columns: repeat(16, 1fr); gap: 8px; justify-items:center; position:relative;}
.odo-grid-inf > div:nth-child(n):nth-child(-n+32) {align-self: start;}
.odo-grid-inf > div:nth-child(n+33):nth-child(-n+64) {align-self: end;}
.odo-grid-inf > div.tooth-inf:nth-child(n+17) { align-self: end; }
.odo-toolbar-inf label {cursor: pointer;}
.odo-grid-inf.view-arcadas{display: flex !important; gap: 0 !important; justify-content: center; flex-wrap: nowrap;}
      .odo-grid-inf.view-arcadas > div{grid-column: unset !important; margin: 0 10px;}
.tooth-inf{width: 48px; text-align: center; cursor: pointer; user-select: none; position: relative;}
.tooth-badge-inf{position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #1459A4; color: #fff; font-size: 11px;
                 font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.25); pointer-events: none;}
.tooth-badge-inf.lower-arc{top: auto; bottom: -4px;}
.tooth-inf svg{width: 44px; height: 70px; display:block;}
.tooth-inf .num{font-size:12px; font-weight:600; margin-top:4px; color:#000;}
.tooth-label-svg-inf {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;}
.tooth-inf-root-band-svg {pointer-events: none;}
.tooth-inf:hover svg{background: transparent !important; filter: drop-shadow(rgba(0, 0, 0, 0.14) 0px 4px 5px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 10px) drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px);}
svg.tooth-inf-outline-active-svg path, svg.tooth-inf-outline-active-svg use {stroke: #2196f3; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;}
svg.tooth-inf-outline-active-svg path, svg.tooth-inf-outline-active-svg use {fill-opacity: 1;}
.odosep{height: 15px;}
.t-incisor path, .t-canine path, .t-premolar path, .t-molar path{fill: var(--fill); stroke: var(--stroke); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;}
.face-geo-inf {width: 36px; height: 36px; display: inline-block; margin: 2px;}
.face-geo-inf svg {width: 100%; height: 100%; display: block; overflow: visible;}
.face-poly-inf {fill: #ffffff; stroke: #5f6478; stroke-width: 0.8; cursor: pointer; transition: fill 0.2s ease;}
.face-poly-inf:hover {fill: #e9f2ff; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 3px);}
.face-poly-inf.fill-amarelo-inf { fill: #FBE4A2 !important; }
.face-poly-inf.fill-cinza-inf   { fill: #B0B0B0 !important; }
.face-poly-inf.fill-vermelho-inf{ fill: #E74C3C !important; }
.face-poly-inf.fill-verde-inf   { fill: #2ECC71 !important; }
.face-poly-inf.fill-azul-inf    { fill: #0066d9 !important; }
.css-dente-inf {max-width: 100%; outline: 0; transition: 0.2s; filter: drop-shadow(rgba(0, 0, 0, 0.04) 0px 2px 1px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 5px);}
.css-dente-inf:hover {filter: drop-shadow(rgba(0, 0, 0, 0.14) 0px 4px 5px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 10px) drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px);}
.css-dentetop-inf {cursor: pointer; stroke: rgb(143, 143, 162); fill: rgb(240, 240, 245);}
.css-dentebottom-inf {cursor: pointer; stroke: rgb(143, 143, 162); fill: rgb(255, 255, 255);}
.css-dentepath-inf {fill: rgb(0, 105, 208); opacity: 0; transition: opacity 0.125s;}
.fill-amarelo-inf { fill: #FBE4A2 !important; }
.fill-cinza-inf   { fill: #B0B0B0 !important; }
.fill-vermelho-inf{ fill: #E74C3C !important; }
.fill-verde-inf   { fill: #2ECC71 !important; }
.fill-azul-inf    { fill: #0066d9 !important; }
.arcada-badge-inf{position: absolute; right: -8px; top: -10px; transform: none; min-width: 30px; height: 30px; border-radius: 999px; background: #1459A4; color: #fff;
                  font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.25);}
.tooth-outline-active-svg-inf path, .tooth-outline-active-svg-inf use {stroke: #2196f3; stroke-width: 0.45; stroke-linejoin: round;}
.odonto-historico-lock{
  background-color:#e5e5ea !important;
}
.odonto-historico-lock .odo-shell,
.odonto-historico-lock .odo-shell-inf,
.odonto-historico-lock .odo-wrap,
.odonto-historico-lock .odo-wrap-inf,
.odonto-historico-lock .odo-grid.view-arcadas,
.odonto-historico-lock .odo-grid-inf.view-arcadas,
.odonto-historico-lock .w3-center.w3-padding-small{
  background-color:#e5e5ea !important;
}
.odonto-historico-lock *{
  pointer-events:none !important;
}
.odonto-historico-lock [id^="tooth-"],
.odonto-historico-lock [id^="tooth-"] *{
  pointer-events:auto !important;
}
.odonto-historico-host,
.odonto-historico-host .x-autocontainer-outerCt,
.odonto-historico-host .x-autocontainer-innerCt {
    background-color: #e5e5ea !important;
}