/* Odontograma SVG visual — Clínica Endodontics Sprint 4 Fase B
 * Colores por finding_type (prioridad: endo > caries > clinical > missing)
 */

:root {
    --odo-bronze: #A6835A;
    --odo-cream: #FAF6F0;
    --odo-ink: #2b2b2b;
    --odo-line: #3a3a3a;
    --odo-line-soft: #bdb19a;

    --odo-endo: #B83A2A;        /* endo_pulpar */
    --odo-caries: #8B4513;      /* caries_restoration_fracture */
    --odo-missing: #6B6B6B;     /* missing_prosthesis */
    --odo-symptom: #C49830;     /* clinical_symptom */
}

.odontograma {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--odo-cream);
    border: 1px solid #e2d8c6;
    border-radius: 0.625rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

/* Toolbar */
.odo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}
.odo-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.odo-toolbar__group--legend {
    flex-wrap: wrap;
}
.odo-toolbar__label {
    color: #6e5d40;
    font-weight: 600;
    margin-right: 0.25rem;
}

.odo-toggle {
    padding: 0.25rem 0.6rem;
    border: 1px solid #d3c5ad;
    border-radius: 0.375rem;
    background: white;
    color: var(--odo-ink);
    font-size: 0.8125rem;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s;
}
.odo-toggle:hover {
    border-color: var(--odo-bronze);
    background: #f8f1e3;
}
.odo-toggle--active {
    background: var(--odo-bronze);
    color: white;
    border-color: var(--odo-bronze);
}
.odo-toggle--ghost {
    background: transparent;
}

.odo-legend {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}
.odo-legend--endo    { background: var(--odo-endo); }
.odo-legend--caries  { background: var(--odo-caries); }
.odo-legend--missing { background: var(--odo-missing); }
.odo-legend--symptom { background: var(--odo-symptom); color: #3b2c0e; }

.odo-hint {
    font-size: 0.75rem;
    color: #7a6748;
    font-style: italic;
    margin: 0 0 0.5rem 0;
}

/* Arcadas */
.odo-arcada {
    margin-top: 0.5rem;
}
.odo-arcada__title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6e5d40;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

/* SVG base */
.odo-svg {
    max-width: 100%;
    height: auto;
    display: block;
    background: white;
    border-radius: 0.375rem;
    border: 1px solid #e2d8c6;
}

/* Surfaces — default (clickable polygons) */
.odo-surface {
    fill: white;
    stroke: none;
    cursor: pointer;
    transition: filter 0.12s, transform 0.12s;
}
.odo-surface:hover {
    filter: brightness(0.85);
}

/* Anatomical crown outline (decorative, no click) */
.odo-tooth-outline {
    pointer-events: none;
}

/* Cusp indicators (subtle markings on occlusal/incisal face) */
.odo-cusp {
    pointer-events: none;
    opacity: 0.55;
}

/* Root hint (gray dashed shape below crown) */
.odo-root {
    pointer-events: none;
    opacity: 0.7;
}

/* Findings */
.odo-surface[data-finding="endo_pulpar"]                  { fill: var(--odo-endo); }
.odo-surface[data-finding="caries_restoration_fracture"]  { fill: var(--odo-caries); }
.odo-surface[data-finding="missing_prosthesis"]           { fill: var(--odo-missing); }
.odo-surface[data-finding="clinical_symptom"]             { fill: var(--odo-symptom); }

/* Center surface (oclusal/incisal): outline slightly more prominent */
.odo-surface--center {
    stroke-width: 0.7;
}

/* Label */
.odo-label {
    fill: var(--odo-ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    user-select: none;
}

/* Tooth hover state */
.odo-tooth:hover .odo-label {
    fill: var(--odo-bronze);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .odontograma {
        background: #2a241c;
        border-color: #4a3f2e;
    }
    .odo-svg {
        background: #1f1a14;
        border-color: #4a3f2e;
    }
    .odo-surface {
        fill: #f7efe0;
    }
    .odo-tooth-outline {
        stroke: #c4b596 !important;
    }
    .odo-root {
        fill: #4a3f2e !important;
        stroke: #8a7960 !important;
        opacity: 0.85;
    }
    .odo-cusp {
        stroke: #a89572 !important;
        opacity: 0.6;
    }
    .odo-label {
        fill: #e8dfcb;
    }
    .odo-toolbar__label {
        color: #c9b794;
    }
    .odo-hint {
        color: #b09e7f;
    }
    .odo-toggle {
        background: #2a241c;
        color: #e8dfcb;
        border-color: #5d5142;
    }
    .odo-toggle:hover {
        background: #3c3329;
    }
    .odo-arcada__title {
        color: #c9b794;
    }
}