/* Día Mundial de la Diabetes, según el Manual de Uso y Estilo CUI.DATE v2.0:
   - Tokens del manual para texto sobre fondo oscuro (§08): #FFFFFF para el
     trazo en rango, el valor y «ahora»; #E3D2F5 para los rótulos, la franja y
     el trazo desde el diagnóstico; #B6A6C9 para la línea del pie, los días,
     las marcas y el trazo mientras va alto.
   - El trazo cuenta la historia con su color (su degradado está en doodle.js)
     y también con su forma y su lugar respecto de la franja, y los rótulos lo
     dicen: el color nunca va solo. Alto y en rango se distinguen por
     luminosidad (#B6A6C9 contra #FFFFFF, ΔE 25 con el validador de dataviz).
   - Excepción (§15): el azul del círculo de la Federación Internacional de
     Diabetes (#8FCBF2), el símbolo mundial de la diabetes, con un tinte
     (#CFEAFB) y una sombra (#5FA9DD) para el degradado del círculo. Va en el
     final del trazo, el círculo y su halo. #8FCBF2 da 5,4:1 sobre #5C2B93.
     Necesita visto bueno de diseño.
   - Riqueza sin costo: la luz son degradados de SVG y un segundo trazo ancho
     y tenue, sin filtros, así que nada se desenfoca cuadro a cuadro. Los
     trazos (línea, días, marcas) tienen grosor fijo (§10).
   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-mundial-diabetes .doodle-capa {
    opacity: 1;
}

.ddb-linea,
.ddb-borde,
.ddb-dias,
.ddb-trazo,
.ddb-trazo-brillo,
.ddb-marca,
.ddb-lazo,
.ddb-lazo-brillo {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* La línea del pie, que es el borde de 70 mg/dL de la franja, crece desde la
   izquierda con transform; sus días aparecen a su paso. */
.ddb-linea {
    stroke: #B6A6C9;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: 0 50%;
}

.ddb-dias {
    stroke: #B6A6C9;
    stroke-width: 1.5;
}

/* La franja de 70 a 180 mg/dL, el rango que se busca: un paso de tono con su
   borde de 180 punteado (el de 70 es la línea del pie). */
.ddb-franja {
    fill: #E3D2F5;
    fill-opacity: 0.08;
}

.ddb-borde {
    stroke: #E3D2F5;
    stroke-opacity: 0.4;
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

/* El trazo de luz: su color es el degradado del atributo stroke (acá no se le
   pone otro, que lo pisaría). El brillo es el mismo trazo, ancho y tenue. */
.ddb-trazo {
    stroke-width: 2.8;
}

.ddb-trazo-brillo {
    stroke-width: 11;
    stroke-opacity: 0.16;
}

/* La lectura viva, en la punta mientras el monitor escribe; al final queda en
   la última lectura, donde empieza el círculo. */
.ddb-viva {
    fill: #FFFFFF;
}

/* El círculo que dibuja la línea en ahora. pathLength="1" en el SVG: el guion
   cubre todo el contorno y la animación lo corre de 1 a 0. */
.ddb-lazo {
    stroke-width: 4.5;
    stroke-dasharray: 1 2;
}

.ddb-lazo-brillo {
    stroke: #8FCBF2;
    stroke-opacity: 0.18;
    stroke-width: 13;
    stroke-dasharray: 1 2;
}

/* El valor de ahora: el número en la tipografía del manual (Officina Sans
   Bold, la del login), más chico que el mensaje para no competirle. */
.ddb-numero {
    fill: #FFFFFF;
    font-family: webToth-Bold, sans-serif;
}

.ddb-numero-chico {
    font-size: 28px;
}

.ddb-unidad {
    fill: #E3D2F5;
    font-size: 13px;
}

.ddb-marca {
    stroke: #B6A6C9;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.ddb-marca-ahora {
    stroke: #FFFFFF;
}

/* Rótulos: la familia del login, a 12 px, como en el de la radiología. Al
   pie, sobre el #5C2B93, #E3D2F5 da 6,66:1 (#B6A6C9 no pasaría AA). «ahora»
   en blanco, como «hoy» en el de la radiología. */
.ddb-rotulo {
    fill: #E3D2F5;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.ddb-rotulo-ahora {
    fill: #FFFFFF;
}

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

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

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