/* Radiología, «La mano en las estrellas», según el Manual de Uso
   y Estilo CUI.DATE v2.0:
   - Würzburg de noche es del morado de marca: las lomas y la fortaleza, los
     tejados del medio con sus torres y los de adelante son sombras de
     #4E1581, cada capa más oscura que la de atrás y todas más oscuras que el
     cielo. Sus degradados están en doodle.js.
   - Tokens del manual (§08): #FFFFFF para los núcleos de las estrellas más
     brillantes y el mensaje; #E3D2F5 para las demás estrellas, los huesos, la
     silueta de la mano, la luna, el rótulo y el mensaje; #B6A6C9 para los
     filos de los tejados, las terrazas de las viñas y las ventanas apagadas.
   - Excepción (§15), la de la física del descubrimiento, ya usada en el
     doodle actual: el amarillo verdoso de la pantalla de platinocianuro,
     #EAF7A0, con su tinte #F7FFC8. Va solo en la ventana del laboratorio (la
     pantalla que brilla en el cuarto oscuro), en el anillo y en dos
     estrellas clave (la punta del dedo medio y la del pulgar). El color no
     lleva solo el significado: la ventana es la única encendida y tiene halo;
     el anillo es un círculo de estrellas que destella al final.
   - Riqueza sin costo: la luz son degradados radiales de SVG, sin filtros;
     nada se desenfoca cuadro a cuadro.
   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. */
body.doodle-dia-radiologia-estrellas .doodle-capa {
    opacity: 1;
}

/* Las estrellas del fondo: muchas, chicas y quietas, en tres brillos. */
body.doodle-dia-radiologia-estrellas .rxd-fondo {
    fill: #E3D2F5;
}

body.doodle-dia-radiologia-estrellas .rxd-f1 {
    fill-opacity: 0.26;
}

body.doodle-dia-radiologia-estrellas .rxd-f2 {
    fill-opacity: 0.45;
}

body.doodle-dia-radiologia-estrellas .rxd-f3 {
    fill-opacity: 0.62;
}

/* La luna creciente y su parte en sombra, apenas visible. */
body.doodle-dia-radiologia-estrellas .rxd-luna-creciente {
    fill: #E3D2F5;
    fill-opacity: 0.9;
}

body.doodle-dia-radiologia-estrellas .rxd-luna-cenicienta {
    fill: #E3D2F5;
    fill-opacity: 0.08;
}

/* La silueta de la mano: la sombra de la piel en la placa. Las formas son
   opacas dentro de un grupo tenue, así que donde se cruzan no se suman. */
body.doodle-dia-radiologia-estrellas .rxd-piel {
    opacity: 0.06;
}

body.doodle-dia-radiologia-estrellas .rxd-piel-dedo,
body.doodle-dia-radiologia-estrellas .rxd-piel-palma {
    fill: none;
    stroke: #E3D2F5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-estrellas .rxd-piel-palma {
    fill: #E3D2F5;
}

/* Los huesos: líneas finas de luz entre las estrellas. */
body.doodle-dia-radiologia-estrellas .rxd-hueso {
    fill: none;
    stroke: #E3D2F5;
    stroke-opacity: 0.5;
    stroke-width: 1.2;
    stroke-linecap: round;
}

/* Los núcleos de las estrellas de la mano. */
body.doodle-dia-radiologia-estrellas .rxd-b {
    fill: #FFFFFF;
}

body.doodle-dia-radiologia-estrellas .rxd-l {
    fill: #E3D2F5;
}

body.doodle-dia-radiologia-estrellas .rxd-rx {
    fill: #F7FFC8;
}

/* Los destellos de cada grupo: florecen y se apagan. */
body.doodle-dia-radiologia-estrellas .rxd-destellos {
    opacity: 0;
}

/* El anillo: un círculo de estrellas con su banda y un destello al frente. */
body.doodle-dia-radiologia-estrellas #rxd-anillo {
    transform-box: fill-box;
    transform-origin: center;
}

body.doodle-dia-radiologia-estrellas .rxd-anillo-banda {
    fill: none;
    stroke: #EAF7A0;
    stroke-opacity: 0.55;
    stroke-width: 1.2;
}

body.doodle-dia-radiologia-estrellas .rxd-anillo-estrella {
    fill: #F7FFC8;
}

body.doodle-dia-radiologia-estrellas .rxd-atras {
    fill-opacity: 0.6;
}

body.doodle-dia-radiologia-estrellas .rxd-chispa {
    fill: #F7FFC8;
}

/* El rótulo: la familia del login, chico y en frase, sobre el #4E1581
   (#E3D2F5 da 7,6:1). */
body.doodle-dia-radiologia-estrellas .rxd-rotulo {
    fill: #E3D2F5;
    font-family: webToth-Book, sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* El filo de las lomas, los bordes de los techos y las terrazas de las
   viñas: un filo de luz del cielo sobre la silueta. */
body.doodle-dia-radiologia-estrellas .rxd-cresta {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.2;
    stroke-width: 1;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-estrellas .rxd-techos {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.18;
    stroke-width: 1;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-estrellas .rxd-techos-lejos {
    stroke-opacity: 0.22;
}

body.doodle-dia-radiologia-estrellas .rxd-techos-cerca {
    stroke-opacity: 0.12;
}

body.doodle-dia-radiologia-estrellas .rxd-terrazas {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.1;
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

/* Los remates de las torres y la cruz de las cúpulas. */
body.doodle-dia-radiologia-estrellas .rxd-agujas {
    fill: none;
    stroke: #30105A;
    stroke-width: 1.4;
    stroke-linecap: round;
}

/* Ventanas apagadas: apenas se adivinan. */
body.doodle-dia-radiologia-estrellas .rxd-ventanas {
    fill: #B6A6C9;
    fill-opacity: 0.08;
}

body.doodle-dia-radiologia-estrellas .rxd-ventanas-medio {
    fill-opacity: 0.07;
}

body.doodle-dia-radiologia-estrellas .rxd-ventanas-lejos {
    fill-opacity: 0.1;
}

/* La ventana del laboratorio, con su cruz de marco a contraluz. */
body.doodle-dia-radiologia-estrellas .rxd-marco {
    fill: none;
    stroke: #230840;
    stroke-opacity: 0.7;
    stroke-width: 1;
}

/* Los halos de la ventana crecen desde ella. */
body.doodle-dia-radiologia-estrellas .rxd-halo-lab {
    transform-box: fill-box;
    transform-origin: center;
}

/* 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-estrellas .doodle-rxd-mensaje {
    position: relative;
    z-index: 1;
    margin-top: 2.4rem;
    text-align: center;
    pointer-events: none;
}

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

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