/* Estilos de la página «Calculadora» (18/10/2026). Se cargan después de estilos.css, servicios.css y contacto.css, y usan
   sus colores, medidas y piezas (de servicios.css, la cabecera del servicio, la ruta y la cota de plano; de contacto.css,
   la tarjeta del formulario, los campos y los avisos).
   Índice: 1 Cabecera en dos columnas · 2 Campos de cifras y ayudante · 3 El resultado y su cajetín
   4 La semana de cada persona, a escala · 5 Acciones · 6 ¿Y ahora qué? y tus datos · 7 Al calcular · 8 Reducir movimiento. */

/* ---------- 1 · Cabecera, como la de «Contacto». En el móvil, una columna: titular, calculadora, ¿y ahora qué? y tus
   datos. Desde 960 px, la calculadora a la derecha (columnas 7 a 12: lo pone contacto.css) y el resto a la izquierda
   (1 a 5). La banda acaba en un filete blanco al 18 % antes del pie, también marino ---------- */
.portada-calculadora { padding-bottom: 0; }
.portada-calculadora > .contenedor::after { content: ""; display: block; margin-top: 56px; border-top: 1px solid var(--linea-sobre-marino); }
@media (min-width: 960px) { .portada-calculadora > .contenedor::after { margin-top: 88px; } }
.calculadora-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); }
.calculadora-ahora, .calculadora-datos { margin-top: 48px; }
@media (min-width: 960px) {
  .calculadora-rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--hueco); }
  .calculadora-intro { grid-column: 1 / span 5; grid-row: 1; }
  .calculadora-ahora { grid-column: 1 / span 5; grid-row: 2; margin-top: 64px; }
  .calculadora-datos { grid-column: 1 / span 5; grid-row: 3; align-self: start; }
}
/* Dentro de la tarjeta, las notas vuelven al texto secundario del fondo blanco */
.calculadora-lienzo .nota { color: var(--texto-2); }

/* ---------- 2 · Campos de cifras y ayudante ---------- */
/* Las cifras son cortas: el campo lo dice con su ancho */
.campo-cifra { max-width: 12rem; font-variant-numeric: tabular-nums; }
/* El ayudante del coste por hora: se abre como las preguntas frecuentes (el «+» gira) y deja sus campos en un panel gris */
.ayudante { margin-top: 2px; }
.ayudante summary {
  list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font: 700 17px/1.3 var(--letra-texto); color: var(--enlace); touch-action: manipulation;
}
.ayudante summary::-webkit-details-marker { display: none; }
.ayudante summary .icono { flex: none; width: 20px; height: 20px; transition: transform 200ms var(--ease-out); }
.ayudante[open] summary .icono { transform: rotate(45deg); }
.ayudante summary:active { color: var(--enlace-pulsado); }
@media (hover: hover) and (pointer: fine) { .ayudante summary:hover { color: var(--enlace-pulsado); } }
.ayudante-cuerpo { display: grid; gap: 20px; justify-items: start; margin-top: 10px; padding: 20px 16px; border-radius: 12px; background: var(--gris-claro); }
.ayudante-cuerpo .campo { justify-self: stretch; }
.ayudante-cuerpo .nota { max-width: 52ch; }
@media (min-width: 640px) { .ayudante-cuerpo { padding: 24px; } }

/* ---------- 3 · El resultado: bajo un filete gris, la frase de entrada y el cajetín, como el de un plano: un filete de
   tinta arriba y, en cada fila, la cifra grande con su unidad al lado ---------- */
.resultado { display: grid; gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--linea); scroll-margin-top: 16px; }
.resultado[hidden] { display: none; }
.resultado-titulo { font: 600 19px/1.35 var(--letra-titulo); letter-spacing: -0.01em; color: var(--tinta); overflow-wrap: anywhere; text-wrap: balance; }
.cajetin { container-type: inline-size; border-top: 1px solid var(--tinta); }
.cajetin-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-block: 16px; border-bottom: 1px solid var(--linea);
}
/* La cifra crece con la tarjeta y nunca se parte (hasta cientos de millones cabe en 320 px). Cifras proporcionales:
   con las tabulares, el punto de los miles ocupa lo que un número y la cifra se ve separada («8 . 710») */
.cajetin-cifra {
  font: 700 clamp(30px, 11cqi, 52px)/1 var(--letra-titulo); letter-spacing: -0.03em;
  color: var(--tinta); white-space: nowrap;
}
.cajetin-unidad { font: 600 18px/1.3 var(--letra-titulo); letter-spacing: -0.01em; color: var(--tinta); }
.cajetin-nota { flex-basis: 100%; margin-top: 4px; font-size: 16px; color: var(--texto-2); }

