/* ── Atlas de Anatomia — viewer interativo compartilhado ──────────────────
   Usado tanto pelo botão "Testar conhecimento" (atlas-anatomia.html) quanto
   pelo Modo Atlas do simulado (simulado.html). Mesma moldura visual do
   grid estático em atlas-anatomia.html, só que aqui a imagem fica dentro de
   um "stage" posicionado pra caber as caixinhas de resposta (.av-mask). */
:root {
    --av-gold: #E8C468;
    --av-mat: #EFE9DC;
}
[data-theme="light"] { --av-mat: #F7F3E8; }

.av-frame {
    background: var(--av-mat);
    border-radius: 6px;
    padding: 1rem;
    box-shadow:
        0 0 0 1px rgba(232,196,104,0.55),
        0 0 0 6px #0B2B26,
        0 0 0 7px rgba(232,196,104,0.4),
        0 20px 44px rgba(0,0,0,0.35);
}
.av-stage {
    position: relative;
    width: 100%;
    line-height: 0;
}
.av-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

.av-mask {
    position: absolute;
    background: var(--av-mat);
    border: 1px solid rgba(11,43,38,0.25);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.av-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    text-align: center;
    font-family: var(--font-heading), serif;
    font-weight: 600;
    color: rgb(30,50,42);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 0 4px;
    min-width: 0;
}
.av-mask:focus-within {
    border-color: rgba(78,204,163,0.7);
    box-shadow: 0 0 0 2px rgba(78,204,163,0.25);
}
.av-mask.av-solved {
    background: #DCEFE3;
    border-color: rgba(49,163,107,0.55);
}
[data-theme="light"] .av-mask.av-solved { background: #E1F2E8; }
.av-mask.av-solved .av-input {
    color: rgb(20,90,60);
}
.av-check {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #31A36B;
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.av-mask.av-solved .av-check {
    display: flex;
}

.av-progress {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: rgba(var(--rgb-light), 0.7);
}
.av-progress strong {
    color: var(--color-lightest);
}

@media (max-width: 560px) {
    .av-frame { padding: 0.6rem; border-radius: 5px; }
    .av-check { width: 16px; height: 16px; top: -6px; right: -6px; }
    .av-check svg { width: 10px; height: 10px; }
}