/* Calculadoras gratis (tanda 8, 4-oct-2026): estilos comunes de la familia
   «Calculadoras» (porcentajes, regla de tres, edad, IMC, temporizador…).
   Complementa a utiles-herramientas.css: todos los colores salen de sus
   variables --uth-* (que traen su respaldo de tokens.css). Cada grupo de la
   tanda puede añadir sus detalles en su propio archivo con el prefijo .ucal-. */

/* Rejilla: datos a un lado, resultado al otro; una columna en el móvil */
.ucal-marco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;min-width:0}
@media(max-width:760px){.ucal-marco{grid-template-columns:minmax(0,1fr)}}
.ucal-datos{display:grid;gap:14px;min-width:0}
.ucal-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;align-items:end}

/* Campos numéricos: cifras alineadas y del mismo ancho */
.ucal-numero{font-variant-numeric:tabular-nums}

/* Tarjeta de resultado: la cifra es lo primero que se ve */
.ucal-resultado{display:grid;gap:6px;padding:16px 18px;background:var(--uth-fondo);border:1px solid var(--uth-borde);border-radius:14px;min-width:0}
.ucal-etiqueta{margin:0;font-size:13px;color:var(--uth-tenue)}
.ucal-cifra-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.ucal-cifra{display:block;min-width:0;font-size:clamp(26px,5vw,38px);font-weight:650;line-height:1.15;color:var(--uth-texto);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ucal-detalle{margin:0;font-size:14px;line-height:1.5;color:var(--uth-suave);overflow-wrap:anywhere}
.ucal-detalle:empty{display:none}
.ucal-resultado .uth-error{margin:0}

/* Varios resultados pequeños bajo el principal (p. ej. interés y total) */
.ucal-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.ucal-cifras li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--uth-borde);border-radius:10px}
.ucal-cifras span{font-size:12px;color:var(--uth-tenue)}
.ucal-cifras strong{font-size:18px;font-variant-numeric:tabular-nums;color:var(--uth-texto);overflow-wrap:anywhere}

/* Tablas (amortización, notas, conversiones): desplazamiento propio */
.ucal-tabla-caja{max-height:min(420px,60vh);overflow:auto;border:1px solid var(--uth-borde);border-radius:12px;overscroll-behavior:contain}
.ucal-tabla{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ucal-tabla th,.ucal-tabla td{padding:8px 10px;border-bottom:1px solid var(--uth-borde);text-align:end;white-space:nowrap}
.ucal-tabla th:first-child,.ucal-tabla td:first-child{text-align:start}
.ucal-tabla thead th{position:sticky;top:0;background:var(--uth-sup);color:var(--uth-tenue);font-weight:600;font-size:12px}

/* Pantalla grande de reloj (temporizador, cronómetro, pomodoro) */
.ucal-reloj{margin:0;font-size:clamp(44px,12vw,96px);font-weight:600;line-height:1;text-align:center;letter-spacing:-.02em;color:var(--uth-texto);font-variant-numeric:tabular-nums}
.ucal-reloj.is-alerta{color:var(--uth-acento)}
@media(prefers-reduced-motion:no-preference){.ucal-reloj.is-alerta{animation:ucal-latido 1s ease-in-out infinite}}
@keyframes ucal-latido{50%{opacity:.55}}