.pieza-card{--pieza-ancho:64px;--pieza-alto:74px;--lado:12px;--franja:12px;width:var(--pieza-ancho);min-width:var(--pieza-ancho);max-width:var(--pieza-ancho);box-sizing:border-box;flex-direction:column;flex:none;justify-content:flex-start;align-items:center;gap:7px;display:flex}.pieza-anterior{--pieza-ancho:52px;--pieza-alto:76px;--lado:9px;--franja:11px}.pieza-canino{--pieza-ancho:58px;--pieza-alto:78px;--lado:10px;--franja:11px}.pieza-premolar{--pieza-ancho:62px;--pieza-alto:76px;--lado:11px;--franja:12px}.pieza-molar{--pieza-ancho:68px;--pieza-alto:76px;--lado:12px;--franja:12px}.pieza-temporal-anterior{--pieza-ancho:44px;--pieza-alto:64px;--lado:8px;--franja:10px}.pieza-temporal-canino{--pieza-ancho:48px;--pieza-alto:66px;--lado:8px;--franja:10px}.pieza-temporal-molar{--pieza-ancho:54px;--pieza-alto:66px;--lado:9px;--franja:10px}.pieza-numero{color:#334155;text-align:center;width:100%;font-size:13px;font-weight:700;line-height:1}.pieza-wrapper{width:var(--pieza-ancho);min-width:var(--pieza-ancho);max-width:var(--pieza-ancho);height:var(--pieza-alto);box-sizing:border-box;flex:none;position:relative}.pieza-esmalte{grid-template-columns:var(--lado) 1fr var(--lado);grid-template-rows:var(--franja) 1fr var(--franja);box-sizing:border-box;clip-path:polygon(18% 0%,82% 0%,100% 18%,100% 82%,82% 100%,18% 100%,0% 82%,0% 18%);background:linear-gradient(#fff 0%,#f8fbff 100%);border:1px solid #cfd9e6;gap:3px;width:100%;height:100%;padding:3px;display:grid;position:relative;box-shadow:0 5px 10px #00000014,inset 0 1px #ffffffd9}.pieza-esmalte:before{content:"";clip-path:polygon(18% 0%,82% 0%,100% 18%,100% 82%,82% 100%,18% 100%,0% 82%,0% 18%);pointer-events:none;border:1px solid #94a3b829;position:absolute;inset:4px}.cara{cursor:pointer;appearance:none;z-index:1;box-sizing:border-box;background:#fff;border:1px solid #94a3b8;outline:none;width:100%;height:100%;margin:0;padding:0;transition:transform .12s,border-color .12s,box-shadow .12s,opacity .12s;position:relative}.cara:hover{border-color:#2563eb;transform:scale(1.04);box-shadow:0 0 0 2px #2563eb1f}.cara:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb2e}.cara-top{clip-path:polygon(14% 0%,86% 0%,96% 100%,4% 100%);grid-area:1/1/2/4}.cara-left{clip-path:polygon(100% 2%,100% 98%,0% 84%,0% 16%);grid-area:2/1/3/2}.cara-center{clip-path:polygon(12% 0%,88% 0%,100% 12%,100% 88%,88% 100%,12% 100%,0% 88%,0% 12%);grid-area:2/2/3/3}.cara-right{clip-path:polygon(0% 2%,100% 16%,100% 84%,0% 98%);grid-area:2/3/3/4}.cara-bottom{clip-path:polygon(4% 0%,96% 0%,86% 100%,14% 100%);grid-area:3/1/4/4}.estado-normal{background:linear-gradient(#fff 0%,#f8fafc 100%)}.estado-caries{background:linear-gradient(#ef4444 0%,#dc2626 100%);border-color:#b91c1c}.estado-restauracion{background:linear-gradient(#3b82f6 0%,#2563eb 100%);border-color:#1d4ed8}.estado-ausente{background:linear-gradient(#475569 0%,#334155 100%);border-color:#1e293b}.estado-corona{background:linear-gradient(#fbbf24 0%,#f59e0b 100%);border-color:#d97706}.estado-endodoncia{background:linear-gradient(#a78bfa 0%,#8b5cf6 100%);border-color:#7c3aed}.estado-implante{background:linear-gradient(#34d399 0%,#10b981 100%);border-color:#059669}.pieza-card-ausente .pieza-esmalte{opacity:.55}.pieza-cruz-ausente{pointer-events:none;position:absolute;inset:6px}.pieza-cruz-ausente:before,.pieza-cruz-ausente:after{content:"";width:calc(var(--pieza-ancho) - 12px);background:#b91c1ce6;border-radius:999px;height:2px;position:absolute;top:50%;left:50%}.pieza-cruz-ausente:before{transform:translate(-50%,-50%)rotate(45deg)}.pieza-cruz-ausente:after{transform:translate(-50%,-50%)rotate(-45deg)}.estado-chip{cursor:pointer;color:#1f2937;border:1px solid #0000;border-radius:999px;height:34px;padding:0 12px;font-size:13px;font-weight:600;transition:all .2s}.estado-chip[data-estado=caries]{color:#fff;background:linear-gradient(#ef4444 0%,#dc2626 100%);border-color:#b91c1c}.estado-chip[data-estado=restauracion]{color:#fff;background:linear-gradient(#3b82f6 0%,#2563eb 100%);border-color:#1d4ed8}.estado-chip[data-estado=ausente]{color:#fff;background:linear-gradient(#475569 0%,#334155 100%);border-color:#1e293b}.estado-chip[data-estado=corona]{color:#fff;background:linear-gradient(#fbbf24 0%,#f59e0b 100%);border-color:#d97706}.estado-chip[data-estado=endodoncia]{color:#fff;background:linear-gradient(#a78bfa 0%,#8b5cf6 100%);border-color:#7c3aed}.estado-chip[data-estado=implante]{color:#fff;background:linear-gradient(#34d399 0%,#10b981 100%);border-color:#059669}.estado-chip[data-estado=normal]{color:#1f2937;background:linear-gradient(#fff 0%,#f8fafc 100%);border-color:#94a3b8}.estado-chip:hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 3px 8px #00000014}.estado-btn.selected{border:2px solid #2563eb;transform:scale(2)}.estado-btn:hover{transform:scale(1.08)}html,body,#root{align-self:center;width:90%;min-height:100%;margin:0;padding:0}body{background:#e9eef5;justify-content:center;font-family:Arial,Helvetica,sans-serif;display:flex}*{box-sizing:border-box}