/* Radiología, «De 1895 a hoy», según el Manual de Uso y Estilo
   CUI.DATE v2.0:
   - La sala es del morado de marca: el hospital del fondo, las máquinas del
     medio y las de adelante 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 los años, los filos de luz del
     cielo, el vidrio del tubo y la luz lila del escáner y del resonador;
     #B6A6C9 para los bordes, las ventanas apagadas y los detalles; #FFFFFF
     para el mensaje, el campo de luz del colimador y la chispa.
   - Excepciones (§15):
       · la física del descubrimiento (ya usada en el doodle actual): el verde
         manzana del vidrio del tubo, #B8F7A8, con su tinte #E4FFD6, y el
         amarillo verdoso de la pantalla de platinocianuro, #EAF7A0, con su
         tinte #F7FFC8 y su sombra #C9E07A;
       · la luz fría de las pantallas de hoy (la misma del Día del Médico):
         #F2F6FF, #DCE7FF y #C9D9F7, solo en el ecógrafo, los monitores, la
         lámpara y la luz sobre quien informa;
       · las sombras de las imágenes en las pantallas: #3B0F66 y #1A0A33.
     El color no lleva solo el significado: cada máquina se reconoce por su
     forma y las que tienen año lo llevan escrito al pie. Necesita visto
     bueno de diseño.
   - Riqueza sin costo: la luz son degradados de SVG (halos radiales), 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-1895-hoy .doodle-capa {
    opacity: 1;
}

/* El hospital del fondo: ventanas apagadas, la arcada en sombra y el filo de
   sus techos, que toma un poco de luz del cielo. */
body.doodle-dia-radiologia-1895-hoy .rxb-ventanas {
    fill: #B6A6C9;
    fill-opacity: 0.07;
}

body.doodle-dia-radiologia-1895-hoy .rxb-arcada {
    fill: #1E0640;
    fill-opacity: 0.5;
}

body.doodle-dia-radiologia-1895-hoy .rxb-bordes {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.2;
    stroke-width: 1;
}

/* El piso: el horizonte donde apoya el hospital y la línea por donde corre
   el hilo, apenas marcados. */
body.doodle-dia-radiologia-1895-hoy .rxb-horizonte,
body.doodle-dia-radiologia-1895-hoy .rxb-linea-piso {
    fill: none;
    stroke: #B6A6C9;
    stroke-opacity: 0.12;
    stroke-width: 1;
}

/* Las máquinas: el filo de luz del cielo arriba, los detalles y los cables
   apenas marcados, los vidrios apagados oscuros. Trazos de 1 px aunque la
   máquina se escale. */
body.doodle-dia-radiologia-1895-hoy .rxb-filo,
body.doodle-dia-radiologia-1895-hoy .rxb-det,
body.doodle-dia-radiologia-1895-hoy .rxb-cable,
body.doodle-dia-radiologia-1895-hoy .rxb-brillo,
body.doodle-dia-radiologia-1895-hoy .rxb-sombra,
body.doodle-dia-radiologia-1895-hoy .rxb-columna,
body.doodle-dia-radiologia-1895-hoy .rxb-filo-frio {
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

body.doodle-dia-radiologia-1895-hoy .rxb-filo {
    stroke: #E3D2F5;
    stroke-opacity: 0.3;
}

body.doodle-dia-radiologia-1895-hoy .rxb-det {
    stroke: #B6A6C9;
    stroke-opacity: 0.16;
}

body.doodle-dia-radiologia-1895-hoy .rxb-cable {
    stroke: #B6A6C9;
    stroke-opacity: 0.4;
}

body.doodle-dia-radiologia-1895-hoy .rxb-varilla {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.doodle-dia-radiologia-1895-hoy .rxb-osc {
    fill: #12022A;
    stroke: #B6A6C9;
    stroke-opacity: 0.14;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* La cara del resonador alrededor del túnel, un poco más clara. */
body.doodle-dia-radiologia-1895-hoy .rxb-cara {
    fill: #E3D2F5;
    fill-opacity: 0.07;
}

/* El tubo de Crookes es de vidrio: un velo lila casi transparente, su borde
   y un reflejo arriba. */
body.doodle-dia-radiologia-1895-hoy .rxb-vidrio {
    fill: #E3D2F5;
    fill-opacity: 0.07;
    stroke: #E3D2F5;
    stroke-opacity: 0.45;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

body.doodle-dia-radiologia-1895-hoy .rxb-brillo {
    stroke: #FFFFFF;
    stroke-opacity: 0.5;
}

/* Las imágenes en las pantallas: el tórax en el fluoroscopio y en el
   monitor, y la luz de las pantallas sobre quien informa. */
body.doodle-dia-radiologia-1895-hoy .rxb-sombra {
    stroke: #3B0F66;
    stroke-opacity: 0.45;
}

body.doodle-dia-radiologia-1895-hoy .rxb-columna {
    stroke: #F2F6FF;
    stroke-opacity: 0.6;
}

body.doodle-dia-radiologia-1895-hoy .rxb-filo-frio {
    stroke: #F2F6FF;
    stroke-opacity: 0.75;
}

/* Los halos crecen desde su luz. */
body.doodle-dia-radiologia-1895-hoy .rxb-halo {
    transform-box: fill-box;
    transform-origin: center;
}

/* El reflejo en el piso, más tenue que su halo (en fill-opacity: la opacidad
   del elemento es la que anima su entrada). */
body.doodle-dia-radiologia-1895-hoy .rxb-reflejo {
    fill-opacity: 0.55;
}

/* La chispa solo existe mientras corre el hilo: al final no está. */
body.doodle-dia-radiologia-1895-hoy #rxb-chispa {
    opacity: 0;
}

/* Los años, al pie de cada máquina: la familia del login, en frase. Sobre el
   piso oscuro #E3D2F5 a 12 px pasa AA de sobra. */
body.doodle-dia-radiologia-1895-hoy .rxb-anio {
    fill: #E3D2F5;
    font-family: webToth-Book, sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
}

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

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

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