@jjlmoya/utils-nautical 1.16.0 → 1.18.0

package/src/tool/tideCalculator/tide-height-calculator.css

@@ -1,4 +1,4 @@
-.tide-calculator {
+  .tide-calculator {
     --n-bg: #fff;
     --n-bg-muted: #f1f5f9;
     --n-text: #0f172a;
@@ -17,10 +17,16 @@
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    width: 100%;
     max-width: 1000px;
     margin: 0 auto;
   }
 
+  .tide-calculator,
+  .tide-calculator * {
+    box-sizing: border-box;
+  }
+
   .theme-dark .tide-calculator {
     --n-bg: #0f172a;
     --n-bg-muted: #1e293b;
@@ -46,6 +52,7 @@
     grid-template-columns: 320px 1fr;
     overflow: hidden;
     box-shadow: 0 20px 40px var(--n-shadow);
+    min-width: 0;
   }
 
   @media (max-width: 850px) {
@@ -61,12 +68,14 @@
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    min-width: 0;
   }
 
   .tc-sidebar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
   }
 
   .tc-sidebar-header h3 {
@@ -76,6 +85,7 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
     opacity: 0.9;
+    overflow-wrap: anywhere;
   }
 
   #invert-btn {
@@ -129,16 +139,20 @@
     color: var(--n-primary-on);
     font-size: 1rem;
     outline: none;
+    min-width: 0;
+    width: 100%;
   }
 
   .tc-unit-input {
     position: relative;
     display: flex;
     align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
   }
 
   .tc-unit-input input {
-    width: 80px;
+    width: 100%;
     padding-right: 25px;
   }
 
@@ -169,17 +183,20 @@
     flex-direction: column;
     gap: 2rem;
     background: var(--n-bg-muted);
+    min-width: 0;
   }
 
   .tc-top-row {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    gap: 1.5rem;
   }
 
   .tc-result-display {
     display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
   .tc-result-display .label {
@@ -234,6 +251,8 @@
   .tc-summary-info {
     display: flex;
     gap: 1.5rem;
+    flex-wrap: wrap;
+    justify-content: flex-end;
   }
 
   .tc-stat {
@@ -262,6 +281,7 @@
     padding: 1.5rem;
     height: 250px;
     position: relative;
+    min-width: 0;
   }
 
   .tc-table-card {
@@ -279,6 +299,7 @@
 
   .tc-table-wrapper {
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   .tide-calculator table {
@@ -303,8 +324,118 @@
   }
 
   @media (max-width: 640px) {
+    .tide-calculator {
+      gap: 1rem;
+    }
+
+    .tc-main-card {
+      border-radius: 1rem;
+      box-shadow: 0 10px 24px var(--n-shadow);
+    }
+
+    .tc-calc-sidebar {
+      padding: 1.25rem;
+      gap: 1.25rem;
+    }
+
+    .tc-sidebar-header h3 {
+      font-size: 0.95rem;
+    }
+
+    #invert-btn {
+      width: 40px;
+      height: 40px;
+      flex: 0 0 auto;
+    }
+
+    .tc-input-set {
+      gap: 1rem;
+    }
+
+    .tc-input-block .row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(92px, 0.75fr);
+    }
+
+    .tide-calculator input[type='time'],
+    .tide-calculator input[type='number'] {
+      padding: 0.75rem;
+      font-size: 1rem;
+    }
+
+    .tide-calculator input[type='time'].large-time {
+      font-size: 1.45rem;
+    }
+
+    .tc-calc-content {
+      padding: 1.25rem;
+      gap: 1.25rem;
+    }
+
     .tc-top-row {
-      flex-direction: column;
-      gap: 1.5rem;
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 1.25rem;
+    }
+
+    .tc-result-display .label {
+      font-size: 0.75rem;
+    }
+
+    #target-value {
+      font-size: 3rem;
+    }
+
+    .tc-value-box small {
+      font-size: 1rem;
+    }
+
+    .tc-summary-info {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.75rem;
+      justify-content: stretch;
+    }
+
+    .tc-stat {
+      background: var(--n-bg);
+      border: 1px solid var(--n-border);
+      border-radius: 0.8rem;
+      padding: 0.75rem;
+      text-align: left;
+    }
+
+    .tc-chart-area {
+      height: 220px;
+      border-radius: 1rem;
+      padding: 0.75rem;
     }
-  }
+
+    .tc-table-card {
+      border-radius: 1rem;
+      padding: 1rem;
+    }
+
+    .tide-calculator th,
+    .tide-calculator td {
+      padding: 0.75rem 0.6rem;
+      font-size: 0.82rem;
+      white-space: nowrap;
+    }
+  }
+
+  @media (max-width: 380px) {
+    .tc-calc-sidebar,
+    .tc-calc-content {
+      padding: 1rem;
+    }
+
+    .tc-input-block .row,
+    .tc-summary-info {
+      grid-template-columns: 1fr;
+    }
+
+    #target-value {
+      font-size: 2.6rem;
+    }
+  }