/* ---------- 4 · La semana de cada persona, a escala: la jornada es una barra de tinta y la tarea, el rayado naranja de lo
   que hace perder horas. Encima, la cota de la tarea con su rótulo; debajo, la de la jornada. Dentro de la jornada, una
   marca gris cada 8 horas, como la regla de los mapas, para leer la escala.
   --t: la parte de la jornada que se lleva la tarea, de 0 a 1; --dia: lo que mide un día de 8 horas, de 0 a 1.
   Las pone web.js en .semana (aquí, solo sus valores de partida: no se repiten más abajo, o taparían los de web.js) */
.semana { display: grid; gap: 14px; margin: 0; --t: 0; --dia: 0.2; }
.semana-dibujo { display: grid; gap: 6px; }
.semana-tarea-rotulo, .semana-jornada-rotulo { font: 700 16px/1.2 var(--letra-texto); color: var(--tinta); white-space: nowrap; }
.semana-tarea-rotulo { margin-left: 4px; }
.semana-jornada-rotulo { justify-self: center; font-weight: 400; color: var(--texto-2); white-space: normal; text-align: center; text-wrap: balance; }
.semana .cota { transition: none; }
.semana-cota-tarea { margin-left: 4px; width: max(16px, calc((100% - 8px) * var(--t))); }
.semana-jornada { position: relative; display: block; height: 28px; border: 1px solid var(--tinta); background: var(--blanco); transform-origin: left center; }
/* Cada marca va al principio de su día: la de la hora 0 queda debajo del borde de la tarea y no hay marca en el final
   de la semana, que ya lo cierra el borde de la barra (si no, el final saldría dibujado dos veces) */
.semana-jornada::before {
  content: ""; position: absolute; inset: 4px;
  background: repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px calc(var(--dia) * 100%));
}
.semana-tarea {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) * var(--t));
  border: 1px solid var(--naranja); background: var(--blanco) var(--rayado-naranja); transform-origin: left center;
}

/* ---------- 5 · Acciones: el aviso, el botón que lleva el cálculo al formulario y «Calcular otra tarea» ---------- */
.resultado-aviso { max-width: 52ch; }
.resultado-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (max-width: 639.98px) { .resultado-acciones .boton { width: 100%; } }
/* Un botón con aspecto de enlace (no lleva a otra página: vacía la calculadora) */
.enlace-boton {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation;
  font: 700 17px/1.3 var(--letra-texto); color: var(--enlace);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.enlace-boton:active { color: var(--enlace-pulsado); }
@media (hover: hover) and (pointer: fine) { .enlace-boton:hover { text-decoration-thickness: 2.5px; } }

/* ---------- 6 · ¿Y ahora qué? y tus datos, sobre el marino ---------- */
.calculadora-ahora h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.calculadora-ahora p { margin-top: 12px; max-width: 42ch; color: var(--texto-sobre-marino); }
.calculadora-ahora .enlace-flecha { margin-top: 12px; }
.calculadora-datos { max-width: 42ch; padding-top: 24px; border-top: 1px solid var(--linea-sobre-marino); color: var(--texto-sobre-marino); }
@media (min-width: 960px) { .calculadora-datos { padding-top: 32px; } }

/* ---------- 7 · Al calcular (solo si el sistema no pide reducir el movimiento) ----------
   Las cifras suben una tras otra; la jornada se dibuja de izquierda a derecha, la tarea crece después y las cotas
   aparecen al final. Se repite en cada cálculo (web.js quita y pone .dibujando). Al cambiar un dato con el resultado a la
   vista, la tarea y su cota pasan a su nueva medida sin animación (animar el ancho haría trabajar de más al navegador) */
@media (prefers-reduced-motion: no-preference) {
  .resultado.dibujando .cajetin-fila { animation: calculo-subir 420ms var(--ease-out) backwards; }
  .resultado.dibujando .cajetin-fila + .cajetin-fila { animation-delay: 90ms; }
  .resultado.dibujando .semana-jornada { animation: calculo-trazar 600ms var(--ease-in-out) 250ms backwards; }
  .resultado.dibujando .semana-tarea { animation: calculo-trazar 700ms var(--ease-out) 750ms backwards; }
  .resultado.dibujando .semana .cota, .resultado.dibujando .semana-tarea-rotulo, .resultado.dibujando .semana-jornada-rotulo {
    animation: calculo-aparecer 300ms ease 1350ms backwards;
  }
}
@keyframes calculo-subir { from { opacity: 0; translate: 0 8px; } }
@keyframes calculo-trazar { from { transform: scaleX(0); } }
@keyframes calculo-aparecer { from { opacity: 0; } }

/* ---------- 8 · Reducir movimiento: todo quieto y completo desde el principio ---------- */
@media (prefers-reduced-motion: reduce) {
  .ayudante summary .icono { transition: none; }
}