@jjlmoya/utils-babies 1.4.0 → 1.6.0

package/src/tool/pregnancy-calculator/milestones.ts

@@ -1,150 +1,6 @@
-export interface Milestone {
-  analogies: { fruits: string; geek: string; sweets: string };
-  size: string;
-  biolook: string;
-  mom: string;
-  partner: string;
-  symptoms: string[];
-  alerts: string[];
-  wonder: string;
-}
-
-export const milestones: Record<number, Milestone> = {
-  4: {
-    analogies: { fruits: 'Semilla de amapola', geek: 'Píxel solitario', sweets: 'Granito de azúcar' },
-    size: '~1 mm',
-    biolook: 'El blastocisto se implanta en el endometrio. Aparecen las tres capas embrionarias que formarán todos tus órganos.',
-    mom: 'Tu cuerpo aún no sabe que está embarazada, pero ya produce hCG. Quizá sientas un leve sangrado de implantación.',
-    partner: 'Puede que ella esté más cansada de lo habitual sin saber por qué. Es buen momento para cocinar su cena favorita.',
-    symptoms: ['Fatiga temprana', 'Tensión en el pecho', 'Ligero sangrado de implantación'],
-    alerts: ['Sangrado abundante rojo', 'Dolor pélvico agudo', 'Fiebre mayor de 38 grados'],
-    wonder: 'En este momento se decide si habrá uno o dos bebés.'
-  },
-  6: {
-    analogies: { fruits: 'Lenteja', geek: 'LED parpadeante', sweets: 'Lacasito' },
-    size: '~6 mm',
-    biolook: 'El corazón empieza a latir de forma irregular pero visible en ecografía. El tubo neural se cierra.',
-    mom: 'Las náuseas matutinas pueden comenzar ahora.',
-    partner: 'El olfato de ella se vuelve sobrehumano. Evita perfumes fuertes y cocinar pescado en casa.',
-    symptoms: ['Náuseas', 'Hipersensibilidad al olfato', 'Somnolencia extrema'],
-    alerts: ['Ausencia de latido en eco vaginal', 'Manchado oscuro persistente', 'Vómitos sin retención'],
-    wonder: 'Ya tiene la misma estructura cerebral básica que tendrá de adulto.'
-  },
-  8: {
-    analogies: { fruits: 'Frambuesa', geek: 'Memoria USB nano', sweets: 'Gominola de oso' },
-    size: '~18 mm',
-    biolook: 'Los dedos de manos y pies se separan. Los párpados cubren los ojos. El corazón late 150-170 veces por minuto.',
-    mom: 'Tu útero tiene el tamaño de un pomelo. Las náuseas están en su punto álgido.',
-    partner: 'Ella puede necesitar dormir 10-12 horas. Asume las tareas del hogar.',
-    symptoms: ['Náuseas intensas', 'Aumento de saliva', 'Micción muy frecuente'],
-    alerts: ['Vómitos incoercibles', 'Manchado oscuro', 'Dolor lumbar intenso'],
-    wonder: 'Si tocas la barriga de ella, él ya reacciona y se mueve.'
-  },
-  10: {
-    analogies: { fruits: 'Kumquat', geek: 'AirPod', sweets: 'Macarón' },
-    size: '~31 mm',
-    biolook: 'Técnicamente ya es un feto. Todos los órganos existen en forma rudimentaria. Las uñas empiezan a crecer.',
-    mom: 'Tu cintura empieza a ensancharse.',
-    partner: 'Acompáñala a la primera consulta del primer trimestre.',
-    symptoms: ['Hinchazón abdominal', 'Cambios bruscos de humor', 'Piel más sensible al sol'],
-    alerts: ['Pérdida de líquido claro', 'Calambres uterinos intensos', 'Fiebre sin causa aparente'],
-    wonder: 'Ya tiene su propio tipo de sangre, diferente al de su madre.'
-  },
-  12: {
-    analogies: { fruits: 'Ciruela', geek: 'Ratón inalámbrico', sweets: 'Mochi de fresa' },
-    size: '~55 mm',
-    biolook: 'Los órganos principales están formados. El bebé empieza a practicar movimientos de deglución.',
-    mom: 'El riesgo de aborto espontáneo cae drásticamente.',
-    partner: 'El segundo trimestre se acerca. El cansancio de ella mejorará pronto.',
-    symptoms: ['Reducción de las náuseas', 'Piel más luminosa o con manchas', 'Dolores de cabeza'],
-    alerts: ['Pérdida de líquido', 'Calambres fuertes', 'Fiebre persistente'],
-    wonder: 'Sus reflejos ya funcionan: si le tocas la palma de la mano, cierra el puño.'
-  },
-  16: {
-    analogies: { fruits: 'Aguacate', geek: 'Mando de PS5', sweets: 'Berlina de chocolate' },
-    size: '~12 cm',
-    biolook: 'Las orejas están en su posición final. El esqueleto de cartílago se convierte en hueso.',
-    mom: 'Muchas mamás sienten los primeros movimientos. La energía vuelve.',
-    partner: 'Puede que empiece a sentir pequeños movimientos.',
-    symptoms: ['Ardor de estómago leve', 'Congestión nasal', 'Sueños muy vividos'],
-    alerts: ['Ausencia total de movimientos fetales', 'Tensión alta', 'Sangrado vaginal'],
-    wonder: 'Si es niña, ya tiene 6 millones de óvulos en sus ovarios.'
-  },
-  20: {
-    analogies: { fruits: 'Plátano', geek: 'Consola de juegos portátil', sweets: 'Tarta de queso entera' },
-    size: '~25 cm',
-    biolook: 'El bebé ya oye tu voz con claridad. Se chupa el dedo.',
-    mom: 'Semana 20, ecuador. Es el momento de la ecografía morfológica.',
-    partner: 'Habla al bebé. Ya te oye.',
-    symptoms: ['Ardor de estómago frecuente', 'Hinchazón de pies al final del día', 'Picor en la piel del abdomen'],
-    alerts: ['Falta de movimientos fetales', 'Tensión arterial alta sostenida', 'Visión borrosa o con destellos'],
-    wonder: 'Sus huellas dactilares ya están completas y son únicas en el universo.'
-  },
-  24: {
-    analogies: { fruits: 'Mazorca de maíz', geek: 'Teclado mecánico', sweets: 'Donut gigante' },
-    size: '~30 cm',
-    biolook: 'Los pulmones producen surfactante. Los ojos empiezan a abrirse.',
-    mom: 'Tu útero llega al ombligo. La espalda puede empezar a resentirse.',
-    partner: 'Aprende los signos de parto pretérmino.',
-    symptoms: ['Dolor de espalda baja', 'Calambres en las piernas por la noche', 'Línea negra en el abdomen'],
-    alerts: ['Contracciones regulares antes de la semana 37', 'Pérdida de líquido amniótico', 'Sangrado vaginal'],
-    wonder: 'Si nace ahora, con cuidados intensivos, tiene posibilidades de sobrevivir.'
-  },
-  28: {
-    analogies: { fruits: 'Berenjena', geek: 'Tableta gráfica', sweets: 'Tarta de tres pisos' },
-    size: '~37 cm',
-    biolook: 'El bebé abre y cierra los ojos. Tiene ciclos de sueño y vigilia.',
-    mom: 'Empieza el tercer trimestre. La prueba de glucosa es ahora.',
-    partner: 'El insomnio puede agotarla. Acompáñala.',
-    symptoms: ['Insomnio y dificultad para encontrar postura', 'Hinchazón de manos y pies', 'Contracciones Braxton Hicks esporádicas'],
-    alerts: ['Reducción marcada de movimientos fetales', 'Dolor de cabeza intenso que no cede', 'Visión con luces o moscas'],
-    wonder: 'Ya tiene un sabor favorito.'
-  },
-  32: {
-    analogies: { fruits: 'Calabaza mediana', geek: 'Teclado de 60%', sweets: 'Caja de bombones entera' },
-    size: '~42 cm',
-    biolook: 'Practica la respiración. Sus pulmones están casi listos para el mundo exterior.',
-    mom: 'Recuperar el aliento es difícil. El bebé presiona el diafragma.',
-    partner: 'Prepara la bolsa del hospital.',
-    symptoms: ['Falta de aliento al esfuerzo mínimo', 'Hemorroides', 'Pérdida de orina al reír o toser'],
-    alerts: ['Picor intenso en palmas de manos y plantas de pies', 'Contracciones regulares', 'Dolor en boca del estómago con náuseas'],
-    wonder: 'Ya gira la cabeza hacia la luz que atraviesa la barriga de su madre.'
-  },
-  36: {
-    analogies: { fruits: 'Melón cantalupo', geek: 'Portátil de 15 pulgadas', sweets: 'Tarta de cumpleaños' },
-    size: '~47 cm',
-    biolook: 'El bebé suele encajarse cabeza abajo. Sus pulmones están casi maduros.',
-    mom: 'Sientes presión en la pelvis al encajarse el bebé.',
-    partner: 'El plan de parto debería estar listo.',
-    symptoms: ['Presión pélvica intensa', 'Vuelta del ardor de estómago', 'Ansiedad anticipatoria'],
-    alerts: ['Rotura de bolsa', 'Sangrado vaginal rojo', 'Ausencia de movimientos fetales'],
-    wonder: 'Ya tiene las uñas tan largas que podría arañarse al nacer.'
-  },
-  40: {
-    analogies: { fruits: 'Sandía', geek: 'PC de sobremesa completo', sweets: 'Tarta nupcial de 3 pisos' },
-    size: '~50 cm',
-    biolook: 'Todo está listo. Sus reflejos están coordinados, sus pulmones maduros, su cerebro activo.',
-    mom: 'El cansancio es máximo. Eres increíble.',
-    partner: 'Hoy puede que sea el día. Mantén el teléfono cargado y la calma que ella necesita de ti.',
-    symptoms: ['Presión pélvica muy intensa', 'Pérdida del tapón mucoso', 'Contracciones irregulares'],
-    alerts: ['Contracciones regulares cada 5 minutos durante 1 hora', 'Rotura de bolsa', 'Ausencia de movimientos'],
-    wonder: 'Su cerebro ha creado 100 mil millones de neuronas durante estos 9 meses.'
-  }
-};
-
-export const timelineLabels: Record<number, string> = {
-  4: 'Implantación', 5: 'Latido', 6: 'Corazón late', 7: 'Ojos y oídos',
-  8: 'Dedos', 9: 'Uñas', 10: 'Ya es feto', 11: 'Movimientos',
-  12: 'Triple Screening', 13: '2º Trimestre', 14: 'Cuello de útero', 15: 'Patadas',
-  16: 'Oye voces', 17: 'Grasa corporal', 18: 'Genitales visibles', 19: 'Vérnix',
-  20: 'Eco morfológica', 21: 'Huellas dactilares', 22: 'Labios formados', 23: 'Párpados',
-  24: 'Ojos se abren', 25: 'Capilares', 26: 'Reflejos', 27: 'Cerebro activo',
-  28: '3er Trimestre', 29: 'Huesos fuertes', 30: 'Médula ósea', 31: 'Surfactante',
-  32: 'Practica respirar', 33: 'Inmunidad', 34: 'Sistema nervioso', 35: 'Encajamiento',
-  36: 'Pulmones maduros', 37: 'A término', 38: 'Preparado', 39: 'Esperando', 40: 'Llegó el día'
-};
+import type { MilestoneI18n } from './index';
 
