/**
 * odontogram.css
 *
 * Variables de color configurables desde un unico punto (seccion 8.4). El
 * color no es la unica forma de representar el estado: los simbolos
 * superpuestos (odontogram-symbol-*) viven en su propia capa SVG.
 */
:root {
    --odontogram-healthy: #ffffff;
    --odontogram-caries: #e53935;
    --odontogram-restoration: #1976d2;
    --odontogram-restoration-external: #e91e63;
    --odontogram-planned: #f9a825;
    --odontogram-sealant: #8e24aa;
    --odontogram-watch: #fb8c00;

    --odontogram-outline: #37474f;
    --odontogram-outline-strong: #102027;
    --odontogram-midline: #90a4ae;
    --odontogram-label: #37474f;
    --odontogram-focus: #1565c0;
    --odontogram-bg: #ffffff;
}

.odontogram-container {
    background: var(--odontogram-bg);
    overflow: auto;
}

.odontogram-svg {
    display: block;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    user-select: none;
}

.odontogram-tooth-outline {
    fill: none;
    stroke: var(--odontogram-outline-strong);
    stroke-width: 1.5;
}

.odontogram-surface {
    stroke: var(--odontogram-outline);
    stroke-width: 1;
    cursor: pointer;
    fill: var(--odontogram-healthy);
    transition: fill 0.12s ease-in-out;
}

.odontogram-surface:hover {
    filter: brightness(0.94);
}

.odontogram-surface:focus-visible {
    outline: none;
    stroke: var(--odontogram-focus);
    stroke-width: 2.5;
}

.odontogram-surface[data-state="healthy"] { fill: var(--odontogram-healthy); }
.odontogram-surface[data-state="caries"] { fill: var(--odontogram-caries); }
.odontogram-surface[data-state="restoration"] { fill: var(--odontogram-restoration); }
.odontogram-surface[data-state="restoration_external"] { fill: var(--odontogram-restoration-external); }
.odontogram-surface[data-state="planned"] { fill: var(--odontogram-planned); }
.odontogram-surface[data-state="sealant"] { fill: var(--odontogram-sealant); }
.odontogram-surface[data-state="watch"] { fill: var(--odontogram-watch); }

.odontogram-cusp-accent {
    fill: var(--odontogram-healthy);
    stroke: var(--odontogram-outline);
    stroke-width: 1;
}

.odontogram-tooth-label {
    font-size: 10px;
    fill: var(--odontogram-label);
    cursor: pointer;
}

.odontogram-tooth-label:hover {
    fill: var(--odontogram-focus);
}

.odontogram-midline {
    stroke: var(--odontogram-midline);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

/* Simbolos superpuestos por estado de diente completo (seccion 8.4). */
.odontogram-symbol-extracted {
    stroke: #616161;
    stroke-width: 2.5;
}

.odontogram-symbol-extraction-planned {
    stroke: #e53935;
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

.odontogram-symbol-endodontic {
    stroke: #6d4c41;
    stroke-width: 2.5;
}

.odontogram-symbol-post {
    stroke: #00897b;
    stroke-width: 2.5;
    fill: #00897b;
}

.odontogram-symbol-crown {
    fill: none;
    stroke: #fdd835;
    stroke-width: 2.5;
}

.odontogram-symbol-implant {
    stroke: #546e7a;
    stroke-width: 2;
    fill: #546e7a;
}

.odontogram-symbol-fracture {
    fill: none;
    stroke: #d81b60;
    stroke-width: 2;
}