/* Controles — botones, campos, pasos, miniaturas. */

/* Acción principal (Aplicar, Guardar) */
.accion {
  width: 100%;
  min-height: var(--m-accion-alto);
  border: 0;
  border-radius: var(--r-pastilla);
  background: var(--accion-fondo);
  color: var(--accion-texto);
  font-size: var(--f-md);
  font-weight: var(--f-peso-medio);
  transition: background var(--t-rapido) var(--curva-suave);
}
.accion:hover { background: var(--accion-fondo-hover); }
.accion[disabled] {
  background: var(--accion-fondo-inactiva);
  color: var(--accion-texto-inactiva);
  cursor: default;
}

.accion--secundaria {
  background: none;
  color: var(--texto-principal);
  box-shadow: inset 0 0 0 1px var(--accion-secundaria-borde);
}
.accion--secundaria:hover { background: var(--accion-secundaria-hover); }

/* Acción del umbral, sobre la noche */
.accion--umbral {
  width: auto;
  padding: 0 var(--e-10);
  background: var(--accion-umbral-fondo);
  color: var(--accion-umbral-texto);
  transition: background var(--t-medio) var(--curva-suave),
              transform var(--t-medio) var(--curva-suave);
}
.accion--umbral:hover {
  background: var(--accion-umbral-hover);
  transform: translateY(-1px);
}

/* Enlace discreto (Elegir del ordenador, Otra) */
.enlace {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--f-sm);
  color: var(--texto-secundario);
  border-bottom: 1px solid var(--borde-marcado);
  transition: color var(--t-instante) var(--curva-suave),
              border-color var(--t-instante) var(--curva-suave);
}
.enlace:hover { color: var(--texto-principal); border-color: var(--texto-principal); }

/* Paso numerado */
.paso {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.paso__titulo {
  display: flex;
  align-items: center;
  font-size: var(--f-s);
  color: var(--texto-tenue);
}
.paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--m-numero);
  height: var(--m-numero);
  margin-right: var(--e-3);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-circulo);
  font-size: var(--f-xs);
  color: var(--texto-tenue);
  flex: 0 0 auto;
}

/* Campo de texto */
.campo {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde-sutil);
  padding: var(--e-3) 2px;
  color: var(--texto-principal);
  font-family: inherit;
  font-size: var(--f-m);
}
.campo::placeholder { color: var(--texto-marcador); }
.campo:focus-visible { outline: none; border-bottom-color: var(--texto-principal); }

/* Miniaturas de ejemplo */
.miniaturas { display: flex; gap: var(--e-2); }

.miniatura {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  opacity: 0.6;
  border-radius: var(--r-m);
  overflow: hidden;
  transition: opacity var(--t-instante) var(--curva-suave),
              box-shadow var(--t-instante) var(--curva-suave);
}
.miniatura:hover { opacity: 0.9; }
.miniatura[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--texto-principal);
}
.miniatura img {
  width: var(--m-miniatura-ancho);
  height: var(--m-miniatura-alto);
  object-fit: cover;
}

:where(button, input):focus-visible {
  outline: 2px solid var(--texto-principal);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .miniatura img { height: var(--m-miniatura-alto-movil); }
}