-export function getMilestone(week: number): Milestone {
+export function getMilestone(week: number, milestones: Record<number, MilestoneI18n>): MilestoneI18n {
   const keys = Object.keys(milestones).map(Number).sort((a, b) => b - a);
   for (const k of keys) {
     if (week >= k) return milestones[k]!;

package/src/tool/vaccination-calendar/component.astro

@@ -1,5 +1,4 @@
 ---
-import './style.css';
 import type { VaccinationCalendarUI } from './index';
 interface Props { ui: VaccinationCalendarUI; }
 const { ui } = Astro.props;
@@ -64,7 +63,7 @@ const { ui } = Astro.props;
   import type { DoseGroup } from './logic';
 
   const root = document.getElementById('vc-root') as HTMLElement;
-  const ui = JSON.parse(root.dataset.ui as string) as Record<string, string>;
+  const ui = root.dataset.ui ? JSON.parse(root.dataset.ui) : {} as Record<string, string>;
 
   const ddInput = document.getElementById('vc-dd') as HTMLInputElement;
   const mmInput = document.getElementById('vc-mm') as HTMLInputElement;
@@ -81,7 +80,7 @@ const { ui } = Astro.props;
   const btnReminder = document.getElementById('vc-btn-reminder') as HTMLButtonElement;
   const shareLink = document.getElementById('vc-share-link') as HTMLAnchorElement;
 
-  const doseGroups = buildDoseGroups();
+  const doseGroups = buildDoseGroups(ui);
   let currentBirthDate: Date | null = null;
 
   function parseInputDate(): Date | null {
@@ -100,7 +99,8 @@ const { ui } = Astro.props;
   }
 
   function formatDate(date: Date): string {
-    return new Intl.DateTimeFormat('es-ES', { day: '2-digit', month: 'long', year: 'numeric' }).format(date);
+    const locale = document.documentElement.lang || 'es-ES';
+    return new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'long', year: 'numeric' }).format(date);
   }
 
   function buildTimelineRow(group: DoseGroup, _birthDate: Date, isPast: boolean): HTMLElement {
@@ -109,7 +109,7 @@ const { ui } = Astro.props;
 
     const ageEl = document.createElement('span');
     ageEl.className = 'vc-timeline-age';
-    ageEl.textContent = getAgeLabel(group.months);
+    ageEl.textContent = getAgeLabel(group.months, ui);
 
     const vacEl = document.createElement('div');
     vacEl.className = 'vc-timeline-vac';
@@ -174,7 +174,7 @@ const { ui } = Astro.props;
     root.classList.toggle('vc-is-today', isToday);
     nextDateEl.textContent = isToday
       ? (ui['btnToday'] ?? '¡Hoy!')
-      : `${getAgeLabel(next.months)} — ${formatDate(target)}`;
+      : `${getAgeLabel(next.months, ui)} — ${formatDate(target)}`;
 
     next.vaccines.forEach((name, idx) => {
       const item = document.createElement('div');
@@ -193,7 +193,7 @@ const { ui } = Astro.props;
   function updateDisplay(birthDate: Date): void {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
-    ageBadge.textContent = calculateAge(birthDate, today);
+    ageBadge.textContent = calculateAge(birthDate, today, ui);
     ageBadge.classList.add('vc-age-visible');
     root.classList.add('vc-active');
     emptyEl.style.display = 'none';
@@ -249,7 +249,7 @@ const { ui } = Astro.props;
 
   btnReminder?.addEventListener('click', () => {
     if (!currentBirthDate) return;
-    const ics = buildIcsContent(currentBirthDate, doseGroups);
+    const ics = buildIcsContent(currentBirthDate, doseGroups, ui);
     const blob = new Blob([ics], { type: 'text/calendar' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -280,3 +280,402 @@ const { ui } = Astro.props;
 
   clearDisplay();
 </script>
+
+<style>
+.vc-card {
+  --primary: #4f46e5;
+  --primary-soft: #eef2ff;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --text-main: #1e293b;
+  --text-muted: #64748b;
+  --bg-card: #fff;
+  --border: #e2e8f0;
+  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+  max-width: 600px;
+  margin: 0 auto;
+  background: var(--bg-card);
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  color: var(--text-main);
+  transition: transform 0.3s ease;
+}
+
+:global(.theme-dark) .vc-card {
+  --bg-card: #1e293b;
+  --border: rgba(255, 255, 255, 0.1);
+  --text-main: #f1f5f9;
+  --text-muted: #94a3b8;
+  --primary: #a5b4fc;
+  --primary-soft: rgba(79, 70, 229, 0.15);
+}
+
+.vc-header {
+  padding: 2rem 1.5rem;
+  background: linear-gradient(to bottom, var(--primary-soft), transparent);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.vc-inputs {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.vc-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.vc-field label {
+  font-size: 0.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+}
+
+.vc-triple-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--bg-card);
+  border: 2px solid var(--border);
+  border-radius: 16px;
+  padding: 0.25rem 1rem;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.vc-triple-input:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--primary-soft);
+  transform: translateY(-1px);
+}
+
+.vc-triple-input.has-error {
+  border-color: #ef4444;
+  background: #fef2f2;
+}
+
+:global(.theme-dark) .vc-triple-input.has-error {
+  background: rgba(239, 68, 68, 0.05);
+}
+
+.vc-triple-input.has-error:focus-within {
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
+}
+
+.vc-segment {
+  border: none;
+  padding: 0.8rem 0;
+  width: 3rem;
+  text-align: center;
+  background: transparent;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: inherit;
+  outline: none;
+}
+
+.vc-segment-year {
+  width: 4.5rem;
+}
+
+.vc-sep {
+  color: var(--text-muted);
+  font-weight: 700;
+  font-size: 1.2rem;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.vc-age-badge {
+  margin-top: 0.25rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  opacity: 0;
+  transform: translateY(-5px);
+  transition: all 0.3s ease;
+}
+
+.vc-age-badge.vc-age-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.vc-empty-state {
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.vc-main-context {
+  padding: 2rem 1.5rem;
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+  display: none;
+}
+
+.vc-active .vc-main-context {
+  display: block;
+  animation: vc-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes vc-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.vc-next-title {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--primary);
+  text-transform: uppercase;
+  margin: 0 0 0.5rem;
+}
+
+.vc-next-date {
+  font-size: 1.75rem;
+  font-weight: 900;
+  margin-bottom: 1.5rem;
+}
+
+.vc-is-today .vc-next-date {
+  color: #ef4444;
+  animation: vc-pulse-today 2s infinite;
+}
+
+@keyframes vc-pulse-today {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); }
+}
+
+.vc-is-today .vc-btn-primary {
+  background: #ef4444;
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+}
+
+.vc-vac-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+
+:global(.vc-vac-item) {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--primary-soft);
+  border-radius: 16px;
+  text-align: left;
+  border: 1px solid transparent;
+  transition: 0.2s;
+}
+
+:global(.vc-vac-icon) {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 12px;
+  font-weight: 700;
+  color: var(--primary);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+:global(.theme-dark) :global(.vc-vac-icon) {
+  background: #0f172a;
+}
+
+:global(.vc-vac-info) {
+  flex: 1;
+}
+
+:global(.vc-vac-name) {
+  display: block;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.vc-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.8rem 1.5rem;
+  background: var(--primary);
+  color: #fff;
+  border-radius: 12px;
+  font-weight: 700;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  justify-content: center;
+}
+
+.vc-sections {
+  display: none;
+}
+
+.vc-active .vc-sections {
+  display: block;
+}
+
+.vc-accordion-item {
+  border-bottom: 1px solid var(--border);
+}
+
+.vc-accordion-item:last-child {
+  border-bottom: none;
+}
+
+.vc-accordion-trigger {
+  width: 100%;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  border: none;
+  color: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.vc-accordion-trigger:hover {
+  background: var(--primary-soft);
+}
+
+.vc-accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.vc-accordion-item.vc-open .vc-accordion-content {
+  max-height: 800px;
+}
+
+.vc-timeline-compact {
+  padding: 0 1.5rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+:global(.vc-timeline-row) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 0.9rem;
+}
+
+:global(.vc-timeline-row:last-child) {
+  border-bottom: none;
+}
+
+:global(.vc-timeline-age) {
+  font-weight: 800;
+  color: var(--primary);
+  width: 6.5rem;
+  flex-shrink: 0;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+:global(.vc-timeline-vac) {
+  flex: 1;
+  font-weight: 600;
+  color: var(--text-main);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  padding: 0 0.5rem;
+}
+
+:global(.vc-vac-pill) {
+  padding: 0.15rem 0.5rem;
+  background: var(--primary-soft);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--primary);
+  border: 1px solid rgba(79, 70, 229, 0.1);
+}
+
+:global(.theme-dark) .vc-vac-pill {
+  background: var(--primary-soft);
+  color: var(--primary);
+  border: 1px solid var(--primary-soft);
+}
+
+:global(.vc-timeline-status) {
+  font-size: 0.65rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  width: 3.5rem;
+  flex-shrink: 0;
+  text-align: right;
+  letter-spacing: 0.05em;
+}
+
+:global(.vc-check) {
+  color: var(--success);
+}
+
+:global(.vc-clock) {
+  color: var(--warning);
+}
+
+.vc-footer {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background: var(--primary-soft);
+}
+
+.vc-share-link {
+  display: none;
+  color: var(--primary);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.vc-active .vc-share-link {
+  display: inline;
+}
+
+@media (max-width: 480px) {
+  .vc-timeline-age {
+    width: 5rem;
+  }
+}
+</style>

package/src/tool/vaccination-calendar/i18n/en.ts

@@ -95,6 +95,26 @@ export const content: VaccinationCalendarLocaleContent = {
     labelShare: 'Share these dates',
     faqTitle: 'Frequently asked questions',
     bibliographyTitle: 'References',
+    labelMonth: 'month',
+    labelMonths: 'months',
+    labelYear: 'year',
+    labelYears: 'years',
+    labelDay: 'day',
+    labelDays: 'days',
+    labelAnd: 'and',
+    labelVaccination: 'Vaccination',
+    labelAppointment: 'Vaccination appointment',
+    vac_hexavalente: 'Hexavalent',
+    vac_neumococo: 'Pneumococcal (PCV15/20)',
+    vac_meningococo_b: 'Meningococcal B (Bexsero)',
+    vac_rotavirus: 'Rotavirus',
+    vac_meningococo_acwy: 'Meningococcal ACWY',
+    vac_triple_virica: 'MMR (Measles, Mumps, Rubella)',
+    vac_varicela: 'Varicella (Chickenpox)',
+    vac_gripe: 'Flu (Seasonal)',
+    vac_vph: 'HPV (Papillomavirus)',
+    vac_tdpa: 'Tdap (Tetanus, Diphtheria, Pertussis)',
+    vac_polio_booster: 'Polio (Booster)',
   },
   seo: [
     { type: 'title', text: "Baby Vaccination Calculator: When Is My Child's Next Dose?", level: 2 },

package/src/tool/vaccination-calendar/i18n/es.ts

@@ -99,6 +99,26 @@ export const content: VaccinationCalendarLocaleContent = {
     labelShare: 'Compartir estas fechas',
     faqTitle: 'Preguntas frecuentes',
     bibliographyTitle: 'Referencias',
+    labelMonth: 'mes',
+    labelMonths: 'meses',
+    labelYear: 'año',
+    labelYears: 'años',
+    labelDay: 'día',
+    labelDays: 'días',
+    labelAnd: 'y',
+    labelVaccination: 'Vacunación',
+    labelAppointment: 'Cita de vacunación',
+    vac_hexavalente: 'Hexavalente',
+    vac_neumococo: 'Neumococo (VCN15/20)',
+    vac_meningococo_b: 'Meningococo B (Bexsero)',
+    vac_rotavirus: 'Rotavirus',
+    vac_meningococo_acwy: 'Meningococo ACWY',
+    vac_triple_virica: 'Triple Vírica (SRP)',
+    vac_varicela: 'Varicela',
+    vac_gripe: 'Gripe (Estacional)',
+    vac_vph: 'VPH (Papiloma)',
+    vac_tdpa: 'Tdpa (Tétanos, Difteria, Tosferina)',
+    vac_polio_booster: 'Polio (Refuerzo)',
   },
   seo: [
     { type: 'title', text: 'Calculadora de Vacunas: ¿Cuándo le toca la próxima a mi hijo?', level: 2 },

package/src/tool/vaccination-calendar/i18n/fr.ts

@@ -95,6 +95,26 @@ export const content: VaccinationCalendarLocaleContent = {
     labelShare: "Partager ces dates",
     faqTitle: "Questions fréquentes",
     bibliographyTitle: "Références",
+    labelMonth: "mois",
+    labelMonths: "mois",
+    labelYear: "an",
+    labelYears: "ans",
+    labelDay: "jour",
+    labelDays: "jours",
+    labelAnd: "et",
+    labelVaccination: "Vaccination",
+    labelAppointment: "Rendez-vous de vaccination",
+    vac_hexavalente: "Hexavalent",
+    vac_neumococo: "Pneumocoque (VCN15/20)",
+    vac_meningococo_b: "Méningocoque B (Bexsero)",
+    vac_rotavirus: "Rotavirus",
+    vac_meningococo_acwy: "Méningocoque ACWY",
+    vac_triple_virica: "ROR (Rougeole, Oreillons, Rubéole)",
+    vac_varicela: "Varicelle",
+    vac_gripe: "Grippe (Saisonnière)",
+    vac_vph: "HPV (Papillomavirus)",
+    vac_tdpa: "dTca (Diphthérie, Tétanos, Coqueluche)",
+    vac_polio_booster: "Polio (Rappel)",
   },
   seo: [
     { type: 'title', text: "Calculateur de vaccins : quand est le prochain rendez-vous de mon enfant ?", level: 2 },