package/src/tool/underKeel/component.astro

@@ -17,7 +17,7 @@ const { ui } = Astro.props;
 
       <div class="ukc-input-set">
         <div class="ukc-input-block">
-          <label>{ui.boatDraftLabel}</label>
+          <label for="boat-draft">{ui.boatDraftLabel}</label>
           <div class="ukc-unit-input">
             <input type="number" id="boat-draft" value="2.0" step="0.1" />
             <span>m</span>
@@ -25,7 +25,7 @@ const { ui } = Astro.props;
         </div>
 
         <div class="ukc-input-block">
-          <label>{ui.chartDepthLabel}</label>
+          <label for="chart-depth">{ui.chartDepthLabel}</label>
           <div class="ukc-unit-input">
             <input type="number" id="chart-depth" value="1.5" step="0.1" />
             <span>m</span>
@@ -33,7 +33,7 @@ const { ui } = Astro.props;
         </div>
 
         <div class="ukc-input-block">
-          <label>{ui.safetyMarginLabel}</label>
+          <label for="safety-margin">{ui.safetyMarginLabel}</label>
           <div class="ukc-unit-input">
             <input type="number" id="safety-margin" value="0.5" step="0.1" />
             <span>m</span>
@@ -43,18 +43,18 @@ const { ui } = Astro.props;
         <div class="ukc-hr-divider"></div>
 
         <div class="ukc-input-block">
-          <label>{ui.highTideLabel}</label>
+          <label for="high-tide-time">{ui.highTideLabel}</label>
           <div class="ukc-row">
             <input type="time" id="high-tide-time" value="12:00" />
-            <input type="number" id="high-tide-height" value="3.5" step="0.1" class="ukc-mini-num" />
+            <input type="number" id="high-tide-height" value="3.5" step="0.1" class="ukc-mini-num" aria-label="High tide height" />
           </div>
         </div>
 
         <div class="ukc-input-block">
-          <label>{ui.lowTideLabel}</label>
+          <label for="low-tide-time">{ui.lowTideLabel}</label>
           <div class="ukc-row">
             <input type="time" id="low-tide-time" value="06:00" />
-            <input type="number" id="low-tide-height" value="0.5" step="0.1" class="ukc-mini-num" />
+            <input type="number" id="low-tide-height" value="0.5" step="0.1" class="ukc-mini-num" aria-label="Low tide height" />
           </div>
         </div>
       </div>

package/src/tool/underKeel/i18n/es.ts

@@ -3,12 +3,12 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { UnderKeelUI, UnderKeelLocaleContent } from '../index';
 
 const slug = 'calculador-paso-de-bajo';
