/* Radiología, «Ver por dentro», según el Manual de Uso y Estilo
   CUI.DATE v2.0:
   - La calle al atardecer es del morado de marca: los edificios de atrás, las
     fachadas, la vereda y la gente son sombras de #4E1581, cada plano más
     oscuro que el de atrás y todos más oscuros que el cielo. Sus degradados
     están en doodle.js.
   - Tokens del manual (§08): #E3D2F5 para el resplandor del atardecer y el
     mensaje; #B6A6C9 para los filos (techos, cordón de la vereda, el borde de
     luz sobre las siluetas) y las ventanas apagadas; #FFFFFF para el mensaje.
   - Excepciones (§15):
       · los colores de la física del descubrimiento, ya usados en la
         radiología: el verde manzana #B8F7A8 (la fluorescencia del vidrio del
         tubo) y el amarillo verdoso #EAF7A0 (la pantalla de platinocianuro),
         con sus tintes #C8F7A4 y #F3FBCB; van solo en el haz, en los huesos y
         en el metal que la luz deja ver;
       · la luz tibia de unas pocas ventanas y vitrinas, #FFE6B8 con un tinte
         (#FFF1D6) y una sombra (#FFD49A), la misma del Día del Médico: la
         calle está habitada; va tenue para no competir con el haz.
     El color no lleva solo el significado: los esqueletos se encienden
     porque el haz pasa por ellos (causa y efecto en el movimiento), y en
     reposo se leen por su forma. Necesita visto bueno de diseño.
   - Riqueza sin costo: la luz son degradados de SVG (la banda del haz, su
     charco, el atardecer), sin filtros; el brillo de los huesos es un trazo
     ancho y tenue debajo de cada hueso.
   El estado final de cada elemento es el de este CSS: doodle.js solo anima la
   entrada, así que sin JS de animación (o con prefers-reduced-motion) se ve
   la escena completa y quieta, con los esqueletos tenues y sin el haz. */
body.doodle-dia-radiologia-ver-por-dentro .doodle-capa {
    opacity: 1;
}

/* El filo de cada techo, una línea de luz del cielo. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-techos {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.18;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-techos-cerca {
    stroke-opacity: 0.13;
}

/* Ventanas apagadas: apenas se adivinan. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-apagadas {
    fill: #B6A6C9;
    fill-opacity: 0.07;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-apagadas-lejos {
    fill-opacity: 0.05;
}

/* Las pocas ventanas encendidas: tres tonos de luz tibia y tres niveles. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-t1 {
    fill: #FFE6B8;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-t2 {
    fill: #FFF1D6;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-t3 {
    fill: #FFD49A;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-n1 {
    fill-opacity: 0.3;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-n2 {
    fill-opacity: 0.48;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-n3 {
    fill-opacity: 0.66;
}

/* Las vitrinas encendidas de la calle, detrás de la gente. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-vitrina {
    fill: #FFE6B8;
    fill-opacity: 0.15;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-cordon {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.2;
    stroke-width: 1;
}

/* La gente: siluetas del morado más oscuro. Brazos y piernas del lado de
   atrás un tono más claros, para que se lea el paso. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-sil {
    fill: #10021F;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-sil-lejos {
    fill: #200939;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-trazo {
    fill: none;
    stroke: #10021F;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* El filo de luz sobre las siluetas: la misma silueta, un píxel más arriba
   y detrás, en lila. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-borde {
    opacity: 0.4;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-borde path {
    fill: #B6A6C9;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-borde .rxc-trazo {
    fill: none;
    stroke: #B6A6C9;
}

/* Los esqueletos en reposo: trazos finos y tenues; lo invisible queda a la
   vista sin ganarle a la gente. */
body.doodle-dia-radiologia-ver-por-dentro #rxc-reposo {
    opacity: 0.5;
}

/* El destello de cada escena cuando pasa el haz: al final ya se apagó. */
body.doodle-dia-radiologia-ver-por-dentro .rxc-destello {
    opacity: 0;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-piel {
    fill: #B8F7A8;
    fill-opacity: 0.12;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-halo {
    fill: none;
    stroke: #B8F7A8;
    stroke-opacity: 0.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-relleno {
    fill: #EAF7A0;
    fill-opacity: 0.22;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-hueso,
body.doodle-dia-radiologia-ver-por-dentro .rxc-columna {
    fill: none;
    stroke: #EAF7A0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-lejano {
    stroke-opacity: 0.55;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-claro {
    stroke: #F3FBCB;
    stroke-opacity: 1;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-metal {
    fill: none;
    stroke: #B8F7A8;
    stroke-opacity: 0.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-fino {
    stroke-opacity: 0.45;
}

/* El haz: al final ya pasó (doodle.js lo cruza por la pantalla). */
body.doodle-dia-radiologia-ver-por-dentro #rxc-haz {
    opacity: 0;
}

body.doodle-dia-radiologia-ver-por-dentro .rxc-nucleo {
    fill: #F3FBCB;
    fill-opacity: 0.55;
}

/* El mensaje va DEBAJO del formulario, fuera de él (es un hermano en el body),
   así que el flex del body lo acomoda solo en cualquier pantalla. */
body.doodle-dia-radiologia-ver-por-dentro .doodle-rxc-mensaje {
    position: relative;
    z-index: 1;
    margin-top: 2.4rem;
    text-align: center;
    pointer-events: none;
}

body.doodle-dia-radiologia-ver-por-dentro .doodle-rxc-mensaje strong {
    display: block;
    color: #FFFFFF;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}

body.doodle-dia-radiologia-ver-por-dentro .doodle-rxc-mensaje span {
    display: block;
    margin-top: 0.4rem;
    color: #E3D2F5;
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
}