.hora-rejilla { display: grid; gap: 0 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) {
  .hora-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .hora-resultado { position: sticky; top: 16px; }
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.campo { display: block; margin: 0 0 18px; border: 0; padding: 0; }
.campo > span, .campo > label, .campo legend { display: block; font-weight: 700; margin-bottom: 6px; }
.campo small { display: block; margin-top: 4px; font-size: .8rem; }
.en-linea { display: flex; flex-wrap: wrap; gap: 8px; }
.en-linea > input { flex: 1 1 160px; }
.mini { display: flex; flex-direction: column; flex: 1 1 140px; font-size: .85rem; gap: 4px; }
.opcion { display: flex; gap: 8px; align-items: center; margin: 4px 0; cursor: pointer; }

.hora-form input[type="text"], .hora-form select {
  font: inherit;
  font-size: 16px; /* evita el zoom automático en iPhone */
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--tinta);
  background: #fff;
  border: 2px solid var(--tinta);
  border-radius: 0;
}
.en-linea select { flex: 0 1 170px; width: auto; }
.hora-form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--tinta); }
.hora-form details summary { font-weight: 700; }

.boton-ejemplo {
  margin-top: 10px;
  font: inherit;
  font-size: .85rem;
  min-height: 40px;
  padding: 8px 12px;
  background: transparent;
  color: var(--tinta);
  border: 2px dashed var(--tinta);
  cursor: pointer;
}
.boton-ejemplo:hover { background: var(--resaltador); border-style: solid; }

.hora-resultado { min-height: 240px; }
.hora-resultado .etiqueta { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); }
.cifra-grande, .cifra-media { font-family: var(--titulo); font-stretch: 68%; font-weight: 900; line-height: 1; margin: 6px 0 10px; }
.cifra-grande { font-size: clamp(2.6rem, 9vw, 4.2rem); }
.cifra-media { font-size: clamp(2rem, 6vw, 2.8rem); }
.cuenta { font-size: .85rem; color: var(--apagado); }
.error { color: var(--alerta); font-weight: 700; }
.hora-resultado a { color: var(--luisa); }