-const title = 'Calculador de Paso de Bajo';
+const title = 'Calculadora de Paso de Bajo';
 const description =
   'Calcula la ventana de tiempo segura para cruzar barras, canales o puntos de calado restringido. Introduce el calado de tu barco, la sonda de la carta y los datos de marea para obtener el intervalo exacto de paso seguro.';
 
 const ui: UnderKeelUI = {
-  parametersLabel: 'Parametros',
+  parametersLabel: 'Parámetros',
   boatDraftLabel: 'Calado del Barco',
   chartDepthLabel: 'Sonda de la Carta',
   safetyMarginLabel: 'Resguardo de Seguridad',
@@ -17,7 +17,7 @@ const ui: UnderKeelUI = {
   metersLabel: 'metros',
   passWindowLabel: 'Ventana de Paso',
   neededLabel: 'Profundidad necesaria',
-  tideRequiredLabel: 'Marea minima requerida',
+  tideRequiredLabel: 'Marea mínima requerida',
   statusNeverLabel: 'Sin calado en todo el ciclo',
   statusAlwaysLabel: 'Paso libre todo el ciclo',
   statusFromLabel: 'Paso desde las:',
@@ -27,98 +27,98 @@ const ui: UnderKeelUI = {
 
 const faq: UnderKeelLocaleContent['faq'] = [
   {
-    question: '¿Que es exactamente el paso de bajo en nautica?',
-    answer: 'El paso de bajo es el calculo del momento en el que hay profundidad suficiente en un punto critico (como una barra de arena o un canal estrecho) para permitir el transito seguro de una embarcacion segun su calado.',
+    question: '¿Qué es exactamente el paso de bajo en náutica?',
+    answer: 'El paso de bajo es el cálculo del momento en el que hay profundidad suficiente en un punto crítico (como una barra de arena o un canal estrecho) para permitir el tránsito seguro de una embarcación según su calado.',
   },
   {
-    question: '¿Cuantos metros de resguardo de seguridad se recomiendan?',
-    answer: 'Para embarcaciones de recreo se suele recomendar un resguardo minimo de entre 0.5 y 1 metro sobre el calado del barco. Este margen compensa posibles errores en el calculo de marea, variaciones de presion atmosferica u oleaje imprevisto.',
+    question: '¿Cuántos metros de resguardo de seguridad se recomiendan?',
+    answer: 'Para embarcaciones de recreo se suele recomendar un resguardo mínimo de entre 0,5 y 1 metro sobre el calado del barco. Este margen compensa posibles errores en el cálculo de marea, variaciones de presión atmosférica u oleaje imprevisto.',
   },
   {
-    question: '¿Como influye el oleaje en el paso de bajo?',
-    answer: 'El oleaje genera oscilaciones verticales en el casco. En el punto mas bajo de la ola el barco se acerca mas al fondo que en reposo. Para cruzar zonas con olas el resguardo debe aumentarse sustancialmente.',
+    question: '¿Cómo influye el oleaje en el paso de bajo?',
+    answer: 'El oleaje genera oscilaciones verticales en el casco. En el punto más bajo de la ola el barco se acerca más al fondo que en reposo. Para cruzar zonas con olas el resguardo debe aumentarse sustancialmente.',
   },
   {
-    question: '¿Que es la sonda de la carta nautica?',
-    answer: 'Es la profundidad minima que encontraras en un punto cuando la marea esta en el nivel del Cero de la Carta (Datum). Se suma a la altura de la marea en ese instante para obtener la profundidad total disponible.',
+    question: '¿Qué es la sonda de la carta náutica?',
+    answer: 'Es la profundidad mínima que encontrarás en un punto cuando la marea está en el nivel del Cero de la Carta (Datum). Se suma a la altura de la marea en ese instante para obtener la profundidad total disponible.',
   },
   {
-    question: '¿Que ocurre si la sonda en la carta esta subrayada?',
-    answer: 'Significa que ese punto queda al descubierto (en seco) cuando la marea esta en el Cero de la Carta. Necesitaras una altura de marea mayor para poder pasar por encima.',
+    question: '¿Qué ocurre si la sonda en la carta está subrayada?',
+    answer: 'Significa que ese punto queda al descubierto (en seco) cuando la marea está en el Cero de la Carta. Necesitarás una altura de marea mayor para poder pasar por encima.',
   },
   {
-    question: '¿Que es el efecto Squat y como altera el paso?',
-    answer: 'Es un fenomeno hidrodinamico por el cual un barco que navega por canales poco profundos tiende a hundirse mas respecto a su linea de flotacion. Cuanto mas rapido navegues, mas aumenta el calado dinamico y menos agua tendras bajo la quilla.',
+    question: '¿Qué es el efecto Squat y cómo altera el paso?',
+    answer: 'Es un fenómeno hidrodinámico por el cual un barco que navega por canales poco profundos tiende a hundirse más respecto a su línea de flotación. Cuanto más rápido navegues, más aumenta el calado dinámico y menos agua tendrás bajo la quilla.',
   },
 ];
 
 const howTo: UnderKeelLocaleContent['howTo'] = [
   {
     name: 'Define el calado y el resguardo',
-    text: 'Mide el calado de tu barco en su punto maximo y añade un margen de seguridad prudente (por ejemplo, 0.5 m).',
+    text: 'Mide el calado de tu barco en su punto máximo y añade un margen de seguridad prudente (por ejemplo, 0,5 m).',
   },
   {
-    name: 'Consulta la sonda en tu carta nautica',
-    text: 'Busca el valor de la sonda Datum para el paso critico que vas a navegar. Anota si es una zona de arena o roca.',
+    name: 'Consulta la sonda en tu carta náutica',
+    text: 'Busca el valor de la sonda Datum para el paso crítico que vas a navegar. Anota si es una zona de arena o roca.',
   },
   {
     name: 'Introduce los datos de la marea',
-    text: 'Utiliza las horas y alturas de la pleamar y bajamar de la marina mas cercana obtenidas del anuario oficial.',
+    text: 'Utiliza las horas y alturas de la pleamar y bajamar de la marina más cercana obtenidas del anuario oficial.',
   },
   {
     name: 'Comprueba tu ventana de paso',
-    text: 'La herramienta te indicara el intervalo de tiempo exacto durante el cual tendras profundidad suficiente para navegar con seguridad.',
+    text: 'La herramienta te indicará el intervalo de tiempo exacto durante el cual tendrás profundidad suficiente para navegar con seguridad.',
   },
 ];
 
 const seo: UnderKeelLocaleContent['seo'] = [
   {
     type: 'title',
-    text: 'Calculo de Paso de Bajo: Navegando con Seguridad sobre Obstaculos',
+    text: 'Cálculo de Paso de Bajo: Navegando con Seguridad sobre Obstáculos',
     level: 2,
   },
   {
     type: 'paragraph',
-    html: 'La planificacion de una travesia no termina con el trazo de un rumbo en la carta. Para el navegante costero, uno de los calculos mas determinantes es el del <strong>paso de bajo</strong>: saber a que hora habra profundidad suficiente para cruzar un punto critico sin encallar.',
+    html: 'La planificación de una travesía no termina con el trazo de un rumbo en la carta. Para el navegante costero, uno de los cálculos más determinantes es el del <strong>paso de bajo</strong>: saber a qué hora habrá profundidad suficiente para cruzar un punto crítico sin encallar.',
   },
   {
     type: 'title',
-    text: '¿Que es la sonda de la carta y como se relaciona con la marea?',
+    text: '¿Qué es la sonda de la carta y cómo se relaciona con la marea?',
     level: 3,
   },
   {
     type: 'paragraph',
-    html: 'En las cartasnáuticas, las profundidades indicadas (sondas) estan referidas al <strong>Cero de la Carta</strong> o Datum. Este nivel es, por convencion, el nivel mas bajo que puede alcanzar la marea en condiciones normales. La profundidad real que encontrara tu barco en un momento dado es la suma de esa sonda mas la altura de la marea en ese instante, calculada con la Regla de los Dozavos.',
+    html: 'En las cartas náuticas, las profundidades indicadas (sondas) están referidas al <strong>Cero de la Carta</strong> o Datum. Este nivel es, por convención, el nivel más bajo que puede alcanzar la marea en condiciones normales. La profundidad real que encontrará tu barco en un momento dado es la suma de esa sonda más la altura de la marea en ese instante, calculada con la Regla de los Dozavos.',
   },
   {
     type: 'title',
-    text: 'Los elementos del calculo: Calado y Resguardo',
+    text: 'Los elementos del cálculo: Calado y Resguardo',
     level: 3,
   },
   {
     type: 'paragraph',
-    html: 'Para utilizar el calculador de paso de bajo de forma profesional, debes conocer con precision dos datos tecnicos de tu propio barco y uno de decision personal:',
+    html: 'Para utilizar el calculador de paso de bajo de forma profesional, debes conocer con precisión dos datos técnicos de tu propio barco y uno de decisión personal:',
   },
   {
     type: 'list',
     items: [
-      '<strong>Calado de maxima carga:</strong> Es la profundidad que alcanza el punto mas bajo del barco (la quilla) cuando esta totalmente cargado.',
-      '<strong>Sonda de la carta:</strong> El numero que aparece en la carta nautica para el punto que quieres cruzar. Si esta subrayado, el punto queda en seco en bajamar.',
-      '<strong>Resguardo de seguridad:</strong> Es el margen "por si acaso" (nauticamente conocido como resguardo) de al menos 0,5 a 1 metro.',
+      '<strong>Calado de máxima carga:</strong> Es la profundidad que alcanza el punto más bajo del barco (la quilla) cuando está totalmente cargado.',
+      '<strong>Sonda de la carta:</strong> El número que aparece en la carta náutica para el punto que quieres cruzar. Si está subrayado, el punto queda en seco en bajamar.',
+      '<strong>Resguardo de seguridad:</strong> Es el margen "por si acaso" (náuticamente conocido como resguardo) de al menos 0,5 a 1 metro.',
     ],
   },
   {
     type: 'title',
-    text: '¿Como funciona la ventana de paso?',
+    text: '¿Cómo funciona la ventana de paso?',
     level: 3,
   },
   {
     type: 'paragraph',
-    html: 'El calculador determina el momento exacto en el que el nivel del agua subira por encima de tu calado mas el resguardo elegido. A partir de ese minuto, se abre la <strong>ventana de paso</strong>. Si la marea es vaciante (bajando), la herramienta te indicara hasta que hora tienes permitido el transito antes de que el nivel del agua caiga por debajo de tu limite de seguridad.',
+    html: 'El calculador determina el momento exacto en el que el nivel del agua subirá por encima de tu calado más el resguardo elegido. A partir de ese minuto, se abre la <strong>ventana de paso</strong>. Si la marea es vaciante (bajando), la herramienta te indicará hasta que hora tienes permitido el tránsito antes de que el nivel del agua caiga por debajo de tu límite de seguridad.',
   },
   {
     type: 'paragraph',
-    html: 'Esta planificacion es vital para barcos de vela con quillas profundas que desean entrar en puertos como los de las Rias Baixas en Galicia o puertos fluviales en Andalucia, donde la variacion de mareas puede marcar la diferencia entre una entrada comoda o quedar varado durante seis horas esperando al siguiente ciclo.',
+    html: 'Esta planificación es vital para barcos de vela con quillas profundas que desean entrar en puertos como los de las Rías Baixas en Galicia o puertos fluviales en Andalucía, donde la variación de mareas puede marcar la diferencia entre una entrada cómoda o quedar varado durante seis horas esperando al siguiente ciclo.',
   },
   {
     type: 'title',
@@ -127,17 +127,17 @@ const seo: UnderKeelLocaleContent['seo'] = [
   },
   {
     type: 'table',
-    headers: ['Factor', 'Efecto', 'Recomendacion'],
+    headers: ['Factor', 'Efecto', 'Recomendación'],
     rows: [
       ['<strong>Oleaje</strong>', 'Reduce el agua bajo el casco', 'Aumentar el resguardo significativamente'],
-      ['<strong>Efecto Squat</strong>', 'Aumenta el calado por succion', 'Reducir la velocidad en zonas criticas'],
+      ['<strong>Efecto Squat</strong>', 'Aumenta el calado por succión', 'Reducir la velocidad en zonas críticas'],
       ['<strong>Fondo de arena</strong>', 'Profundidad variable con temporales', 'Mantener sonda activa y resguardo extra'],
     ],
   },
   {
     type: 'tip',
-    title: 'Consejo de Navegacion',
-    html: 'Si tu ventana de paso es muy estrecha o el tiempo empeora, la decision mas sabia suele ser esperar fuera en aguas profundas a que la marea gane la altura necesaria.',
+    title: 'Consejo de Navegación',
+    html: 'Si tu ventana de paso es muy estrecha o el tiempo empeora, la decisión más sabia suele ser esperar fuera en aguas profundas a que la marea gane la altura necesaria.',
   },
   {
     type: 'title',
@@ -146,11 +146,11 @@ const seo: UnderKeelLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: '<ol><li class="mb-2"><strong>Reduce la velocidad:</strong> Para minimizar el efecto squat y tener tiempo de corregir el rumbo.</li><li class="mb-2"><strong>Utiliza la sonda de a bordo:</strong> Configura la alarma de baja profundidad en tu equipo electronico.</li><li class="mb-2"><strong>Observa el mar:</strong> Las rompientes de olas suelen indicar la presencia de bajos.</li><li class="mb-2"><strong>Consulta a lugareños:</strong> Por radio (canal 9) o telefoneando al club nautico sobre el estado actual del canal.</li></ol>',
+    html: '<ol><li class="mb-2"><strong>Reduce la velocidad:</strong> Para minimizar el efecto squat y tener tiempo de corregir el rumbo.</li><li class="mb-2"><strong>Utiliza la sonda de a bordo:</strong> Configura la alarma de baja profundidad en tu equipo electrónico.</li><li class="mb-2"><strong>Observa el mar:</strong> Las rompientes de olas suelen indicar la presencia de bajos.</li><li class="mb-2"><strong>Consulta a lugareños:</strong> Por radio (canal 9) o telefoneando al club náutico sobre el estado actual del canal.</li></ol>',
   },
   {
     type: 'paragraph',
-    html: 'Esta herramienta es ideal para estudiantes que estan practicando ejercicios de mareas para el examen de Patron de Embarcaciones de Recreo (PER) o Patron de Yate, permitiendo verificar los resultados de calculos manuales de forma instantanea y visual.',
+    html: 'Esta herramienta es ideal para estudiantes que están practicando ejercicios de mareas para el examen de Patrón de Embarcaciones de Recreo (PER) o Patrón de Yate, permitiendo verificar los resultados de cálculos manuales de forma instantánea y visual.',
   },
 ];
 
@@ -176,7 +176,7 @@ const schemas: UnderKeelLocaleContent['schemas'] = [
   {
     '@context': 'https://schema.org',
     '@type': 'HowTo',
-    name: `Como usar: ${title}`,
+    name: `Cómo usar: ${title}`,
     step: howTo.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
   } as WithContext<HowTo>,
 ];