/* Calculadoras de fechas, salud, unidades y horas (tanda 8, 4-oct-2026):
   detalles propios sobre utiles-calculadoras.css. Solo variables --uth-*
   (con su respaldo de tokens.css): ningún color fijo. Prefijo .ucal-. */

/* Campos de fecha, fecha y hora y búsqueda con el mismo aspecto que el resto */
.uth input[type=date],.uth input[type=datetime-local],.uth input[type=search]{width:100%;min-width:0;min-height:44px;padding:10px 12px;background:var(--uth-fondo);color:var(--uth-texto);border:1px solid var(--uth-borde);border-radius:10px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums}
.uth input[type=date]:focus-visible,.uth input[type=datetime-local]:focus-visible,.uth input[type=search]:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px}

/* Bloques secundarios (sumar a una fecha, timestamp a fecha…) */
.ucal-seccion{display:grid;gap:14px;margin:20px 0 0;padding:16px;border:1px solid var(--uth-borde);border-radius:14px;min-width:0}
.ucal-seccion legend,.ucal-titulo{padding:0 6px;font-size:14px;font-weight:650;color:var(--uth-texto)}
.ucal-titulo{margin:0;padding:0}

/* Avisos de salud y de horario de verano: visibles pero no de error */
.ucal-aviso{margin:0 0 14px;padding:10px 14px;border:1px solid var(--uth-aviso);border-radius:12px;background:color-mix(in srgb,var(--uth-aviso) 8%,transparent);color:var(--uth-texto);font-size:13px;line-height:1.5}
.ucal-datos .ucal-aviso{margin:0}

/* Fila de la tabla que corresponde al resultado */
.ucal-tabla tr.is-actual td{background:color-mix(in srgb,var(--uth-acento) 12%,transparent);color:var(--uth-texto);font-weight:600}
.ucal-tabla td{white-space:normal}
.ucal-tabla td:first-child{min-width:10em}
.ucal-tabla-caja{margin-top:16px}
.ucal-datos .ucal-tabla-caja{margin-top:0}
/* Tablas cortas (fechas clave, ciclos, categorías): enteras, sin scroll interior */
.ucal-tabla-caja.ucal-tabla-entera{max-height:none}
.ucal-tabla-entera thead th{position:static}

/* Conversor: unidades con el botón de intercambio entre ambas, pares rápidos */
.ucal-fila-unidades{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.ucal-fila-unidades>.uth-btn{margin-bottom:4px}
.ucal-pares{display:flex;flex-wrap:wrap;gap:8px}
.ucal-pares .uth-btn{flex-basis:auto}
.ucal-fila-buscar{grid-template-columns:minmax(0,1fr) auto}
/* Fecha y hora junto a la zona: se apilan antes de que el campo se recorte */
.ucal-fila-ancha{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* Zonas horarias: una tarjeta por zona */
.ucal-zonas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none}
.ucal-zona{display:grid;gap:4px;align-content:start;padding:12px 14px;background:var(--uth-fondo);border:1px solid var(--uth-borde);border-radius:12px;min-width:0}
.ucal-zona.is-origen{border-color:var(--uth-acento)}
.ucal-zona p{margin:0}
.ucal-zona-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.ucal-zona-nombre{font-size:15px;color:var(--uth-texto);overflow-wrap:anywhere}
.ucal-zona .ucal-quitar{flex:0 0 auto;min-width:36px;min-height:36px;padding:0;font-size:18px;line-height:1}
.ucal-zona-hora{font-size:clamp(26px,6vw,34px);font-weight:650;line-height:1.1;color:var(--uth-texto);font-variant-numeric:tabular-nums}
.ucal-zona-fecha{font-size:14px;color:var(--uth-suave)}
.ucal-zona-meta{font-size:12px;color:var(--uth-tenue);overflow-wrap:anywhere}
.ucal-etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ucal-etiquetas span{padding:2px 8px;border:1px solid var(--uth-borde);border-radius:999px;font-size:11px;color:var(--uth-suave)}

/* Timestamp: valor actual en vivo y filas con su botón de copiar */
.ucal-vivo-fila{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0;min-width:0}
.ucal-vivo{font-size:clamp(26px,6vw,38px);font-weight:650;color:var(--uth-texto);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ucal-vivo-ms{font-size:18px;color:var(--uth-suave);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ucal-cifras-copiar li{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.ucal-cifras-copiar li>span{grid-column:1/-1}
.ucal-cifras-copiar strong{font-size:15px}
.ucal-cifras-copiar .uth-btn{flex-basis:auto}

@media(max-width:480px){
 .ucal-fila-unidades{grid-template-columns:minmax(0,1fr)}
 .ucal-fila-unidades>.uth-btn{justify-self:start;margin:0}
 /* En el móvil, el valor (fechas ISO) ocupa toda la fila y «Copiar» va debajo */
 .ucal-cifras-copiar li{grid-template-columns:minmax(0,1fr)}
 .ucal-cifras-copiar .uth-btn{justify-self:start}
}
.ucal-cifras.ucal-cifras-copiar{grid-template-columns:minmax(0,1fr)}