/* Día del Tecnólogo Médico, ajustado al Manual de Uso y Estilo CUI.DATE v2.0:
   - Solo colores del manual. Sobre el morado institucional se usan los tokens
     de texto del modo oscuro (§08): #E3D2F5 (texto) y #B6A6C9 (muted), más
     #FFFFFF para lo de mayor jerarquía. Nada de colores nuevos (§15).
   - Estilo de línea como la iconografía y el isotipo (§10): solo contorno, sin
     relleno, trazo de 2px fijo aunque la escena se escale.
   - Jerarquía: la tecnóloga en blanco (protagonista), el paciente en #E3D2F5 y
     el equipo en #B6A6C9. */
body.doodle-dia-tecnologo-medico .doodle-capa {
    opacity: 1;
}

.dtm-q,
.dtm-tm,
.dtm-pa,
.dtm-img,
.dtm-haz {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.dtm-q   { stroke: #B6A6C9; }
.dtm-pa  { stroke: #E3D2F5; }
.dtm-tm  { stroke: #FFFFFF; }
.dtm-img { stroke: #E3D2F5; }
.dtm-haz { stroke: #FFFFFF; stroke-width: 3; }
.dtm-tenue { stroke-opacity: 0.5; }

.dtm-pista { fill: #B6A6C9; fill-opacity: 0.35; }
.dtm-barra { fill: #E3D2F5; }

/* Rótulos de las esquinas: familia sans-serif del manual (§03), en #B6A6C9
   sólido para pasar AA sobre #4E1581 (~5:1). */
.dtm-ann {
    fill: #B6A6C9;
    font-family: Inter, Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.04em;
}

/* El saludo 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. */
.doodle-tm-mensaje {
    position: relative;
    z-index: 1;
    margin-top: 2.4rem;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.doodle-tm-mensaje.visible {
    opacity: 1;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .doodle-tm-mensaje { transition: none; }
}